change const variables into refs that are calculated on watch()

client/src/components/Panels/ToolBox.vue

@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
-import { computed, ComputedRef, type PropType, type Ref, ref } from "vue";
+import { computed, ComputedRef, type PropType, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { getGalaxyInstance } from "@/app";
@@ -55,6 +55,11 @@ const buttonText = ref("");
 const buttonIcon = ref("");
 const closestTerm: Ref<string | null> = ref(null);
 
+/** `toolsById` from `toolStore`, except it only has valid tools for `props.workflow` value */
+const localToolsById: Ref<Record<string, Tool>> = ref({});
+/** `currentPanel` from `toolStore`, except it only has valid tools and sections for `props.workflow` value */
+const localSectionsById: Ref<Record<string, Tool | ToolSectionType>> = ref({});
+
 const toolStore = useToolStore();
 
 const propShowAdvanced = computed({
@@ -88,25 +93,33 @@ const dataManagerSection = computed(() => {
     };
 });
 
-/** `toolsById` from `toolStore`, except it only has valid tools for `props.workflow` value */
-const localToolsById =
-    toolStore.toolsById && Object.keys(toolStore.toolsById).length > 0
-        ? getValidToolsInCurrentView(toolStore.toolsById, props.workflow, !props.workflow ? SECTION_IDS_TO_EXCLUDE : [])
-        : {};
-
-/** List of tool ids that are "valid"/relevant to the current view */
-const validToolIdsInCurrentView = Object.keys(localToolsById);
-// Looking within each `ToolSection`, and filtering on child elements
-const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, currentPanel.value);
-// Looking at each item in the panel now (not within each child)
-/** `currentPanel` from `toolStore`, except it only has valid tools and sections for `props.workflow` value */
-const localSectionsById = getValidPanelItems(
-    sectionEntries,
-    validToolIdsInCurrentView,
-    !props.workflow ? SECTION_IDS_TO_EXCLUDE : []
-) as Record<string, Tool | ToolSectionType>;
+// set the `localToolsById` and `localSectionsById` based on the current view (workflow or default tool panel)
+watch(
+    () => toolStore.toolsById,
+    (loadedToolsById) => {
+        // if the `toolStore` is loaded with tools
+        if (loadedToolsById && Object.keys(loadedToolsById).length > 0) {
+            localToolsById.value = getValidToolsInCurrentView(
+                toolStore.toolsById,
+                props.workflow,
+                !props.workflow ? SECTION_IDS_TO_EXCLUDE : []
+            );
+            /** List of tool ids that are "valid"/relevant to the current view */
+            const validToolIdsInCurrentView = Object.keys(localToolsById.value);
+            // Looking within each `ToolSection`, and filtering on child elements
+            const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, currentPanel.value);
+            // Looking at each item in the panel now (not within each child)
+            localSectionsById.value = getValidPanelItems(
+                sectionEntries,
+                validToolIdsInCurrentView,
+                !props.workflow ? SECTION_IDS_TO_EXCLUDE : []
+            ) as Record<string, Tool | ToolSectionType>;
+        }
+    },
+    { immediate: true }
+);
 
-const toolsList = computed(() => Object.values(localToolsById));
+const toolsList = computed(() => Object.values(localToolsById.value));
 
 /**
  * If not searching or no results, we show all tools in sections (default)
@@ -119,10 +132,10 @@ const localPanel: ComputedRef<Record<string, Tool | ToolSectionType> | null> = c
         if (showSections.value) {
             return resultPanel.value;
         } else {
-            return filterTools(localToolsById, results.value) as Record<string, Tool | ToolSectionType>;
+            return filterTools(localToolsById.value, results.value) as Record<string, Tool | ToolSectionType>;
         }
     } else {
-        return localSectionsById;
+        return localSectionsById.value;
     }
 });