Refactor Tool Panel views into one Toolbox

Changed the structure of toolbox received from the backend
ToolBox is now an object of ToolSections (and Tools) by id

Also consolidated `ToolBox` and `ToolBoxWorkflow` into one `ToolBox`
that is contained within a `ToolPanel`. Removed Tool panel providers
and ProviderAware tool boxes

client/src/components/ActivityBar/ActivityBar.vue

@@ -17,7 +17,7 @@ import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 
 const { config, isConfigLoaded } = useConfig();
@@ -211,7 +211,7 @@ function toggleContextMenu(evt: MouseEvent) {
             </b-nav>
         </div>
         <FlexPanel v-if="isActiveSideBar('tools')" key="tools" side="left" :collapsible="false">
-            <ToolBox />
+            <ToolPanel />
         </FlexPanel>
         <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
             <WorkflowBox />

client/src/components/Common/PublishedItem.vue

@@ -6,7 +6,7 @@ import { usePanels } from "@/composables/usePanels";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 interface Item {
@@ -54,7 +54,7 @@ const { showActivityBar, showToolbox } = usePanels();
     <div id="columns" class="d-flex">
         <ActivityBar v-if="showActivityBar" />
         <FlexPanel v-if="showToolbox" side="left">
-            <ToolBox />
+            <ToolPanel />
         </FlexPanel>
         <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
             <slot />

client/src/components/Panels/Buttons/FavoritesButton.vue

@@ -23,6 +23,7 @@ export default {
     props: {
         query: {
             type: String,
+            required: true,
         },
     },
     data() {
@@ -56,7 +57,7 @@ export default {
             if (this.toggle) {
                 this.$emit("onFavorites", this.searchKey);
             } else {
-                this.$emit("onFavorites", null);
+                this.$emit("onFavorites", "");
             }
         },
     },

client/src/components/Panels/Buttons/PanelViewMenuItem.vue

@@ -1,7 +1,7 @@
 <template>
-    <b-dropdown-item :data-panel-id="panelView.id" :active="isSelected" @click="onClick">
+    <b-dropdown-item class="ml-1" :title="title" :data-panel-id="panelView.id" :active="isSelected" @click="onClick">
         <span :class="['fa', `fa-${icon}`]" fixed-width />
-        <span v-localize class="ml-1" :title="title">{{ name }}</span>
+        <span v-localize>{{ name }}</span>
     </b-dropdown-item>
 </template>
 

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

@@ -1,31 +1,20 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, type PropType, type Ref, ref } from "vue";
+import { onMounted, onUnmounted, type PropType, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { getGalaxyInstance } from "@/app";
+import { type FilterSettings, type Tool, type ToolSection } from "@/stores/toolStore";
+import { useToolStore } from "@/stores/toolStore";
 import _l from "@/utils/localization";
 
-import { flattenTools } from "../utilities.js";
-
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 
 const router = useRouter();
 
-const KEYS = { exact: 3, name: 2, description: 1, combined: 0 };
+const KEYS = { exact: 4, startsWith: 3, name: 2, description: 1, combined: 0 };
 const FAVORITES = ["#favs", "#favorites", "#favourites"];
 const MIN_QUERY_LENGTH = 3;
 
-interface Tool {
-    name?: string;
-}
-interface FilterSettings {
-    [key: string]: any;
-    name?: string;
-    section?: string;
-    id?: string;
-    help?: string;
-}
-
 const props = defineProps({
     currentPanelView: {
         type: String,
@@ -51,47 +40,51 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    toolbox: {
+    toolsList: {
         type: Array as PropType<Tool[]>,
         required: true,
     },
+    currentPanel: {
+        type: Object as PropType<Record<string, Tool | ToolSection>>,
+        required: true,
+    },
 });
 
 const emit = defineEmits<{
     (e: "update:show-advanced", showAdvanced: boolean): void;
-    (e: "onResults", filtered: string[] | null, closestValue: string | null): void;
+    (
+        e: "onResults",
+        filtered: string[] | null,
+        sectioned: Record<string, Tool | ToolSection> | null,
+        closestValue: string | null
+    ): void;
     (e: "onQuery", query: string): void;
 }>();
 
+const toolStore = useToolStore();
+
 const filterSettings: Ref<FilterSettings> = ref({});
 const showHelp: Ref<boolean> = ref(false);
 const searchWorker: Ref<Worker | undefined> = ref(undefined);
 
-const sectionNames = computed(() => {
-    return props.toolbox.map((section) =>
-        section.name !== undefined && section.name !== "Uncategorized" ? section.name : ""
-    );
-});
-const sectionLabel = computed(() => {
-    return props.currentPanelView === "default" ? "section" : "ontology";
-});
-const toolsList = computed(() => {
-    return flattenTools(props.toolbox);
-});
+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));
     const Galaxy = getGalaxyInstance();
     const favoritesResults = Galaxy?.user.getFavorites().tools;
 
     searchWorker.value.onmessage = ({ data }) => {
-        const { type, payload, query, closestTerm } = data;
+        const { type, payload, sectioned, query, closestTerm } = data;
         if (type === "searchToolsByKeysResult" && query === props.query) {
-            emit("onResults", payload, closestTerm);
+            emit("onResults", payload, sectioned, closestTerm);
         } else if (type === "clearFilterResult") {
-            emit("onResults", null, null);
+            emit("onResults", null, null, null);
         } else if (type === "favoriteToolsResult") {
-            emit("onResults", favoritesResults, null);
+            emit("onResults", favoritesResults, null, null);
         }
     };
 });
@@ -110,9 +103,11 @@ function checkQuery(q: string) {
             post({
                 type: "searchToolsByKeys",
                 payload: {
-                    tools: toolsList.value,
+                    tools: props.toolsList,
                     keys: KEYS,
                     query: q,
+                    panelView: props.currentPanelView,
+                    currentPanel: props.currentPanel,
                 },
             });
         }
@@ -157,14 +152,22 @@ function onToggle(toggleAdvanced: boolean) {
             description="advanced tool filters"
             @keyup.enter="onSearch"
             @keyup.esc="onToggle(false)">
-            <small class="mt-1">Filter by {{ sectionLabel }}:</small>
+            <small class="mt-1">Filter by panel section:</small>
             <b-form-input
                 v-model="filterSettings['section']"
                 autocomplete="off"
                 size="sm"
-                :placeholder="`any ${sectionLabel}`"
+                :placeholder="`any section`"
                 list="sectionSelect" />
             <b-form-datalist id="sectionSelect" :options="sectionNames"></b-form-datalist>
+            <small class="mt-1">Filter by EDAM ontology:</small>
+            <b-form-input
+                v-model="filterSettings['ontology']"
+                autocomplete="off"
+                size="sm"
+                :placeholder="`any ontology`"
+                list="ontologySelect" />
+            <b-form-datalist id="ontologySelect" :options="ontologyList"></b-form-datalist>
             <small class="mt-1">Filter by id:</small>
             <b-form-input v-model="filterSettings['id']" size="sm" placeholder="any id" />
             <small class="mt-1">Filter by repository owner:</small>