apply filter on click instead of routing with filter

Author: ahmedhamidawan

client/src/components/ToolsList/ToolsList.vue

@@ -63,7 +63,13 @@ const validFilters = computed<Record<string, ValidFilter<string>>>(() => {
         help: { placeholder: "help text", type: String, handler: contains("help"), menuItem: true },
     };
 });
-const ToolFilters = computed<Filtering<string>>(() => new Filtering(validFilters.value, undefined, true, false));
+// TODO: We need to use double quotes as opposed to the default single quotes in the Filtering class
+// (will need to implement this in the Filtering class). We need this because the whoosh query
+// requires double quotes for phrases.
+// See: https://whoosh.readthedocs.io/en/latest/querylang.html#query
+// For now, I've changed the `quoteStrings` param to `false` to avoid issues with the quotes, and added
+// a "hint" to the `FilterMenu` help text.
+const ToolFilters = computed<Filtering<string>>(() => new Filtering(validFilters.value, undefined, false, false));
 
 // Scroll Variables
 const scrollContainer = ref<HTMLElement | null>(null);
@@ -98,6 +104,10 @@ watch(
     },
     { deep: true, immediate: true }
 );
+
+function applyFilter(filter: string, value: string) {
+    filterText.value = ToolFilters.value.setFilterValue(filterText.value, filter, value);
+}
 </script>
 
 <template>
@@ -127,12 +137,23 @@ watch(
                             the results showing up in the center panel.
                         </p>
 
-                        <p>
-                            <i>
-                                (Clicking on the Section, Repo or Owner labels in the Search Results will activate the
-                                according filter)
-                            </i>
-                        </p>
+                        <div>
+                            Hints:
+                            <ul>
+                                <li>
+                                    <i>
+                                        Clicking on the Section, Repo or Owner labels in the Search Results will
+                                        activate the according filter.
+                                    </i>
+                                </li>
+                                <li>
+                                    <i>
+                                        To find exact matches, you need to use double quotes (e.g.:
+                                        <code>"Get Data"</code>) around the search term.
+                                    </i>
+                                </li>
+                            </ul>
+                        </div>
 
                         <p>The available tool search filters are:</p>
                         <dl>
@@ -173,7 +194,7 @@ watch(
                 No tools found for the entered filters.
             </BAlert>
             <div v-else>
-                <ToolsListTable :tools="itemsLoaded" />
+                <ToolsListTable :tools="itemsLoaded" @apply-filter="applyFilter" />
             </div>
         </div>
         <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />

client/src/components/ToolsList/ToolsListItem.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import {
     faAngleDown,
     faAngleUp,
@@ -8,18 +8,20 @@ import {
     faWrench,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import ToolFavoriteButton from "components/Tool/Buttons/ToolFavoriteButton";
-import { useFormattedToolHelp } from "composables/formattedToolHelp";
 import { computed, ref } from "vue";
 
+import { useFormattedToolHelp } from "@/composables/formattedToolHelp";
+
 import GButton from "../BaseComponents/GButton.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
+import ToolFavoriteButton from "@/components/Tool/Buttons/ToolFavoriteButton.vue";
 
+// TODO: Refactor props to use defineProps with types (best practices)
 const props = defineProps({
     id: { type: String, required: true },
     name: { type: String, required: true },
     section: { type: String, required: true },
-    ontologies: { type: Array, default: null },
+    ontologies: { type: Array<string>, default: null },
     description: { type: String, default: null },
     summary: { type: String, default: null },
     help: { type: String, default: null },
@@ -30,7 +32,11 @@ const props = defineProps({
     owner: { type: String, default: null },
 });
 
-const emit = defineEmits(["open"]);
+// TODO: For tool open emit, consider adding event as param to allow for opening tool in new tab
+const emit = defineEmits<{
+    (e: "open"): void;
+    (e: "apply-filter", filter: string, value: string): void;
+}>();
 
 const showHelp = ref(false);
 
@@ -42,6 +48,10 @@ const formattedToolHelp = computed(() => {
         return "";
     }
 });
+
+/** We add double quotes to the section filter since the backend Whoosh search
+ * requires it for exact matches, and the `Filtering` class only does single quotes. */
+const quotedSection = computed(() => (props.section ? `"${props.section}"` : ""));
 </script>
 
 <template>
@@ -86,7 +96,8 @@ const formattedToolHelp = computed(() => {
         <div class="tool-list-item-content">
             <div class="d-flex flex-gapx-1 py-2">
                 <span v-if="props.section" class="tag info">
-                    <b>Section:</b> <GLink thin :to="`/tools/list?section=${props.section}`">{{ section }}</GLink>
+                    <b>Section:</b>
+                    <GLink thin @click="() => emit('apply-filter', 'section', quotedSection)">{{ section }}</GLink>
                 </span>
 
                 <span v-if="!props.local" class="tag info">
@@ -101,12 +112,13 @@ const formattedToolHelp = computed(() => {
 
                 <span v-if="props.owner" class="tag success">
                     <FontAwesomeIcon :icon="faUser" />
-                    <b>Owner:</b> <GLink thin :to="`/tools/list?owner=${props.owner}`">{{ props.owner }}</GLink>
+                    <b>Owner:</b>
+                    <GLink thin @click="() => emit('apply-filter', 'owner', props.owner)">{{ props.owner }}</GLink>
                 </span>
 
                 <span v-if="props.ontologies && props.ontologies.length > 0">
                     <span v-for="ontology in props.ontologies" :key="ontology" class="tag toggle">
-                        <GLink thin :to="`/tools/list?ontology=${ontology}`">{{ ontology }}</GLink>
+                        <GLink thin @click="() => emit('apply-filter', 'ontology', ontology)">{{ ontology }}</GLink>
                     </span>
                 </span>
             </div>

client/src/components/ToolsList/ToolsListTable.vue

@@ -19,7 +19,8 @@
             :owner="item.tool_shed_repository && item.tool_shed_repository.owner"
             :workflow-compatible="item.is_workflow_compatible"
             :version="item.version"
-            @open="() => onOpen(item)" />
+            @open="() => onOpen(item)"
+            @apply-filter="(filter, value) => $emit('apply-filter', filter, value)" />
         <div>
             <div v-if="allLoaded" class="list-end my-2">- End of search results -</div>
             <b-overlay :show="busy" opacity="0.5" />