keep tool search worker in toolStore to prevent multiple bundle fet…

…ches
ahmedhamidawan · Mar 27, 2024 · 0d75267 · 0d75267
1 parent f719222
commit 0d75267
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git 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,16 +112,19 @@ 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
     .sectionDatalist("ontology:edam_topics")
     .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
@@ -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
@@ -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,