From af7b6f4621c5cdc63b7e41c923e498fa316aefb1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 23 Oct 2023 17:59:44 -0500
Subject: [PATCH] Convert `historyItemsStore` to ts+composition Also, set
 `loading` bool to true for async History operations in panel

---
 .../History/CurrentHistory/HistoryPanel.vue   |  59 +++++-----
 .../History/adapters/HistoryPanelProxy.js     |   2 +-
 client/src/components/Tool/ToolForm.vue       |   6 +-
 .../components/Workflow/Run/WorkflowRun.vue   |   6 +-
 .../Workflow/Run/WorkflowRunDefaultStep.vue   |   6 +-
 .../store/historyStore/model/watchHistory.js  |  12 ++-
 .../historyStore/model/watchHistory.test.js   |   2 +-
 .../src/stores/history/historyItemsStore.js   | 102 ------------------
 client/src/stores/historyItemsStore.ts        |  97 +++++++++++++++++
 client/src/utils/promise-queue.js             |   3 +
 10 files changed, 145 insertions(+), 150 deletions(-)
 delete mode 100644 client/src/stores/history/historyItemsStore.js
 create mode 100644 client/src/stores/historyItemsStore.ts

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 5250251220bf..be929a5f2775 100644
--- 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"
@@ -156,7 +156,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";
@@ -199,6 +199,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: "",
@@ -244,21 +249,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) {
@@ -278,9 +268,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 "";
             }
