Skip to content

Commit

Permalink
For jest tests - do not use Worker for tool search.
Browse files Browse the repository at this point in the history
Really cleans up the errors in the console for these tests.
  • Loading branch information
jmchilton committed Nov 26, 2024
1 parent 40388b4 commit 9575984
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 14 deletions.
1 change: 1 addition & 0 deletions client/src/components/Panels/Common/ToolSearch.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ describe("ToolSearch", () => {
showAdvanced: false,
toolsList: [],
currentPanel: {},
useWorker: false,
},
localVue,
router,
Expand Down
120 changes: 106 additions & 14 deletions client/src/components/Panels/Common/ToolSearch.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { BAlert } from "bootstrap-vue";
import { storeToRefs } from "pinia";
import { nextTick } from "vue";
import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, watch } from "vue";
import { useRouter } from "vue-router/composables";
import { searchToolsByKeys } from "@/components/Panels/utilities";
import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
import { useUserStore } from "@/stores/userStore";
import Filtering, { contains, type ValidFilter } from "@/utils/filtering";
Expand Down Expand Up @@ -56,6 +58,10 @@ const props = defineProps({
type: Object as PropType<Record<string, Tool | ToolSection>>,
required: true,
},
useWorker: {
type: Boolean,
default: false,
},
});
const emit = defineEmits<{
Expand Down Expand Up @@ -119,21 +125,101 @@ const ontologyList = computed(() =>
toolStore.sectionDatalist("ontology:edam_topics").concat(toolStore.sectionDatalist("ontology:edam_operations"))
);
onMounted(() => {
// initialize worker
if (!searchWorker.value) {
searchWorker.value = new Worker(new URL("components/Panels/toolSearch.worker.js", import.meta.url));
interface RequestPaylod {
tools: Tool[];
keys: ToolSearchKeys;
query: string;
panelView: string;
currentPanel: Record<string, Tool | ToolSection>;
}
interface SearchEventQuery {
type: "searchToolsByKeys";
payload: RequestPaylod;
}
interface SearchEventClear {
type: "clearFilter";
}
interface SearchEventFavorite {
type: "favoriteTools";
}
type SearchEventData = SearchEventQuery | SearchEventClear | SearchEventFavorite;
interface SearchEvent {
data: SearchEventData;
}
interface ResponsePayloadResults {
type: "searchToolsByKeysResult";
payload: string[];
query: string;
closestTerm: string | null;
sectioned: Record<string, Tool | ToolSection> | null;
}
interface ResponseClearFilter {
type: "clearFilterResult";
}
interface ResponseFavoriteTools {
type: "favoriteToolsResult";
}
type ResponsePayloadData = ResponsePayloadResults | ResponseClearFilter | ResponseFavoriteTools;
interface ResponsePayload {
type: "message";
data: ResponsePayloadData;
}
function handlePost(event: SearchEvent) {
const { type } = event.data;
if (type === "searchToolsByKeys") {
const { tools, keys, query, panelView, currentPanel } = event.data.payload;
const { results, resultPanel, closestTerm } = searchToolsByKeys(tools, keys, query, panelView, currentPanel);
// send the result back to the main thread
onMessage({
data: {
type: "searchToolsByKeysResult",
payload: results.slice(),
sectioned: resultPanel,
query: query,
closestTerm: closestTerm,
},
} as unknown as MessageEvent);
} else if (type === "clearFilter") {
onMessage({ data: { type: "clearFilterResult" } } as unknown as MessageEvent);
} else if (type === "favoriteTools") {
onMessage({ data: { type: "favoriteToolsResult" } } as unknown as MessageEvent);
}
searchWorker.value.onmessage = ({ data }) => {
const { type, payload, sectioned, query, closestTerm } = data;
if (type === "searchToolsByKeysResult" && query === props.query) {
}
function onMessage(event: MessageEvent) {
const type = (event as unknown as ResponsePayload).data.type;
if (type === "searchToolsByKeysResult") {
const data = event.data as ResponsePayloadResults;
const { payload, sectioned, query, closestTerm } = data;
if (query === props.query) {
emit("onResults", payload, sectioned, closestTerm);
} else if (type === "clearFilterResult") {
emit("onResults", null, null, null);
} else if (type === "favoriteToolsResult") {
emit("onResults", currentFavorites.value.tools, null, null);
}
};
} else if (type === "clearFilterResult") {
emit("onResults", null, null, null);
} else if (type === "favoriteToolsResult") {
emit("onResults", currentFavorites.value.tools, null, null);
}
}
onMounted(() => {
if (props.useWorker) {
// initialize worker
if (!searchWorker.value) {
searchWorker.value = new Worker(new URL("components/Panels/toolSearch.worker.js", import.meta.url));
}
searchWorker.value.onmessage = onMessage;
}
});
onUnmounted(() => {
Expand Down Expand Up @@ -175,7 +261,13 @@ function checkQuery(q: string) {
}
function post(message: object) {
searchWorker.value?.postMessage(message);
if (props.useWorker) {
searchWorker.value?.postMessage(message);
} else {
nextTick(() => {
handlePost({ data: message as SearchEventData });
});
}
}
function onAdvancedSearch(filters: any) {
Expand All @@ -184,7 +276,7 @@ function onAdvancedSearch(filters: any) {
</script>

<template>
<div v-if="searchWorker">
<div v-if="searchWorker || !props.userWorker">
<FilterMenu
v-if="props.enableAdvanced"
:class="!propShowAdvanced && 'mb-3'"
Expand Down
2 changes: 2 additions & 0 deletions client/src/components/Panels/ToolBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const props = defineProps({
editorWorkflows: { type: Array, default: null },
dataManagers: { type: Array, default: null },
moduleSections: { type: Array as PropType<Record<string, any>>, default: null },
useSearchWorker: { type: Boolean, default: true },
});
library.add(faEye, faEyeSlash);
Expand Down Expand Up @@ -200,6 +201,7 @@ function onToggle() {
:current-panel="localSectionsById"
:query="query"
:query-pending="queryPending"
:use-worker="useSearchWorker"
@onQuery="(q) => (query = q)"
@onResults="onResults" />
<section v-if="!propShowAdvanced">
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Panels/ToolPanel.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ describe("ToolPanel", () => {
editorWorkflows: null,
dataManagers: null,
moduleSections: null,
useSearchWorker: false,
},
localVue,
stubs: {
Expand Down
2 changes: 2 additions & 0 deletions client/src/components/Panels/ToolPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const props = defineProps({
editorWorkflows: { type: Array, default: null },
dataManagers: { type: Array, default: null },
moduleSections: { type: Array, default: null },
useSearchWorker: { type: Boolean, default: true },
});
const emit = defineEmits<{
Expand Down Expand Up @@ -201,6 +202,7 @@ watch(
:editor-workflows="editorWorkflows"
:data-managers="dataManagers"
:module-sections="moduleSections"
:use-search-worker="useSearchWorker"
@updatePanelView="updatePanelView"
@onInsertTool="onInsertTool"
@onInsertModule="onInsertModule"
Expand Down

0 comments on commit 9575984

Please sign in to comment.