From 6bb34b9d2583915be859c68938a13b55250dcc5c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 26 Mar 2024 18:08:15 -0500
Subject: [PATCH 1/6] Improve panel speed

Co-authored-by: mvdbeek <m.vandenbeek@gmail.com>
---
 client/src/components/Panels/ToolBox.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 29698f105af..939903b549d 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -135,8 +135,6 @@ const localPanel: ComputedRef<Record<string, Tool | ToolSectionType> | null> = c
     }
 });
 
-const sectionIds = computed(() => Object.keys(localPanel.value || {}));
-
 const favWorkflows = computed(() => {
     const Galaxy = getGalaxyInstance();
     const storedWorkflowMenuEntries = Galaxy && Galaxy.config.stored_workflow_menu_entries;
@@ -298,10 +296,10 @@ function setButtonText() {
                         :query-filter="queryFilter || undefined"
                         :disable-filter="true"
                         @onClick="onToolClick" />
-                    <div v-for="(sectionId, key) in sectionIds" :key="key">
+                    <div v-for="(panel, key) in localPanel" :key="key">
                         <ToolSection
-                            v-if="localPanel[sectionId]"
-                            :category="localPanel[sectionId] || {}"
+                            v-if="panel"
+                            :category="panel || {}"
                             :query-filter="queryFilter || undefined"
                             @onClick="onToolClick" />
                     </div>

From a7bff17fc43087ac8d0638a54ccf5d821f4f52f9 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Wed, 27 Mar 2024 09:31:50 +0100
Subject: [PATCH 2/6] Optimize getValidToolsInCurrentView

---
 client/src/components/Panels/utilities.ts | 26 ++++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 1c50b0e7754..06929b8ee0b 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -158,16 +158,22 @@ export function getValidToolsInCurrentView(
     isWorkflowPanel = false,
     excludedSectionIds: string[] = []
 ) {
-    const toolEntries = Object.entries(toolsById).filter(([, tool]) => {
-        // filter on non-hidden, non-disabled, and workflow compatibile (based on props.workflow)
-        return (
-            !tool.hidden &&
-            tool.disabled !== true &&
-            !(isWorkflowPanel && !tool.is_workflow_compatible) &&
-            !excludedSectionIds.includes(tool.panel_section_id)
-        );
-    });
-    return Object.fromEntries(toolEntries);
+    const excludeSet = new Set(excludedSectionIds);
+    const validTools: Record<string, Tool> = {};
+
+    for (const [toolId, tool] of Object.entries(toolsById)) {
+        const { panel_section_id, hidden, disabled, is_workflow_compatible } = tool;
+        if (
+            !excludeSet.has(panel_section_id) &&
+            !hidden &&
+            disabled !== true &&
+            !(isWorkflowPanel && !is_workflow_compatible)
+        ) {
+            validTools[toolId] = tool;
+        }
+    }
+
+    return validTools;
 }
 
 /** Looks in each section of `currentPanel` and filters `section.tools` on `validToolIdsInCurrentView` */

From 575806aac49924fd02aca08df92bd3237b23e7a6 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Wed, 27 Mar 2024 09:32:14 +0100
Subject: [PATCH 3/6] Optimize getValidToolsInEachSection

---
 client/src/components/Panels/utilities.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 06929b8ee0b..a22b60fa1a0 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -181,12 +181,16 @@ export function getValidToolsInEachSection(
     validToolIdsInCurrentView: string[],
     currentPanel: Record<string, Tool | ToolSection>
 ) {
+    // use a set for fast membership lookup
+    const idSet = new Set(validToolIdsInCurrentView);
     return Object.entries(currentPanel).map(([id, section]) => {
         const validatedSection = { ...section } as ToolSection;
-        if (validatedSection.tools && Array.isArray(validatedSection.tools)) {
+        // assign sectionTools to avoid repeated getter access
+        const sectionTools = validatedSection.tools;
+        if (sectionTools && Array.isArray(sectionTools)) {
             // filter on valid tools and panel labels in this section
-            validatedSection.tools = validatedSection.tools.filter((toolId) => {
-                if (typeof toolId === "string" && validToolIdsInCurrentView.includes(toolId)) {
+            validatedSection.tools = sectionTools.filter((toolId) => {
+                if (typeof toolId === "string" && idSet.has(toolId)) {
                     return true;
                 } else if (typeof toolId !== "string") {
                     // is a special case where there is a label within a section

From f719222ab33b36e2f677c74bb747f9825c08c718 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Wed, 27 Mar 2024 10:20:10 +0100
Subject: [PATCH 4/6] Make toolsById a shallowRef

A given tool never changes attributes (currently), so no need to track
reactivity for the whole object.
---
 client/src/stores/toolStore.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index 694322d3c0d..69f0d897da0 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -4,7 +4,7 @@
 
 import axios from "axios";
 import { defineStore } from "pinia";
-import Vue, { computed, Ref, ref } from "vue";
+import Vue, { computed, Ref, ref, shallowRef } from "vue";
 
 import { createWhooshQuery, filterTools, types_to_icons } from "@/components/Panels/utilities";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
@@ -75,7 +75,7 @@ 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 toolsById = shallowRef<Record<string, Tool>>({});
     const toolResults = ref<Record<string, string[]>>({});
     const panel = ref<Record<string, Record<string, Tool | ToolSection>>>({});
     const panelViews = ref<Record<string, PanelView>>({});

From 0d752671c28e5389b138d8f7f1b6ef2bff234361 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 27 Mar 2024 12:39:53 -0500
Subject: [PATCH 5/6] keep tool search worker in `toolStore` to prevent
 multiple bundle fetches

---
 .../components/Panels/Common/ToolSearch.vue   | 24 ++++++++++---------
 client/src/components/Panels/ToolPanel.vue    |  6 ++++-
 client/src/stores/toolStore.ts                |  8 +++++++
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 2b94c93a53a..b704cf203d5 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
+import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
@@ -12,6 +13,7 @@ import { type ToolSearchKeys } from "../utilities";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const router = useRouter();
 
@@ -67,8 +69,6 @@ const emit = defineEmits<{
     (e: "onQuery", query: string): void;
 }>();
 
-const searchWorker: Ref<Worker | undefined> = ref(undefined);
-
 const localFilterText = computed({
     get: () => {
         return props.query !== null ? props.query : "";
@@ -112,6 +112,7 @@ const ToolFilters: ComputedRef<Filtering<string>> = computed(() => new Filtering
 
 const { currentFavorites } = storeToRefs(useUserStore());
 const toolStore = useToolStore();
+const { searchWorker } = storeToRefs(toolStore);
 
 const sectionNames = toolStore.sectionDatalist("default").map((option: { value: string; text: string }) => option.text);
 const ontologyList = toolStore
@@ -119,9 +120,11 @@ const ontologyList = toolStore
     .concat(toolStore.sectionDatalist("ontology:edam_operations"));
 
 onMounted(() => {
-    searchWorker.value = new Worker(new URL("../toolSearch.worker.js", import.meta.url));
-
-    searchWorker.value.onmessage = ({ data }) => {
+    // initialize worker
+    if (!searchWorker.value) {
+        searchWorker.value = new Worker(new URL("components/Panels/toolSearch.worker.js", import.meta.url));
+    }
+    searchWorker.value!.onmessage = ({ data }) => {
         const { type, payload, sectioned, query, closestTerm } = data;
         if (type === "searchToolsByKeysResult" && query === props.query) {
             emit("onResults", payload, sectioned, closestTerm);
@@ -133,10 +136,6 @@ onMounted(() => {
     };
 });
 
-onUnmounted(() => {
-    searchWorker.value?.terminate();
-});
-
 watch(
     () => currentFavorites.value.tools,
     () => {
@@ -178,7 +177,7 @@ function onAdvancedSearch(filters: any) {
 </script>
 
 <template>
-    <div>
+    <div v-if="searchWorker">
         <FilterMenu
             v-if="props.enableAdvanced"
             :class="!propShowAdvanced && 'mb-3'"
@@ -245,4 +244,7 @@ function onAdvancedSearch(filters: any) {
             :placeholder="placeholder"
             @change="checkQuery" />
     </div>
+    <BAlert v-else class="mb-3" variant="info" show>
+        <LoadingSpan message="Loading Tool Search" />
+    </BAlert>
 </template>
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index fa7f599df5a..a478b08f7c7 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -34,7 +34,8 @@ const emit = defineEmits<{
 
 const arePanelsFetched = ref(false);
 const toolStore = useToolStore();
-const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panel, panelViews } = storeToRefs(toolStore);
+const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panel, panelViews, currentPanel } =
+    storeToRefs(toolStore);
 
 const loadingView = ref<string | undefined>(undefined);
 const query = ref("");
@@ -192,6 +193,9 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
             </b-badge>
         </div>
     </div>
+    <b-alert v-else-if="currentPanel" class="m-2" variant="info" show>
+        <LoadingSpan message="Loading Toolbox" />
+    </b-alert>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index 69f0d897da0..f53cd85b509 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -81,6 +81,13 @@ export const useToolStore = defineStore("toolStore", () => {
     const panelViews = ref<Record<string, PanelView>>({});
     const loading = ref(false);
 
+    const searchWorker = ref<Worker | undefined>(undefined);
+    // TODO: Where do we terminate the worker?
+    // onScopeDispose(() => {
+    //     searchWorker.value?.terminate();
+    //     searchWorker.value = undefined;
+    // });
+
     const getToolForId = computed(() => {
         return (toolId: string) => toolsById.value[toolId];
     });
@@ -278,6 +285,7 @@ export const useToolStore = defineStore("toolStore", () => {
         currentPanel,
         isPanelPopulated,
         sectionDatalist,
+        searchWorker,
         fetchToolForId,
         fetchTools,
         fetchPanelViews,

From 4f0f75309764e405d9d9991b22b8c7c584cc6df2 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 28 Mar 2024 13:40:59 -0500
Subject: [PATCH 6/6] set tool search worker to `null` to remove references
 while unmounted

---
 client/src/components/Panels/Common/ToolSearch.vue | 11 +++++++++--
 client/src/stores/toolStore.ts                     |  5 -----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index b704cf203d5..31592c803dc 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
+import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
@@ -124,7 +124,7 @@ onMounted(() => {
     if (!searchWorker.value) {
         searchWorker.value = new Worker(new URL("components/Panels/toolSearch.worker.js", import.meta.url));
     }
-    searchWorker.value!.onmessage = ({ data }) => {
+    searchWorker.value.onmessage = ({ data }) => {
         const { type, payload, sectioned, query, closestTerm } = data;
         if (type === "searchToolsByKeysResult" && query === props.query) {
             emit("onResults", payload, sectioned, closestTerm);
@@ -136,6 +136,13 @@ onMounted(() => {
     };
 });
 
+onUnmounted(() => {
+    // The worker is not terminated but it will not be listening to messages
+    if (searchWorker.value?.onmessage) {
+        searchWorker.value.onmessage = null;
+    }
+});
+
 watch(
     () => currentFavorites.value.tools,
     () => {
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index f53cd85b509..9d29b5ce7b0 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -82,11 +82,6 @@ export const useToolStore = defineStore("toolStore", () => {
     const loading = ref(false);
 
     const searchWorker = ref<Worker | undefined>(undefined);
-    // TODO: Where do we terminate the worker?
-    // onScopeDispose(() => {
-    //     searchWorker.value?.terminate();
-    //     searchWorker.value = undefined;
-    // });
 
     const getToolForId = computed(() => {
         return (toolId: string) => toolsById.value[toolId];