@@ -313,8 +302,8 @@ export default {
         offset() {
             this.loadHistoryItems();
         },
-        historyUpdateTime() {
-            this.loadHistoryItems();
+        async historyUpdateTime() {
+            await this.loadHistoryItems();
         },
     },
     async mounted() {
@@ -363,9 +352,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) => {
@@ -375,13 +366,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();
@@ -405,7 +400,7 @@ export default {
                 this.showDropZone = false;
             }
         },
-        onDrop(evt) {
+        async onDrop(evt) {
             this.showDropZone = false;
             let data;
             try {
@@ -416,7 +411,7 @@ 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)
+                    await copyDataset(data.id, this.historyId, data.history_content_type, dataSource)
                         .then(() => {
                             if (data.history_content_type === "dataset") {
                                 Toast.info("Dataset copied to history");
diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js
index b5b3483d2f6c..1ad3b8f6f966 100644
--- 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/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index bcca2a7c2302..f7b5f7b8182b 100644
--- 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
index fb24d55f5ad8..8ab28c028b09 100644
--- 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
index 6dea8b925ee3..7ef3009a53d1 100644
--- 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
index 97c87c7c1919..16e3e38e85d6 100644
--- 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
index d986a7060f5a..b47213eddc19 100644
--- 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";
diff --git a/client/src/stores/history/historyItemsStore.js b/client/src/stores/history/historyItemsStore.js
deleted file mode 100644
index ba76bbb3a7db..000000000000
--- a/client/src/stores/history/historyItemsStore.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * Requests history items by reacting to changes of filter props passed
- * to the history items provider used in the history panel.
- */
-
-import { HistoryFilters } from "components/History/HistoryFilters";
-import { reverse } from "lodash";
-import { defineStore } from "pinia";
-import { mergeArray } from "store/historyStore/model/utilities";
-import { LastQueue } from "utils/promise-queue";
-import { urlData } from "utils/url";
-import Vue from "vue";
-
-const limit = 100;
-const queue = new LastQueue();
-
-export const useHistoryItemsStore = defineStore("historyItemsStore", {
-    state: () => ({
-        items: {},
-        itemKey: "hid",
-        totalMatchesCount: undefined,
-        lastCheckedTime: new Date(),
-        lastUpdateTime: new Date(),
-        relatedItems: {},
-        isWatching: false,
-    }),
-    getters: {
-        getHistoryItems: (state) => {
-            return (historyId, filterText) => {
-                const itemArray = state.items[historyId] || [];
-                const filters = HistoryFilters.getFiltersForText(filterText).filter(
-                    (filter) => !filter[0].includes("related")
-                );
-                const relatedHid = HistoryFilters.getFilterValue(filterText, "related");
-                const filtered = itemArray.filter((item) => {
-                    if (!item) {
-                        return false;
-                    }
-                    if (!HistoryFilters.testFilters(filters, item)) {
-                        return false;
-                    }
-                    const relationKey = `${historyId}-${relatedHid}-${item.hid}`;
-                    if (relatedHid && !state.relatedItems[relationKey]) {
-                        return false;
-                    }
-                    return true;
-                });
-                return reverse(filtered);
-            };
-        },
-        getTotalMatchesCount: (state) => {
-            return state.totalMatchesCount;
-        },
-        getLastCheckedTime: (state) => {
-            return state.lastCheckedTime;
-        },
-        getLastUpdateTime: (state) => {
-            return state.lastUpdateTime;
-        },
-        getWatchingVisibility: (state) => {
-            return state.isWatching;
-        },
-    },
-    actions: {
-        async fetchHistoryItems(historyId, filterText, offset) {
-            const queryString = HistoryFilters.getQueryString(filterText);
-            const params = `v=dev&order=hid&offset=${offset}&limit=${limit}`;
-            const url = `/api/histories/${historyId}/contents?${params}&${queryString}`;
-            const headers = { accept: "application/vnd.galaxy.history.contents.stats+json" };
-            return await queue.enqueue(urlData, { url, headers, errorSimplify: false }, historyId).then((data) => {
-                const stats = data.stats;
-                this.totalMatchesCount = stats.total_matches;
-                const payload = data.contents;
-                const relatedHid = HistoryFilters.getFilterValue(filterText, "related");
-                this.saveHistoryItems(historyId, payload, relatedHid);
-            });
-        },
-        // Setters
-        saveHistoryItems(historyId, payload, relatedHid = null) {
-            this.$patch((state) => {
-                // merges incoming payload into existing state
-                mergeArray(historyId, payload, state.items, state.itemKey);
-                // if related filter is included, set keys in state
-                if (relatedHid) {
-                    payload.forEach((item) => {
-                        const relationKey = `${historyId}-${relatedHid}-${item.hid}`;
-                        Vue.set(state.relatedItems, relationKey, true);
-                    });
-                }
-            });
-        },
-        setLastCheckedTime(checkForUpdate) {
-            this.lastCheckedTime = checkForUpdate;
-        },
-        setLastUpdateTime(lastUpdateTime = new Date()) {
-            this.lastUpdateTime = lastUpdateTime;
-        },
-        setWatchingVisibility(watchingVisibility) {
-            this.isWatching = watchingVisibility;
-        },
-    },
-});
diff --git a/client/src/stores/historyItemsStore.ts b/client/src/stores/historyItemsStore.ts
new file mode 100644
index 000000000000..7e38e8d5b4aa
--- /dev/null
+++ b/client/src/stores/historyItemsStore.ts
@@ -0,0 +1,97 @@
+/**
+ * Fetches history items from the API and stores them by `historyId`.
+ * A computed getter returns items for the given `historyId` and
+ * `filterText`.
+ */
+
+import { reverse } from "lodash";
+import { defineStore } from "pinia";
+import Vue, { computed, Ref, ref } from "vue";
+
+import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { mergeArray } from "@/store/historyStore/model/utilities";
+import { LastQueue } from "@/utils/promise-queue";
+import { urlData } from "@/utils/url";
+
+import { type DatasetSummary, type HDCASummary } from "./services";
+
+type HistoryItem = DatasetSummary | HDCASummary;
+
+const limit = 100;
+const queue = new LastQueue();
+
+export const useHistoryItemsStore = defineStore("historyItemsStore", () => {
+    const items: Ref<Record<string, HistoryItem[]>> = ref({});
+    const itemKey = ref("hid");
+    const totalMatchesCount = ref(undefined);
+    const lastCheckedTime = ref(new Date());
+    const lastUpdateTime = ref(new Date());
+    const relatedItems: Ref<Record<string, boolean>> = ref({});
+    const isWatching = ref(false);
+
+    const getHistoryItems = computed(() => {
+        return (historyId: string, filterText: string) => {
+            const itemArray = items.value[historyId] || [];
+            const filters = HistoryFilters.getFiltersForText(filterText).filter(
+                (filter: [string, string]) => !filter[0].includes("related")
+            );
+            const relatedHid = HistoryFilters.getFilterValue(filterText, "related");
+            const filtered = itemArray.filter((item: HistoryItem) => {
+                if (!item) {
+                    return false;
+                }
+                if (!HistoryFilters.testFilters(filters, item)) {
+                    return false;
+                }
+                const relationKey = `${historyId}-${relatedHid}-${item.hid}`;
+                if (relatedHid && !relatedItems.value[relationKey]) {
+                    return false;
+                }
+                return true;
+            });
+            return reverse(filtered);
+        };
+    });
+
+    async function fetchHistoryItems(historyId: string, filterText: string, offset: number) {
+        const queryString = HistoryFilters.getQueryString(filterText);
+        const params = `v=dev&order=hid&offset=${offset}&limit=${limit}`;
+        const url = `/api/histories/${historyId}/contents?${params}&${queryString}`;
+        const headers = { accept: "application/vnd.galaxy.history.contents.stats+json" };
+        return await queue.enqueue(urlData, { url, headers, errorSimplify: false }, historyId).then((data) => {
+            const stats = data.stats;
+            totalMatchesCount.value = stats.total_matches;
+            const payload = data.contents;
+            const relatedHid = HistoryFilters.getFilterValue(filterText, "related");
+            saveHistoryItems(historyId, payload, relatedHid);
+        });
+    }
+
+    function saveHistoryItems(historyId: string, payload: HistoryItem[], relatedHid = null) {
+        // merges incoming payload into existing state
+        mergeArray(historyId, payload, items.value, itemKey.value);
+        // if related filter is included, set keys in state
+        if (relatedHid) {
+            payload.forEach((item: HistoryItem) => {
+                // current `item.hid` is related to item with hid = `relatedHid`
+                const relationKey = `${historyId}-${relatedHid}-${item.hid}`;
+                Vue.set(relatedItems.value, relationKey, true);
+            });
+        }
+    }
+
+    function setLastUpdateTime(lastUpdated = new Date()) {
+        lastUpdateTime.value = lastUpdated;
+    }
+
+    return {
+        totalMatchesCount,
+        lastCheckedTime,
+        lastUpdateTime,
+        isWatching,
+        getHistoryItems,
+        fetchHistoryItems,
+        saveHistoryItems,
+        setLastUpdateTime,
+    };
+});
diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
index 79212bf3043f..c3b838f8bd60 100644
--- a/client/src/utils/promise-queue.js
+++ b/client/src/utils/promise-queue.js
@@ -11,6 +11,9 @@ export class LastQueue {
         this.pendingPromise = false;
     }
 
+    /**
+     * @param {String | Number} key
+     */
     async enqueue(action, args, key = 0) {
         return new Promise((resolve, reject) => {
             this.nextPromise[key] = { action, args, resolve, reject };