Merge pull request #17039 from ahmedhamidawan/excessive_tool_panels_a…

…pi_calls_bug Prevent excessive `api/tool_panels` calls by keeping views in store
galaxyproject · Nov 28, 2023 · 143d35d · 143d35d
2 parents a5de730 + 3c38958
commit 143d35d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
diff --git 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,29 +33,21 @@ 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 initializeTools();
-        })
-        .catch((error) => {
-            console.error(error);
-        })
-        .finally(() => {
-            arePanelsFetched.value = true;
-        });
+    try {
+        await toolStore.fetchPanelViews();
+        await initializeTools();
+    } catch (error) {
+        console.error(error);
+    } finally {
+        arePanelsFetched.value = true;
+    }
 });
 
 watch(

diff --git 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,23 @@ export const useToolStore = defineStore("toolStore", () => {
         }
     }
 
+    async function fetchPanelViews() {
+        if (loading.value || (defaultPanelView.value && Object.keys(panelViews.value).length > 0)) {
+            return;
+        }
+        loading.value = true;
+        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);
+        } finally {
+            loading.value = false;
+        }
+    }
+
     // 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 +229,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 +268,9 @@ export const useToolStore = defineStore("toolStore", () => {
     return {
         toolsById,
         panel,
+        panelViews,
         currentPanelView,
+        defaultPanelView,
         loading,
         getToolForId,
         getToolNameById,
@@ -259,6 +280,7 @@ export const useToolStore = defineStore("toolStore", () => {
         sectionDatalist,
         fetchToolForId,
         fetchTools,
+        fetchPanelViews,
         initCurrentPanelView,
         setCurrentPanelView,
         fetchPanel,