From 6dd8ad307843f7bbc6cd0dd7befeced8b90432eb Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Mon, 1 Aug 2022 17:36:40 -0400
Subject: [PATCH 01/15] Advanced Tool Search Added a dropdown, advanced filter
 menu for tools, similar to the history

---
 client/src/components/Common/DelayedInput.vue |  22 ++++
 .../Panels/Common/ToolAdvancedSearch.vue      | 107 ++++++++++++++++++
 .../Panels/Common/ToolSearch.test.js          |  52 +++++++++
 .../components/Panels/Common/ToolSearch.vue   |  48 +++++++-
 client/src/components/Panels/ToolBox.vue      |  37 +++---
 .../components/providers/storeProviders.js    |   1 +
 client/src/entry/analysis/router.js           |  10 ++
 client/src/store/toolStore.js                 |  47 ++++++++
 lib/galaxy/webapps/galaxy/buildapp.py         |   1 +
 9 files changed, 308 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/Panels/Common/ToolAdvancedSearch.vue
 create mode 100644 client/src/components/Panels/Common/ToolSearch.test.js

diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index 8f3281c2267..a713cd6a3b8 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -6,15 +6,26 @@
             class="search-query"
             size="sm"
             autocomplete="off"
+            :disabled="includeAdvBtn && showAdvanced"
             :placeholder="placeholder"
             @input="delayQuery"
             @change="setQuery"
             @keydown.esc="setQuery('')" />
         <b-input-group-append>
+            <b-button
+                v-if="includeAdvBtn"
+                size="sm"
+                :pressed="showAdvanced"
+                :variant="showAdvanced ? 'info' : 'secondary'"
+                @click="onToggle">
+                <icon v-if="showAdvanced" icon="angle-double-up" />
+                <icon v-else icon="angle-double-down" />
+            </b-button>
             <b-button
                 class="search-clear"
                 size="sm"
                 :title="titleClear | l"
+                :disabled="includeAdvBtn && showAdvanced"
                 data-description="reset query"
                 @click="clearBox">
                 <icon v-if="loading" icon="spinner" spin />
@@ -42,6 +53,14 @@ export default {
             type: Number,
             default: 1000,
         },
+        includeAdvBtn: {
+            type: Boolean,
+            default: false,
+        },
+        showAdvanced: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -83,6 +102,9 @@ export default {
             this.setQuery("");
             this.$refs.toolInput.focus();
         },
