Merge pull request #15926 from ahmedhamidawan/emit_related_filter_without_panel

Emit filterText to HistoryPanel from historyStore

client/src/components/Dataset/DatasetList.vue

@@ -115,7 +115,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapActions(useHistoryStore, ["loadHistories", "setCurrentHistory"]),
+        ...mapActions(useHistoryStore, ["loadHistories", "applyFilterText"]),
         load(concat = false) {
             this.loading = true;
             getDatasets({
@@ -153,7 +153,7 @@ export default {
         async onShowDataset(item) {
             const historyId = item.history_id;
             try {
-                await this.setCurrentHistory(historyId);
+                await this.applyFilterText(historyId, `hid:${item.hid}`);
             } catch (error) {
                 this.onError(error);
             }

client/src/components/Dataset/DatasetName.vue

@@ -22,7 +22,7 @@
         <div class="dropdown-menu" aria-labelledby="dataset-dropdown">
             <a class="dropdown-item" href="#" @click.prevent="showDataset">
                 <span class="fa fa-eye fa-fw mr-1" />
-                <span>Switch to History containing dataset</span>
+                <span>Show in History containing dataset</span>
             </a>
             <a class="dropdown-item" href="#" @click.prevent="copyDataset">
                 <span class="fa fa-copy fa-fw mr-1" />

client/src/components/History/Content/ContentItem.vue

@@ -92,7 +92,7 @@
                 v-if="expandDataset"
                 :dataset="item"
                 :writable="writable"
-                :show-highlight="isHistoryItem && filterable"
+                :show-highlight="(isHistoryItem && filterable) || addHighlightBtn"
                 :item-urls="itemUrls"
                 @edit="onEdit"
                 @toggleHighlights="toggleHighlights" />
@@ -125,6 +125,7 @@ export default {
     props: {
         writable: { type: Boolean, default: true },
         expandDataset: { type: Boolean, required: true },
+        addHighlightBtn: { type: Boolean, default: false },
         highlight: { type: String, default: null },
         id: { type: Number, required: true },
         isDataset: { type: Boolean, default: true },

client/src/components/History/Content/Dataset/DatasetActions.vue

@@ -55,7 +55,7 @@
                 <b-button
                     v-if="showHighlight"
                     class="highlight-btn px-1"
-                    title="Show Inputs for this item"
+                    title="Show Related Items"
                     size="sm"
                     variant="link"
                     @click.stop="onHighlight">

client/src/components/History/Content/GenericItem.vue

@@ -4,6 +4,7 @@
         <div v-else>
             <ContentItem
                 :id="item.hid"
+                add-highlight-btn
                 is-history-item
                 :item="item"
                 :name="item.name"
@@ -12,6 +13,7 @@
                 @update:expand-dataset="expandDataset = $event"
                 @view-collection="viewCollection = !viewCollection"
                 @delete="onDelete(item)"
+                @toggleHighlights="onHighlight(item)"
                 @undelete="onUndelete(item)"
                 @unhide="onUnhide(item)" />
             <div v-if="viewCollection">
@@ -27,6 +29,8 @@ import { DatasetCollectionProvider, DatasetProvider } from "components/providers
 import { deleteContent, updateContentFields } from "components/History/model/queries";
 import ContentItem from "./ContentItem";
 import GenericElement from "./GenericElement";
+import { mapActions } from "pinia";
+import { useHistoryStore } from "@/stores/historyStore";
 
 export default {
     components: {
@@ -58,6 +62,7 @@ export default {
         },
     },
     methods: {
+        ...mapActions(useHistoryStore, ["applyFilterText"]),
         onDelete(item) {
             deleteContent(item);
         },
@@ -70,6 +75,11 @@ export default {
         onUnhide(item) {
             updateContentFields(item, { visible: true });
         },
+        onHighlight(item) {
+            const { history_id } = item;
+            const filterText = `related:${item.hid}`;
+            this.applyFilterText(history_id, filterText);
+        },
     },
 };
 </script>

client/src/components/History/CurrentHistory/HistoryPanel.vue

@@ -248,6 +248,11 @@ export default {
             const { getWatchingVisibility } = storeToRefs(useHistoryItemsStore());
             return getWatchingVisibility.value;
         },
+        /** @returns {String} */
+        storeFilterText() {
+            const { currentFilterText } = storeToRefs(useHistoryStore());
+            return currentFilterText.value;
+        },
     },
     watch: {
         queryKey() {
@@ -263,6 +268,16 @@ export default {
         filter(newVal) {
             this.filterText = newVal;
         },
+        filterText(newVal) {
+            if (this.filterable) {
+                this.setCurrentFilterText(newVal);
+            }
+        },
+        storeFilterText(newVal) {
+            if (this.filterable) {
+                this.filterText = newVal;
+            }
+        },
         offset() {
             this.loadHistoryItems();
         },
@@ -274,7 +289,7 @@ export default {
         await this.loadHistoryItems();
     },
     methods: {
-        ...mapActions(useHistoryStore, ["loadHistoryById"]),
+        ...mapActions(useHistoryStore, ["loadHistoryById", "setCurrentFilterText"]),
         ...mapActions(useHistoryItemsStore, ["fetchHistoryItems"]),
         getHighlight(item) {
             if (this.filterText.includes("related:" + item.hid)) {

client/src/stores/historyStore.ts

@@ -24,6 +24,7 @@ export const useHistoryStore = defineStore(
         const historiesLoading = ref(false);
         const pinnedHistories = ref<{ id: string }[]>([]);
         const storedCurrentHistoryId = ref<string | null>(null);
+        const storedCurrentFilterText = ref<string | null>(null);
         const storedHistories = ref<{ [key: string]: HistorySummary }>({});
 
         const histories = computed(() => {
@@ -49,6 +50,10 @@ export const useHistoryStore = defineStore(
             }
         });
 
+        const currentFilterText = computed(() => {
+            return storedCurrentFilterText.value;
+        });
+
         const getHistoryById = computed(() => {
             return (historyId: string) => {
                 return storedHistories.value[historyId] ?? null;
@@ -75,6 +80,10 @@ export const useHistoryStore = defineStore(
             storedCurrentHistoryId.value = historyId;
         }
 
+        function setCurrentFilterText(filterText: string) {
+            storedCurrentFilterText.value = filterText;
+        }
+
         function setHistory(history: HistorySummary) {
             Vue.set(storedHistories.value, history.id, history);
         }
@@ -119,6 +128,13 @@ export const useHistoryStore = defineStore(
             setCurrentHistoryId(history.id);
         }
 
+        function applyFilterText(history_id: string, filterText: string) {
+            setCurrentFilterText(filterText);
+            if (currentHistoryId.value !== history_id) {
+                return setCurrentHistory(history_id);
+            }
+        }
+
         async function copyHistory(history: HistorySummary, name: string, copyAll: boolean) {
             const newHistory = (await cloneHistory(history, name, copyAll)) as HistorySummary;
             return setCurrentHistory(newHistory.id);
@@ -182,16 +198,19 @@ export const useHistoryStore = defineStore(
             histories,
             currentHistory,
             currentHistoryId,
+            currentFilterText,
             pinnedHistories,
             getHistoryById,
             getHistoryNameById,
             setCurrentHistory,
             setCurrentHistoryId,
+            setCurrentFilterText,
             setHistory,
             setHistories,
             pinHistory,
             unpinHistory,
             selectHistory,
+            applyFilterText,
             copyHistory,
             createNewHistory,
             deleteHistory,