Merge pull request #16873 from ahmedhamidawan/history_items_filtering…

…_reactivity_bug Convert `historyItemsStore` to ts+composition
galaxyproject · Oct 25, 2023 · 96a3737 · 96a3737
2 parents 018258d + 4439afa
commit 96a3737
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 162 deletions.
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -18,7 +18,7 @@
             :scope-key="queryKey"
             :get-item-key="(item) => item.type_id"
             :filter-text="filterText"
-            :total-items-in-query="totalItemsInQuery"
+            :total-items-in-query="totalMatchesCount"
             @query-selection-break="querySelectionBreak = true">
             <section
                 class="history-layout d-flex flex-column w-100"
@@ -43,7 +43,7 @@
                     <HistoryCounter
                         :history="history"
                         :is-watching="isWatching"
-                        :last-checked="lastChecked"
+                        :last-checked="lastCheckedTime"
                         :show-controls="showControls"
                         :filter-text.sync="filterText"
                         @reloadContents="reloadContents" />
@@ -63,7 +63,7 @@
                                 :content-selection="selectedItems"
                                 :selection-size="selectionSize"
                                 :is-query-selection="isQuerySelection"
-                                :total-items-in-query="totalItemsInQuery"
+                                :total-items-in-query="totalMatchesCount"
                                 :operation-running.sync="operationRunning"
                                 @update:show-selection="setShowSelection"
                                 @operation-error="onOperationError"
@@ -155,7 +155,7 @@ import LoadingSpan from "components/LoadingSpan";
 import { Toast } from "composables/toast";
 import { mapActions, mapState, storeToRefs } from "pinia";
 import { rewatchHistory } from "store/historyStore/model/watchHistory";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 import { getOperatorForAlias } from "utils/filtering";
 import Vue from "vue";
@@ -200,6 +200,11 @@ export default {
         showControls: { type: Boolean, default: true },
         filterable: { type: Boolean, default: false },
     },