+        onToggle() {
+            this.$emit("onToggle", !this.showAdvanced);
+        },
     },
 };
 </script>
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
new file mode 100644
index 00000000000..bb9bcaa931a
--- /dev/null
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -0,0 +1,107 @@
+<template>
+    <ToolsProvider v-slot="{ loading, result: itemsLoaded, count: totalItems }" :filter-settings="filterSettings">
+        <section>
+            <div class="mb-2">
+                <span class="row">
+                    <span class="col">
+                        <h4 class="d-inline-block align-middle">Advanced Tool Search Results</h4>
+                        <b-button v-if="hasFilters" class="float-right" size="sm" @click="onClear">
+                            <icon icon="redo" />
+                            <span>{{ "Clear Search" | localize }}</span>
+                        </b-button>
+                    </span>
+                </span>
+                <span v-if="itemsLoaded.length !== 0" class="row">
+                    <span v-if="hasFilters" class="col">
+                        (found {{ itemsLoaded.length }} of {{ totalItems }} tools)
+                    </span>
+                    <span v-else class="col">(showing all {{ totalItems }} tools)</span>
+                </span>
+            </div>
+            <div>
+                <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="danger" show>
+                    No tools found for selected filter(s).
+                </b-alert>
+                <div v-else>
+                    <tool-section
+                        v-for="(section, key) in itemsLoaded"
+                        :key="key"
+                        :category="section"
+                        @onClick="onOpen" />
+                </div>
+            </div>
+        </section>
+    </ToolsProvider>
+</template>
+<script>
+import { getGalaxyInstance } from "app";
+import LoadingSpan from "components/LoadingSpan";
+import { openGlobalUploadModal } from "components/Upload";
+import { ToolsProvider } from "components/providers/storeProviders";
+import ToolSection from "components/Panels/Common/ToolSection";
+
+export default {
+    components: {
+        LoadingSpan,
+        ToolsProvider,
+        ToolSection,
+    },
+    props: {
+        name: {
+            type: String,
+            default: "",
+        },
+        panelSectionName: {
+            type: String,
+            default: "",
+        },
+        id: {
+            type: String,
+            default: "",
+        },
+        description: {
+            type: String,
+            default: "",
+        },
+    },
+    computed: {
+        filterSettings() {
+            const newFilterSettings = {};
+            Object.entries(this.$props).forEach(([filter, value]) => {
+                if (value && value !== "") {
+                    if (filter === "panelSectionName") {
+                        newFilterSettings["panel_section_name"] = value;
+                    } else {
+                        newFilterSettings[filter] = value;
+                    }
+                }
+            });
+            return newFilterSettings;
+        },
+        hasFilters() {
+            return Object.keys(this.filterSettings).length;
+        },
+    },
+    methods: {
+        onClear() {
+            this.$router.push({ path: "/tools/advanced_search", query: {} });
+        },
+        onOpen(tool, evt) {
+            if (tool.id === "upload1") {
+                evt.preventDefault();
+                openGlobalUploadModal();
+            } else if (tool.form_style === "regular") {
+                evt.preventDefault();
+                const Galaxy = getGalaxyInstance();
+                // encode spaces in tool.id
+                const toolId = tool.id;
+                const toolVersion = tool.version;
+                Galaxy.router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}`);
+            }
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Panels/Common/ToolSearch.test.js b/client/src/components/Panels/Common/ToolSearch.test.js
new file mode 100644
index 00000000000..068f416e2a6
--- /dev/null
+++ b/client/src/components/Panels/Common/ToolSearch.test.js
@@ -0,0 +1,52 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import ToolSearch from "./ToolSearch";
+const localVue = getLocalVue();
+
+describe("ToolSearch", () => {
+    it("test tools advanced filter panel", async () => {
+        const wrapper = mount(ToolSearch, {
+            propsData: {
+                currentPanelView: "default",
+                showAdvanced: false,
+            },
+            localVue,
+            stubs: {
+                icon: { template: "<div></div>" },
+            },
+        });
+
+        expect(wrapper.find("[description='advanced tool filters']").exists()).toBe(false);
+        await wrapper.setProps({ showAdvanced: true });
+        expect(wrapper.find("[description='advanced tool filters']").exists()).toBe(true);
+        const filterInputs = {
+            "[placeholder='any tool name']": "name-filter",
+            "[placeholder='any section']": "section-filter",
+            "[placeholder='any id']": "id-filter",
+            "[placeholder='any description']": "desc-filter",
+        };
+
+        // Now add filters in all input fields in the advanced menu
+        Object.entries(filterInputs).forEach(([selector, value]) => {
+            const filterInput = wrapper.find(selector);
+            if (filterInput.vm && filterInput.props().type == "text") {
+                filterInput.setValue(value);
+            }
+        });
+
+        // Test: values are stored in the filterSettings object
+        expect(Object.values(wrapper.vm.filterSettings)).toEqual(Object.values(filterInputs));
+
+        // Test: clearing the filters
+        const clearButton = wrapper.find("[description='clear filters']");
+        expect(Object.values(wrapper.vm.filterSettings).length).toBe(4);
+        await clearButton.trigger("click");
+        expect(Object.values(wrapper.vm.filterSettings).length).toBe(0);
+
+        // Test: keyup.esc (should toggle the view out)
+        const nameField = wrapper.find("[placeholder='any tool name']");
+        expect(wrapper.emitted()["update:show-advanced"]).toBeUndefined();
+        await nameField.trigger("keyup.esc");
+        expect(wrapper.emitted()["update:show-advanced"].length - 1).toBeFalsy();
+    });
+});
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 25a9d36958d..f810e4d42a6 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,5 +1,40 @@
 <template>
-    <DelayedInput class="mb-3" :query="query" :loading="loading" :placeholder="placeholder" @change="checkQuery" />
+    <div>
+        <DelayedInput
+            :class="!showAdvanced && 'mb-3'"
+            :query="query"
+            :loading="loading"
+            :show-advanced="showAdvanced"
+            include-adv-btn
+            :placeholder="placeholder"
+            @change="checkQuery"
+            @onToggle="onToggle" />
+        <div
+            v-if="showAdvanced"
+            class="mt-2"
+            description="advanced tool filters"
+            @keyup.enter="onSearch"
+            @keyup.esc="onToggle(false)">
+            <small>Filter by tool name:</small>
+            <b-form-input v-model="filterSettings['name']" size="sm" placeholder="any tool name" />
+            <small class="mt-1">Filter by section:</small>
+            <b-form-input v-model="filterSettings['panelSectionName']" size="sm" placeholder="any section" />
+            <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 description:</small>
+            <b-form-input v-model="filterSettings['description']" size="sm" placeholder="any description" />
+            <div class="mt-3">
+                <b-button class="mr-1" size="sm" variant="primary" @click="onSearch">
+                    <icon icon="search" />
+                    <span>{{ "Search" | localize }}</span>
+                </b-button>
+                <b-button size="sm" description="clear filters" @click="filterSettings = {}">
+                    <icon icon="redo" />
+                    <span>{{ "Clear" | localize }}</span>
+                </b-button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -26,12 +61,17 @@ export default {
             type: String,
             default: null,
         },
+        showAdvanced: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
             favorites: ["#favs", "#favorites", "#favourites"],
             minQueryLength: 3,
             loading: false,
+            filterSettings: {},
         };
     },
     computed: {
@@ -65,6 +105,12 @@ export default {
                 this.$emit("onResults", null);
             }
         },
+        onSearch() {
+            this.$router.push({ path: "/tools/advanced_search", query: this.filterSettings });
+        },
+        onToggle(toggleAdvanced) {
+            this.$emit("update:show-advanced", toggleAdvanced);
+        },
     },
 };
 </script>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 5820ccb9aab..045e319e5c4 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -3,8 +3,9 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h4 v-localize class="m-1">Tools</h4>
-                    <div class="panel-header-buttons">
+                    <h4 v-if="!showAdvanced" v-localize class="m-1">Tools</h4>
+                    <h4 v-else v-localize class="m-1">Advanced Tool Search</h4>
+                    <div v-if="!showAdvanced" class="panel-header-buttons">
                         <b-button-group>
                             <favorites-button :query="query" @onFavorites="onQuery" />
                             <panel-view-button
@@ -21,24 +22,27 @@
             <tool-search
                 :current-panel-view="currentPanelView"
                 :placeholder="titleSearchTools"
+                :show-advanced.sync="showAdvanced"
                 :query="query"
                 @onQuery="onQuery"
                 @onResults="onResults" />
-            <upload-button />
-            <div v-if="hasResults" class="pb-2">
-                <b-button size="sm" class="w-100" @click="onToggle">
-                    <span :class="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">
-                <b-badge class="alert-danger w-100">No results found!</b-badge>
-            </div>
+            <section v-if="!showAdvanced">
+                <upload-button />
+                <div v-if="hasResults" class="pb-2">
+                    <b-button size="sm" class="w-100" @click="onToggle">
+                        <span :class="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">
+                    <b-badge class="alert-danger w-100">No results found!</b-badge>
+                </div>
+            </section>
         </div>
-        <div class="unified-panel-body">
+        <div v-if="!showAdvanced" class="unified-panel-body">
             <div class="toolMenuContainer">
                 <div class="toolMenu">
                     <tool-section
@@ -106,6 +110,7 @@ export default {
             queryFilter: null,
             queryPending: false,
             showSections: false,
+            showAdvanced: false,
             buttonText: "",
             buttonIcon: "",
             titleSearchTools: _l("search tools"),
diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index d4dba9f5522..2a2dfd4154d 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -190,3 +190,4 @@ export const StoreProvider = (storeAction, storeGetter, storeCountGetter = undef
 export const DatasetProvider = StoreProvider("fetchDataset", "getDataset");
 export const CollectionElementsProvider = StoreProvider("fetchCollectionElements", "getCollectionElements");
 export const HistoryItemsProvider = StoreProvider("fetchHistoryItems", "getHistoryItems", "getTotalMatchesCount");
+export const ToolsProvider = StoreProvider("fetchAllTools", "getTools", "getTotalToolCount");
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 987ba1ee0f8..bd1695b5613 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -37,6 +37,7 @@ import NewUserConfirmation from "components/login/NewUserConfirmation";
 import NewUserWelcome from "components/NewUserWelcome/NewUserWelcome";
 import Sharing from "components/Sharing/Sharing";
 import StoredWorkflowInvocations from "components/Workflow/StoredWorkflowInvocations";
+import ToolAdvancedSearch from "components/Panels/Common/ToolAdvancedSearch";
 import ToolsJson from "components/ToolsView/ToolsSchemaJson/ToolsJson";
 import ToolsView from "components/ToolsView/ToolsView";
 import TourList from "components/Tour/TourList";
@@ -276,6 +277,15 @@ export function getRouter(Galaxy) {
                         component: TourRunner,
                         props: true,
                     },
+                    {
+                        path: "tools/advanced_search",
+                        component: ToolAdvancedSearch,
+                        props: (route) => {
+                            return {
+                                ...route.query,
+                            };
+                        },
+                    },
                     {
                         path: "tools/view",
                         component: ToolsView,
diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
index f5a239c7449..bb4e3668cf3 100644
--- a/client/src/store/toolStore.js
+++ b/client/src/store/toolStore.js
@@ -1,5 +1,7 @@
 export const state = {
     toolById: {},
+    toolsList: [],
+    totalToolCount: undefined,
 };
 
 import Vue from "vue";
@@ -18,6 +20,38 @@ const getters = {
             return "...";
         }
     },
+    getTools:
+        (state) =>
+        ({ filterSettings }) => {
+            // if no filters, return all tools
+            if (Object.keys(filterSettings).length == 0 || filterSettings == {}) {
+                return state.toolsList[0] ? state.toolsList[0] : [];
+            }
+
+            const allTools = state.toolsList[0];
+            const returnedTools = [];
+
+            for (const tool in allTools) {
+                let hasMatches = false;
+                for (const [key, filterValue] of Object.entries(filterSettings)) {
+                    const actualValue = allTools[tool][key];
+                    if (filterValue) {
+                        if (!actualValue || !actualValue.toUpperCase().match(filterValue.toUpperCase())) {
+                            hasMatches = false;
+                            break;
+                        } else {
+                            hasMatches = true;
+                        }
+                    }
+                }
+                if (hasMatches) {
+                    returnedTools.push(allTools[tool]);
+                }
+            }
+
+            return returnedTools;
+        },
+    getTotalToolCount: (state) => () => state.totalToolCount,
 };
 
 const actions = {
@@ -26,12 +60,25 @@ const actions = {
         const { data } = await axios.get(`${getAppRoot()}api/tools/${toolId}`);
         commit("saveToolForId", { toolId, toolData: data });
     },
+    fetchAllTools: async ({ commit }) => {
+        console.log("fetching tools list");
+        const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=False`);
+        const toolCount = data.length;
+        commit("saveTotalToolCount", { toolCount });
+        commit("saveTools", { toolsData: data });
+    },
 };
 
 const mutations = {
     saveToolForId: (state, { toolId, toolData }) => {
         Vue.set(state.toolById, toolId, toolData);
     },
+    saveTools: (state, { toolsData }) => {
+        Vue.set(state.toolsList, 0, toolsData);
+    },
+    saveTotalToolCount: (state, { toolCount }) => {
+        state.totalToolCount = toolCount;
+    },
 };
 
 export const toolStore = {
diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index f1a689fe2c7..631c07bf1af 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -211,6 +211,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/datatypes")
     webapp.add_client_route("/login/start")
     webapp.add_client_route("/login/confirm")
+    webapp.add_client_route("/tools/advanced_search")
     webapp.add_client_route("/tools/view")
     webapp.add_client_route("/tools/json")
     webapp.add_client_route("/tours")

From bfb8325ec6f655db68a043824b76756e945289df Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Mon, 8 Aug 2022 19:47:42 -0400
Subject: [PATCH 02/15] Created a styled view for Tool Advanced Filter Results
 Minor changes to the store, to prevent multiple redundant fetches

---
 .../Panels/Common/ToolAdvancedSearch.vue      | 152 +++++++++++++++---
 .../Panels/Common/ToolSearch.test.js          |   7 +-
 .../components/Panels/Common/ToolSearch.vue   |  28 +++-
 client/src/store/toolStore.js                 |  26 +--
 4 files changed, 180 insertions(+), 33 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index bb9bcaa931a..d588e214a8d 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -1,5 +1,8 @@
 <template>
-    <ToolsProvider v-slot="{ loading, result: itemsLoaded, count: totalItems }" :filter-settings="filterSettings">
+    <ToolsProvider
+        v-slot="{ loading, result: itemsLoaded, count: totalItems }"
+        :filter-settings="filterSettings"
+        :show-help="showHelp === 'true'">
         <section>
             <div class="mb-2">
                 <span class="row">
@@ -11,27 +14,82 @@
                         </b-button>
                     </span>
                 </span>
-                <span v-if="itemsLoaded.length !== 0" class="row">
-                    <span v-if="hasFilters" class="col">
-                        (found {{ itemsLoaded.length }} of {{ totalItems }} tools)
-                    </span>
-                    <span v-else class="col">(showing all {{ totalItems }} tools)</span>
+                <span v-if="itemsLoaded.length !== 0 && hasFilters" class="row">
+                    <span class="col"> (found {{ itemsLoaded.length }} of {{ totalItems }} tools) </span>
                 </span>
             </div>
             <div>
                 <b-alert v-if="loading" class="m-2" variant="info" show>
                     <LoadingSpan message="Loading Advanced Search Results" />
                 </b-alert>
+                <b-alert v-else-if="!hasFilters" class="m-2" variant="secondary" show>
+                    There are no valid filters applied. Please add filters to the menu in the Tool Panel.
+                </b-alert>
                 <b-alert v-else-if="!itemsLoaded || itemsLoaded.length == 0" class="m-2" variant="danger" show>
-                    No tools found for selected filter(s).
+                    No tools found for selected filter(s): {{ filterSettings }}
                 </b-alert>
                 <div v-else>
-                    <tool-section
-                        v-for="(section, key) in itemsLoaded"
-                        :key="key"
-                        :category="section"
-                        @onClick="onOpen" />
+                    <b-card v-for="(tool, key) in itemsLoaded" :key="key" no-body>
+                        <b-card-header
+                            v-b-toggle="'accordion-' + key"
+                            :disabled="!hasHelp(tool.help)"
+                            :role="hasHelp(tool.help) ? 'button' : ''">
+                            <span class="pl-2 d-flex justify-content-between">
+                                <span class="row">
+                                    <a
+                                        :href="tool.target === 'galaxy_main' ? 'javascript:void(0)' : tool.link"
+                                        @click.stop="onOpen(tool)">
+                                        <b>{{ tool.name }}</b> {{ tool.description }}
+                                    </a>
+                                    <b-badge class="ml-1">{{ tool.panel_section_name }}</b-badge>
+                                    <b-badge
+                                        v-if="tool.is_workflow_compatible"
+                                        v-b-tooltip.hover
+                                        class="ml-1"
+                                        variant="success"
+                                        title="Can use this tool in Workflows"
+                                        >Workflow</b-badge
+                                    >
+                                    <b-badge v-if="tool.hidden" class="ml-1" variant="danger">Hidden</b-badge>
+                                </span>
+                                <i v-if="hasHelp(tool.help)" class="text-secondary"> Click here to expand tool info </i>
+                            </span>
+                        </b-card-header>
+                        <b-collapse :id="'accordion-' + key" role="tabpanel">
+                            <b-card-body>
+                                <p
+                                    v-if="helpSummary(tool.help)"
+                                    :id="'collapseInfo-' + key"
+                                    class="collapse show"
+                                    v-html="helpSummary(tool.help)"></p>
+                                <a
+                                    v-if="helpSummary(tool.help)"
+                                    data-toggle="collapse"
+                                    :href="'#collapseInfo-' + key"
+                                    role="button"
+                                    aria-expanded="false"
+                                    :aria-controls="'collapseInfo-' + key">
+                                    Show more/less
+                                </a>
+                                <p
+                                    :id="'collapseInfo-' + key"
+                                    :class="helpSummary(tool.help) ? 'collapse' : ''"
+                                    v-html="tool.help"></p>
+                            </b-card-body>
+                        </b-collapse>
+                    </b-card>
                 </div>
+                <b-button
+                    v-if="hasFilters && !loading && offset > 200"
+                    v-b-tooltip.hover
+                    class="btn-back-to-top"
+                    title="Scroll To Top"
+                    variant="danger"
+                    pill
+                    size="lg"
+                    @click="scrollToTop">
+                    <icon icon="arrow-up" />
+                </b-button>
             </div>
         </section>
     </ToolsProvider>
@@ -41,13 +99,11 @@ import { getGalaxyInstance } from "app";
 import LoadingSpan from "components/LoadingSpan";
 import { openGlobalUploadModal } from "components/Upload";
 import { ToolsProvider } from "components/providers/storeProviders";
-import ToolSection from "components/Panels/Common/ToolSection";
 
 export default {
     components: {
         LoadingSpan,
         ToolsProvider,
-        ToolSection,
     },
     props: {
         name: {
@@ -66,6 +122,19 @@ export default {
             type: String,
             default: "",
         },
+        showHelp: {
+            type: String,
+            default: "false",
+        },
+        help: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            offset: 0,
+        };
     },
     computed: {
         filterSettings() {
@@ -74,7 +143,7 @@ export default {
                 if (value && value !== "") {
                     if (filter === "panelSectionName") {
                         newFilterSettings["panel_section_name"] = value;
-                    } else {
+                    } else if (filter !== "showHelp") {
                         newFilterSettings[filter] = value;
                     }
                 }
@@ -85,16 +154,26 @@ export default {
             return Object.keys(this.filterSettings).length;
         },
     },
+    beforeDestroy() {
+        document.querySelector(".center-panel").removeEventListener("scroll", this.onScroll, true);
+    },
+    mounted() {
+        document.querySelector(".center-panel").addEventListener("scroll", this.onScroll, true);
+    },
     methods: {
-        onClear() {
-            this.$router.push({ path: "/tools/advanced_search", query: {} });
+        onScroll(e) {
+            this.offset = e.target.scrollTop;
         },
-        onOpen(tool, evt) {
+        hasHelp(help) {
+            return help && help !== "\n";
+        },
+        onClear() {
+            this.$router.push({ path: "/tools/advanced_search" });
+        },
+        onOpen(tool) {
             if (tool.id === "upload1") {
-                evt.preventDefault();
                 openGlobalUploadModal();
             } else if (tool.form_style === "regular") {
-                evt.preventDefault();
                 const Galaxy = getGalaxyInstance();
                 // encode spaces in tool.id
                 const toolId = tool.id;
@@ -102,6 +181,39 @@ export default {
                 Galaxy.router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}`);
             }
         },
+        scrollToTop() {
+            document.querySelector(".center-panel").scrollTop = 0;
+        },
+        helpSummary(help) {
+            const parser = new DOMParser();
+            const helpDoc = parser.parseFromString(help, "text/html");
+            const xpaths = [
+                "//strong[text()='What it does']/../following-sibling::*",
+                "//strong[text()='What It Does']/../following-sibling::*",
+                "//h1[text()='Synopsis']/following-sibling::*",
+                "//strong[text()='Syntax']/../following-sibling::*",
+            ];
+            const matches = [];
+            xpaths.forEach((xpath) => {
+                matches.push(
+                    helpDoc.evaluate(xpath, helpDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
+                );
+            });
+            let returnVal = null;
+            matches.forEach((match) => {
+                if (match) {
+                    returnVal = match.innerHTML + "\n";
+                }
+            });
+            return returnVal;
+        },
     },
 };
 </script>
+
+<style>
+.btn-back-to-top {
+    position: fixed;
+    bottom: 2em;
+}
+</style>
diff --git a/client/src/components/Panels/Common/ToolSearch.test.js b/client/src/components/Panels/Common/ToolSearch.test.js
index 068f416e2a6..eec25c51f78 100644
--- a/client/src/components/Panels/Common/ToolSearch.test.js
+++ b/client/src/components/Panels/Common/ToolSearch.test.js
@@ -20,6 +20,7 @@ describe("ToolSearch", () => {
         await wrapper.setProps({ showAdvanced: true });
         expect(wrapper.find("[description='advanced tool filters']").exists()).toBe(true);
         const filterInputs = {
+            "[description='show help text']": false,
             "[placeholder='any tool name']": "name-filter",
             "[placeholder='any section']": "section-filter",
             "[placeholder='any id']": "id-filter",
@@ -33,15 +34,17 @@ describe("ToolSearch", () => {
                 filterInput.setValue(value);
             }
         });
+        const helpFilterInput = wrapper.find("[description='show help text']");
+        await helpFilterInput.setChecked(filterInputs["[description='show help text']"]);
 
         // Test: values are stored in the filterSettings object
         expect(Object.values(wrapper.vm.filterSettings)).toEqual(Object.values(filterInputs));
 
         // Test: clearing the filters
         const clearButton = wrapper.find("[description='clear filters']");
-        expect(Object.values(wrapper.vm.filterSettings).length).toBe(4);
+        expect(Object.values(wrapper.vm.filterSettings).length).toBe(5);
         await clearButton.trigger("click");
-        expect(Object.values(wrapper.vm.filterSettings).length).toBe(0);
+        expect(Object.values(wrapper.vm.filterSettings).length).toBe(1);
 
         // Test: keyup.esc (should toggle the view out)
         const nameField = wrapper.find("[placeholder='any tool name']");
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index f810e4d42a6..7cd59dfa9d1 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -23,12 +23,30 @@
             <b-form-input v-model="filterSettings['id']" size="sm" placeholder="any id" />
             <small class="mt-1">Filter by description:</small>
             <b-form-input v-model="filterSettings['description']" size="sm" placeholder="any description" />
+            <small>Show help text for tools:</small>
+            <span v-b-tooltip.noninteractive.hover title="Disabling this could provide faster results">
+                <icon icon="question" />
+            </span>
+            <b-form-checkbox v-model="filterSettings['showHelp']" size="sm" switch description="show help text" />
+            <span v-if="filterSettings['showHelp']">
+                <small>Search within help text:</small>
+                <span
+                    v-b-tooltip.noninteractive.hover
+                    title="This will help expand your search by including text from tool help information">
+                    <icon icon="question" />
+                </span>
+                <b-form-checkbox v-model="filterHelp" size="sm" switch />
+                <span v-if="filterHelp">
+                    <small class="mt-1">Filter by help text:</small>
+                    <b-form-input v-model="filterSettings['help']" size="sm" placeholder="any help text" />
+                </span>
+            </span>
             <div class="mt-3">
                 <b-button class="mr-1" size="sm" variant="primary" @click="onSearch">
                     <icon icon="search" />
                     <span>{{ "Search" | localize }}</span>
                 </b-button>
-                <b-button size="sm" description="clear filters" @click="filterSettings = {}">
+                <b-button size="sm" description="clear filters" @click="filterSettings = { showHelp: true }">
                     <icon icon="redo" />
                     <span>{{ "Clear" | localize }}</span>
                 </b-button>
@@ -71,7 +89,8 @@ export default {
             favorites: ["#favs", "#favorites", "#favourites"],
             minQueryLength: 3,
             loading: false,
-            filterSettings: {},
+            filterSettings: { showHelp: true },
+            filterHelp: false,
         };
     },
     computed: {
@@ -106,6 +125,11 @@ export default {
             }
         },
         onSearch() {
+            for (const [filter, value] of Object.entries(this.filterSettings)) {
+                if (!value || (filter === "help" && (!this.filterSettings["showHelp"] || !this.filterHelp))) {
+                    delete this.filterSettings[filter];
+                }
+            }
             this.$router.push({ path: "/tools/advanced_search", query: this.filterSettings });
         },
         onToggle(toggleAdvanced) {
diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
index bb4e3668cf3..6256e9cae1b 100644
--- a/client/src/store/toolStore.js
+++ b/client/src/store/toolStore.js
@@ -2,6 +2,7 @@ export const state = {
     toolById: {},
     toolsList: [],
     totalToolCount: undefined,
+    hasHelp: true,
 };
 
 import Vue from "vue";
@@ -23,11 +24,10 @@ const getters = {
     getTools:
         (state) =>
         ({ filterSettings }) => {
-            // if no filters, return all tools
+            // if no filters
             if (Object.keys(filterSettings).length == 0 || filterSettings == {}) {
-                return state.toolsList[0] ? state.toolsList[0] : [];
+                return [];
             }
-
             const allTools = state.toolsList[0];
             const returnedTools = [];
 
@@ -60,12 +60,17 @@ const actions = {
         const { data } = await axios.get(`${getAppRoot()}api/tools/${toolId}`);
         commit("saveToolForId", { toolId, toolData: data });
     },
-    fetchAllTools: async ({ commit }) => {
-        console.log("fetching tools list");
-        const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=False`);
-        const toolCount = data.length;
-        commit("saveTotalToolCount", { toolCount });
-        commit("saveTools", { toolsData: data });
+    fetchAllTools: async ({ state, commit }, { showHelp }) => {
+        // Preventing store from being populated for every search: we fetch again only if:
+        // store isn't already populated (initial fetch) OR user now wants (or doesn't want) help text
+        if (!state.toolsList[0] || !state.totalToolCount || state.hasHelp !== showHelp) {
+            console.log("fetching all tools once");
+            const { data } = await axios.get(`${getAppRoot()}api/tools?tool_help=${showHelp}&in_panel=False`);
+            const toolCount = data.length;
+            commit("saveTotalToolCount", { toolCount });
+            commit("saveShowHelp", { showHelp });
+            commit("saveTools", { toolsData: data });
+        }
     },
 };
 
@@ -79,6 +84,9 @@ const mutations = {
     saveTotalToolCount: (state, { toolCount }) => {
         state.totalToolCount = toolCount;
     },
+    saveShowHelp: (state, { showHelp }) => {
+        state.hasHelp = showHelp;
+    },
 };
 
 export const toolStore = {

From 80530b2f5a89d3f67d39cdaa9f5d1a6e18fa50af Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Wed, 24 Aug 2022 21:04:09 -0400
Subject: [PATCH 03/15] Infinite-scroll results page (new vue component) for
 AdvancedToolSearch

---
 .../Panels/Common/ToolAdvancedSearch.vue      | 140 ++++--------------
 .../Panels/Common/ToolSearch.test.js          |   7 +-
 .../components/Panels/Common/ToolSearch.vue   |  25 +---
 .../components/providers/storeProviders.js    |   2 +-
 client/src/store/toolStore.js                 |  19 +--
 5 files changed, 40 insertions(+), 153 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index d588e214a8d..ac6385e2242 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -1,21 +1,35 @@
 <template>
-    <ToolsProvider
-        v-slot="{ loading, result: itemsLoaded, count: totalItems }"
-        :filter-settings="filterSettings"
-        :show-help="showHelp === 'true'">
+    <ToolsProvider v-slot="{ loading, result: itemsLoaded }" :filter-settings="filterSettings">
         <section>
             <div class="mb-2">
-                <span class="row">
+                <span class="row mb-1">
                     <span class="col">
-                        <h4 class="d-inline-block align-middle">Advanced Tool Search Results</h4>
-                        <b-button v-if="hasFilters" class="float-right" size="sm" @click="onClear">
-                            <icon icon="redo" />
-                            <span>{{ "Clear Search" | localize }}</span>
+                        <h4 class="d-inline-block">Advanced Tool Search Results</h4>
+                        <b-button
+                            v-if="hasFilters && itemsLoaded.length !== 0"
+                            class="float-right"
+                            size="sm"
+                            :pressed="listView"
+                            :variant="listView ? 'info' : 'secondary'"
+                            data-description="show list view for tools"
+                            @click="listView = !listView">
+                            <icon icon="list" />
+                            <span>{{ "List View" | localize }}</span>
                         </b-button>
                     </span>
                 </span>
                 <span v-if="itemsLoaded.length !== 0 && hasFilters" class="row">
-                    <span class="col"> (found {{ itemsLoaded.length }} of {{ totalItems }} tools) </span>
+                    <span class="col d-inline-block">
+                        (found {{ itemsLoaded.length }} tools for
+                        <a id="popover-filters" href="javascript:void(0)">filters</a>)
+                        <b-popover target="popover-filters" triggers="hover" placement="top">
+                            <template v-slot:title>Filters</template>
+                            <div v-for="(value, filter) in filterSettings" :key="filter">
+                                <b>{{ filter }}</b
+                                >: {{ value }}
+                            </div>
+                        </b-popover>
+                    </span>
                 </span>
             </div>
             <div>
@@ -29,55 +43,7 @@
                     No tools found for selected filter(s): {{ filterSettings }}
                 </b-alert>
                 <div v-else>
-                    <b-card v-for="(tool, key) in itemsLoaded" :key="key" no-body>
-                        <b-card-header
-                            v-b-toggle="'accordion-' + key"
-                            :disabled="!hasHelp(tool.help)"
-                            :role="hasHelp(tool.help) ? 'button' : ''">
-                            <span class="pl-2 d-flex justify-content-between">
-                                <span class="row">
-                                    <a
-                                        :href="tool.target === 'galaxy_main' ? 'javascript:void(0)' : tool.link"
-                                        @click.stop="onOpen(tool)">
-                                        <b>{{ tool.name }}</b> {{ tool.description }}
-                                    </a>
-                                    <b-badge class="ml-1">{{ tool.panel_section_name }}</b-badge>
-                                    <b-badge
-                                        v-if="tool.is_workflow_compatible"
-                                        v-b-tooltip.hover
-                                        class="ml-1"
-                                        variant="success"
-                                        title="Can use this tool in Workflows"
-                                        >Workflow</b-badge
-                                    >
-                                    <b-badge v-if="tool.hidden" class="ml-1" variant="danger">Hidden</b-badge>
-                                </span>
-                                <i v-if="hasHelp(tool.help)" class="text-secondary"> Click here to expand tool info </i>
-                            </span>
-                        </b-card-header>
-                        <b-collapse :id="'accordion-' + key" role="tabpanel">
-                            <b-card-body>
-                                <p
-                                    v-if="helpSummary(tool.help)"
-                                    :id="'collapseInfo-' + key"
-                                    class="collapse show"
-                                    v-html="helpSummary(tool.help)"></p>
-                                <a
-                                    v-if="helpSummary(tool.help)"
-                                    data-toggle="collapse"
-                                    :href="'#collapseInfo-' + key"
-                                    role="button"
-                                    aria-expanded="false"
-                                    :aria-controls="'collapseInfo-' + key">
-                                    Show more/less
-                                </a>
-                                <p
-                                    :id="'collapseInfo-' + key"
-                                    :class="helpSummary(tool.help) ? 'collapse' : ''"
-                                    v-html="tool.help"></p>
-                            </b-card-body>
-                        </b-collapse>
-                    </b-card>
+                    <ToolAdvancedSearchResults :tools="itemsLoaded" :list-view="listView" />
                 </div>
                 <b-button
                     v-if="hasFilters && !loading && offset > 200"
@@ -94,15 +60,16 @@
         </section>
     </ToolsProvider>
 </template>
+
 <script>
-import { getGalaxyInstance } from "app";
 import LoadingSpan from "components/LoadingSpan";
-import { openGlobalUploadModal } from "components/Upload";
 import { ToolsProvider } from "components/providers/storeProviders";
+import ToolAdvancedSearchResults from "./ToolAdvancedSearchResults";
 
 export default {
     components: {
         LoadingSpan,
+        ToolAdvancedSearchResults,
         ToolsProvider,
     },
     props: {
@@ -122,18 +89,11 @@ export default {
             type: String,
             default: "",
         },
-        showHelp: {
-            type: String,
-            default: "false",
-        },
-        help: {
-            type: String,
-            default: "",
-        },
     },
     data() {
         return {
             offset: 0,
+            listView: false,
         };
     },
     computed: {
@@ -143,7 +103,7 @@ export default {
                 if (value && value !== "") {
                     if (filter === "panelSectionName") {
                         newFilterSettings["panel_section_name"] = value;
-                    } else if (filter !== "showHelp") {
+                    } else {
                         newFilterSettings[filter] = value;
                     }
                 }
@@ -164,49 +124,9 @@ export default {
         onScroll(e) {
             this.offset = e.target.scrollTop;
         },
-        hasHelp(help) {
-            return help && help !== "\n";
-        },
-        onClear() {
-            this.$router.push({ path: "/tools/advanced_search" });
-        },
-        onOpen(tool) {
-            if (tool.id === "upload1") {
-                openGlobalUploadModal();
-            } else if (tool.form_style === "regular") {
-                const Galaxy = getGalaxyInstance();
-                // encode spaces in tool.id
-                const toolId = tool.id;
-                const toolVersion = tool.version;
-                Galaxy.router.push(`/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}`);
-            }
-        },
         scrollToTop() {
             document.querySelector(".center-panel").scrollTop = 0;
         },
-        helpSummary(help) {
-            const parser = new DOMParser();
-            const helpDoc = parser.parseFromString(help, "text/html");
-            const xpaths = [
-                "//strong[text()='What it does']/../following-sibling::*",
-                "//strong[text()='What It Does']/../following-sibling::*",
-                "//h1[text()='Synopsis']/following-sibling::*",
-                "//strong[text()='Syntax']/../following-sibling::*",
-            ];
-            const matches = [];
-            xpaths.forEach((xpath) => {
-                matches.push(
-                    helpDoc.evaluate(xpath, helpDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
-                );
-            });
-            let returnVal = null;
-            matches.forEach((match) => {
-                if (match) {
-                    returnVal = match.innerHTML + "\n";
-                }
-            });
-            return returnVal;
-        },
     },
 };
 </script>
diff --git a/client/src/components/Panels/Common/ToolSearch.test.js b/client/src/components/Panels/Common/ToolSearch.test.js
index eec25c51f78..068f416e2a6 100644
--- a/client/src/components/Panels/Common/ToolSearch.test.js
+++ b/client/src/components/Panels/Common/ToolSearch.test.js
@@ -20,7 +20,6 @@ describe("ToolSearch", () => {
         await wrapper.setProps({ showAdvanced: true });
         expect(wrapper.find("[description='advanced tool filters']").exists()).toBe(true);
         const filterInputs = {
-            "[description='show help text']": false,
             "[placeholder='any tool name']": "name-filter",
             "[placeholder='any section']": "section-filter",
             "[placeholder='any id']": "id-filter",
@@ -34,17 +33,15 @@ describe("ToolSearch", () => {
                 filterInput.setValue(value);
             }
         });
-        const helpFilterInput = wrapper.find("[description='show help text']");
-        await helpFilterInput.setChecked(filterInputs["[description='show help text']"]);
 
         // Test: values are stored in the filterSettings object
         expect(Object.values(wrapper.vm.filterSettings)).toEqual(Object.values(filterInputs));
 
         // Test: clearing the filters
         const clearButton = wrapper.find("[description='clear filters']");
-        expect(Object.values(wrapper.vm.filterSettings).length).toBe(5);
+        expect(Object.values(wrapper.vm.filterSettings).length).toBe(4);
         await clearButton.trigger("click");
-        expect(Object.values(wrapper.vm.filterSettings).length).toBe(1);
+        expect(Object.values(wrapper.vm.filterSettings).length).toBe(0);
 
         // Test: keyup.esc (should toggle the view out)
         const nameField = wrapper.find("[placeholder='any tool name']");
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 7cd59dfa9d1..db7baa7b3ca 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -23,30 +23,12 @@
             <b-form-input v-model="filterSettings['id']" size="sm" placeholder="any id" />
             <small class="mt-1">Filter by description:</small>
             <b-form-input v-model="filterSettings['description']" size="sm" placeholder="any description" />
-            <small>Show help text for tools:</small>
-            <span v-b-tooltip.noninteractive.hover title="Disabling this could provide faster results">
-                <icon icon="question" />
-            </span>
-            <b-form-checkbox v-model="filterSettings['showHelp']" size="sm" switch description="show help text" />
-            <span v-if="filterSettings['showHelp']">
-                <small>Search within help text:</small>
-                <span
-                    v-b-tooltip.noninteractive.hover
-                    title="This will help expand your search by including text from tool help information">
-                    <icon icon="question" />
-                </span>
-                <b-form-checkbox v-model="filterHelp" size="sm" switch />
-                <span v-if="filterHelp">
-                    <small class="mt-1">Filter by help text:</small>
-                    <b-form-input v-model="filterSettings['help']" size="sm" placeholder="any help text" />
-                </span>
-            </span>
             <div class="mt-3">
                 <b-button class="mr-1" size="sm" variant="primary" @click="onSearch">
                     <icon icon="search" />
                     <span>{{ "Search" | localize }}</span>
                 </b-button>
-                <b-button size="sm" description="clear filters" @click="filterSettings = { showHelp: true }">
+                <b-button size="sm" description="clear filters" @click="filterSettings = {}">
                     <icon icon="redo" />
                     <span>{{ "Clear" | localize }}</span>
                 </b-button>
@@ -89,8 +71,7 @@ export default {
             favorites: ["#favs", "#favorites", "#favourites"],
             minQueryLength: 3,
             loading: false,
-            filterSettings: { showHelp: true },
-            filterHelp: false,
+            filterSettings: {},
         };
     },
     computed: {
@@ -126,7 +107,7 @@ export default {
         },
         onSearch() {
             for (const [filter, value] of Object.entries(this.filterSettings)) {
-                if (!value || (filter === "help" && (!this.filterSettings["showHelp"] || !this.filterHelp))) {
+                if (!value) {
                     delete this.filterSettings[filter];
                 }
             }
diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index 2a2dfd4154d..441daa77272 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -190,4 +190,4 @@ export const StoreProvider = (storeAction, storeGetter, storeCountGetter = undef
 export const DatasetProvider = StoreProvider("fetchDataset", "getDataset");
 export const CollectionElementsProvider = StoreProvider("fetchCollectionElements", "getCollectionElements");
 export const HistoryItemsProvider = StoreProvider("fetchHistoryItems", "getHistoryItems", "getTotalMatchesCount");
-export const ToolsProvider = StoreProvider("fetchAllTools", "getTools", "getTotalToolCount");
+export const ToolsProvider = StoreProvider("fetchAllTools", "getTools");
diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
index 6256e9cae1b..909ddf2dfbc 100644
--- a/client/src/store/toolStore.js
+++ b/client/src/store/toolStore.js
@@ -1,8 +1,6 @@
 export const state = {
     toolById: {},
     toolsList: [],
-    totalToolCount: undefined,
-    hasHelp: true,
 };
 
 import Vue from "vue";
@@ -60,15 +58,12 @@ const actions = {
         const { data } = await axios.get(`${getAppRoot()}api/tools/${toolId}`);
         commit("saveToolForId", { toolId, toolData: data });
     },
-    fetchAllTools: async ({ state, commit }, { showHelp }) => {
+    fetchAllTools: async ({ state, commit }) => {
         // Preventing store from being populated for every search: we fetch again only if:
-        // store isn't already populated (initial fetch) OR user now wants (or doesn't want) help text
-        if (!state.toolsList[0] || !state.totalToolCount || state.hasHelp !== showHelp) {
+        // store isn't already populated (initial fetch)
+        if (!state.toolsList[0]) {
             console.log("fetching all tools once");
-            const { data } = await axios.get(`${getAppRoot()}api/tools?tool_help=${showHelp}&in_panel=False`);
-            const toolCount = data.length;
-            commit("saveTotalToolCount", { toolCount });
-            commit("saveShowHelp", { showHelp });
+            const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=False`);
             commit("saveTools", { toolsData: data });
         }
     },
@@ -81,12 +76,6 @@ const mutations = {
     saveTools: (state, { toolsData }) => {
         Vue.set(state.toolsList, 0, toolsData);
     },
-    saveTotalToolCount: (state, { toolCount }) => {
-        state.totalToolCount = toolCount;
-    },
-    saveShowHelp: (state, { showHelp }) => {
-        state.hasHelp = showHelp;
-    },
 };
 
 export const toolStore = {

From e1013e5cac2c5ad1959dff1a97d11e5178fdd63b Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Thu, 25 Aug 2022 15:50:14 -0400
Subject: [PATCH 04/15] Added vue component for ToolAdvancedSearch results

---
 .../Common/ToolAdvancedSearchResults.vue      | 179 ++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 client/src/components/Panels/Common/ToolAdvancedSearchResults.vue

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
new file mode 100644
index 00000000000..c4c513fc807
--- /dev/null
+++ b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
@@ -0,0 +1,179 @@
+<template>
+    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
+        <b-card v-for="(tool, key) in buffer" :key="key" :class="!listView && 'mb-3'" no-body>
+            <b-card-header>
+                <span class="d-inline-flex">
+                    <span class="d-flex">
+                        <a
+                            :href="tool.target === 'galaxy_main' ? 'javascript:void(0)' : tool.link"
+                            @click.stop="onOpen(tool)">
+                            <b>{{ tool.name }}</b> {{ tool.description }}
+                        </a>
+                        <b-badge class="ml-1">{{ tool.panel_section_name }}</b-badge>
+                        <b-badge
+                            v-if="tool.is_workflow_compatible"
+                            v-b-tooltip.hover
+                            class="ml-1"
+                            variant="success"
+                            title="Can use this tool in Workflows">
+                            Workflow
+                        </b-badge>
+                        <b-badge v-if="tool.hidden" class="ml-1" variant="danger">Hidden</b-badge>
+                    </span>
+                </span>
+            </b-card-header>
+            <b-card-body v-if="!listView">
+                <span v-if="helpContents[key]['help_text']">
+                    <span v-if="helpContents[key]['summary']">
+                        <p v-if="!helpContents[key]['toggle_help']" v-html="helpContents[key]['summary']" />
+                        <a href="javascript:void(0)" @click.stop="toggleHelp(key)">
+                            See
+                            <span v-if="!helpContents[key]['toggle_help']">more</span><span v-else>less</span>
+                            ...
+                        </a>
+                    </span>
+                    <p v-if="helpContents[key]['toggle_help']" v-html="helpContents[key]['help_text']" />
+                </span>
+                <i v-else class="text-secondary">There is no information for this tool. Open it to see more info.</i>
+            </b-card-body>
+        </b-card>
+    </div>
+</template>
+
+<script>
+import { getAppRoot } from "onload/loadConfig";
+import infiniteScroll from "vue-infinite-scroll";
+import { openGlobalUploadModal } from "components/Upload";
+import axios from "axios";
+
+export default {
+    directives: { infiniteScroll },
+    props: {
+        tools: {
+            type: Array,
+            default: null,
+        },
+        listView: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            bufferLen: 4,
+            busy: false,
+            helpContents: {},
+        };
+    },
+    computed: {
+        buffer() {
+            return this.listView ? this.tools : this.tools.slice(0, this.bufferLen);
+        },
+    },
+    watch: {
+        bufferLen() {
+            this.buffer.forEach(async (tool, index) => {
+                await this.fetchHelp(tool.id, index);
+            });
+        },
+    },
+    created() {
+        const initData = { summary: "", help_text: "", toggle_help: false, is_fetched: false };
+        const defaultHelpCont = {};
+        this.tools.forEach((tool, index) => {
+            defaultHelpCont[index] = { ...initData };
+        });
+        this.helpContents = { ...defaultHelpCont };
+        this.buffer.forEach(async (tool, index) => {
+            await this.fetchHelp(tool.id, index);
+        });
+    },
+    methods: {
+        onOpen(tool) {
+            if (tool.id === "upload1") {
+                openGlobalUploadModal();
+            } else if (tool.form_style === "regular") {
+                // encode spaces in tool.id
+                const toolId = tool.id;
+                const toolVersion = tool.version;
+                this.$router.push({ path: `/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}` });
+            }
+        },
+        loadMore() {
+            if (this.buffer.length < this.tools.length) {
+                this.busy = true;
+                setTimeout(() => {
+                    this.bufferLen += 4;
+                    this.busy = false;
+                }, 100);
+            }
+        },
+        toggleHelp(key) {
+            this.helpContents[key]["toggle_help"] = !this.helpContents[key]["toggle_help"];
+        },
+        async fetchHelp(id, key) {
+            if (!this.helpContents[key]["is_fetched"]) {
+                this.helpContents[key]["is_fetched"] = true; // tags the tool's help as being fetched
+                this.busy = true;
+                let helpText = "";
+                let summary = null;
+                await axios
+                    .get(`${getAppRoot()}api/tools/${id}/build`)
+                    .then((response) => {
+                        helpText = response.data.help;
+                    })
+                    .catch((error) => {
+                        console.error(error);
+                    });
+                this.busy = false;
+                if (helpText && helpText != "\n") {
+                    summary = this.parseHelp(helpText);
+                } else {
+                    helpText = ""; // for cases where helpText == '\n'
+                }
+                if (!summary) {
+                    this.helpContents[key]["toggle_help"] = true;
+                }
+                this.helpContents[key]["summary"] = summary;
+                this.helpContents[key]["help_text"] = helpText;
+            }
+        },
+        parseHelp(help) {
+            let summary = "";
+            const parser = new DOMParser();
+            const helpDoc = parser.parseFromString(help, "text/html");
+            const xpaths = [
+                "//strong[text()='What it does']/../following-sibling::*",
+                "//strong[text()='What It Does']/../following-sibling::*",
+                "//h1[text()='Synopsis']/following-sibling::*",
+                "//strong[text()='Syntax']/../following-sibling::*",
+            ];
+            const matches = [];
+            xpaths.forEach((xpath) => {
+                matches.push(
+                    helpDoc.evaluate(xpath, helpDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
+                );
+            });
+            matches.forEach((match) => {
+                if (match) {
+                    summary += match.innerHTML + "\n";
+                }
+            });
+            if (!summary) {
+                const helpText = helpDoc.documentElement.textContent;
+                if (helpText) {
+                    return helpText.substring(0, helpText.indexOf("\n\n"));
+                }
+            }
+            return summary;
+        },
+    },
+};
+</script>
+
+<style>
+.btn-back-to-top {
+    position: fixed;
+    bottom: 2em;
+}
+</style>

From ad515c4ac7362a713f065e9fb2f2c5aef1443f87 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Thu, 25 Aug 2022 15:53:24 -0400
Subject: [PATCH 05/15] Remove redundant styling

---
 .../Panels/Common/ToolAdvancedSearchResults.vue          | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
index c4c513fc807..95f12226a8d 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
@@ -169,11 +169,4 @@ export default {
         },
     },
 };
-</script>
-
-<style>
-.btn-back-to-top {
-    position: fixed;
-    bottom: 2em;
-}
-</style>
+</script>
\ No newline at end of file

From e8fd487a00175f2130f339153c73c2ffbf3eea2c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Thu, 25 Aug 2022 16:01:32 -0400
Subject: [PATCH 06/15] Prettier check

---
 .../src/components/Panels/Common/ToolAdvancedSearchResults.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
index 95f12226a8d..4c1ab1c21d1 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
@@ -169,4 +169,4 @@ export default {
         },
     },
 };
-</script>
\ No newline at end of file
+</script>

From 7a9b318a26616b52d2821df5ee2e7641af1fafb1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Sun, 28 Aug 2022 17:05:03 -0400
Subject: [PATCH 07/15] Changing AdvancedToolSearchResults to b-table

---
 .../Panels/Common/ToolAdvancedSearch.vue      |  35 +---
 .../Common/ToolAdvancedSearchResults.vue      | 175 ++++++++++--------
 client/src/style/scss/ui.scss                 |   9 +
 3 files changed, 115 insertions(+), 104 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index ac6385e2242..5dcd42c0e35 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -5,23 +5,12 @@
                 <span class="row mb-1">
                     <span class="col">
                         <h4 class="d-inline-block">Advanced Tool Search Results</h4>
-                        <b-button
-                            v-if="hasFilters && itemsLoaded.length !== 0"
-                            class="float-right"
-                            size="sm"
-                            :pressed="listView"
-                            :variant="listView ? 'info' : 'secondary'"
-                            data-description="show list view for tools"
-                            @click="listView = !listView">
-                            <icon icon="list" />
-                            <span>{{ "List View" | localize }}</span>
-                        </b-button>
                     </span>
                 </span>
                 <span v-if="itemsLoaded.length !== 0 && hasFilters" class="row">
                     <span class="col d-inline-block">
-                        (found {{ itemsLoaded.length }} tools for
-                        <a id="popover-filters" href="javascript:void(0)">filters</a>)
+                        Found {{ itemsLoaded.length }} tools for
+                        <a id="popover-filters" href="javascript:void(0)">filters</a>.
                         <b-popover target="popover-filters" triggers="hover" placement="top">
                             <template v-slot:title>Filters</template>
                             <div v-for="(value, filter) in filterSettings" :key="filter">
@@ -43,18 +32,16 @@
                     No tools found for selected filter(s): {{ filterSettings }}
                 </b-alert>
                 <div v-else>
-                    <ToolAdvancedSearchResults :tools="itemsLoaded" :list-view="listView" />
+                    <ToolAdvancedSearchResults :tools="itemsLoaded" />
                 </div>
                 <b-button
                     v-if="hasFilters && !loading && offset > 200"
-                    v-b-tooltip.hover
-                    class="btn-back-to-top"
+                    v-b-tooltip.noninteractive.hover
+                    class="ui-btn-back-to-top btn-circle"
                     title="Scroll To Top"
-                    variant="danger"
-                    pill
-                    size="lg"
+                    variant="info"
                     @click="scrollToTop">
-                    <icon icon="arrow-up" />
+                    <i class="fa fa-arrow-up" />
                 </b-button>
             </div>
         </section>
@@ -93,7 +80,6 @@ export default {
     data() {
         return {
             offset: 0,
-            listView: false,
         };
     },
     computed: {
@@ -130,10 +116,3 @@ export default {
     },
 };
 </script>
-
-<style>
-.btn-back-to-top {
-    position: fixed;
-    bottom: 2em;
-}
-</style>
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
index 4c1ab1c21d1..4e5ffe10fa0 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
@@ -1,46 +1,64 @@
 <template>
     <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
-        <b-card v-for="(tool, key) in buffer" :key="key" :class="!listView && 'mb-3'" no-body>
-            <b-card-header>
-                <span class="d-inline-flex">
-                    <span class="d-flex">
+        <b-overlay :show="busy" opacity="0.5">
+            <b-table ref="toolTable" striped bordered :fields="fields" :items="buffer">
+                <template v-slot:cell(name)="row">
+                    <span v-if="!row.item.help_text"
+                        ><b>{{ row.item.name }}</b> {{ row.item.description }}</span
+                    >
+                    <span v-else>
+                        <b-link href="javascript:void(0)" role="button" @click="toggleHelp(row)">
+                            <b>{{ row.item.name }}</b> {{ row.item.description }}
+                        </b-link>
+                        <p v-if="!row.item._showDetails && row.item.summary" v-html="row.item.summary" />
+                    </span>
+                </template>
+                <template v-slot:row-details="row">
+                    <b-card v-if="row.item.help_text">
+                        <p class="mb-1" v-html="row.item.help_text" />
                         <a
-                            :href="tool.target === 'galaxy_main' ? 'javascript:void(0)' : tool.link"
-                            @click.stop="onOpen(tool)">
-                            <b>{{ tool.name }}</b> {{ tool.description }}
+                            :href="row.item.target === 'galaxy_main' ? 'javascript:void(0)' : row.item.link"
+                            @click.stop="onOpen(row.item)">
+                            Click here to open the tool
                         </a>
-                        <b-badge class="ml-1">{{ tool.panel_section_name }}</b-badge>
-                        <b-badge
-                            v-if="tool.is_workflow_compatible"
-                            v-b-tooltip.hover
-                            class="ml-1"
-                            variant="success"
-                            title="Can use this tool in Workflows">
-                            Workflow
-                        </b-badge>
-                        <b-badge v-if="tool.hidden" class="ml-1" variant="danger">Hidden</b-badge>
-                    </span>
-                </span>
-            </b-card-header>
-            <b-card-body v-if="!listView">
-                <span v-if="helpContents[key]['help_text']">
-                    <span v-if="helpContents[key]['summary']">
-                        <p v-if="!helpContents[key]['toggle_help']" v-html="helpContents[key]['summary']" />
-                        <a href="javascript:void(0)" @click.stop="toggleHelp(key)">
-                            See
-                            <span v-if="!helpContents[key]['toggle_help']">more</span><span v-else>less</span>
-                            ...
-                        </a>
-                    </span>
-                    <p v-if="helpContents[key]['toggle_help']" v-html="helpContents[key]['help_text']" />
-                </span>
-                <i v-else class="text-secondary">There is no information for this tool. Open it to see more info.</i>
-            </b-card-body>
-        </b-card>
+                    </b-card>
+                </template>
+                <template v-slot:cell(section)="row">
+                    {{ row.item.panel_section_name }}
+                </template>
+                <template v-slot:cell(workflow)="row">
+                    <span
+                        v-if="row.item.is_workflow_compatible"
+                        v-b-tooltip.hover
+                        class="fa fa-check text-success"
+                        title="Is Workflow Compatible" />
+                    <span v-else v-b-tooltip.hover class="fa fa-times text-danger" title="Not Workflow Compatible" />
+                </template>
+                <template v-slot:cell(target)="row">
+                    <span
+                        v-if="row.item.target === 'galaxy_main'"
+                        v-b-tooltip.hover
+                        class="fa fa-check text-success"
+                        title="Is Local" />
+                    <span v-else v-b-tooltip.hover class="fa fa-times text-danger" title="Not Local" />
+                </template>
+                <template v-slot:cell(open)="row">
+                    <b-button
+                        v-b-tooltip.hover.top
+                        :title="'Open Tool' | localize"
+                        class="fa fa-play"
+                        size="sm"
+                        variant="primary"
+                        :href="row.item.target === 'galaxy_main' ? 'javascript:void(0)' : row.item.link"
+                        @click.stop="onOpen(row.item)" />
+                </template>
+            </b-table>
+        </b-overlay>
     </div>
 </template>
 
 <script>
+import _l from "utils/localization";
 import { getAppRoot } from "onload/loadConfig";
 import infiniteScroll from "vue-infinite-scroll";
 import { openGlobalUploadModal } from "components/Upload";
@@ -53,39 +71,46 @@ export default {
             type: Array,
             default: null,
         },
-        listView: {
-            type: Boolean,
-            default: false,
-        },
     },
     data() {
         return {
+            buffer: {},
             bufferLen: 4,
             busy: false,
-            helpContents: {},
+            fields: [
+                {
+                    key: "name",
+                    label: _l("Name"),
+                    sortable: true,
+                },
+                {
+                    key: "section",
+                    label: _l("Section"),
+                    sortable: true,
+                },
+                {
+                    key: "workflow",
+                    label: _l("Workflow Compatible"),
+                    sortable: false,
+                },
+                {
+                    key: "target",
+                    label: _l("Local Tool"),
+                    sortable: false,
+                },
+                {
+                    key: "open",
+                    label: "",
+                },
+            ],
         };
     },
-    computed: {
-        buffer() {
-            return this.listView ? this.tools : this.tools.slice(0, this.bufferLen);
-        },
-    },
-    watch: {
-        bufferLen() {
-            this.buffer.forEach(async (tool, index) => {
-                await this.fetchHelp(tool.id, index);
-            });
-        },
-    },
     created() {
-        const initData = { summary: "", help_text: "", toggle_help: false, is_fetched: false };
-        const defaultHelpCont = {};
-        this.tools.forEach((tool, index) => {
-            defaultHelpCont[index] = { ...initData };
-        });
-        this.helpContents = { ...defaultHelpCont };
+        const initData = { summary: "", help_text: "", _showDetails: false, is_fetched: false };
+        this.buffer = this.tools.slice(0, this.bufferLen);
+        this.buffer.forEach((tool) => Object.assign(tool, { ...initData }));
         this.buffer.forEach(async (tool, index) => {
-            await this.fetchHelp(tool.id, index);
+            await this.fetchHelp(index);
         });
     },
     methods: {
@@ -99,21 +124,27 @@ export default {
                 this.$router.push({ path: `/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}` });
             }
         },
-        loadMore() {
+        async loadMore() {
             if (this.buffer.length < this.tools.length) {
                 this.busy = true;
                 setTimeout(() => {
                     this.bufferLen += 4;
+                    this.buffer = this.tools.slice(0, this.bufferLen);
+                    this.buffer.forEach(async (tool, index) => {
+                        await this.fetchHelp(index);
+                    });
                     this.busy = false;
                 }, 100);
             }
         },
-        toggleHelp(key) {
-            this.helpContents[key]["toggle_help"] = !this.helpContents[key]["toggle_help"];
+        toggleHelp(row) {
+            row.toggleDetails();
+            this.$refs.toolTable.refresh();
         },
-        async fetchHelp(id, key) {
-            if (!this.helpContents[key]["is_fetched"]) {
-                this.helpContents[key]["is_fetched"] = true; // tags the tool's help as being fetched
+        async fetchHelp(index) {
+            const id = this.buffer[index]["id"];
+            if (!this.buffer[index]["is_fetched"]) {
+                this.buffer[index]["is_fetched"] = true; // tags the tool's help as being fetched
                 this.busy = true;
                 let helpText = "";
                 let summary = null;
@@ -131,11 +162,9 @@ export default {
                 } else {
                     helpText = ""; // for cases where helpText == '\n'
                 }
-                if (!summary) {
-                    this.helpContents[key]["toggle_help"] = true;
-                }
-                this.helpContents[key]["summary"] = summary;
-                this.helpContents[key]["help_text"] = helpText;
+                this.buffer[index]["summary"] = summary;
+                this.buffer[index]["help_text"] = helpText;
+                this.$refs.toolTable.refresh();
             }
         },
         parseHelp(help) {
@@ -159,12 +188,6 @@ export default {
                     summary += match.innerHTML + "\n";
                 }
             });
-            if (!summary) {
-                const helpText = helpDoc.documentElement.textContent;
-                if (helpText) {
-                    return helpText.substring(0, helpText.indexOf("\n\n"));
-                }
-            }
             return summary;
         },
     },
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 6486f51cd38..d6f6306aa86 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -102,6 +102,15 @@ $ui-margin-horizontal-large: $margin-v * 2;
     cursor: pointer;
 }
 
+.ui-btn-back-to-top {
+    bottom: 2em;
+    position: fixed;
+    opacity: 0.5;
+}
+.ui-btn-back-to-top:hover {
+    opacity: 1;
+}
+
 // thumbnails
 .ui-thumbnails {
     .ui-thumbnails-item {

From a50fa999a1918dbd281003d6bd527bf5828fa84e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Sun, 28 Aug 2022 17:21:02 -0400
Subject: [PATCH 08/15] Removed redundant function from toolsStore

---
 client/src/store/toolStore.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
index 909ddf2dfbc..1fee6a279dc 100644
--- a/client/src/store/toolStore.js
+++ b/client/src/store/toolStore.js
@@ -49,7 +49,6 @@ const getters = {
 
             return returnedTools;
         },
-    getTotalToolCount: (state) => () => state.totalToolCount,
 };
 
 const actions = {

From 1d3b49ba007a80f65675f8ad6d61a021718ea7f8 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Mon, 29 Aug 2022 23:15:43 -0400
Subject: [PATCH 09/15] toolSearch: Removing JSON filterSettings if no results
 found

---
 client/src/components/Panels/Common/ToolAdvancedSearch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index 5dcd42c0e35..7fb483b49d4 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -29,7 +29,7 @@
                     There are no valid filters applied. Please add filters to the menu in the Tool Panel.
                 </b-alert>
                 <b-alert v-else-if="!itemsLoaded || itemsLoaded.length == 0" class="m-2" variant="danger" show>
-                    No tools found for selected filter(s): {{ filterSettings }}
+                    No tools found for the entered filters.
                 </b-alert>
                 <div v-else>
                     <ToolAdvancedSearchResults :tools="itemsLoaded" />

From fdeff87cfdb7df08016552e77546ffa5e3fac656 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Tue, 6 Sep 2022 18:31:36 -0400
Subject: [PATCH 10/15] toolSearch: Add new components for scrollToTop and
 axios fetch (services.js)

---
 .../Panels/Common/ScrollToTopButton.vue       | 27 ++++++++++
 .../Panels/Common/ToolAdvancedSearch.vue      | 32 +----------
 .../Common/ToolAdvancedSearchResults.vue      | 53 ++++++++++---------
 .../src/components/Panels/Common/services.js  | 12 +++++
 client/src/store/toolStore.js                 |  2 +-
 5 files changed, 71 insertions(+), 55 deletions(-)
 create mode 100644 client/src/components/Panels/Common/ScrollToTopButton.vue
 create mode 100644 client/src/components/Panels/Common/services.js

diff --git a/client/src/components/Panels/Common/ScrollToTopButton.vue b/client/src/components/Panels/Common/ScrollToTopButton.vue
new file mode 100644
index 00000000000..3be5940779e
--- /dev/null
+++ b/client/src/components/Panels/Common/ScrollToTopButton.vue
@@ -0,0 +1,27 @@
+<template>
+    <b-button
+        v-if="offset > 200"
+        v-b-tooltip.noninteractive.hover
+        class="ui-btn-back-to-top btn-circle"
+        title="Scroll To Top"
+        variant="info"
+        @click="scrollToTop">
+        <i class="fa fa-arrow-up" />
+    </b-button>
+</template>
+
+<script>
+export default {
+    props: {
+        offset: {
+            type: Number,
+            default: 0,
+        },
+    },
+    methods: {
+        scrollToTop() {
+            document.querySelector(".center-panel").scrollTop = 0;
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index 7fb483b49d4..cff43ff62d1 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -26,23 +26,14 @@
                     <LoadingSpan message="Loading Advanced Search Results" />
                 </b-alert>
                 <b-alert v-else-if="!hasFilters" class="m-2" variant="secondary" show>
-                    There are no valid filters applied. Please add filters to the menu in the Tool Panel.
+                    Please add filters to the menu in the Tool Panel.
                 </b-alert>
-                <b-alert v-else-if="!itemsLoaded || itemsLoaded.length == 0" class="m-2" variant="danger" show>
+                <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>
                     <ToolAdvancedSearchResults :tools="itemsLoaded" />
                 </div>
-                <b-button
-                    v-if="hasFilters && !loading && offset > 200"
-                    v-b-tooltip.noninteractive.hover
-                    class="ui-btn-back-to-top btn-circle"
-                    title="Scroll To Top"
-                    variant="info"
-                    @click="scrollToTop">
-                    <i class="fa fa-arrow-up" />
-                </b-button>
             </div>
         </section>
     </ToolsProvider>
@@ -77,11 +68,6 @@ export default {
             default: "",
         },
     },
-    data() {
-        return {
-            offset: 0,
-        };
-    },
     computed: {
         filterSettings() {
             const newFilterSettings = {};
@@ -100,19 +86,5 @@ export default {
             return Object.keys(this.filterSettings).length;
         },
     },
-    beforeDestroy() {
-        document.querySelector(".center-panel").removeEventListener("scroll", this.onScroll, true);
-    },
-    mounted() {
-        document.querySelector(".center-panel").addEventListener("scroll", this.onScroll, true);
-    },
-    methods: {
-        onScroll(e) {
-            this.offset = e.target.scrollTop;
-        },
-        scrollToTop() {
-            document.querySelector(".center-panel").scrollTop = 0;
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
index 4e5ffe10fa0..ea3c99fcc88 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
@@ -54,18 +54,24 @@
                 </template>
             </b-table>
         </b-overlay>
+        <ScrollToTopButton :offset="offset" />
     </div>
 </template>
 
 <script>
+const loadTimeout = 100;
+const defaultBufferLen = 4;
 import _l from "utils/localization";
-import { getAppRoot } from "onload/loadConfig";
 import infiniteScroll from "vue-infinite-scroll";
 import { openGlobalUploadModal } from "components/Upload";
-import axios from "axios";
+import { fetchData } from "./services";
+import ScrollToTopButton from "./ScrollToTopButton";
 
 export default {
     directives: { infiniteScroll },
+    components: {
+        ScrollToTopButton,
+    },
     props: {
         tools: {
             type: Array,
@@ -75,8 +81,9 @@ export default {
     data() {
         return {
             buffer: {},
-            bufferLen: 4,
+            bufferLen: defaultBufferLen,
             busy: false,
+            offset: 0,
             fields: [
                 {
                     key: "name",
@@ -113,6 +120,12 @@ export default {
             await this.fetchHelp(index);
         });
     },
+    beforeDestroy() {
+        document.removeEventListener("scroll", this.onScroll, true);
+    },
+    mounted() {
+        document.addEventListener("scroll", this.onScroll, true);
+    },
     methods: {
         onOpen(tool) {
             if (tool.id === "upload1") {
@@ -124,17 +137,20 @@ export default {
                 this.$router.push({ path: `/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}` });
             }
         },
+        onScroll(e) {
+            this.offset = e.target.scrollTop;
+        },
         async loadMore() {
             if (this.buffer.length < this.tools.length) {
                 this.busy = true;
                 setTimeout(() => {
-                    this.bufferLen += 4;
+                    this.bufferLen += defaultBufferLen;
                     this.buffer = this.tools.slice(0, this.bufferLen);
                     this.buffer.forEach(async (tool, index) => {
                         await this.fetchHelp(index);
                     });
                     this.busy = false;
-                }, 100);
+                }, loadTimeout);
             }
         },
         toggleHelp(row) {
@@ -145,25 +161,14 @@ export default {
             const id = this.buffer[index]["id"];
             if (!this.buffer[index]["is_fetched"]) {
                 this.buffer[index]["is_fetched"] = true; // tags the tool's help as being fetched
-                this.busy = true;
-                let helpText = "";
-                let summary = null;
-                await axios
-                    .get(`${getAppRoot()}api/tools/${id}/build`)
-                    .then((response) => {
-                        helpText = response.data.help;
-                    })
-                    .catch((error) => {
-                        console.error(error);
-                    });
-                this.busy = false;
-                if (helpText && helpText != "\n") {
-                    summary = this.parseHelp(helpText);
-                } else {
-                    helpText = ""; // for cases where helpText == '\n'
-                }
-                this.buffer[index]["summary"] = summary;
-                this.buffer[index]["help_text"] = helpText;
+                await fetchData(`api/tools/${id}/build`).then((response) => {
+                    if (response.help && response.help != "\n") {
+                        this.buffer[index]["help_text"] = response.help;
+                        this.buffer[index]["summary"] = this.parseHelp(response.help);
+                    } else {
+                        this.buffer[index]["help_text"] = ""; // for cases where helpText == '\n'
+                    }
+                });
                 this.$refs.toolTable.refresh();
             }
         },
diff --git a/client/src/components/Panels/Common/services.js b/client/src/components/Panels/Common/services.js
new file mode 100644
index 00000000000..ca04d165f73
--- /dev/null
+++ b/client/src/components/Panels/Common/services.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+import { rethrowSimple } from "utils/simple-error";
+import { getAppRoot } from "onload/loadConfig";
+
+export async function fetchData(url) {
+    try {
+        const { data } = await axios.get(`${getAppRoot()}${url}`);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
index 1fee6a279dc..64da6e78088 100644
--- a/client/src/store/toolStore.js
+++ b/client/src/store/toolStore.js
@@ -23,7 +23,7 @@ const getters = {
         (state) =>
         ({ filterSettings }) => {
             // if no filters
-            if (Object.keys(filterSettings).length == 0 || filterSettings == {}) {
+            if (Object.keys(filterSettings).length == 0) {
                 return [];
             }
             const allTools = state.toolsList[0];

From fdc410ac04f04233ee9fffe3a590c399103b944c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Sep 2022 19:23:18 -0400
Subject: [PATCH 11/15] Handle scrolling within the scope of the component,
 avoid parent access

---
 .../Panels/Common/ToolAdvancedSearch.vue          | 15 ++++++++++++++-
 .../Panels/Common/ToolAdvancedSearchResults.vue   | 15 ---------------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index cff43ff62d1..a2c51999247 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -1,6 +1,6 @@
 <template>
     <ToolsProvider v-slot="{ loading, result: itemsLoaded }" :filter-settings="filterSettings">
-        <section>
+        <section class="overflow-auto h-100" @scroll="onScroll">
             <div class="mb-2">
                 <span class="row mb-1">
                     <span class="col">
@@ -35,6 +35,7 @@
                     <ToolAdvancedSearchResults :tools="itemsLoaded" />
                 </div>
             </div>
+            <ScrollToTopButton :offset="offset" />
         </section>
     </ToolsProvider>
 </template>
@@ -43,12 +44,14 @@
 import LoadingSpan from "components/LoadingSpan";
 import { ToolsProvider } from "components/providers/storeProviders";
 import ToolAdvancedSearchResults from "./ToolAdvancedSearchResults";
+import ScrollToTopButton from "./ScrollToTopButton";
 
 export default {
     components: {
         LoadingSpan,
         ToolAdvancedSearchResults,
         ToolsProvider,
+        ScrollToTopButton,
     },
     props: {
         name: {
@@ -68,6 +71,11 @@ export default {
             default: "",
         },
     },
+    data() {
+        return {
+            offset: 0,
+        };
+    },
     computed: {
         filterSettings() {
             const newFilterSettings = {};
@@ -86,5 +94,10 @@ export default {
             return Object.keys(this.filterSettings).length;
         },
     },
+    methods: {
+        onScroll(e) {
+            this.offset = e.target.scrollTop;
+        },
+    },
 };
 </script>
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
index ea3c99fcc88..32b4065f5c3 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearchResults.vue
@@ -54,7 +54,6 @@
                 </template>
             </b-table>
         </b-overlay>
-        <ScrollToTopButton :offset="offset" />
     </div>
 </template>
 
@@ -65,13 +64,9 @@ import _l from "utils/localization";
 import infiniteScroll from "vue-infinite-scroll";
 import { openGlobalUploadModal } from "components/Upload";
 import { fetchData } from "./services";
-import ScrollToTopButton from "./ScrollToTopButton";
 
 export default {
     directives: { infiniteScroll },
-    components: {
-        ScrollToTopButton,
-    },
     props: {
         tools: {
             type: Array,
@@ -83,7 +78,6 @@ export default {
             buffer: {},
             bufferLen: defaultBufferLen,
             busy: false,
-            offset: 0,
             fields: [
                 {
                     key: "name",
@@ -120,12 +114,6 @@ export default {
             await this.fetchHelp(index);
         });
     },
-    beforeDestroy() {
-        document.removeEventListener("scroll", this.onScroll, true);
-    },
-    mounted() {
-        document.addEventListener("scroll", this.onScroll, true);
-    },
     methods: {
         onOpen(tool) {
             if (tool.id === "upload1") {
@@ -137,9 +125,6 @@ export default {
                 this.$router.push({ path: `/?tool_id=${encodeURIComponent(toolId)}&version=${toolVersion}` });
             }
         },
-        onScroll(e) {
-            this.offset = e.target.scrollTop;
-        },
         async loadMore() {
             if (this.buffer.length < this.tools.length) {
                 this.busy = true;

From 62dcf8536155e24254df53ff4bb31126535729a5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Sep 2022 19:52:50 -0400
Subject: [PATCH 12/15] Specify scroll target of scroll top button

---
 client/src/components/Panels/Common/ScrollToTopButton.vue  | 6 +++++-
 client/src/components/Panels/Common/ToolAdvancedSearch.vue | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Panels/Common/ScrollToTopButton.vue b/client/src/components/Panels/Common/ScrollToTopButton.vue
index 3be5940779e..814d06bad04 100644
--- a/client/src/components/Panels/Common/ScrollToTopButton.vue
+++ b/client/src/components/Panels/Common/ScrollToTopButton.vue
@@ -17,10 +17,14 @@ export default {
             type: Number,
             default: 0,
         },
+        target: {
+            type: HTMLElement,
+            default: null,
+        },
     },
     methods: {
         scrollToTop() {
-            document.querySelector(".center-panel").scrollTop = 0;
+            this.target.scrollTop = 0;
         },
     },
 };
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index a2c51999247..71a933a7c36 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -1,6 +1,6 @@
 <template>
     <ToolsProvider v-slot="{ loading, result: itemsLoaded }" :filter-settings="filterSettings">
-        <section class="overflow-auto h-100" @scroll="onScroll">
+        <section class="overflow-auto h-100" @scroll="onScroll" ref="scrollable">
             <div class="mb-2">
                 <span class="row mb-1">
                     <span class="col">
@@ -35,7 +35,7 @@
                     <ToolAdvancedSearchResults :tools="itemsLoaded" />
                 </div>
             </div>
-            <ScrollToTopButton :offset="offset" />
+            <ScrollToTopButton :target="$refs.scrollable" :offset="offset" />
         </section>
     </ToolsProvider>
 </template>

From 6bd25dc6571fbba4662045bff4a830243106fc51 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Sep 2022 20:28:39 -0400
Subject: [PATCH 13/15] Avoid prop mutation, handle locally

---
 .../components/Panels/Common/ScrollToTopButton.vue    | 11 +----------
 .../components/Panels/Common/ToolAdvancedSearch.vue   |  5 ++++-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Panels/Common/ScrollToTopButton.vue b/client/src/components/Panels/Common/ScrollToTopButton.vue
index 814d06bad04..c28d59bd022 100644
--- a/client/src/components/Panels/Common/ScrollToTopButton.vue
+++ b/client/src/components/Panels/Common/ScrollToTopButton.vue
@@ -5,7 +5,7 @@
         class="ui-btn-back-to-top btn-circle"
         title="Scroll To Top"
         variant="info"
-        @click="scrollToTop">
+        @click="$emit('click')">
         <i class="fa fa-arrow-up" />
     </b-button>
 </template>
@@ -17,15 +17,6 @@ export default {
             type: Number,
             default: 0,
         },
-        target: {
-            type: HTMLElement,
-            default: null,
-        },
-    },
-    methods: {
-        scrollToTop() {
-            this.target.scrollTop = 0;
-        },
     },
 };
 </script>
diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index 71a933a7c36..2c7ed47be1d 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -35,7 +35,7 @@
                     <ToolAdvancedSearchResults :tools="itemsLoaded" />
                 </div>
             </div>
-            <ScrollToTopButton :target="$refs.scrollable" :offset="offset" />
+            <ScrollToTopButton :offset="offset" @click="scrollToTop"/>
         </section>
     </ToolsProvider>
 </template>
@@ -98,6 +98,9 @@ export default {
         onScroll(e) {
             this.offset = e.target.scrollTop;
         },
+        scrollToTop() {
+            this.$refs.scrollable.scrollTop = 0;
+        },
     },
 };
 </script>

From ae1217389d27989926553db3e13e93fbacf618b4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Sep 2022 20:35:13 -0400
Subject: [PATCH 14/15] Use default  ref

---
 client/src/components/Panels/Common/ToolAdvancedSearch.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index 2c7ed47be1d..c536481ce26 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -1,6 +1,6 @@
 <template>
     <ToolsProvider v-slot="{ loading, result: itemsLoaded }" :filter-settings="filterSettings">
-        <section class="overflow-auto h-100" @scroll="onScroll" ref="scrollable">
+        <section class="overflow-auto h-100" @scroll="onScroll">
             <div class="mb-2">
                 <span class="row mb-1">
                     <span class="col">
@@ -99,7 +99,7 @@ export default {
             this.offset = e.target.scrollTop;
         },
         scrollToTop() {
-            this.$refs.scrollable.scrollTop = 0;
+            this.$el.scrollTop = 0;
         },
     },
 };

From cea4fc09c0008b1a20320c988d9219a05c7f9791 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <newadmin@galaxyc.local>
Date: Wed, 7 Sep 2022 12:02:07 -0400
Subject: [PATCH 15/15] toolSearch: toolStore improvements, prettier

---
 client/src/components/Panels/Common/ToolAdvancedSearch.vue | 2 +-
 client/src/store/toolStore.js                              | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolAdvancedSearch.vue b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
index c536481ce26..18b3f9aee82 100644
--- a/client/src/components/Panels/Common/ToolAdvancedSearch.vue
+++ b/client/src/components/Panels/Common/ToolAdvancedSearch.vue
@@ -35,7 +35,7 @@
                     <ToolAdvancedSearchResults :tools="itemsLoaded" />
                 </div>
             </div>
-            <ScrollToTopButton :offset="offset" @click="scrollToTop"/>
+            <ScrollToTopButton :offset="offset" @click="scrollToTop" />
         </section>
     </ToolsProvider>
 </template>
diff --git a/client/src/store/toolStore.js b/client/src/store/toolStore.js
index 64da6e78088..3088b486279 100644
--- a/client/src/store/toolStore.js
+++ b/client/src/store/toolStore.js
@@ -26,7 +26,7 @@ const getters = {
             if (Object.keys(filterSettings).length == 0) {
                 return [];
             }
-            const allTools = state.toolsList[0];
+            const allTools = state.toolsList;
             const returnedTools = [];
 
             for (const tool in allTools) {
@@ -60,7 +60,7 @@ const actions = {
     fetchAllTools: async ({ state, commit }) => {
         // Preventing store from being populated for every search: we fetch again only if:
         // store isn't already populated (initial fetch)
-        if (!state.toolsList[0]) {
+        if (state.toolsList.length === 0) {
             console.log("fetching all tools once");
             const { data } = await axios.get(`${getAppRoot()}api/tools?in_panel=False`);
             commit("saveTools", { toolsData: data });
@@ -73,7 +73,7 @@ const mutations = {
         Vue.set(state.toolById, toolId, toolData);
     },
     saveTools: (state, { toolsData }) => {
-        Vue.set(state.toolsList, 0, toolsData);
+        state.toolsList = toolsData;
     },
 };