add fuzzy search to ToolOntologies view; refactor search utilities

Removes unneeded parameters from functions, improves typing and definitions of variables in appropriate places.

The `searchToolsByKeys` function has been separated and a `searchObjectsByKeys` function has been added which is now very reusable anywhere!

Author: ahmedhamidawan

client/src/components/Panels/Common/ToolSearch.vue

@@ -4,19 +4,14 @@ import { storeToRefs } from "pinia";
 import { nextTick } from "vue";
 import { onMounted, onUnmounted, type PropType, watch } from "vue";
 
-import { FAVORITES_KEYS, searchToolsByKeys } from "@/components/Panels/utilities";
+import { FAVORITES_KEYS, searchTools } from "@/components/Panels/utilities";
 import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 import _l from "@/utils/localization";
 
-import type { ToolSearchKeys } from "../utilities";
-
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-// Note: These are ordered by result priority (exact matches very top; words matches very bottom)
-const KEYS: ToolSearchKeys = { exact: 5, startsWith: 4, name: 3, description: 2, combined: 1, wordMatch: 0 };
-
 const MIN_QUERY_LENGTH = 3;
 
 const props = defineProps({
@@ -64,17 +59,15 @@ const { currentFavorites } = storeToRefs(useUserStore());
 const toolStore = useToolStore();
 const { searchWorker } = storeToRefs(toolStore);
 
-interface RequestPaylod {
+interface RequestPayload {
     tools: Tool[];
-    keys: ToolSearchKeys;
     query: string;
-    panelView: string;
     currentPanel: Record<string, Tool | ToolSection>;
 }
 
 interface SearchEventQuery {
-    type: "searchToolsByKeys";
-    payload: RequestPaylod;
+    type: "searchTools";
+    payload: RequestPayload;
 }
 
 interface SearchEventClear {
@@ -116,9 +109,9 @@ interface ResponsePayload {
 
 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);
+    if (type === "searchTools") {
+        const { tools, query, currentPanel } = event.data.payload;
+        const { results, resultPanel, closestTerm } = searchTools(tools, query, currentPanel);
         // send the result back to the main thread
         onMessage({
             data: {
@@ -184,12 +177,10 @@ function checkQuery(q: string) {
             post({ type: "favoriteTools" });
         } else {
             post({
-                type: "searchToolsByKeys",
+                type: "searchTools",
                 payload: {
                     tools: props.toolsList,
-                    keys: KEYS,
                     query: q,
-                    panelView: props.currentPanelView,
                     currentPanel: props.currentPanel,
                 },
             });

client/src/components/Panels/ToolBox.test.js

@@ -4,7 +4,7 @@ import toolsList from "components/ToolsView/testData/toolsList";
 import toolsListInPanel from "components/ToolsView/testData/toolsListInPanel";
 import { useConfig } from "composables/config";
 
-import { createSortedResultObject, filterTools } from "./utilities";
+import { createSortedResultPanel, filterTools } from "./utilities";
 
 jest.mock("composables/config");
 useConfig.mockReturnValue({
@@ -41,7 +41,7 @@ describe("ToolBox", () => {
         const matchedTools = resultIds.map((id) => {
             return { id: id, sections: [], order: 0 };
         });
-        const toolsResultsSection = createSortedResultObject(matchedTools, toolPanelMock);
+        const toolsResultsSection = createSortedResultPanel(matchedTools, toolPanelMock);
         expect(toolsResultsSection.idResults).toEqual(resultIds);
         const resultSectionIds = Object.keys(toolsResultsSection.resultPanel);
         expect(resultSectionIds.length).toBe(2);

client/src/components/Panels/toolSearch.worker.js

@@ -2,14 +2,14 @@
  * A Web Worker that isolates the Tool Search into its own thread
  */
 
-import { searchToolsByKeys } from "./utilities";
+import { searchTools } from "./utilities";
 
 // listen for messages from the main thread
 self.addEventListener("message", (event) => {
     const { type, payload } = event.data;
-    if (type === "searchToolsByKeys") {
-        const { tools, keys, query, panelView, currentPanel } = payload;
-        const { results, resultPanel, closestTerm } = searchToolsByKeys(tools, keys, query, panelView, currentPanel);
+    if (type === "searchTools") {
+        const { tools, query, currentPanel } = payload;
+        const { results, resultPanel, closestTerm } = searchTools(tools, query, currentPanel);
         // send the result back to the main thread
         self.postMessage({
             type: "searchToolsByKeysResult",

…/src/components/Panels/utilities.test.js …/src/components/Panels/utilities.test.tsclient/src/components/Panels/utilities.test.js renamed to client/src/components/Panels/utilities.test.ts client/src/components/Panels/utilities.test.js renamed to client/src/components/Panels/utilities.test.ts

@@ -1,13 +1,16 @@
-import toolsList from "components/ToolsView/testData/toolsList";
-import toolsListInPanel from "components/ToolsView/testData/toolsListInPanel";
+// eslint-disable-next-line simple-import-sort/imports
+import toolsListUntyped from "@/components/ToolsView/testData/toolsList.json";
+import toolsListInPanelUntyped from "@/components/ToolsView/testData/toolsListInPanel.json";
 
 import {
-    createSortedResultObject,
+    createSortedResultPanel,
     createWhooshQuery,
     determineWidth,
     filterTools,
-    searchToolsByKeys,
+    searchObjectsByKeys,
+    type SearchCommonKeys,
 } from "./utilities";
+import type { Tool, ToolSection } from "@/stores/toolStore";
 
 describe("test helpers in tool searching utilities and panel handling", () => {
     it("panel width determination", () => {
@@ -18,6 +21,9 @@ describe("test helpers in tool searching utilities and panel handling", () => {
     });
 });
 
+const toolsList = toolsListUntyped as unknown as Tool[];
+const toolsListInPanel = toolsListInPanelUntyped as unknown as Record<string, Tool | ToolSection>;
+
 const tempToolPanel = {
     default: {
         "fasta/fastq": {
@@ -45,18 +51,35 @@ const tempToolsList = {
             id: "umi_tools_reduplicate",
             name: "UMI-tools reduplicate",
         },
-    },
+    } as unknown as Record<string, Tool>,
 };
 
 describe("test helpers in tool searching utilities", () => {
+    // Intentionally did not import the `searchTools` function from the util file
+    // to be able to test different key sort orders here.
+    function searchToolsByKeys(
+        tools: Tool[],
+        keys: SearchCommonKeys,
+        query: string,
+        currentPanel: Record<string, Tool | ToolSection>,
+    ): {
+        results: string[];
+        resultPanel: Record<string, Tool | ToolSection>;
+        closestTerm: string | null;
+    } {
+        const { matchedResults, closestTerm } = searchObjectsByKeys<Tool>(tools, keys, query, ["name", "description"]);
+        const { idResults, resultPanel } = createSortedResultPanel(matchedResults, currentPanel);
+        return { results: idResults, resultPanel: resultPanel, closestTerm: closestTerm };
+    }
+
     it("test parsing helper that converts settings to whoosh query", async () => {
         const settings = {
             name: "Filter",
             id: "__FILTER_FAILED_DATASETS__",
             help: "downstream",
             owner: "devteam",
         };
-        const q = createWhooshQuery(settings, "default", []);
+        const q = createWhooshQuery(settings);
 
         // OrGroup (at backend) on name, name_exact, description
         expect(q).toContain("name:(Filter) name_exact:(Filter) description:(Filter)");
@@ -69,7 +92,13 @@ describe("test helpers in tool searching utilities", () => {
     });
 
     it("test tool search helper that searches for tools given keys", async () => {
-        const searches = [
+        const searches: {
+            q: string;
+            expectedResults: string[];
+            keys: SearchCommonKeys;
+            tools: Tool[];
+            panel: Record<string, Tool | ToolSection>;
+        }[] = [
             {
                 // description prioritized
                 q: "collection",
@@ -165,7 +194,7 @@ describe("test helpers in tool searching utilities", () => {
             },
         ];
         searches.forEach((search) => {
-            const { results } = searchToolsByKeys(search.tools, search.keys, search.q, "default", search.panel);
+            const { results } = searchToolsByKeys(search.tools, search.keys, search.q, search.panel);
             expect(results).toEqual(search.expectedResults);
         });
     });
@@ -176,37 +205,38 @@ describe("test helpers in tool searching utilities", () => {
         // Testing if just names work with DL search
         const filterQueries = ["Fillter", "FILYER", " Fitler", " filtr"];
         filterQueries.forEach((q) => {
-            const { results, closestTerm } = searchToolsByKeys(toolsList, keys, q, "default", toolsListInPanel);
+            const { results, closestTerm } = searchToolsByKeys(toolsList, keys, q, toolsListInPanel);
             expect(results).toEqual(expectedResults);
             expect(closestTerm).toEqual("filter");
         });
         // Testing if names and description function with DL search
         let queries = ["datases from a collection", "from a colleection", "from a colleection"];
         queries.forEach((q) => {
-            const { results } = searchToolsByKeys(toolsList, keys, q, "default", toolsListInPanel);
+            const { results } = searchToolsByKeys(toolsList, keys, q, toolsListInPanel);
             expect(results).toEqual(expectedResults);
         });
         // Testing if different length queries correctly trigger changes in max DL distance
         queries = ["datae", "ppasetsfrom", "datass from a cppollection"];
         queries.forEach((q) => {
-            const { results } = searchToolsByKeys(toolsList, keys, q, "default", toolsListInPanel);
+            const { results } = searchToolsByKeys(toolsList, keys, q, toolsListInPanel);
             expect(results).toEqual(expectedResults);
         });
     });
 
     it("test tool filtering helpers on toolsList given list of ids", async () => {
         const ids = ["__FILTER_FAILED_DATASETS__", "liftOver1"];
         // check length of first section from imported const toolsList
-        expect(toolsListInPanel["collection_operations"].tools).toHaveLength(4);
+        const collectionOperationsSection = toolsListInPanel["collection_operations"] as ToolSection;
+        expect(collectionOperationsSection.tools).toHaveLength(4);
         // check length of same section from filtered toolsList
         const matchedTools = ids.map((id) => {
             return { id: id, sections: [], order: 0 };
         });
-        const toolResultsPanel = createSortedResultObject(matchedTools, toolsListInPanel);
-        const toolResultsSection = toolResultsPanel.resultPanel["collection_operations"];
+        const toolResultsPanel = createSortedResultPanel(matchedTools, toolsListInPanel);
+        const toolResultsSection = toolResultsPanel.resultPanel["collection_operations"] as ToolSection;
         expect(toolResultsSection.tools).toHaveLength(1);
         // check length of filtered tools (regardless of sections)
-        const toolsById = toolsList.reduce((acc, item) => {
+        const toolsById = toolsList.reduce<Record<string, Tool>>((acc, item) => {
             acc[item.id] = item;
             return acc;
         }, {});