From 30ccce9a9821c9b133bdaba296ffd44a4e0dd0b4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 19 Apr 2024 17:01:47 -0500
Subject: [PATCH 1/9] add multiple (optional) filters to client tool search

This allows users to filter on tool ids or sections if they specify `id:tool_id` or `section:Section name`. Fixes https://github.com/galaxyproject/galaxy/issues/17741
---
 client/src/components/Panels/utilities.ts | 46 +++++++++++++++++------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index a22b60fa1a02..95da1acbbf69 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -12,7 +12,10 @@ import {
 } from "@/stores/toolStore";
 import levenshteinDistance from "@/utils/levenshtein";
 
-const TOOL_ID_KEYS = ["id", "tool_id"];
+const FILTER_KEYS = {
+    id: ["id", "tool_id"],
+    panel_section_name: ["section", "panel_section_name"],
+};
 const STRING_REPLACEMENTS: string[] = [" ", "-", "\\(", "\\)", "'", ":", `"`];
 const MINIMUM_DL_LENGTH = 5; // for Demerau-Levenshtein distance
 const MINIMUM_WORD_MATCH = 2; // for word match
@@ -46,6 +49,7 @@ export interface ToolSearchKeys {
 
 interface SearchMatch {
     id: string;
+    /** The order of the match, higher number = higher rank in results */
     order: number;
 }
 
@@ -264,11 +268,12 @@ export function searchToolsByKeys(
 } {
     const matchedTools: SearchMatch[] = [];
     let closestTerm = null;
-    // if user's query = "id:1234" or "tool_id:1234", only search for id
-    const id = processForId(query, TOOL_ID_KEYS);
-    if (id) {
-        query = id;
-        keys = { id: 1 };
+
+    // check if query is of the form "property:value" and then ONLY filter on that property
+    const { filteredQuery, filteredKeys } = filterOnKeys(query, FILTER_KEYS);
+    if (filteredQuery) {
+        query = filteredQuery;
+        keys = filteredKeys;
     }
 
     const queryWords = query.trim().toLowerCase().split(" ");
@@ -338,7 +343,7 @@ export function searchToolsByKeys(
         }
     }
     // no results with string.match(): recursive call with usesDL
-    if (!id && !usesDL && matchedTools.length == 0) {
+    if (!filteredQuery && !usesDL && matchedTools.length == 0) {
         return searchToolsByKeys(tools, keys, query, panelView, currentPanel, true);
     }
     const { idResults, resultPanel } = createSortedResultObject(matchedTools, currentPanel);
@@ -491,15 +496,32 @@ function sanitizeString(value: string, targets: string[] = [], substitute = "")
 }
 
 /**
- * If the query is of the form "id:1234" (or "tool_id:1234"), return the id.
+ * If the query is of the form "property:value", return the value and keys which
+ * ONLY filter on that property.
+ * Otherwise, return null/empty object.
+ * @param query - the raw query
+ * @param keys - keys to filter for
+ */
+function filterOnKeys(query: string, keys: Record<string, string[]>) {
+    for (const key in keys) {
+        const filteredQuery = processForProperty(query, keys[key] || []);
+        if (filteredQuery) {
+            return { filteredQuery, filteredKeys: { [key]: 1 } };
+        }
+    }
+    return { filteredQuery: null, filteredKeys: {} };
+}
+
+/**
+ * If the query is of the form "property:value", return the value.
  * Otherwise, return null.
  * @param query - the raw query
- * @param keys - Optional: keys to check for (default: ["id"])
- * @returns id or null
+ * @param keys - keys to check for
+ * @returns value or null
  */
-function processForId(query: string, keys = ["id"]) {
+function processForProperty(query: string, keys: string[]) {
     for (const key of keys) {
-        if (query.includes(`${key}:`)) {
+        if (query.trim().startsWith(`${key}:`)) {
             return query.split(`${key}:`)[1]?.trim();
         }
     }

From 73bb46c610ef9873b7bf209264169e7912ae5ecb Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Apr 2024 10:18:00 -0500
Subject: [PATCH 2/9] add jest for `section:...` filter in client tool search

---
 client/src/components/Panels/utilities.test.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/src/components/Panels/utilities.test.js b/client/src/components/Panels/utilities.test.js
index d743e64c4d98..3d8e1b77e24b 100644
--- a/client/src/components/Panels/utilities.test.js
+++ b/client/src/components/Panels/utilities.test.js
@@ -147,6 +147,14 @@ describe("test helpers in tool searching utilities", () => {
                 tools: Object.values(tempToolsList.tools),
                 panel: tempToolPanel.default,
             },
+            {
+                // section is searchable if provided "section:"
+                q: "section:Lift-Over",
+                expectedResults: ["liftOver1"],
+                keys: { description: 1, name: 2 },
+                tools: toolsList,
+                panel: toolsListInPanel,
+            },
             // if at least couple words match, return results
             {
                 q: "filter datasets",

From 4de84c8597c57a4b867c9ebd0e7a93f419562aa5 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 26 Apr 2024 22:01:18 -0500
Subject: [PATCH 3/9] refactor `ToolPanelLabel` to typescript & composition

---
 .../Panels/Common/ToolPanelLabel.vue          | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 13dc23970c47..832713bdcaf0 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -1,29 +1,24 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import type { ToolSectionLabel } from "@/stores/toolStore";
+
+import ToolPanelLinks from "./ToolPanelLinks.vue";
+
+const props = defineProps<{
+    definition: ToolSectionLabel;
+}>();
+
+const description = computed(() => props.definition.description || undefined);
+</script>
+
 <template>
     <div v-b-tooltip.topright.hover.noninteractive class="tool-panel-label" tabindex="0" :title="description">
         {{ definition.text }}
-        <ToolPanelLinks :links="definition.links" />
+        <ToolPanelLinks :links="definition.links || undefined" />
     </div>
 </template>
 
-<script>
-import ToolPanelLinks from "./ToolPanelLinks";
-
-export default {
-    components: { ToolPanelLinks },
-    props: {
-        definition: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        description() {
-            return this.definition.description;
-        },
-    },
-};
-</script>
-
 <style scoped lang="scss">
 .tool-panel-label {
     &:deep(.tool-panel-links) {

From c73bacd350db0f8a03ba31bedc8dd67b4b34fc89 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 26 Apr 2024 22:06:16 -0500
Subject: [PATCH 4/9] add button that filters for a tool section in the panel

---
 .../components/Panels/Common/ToolSection.vue  | 124 +++++++++---------
 client/src/components/Panels/ToolBox.vue      |  26 ++--
 client/src/stores/toolStore.ts                |   1 +
 3 files changed, 82 insertions(+), 69 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 0747cc71da3f..8adf5f7be97e 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,73 +1,63 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useConfig } from "@/composables/config";
-import { type ToolSectionLabel, useToolStore } from "@/stores/toolStore";
+import { type Tool as ToolType, type ToolSection, type ToolSectionLabel, useToolStore } from "@/stores/toolStore";
 import ariaAlert from "@/utils/ariaAlert";
 
 import Tool from "./Tool.vue";
 import ToolPanelLabel from "./ToolPanelLabel.vue";
 import ToolPanelLinks from "./ToolPanelLinks.vue";
 
+library.add(faFilter);
+
 const emit = defineEmits<{
     (e: "onClick", tool: any, evt: Event): void;
+    (e: "onFilter", filter: string): void;
     (e: "onOperation", tool: any, evt: Event): void;
 }>();
 
 const eventBus = useEventBus<string>("open-tool-section");
 
-const props = defineProps({
-    category: {
-        type: Object,
-        required: true,
-    },
-    queryFilter: {
-        type: String,
-        default: "",
-    },
-    disableFilter: {
-        type: Boolean,
-    },
-    hideName: {
-        type: Boolean,
-    },
-    operationTitle: {
-        type: String,
-        default: "",
-    },
-    operationIcon: {
-        type: String,
-        default: "",
-    },
-    toolKey: {
-        type: String,
-        default: "",
-    },
-    sectionName: {
-        type: String,
-        default: "default",
-    },
-    expanded: {
-        type: Boolean,
-        default: false,
-    },
-    sortItems: {
-        type: Boolean,
-        default: true,
-    },
+interface Props {
+    category: ToolSection | ToolType | ToolSectionLabel;
+    queryFilter?: string;
+    disableFilter?: boolean;
+    hideName?: boolean;
+    operationTitle?: string;
+    operationIcon?: string;
+    toolKey?: string;
+    sectionName?: string;
+    expanded?: boolean;
+    sortItems?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    queryFilter: "",
+    disableFilter: false,
+    hideName: false,
+    operationTitle: "",
+    operationIcon: "",
+    toolKey: "",
+    sectionName: "default",
+    expanded: false,
+    sortItems: true,
 });
 
 const { config, isConfigLoaded } = useConfig();
 const toolStore = useToolStore();
 
 const elems = computed(() => {
-    if (props.category.elems !== undefined && props.category.elems.length > 0) {
-        return props.category.elems;
+    if (toolSection.value.elems !== undefined && toolSection.value.elems.length > 0) {
+        return toolSection.value.elems;
     }
-    if (props.category.tools !== undefined && props.category.tools.length > 0) {
-        return props.category.tools.map((toolId: string) => {
-            const tool = toolStore.getToolForId(toolId);
+    if (toolSection.value.tools !== undefined && toolSection.value.tools.length > 0) {
+        return toolSection.value.tools.map((toolId) => {
+            const tool = toolStore.getToolForId(toolId as string);
             if (!tool && typeof toolId !== "string") {
                 return toolId as ToolSectionLabel;
             } else {
@@ -78,11 +68,14 @@ const elems = computed(() => {
     return [];
 });
 
-const name = computed(() => props.category.title || props.category.name);
-const isSection = computed(() => props.category.tools !== undefined || props.category.elems !== undefined);
+const toolSection = computed(() => props.category as ToolSection);
+const toolSectionLabel = computed(() => props.category as ToolSectionLabel);
+
+const name = computed(() => toolSection.value.title || toolSection.value.name);
+const isSection = computed(() => toolSection.value.tools !== undefined || toolSection.value.elems !== undefined);
 const hasElements = computed(() => elems.value.length > 0);
-const title = computed(() => props.category.description);
-const links = computed(() => props.category.links || {});
+const title = computed(() => props.category.description || undefined);
+const links = computed(() => toolSection.value.links || {});
 
 const opened = ref(props.expanded || checkFilter());
 
@@ -96,12 +89,12 @@ const sortedElements = computed(() => {
         isConfigLoaded.value &&
         config.value.toolbox_auto_sort === true &&
         props.sortItems === true &&
-        !elems.value.some((el: ToolSectionLabel) => el.text !== undefined && el.text !== "")
+        !elems.value.some((el) => (el as ToolSectionLabel).text !== undefined && (el as ToolSectionLabel).text !== "")
     ) {
         const elements = [...elems.value];
         const sorted = elements.sort((a, b) => {
-            const aNameLower = a.name.toLowerCase();
-            const bNameLower = b.name.toLowerCase();
+            const aNameLower = (a as ToolSection).name.toLowerCase();
+            const bNameLower = (b as ToolSection).name.toLowerCase();
             if (aNameLower > bNameLower) {
                 return 1;
             } else if (aNameLower < bNameLower) {
@@ -166,18 +159,31 @@ function toggleMenu(nextState = !opened.value) {
             v-b-tooltip.topright.hover.noninteractive
             :class="['toolSectionTitle', `tool-menu-section-${sectionName}`]"
             :title="title">
-            <a class="title-link" href="javascript:void(0)" @click="toggleMenu()">
-                <span class="name">
-                    {{ name }}
-                </span>
-                <ToolPanelLinks :links="links" />
+            <a
+                class="title-link d-flex justify-content-between align-items-center"
+                href="javascript:void(0)"
+                @click="toggleMenu()">
+                <div>
+                    <span class="name">
+                        {{ name }}
+                    </span>
+                    <ToolPanelLinks :links="links" />
+                </div>
+                <button
+                    v-if="isSection && toolStore.currentPanelView === 'default'"
+                    v-b-tooltip.hover.noninteractive.right
+                    title="Filter by this section"
+                    class="inline-icon-button"
+                    @click.stop="emit('onFilter', `section:${toolSection.name}`)">
+                    <FontAwesomeIcon :icon="faFilter" />
+                </button>
             </a>
         </div>
         <transition name="slide">
             <div v-if="opened" data-description="opened tool panel section">
                 <template v-for="[key, el] in sortedElements">
                     <ToolPanelLabel
-                        v-if="category.text || el.model_class === 'ToolSectionLabel'"
+                        v-if="toolSectionLabel.text || el.model_class === 'ToolSectionLabel'"
                         :key="key"
                         :definition="el" />
                     <Tool
@@ -196,7 +202,7 @@ function toggleMenu(nextState = !opened.value) {
         </transition>
     </div>
     <div v-else>
-        <ToolPanelLabel v-if="category.text" :definition="category" />
+        <ToolPanelLabel v-if="toolSectionLabel.text" :definition="toolSectionLabel" />
         <Tool
             v-else
             :tool="category"
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index dbbdd87d40f1..f69c0a30a6f5 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -50,8 +50,6 @@ const queryPending = ref(false);
 const showSections = ref(props.workflow);
 const results: Ref<string[]> = ref([]);
 const resultPanel: Ref<Record<string, Tool | ToolSectionType> | null> = ref(null);
-const buttonText = ref("");
-const buttonIcon = ref("");
 const closestTerm: Ref<string | null> = ref(null);
 
 const toolStore = useToolStore();
@@ -172,6 +170,9 @@ const workflowSection = computed(() => {
     }
 });
 
+const buttonIcon = computed(() => (showSections.value ? faEyeSlash : faEye));
+const buttonText = computed(() => (showSections.value ? localize("Hide Sections") : localize("Show Sections")));
+
 function onInsertModule(module: Record<string, any>, event: Event) {
     event.preventDefault();
     emit("onInsertModule", module.name, module.title);
@@ -220,18 +221,22 @@ function onResults(
     }
     closestTerm.value = closestMatch;
     queryFilter.value = hasResults.value ? query.value : null;
-    setButtonText();
     queryPending.value = false;
 }
 
-function onToggle() {
-    showSections.value = !showSections.value;
-    setButtonText();
+function onSectionFilter(filter: string) {
+    if (query.value !== filter) {
+        query.value = filter;
+        if (!showSections.value) {
+            onToggle();
+        }
+    } else {
+        query.value = "";
+    }
 }
 
-function setButtonText() {
-    buttonText.value = showSections.value ? localize("Hide Sections") : localize("Show Sections");
-    buttonIcon.value = showSections.value ? "fa-eye-slash" : "fa-eye";
+function onToggle() {
+    showSections.value = !showSections.value;
 }
 </script>
 
@@ -299,7 +304,8 @@ function setButtonText() {
                             v-if="panel"
                             :category="panel || {}"
                             :query-filter="queryFilter || undefined"
-                            @onClick="onToolClick" />
+                            @onClick="onToolClick"
+                            @onFilter="onSectionFilter" />
                     </div>
                 </div>
                 <ToolSection
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index 9d29b5ce7b00..c653a0bdac64 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -37,6 +37,7 @@ export interface ToolSection {
     model_class: string;
     id: string;
     name: string;
+    title?: string;
     version?: string;
     description?: string;
     links?: Record<string, string>;

From cd121b5c2b3d412cc85cf66ca9731e52fe044942 Mon Sep 17 00:00:00 2001
From: Martin Cech <marten@bx.psu.edu>
Date: Wed, 1 May 2024 10:08:19 -0700
Subject: [PATCH 5/9] tweak button title and style

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

diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 8adf5f7be97e..28073eccd739 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -171,8 +171,8 @@ function toggleMenu(nextState = !opened.value) {
                 </div>
                 <button
                     v-if="isSection && toolStore.currentPanelView === 'default'"
-                    v-b-tooltip.hover.noninteractive.right
-                    title="Filter by this section"
+                    v-b-tooltip.hover.noninteractive.bottom
+                    title="Show full section"
                     class="inline-icon-button"
                     @click.stop="emit('onFilter', `section:${toolSection.name}`)">
                     <FontAwesomeIcon :icon="faFilter" />
@@ -217,6 +217,10 @@ function toggleMenu(nextState = !opened.value) {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
+.inline-icon-button {
+    font-size: 75%;
+    padding: 0em 0.5em;
+}
 .tool-panel-label {
     background: darken($panel-bg-color, 5%);
     border-left: 0.25rem solid darken($panel-bg-color, 25%);

From b2f963e98f482507c1fc722d1fd1ac32a8291f5e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 2 May 2024 15:49:43 -0500
Subject: [PATCH 6/9] add `hasFilterButton` prop to only show button when there
 is a filter

---
 client/src/components/Panels/Common/ToolSection.vue | 4 +++-
 client/src/components/Panels/ToolBox.vue            | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 28073eccd739..c25cadef2ec4 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -34,6 +34,7 @@ interface Props {
     sectionName?: string;
     expanded?: boolean;
     sortItems?: boolean;
+    hasFilterButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -46,6 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
     sectionName: "default",
     expanded: false,
     sortItems: true,
+    hasFilterButton: false,
 });
 
 const { config, isConfigLoaded } = useConfig();
@@ -170,7 +172,7 @@ function toggleMenu(nextState = !opened.value) {
                     <ToolPanelLinks :links="links" />
                 </div>
                 <button
-                    v-if="isSection && toolStore.currentPanelView === 'default'"
+                    v-if="isSection && props.hasFilterButton"
                     v-b-tooltip.hover.noninteractive.bottom
                     title="Show full section"
                     class="inline-icon-button"
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index f69c0a30a6f5..7b0439cf8784 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -72,7 +72,7 @@ const query = computed({
     },
 });
 
-const { currentPanel } = storeToRefs(toolStore);
+const { currentPanel, currentPanelView } = storeToRefs(toolStore);
 const hasResults = computed(() => results.value.length > 0);
 const queryTooShort = computed(() => query.value && query.value.length < 3);
 const queryFinished = computed(() => query.value && queryPending.value != true);
@@ -304,6 +304,7 @@ function onToggle() {
                             v-if="panel"
                             :category="panel || {}"
                             :query-filter="queryFilter || undefined"
+                            :has-filter-button="!!query && currentPanelView === 'default'"
                             @onClick="onToolClick"
                             @onFilter="onSectionFilter" />
                     </div>

From 23fe064db1a56f0dade454d9330907d71158e8d5 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 2 May 2024 15:51:37 -0500
Subject: [PATCH 7/9] trim query to prevent redundant search on empty query

---
 client/src/components/Panels/Common/ToolSearch.vue | 2 +-
 client/src/components/Panels/ToolBox.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 31592c803dc9..f38b48c6a09e 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -154,7 +154,7 @@ watch(
 
 function checkQuery(q: string) {
     emit("onQuery", q);
-    if (q && q.length >= MIN_QUERY_LENGTH) {
+    if (q.trim() && q.trim().length >= MIN_QUERY_LENGTH) {
         if (FAVORITES.includes(q)) {
             post({ type: "favoriteTools" });
         } else {
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 7b0439cf8784..d87402f24207 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -64,7 +64,7 @@ const propShowAdvanced = computed({
 });
 const query = computed({
     get: () => {
-        return props.panelQuery;
+        return props.panelQuery.trim();
     },
     set: (q: string) => {
         queryPending.value = true;

From b9b9f83c77b124e0878d624361c1d1286cf38525 Mon Sep 17 00:00:00 2001
From: Martin Cech <marten@bx.psu.edu>
Date: Thu, 2 May 2024 19:50:25 -0700
Subject: [PATCH 8/9] prevent showing the section filter button for short
 queries

also prevent the search bar from yelling at me and downgrade
"danger" to info and warning
---
 client/src/components/History/HistoryScrollList.vue | 4 ++--
 client/src/components/Panels/ToolBox.vue            | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index 320fd832d703..e2b4a14dfd94 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -220,8 +220,8 @@ async function loadMore(noScroll = false) {
 <template>
     <div :class="isMultiviewPanel ? 'unified-panel' : 'flex-column-overflow'">
         <div class="unified-panel-controls">
-            <BBadge v-if="props.filter && !validFilter" class="alert-danger w-100 mb-2">
-                Search string too short!
+            <BBadge v-if="props.filter && !validFilter" class="alert-warning w-100 mb-2">
+                Search term is too short
             </BBadge>
             <BAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</BAlert>
         </div>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index d87402f24207..5b6d5012cbfc 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -262,10 +262,10 @@ function onToggle() {
                     </b-button>
                 </div>
                 <div v-else-if="queryTooShort" class="pb-2">
-                    <b-badge class="alert-danger w-100">Search string too short!</b-badge>
+                    <b-badge class="alert-info w-100">Search term is too short</b-badge>
                 </div>
                 <div v-else-if="queryFinished && !hasResults" class="pb-2">
-                    <b-badge class="alert-danger w-100">No results found!</b-badge>
+                    <b-badge class="alert-warning w-100">No results found</b-badge>
                 </div>
                 <div v-if="closestTerm" class="pb-2">
                     <b-badge class="alert-danger w-100">
@@ -304,7 +304,7 @@ function onToggle() {
                             v-if="panel"
                             :category="panel || {}"
                             :query-filter="queryFilter || undefined"
-                            :has-filter-button="!!query && currentPanelView === 'default'"
+                            :has-filter-button="!!query && !queryTooShort && currentPanelView === 'default'"
                             @onClick="onToolClick"
                             @onFilter="onSectionFilter" />
                     </div>

From b048f15572795fd20fefa37b6e08c6c0818d9c23 Mon Sep 17 00:00:00 2001
From: Martin Cech <marten@bx.psu.edu>
Date: Thu, 2 May 2024 19:59:24 -0700
Subject: [PATCH 9/9] simplify the expression

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

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 5b6d5012cbfc..61e202bce985 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -304,7 +304,7 @@ function onToggle() {
                             v-if="panel"
                             :category="panel || {}"
                             :query-filter="queryFilter || undefined"
-                            :has-filter-button="!!query && !queryTooShort && currentPanelView === 'default'"
+                            :has-filter-button="hasResults && currentPanelView === 'default'"
                             @onClick="onToolClick"
                             @onFilter="onSectionFilter" />
                     </div>