+    setup() {
+        const { currentFilterText, currentHistoryId } = storeToRefs(useHistoryStore());
+        const { lastCheckedTime, totalMatchesCount, isWatching } = storeToRefs(useHistoryItemsStore());
+        return { currentFilterText, currentHistoryId, lastCheckedTime, totalMatchesCount, isWatching };
+    },
     data() {
         return {
             filterText: "",
@@ -245,21 +250,6 @@ export default {
         itemsLoaded() {
             return this.getHistoryItems(this.historyId, this.filterText);
         },
-        /** @returns {Date} */
-        lastChecked() {
-            const { getLastCheckedTime } = storeToRefs(useHistoryItemsStore());
-            return getLastCheckedTime.value;
-        },
-        /** @returns {Number} */
-        totalItemsInQuery() {
-            const { getTotalMatchesCount } = storeToRefs(useHistoryItemsStore());
-            return getTotalMatchesCount.value;
-        },
-        /** @returns {Boolean} */
-        isWatching() {
-            const { getWatchingVisibility } = storeToRefs(useHistoryItemsStore());
-            return getWatchingVisibility.value;
-        },
         /** @returns {Object} */
         formattedSearchError() {
             if (this.searchError) {
@@ -279,9 +269,8 @@ export default {
         },
         /** @returns {String} */
         storeFilterText() {
-            const { currentFilterText, currentHistoryId } = storeToRefs(useHistoryStore());
-            if (this.historyId === currentHistoryId.value) {
-                return currentFilterText.value || "";
+            if (this.historyId === this.currentHistoryId) {
+                return this.currentFilterText || "";
             } else {
                 return "";
             }
@@ -314,8 +303,8 @@ export default {
         offset() {
             this.loadHistoryItems();
         },
-        historyUpdateTime() {
-            this.loadHistoryItems();
+        async historyUpdateTime() {
+            await this.loadHistoryItems();
         },
         itemsLoaded(newItems) {
             if (this.invisible) {
@@ -375,9 +364,11 @@ export default {
                 this.loading = false;
             }
         },
-        onDelete(item, recursive = false) {
+        async onDelete(item, recursive = false) {
+            this.loading = true;
             this.setInvisible(item);
-            deleteContent(item, { recursive: recursive });
+            await deleteContent(item, { recursive: recursive });
+            this.loading = false;
         },
         onHideSelection(selectedItems) {
             selectedItems.forEach((item) => {
@@ -387,13 +378,17 @@ export default {
         onScroll(offset) {
             this.offset = offset;
         },
-        onUndelete(item) {
+        async onUndelete(item) {
             this.setInvisible(item);
-            updateContentFields(item, { deleted: false });
+            this.loading = true;
+            await updateContentFields(item, { deleted: false });
+            this.loading = false;
         },
-        onUnhide(item) {
+        async onUnhide(item) {
             this.setInvisible(item);
-            updateContentFields(item, { visible: true });
+            this.loading = true;
+            await updateContentFields(item, { visible: true });
+            this.loading = false;
         },
         reloadContents() {
             rewatchHistory();
@@ -417,7 +412,7 @@ export default {
                 this.showDropZone = false;
             }
         },
-        onDrop(evt) {
+        async onDrop(evt) {
             this.showDropZone = false;
             let data;
             try {
@@ -428,18 +423,17 @@ export default {
             if (data) {
                 const dataSource = data.history_content_type === "dataset" ? "hda" : "hdca";
                 if (data.history_id != this.historyId) {
-                    copyDataset(data.id, this.historyId, data.history_content_type, dataSource)
-                        .then(() => {
-                            if (data.history_content_type === "dataset") {
-                                Toast.info("Dataset copied to history");
-                            } else {
-                                Toast.info("Collection copied to history");
-                            }
-                            this.loadHistoryById(this.historyId);
-                        })
-                        .catch((error) => {
-                            this.onError(error);
-                        });
+                    try {
+                        await copyDataset(data.id, this.historyId, data.history_content_type, dataSource);
+                        if (data.history_content_type === "dataset") {
+                            Toast.info("Dataset copied to history");
+                        } else {
+                            Toast.info("Collection copied to history");
+                        }
+                        this.loadHistoryById(this.historyId);
+                    } catch (error) {
+                        this.onError(error);
+                    }
                 }
             }
         },

diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js
@@ -5,7 +5,7 @@
 import Backbone from "backbone";
 import { createDatasetCollection } from "components/History/model/queries";
 import { watchHistory } from "store/historyStore/model/watchHistory";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 
 import { buildCollectionModal } from "./buildCollectionModal";

diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
@@ -291,7 +291,7 @@ export function searchToolsByKeys(
                         ? keys.startsWith
                         : order;
 
-                const wordMatches = actualValueWords.filter((word) => queryWords.includes(word));
+                const wordMatches = Array.from(new Set(actualValueWords.filter((word) => queryWords.includes(word))));
                 if (!usesDL) {
                     if (actualValue.match(queryValue)) {
                         // if string.match() returns true, matching tool found

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
@@ -107,7 +107,7 @@ import FormElement from "components/Form/FormElement";
 import LoadingSpan from "components/LoadingSpan";
 import ToolEntryPoints from "components/ToolEntryPoints/ToolEntryPoints";
 import { mapActions, mapState } from "pinia";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useJobStore } from "stores/jobStore";
 import { refreshContentsWrapper } from "utils/data";
 
@@ -187,7 +187,7 @@ export default {
     computed: {
         ...mapState(useUserStore, ["currentUser"]),
         ...mapState(useHistoryStore, ["currentHistoryId"]),
-        ...mapState(useHistoryItemsStore, ["getLastUpdateTime"]),
+        ...mapState(useHistoryItemsStore, ["lastUpdateTime"]),
         toolName() {
             return this.formConfig.name;
         },
@@ -225,7 +225,7 @@ export default {
         currentHistoryId() {
             this.onHistoryChange();
         },
-        getLastUpdateTime() {
+        lastUpdateTime() {
             this.onHistoryChange();
         },
     },

diff --git a/client/src/components/Workflow/Run/WorkflowRun.vue b/client/src/components/Workflow/Run/WorkflowRun.vue
@@ -47,7 +47,7 @@
 <script>
 import LoadingSpan from "components/LoadingSpan";
 import { mapState } from "pinia";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { errorMessageAsString } from "utils/simple-error";
 
 import { useHistoryStore } from "@/stores/historyStore";
@@ -98,9 +98,9 @@ export default {
     },
     computed: {
         ...mapState(useHistoryStore, ["currentHistoryId", "getHistoryById"]),
-        ...mapState(useHistoryItemsStore, ["getLastUpdateTime"]),
+        ...mapState(useHistoryItemsStore, ["lastUpdateTime"]),
         historyStatusKey() {
-            return `${this.currentHistoryId}_${this.getLastUpdateTime}`;
+            return `${this.currentHistoryId}_${this.lastUpdateTime}`;
         },
     },
     watch: {

diff --git a/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue b/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
@@ -30,7 +30,7 @@ import FormMessage from "components/Form/FormMessage";
 import { visitInputs } from "components/Form/utilities";
 import WorkflowIcons from "components/Workflow/icons";
 import { mapState } from "pinia";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 
 import { getTool } from "./services";
 
@@ -70,12 +70,12 @@ export default {
         };
     },
     computed: {
-        ...mapState(useHistoryItemsStore, ["getLastUpdateTime"]),
+        ...mapState(useHistoryItemsStore, ["lastUpdateTime"]),
         icon() {
             return WorkflowIcons[this.model.step_type];
         },
         historyStatusKey() {
-            return `${this.historyId}_${this.getLastUpdateTime}`;
+            return `${this.historyId}_${this.lastUpdateTime}`;
         },
     },
     watch: {

diff --git a/client/src/store/historyStore/model/watchHistory.js b/client/src/store/historyStore/model/watchHistory.js
@@ -6,8 +6,9 @@
  */
 
 import { getGalaxyInstance } from "app";
+import { storeToRefs } from "pinia";
 import defaultStore from "store/index";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 import { getCurrentHistoryFromServer } from "stores/services/history.services";
 import { loadSet } from "utils/setCache";
@@ -51,7 +52,8 @@ export async function watchHistoryOnce(store) {
     // get current history
     const checkForUpdate = new Date();
     const history = await getCurrentHistoryFromServer(lastUpdateTime);
-    historyItemsStore.setLastCheckedTime(checkForUpdate);
+    const { lastCheckedTime } = storeToRefs(historyItemsStore);
+    lastCheckedTime.value = checkForUpdate;
     if (!history || !history.id) {
         return;
     }
@@ -96,11 +98,11 @@ export async function watchHistoryOnce(store) {
 }
 
 export async function watchHistory(store = defaultStore) {
-    const historyItemsStore = useHistoryItemsStore();
+    const { isWatching } = storeToRefs(useHistoryItemsStore());
     // Only set up visibility listeners once, whenever a watch is first started
     if (watchingVisibility === false) {
         watchingVisibility = true;
-        historyItemsStore.setWatchingVisibility(watchingVisibility);
+        isWatching.value = watchingVisibility;
         document.addEventListener("visibilitychange", setVisibilityThrottle);
     }
     try {
@@ -109,7 +111,7 @@ export async function watchHistory(store = defaultStore) {
         // error alerting the user that watch history failed
         console.warn(error);
         watchingVisibility = false;
-        historyItemsStore.setWatchingVisibility(watchingVisibility);
+        isWatching.value = watchingVisibility;
     } finally {
         watchTimeout = setTimeout(() => {
             watchHistory(store);

diff --git a/client/src/store/historyStore/model/watchHistory.test.js b/client/src/store/historyStore/model/watchHistory.test.js
@@ -2,7 +2,7 @@ import { createLocalVue, mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { createPinia, mapState } from "pinia";
-import { useHistoryItemsStore } from "stores/history/historyItemsStore";
+import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 
 import { watchHistoryOnce } from "./watchHistory";