From 84961fe8806fe8061f0cd651cf296ac257ce3ecc Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 25 Sep 2023 17:13:00 -0500
Subject: [PATCH] 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
---
 .../components/ActivityBar/ActivityBar.vue    |   4 +-
 .../src/components/Common/PublishedItem.vue   |   4 +-
 .../Panels/Buttons/FavoritesButton.vue        |   3 +-
 .../Panels/Buttons/PanelViewMenuItem.vue      |   4 +-
 .../components/Panels/Common/ToolSearch.vue   |  73 +--
 .../components/Panels/Common/ToolSection.vue  | 307 +++++------
 .../Panels/ProviderAwareToolBox.vue           |  41 --
 .../Panels/ProviderAwareToolBoxWorkflow.vue   |  73 ---
 client/src/components/Panels/ToolBox.vue      | 500 +++++++++++-------
 .../src/components/Panels/ToolBoxWorkflow.vue | 211 --------
 client/src/components/Panels/ToolPanel.vue    | 121 +++++
 .../components/Panels/toolSearch.worker.js    |  12 +-
 client/src/components/Panels/utilities.js     | 294 +++++-----
 client/src/components/ToolsList/ToolsList.vue | 228 ++++----
 .../components/ToolsList/ToolsListItem.vue    |  12 +
 .../components/ToolsList/ToolsListTable.vue   |   8 +-
 .../Toolshed/RepositoryDetails/Index.vue      |  33 +-
 .../InstallationSettings.vue                  |   6 +-
 .../src/components/Workflow/Editor/Index.vue  |   9 +-
 .../Workflow/Published/WorkflowPublished.vue  |   4 +-
 .../WorkflowInvocationStep.vue                |   7 +-
 .../providers/ToolPanelViewProvider.js        |  40 --
 .../components/providers/storeProviders.js    |   1 -
 .../src/entry/analysis/modules/Analysis.vue   |   4 +-
 client/src/store/index.js                     |   2 -
 client/src/store/toolStore.js                 |  71 ---
 client/src/stores/toolStore.ts                | 239 +++++++++
 client/src/stores/workflowStore.ts            |   2 +
 lib/galaxy/tool_util/toolbox/base.py          |  33 ++
 lib/galaxy/tool_util/toolbox/panel.py         |  16 +-
 lib/galaxy/webapps/galaxy/api/tools.py        |   2 +-
 31 files changed, 1242 insertions(+), 1122 deletions(-)
 delete mode 100644 client/src/components/Panels/ProviderAwareToolBox.vue
 delete mode 100644 client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue
 delete mode 100644 client/src/components/Panels/ToolBoxWorkflow.vue
 create mode 100644 client/src/components/Panels/ToolPanel.vue
 delete mode 100644 client/src/components/providers/ToolPanelViewProvider.js
 delete mode 100644 client/src/store/toolStore.js
 create mode 100644 client/src/stores/toolStore.ts

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index e5b99c76f057..9dc3cf03f173 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/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 />
diff --git a/client/src/components/Common/PublishedItem.vue b/client/src/components/Common/PublishedItem.vue
index 49b9e130f2db..246cae7db0b4 100644
--- a/client/src/components/Common/PublishedItem.vue
+++ b/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 />
diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index cf2d29d51e31..95eff36c7166 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/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", "");
             }
         },
     },
