Use Filtering class to get and set filter texts

client/package.json

@@ -143,6 +143,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@types/d3": "^7.4.0",
     "@types/jquery": "^3.5.16",
+    "@types/lodash": "^4.14.194",
     "@types/markdown-it": "^12.2.3",
     "@types/underscore": "^1.11.4",
     "@typescript-eslint/eslint-plugin": "^5.51.0",

client/src/components/Dataset/DatasetList.vue

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

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

@@ -62,7 +62,7 @@ export default {
         },
     },
     methods: {
-        ...mapActions(useHistoryStore, ["applyFilterText"]),
+        ...mapActions(useHistoryStore, ["applyFilters"]),
         onDelete(item) {
             deleteContent(item);
         },
@@ -75,10 +75,18 @@ export default {
         onUnhide(item) {
             updateContentFields(item, { visible: true });
         },
-        onHighlight(item) {
+        async onHighlight(item) {
             const { history_id } = item;
-            const filterText = `related:${item.hid}`;
-            this.applyFilterText(history_id, filterText);
+            const filters = {
+                deleted: item.deleted,
+                visible: item.visible,
+                related: item.hid,
+            };
+            try {
+                await this.applyFilters(history_id, filters);
+            } catch (error) {
+                this.onError(error);
+            }
         },
     },
 };

client/src/components/History/Content/SelectedItems.js

@@ -27,7 +27,7 @@ export default {
             return this.allSelected && this.totalItemsInQuery !== this.items.size;
         },
         currentFilters() {
-            return HistoryFilters.getFilters(this.filterText);
+            return HistoryFilters.getFiltersForText(this.filterText);
         },
     },
     methods: {

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

@@ -6,6 +6,7 @@ import { formatDistanceToNowStrict } from "date-fns";
 import { toRef, ref, computed, onMounted } from "vue";
 import { useDetailedHistory } from "./usesDetailedHistory.js";
 import { useConfig } from "@/composables/config";
+import { HistoryFilters } from "@/components/History/HistoryFilters.js";
 import PreferredStorePopover from "./PreferredStorePopover.vue";
 import SelectPreferredStore from "./SelectPreferredStore.vue";
 
@@ -57,27 +58,27 @@ function onDashboard() {
     router.push("/storage");
 }
 
-function setFilter(newFilterText: string) {
-    emit("update:filter-text", newFilterText);
-}
-
-// TODO: bad merge forward, these are no longer utilized?
-// eslint-disable-next-line no-unused-vars
-function toggleDeleted() {
-    if (props.filterText === "deleted:true") {
-        setFilter("");
+function setFilter(filter: string) {
+    let newFilterText = "";
+    let settings = {};
+    if (filter == "") {
+        settings = {
+            deleted: false,
+            visible: true,
+        };
     } else {
-        setFilter("deleted:true");
+        const newVal = getCurrentFilterVal(filter) === "any" ? HistoryFilters.defaultFilters[filter] : "any";
+        settings = {
+            deleted: filter === "deleted" ? newVal : getCurrentFilterVal("deleted"),
+            visible: filter === "visible" ? newVal : getCurrentFilterVal("visible"),
+        };
     }
+    newFilterText = HistoryFilters.applyFiltersToText(settings, props.filterText);
+    emit("update:filter-text", newFilterText);
 }
 
-// eslint-disable-next-line no-unused-vars
-function toggleHidden() {
-    if (props.filterText === "visible:false") {
-        setFilter("");
-    } else {
-        setFilter("visible:false");
-    }
+function getCurrentFilterVal(filter: string) {
+    return HistoryFilters.getFilterValue(props.filterText, filter);
 }
 
 function updateTime() {
@@ -153,24 +154,24 @@ function onUpdatePreferredObjectStoreId(preferredObjectStoreId: string) {
                 <b-button
                     v-if="numItemsDeleted"
                     v-b-tooltip.hover
-                    title="Show deleted"
+                    title="Include deleted"
                     variant="link"
                     size="sm"
                     class="rounded-0 text-decoration-none"
-                    :pressed="filterText == 'deleted:true'"
-                    @click="setFilter('deleted:true')">
+                    :pressed="getCurrentFilterVal('deleted') !== false"
+                    @click="setFilter('deleted')">
                     <icon icon="trash" />
                     <span>{{ numItemsDeleted }}</span>
                 </b-button>
                 <b-button
                     v-if="numItemsHidden"
                     v-b-tooltip.hover
-                    title="Show hidden"
+                    title="Include hidden"
                     variant="link"
                     size="sm"
                     class="rounded-0 text-decoration-none"
-                    :pressed="filterText == 'visible:false'"
-                    @click="setFilter('visible:false')">
+                    :pressed="getCurrentFilterVal('visible') !== true"
+                    @click="setFilter('visible')">
                     <icon icon="eye-slash" />
                     <span>{{ numItemsHidden }}</span>
                 </b-button>

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

@@ -120,7 +120,7 @@ export default {
     },
     computed: {
         filterSettings() {
-            return HistoryFilters.toAlias(HistoryFilters.getFilters(this.filterText));
+            return HistoryFilters.toAlias(HistoryFilters.getFiltersForText(this.filterText));
         },
         localFilter: {
             get() {

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

@@ -119,7 +119,7 @@
                                     :filterable="filterable"
                                     @tag-click="onTagClick"
                                     @tag-change="onTagChange"
-                                    @toggleHighlights="toggleHighlights"
+                                    @toggleHighlights="updateFilterVal('related', item.hid)"
                                     @update:expand-dataset="setExpanded(item, $event)"
                                     @update:selected="setSelected(item, $event)"
                                     @view-collection="$emit('view-collection', item, currentOffset)"
@@ -153,6 +153,7 @@ import HistoryDetails from "./HistoryDetails";
 import HistoryDropZone from "./HistoryDropZone";
 import HistoryEmpty from "./HistoryEmpty";
 import HistoryFilters from "./HistoryFilters/HistoryFilters";
+import { HistoryFilters as FilterClass } from "components/History/HistoryFilters";
 import HistoryMessages from "./HistoryMessages";
 import HistorySelectionOperations from "./HistoryOperations/SelectionOperations";
 import HistorySelectionStatus from "./HistoryOperations/SelectionStatus";
@@ -192,7 +193,6 @@ export default {
         return {
             error: null,
             filterText: "",
-            highlightsKey: null,
             invisible: {},
             loading: false,
             offset: 0,
@@ -250,8 +250,12 @@ export default {
         },
         /** @returns {String} */
         storeFilterText() {
-            const { currentFilterText } = storeToRefs(useHistoryStore());
-            return currentFilterText.value;
+            const { currentFilterText, currentHistoryId } = storeToRefs(useHistoryStore());
+            if (this.historyId === currentHistoryId.value) {
+                return currentFilterText.value || "";
+            } else {
+                return "";
+            }
         },
     },
     watch: {
@@ -270,7 +274,7 @@ export default {
         },
         filterText(newVal) {
             if (this.filterable) {
-                this.setCurrentFilterText(newVal);
+                this.setFilterText(this.historyId, newVal);
             }
         },
         storeFilterText(newVal) {
@@ -286,23 +290,26 @@ export default {
         },
     },
     async mounted() {
+        // `filterable` here indicates if this is the current history panel
+        if (this.filterable && !this.filter) {
+            this.filterText = this.storeFilterText;
+        }
         await this.loadHistoryItems();
     },
     methods: {
-        ...mapActions(useHistoryStore, ["loadHistoryById", "setCurrentFilterText"]),
+        ...mapActions(useHistoryStore, ["loadHistoryById", "setFilterText"]),
         ...mapActions(useHistoryItemsStore, ["fetchHistoryItems"]),
         getHighlight(item) {
-            if (this.filterText.includes("related:" + item.hid)) {
-                this.highlightsKey = item.hid;
+            const highlightsKey = FilterClass.getFilterValue(this.filterText, "related");
+            if (highlightsKey == item.hid) {
                 return "active";
-            } else if (this.filterText.includes("related:") && this.highlightsKey) {
-                if (item.hid > this.highlightsKey) {
+            } else if (highlightsKey) {
+                if (item.hid > highlightsKey) {
                     return "output";
                 } else {
                     return "input";
                 }
             } else {
-                this.highlightsKey = null;
                 return null;
             }
         },
@@ -354,23 +361,12 @@ export default {
             item.tags = newTags;
         },
         onTagClick(tag) {
-            if (this.filterText == "tag:" + tag) {
-                this.filterText = "";
-            } else {
-                this.filterText = "tag:" + tag;
-            }
+            this.updateFilterVal("tag", tag);
         },
         onOperationError(error) {
             console.debug("HistoryPanel - Operation error.", error);
             this.operationError = error;
         },
-        toggleHighlights(item) {
-            if (this.filterText == "related:" + item.hid) {
-                this.filterText = "";
-            } else {
-                this.filterText = "related:" + item.hid;
-            }
-        },
         onDragEnter(e) {
             this.dragTarget = e.target;
             this.showDropZone = true;
@@ -409,6 +405,9 @@ export default {
         onError(error) {
             Toast.error(error);
         },
+        updateFilterVal(newFilter, newVal) {
+            this.filterText = FilterClass.setFilterValue(this.filterText, newFilter, newVal);
+        },
     },
 };
 </script>

client/src/components/History/HistoryPublishedList.vue

@@ -50,28 +50,14 @@ const localFilter = computed({
     },
 });
 
-const filterSettings = computed(() => filters.toAlias(filters.getFilters(filterText.value)));
-
-const updateFilter = (newVal, append = false) => {
-    let oldValue = filterText.value;
-    if (append) {
-        oldValue += newVal;
-    } else {
-        oldValue = newVal;
-    }
-    filterText.value = oldValue.trim();
+const filterSettings = computed(() => filters.toAlias(filters.getFiltersForText(filterText.value)));
+
+const updateFilter = (newVal) => {
+    filterText.value = newVal.trim();
 };
 
 const onTagClick = (tag) => {
-    if (filterText.value.includes("tag:" + tag.label)) {
-        updateFilter(filterText.value.replace("tag:" + tag.label, ""));
-    } else {
-        if (filterText.value.length === 0) {
-            updateFilter("tag:" + tag.label, true);
-        } else {
-            updateFilter(" tag:" + tag.label, true);
-        }
-    }
+    updateFilter(filters.setFilterValue(filterText.value, "tag", tag.label));
 };
 
 const load = async () => {

client/src/stores/history/historyItemsStore.js

@@ -28,7 +28,7 @@ export const useHistoryItemsStore = defineStore("historyItemsStore", {
         getHistoryItems: (state) => {
             return (historyId, filterText) => {
                 const itemArray = state.items[historyId] || [];
-                const filters = HistoryFilters.getFilters(filterText).filter(
+                const filters = HistoryFilters.getFiltersForText(filterText).filter(
                     (filter) => !filter[0].includes("related")
                 );
                 const relatedHid = HistoryFilters.getFilterValue(filterText, "related");