From e5ca43077f9e22330114a02f21d1973237637bba Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 15 Nov 2023 21:14:26 -0600
Subject: [PATCH] Prevent excessive `api/tool_panels` calls by keeping views in
 store

Also remove extra api call added by mistake in #17021
---
 client/src/components/Panels/ToolPanel.vue | 16 ++++------------
 client/src/stores/toolStore.ts             | 21 ++++++++++++++++++++-
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 21ce30b938af..a5c715d3d1f1 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -2,12 +2,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import axios from "axios";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, watch } from "vue";
 
-import { getAppRoot } from "@/onload";
-import { type PanelView, useToolStore } from "@/stores/toolStore";
+import { useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
 
 import { types_to_icons } from "./utilities";
@@ -35,21 +33,15 @@ const emit = defineEmits<{
 }>();
 
 const arePanelsFetched = ref(false);
-const defaultPanelView = ref("");
 const toolStore = useToolStore();
-const { currentPanelView, isPanelPopulated } = storeToRefs(toolStore);
+const { currentPanelView, defaultPanelView, isPanelPopulated, panelViews } = storeToRefs(toolStore);
 
 const query = ref("");
-const panelViews = ref<Record<string, PanelView> | null>(null);
 const showAdvanced = ref(false);
 
 onMounted(async () => {
-    await axios
-        .get(`${getAppRoot()}api/tool_panels`)
-        .then(async ({ data }) => {
-            const { default_panel_view, views } = data;
-            defaultPanelView.value = default_panel_view;
-            panelViews.value = views;
+    await toolStore.getPanelViews()
+        .then(async () => {
             await initializeTools();
         })
         .catch((error) => {
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index e274601ad619..2f615e1d114e 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -9,6 +9,7 @@ import Vue, { computed, Ref, ref } from "vue";
 import { createWhooshQuery, filterTools, types_to_icons } from "@/components/Panels/utilities";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import { getAppRoot } from "@/onload/loadConfig";
+import { rethrowSimple } from "@/utils/simple-error";
 
 export interface Tool {
     model_class: string;
@@ -73,9 +74,11 @@ export interface PanelView {
 
 export const useToolStore = defineStore("toolStore", () => {
     const currentPanelView: Ref<string> = useUserLocalStorage("tool-store-view", "");
+    const defaultPanelView: Ref<string> = ref("");
     const toolsById = ref<Record<string, Tool>>({});
     const toolResults = ref<Record<string, string[]>>({});
     const panel = ref<Record<string, Record<string, Tool | ToolSection>>>({});
+    const panelViews = ref<Record<string, PanelView>>({});
     const loading = ref(false);
 
     const getToolForId = computed(() => {
@@ -177,6 +180,20 @@ export const useToolStore = defineStore("toolStore", () => {
         }
     }
 
+    async function getPanelViews() {
+        if (defaultPanelView.value && Object.keys(panelViews.value).length > 0) {
+            return;
+        }
+        try {
+            const { data } = await axios.get(`${getAppRoot()}api/tool_panels`);
+            const { default_panel_view, views } = data;
+            defaultPanelView.value = default_panel_view;
+            panelViews.value = views;
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+
     // Used to initialize the ToolPanel with the default panel view for this site.
     async function initCurrentPanelView(siteDefaultPanelView: string) {
         if (!loading.value && !isPanelPopulated.value) {
@@ -209,7 +226,6 @@ export const useToolStore = defineStore("toolStore", () => {
             }
             loading.value = true;
             try {
-                await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
                 const { data } = await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
                 currentPanelView.value = panelView;
                 savePanelView(panelView, data);
@@ -249,7 +265,9 @@ export const useToolStore = defineStore("toolStore", () => {
     return {
         toolsById,
         panel,
+        panelViews,
         currentPanelView,
+        defaultPanelView,
         loading,
         getToolForId,
         getToolNameById,
@@ -259,6 +277,7 @@ export const useToolStore = defineStore("toolStore", () => {
         sectionDatalist,
         fetchToolForId,
         fetchTools,
+        getPanelViews,
         initCurrentPanelView,
         setCurrentPanelView,
         fetchPanel,