diff --git a/client/src/components/Panels/Buttons/PanelViewMenuItem.vue b/client/src/components/Panels/Buttons/PanelViewMenuItem.vue
index 176a2c99fedb..c895bd6e500a 100644
--- a/client/src/components/Panels/Buttons/PanelViewMenuItem.vue
+++ b/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>
 
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 7c1d679bd4d2..062dc3ccab57 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/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,33 +40,37 @@ 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));
@@ -85,13 +78,13 @@ onMounted(() => {
     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>
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 94de1ff9fed9..66e7d912cff5 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,3 +1,158 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+
+import { eventHub } from "@/components/plugins/eventHub.js";
+import { useConfig } from "@/composables/config";
+import { type Tool as ToolType } from "@/stores/toolStore";
+import { useToolStore } from "@/stores/toolStore";
+import { type Workflow } from "@/stores/workflowStore";
+import ariaAlert from "@/utils/ariaAlert";
+
+import Tool from "./Tool.vue";
+import ToolPanelLabel from "./ToolPanelLabel.vue";
+import ToolPanelLinks from "./ToolPanelLinks.vue";
+
+const emit = defineEmits<{
+    (e: "onClick", tool: ToolType | Workflow, evt: Event): void;
+    (e: "onOperation", tool: ToolType | Workflow, evt: Event): void;
+}>();
+
+const props = defineProps({
+    category: {
+        type: Object,
+        required: true,
+    },
+    queryFilter: {
+        type: String,
+        default: "",
+    },
+    disableFilter: {
+        type: Boolean,
+    },
+    hideName: {
+        type: Boolean,
+    },
+    operationTitle: {
+        type: String,
+        default: "",
+    },
+    operationIcon: {
+        type: String,
+        default: "",
+    },
+    toolKey: {
+        type: String,
+        default: "",
+    },
+    sectionName: {
+        type: String,
+        default: "default",
+    },
+    expanded: {
+        type: Boolean,
+        default: false,
+    },
+    sortItems: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { config, isConfigLoaded } = useConfig();
+const toolStore = useToolStore();
+
+const elems = computed(() => {
+    if (props.category.elems !== undefined && props.category.elems.length > 0) {
+        return props.category.elems;
+    }
+    if (props.category.tools !== undefined && props.category.tools.length > 0) {
+        return props.category.tools.map((toolId: string) => toolStore.getToolForId(toolId));
+    }
+    return [];
+});
+
+const name = computed(() => props.category.title || props.category.name);
+const isSection = computed(() => props.category.tools !== undefined || props.category.elems !== undefined);
+const hasElements = computed(() => elems.value.length > 0);
+const title = computed(() => props.category.description);
+const links = computed(() => props.category.links || {});
+
+const opened = ref(props.expanded || checkFilter());
+
+const sortedElements = computed(() => {
+    // If this.config.sortTools is true, sort the tools alphabetically
+    // When administrators have manually inserted labels we respect
+    // the order set and hope for the best from the integrated
+    // panel.
+    if (
+        !checkFilter() &&
+        isConfigLoaded.value &&
+        config.value.toolbox_auto_sort === true &&
+        props.sortItems === true &&
+        !elems.value.some((el: ToolType) => el.text !== undefined && el.text !== "")
+    ) {
+        const elements = [...elems.value];
+        const sorted = elements.sort((a, b) => {
+            const aNameLower = a.name.toLowerCase();
+            const bNameLower = b.name.toLowerCase();
+            if (aNameLower > bNameLower) {
+                return 1;
+            } else if (aNameLower < bNameLower) {
+                return -1;
+            } else {
+                return 0;
+            }
+        });
+        return Object.entries(sorted);
+    } else {
+        return Object.entries(elems.value);
+    }
+});
+
+watch(
+    () => props.queryFilter,
+    () => {
+        opened.value = checkFilter();
+    }
+);
+
+watch(
+    () => opened.value,
+    (newVal: boolean, oldVal: boolean) => {
+        if (newVal !== oldVal) {
+            const currentState = newVal ? "opened" : "closed";
+            ariaAlert(`${name.value} tools menu ${currentState}`);
+        }
+    }
+);
+
+onMounted(() => {
+    eventHub.$on("openToolSection", openToolSection);
+});
+
+onUnmounted(() => {
+    eventHub.$off("openToolSection", openToolSection);
+});
+
+function openToolSection(sectionId: string) {
+    if (isSection.value && sectionId == props.category?.id) {
+        toggleMenu(true);
+    }
+}
+function checkFilter() {
+    return !props.disableFilter && !!props.queryFilter;
+}
+function onClick(tool: ToolType | Workflow, evt: Event) {
+    emit("onClick", tool, evt);
+}
+function onOperation(tool: ToolType | Workflow, evt: Event) {
+    emit("onOperation", tool, evt);
+}
+function toggleMenu(nextState = !opened.value) {
+    opened.value = nextState;
+}
+</script>
+
 <template>
     <div v-if="isSection && hasElements" class="tool-panel-section">
         <div
@@ -46,158 +201,6 @@
     </div>
 </template>
 
-<script>
-import { useConfig } from "composables/config";
-import ariaAlert from "utils/ariaAlert";
-
-import Tool from "./Tool";
-import ToolPanelLabel from "./ToolPanelLabel";
-import ToolPanelLinks from "./ToolPanelLinks";
-
-export default {
-    name: "ToolSection",
-    components: {
-        Tool,
-        ToolPanelLabel,
-        ToolPanelLinks,
-    },
-    props: {
-        category: {
-            type: Object,
-            required: true,
-        },
-        queryFilter: {
-            type: String,
-            default: "",
-        },
-        disableFilter: {
-            type: Boolean,
-        },
-        hideName: {
-            type: Boolean,
-        },
-        operationTitle: {
-            type: String,
-            default: "",
-        },
-        operationIcon: {
-            type: String,
-            default: "",
-        },
-        toolKey: {
-            type: String,
-            default: "",
-        },
-        sectionName: {
-            type: String,
-            default: "default",
-        },
-        expanded: {
-            type: Boolean,
-            default: false,
-        },
-        sortItems: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    setup() {
-        const { config, isConfigLoaded } = useConfig();
-        return {
-            config,
-            isConfigLoaded,
-        };
-    },
-    data() {
-        return {
-            opened: this.expanded || this.checkFilter(),
-            hover: false,
-        };
-    },
-    computed: {
-        name() {
-            return this.category.title || this.category.name;
-        },
-        isSection() {
-            return this.category.elems !== undefined;
-        },
-        hasElements() {
-            return this.category.elems && this.category.elems.length > 0;
-        },
-        title() {
-            return this.category.description;
-        },
-        links() {
-            return this.category.links || {};
-        },
-        sortedElements() {
-            // If this.config.sortTools is true, sort the tools alphabetically
-            // When administrators have manually inserted labels we respect
-            // the order set and hope for the best from the integrated
-            // panel.
-            if (
-                this.isConfigLoaded &&
-                this.config.toolbox_auto_sort === true &&
-                this.sortItems === true &&
-                !this.category.elems.some((el) => el.text !== undefined && el.text !== "")
-            ) {
-                const elements = [...this.category.elems];
-                const sorted = elements.sort((a, b) => {
-                    const aNameLower = a.name.toLowerCase();
-                    const bNameLower = b.name.toLowerCase();
-                    if (aNameLower > bNameLower) {
-                        return 1;
-                    } else if (aNameLower < bNameLower) {
-                        return -1;
-                    } else {
-                        return 0;
-                    }
-                });
-                return Object.entries(sorted);
-            } else {
-                return Object.entries(this.category.elems);
-            }
-        },
-    },
-    watch: {
-        queryFilter() {
-            this.opened = this.checkFilter();
-        },
-        opened(newVal, oldVal) {
-            if (newVal !== oldVal) {
-                const currentState = newVal ? "opened" : "closed";
-                ariaAlert(`${this.name} tools menu ${currentState}`);
-            }
-        },
-    },
-    created() {
-        this.eventHub.$on("openToolSection", this.openToolSection);
-    },
-    beforeDestroy() {
-        this.eventHub.$off("openToolSection", this.openToolSection);
-    },
-    methods: {
-        openToolSection(sectionId) {
-            if (this.isSection && sectionId == this.category?.id) {
-                this.toggleMenu(true);
-            }
-        },
-        checkFilter() {
-            return !this.disableFilter && !!this.queryFilter;
-        },
-        onClick(tool, evt) {
-            this.$emit("onClick", tool, evt);
-        },
-        onOperation(tool, evt) {
-            this.$emit("onOperation", tool, evt);
-        },
-        toggleMenu(nextState = !this.opened) {
-            this.opened = nextState;
-        },
-    },
-};
-</script>
-
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
diff --git a/client/src/components/Panels/ProviderAwareToolBox.vue b/client/src/components/Panels/ProviderAwareToolBox.vue
deleted file mode 100644
index 92458a76f73d..000000000000
--- a/client/src/components/Panels/ProviderAwareToolBox.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <ToolPanelViewProvider
-        v-if="isConfigLoaded && config.default_panel_view"
-        v-slot="{ currentPanel, currentPanelView }"
-        class="d-flex flex-column"
-        :panel-view="config.default_panel_view">
-        <ToolBox
-            v-if="currentPanelView"
-            :toolbox="currentPanel"
-            :panel-views="config.panel_views"
-            :current-panel-view="currentPanelView"
-            @updatePanelView="updatePanelView">
-        </ToolBox>
-    </ToolPanelViewProvider>
-</template>
-
-<script>
-import ToolPanelViewProvider from "components/providers/ToolPanelViewProvider";
-import { mapActions } from "vuex";
-
-import { useConfig } from "@/composables/config";
-
-import ToolBox from "./ToolBox";
-
-export default {
-    components: {
-        ToolBox,
-        ToolPanelViewProvider,
-    },
-    setup() {
-        const { config, isConfigLoaded } = useConfig(true);
-        return { config, isConfigLoaded };
-    },
-    methods: {
-        updatePanelView(panelView) {
-            this.setCurrentPanelView(panelView);
-        },
-        ...mapActions("panels", ["setCurrentPanelView"]),
-    },
-};
-</script>
diff --git a/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue b/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue
deleted file mode 100644
index c4048c560579..000000000000
--- a/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <ToolPanelViewProvider
-        v-if="isConfigLoaded && config.default_panel_view"
-        v-slot="{ currentPanel, currentPanelView }"
-        :panel-view="config.default_panel_view">
-        <ToolBoxWorkflow
-            v-if="currentPanelView"
-            :toolbox="currentPanel"
-            :panel-views="config.panel_views"
-            :current-panel-view="currentPanelView"
-            :workflows="workflows"
-            :data-managers="dataManagers"
-            :module-sections="moduleSections"
-            @updatePanelView="updatePanelView"
-            @onInsertTool="onInsertTool"
-            @onInsertModule="onInsertModule"
-            @onInsertWorkflow="onInsertWorkflow"
-            @onInsertWorkflowSteps="onInsertWorkflowSteps">
-        </ToolBoxWorkflow>
-    </ToolPanelViewProvider>
-</template>
-
-<script>
-import ToolPanelViewProvider from "components/providers/ToolPanelViewProvider";
-import { mapActions } from "vuex";
-
-import { useConfig } from "@/composables/config";
-
-import ToolBoxWorkflow from "./ToolBoxWorkflow";
-
-export default {
-    components: {
-        ToolBoxWorkflow,
-        ToolPanelViewProvider,
-    },
-    props: {
-        workflows: {
-            type: Array,
-            required: true,
-        },
-        dataManagers: {
-            type: Array,
-            required: true,
-        },
-        moduleSections: {
-            type: Array,
-            required: true,
-        },
-    },
-    setup() {
-        const { config, isConfigLoaded } = useConfig(true);
-        return { config, isConfigLoaded };
-    },
-    methods: {
-        updatePanelView(panelView) {
-            this.setCurrentPanelView(panelView);
-        },
-        ...mapActions("panels", ["setCurrentPanelView"]),
-        onInsertTool(toolId, toolName) {
-            this.$emit("onInsertTool", toolId, toolName);
-        },
-        onInsertModule(moduleName, moduleTitle) {
-            this.$emit("onInsertModule", moduleName, moduleTitle);
-        },
-        onInsertWorkflow(workflowId, workflowName) {
-            this.$emit("onInsertWorkflow", workflowId, workflowName);
-        },
-        onInsertWorkflowSteps(workflowId, workflowStepCount) {
-            this.$emit("onInsertWorkflowSteps", workflowId, workflowStepCount);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 30700602e42b..21352e49483f 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -1,219 +1,353 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { storeToRefs } from "pinia";
+import { computed, type PropType, type Ref, ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { getGalaxyInstance } from "@/app";
+import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { getAppRoot } from "@/onload/loadConfig";
+import { type Tool, type ToolSection as ToolSectionType } from "@/stores/toolStore";
+import { useToolStore } from "@/stores/toolStore";
+import { Workflow, type Workflow as WorkflowType } from "@/stores/workflowStore";
+import localize from "@/utils/localization";
+
+import { filterTools, isToolObject } from "./utilities.js";
+
+import ToolSearch from "./Common/ToolSearch.vue";
+import ToolSection from "./Common/ToolSection.vue";
+import UploadButton from "@/components/Upload/UploadButton.vue";
+
+const SECTION_IDS_TO_EXCLUDE = ["expression_tools"];
+
+const { openGlobalUploadModal } = useGlobalUploadModal();
+const router = useRouter();
+
+const emit = defineEmits<{
+    (e: "update:show-advanced", showAdvanced: boolean): void;
+    (e: "update:panel-query", query: string): void;
+    (e: "onInsertTool", toolId: string, toolName: string): void;
+    (e: "onInsertModule", moduleName: string, moduleTitle: string | undefined): void;
+    (e: "onInsertWorkflow", workflowLatestId: string | undefined, workflowName: string): void;
+    (e: "onInsertWorkflowSteps", workflowId: string, workflowStepCount: number | undefined): void;
+}>();
+
+const props = defineProps({
+    workflow: { type: Boolean, default: false },
+    panelView: { type: String, required: true },
+    showAdvanced: { type: Boolean, default: false, required: true },
+    panelQuery: { type: String, required: true },
+    editorWorkflows: { type: Array, default: null },
+    dataManagers: { type: Array, default: null },
+    moduleSections: { type: Array as PropType<Tool[]>, default: null },
+});
+
+library.add(faEye, faEyeSlash);
+
+const queryFilter: Ref<string | null> = ref(null);
+const queryPending = ref(false);
+const showSections = ref(props.workflow);
+const results: Ref<string[]> = ref([]);
+const resultPanel: Ref<Record<string, Tool | ToolSectionType> | null> = ref(null);
+const buttonText = ref("");
+const buttonIcon = ref("");
+const closestTerm: Ref<string | null> = ref(null);
+
+const toolStore = useToolStore();
+
+const propShowAdvanced = computed({
+    get: () => {
+        return props.showAdvanced;
+    },
+    set: (val: boolean) => {
+        emit("update:show-advanced", val);
+    },
+});
+const query = computed({
+    get: () => {
+        return props.panelQuery;
+    },
+    set: (q: string) => {
+        queryPending.value = true;
+        emit("update:panel-query", q);
+    },
+});
+
+const { currentPanel } = storeToRefs(toolStore);
+// const localPanelView = computed(() => (props.setDefault ? props.panelView.value : props.panelView));
+const hasResults = computed(() => results.value.length > 0);
+// const panelLoaded = computed(() => !!props.panelView && toolStore.panel[props.panelView] !== undefined);
+const queryTooShort = computed(() => query.value && query.value.length < 3);
+const queryFinished = computed(() => query.value && queryPending.value != true);
+
+const hasDataManagerSection = computed(() => props.workflow && props.dataManagers && props.dataManagers.length > 0);
+const dataManagerSection = computed(() => {
+    return {
+        name: localize("Data Managers"),
+        elems: props.dataManagers,
+    };
+});
+
+/** `toolsById` from `toolStore`, except it only has valid tools for `props.workflow` value */
+const localToolsById = computed(() => {
+    // Filter the items with is_compat === true
+    if (toolStore.toolsById && Object.keys(toolStore.toolsById).length > 0) {
+        const toolEntries = Object.entries(toolStore.toolsById).filter(
+            ([_, tool]: [string, any]) =>
+                !tool.hidden &&
+                tool.disabled !== true &&
+                (props.workflow ? tool.is_workflow_compatible : !SECTION_IDS_TO_EXCLUDE.includes(tool.panel_section_id))
+        );
+        return Object.fromEntries(toolEntries);
+    }
+    return {};
+});
+
+/** `currentPanel` from `toolStore`, except it only has valid tools and sections for `props.workflow` value */
+const localSectionsById = computed(() => {
+    const validToolIdsInCurrentView = Object.keys(localToolsById.value);
+    // for all values that are `ToolSection`s, filter out tools that aren't in `localToolsById`
+    const sectionEntries = Object.entries(currentPanel.value).map(([id, section]: [string, any]) => {
+        if (section.tools && Array.isArray(section.tools)) {
+            section.tools = section.tools.filter((tool: string) => validToolIdsInCurrentView.includes(tool));
+        }
+        return [id, section];
+    });
+
+    const updatedSectionEntries = sectionEntries.filter(([id, section]) => {
+        if (isToolObject(section) && validToolIdsInCurrentView.includes(id)) {
+            // is a `Tool` and is in `localToolsById`
+            return true;
+        } else if (section.tools === undefined) {
+            // is neither a `Tool` nor a `ToolSection`, maybe a `ToolSectionLabel`
+            return true;
+        } else if (section.tools.length > 0 && (props.workflow || !SECTION_IDS_TO_EXCLUDE.includes(id))) {
+            // is a `ToolSection` with tools; check workflow compatibility (based on props.workflow)
+            return true;
+        } else {
+            return false;
+        }
+    });
+    return Object.fromEntries(updatedSectionEntries);
+});
+
+const toolsList = computed(() => Object.values(localToolsById.value));
+
+/**
+ * If not searching or no results, we show all tools in sections (default)
+ *
+ * If we have results for search, we show tools in sections or just tools,
+ * based on whether `showSections` is true or false
+ */
+const localPanel = computed(() => {
+    if (hasResults.value) {
+        if (showSections.value) {
+            return resultPanel.value;
+        } else {
+            return filterTools(localToolsById.value, results.value);
+        }
+    } else {
+        return localSectionsById.value;
+    }
+});
+
+const sectionIds = computed(() => Object.keys(localPanel.value));
+
+const workflows = computed(() => {
+    if (props.workflow && props.editorWorkflows) {
+        return props.editorWorkflows;
+    } else {
+        const Galaxy = getGalaxyInstance();
+        const storedWorkflowMenuEntries = Galaxy && Galaxy.config.stored_workflow_menu_entries;
+        if (storedWorkflowMenuEntries) {
+            const returnedWfs = [];
+            if (!props.workflow) {
+                returnedWfs.push({
+                    title: localize("All workflows"),
+                    href: `${getAppRoot()}workflows/list`,
+                    id: "list",
+                });
+            }
+            const storedWfs = [
+                ...storedWorkflowMenuEntries.map((menuEntry: Workflow) => {
+                    return {
+                        id: menuEntry.id,
+                        title: menuEntry.name,
+                        href: `${getAppRoot()}workflows/run?id=${menuEntry.id}`,
+                    };
+                }),
+            ];
+            return returnedWfs.concat(storedWfs);
+        } else {
+            return [];
+        }
+    }
+});
+
+const workflowSection = computed(() => {
+    return {
+        name: localize("Workflows"),
+        elems: workflows.value,
+    };
+});
+
+function onInsertModule(module: Tool, event: Event) {
+    event.preventDefault();
+    emit("onInsertModule", module.name, module.title);
+}
+
+function onInsertWorkflow(workflow: WorkflowType | Tool, event: Event) {
+    event.preventDefault();
+    emit("onInsertWorkflow", workflow.latest_id, workflow.name);
+}
+
+function onInsertWorkflowSteps(workflow: WorkflowType | Tool) {
+    emit("onInsertWorkflowSteps", workflow.id, workflow.step_count);
+}
+
+function onToolClick(tool: Tool | WorkflowType, evt: Event) {
+    if (!props.workflow) {
+        if (tool.id === "upload1") {
+            evt.preventDefault();
+            openGlobalUploadModal();
+        } else if (tool.form_style === "regular") {
+            evt.preventDefault();
+            // encode spaces in tool.id
+            const toolId = tool.id;
+            router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=latest`);
+        }
+    } else {
+        evt.preventDefault();
+        emit("onInsertTool", tool.id, tool.name);
+    }
+}
+
+function onResults(
+    idResults: string[] | null,
+    sectioned: Record<string, Tool | ToolSectionType> | null,
+    closestMatch: string | null = null
+) {
+    if (idResults !== null && idResults.length > 0) {
+        results.value = idResults;
+        resultPanel.value = sectioned;
+        if (sectioned === null) {
+            showSections.value = false;
+        }
+    } else {
+        results.value = [];
+        resultPanel.value = null;
+    }
+    closestTerm.value = closestMatch;
+    queryFilter.value = hasResults.value ? query.value : null;
+    setButtonText();
+    queryPending.value = false;
+}
+
+function onToggle() {
+    showSections.value = !showSections.value;
+    setButtonText();
+}
+
+function setButtonText() {
+    buttonText.value = showSections.value ? localize("Hide Sections") : localize("Show Sections");
+    buttonIcon.value = showSections.value ? "fa-eye-slash" : "fa-eye";
+}
+</script>
+
 <template>
-    <div class="unified-panel" aria-labelledby="toolbox-heading">
-        <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-if="!showAdvanced" id="toolbox-heading" v-localize class="m-1 h-sm">Tools</h2>
-                    <h2 v-else id="toolbox-heading" v-localize class="m-1 h-sm">Advanced Tool Search</h2>
-                    <div class="panel-header-buttons">
-                        <b-button-group>
-                            <FavoritesButton v-if="!showAdvanced" :query="query" @onFavorites="onQuery" />
-                            <PanelViewButton
-                                v-if="panelViews && Object.keys(panelViews).length > 1"
-                                :panel-views="panelViews"
-                                :current-panel-view="currentPanelView"
-                                @updatePanelView="updatePanelView" />
-                        </b-button-group>
-                    </div>
-                </nav>
-            </div>
-        </div>
+    <div class="unified-panel">
         <div class="unified-panel-controls">
             <ToolSearch
-                enable-advanced
-                :current-panel-view="currentPanelView"
-                :placeholder="titleSearchTools"
-                :show-advanced.sync="showAdvanced"
-                :toolbox="tools"
+                :enable-advanced="!props.workflow"
+                :current-panel-view="props.panelView || ''"
+                :placeholder="localize('search tools')"
+                :show-advanced.sync="propShowAdvanced"
+                :tools-list="toolsList"
+                :current-panel="localSectionsById"
                 :query="query"
                 :query-pending="queryPending"
-                @onQuery="onQuery"
+                @onQuery="(q) => (query = q)"
                 @onResults="onResults" />
-            <section v-if="!showAdvanced">
+            <section v-if="!propShowAdvanced">
                 <UploadButton />
-                <div v-if="hasResults" class="pb-2">
+                <div v-if="hasResults && resultPanel" class="pb-2">
                     <b-button size="sm" class="w-100" @click="onToggle">
-                        <span :class="buttonIcon" />
+                        <FontAwesomeIcon :icon="buttonIcon" />
                         <span class="mr-1">{{ buttonText }}</span>
                     </b-button>
                 </div>
                 <div v-else-if="queryTooShort" class="pb-2">
                     <b-badge class="alert-danger w-100">Search string too short!</b-badge>
                 </div>
-                <div v-else-if="queryFinished" class="pb-2">
+                <div v-else-if="queryFinished && !hasResults" class="pb-2">
                     <b-badge class="alert-danger w-100">No results found!</b-badge>
                 </div>
                 <div v-if="closestTerm" class="pb-2">
                     <b-badge class="alert-danger w-100">
                         Did you mean:
                         <i>
-                            <a href="javascript:void(0)" @click="onQuery(closestTerm)">{{ closestTerm }}</a>
+                            <a href="javascript:void(0)" @click="query = closestTerm">{{ closestTerm }}</a>
                         </i>
                         ?
                     </b-badge>
                 </div>
             </section>
         </div>
-        <div v-if="!showAdvanced" class="unified-panel-body">
+        <div v-if="!propShowAdvanced" class="unified-panel-body">
             <div class="toolMenuContainer">
-                <div class="toolMenu">
+                <div v-if="localPanel" class="toolMenu">
+                    <div v-if="props.workflow">
+                        <ToolSection
+                            v-for="category in moduleSections"
+                            :key="category.name"
+                            :hide-name="true"
+                            :category="category"
+                            tool-key="name"
+                            :section-name="category.name"
+                            :query-filter="queryFilter"
+                            :disable-filter="true"
+                            @onClick="onInsertModule" />
+                    </div>
                     <ToolSection
-                        v-for="(section, key) in sections"
-                        :key="key"
-                        :category="section"
+                        v-if="hasDataManagerSection"
+                        :category="dataManagerSection"
                         :query-filter="queryFilter"
-                        @onClick="onOpen" />
+                        :disable-filter="true"
+                        @onClick="onToolClick" />
+                    <div v-for="(sectionId, key) in sectionIds" :key="key">
+                        <ToolSection
+                            v-if="localPanel[sectionId]"
+                            :category="localPanel[sectionId] || {}"
+                            :query-filter="queryFilter"
+                            @onClick="onToolClick" />
+                    </div>
                 </div>
-                <ToolSection :category="{ text: 'Workflows' }" />
-                <div id="internal-workflows" class="toolSectionBody">
-                    <div class="toolSectionBg" />
-                    <div v-for="wf in workflows" :key="wf.id" class="toolTitle">
-                        <a class="title-link" :href="wf.href">{{ wf.title }}</a>
+                <div v-if="workflows.length > 0">
+                    <ToolSection
+                        v-if="props.workflow"
+                        :key="workflowSection.name"
+                        :category="workflowSection"
+                        section-name="workflows"
+                        :sort-items="false"
+                        operation-icon="fa fa-files-o"
+                        operation-title="Insert individual steps."
+                        :query-filter="queryFilter"
+                        :disable-filter="true"
+                        @onClick="onInsertWorkflow"
+                        @onOperation="onInsertWorkflowSteps" />
+                    <div v-else>
+                        <ToolSection :category="{ text: 'Workflows' }" />
+                        <div id="internal-workflows" class="toolSectionBody">
+                            <div class="toolSectionBg" />
+                            <div v-for="wf in workflows" :key="wf.id" class="toolTitle">
+                                <a class="title-link" :href="wf.href">{{ wf.title }}</a>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
-
-<script>
-import { getGalaxyInstance } from "app";
-import UploadButton from "components/Upload/UploadButton";
-import { useGlobalUploadModal } from "composables/globalUploadModal";
-import { getAppRoot } from "onload";
-import _l from "utils/localization";
-
-import FavoritesButton from "./Buttons/FavoritesButton";
-import PanelViewButton from "./Buttons/PanelViewButton";
-import ToolSearch from "./Common/ToolSearch";
-import ToolSection from "./Common/ToolSection";
-import { filterTools, filterToolSections, hasResults, hideToolsSection } from "./utilities";
-
-export default {
-    components: {
-        UploadButton,
-        FavoritesButton,
-        PanelViewButton,
-        ToolSection,
-        ToolSearch,
-    },
-    props: {
-        toolbox: {
-            type: Array,
-            required: true,
-        },
-        panelViews: {
-            type: Object,
-        },
-        currentPanelView: {
-            type: String,
-        },
-    },
-    setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        return { openGlobalUploadModal };
-    },
-    data() {
-        return {
-            closestTerm: null,
-            query: null,
-            results: null,
-            queryFilter: null,
-            queryPending: false,
-            showSections: false,
-            showAdvanced: false,
-            buttonText: "",
-            buttonIcon: "",
-            titleSearchTools: _l("search tools"),
-        };
-    },
-    computed: {
-        tools() {
-            return hideToolsSection(this.toolbox);
-        },
-        queryTooShort() {
-            return this.query && this.query.length < 3;
-        },
-        queryFinished() {
-            return this.query && this.queryPending != true;
-        },
-        sections() {
-            if (this.showSections) {
-                return filterToolSections(this.tools, this.results);
-            } else {
-                return hasResults(this.results) ? filterTools(this.tools, this.results) : this.tools;
-            }
-        },
-        isUser() {
-            const Galaxy = getGalaxyInstance();
-            return !!(Galaxy.user && Galaxy.user.id);
-        },
-        workflows() {
-            const Galaxy = getGalaxyInstance();
-            const storedWorkflowMenuEntries = Galaxy && Galaxy.config.stored_workflow_menu_entries;
-            if (storedWorkflowMenuEntries) {
-                return [
-                    {
-                        title: _l("All workflows"),
-                        href: `${getAppRoot()}workflows/list`,
-                        id: "list",
-                    },
-                    ...storedWorkflowMenuEntries.map((menuEntry) => {
-                        return {
-                            id: menuEntry.id,
-                            title: menuEntry.name,
-                            href: `${getAppRoot()}workflows/run?id=${menuEntry.id}`,
-                        };
-                    }),
-                ];
-            } else {
-                return [];
-            }
-        },
-        hasResults() {
-            return this.results && this.results.length > 0;
-        },
-    },
-    methods: {
-        onQuery(q) {
-            this.query = q;
-            this.queryPending = true;
-        },
-        onResults(results, closestTerm = null) {
-            this.results = results;
-            this.closestTerm = closestTerm;
-            this.queryFilter = this.hasResults ? this.query : null;
-            this.setButtonText();
-            this.queryPending = false;
-        },
-        onOpen(tool, evt) {
-            if (tool.id === "upload1") {
-                evt.preventDefault();
-                this.openGlobalUploadModal();
-            } else if (tool.form_style === "regular") {
-                evt.preventDefault();
-                // encode spaces in tool.id
-                const toolId = tool.id;
-                this.$router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=latest`);
-            }
-        },
-        onToggle() {
-            this.showSections = !this.showSections;
-            this.setButtonText();
-        },
-        setButtonText() {
-            this.buttonText = this.showSections ? _l("Hide Sections") : _l("Show Sections");
-            this.buttonIcon = this.showSections ? "fa fa-eye-slash" : "fa fa-eye";
-        },
-        updatePanelView(panelView) {
-            this.$emit("updatePanelView", panelView);
-        },
-    },
-};
-</script>
-
-<style scoped>
-.toolTitle {
-    overflow-wrap: anywhere;
-}
-</style>
diff --git a/client/src/components/Panels/ToolBoxWorkflow.vue b/client/src/components/Panels/ToolBoxWorkflow.vue
deleted file mode 100644
index c23f5c7b4e0e..000000000000
--- a/client/src/components/Panels/ToolBoxWorkflow.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-    <div class="unified-panel">
-        <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-localize class="m-1 h-sm">Tools</h2>
-                    <div class="panel-header-buttons">
-                        <PanelViewButton
-                            v-if="panelViews && Object.keys(panelViews).length > 1"
-                            :panel-views="panelViews"
-                            :current-panel-view="currentPanelView"
-                            @updatePanelView="updatePanelView" />
-                    </div>
-                </nav>
-            </div>
-        </div>
-        <div class="unified-panel-controls">
-            <ToolSearch
-                v-b-tooltip.hover
-                aria-haspopup="true"
-                :current-panel-view="currentPanelView"
-                placeholder="search tools"
-                :toolbox="workflowTools"
-                :query="query"
-                :query-pending="queryPending"
-                @onQuery="onQuery"
-                @onResults="onResults" />
-            <div v-if="closestTerm" class="pb-2">
-                <b-badge class="alert-danger w-100">
-                    Did you mean:
-                    <i>
-                        <a href="javascript:void(0)" @click="onQuery(closestTerm)">{{ closestTerm }}</a>
-                    </i>
-                    ?
-                </b-badge>
-            </div>
-            <div v-else-if="queryTooShort" class="pb-2">
-                <b-badge class="alert-danger w-100">Search string too short!</b-badge>
-            </div>
-            <div v-else-if="noResults" class="pb-2">
-                <b-badge class="alert-danger w-100">No results found!</b-badge>
-            </div>
-        </div>
-        <div class="unified-panel-body">
-            <div class="toolMenuContainer">
-                <ToolSection
-                    v-for="category in moduleSections"
-                    :key="category.name"
-                    :hide-name="true"
-                    :category="category"
-                    tool-key="name"
-                    :section-name="category.name"
-                    :query-filter="queryFilter"
-                    :disable-filter="true"
-                    @onClick="onInsertModule" />
-                <ToolSection
-                    v-if="hasDataManagerSection"
-                    :key="dataManagerSection.id"
-                    :category="dataManagerSection"
-                    :query-filter="queryFilter"
-                    :disable-filter="true"
-                    @onClick="onInsertTool" />
-                <ToolSection
-                    v-for="section in sections"
-                    :key="section.id"
-                    :category="section"
-                    :query-filter="queryFilter"
-                    @onClick="onInsertTool" />
-                <ToolSection
-                    v-if="hasWorkflowSection"
-                    :key="workflowSection.name"
-                    :category="workflowSection"
-                    section-name="workflows"
-                    :sort-items="false"
-                    operation-icon="fa fa-files-o"
-                    operation-title="Insert individual steps."
-                    :query-filter="queryFilter"
-                    :disable-filter="true"
-                    @onClick="onInsertWorkflow"
-                    @onOperation="onInsertWorkflowSteps" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import _l from "utils/localization";
-
-import PanelViewButton from "./Buttons/PanelViewButton";
-import ToolSearch from "./Common/ToolSearch";
-import ToolSection from "./Common/ToolSection";
-import { filterToolSections, removeDisabledTools } from "./utilities";
-
-export default {
-    name: "ToolBox",
-    components: {
-        ToolSection,
-        ToolSearch,
-        PanelViewButton,
-    },
-    props: {
-        toolbox: {
-            type: Array,
-            required: true,
-        },
-        panelViews: {
-            type: Object,
-        },
-        currentPanelView: {
-            type: String,
-        },
-        workflows: {
-            type: Array,
-            required: true,
-        },
-        dataManagers: {
-            type: Array,
-            required: true,
-        },
-        moduleSections: {
-            type: Array,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            closestTerm: null,
-            query: null,
-            queryPending: false,
-            queryFilter: null,
-            results: null,
-        };
-    },
-    computed: {
-        queryTooShort() {
-            return this.query && this.query.length < 3;
-        },
-        noResults() {
-            return this.query && (!this.results || this.results.length === 0);
-        },
-        hasWorkflowSection() {
-            return this.workflows.length > 0;
-        },
-        workflowSection() {
-            return {
-                name: _l("Workflows"),
-                elems: this.workflows,
-            };
-        },
-        hasDataManagerSection() {
-            return this.dataManagers.length > 0;
-        },
-        dataManagerSection() {
-            return {
-                name: _l("Data Managers"),
-                elems: this.dataManagers,
-            };
-        },
-        sections() {
-            return filterToolSections(this.workflowTools, this.results);
-        },
-        toolsLayout() {
-            return this.toolbox.map((section) => {
-                return {
-                    ...section,
-                    disabled: !section.elems && !section.is_workflow_compatible,
-                    elems:
-                        section.elems &&
-                        section.elems.map((el) => {
-                            el.disabled = !el.is_workflow_compatible;
-                            return el;
-                        }),
-                };
-            });
-        },
-        workflowTools() {
-            return removeDisabledTools(this.toolsLayout);
-        },
-    },
-    methods: {
-        onQuery(query) {
-            this.query = query;
-            this.queryPending = true;
-        },
-        onResults(results, closestTerm = null) {
-            this.results = results;
-            this.closestTerm = closestTerm;
-            this.queryFilter = !this.noResults ? this.query : null;
-            this.queryPending = false;
-        },
-        onInsertTool(tool, evt) {
-            evt.preventDefault();
-            this.$emit("onInsertTool", tool.id, tool.name);
-        },
-        onInsertModule(module, evt) {
-            evt.preventDefault();
-            this.$emit("onInsertModule", module.name, module.title);
-        },
-        onInsertWorkflow(workflow, evt) {
-            evt.preventDefault();
-            this.$emit("onInsertWorkflow", workflow.latest_id, workflow.name);
-        },
-        onInsertWorkflowSteps(workflow) {
-            this.$emit("onInsertWorkflowSteps", workflow.id, workflow.step_count);
-        },
-        updatePanelView(panelView) {
-            this.$emit("updatePanelView", panelView);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
new file mode 100644
index 000000000000..d19c4dfbf5ac
--- /dev/null
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { ref, watch, watchEffect } from "vue";
+
+import { useConfig } from "@/composables/config";
+import { useToolStore } from "@/stores/toolStore";
+import localize from "@/utils/localization";
+
+import LoadingSpan from "../LoadingSpan.vue";
+import FavoritesButton from "./Buttons/FavoritesButton.vue";
+import PanelViewButton from "./Buttons/PanelViewButton.vue";
+import ToolBox from "./ToolBox.vue";
+import Heading from "@/components/Common/Heading.vue";
+
+const props = defineProps({
+    workflow: { type: Boolean, default: false },
+    editorWorkflows: { type: Array, default: null },
+    dataManagers: { type: Array, default: null },
+    moduleSections: { type: Array, default: null },
+});
+
+const emit = defineEmits<{
+    (e: "onInsertTool", toolId: string, toolName: string): void;
+    (e: "onInsertModule", moduleName: string, moduleTitle: string | undefined): void;
+    (e: "onInsertWorkflow", workflowLatestId: string | undefined, workflowName: string): void;
+    (e: "onInsertWorkflowSteps", workflowId: string, workflowStepCount: number | undefined): void;
+}>();
+
+const { isConfigLoaded, config } = useConfig();
+const toolStore = useToolStore();
+const { currentPanelView, isPanelPopulated } = storeToRefs(toolStore);
+
+const query = ref("");
+const panelViews = ref(null);
+const showAdvanced = ref(false);
+
+watch(
+    () => currentPanelView.value,
+    () => {
+        query.value = "";
+    }
+);
+
+watchEffect(async () => {
+    if (isConfigLoaded.value) {
+        panelViews.value = config.value.panel_views;
+        try {
+            await toolStore.fetchTools();
+            await toolStore.initCurrentPanelView(config.value.default_panel_view);
+        } catch (error: any) {
+            console.error("ToolPanel - Load tools error:", error);
+        }
+    }
+});
+
+function updatePanelView(panelView: string) {
+    toolStore.setCurrentPanelView(panelView);
+}
+
+function onInsertTool(toolId: string, toolName: string) {
+    emit("onInsertTool", toolId, toolName);
+}
+
+function onInsertModule(moduleName: string, moduleTitle: string | undefined) {
+    emit("onInsertModule", moduleName, moduleTitle);
+}
+
+function onInsertWorkflow(workflowId: string | undefined, workflowName: string) {
+    emit("onInsertWorkflow", workflowId, workflowName);
+}
+
+function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | undefined) {
+    emit("onInsertWorkflowSteps", workflowId, workflowStepCount);
+}
+</script>
+
+<template>
+    <div class="unified-panel" aria-labelledby="toolbox-heading">
+        <div v-if="isConfigLoaded" unselectable="on">
+            <div class="unified-panel-header-inner">
+                <nav class="d-flex justify-content-between mx-3 my-2">
+                    <Heading v-if="!showAdvanced" id="toolbox-heading" h2 inline size="sm">{{
+                        localize("Tools")
+                    }}</Heading>
+                    <Heading v-else id="toolbox-heading" h2 inline size="sm">{{
+                        localize("Advanced Tool Search")
+                    }}</Heading>
+                    <div class="panel-header-buttons">
+                        <b-button-group>
+                            <FavoritesButton v-if="!showAdvanced" :query="query" @onFavorites="(q) => (query = q)" />
+                            <PanelViewButton
+                                v-if="panelViews && Object.keys(panelViews).length > 1"
+                                :panel-views="panelViews"
+                                :current-panel-view="currentPanelView"
+                                @updatePanelView="updatePanelView" />
+                        </b-button-group>
+                    </div>
+                </nav>
+            </div>
+        </div>
+        <ToolBox
+            v-if="isPanelPopulated"
+            :workflow="props.workflow"
+            :panel-query.sync="query"
+            :panel-view="currentPanelView"
+            :show-advanced.sync="showAdvanced"
+            :editor-workflows="editorWorkflows"
+            :data-managers="dataManagers"
+            :module-sections="moduleSections"
+            @updatePanelView="updatePanelView"
+            @onInsertTool="onInsertTool"
+            @onInsertModule="onInsertModule"
+            @onInsertWorkflow="onInsertWorkflow"
+            @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+        <div v-else>
+            <b-badge class="alert-info w-100">
+                <LoadingSpan message="Loading Toolbox" />
+            </b-badge>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Panels/toolSearch.worker.js b/client/src/components/Panels/toolSearch.worker.js
index 83e3663ad4cd..1b70b4b084c8 100644
--- a/client/src/components/Panels/toolSearch.worker.js
+++ b/client/src/components/Panels/toolSearch.worker.js
@@ -8,10 +8,16 @@ import { searchToolsByKeys } from "./utilities";
 self.addEventListener("message", (event) => {
     const { type, payload } = event.data;
     if (type === "searchToolsByKeys") {
-        const { tools, keys, query } = payload;
-        const { results, closestTerm } = searchToolsByKeys(tools, keys, query);
+        const { tools, keys, query, panelView, currentPanel } = payload;
+        const { results, resultPanel, closestTerm } = searchToolsByKeys(tools, keys, query, panelView, currentPanel);
         // send the result back to the main thread
-        self.postMessage({ type: "searchToolsByKeysResult", payload: results, query: query, closestTerm: closestTerm });
+        self.postMessage({
+            type: "searchToolsByKeysResult",
+            payload: results,
+            sectioned: resultPanel,
+            query: query,
+            closestTerm: closestTerm,
+        });
     } else if (type === "clearFilter") {
         self.postMessage({ type: "clearFilterResult" });
     } else if (type === "favoriteTools") {
diff --git a/client/src/components/Panels/utilities.js b/client/src/components/Panels/utilities.js
index 26e7823adc76..7971b4bf1e64 100644
--- a/client/src/components/Panels/utilities.js
+++ b/client/src/components/Panels/utilities.js
@@ -1,13 +1,23 @@
 /**
  * Utilities file for Panel Searches (panel/client search + advanced/backend search)
+ * Note: Any mention of "DL" in this file refers to the Demerau-Levenshtein distance algorithm
  */
 import { orderBy } from "lodash";
 import levenshteinDistance from "utils/levenshtein";
+import { localize } from "utils/localization";
 
 const TOOL_ID_KEYS = ["id", "tool_id"];
 const TOOLS_RESULTS_SORT_LABEL = "apiSort";
 const TOOLS_RESULTS_SECTIONS_HIDE = ["Expression Tools"];
 const STRING_REPLACEMENTS = [" ", "-", "(", ")", "'", ":", `"`];
+const MINIMUM_DL_LENGTH = 5; // for Demerau-Levenshtein distance
+const UNSECTIONED_SECTION = {
+    // to return a section for unsectioned tools
+    model_class: "ToolSection",
+    id: "unsectioned",
+    name: localize("Unsectioned Tools"),
+    description: localize("Tools that don't appear under any section in the unsearched panel"),
+};
 
 // Converts filterSettings { key: value } to query = "key:value"
 export function createWorkflowQuery(filterSettings) {
@@ -36,7 +46,7 @@ export function createWorkflowQuery(filterSettings) {
  *      createWhooshQuery(filterSettings, 'ontology:edam_topics', toolbox)
  *      return query = "(name:(skew) name_exact:(skew) description:(skew)) AND (edam_topics:(topic_0797) AND )"
  */
-export function createWhooshQuery(filterSettings, panelView, toolbox) {
+export function createWhooshQuery(filterSettings) {
     let query = "(";
     // add description+name_exact fields = name, to do a combined OrGroup at backend
     const name = filterSettings["name"];
@@ -47,20 +57,10 @@ export function createWhooshQuery(filterSettings, panelView, toolbox) {
     }
     query += ") AND (";
     for (const [key, filterValue] of Object.entries(filterSettings)) {
-        // get ontology keys if view is not default
-        if (key === "section" && panelView !== "default") {
-            const ontology = toolbox.find(({ name }) => name && name.toLowerCase().match(filterValue.toLowerCase()));
-            if (ontology) {
-                let ontologyKey = "";
-                if (panelView === "ontology:edam_operations") {
-                    ontologyKey = "edam_operations";
-                } else if (panelView === "ontology:edam_topics") {
-                    ontologyKey = "edam_topics";
-                }
-                query += ontologyKey + ":(" + ontology.id + ") AND ";
-            } else {
-                query += key + ":(" + filterValue + ") AND ";
-            }
+        if (key === "ontology" && filterValue.includes("operation")) {
+            query += "edam_operations:(" + filterValue + ") AND ";
+        } else if (key === "ontology" && filterValue.includes("topic")) {
+            query += "edam_topics:(" + filterValue + ") AND ";
         } else if (key == "id") {
             query += "id_exact:(" + filterValue + ") AND ";
         } else if (key != "name") {
@@ -84,39 +84,16 @@ export function determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, dire
     return Math.max(minWidth, Math.min(maxWidth, newWidth));
 }
 
-// Given toolbox and search results, returns filtered tool results
-export function filterTools(tools, results) {
-    let toolsResults = [];
-    tools = flattenTools(tools);
-    toolsResults = mapToolsResults(tools, results);
-    toolsResults = sortToolsResults(toolsResults);
-    toolsResults = removeDuplicateResults(toolsResults);
-    return toolsResults;
-}
-
-// Given toolbox and search results, returns filtered tool results by sections
-export function filterToolSections(tools, results) {
-    let toolsResults = [];
-    let toolsResultsSection = [];
-    if (hasResults(results)) {
-        toolsResults = tools.map((section) => {
-            tools = flattenToolsSection(section);
-            toolsResultsSection = mapToolsResults(tools, results);
-            toolsResultsSection = sortToolsResults(toolsResultsSection);
-            return {
-                ...section,
-                elems: toolsResultsSection,
-            };
-        });
-        toolsResults = deleteEmptyToolsSections(toolsResults, results);
-    } else {
-        toolsResults = tools;
+// Given toolbox and search results, returns filtered tool results (by id)
+export function filterTools(toolsById, results) {
+    const filteredTools = {};
+    for (const id of results) {
+        const localTool = toolsById[id];
+        if (localTool !== undefined) {
+            filteredTools[id] = localTool;
+        }
     }
-    return toolsResults;
-}
-
-export function hasResults(results) {
-    return Array.isArray(results) && results.length > 0;
+    return filteredTools;
 }
 
 /**
@@ -127,38 +104,57 @@ export function hasResults(results) {
  * @param {Array} tools - toolbox
  * @param {Object} keys - keys to sort and search results by
  * @param {String} query - a search query
+ * @param {String} panelView - panel view, to find section_id for each tool
+ * @param {Object} currentPanel - current ToolPanel with { section_id: { tools: [tool ids] }, ... }
  * @param {Boolean} usesDL - Optional: used for recursive call with DL if no string.match()
- * @returns tool ids sorted by order of keys that are being searched (+ closest matching term if DL)
+ * @returns an object containing
+ * - results: array of tool ids that match the query
+ * - resultPanel: a ToolPanel with only the results for the current panelView
+ * - closestTerm: Optional: closest matching term for DL (in case no match with query)
+ *
+ * all sorted by order of keys that are being searched (+ closest matching term if DL)
  */
-export function searchToolsByKeys(tools, keys, query, usesDL = false) {
-    let returnedTools = [];
+export function searchToolsByKeys(tools, keys, query, panelView = "default", currentPanel, usesDL = false) {
+    const matchedTools = [];
     let closestTerm = null;
+    // if user's query = "id:1234" or "tool_id:1234", only search for id
     const id = processForId(query, TOOL_ID_KEYS);
     if (id) {
         query = id;
         keys = { id: 1 };
     }
     const queryValue = sanitizeString(query.trim().toLowerCase(), STRING_REPLACEMENTS);
-    const minimumQueryLength = 5; // for DL
     for (const tool of tools) {
         for (const key of Object.keys(keys)) {
             if (tool[key] || key === "combined") {
                 let actualValue = "";
+                // key = "combined" is a special case for searching name + description
                 if (key === "combined") {
                     actualValue = (tool.name + tool.description).trim().toLowerCase();
                 } else {
                     actualValue = tool[key].trim().toLowerCase();
                 }
+
+                // get all (space separated) words in actualValue for tool (for DL)
                 const actualValueWords = actualValue.split(" ");
                 actualValue = sanitizeString(actualValue, STRING_REPLACEMENTS);
+
                 // do we care for exact matches && is it an exact match ?
-                const order = keys.exact && actualValue === queryValue ? keys.exact : keys[key];
+                let order = keys.exact && actualValue === queryValue ? keys.exact : keys[key];
+                // do we care for startsWith && does it actualValue start with query ?
+                order =
+                    keys.startsWith && order !== keys.exact && key === "name" && actualValue.startsWith(queryValue)
+                        ? keys.startsWith
+                        : order;
+
                 if (!usesDL && actualValue.match(queryValue)) {
-                    returnedTools.push({ id: tool.id, order });
+                    // if string.match() returns true, matching tool found
+                    matchedTools.push({ id: tool.id, sections: getPanelSectionsForTool(tool, panelView), order });
                     break;
                 } else if (usesDL) {
+                    // if string.match() returns false, try DL distance once to see if there is a closestSubstring
                     let substring = null;
-                    if ((key == "name" || key == "description") && queryValue.length >= minimumQueryLength) {
+                    if ((key == "name" || key == "description") && queryValue.length >= MINIMUM_DL_LENGTH) {
                         substring = closestSubstring(queryValue, actualValue);
                     }
                     // there is a closestSubstring: matching tool found
@@ -168,7 +164,12 @@ export function searchToolsByKeys(tools, keys, query, usesDL = false) {
                         if (foundTerm && (!closestTerm || (closestTerm && foundTerm.length < closestTerm.length))) {
                             closestTerm = foundTerm;
                         }
-                        returnedTools.push({ id: tool.id, order, closestTerm });
+                        matchedTools.push({
+                            id: tool.id,
+                            sections: getPanelSectionsForTool(tool, panelView),
+                            order,
+                            closestTerm,
+                        });
                         break;
                     }
                 }
@@ -176,40 +177,95 @@ export function searchToolsByKeys(tools, keys, query, usesDL = false) {
         }
     }
     // no results with string.match(): recursive call with usesDL
-    if (!id && !usesDL && returnedTools.length == 0) {
-        return searchToolsByKeys(tools, keys, query, true);
+    if (!id && !usesDL && matchedTools.length == 0) {
+        return searchToolsByKeys(tools, keys, query, panelView, currentPanel, true);
     }
-    // sorting results by indexed order of keys
-    returnedTools = orderBy(returnedTools, ["order"], ["desc"]).map((tool) => tool.id);
-    return { results: returnedTools, closestTerm: closestTerm };
+    const { idResults, resultPanel } = createSortedResultObject(matchedTools, currentPanel);
+    return { results: idResults, resultPanel: resultPanel, closestTerm: closestTerm };
 }
 
-export function flattenTools(tools) {
-    let normalizedTools = [];
-    tools.forEach((section) => {
-        normalizedTools = normalizedTools.concat(flattenToolsSection(section));
-    });
-    return normalizedTools;
-}
+/**
+ * Orders the matchedTools by order of keys that are being searched, and creates a resultPanel
+ * @param {Object} matchedTools containing { id: tool id, sections: [section ids], order: order }
+ * @param {Object} currentPanel current ToolPanel for current view
+ * @returns an object containing
+ * - idResults: array of tool ids that match the query
+ * - resultPanel: a ToolPanel with only the results
+ */
+function createSortedResultObject(matchedTools, currentPanel) {
+    const idResults = [];
+    // creating a sectioned results object ({section_id: [tool ids], ...}), keeping
+    // track of the best version of each tool, and also sorting by indexed order of keys
+    const resultPanel = orderBy(matchedTools, ["order"], ["desc"]).reduce((acc, tool) => {
+        // we either found specific section(s) for tool, or we need to search all sections
+        const sections = tool.sections.length !== 0 ? tool.sections : Object.keys(currentPanel);
+        for (const section of sections) {
+            let toolAdded = false;
+            const existingPanelItem = currentPanel[section];
+            if (existingPanelItem) {
+                if (existingPanelItem.tools && existingPanelItem.tools.includes(tool.id)) {
+                    // it has tools so is a section, and it has the tool we're looking for
 
-export function hideToolsSection(tools) {
-    return tools.filter((section) => !TOOLS_RESULTS_SECTIONS_HIDE.includes(section.name));
-}
+                    // if we haven't seen this section yet, create it in the resultPanel
+                    if (!acc[section]) {
+                        acc[section] = { ...existingPanelItem };
+                        acc[section].tools = [];
+                    }
+                    acc[section].tools.push(tool.id);
+                    toolAdded = true;
+                } else if (isToolObject(existingPanelItem) && existingPanelItem.id === tool.id) {
+                    // it is a tool, and it is the tool we're looking for
 
-export function removeDisabledTools(tools) {
-    return tools.filter((section) => {
-        if (section.model_class === "ToolSectionLabel") {
-            return true;
-        } else if (!section.elems && section.disabled) {
-            return false;
-        } else if (section.elems) {
-            section.elems = section.elems.filter((el) => !el.disabled);
-            if (!section.elems.length) {
-                return false;
+                    // put in it the "Unsectioned Tools" section (if it doesn't exist, create it)
+                    const unsectionedId = UNSECTIONED_SECTION.id;
+                    if (!acc[unsectionedId]) {
+                        acc[unsectionedId] = { ...UNSECTIONED_SECTION };
+                        acc[unsectionedId].tools = [];
+                    }
+                    acc[unsectionedId].tools.push(tool.id);
+                    toolAdded = true;
+                }
+                if (toolAdded && !idResults.includes(tool.id)) {
+                    idResults.push(tool.id);
+                }
             }
         }
-        return true;
-    });
+        return acc;
+    }, {});
+    return { idResults, resultPanel };
+}
+
+/**
+ * Gets the section(s) a tool belongs to for a given panelView.
+ * Unless view=`default`, all other views must be of format `class:view_type`,
+ * where `Tool` object has a `view_name` key containing an array of section ids.
+ * e.g.: view = `ontology:edam_operations` => `Tool.edam_operations = [section ids]`.
+ *
+ * Therefore, this would not handle the case where view = `ontology:edam_merged`, since
+ * Tool.edam_merged is not a valid key, and we would just return `[uncategorized]`.
+ *
+ * Just prevents looking through whole panel to find section id for tool,
+ * we still end up doing that (in `createSortedResultObject`) in case we return [] here
+ * @param {Tool} tool
+ * @param {String} panelView
+ * @returns Array of section ids
+ */
+function getPanelSectionsForTool(tool, panelView) {
+    if (panelView === "default" && tool.panel_section_id) {
+        if (tool.panel_section_id.startsWith("tool_")) {
+            return [tool.panel_section_id.split("tool_")[1]];
+        } else {
+            return [tool.panel_section_id];
+        }
+    } else if (panelView !== "default") {
+        const sectionType = panelView.split(":")[1]; // e.g.: edam_operations
+        if (tool[sectionType] && tool[sectionType].length !== 0) {
+            return tool[sectionType];
+        } else {
+            return ["uncategorized"];
+        }
+    }
+    return [];
 }
 
 /**
@@ -246,11 +302,16 @@ function closestSubstring(query, actualStr) {
     return null;
 }
 
-function isToolObject(tool) {
+export function isToolObject(tool) {
     // toolbox overhaul with typing will simplify this dramatically...
     // Right now, our shorthand is that tools have no 'text', and don't match
     // the model_class of the section/label.
-    if (!tool.text && tool.model_class !== "ToolSectionLabel" && tool.model_class !== "ToolSection") {
+    if (
+        !tool.text &&
+        tool.model_class !== "ToolSectionLabel" &&
+        tool.model_class !== "ToolSection" &&
+        tool.tools === undefined
+    ) {
         return true;
     }
     return false;
@@ -300,68 +361,3 @@ function processForId(query, keys = ["id"]) {
     }
     return null;
 }
-
-function flattenToolsSection(section) {
-    const flattenTools = [];
-    if (section.elems) {
-        section.elems.forEach((tool) => {
-            if (isToolObject(tool)) {
-                flattenTools.push(tool);
-            }
-        });
-    } else if (isToolObject(section)) {
-        // This might be a top-level section-less tool and not actually a
-        // section.
-        flattenTools.push(section);
-    }
-    return flattenTools;
-}
-
-function mapToolsResults(tools, results) {
-    const toolsResults = tools
-        .filter((tool) => !tool.text && results.includes(tool.id))
-        .map((tool) => {
-            Object.assign(tool, setSort(tool, results));
-            return tool;
-        });
-    return toolsResults;
-}
-
-function removeDuplicateResults(results) {
-    const uniqueTools = [];
-    return results.filter((tool) => {
-        if (!uniqueTools.includes(tool.id)) {
-            uniqueTools.push(tool.id);
-            return true;
-        } else {
-            return false;
-        }
-    });
-}
-
-function setSort(tool, results) {
-    return { [TOOLS_RESULTS_SORT_LABEL]: results.indexOf(tool.id) };
-}
-
-function sortToolsResults(toolsResults) {
-    return orderBy(toolsResults, [TOOLS_RESULTS_SORT_LABEL], ["asc"]);
-}
-
-function deleteEmptyToolsSections(tools, results) {
-    let isSection = false;
-    let isMatchedTool = false;
-    tools = tools
-        .filter((section) => {
-            isSection = section.elems && section.elems.length > 0;
-            isMatchedTool = !section.text && results.includes(section.id);
-            return isSection || isMatchedTool;
-        })
-        .sort((sectionPrevious, sectionCurrent) => {
-            if (sectionPrevious.elems.length == 0 || sectionCurrent.elems.length == 0) {
-                return 0;
-            }
-            return results.indexOf(sectionPrevious.elems[0].id) - results.indexOf(sectionCurrent.elems[0].id);
-        });
-
-    return tools;
-}
diff --git a/client/src/components/ToolsList/ToolsList.vue b/client/src/components/ToolsList/ToolsList.vue
index 9bbef40dd155..e0db3592ad89 100644
--- a/client/src/components/ToolsList/ToolsList.vue
+++ b/client/src/components/ToolsList/ToolsList.vue
@@ -1,136 +1,126 @@
-<template>
-    <ToolsProvider
-        v-slot="{ loading, result: itemsLoaded }"
-        :filter-settings="filterSettings"
-        :toolbox="toolbox"
-        :panel-view="panelView">
-        <section class="tools-list">
-            <div class="mb-2">
-                <h1 class="h-lg">Search Results</h1>
-                <span v-if="itemsLoaded.length !== 0" class="row">
-                    <span v-if="filterCount" class="col d-inline-block d-flex align-items-baseline flex-gapx-1">
-                        Found {{ itemsLoaded.length }} tools for
-                        <b-button id="popover-filters" class="ui-link">
-                            {{ filterCount }}
-                            {{ filterCount === 1 ? "filter" : "filters" }}.
-                        </b-button>
-                        <b-popover target="popover-filters" triggers="hover focus" placement="bottom">
-                            <template v-slot:title>Filters</template>
-                            <div v-for="(value, filter) in filterSettings" :key="filter">
-                                <b>{{ filter }}</b
-                                >: {{ value }}
-                            </div>
-                        </b-popover>
-                        <b-button variant="link" size="sm" @click.stop="showAllTools">
-                            <FontAwesomeIcon icon="fa-times" />
-                            Clear filters
-                        </b-button>
-                    </span>
-                    <span v-else class="col d-inline-block">
-                        No filters applied. Please add filters to the Advanced Tool Search in the Tool Panel.
-                    </span>
-                </span>
-            </div>
-            <div ref="scrollContainer" class="overflow-auto">
-                <b-alert v-if="loading" class="m-2" variant="info" show>
-                    <LoadingSpan message="Loading Advanced Search Results" />
-                </b-alert>
-                <b-alert v-else-if="!itemsLoaded || itemsLoaded.length == 0" class="m-2" variant="info" show>
-                    No tools found for the entered filters.
-                </b-alert>
-                <div v-else>
-                    <ToolsListTable :tools="itemsLoaded" />
-                </div>
-            </div>
-            <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
-        </section>
-    </ToolsProvider>
-</template>
-
-<script>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import LoadingSpan from "components/LoadingSpan";
-import { ToolsProvider } from "components/providers/storeProviders";
-import { useAnimationFrameScroll } from "composables/sensors/animationFrameScroll";
-import { ref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, type Ref, ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
+import { type FilterSettings, type Tool, useToolStore } from "@/stores/toolStore";
 
-import ScrollToTopButton from "./ScrollToTopButton";
-import ToolsListTable from "./ToolsListTable";
+import ScrollToTopButton from "./ScrollToTopButton.vue";
+import ToolsListTable from "./ToolsListTable.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faTimes);
 
-export default {
-    components: {
-        LoadingSpan,
-        ToolsListTable,
-        ToolsProvider,
-        ScrollToTopButton,
-        FontAwesomeIcon,
+const props = defineProps({
+    name: {
+        type: String,
+        default: "",
     },
-    props: {
-        name: {
-            type: String,
-            default: "",
-        },
-        section: {
-            type: String,
-            default: "",
-        },
-        id: {
-            type: String,
-            default: "",
-        },
-        owner: {
-            type: String,
-            default: "",
-        },
-        help: {
-            type: String,
-            default: "",
-        },
+    section: {
+        type: String,
+        default: "",
     },
-    setup() {
-        const scrollContainer = ref(null);
-        const { scrollTop } = useAnimationFrameScroll(scrollContainer);
-
-        return {
-            scrollContainer,
-            scrollTop,
-        };
+    ontology: {
+        type: String,
+        default: "",
+    },
+    id: {
+        type: String,
+        default: "",
     },
-    computed: {
-        toolbox() {
-            return this.$store.getters["panels/currentPanel"];
-        },
-        panelView() {
-            return this.$store.getters["panels/currentPanelView"];
-        },
-        filterSettings() {
-            const newFilterSettings = {};
-            Object.entries(this.$props).forEach(([filter, value]) => {
-                if (value && value !== "") {
-                    newFilterSettings[filter] = value;
-                }
-            });
-            return newFilterSettings;
-        },
-        filterCount() {
-            return Object.keys(this.filterSettings).length;
-        },
+    owner: {
+        type: String,
+        default: "",
     },
-    methods: {
-        scrollToTop() {
-            this.$refs.scrollContainer.scrollTo({ top: 0, behavior: "smooth" });
-        },
-        showAllTools() {
-            this.$router.push({ path: "/tools/list" });
-        },
+    help: {
+        type: String,
+        default: "",
     },
-};
+});
+
+const router = useRouter();
+
+const scrollContainer: Ref<HTMLElement | null> = ref(null);
+const { scrollTop } = useAnimationFrameScroll(scrollContainer);
+
+const toolStore = useToolStore();
+const { loading } = storeToRefs(toolStore);
+
+const filterSettings = computed(() => {
+    const newFilterSettings: FilterSettings = {};
+    Object.entries(props).forEach(([filter, value]) => {
+        if (value && value !== "") {
+            newFilterSettings[filter] = value;
+        }
+    });
+    return newFilterSettings;
+});
+
+const itemsLoaded: Ref<Tool[]> = ref([]);
+
+onMounted(async () => {
+    await toolStore.fetchTools(filterSettings.value);
+    itemsLoaded.value = Object.values(toolStore.getToolsById(filterSettings.value));
+});
+
+const filterCount = computed(() => Object.keys(filterSettings.value).length);
+
+function scrollToTop() {
+    scrollContainer.value?.scrollTo({ top: 0, behavior: "smooth" });
+}
+
+function showAllTools() {
+    router.push({ path: "/tools/list" });
+}
 </script>
 
+<template>
+    <section class="tools-list">
+        <div class="mb-2">
+            <h1 class="h-lg">Search Results</h1>
+            <span v-if="itemsLoaded.length !== 0" class="row">
+                <span v-if="filterCount" class="col d-inline-block d-flex align-items-baseline flex-gapx-1">
+                    Found {{ itemsLoaded.length }} tools for
+                    <b-button id="popover-filters" class="ui-link">
+                        {{ filterCount }}
+                        {{ filterCount === 1 ? "filter" : "filters" }}.
+                    </b-button>
+                    <b-popover target="popover-filters" triggers="hover focus" placement="bottom">
+                        <template v-slot:title>Filters</template>
+                        <div v-for="(value, filter) in filterSettings" :key="filter">
+                            <b>{{ filter }}</b
+                            >: {{ value }}
+                        </div>
+                    </b-popover>
+                    <b-button variant="link" size="sm" @click.stop="showAllTools">
+                        <FontAwesomeIcon icon="fa-times" />
+                        Clear filters
+                    </b-button>
+                </span>
+                <span v-else class="col d-inline-block">
+                    No filters applied. Please add filters to the Advanced Tool Search in the Tool Panel.
+                </span>
+            </span>
+        </div>
+        <div ref="scrollContainer" class="overflow-auto">
+            <b-alert v-if="loading" class="m-2" variant="info" show>
+                <LoadingSpan message="Loading Advanced Search Results" />
+            </b-alert>
+            <b-alert v-else-if="!itemsLoaded || itemsLoaded.length == 0" class="m-2" variant="info" show>
+                No tools found for the entered filters.
+            </b-alert>
+            <div v-else>
+                <ToolsListTable :tools="itemsLoaded" />
+            </div>
+        </div>
+        <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
+    </section>
+</template>
+
 <style lang="scss" scoped>
 .tools-list {
     position: relative;
diff --git a/client/src/components/ToolsList/ToolsListItem.vue b/client/src/components/ToolsList/ToolsListItem.vue
index ed95ff776524..1d3097512a23 100644
--- a/client/src/components/ToolsList/ToolsListItem.vue
+++ b/client/src/components/ToolsList/ToolsListItem.vue
@@ -21,6 +21,7 @@ const props = defineProps({
     id: { type: String, required: true },
     name: { type: String, required: true },
     section: { type: String, required: true },
+    ontologies: { type: Array, default: null },
     description: { type: String, default: null },
     summary: { type: String, default: null },
     help: { type: String, default: null },
@@ -102,6 +103,12 @@ const formattedToolHelp = computed(() => {
                     <FontAwesomeIcon icon="fa-user" />
                     <b>Owner:</b> <b-link :to="`/tools/list?owner=${props.owner}`">{{ props.owner }}</b-link>
                 </span>
+
+                <span v-if="props.ontologies && props.ontologies.length > 0">
+                    <span v-for="ontology in props.ontologies" :key="ontology" class="tag toggle">
+                        <b-link :to="`/tools/list?ontology=${ontology}`">{{ ontology }}</b-link>
+                    </span>
+                </span>
             </div>
 
             <div v-if="props.summary" v-html="props.summary"></div>
@@ -155,6 +162,11 @@ const formattedToolHelp = computed(() => {
         border-color: scale-color($brand-warning, $lightness: +55%);
     }
 
+    .toggle {
+        background-color: scale-color($brand-toggle, $lightness: +75%);
+        border-color: scale-color($brand-toggle, $lightness: +55%);
+    }
+
     .top-bar {
         display: flex;
         justify-content: space-between;
diff --git a/client/src/components/ToolsList/ToolsListTable.vue b/client/src/components/ToolsList/ToolsListTable.vue
index 60372a5b6cdc..32432a74f7a9 100644
--- a/client/src/components/ToolsList/ToolsListTable.vue
+++ b/client/src/components/ToolsList/ToolsListTable.vue
@@ -10,6 +10,7 @@
             :key="item.id"
             :name="item.name"
             :section="item.panel_section_name"
+            :ontologies="item.ontologies"
             :description="item.description"
             :summary="item.summary"
             :help="item.help"
@@ -59,7 +60,12 @@ export default {
     },
     computed: {
         buffer() {
-            return this.tools.slice(0, this.bufferLen);
+            return this.tools.slice(0, this.bufferLen).map((tool) => {
+                return {
+                    ...tool,
+                    ontologies: tool.edam_operations.concat(tool.edam_topics),
+                };
+            });
         },
     },
     created() {
diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.vue b/client/src/components/Toolshed/RepositoryDetails/Index.vue
index da7f46afae13..7f99ae9d7ce1 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.vue
@@ -44,18 +44,16 @@
                                 @onUninstall="uninstallRepository(row.item)" />
                         </template>
                     </b-table>
-                    <ToolPanelViewProvider v-slot="{ currentPanel }" :panel-view="`default`" :set-default="false">
-                        <InstallationSettings
-                            v-if="showSettings"
-                            :repo="repo"
-                            :toolshed-url="toolshedUrl"
-                            :changeset-revision="selectedChangeset"
-                            :requires-panel="selectedRequiresPanel"
-                            :current-panel="currentPanel"
-                            :tool-dynamic-configs="config.tool_dynamic_configs"
-                            @hide="onHide"
-                            @ok="onOk" />
-                    </ToolPanelViewProvider>
+                    <InstallationSettings
+                        v-if="showSettings"
+                        :repo="repo"
+                        :toolshed-url="toolshedUrl"
+                        :changeset-revision="selectedChangeset"
+                        :requires-panel="selectedRequiresPanel"
+                        :current-panel="panel['default']"
+                        :tool-dynamic-configs="config.tool_dynamic_configs"
+                        @hide="onHide"
+                        @ok="onOk" />
                 </div>
             </div>
         </div>
@@ -63,7 +61,8 @@
 </template>
 <script>
 import BootstrapVue from "bootstrap-vue";
-import ToolPanelViewProvider from "components/providers/ToolPanelViewProvider";
+import { mapActions, mapState } from "pinia";
+import { useToolStore } from "stores/toolStore";
 import Vue from "vue";
 
 import { useConfig } from "@/composables/config";
@@ -78,7 +77,6 @@ Vue.use(BootstrapVue);
 
 export default {
     components: {
-        ToolPanelViewProvider,
         InstallationSettings,
         InstallationActions,
         RepositoryTools,
@@ -118,14 +116,21 @@ export default {
             delay: 2000,
         };
     },
+    computed: {
+        ...mapState(useToolStore, ["panel"]),
+    },
     created() {
         this.services = new Services();
         this.load();
+        if (!this.panel["default"]) {
+            this.fetchPanel("default");
+        }
     },
     destroyed() {
         this.clearTimeout();
     },
     methods: {
+        ...mapActions(useToolStore, ["fetchPanel"]),
         clearTimeout() {
             if (this.timeout) {
                 clearTimeout(this.timeout);
diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
index 0bdf515db1f3..b726ffa8cf5a 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
@@ -65,7 +65,7 @@ export default {
             required: true,
         },
         currentPanel: {
-            type: Array,
+            type: Object,
             default: null,
         },
         toolDynamicConfigs: {
@@ -99,9 +99,9 @@ export default {
             return this.toolConfigs.length > 1;
         },
         toolSections() {
-            const panel = this.currentPanel;
+            const panel = Object.values(this.currentPanel);
             if (panel) {
-                return panel.filter((x) => x.elems);
+                return panel.filter((x) => x.tools);
             } else {
                 return [];
             }
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 49e9033a1670..ae62c932870a 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -27,10 +27,11 @@
             </b-form-group>
         </b-modal>
         <FlexPanel side="left">
-            <ProviderAwareToolBoxWorkflow
+            <ToolPanel
+                workflow
                 :module-sections="moduleSections"
                 :data-managers="dataManagers"
-                :workflows="workflows"
+                :editor-workflows="workflows"
                 @onInsertTool="onInsertTool"
                 @onInsertModule="onInsertModule"
                 @onInsertWorkflow="onInsertWorkflow"
@@ -186,7 +187,7 @@ import StateUpgradeModal from "./StateUpgradeModal.vue";
 import WorkflowGraph from "./WorkflowGraph.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import ProviderAwareToolBoxWorkflow from "@/components/Panels/ProviderAwareToolBoxWorkflow.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
 import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
 
@@ -195,7 +196,7 @@ export default {
         MarkdownEditor,
         FlexPanel,
         StateUpgradeModal,
-        ProviderAwareToolBoxWorkflow,
+        ToolPanel,
         FormDefault,
         FormTool,
         WorkflowOptions,
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index cca1d7b2073a..7452a4b62b58 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -18,7 +18,7 @@ import WorkflowInformation from "./WorkflowInformation.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import Heading from "@/components/Common/Heading.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 
 library.add(faSpinner, faUser, faBuilding, faPlay, faEdit, faDownload);
@@ -108,7 +108,7 @@ function logInTitle(title: string) {
     <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">
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index d0d8d697337c..ea5da90e8b45 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -93,9 +93,9 @@ import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
 import WorkflowIcons from "components/Workflow/icons";
 import { mapActions, mapState } from "pinia";
+import { useToolStore } from "stores/toolStore";
 import { useWorkflowStore } from "stores/workflowStore";
 import { mapActions as vuexMapActions, mapGetters } from "vuex";
-import { mapCacheActions } from "vuex-cache";
 
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
@@ -125,7 +125,8 @@ export default {
     },
     computed: {
         ...mapState(useWorkflowStore, ["getStoredWorkflowByInstanceId"]),
-        ...mapGetters(["getToolForId", "getToolNameById", "getInvocationStepById"]),
+        ...mapState(useToolStore, ["getToolForId", "getToolNameById"]),
+        ...mapGetters(["getInvocationStepById"]),
         isReady() {
             return this.invocation.steps.length > 0;
         },
@@ -153,8 +154,8 @@ export default {
         this.fetchSubworkflow();
     },
     methods: {
-        ...mapCacheActions(["fetchToolForId"]),
         ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
+        ...mapActions(useToolStore, ["fetchToolForId"]),
         ...vuexMapActions(["fetchInvocationStepById"]),
         fetchTool() {
             if (this.workflowStep.tool_id && !this.getToolForId(this.workflowStep.tool_id)) {
diff --git a/client/src/components/providers/ToolPanelViewProvider.js b/client/src/components/providers/ToolPanelViewProvider.js
deleted file mode 100644
index 0be49d3e6d9f..000000000000
--- a/client/src/components/providers/ToolPanelViewProvider.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { mapActions, mapGetters } from "vuex";
-
-export default {
-    props: {
-        panelView: {
-            type: String,
-            required: true,
-        },
-        setDefault: {
-            type: Boolean,
-            required: false,
-            default: true,
-        },
-    },
-    computed: {
-        ...mapGetters("panels", ["currentPanel", "currentPanelView", "panel"]),
-        localPanelView() {
-            return this.setDefault ? this.currentPanelView : this.panelView;
-        },
-        localPanel() {
-            return this.setDefault ? this.currentPanel : this.panel(this.panelView);
-        },
-    },
-    methods: {
-        ...mapActions("panels", ["initCurrentPanelView", "fetchPanel"]),
-    },
-    created() {
-        if (this.setDefault) {
-            this.initCurrentPanelView(this.panelView);
-        } else {
-            this.fetchPanel(this.panelView);
-        }
-    },
-    render() {
-        return this.$scopedSlots.default({
-            currentPanel: this.localPanel,
-            currentPanelView: this.localPanelView,
-        });
-    },
-};
diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index 1ebf62bde11f..3dfa690c6fa4 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -196,4 +196,3 @@ export const StoreProvider = (storeAction, storeGetter) => {
 };
 
 export const CollectionElementsProvider = StoreProvider("fetchCollectionElements", "getCollectionElements");
-export const ToolsProvider = StoreProvider("fetchAllTools", "getTools");
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 3cfce855a302..e865276d6f5f 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -8,7 +8,7 @@ import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const router = useRouter();
@@ -40,7 +40,7 @@ onUnmounted(() => {
     <div id="columns" class="d-flex">
         <ActivityBar v-if="showActivityBar" />
         <FlexPanel v-if="showToolbox" side="left">
-            <ToolBox />
+            <ToolPanel />
         </FlexPanel>
         <div id="center" class="overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 166654e2d96c..aed4dd9c169d 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -19,7 +19,6 @@ import { jobDestinationParametersStore } from "./jobDestinationParametersStore";
 import { panelStore } from "./panelStore";
 import { syncVuextoGalaxy } from "./syncVuextoGalaxy";
 import { tagStore } from "./tagStore";
-import { toolStore } from "./toolStore";
 
 Vue.use(Vuex);
 
@@ -55,7 +54,6 @@ export function createStore() {
             gridSearch: gridSearchStore,
             panels: panelStore,
             tags: tagStore,
-            tools: toolStore,
         },
     };
 
diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
deleted file mode 100644
index 67b938963127..000000000000
--- a/client/src/store/toolStore.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import axios from "axios";
-import { createWhooshQuery, filterTools } from "components/Panels/utilities";
-import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
-
-export const state = {
-    toolById: {},
-    toolResults: [],
-    allTools: [],
-};
-
-const getters = {
-    getToolForId: (state) => (toolId) => {
-        return state.toolById[toolId];
-    },
-    getToolNameById: (state) => (toolId) => {
-        const details = state.toolById[toolId];
-        if (details && details.name) {
-            return details.name;
-        } else {
-            return "...";
-        }
-    },
-    getTools:
-        (state) =>
-        ({ filterSettings, toolbox }) => {
-            if (Object.keys(filterSettings).length === 0) {
-                return state.allTools;
-            } else {
-                return filterTools(toolbox, state.toolResults);
-            }
-        },
-};
-
-const actions = {
-    fetchToolForId: async ({ commit }, toolId) => {
-        console.log("fetching tool");
-        const { data } = await axios.get(`${getAppRoot()}api/tools/${toolId}`);
-        commit("saveToolForId", { toolId, toolData: data });
-    },
-    fetchAllTools: async ({ commit }, { filterSettings, panelView, toolbox }) => {
-        if (Object.keys(filterSettings).length !== 0) {
-            // Parsing filterSettings to Whoosh query
-            const q = createWhooshQuery(filterSettings, panelView, toolbox);
-            const { data } = await axios.get(`${getAppRoot()}api/tools`, { params: { q } });
-            commit("saveToolResults", { toolsData: data });
-        } else if (state.allTools.length === 0) {
-            const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=False`);
-            commit("saveAllTools", { toolsData: data });
-        }
-    },
-};
-
-const mutations = {
-    saveToolForId: (state, { toolId, toolData }) => {
-        Vue.set(state.toolById, toolId, toolData);
-    },
-    saveToolResults: (state, { toolsData }) => {
-        state.toolResults = toolsData;
-    },
-    saveAllTools: (state, { toolsData }) => {
-        state.allTools = toolsData;
-    },
-};
-
-export const toolStore = {
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
new file mode 100644
index 000000000000..43dac1f78be0
--- /dev/null
+++ b/client/src/stores/toolStore.ts
@@ -0,0 +1,239 @@
+/**
+ * Requests tools, and various panel views
+ */
+
+import axios from "axios";
+import { defineStore } from "pinia";
+import Vue, { computed, Ref, ref } from "vue";
+
+import { createWhooshQuery, filterTools } from "@/components/Panels/utilities";
+import { useUserLocalStorage } from "@/composables/userLocalStorage";
+import { getAppRoot } from "@/onload/loadConfig";
+
+/* interfaces */
+export interface Tool {
+    model_class: string;
+    id: string;
+    name: string;
+    description: string;
+    hidden: boolean;
+    is_workflow_compatible: boolean;
+    panel_section_name: string;
+    panel_section_id: string;
+    form_style: string;
+    text?: string;
+    current_section_ids?: string[]; // for purely setting it = currentPanelView section id
+    title?: string;
+    latest_id?: string;
+    step_count?: number;
+}
+
+/* interfaces */
+export interface ToolSection {
+    model_class: string;
+    id: string;
+    name: string;
+    version?: string;
+    description?: string;
+    links?: Record<string, string>;
+    tools: string[];
+}
+
+// TODO: Use this in ToolSearch.vue
+export interface FilterSettings {
+    [key: string]: any;
+    name?: string;
+    section?: string;
+    ontology?: string;
+    id?: string;
+    owner?: string;
+    help?: string;
+}
+
+export const useToolStore = defineStore("toolStore", () => {
+    const currentPanelView: Ref<string> = useUserLocalStorage("tool-store-view", "");
+    const toolsById = ref<Record<string, Tool>>({});
+    const toolResults = ref<Record<string, string[]>>({});
+    const panel = ref<Record<string, Record<string, Tool | ToolSection>>>({});
+    const loading = ref(false);
+
+    const getToolForId = computed(() => {
+        return (toolId: string) => toolsById.value[toolId];
+    });
+
+    const getToolNameById = computed(() => {
+        return (toolId: string) => {
+            const details = toolsById.value[toolId];
+            if (details && details.name) {
+                return details.name;
+            } else {
+                return "...";
+            }
+        };
+    });
+
+    const getToolsById = computed(() => {
+        return (filterSettings: FilterSettings) => {
+            if (Object.keys(filterSettings).length === 0) {
+                return toolsById.value;
+            } else {
+                const q = createWhooshQuery(filterSettings);
+                console.log("getToolsById", toolResults.value[q]);
+                return filterTools(toolsById.value, toolResults.value[q]);
+            }
+        };
+    });
+
+    const currentPanel = computed(() => {
+        const effectiveView = currentPanelView.value;
+        const val = panel.value[effectiveView] || {};
+        return val;
+    });
+
+    const isPanelPopulated = computed(() => {
+        return allToolsByIdFetched.value && Object.keys(currentPanel.value).length > 0;
+    });
+
+    const allToolsByIdFetched = computed(() => {
+        return Object.keys(toolsById.value).length > 0;
+    });
+
+    /** These are filtered tool sections (`ToolSection[]`) for the `currentPanel`;
+     * Only sections that are typically referenced by `Tool.panel_section_id`
+     * are included for the `default` view, while for ontologies, only ontologies are
+     * included and `Uncategorized` section is skipped.
+     */
+    const panelSections = computed(() => {
+        return (panelView: string) => {
+            return Object.values(panel.value[panelView] || {}).filter((section) => {
+                const sec = section as ToolSection;
+                return (
+                    sec.tools &&
+                    sec.tools.length > 0 &&
+                    sec.id !== "uncategorized" &&
+                    sec.id !== "builtin_converters" &&
+                    sec.name !== undefined
+                );
+            });
+        };
+    });
+    const sectionDatalist = computed(() => {
+        return (panelView: string) => {
+            return panelSections.value(panelView).map((section) => {
+                return { value: section.id, text: section.name };
+            });
+        };
+    });
+
+    async function fetchToolForId(toolId: string) {
+        console.log("fetching tool");
+        const { data } = await axios.get(`${getAppRoot()}api/tools/${toolId}`);
+        saveToolForId(toolId, data);
+    }
+
+    async function fetchTools(filterSettings?: FilterSettings) {
+        if (filterSettings && Object.keys(filterSettings).length !== 0) {
+            // Parsing filterSettings to Whoosh query
+            const q = createWhooshQuery(filterSettings);
+            // already have results for this query
+            if (toolResults.value[q]) {
+                return;
+            }
+            const { data } = await axios.get(`${getAppRoot()}api/tools`, { params: { q } });
+            saveToolResults(q, data);
+        }
+        if (!loading.value && !allToolsByIdFetched.value) {
+            loading.value = true;
+            await axios
+                .get(`${getAppRoot()}api/tools?in_panel=False`)
+                .then(({ data }) => {
+                    loading.value = false;
+                    saveAllTools(data.tools);
+                })
+                .catch((error) => {
+                    console.error(error);
+                    loading.value = false;
+                });
+        }
+    }
+
+    // Directly related to the ToolPanel
+    async function initCurrentPanelView(siteDefaultPanelView: string) {
+        if (!loading.value && !isPanelPopulated.value) {
+            loading.value = true;
+            const panelView = currentPanelView.value || siteDefaultPanelView;
+            if (currentPanelView.value == "") {
+                currentPanelView.value = panelView;
+            }
+            await axios
+                .get(`${getAppRoot()}api/tools?in_panel=true&view=${panelView}`)
+                .then(({ data }) => {
+                    loading.value = false;
+                    savePanelView(panelView, data[panelView]);
+                })
+                .catch(async (error) => {
+                    loading.value = false;
+                    if (error.response && error.response.status == 400) {
+                        // Assume the stored panelView disappeared, revert to the panel default for this site.
+                        await setCurrentPanelView(siteDefaultPanelView);
+                    }
+                });
+        }
+    }
+
+    async function setCurrentPanelView(panelView: string) {
+        if (!loading.value) {
+            currentPanelView.value = panelView;
+            if (panel.value[panelView]) {
+                return;
+            }
+            loading.value = true;
+            const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=true&view=${panelView}`);
+            savePanelView(panelView, data[panelView]);
+            loading.value = false;
+        }
+    }
+
+    async function fetchPanel(panelView: string) {
+        const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=true&view=${panelView}`);
+        savePanelView(panelView, data[panelView]);
+    }
+
+    function saveToolForId(toolId: string, toolData: Tool) {
+        Vue.set(toolsById.value, toolId, toolData);
+    }
+
+    function saveToolResults(whooshQuery: string, toolsData: Array<string>) {
+        Vue.set(toolResults.value, whooshQuery, toolsData);
+    }
+
+    function saveAllTools(toolsData: Record<string, Tool>) {
+        toolsById.value = toolsData;
+    }
+
+    function savePanelView(panelView: string, newPanel: { [id: string]: ToolSection | Tool }) {
+        Vue.set(panel.value, panelView, newPanel);
+    }
+
+    return {
+        toolsById,
+        panel,
+        currentPanelView,
+        loading,
+        getToolForId,
+        getToolNameById,
+        getToolsById,
+        currentPanel,
+        isPanelPopulated,
+        sectionDatalist,
+        fetchToolForId,
+        fetchTools,
+        initCurrentPanelView,
+        setCurrentPanelView,
+        fetchPanel,
+        saveToolForId,
+        saveToolResults,
+        saveAllTools,
+        savePanelView,
+    };
+});
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index 59f320adb013..be785779608e 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -9,6 +9,8 @@ export interface Workflow {
     name: string;
     [index: string]: any;
     steps: Steps;
+    step_count?: number;
+    latest_id?: string;
 }
 
 export const useWorkflowStore = defineStore("workflowStore", () => {
diff --git a/lib/galaxy/tool_util/toolbox/base.py b/lib/galaxy/tool_util/toolbox/base.py
index 39fc18c68f01..b28cbac33558 100644
--- a/lib/galaxy/tool_util/toolbox/base.py
+++ b/lib/galaxy/tool_util/toolbox/base.py
@@ -1312,6 +1312,39 @@ def to_dict(self, trans, in_panel=True, tool_help=False, view=None, **kwds):
                 rval.append(self.get_tool_to_dict(trans, tool, tool_help=tool_help))
         return rval
 
+    def to_panel_view(self, trans, in_panel=True, tool_help=False, view=None, **kwds):
+        """
+        Create a panel view representation of the toolbox.
+        For in_panel=True, uses the structure:
+            {view: {section_id: { section but with .tools=List[all tool ids] }, ...}}}
+        For in_panel=False, uses the structure:
+            {tools: {tool_id: tool.to_dict(), ...}}}
+        """
+        rval = {}
+        if in_panel:
+            if view is None:
+                view = self._default_panel_view
+            view_contents = {}
+            rval[view] = view_contents
+            panel_elts = list(self.tool_panel_contents(trans, view=view, **kwds))
+            for elt in panel_elts:
+                # Only use cache for objects that are Tools.
+                if hasattr(elt, "tool_type"):
+                    view_contents[elt.id] = self.get_tool_to_dict(trans, elt, tool_help=False)
+                else:
+                    kwargs = dict(trans=trans, link_details=True, tool_help=tool_help, toolbox=self, only_ids=True)
+                    view_contents[elt.id] = elt.to_dict(**kwargs)
+        else:
+            returned_tools = {}
+            rval["tools"] = returned_tools
+            filter_method = self._build_filter_method(trans)
+            for tool in self._tools_by_id.values():
+                tool = filter_method(tool, panel_item_types.TOOL)
+                if not tool:
+                    continue
+                returned_tools[tool.id] = self.get_tool_to_dict(trans, tool, tool_help=tool_help)
+        return rval
+
     def _lineage_in_panel(self, panel_dict, tool=None, tool_lineage=None):
         """If tool with same lineage already in panel (or section) - find
         and return it. Otherwise return None.
diff --git a/lib/galaxy/tool_util/toolbox/panel.py b/lib/galaxy/tool_util/toolbox/panel.py
index 8375d39441d2..8eb65a9d660c 100644
--- a/lib/galaxy/tool_util/toolbox/panel.py
+++ b/lib/galaxy/tool_util/toolbox/panel.py
@@ -73,7 +73,7 @@ def copy(self):
         copy.elems.update(self.elems)
         return copy
 
-    def to_dict(self, trans, link_details=False, tool_help=False, toolbox=None):
+    def to_dict(self, trans, link_details=False, tool_help=False, toolbox=None, only_ids=False):
         """Return a dict that includes section's attributes."""
 
         section_dict = super().to_dict()
@@ -81,17 +81,23 @@ def to_dict(self, trans, link_details=False, tool_help=False, toolbox=None):
         kwargs = dict(trans=trans, link_details=link_details, tool_help=tool_help)
         for elt in self.elems.values():
             if hasattr(elt, "tool_type") and toolbox:
-                section_elts.append(toolbox.get_tool_to_dict(trans, elt, tool_help=tool_help))
-            else:
+                if only_ids:
+                    section_elts.append(elt.id)
+                else:
+                    section_elts.append(toolbox.get_tool_to_dict(trans, elt, tool_help=tool_help))
+            elif only_ids is False:
                 section_elts.append(elt.to_dict(**kwargs))
-        section_dict["elems"] = section_elts
+
+        if only_ids:
+            section_dict["tools"] = section_elts
+        else:
+            section_dict["elems"] = section_elts
 
         return section_dict
 
     def panel_items(self):
         return self.elems
 
-
 class ToolSectionLabel(Dictifiable):
     """
     A label for a set of tools that can be displayed above groups of tools
diff --git a/lib/galaxy/webapps/galaxy/api/tools.py b/lib/galaxy/webapps/galaxy/api/tools.py
index 51784e0336ae..2ae7d7b9615b 100644
--- a/lib/galaxy/webapps/galaxy/api/tools.py
+++ b/lib/galaxy/webapps/galaxy/api/tools.py
@@ -169,7 +169,7 @@ def index(self, trans: GalaxyWebTransaction, **kwds):
 
         # Return everything.
         try:
-            return self.app.toolbox.to_dict(
+            return self.app.toolbox.to_panel_view(
                 trans, in_panel=in_panel, trackster=trackster, tool_help=tool_help, view=view
             )
         except exceptions.MessageException: