[25.1] Prevent duplicate current_history_json calls

Uses a unique ID to prevent the resource watcher from creating multiple timeouts in a row. Also places the resource watcher in the history store as opposed to the `watchHistoryProvided` file which I have removed here.

The way to test this bug was to wait for the history to stop polling, and then click on the reload button in the panel many times, which would do as many duplicate calls (because it would create several different timeouts).

Author: ahmedhamidawan

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

@@ -13,7 +13,6 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import { type Alias, getOperatorForAlias } from "@/utils/filtering";
 import { setItemDragstart } from "@/utils/setDrag";
-import { startWatchingHistory } from "@/watch/watchHistoryProvided";
 
 import { useHistoryDragDrop } from "../../../composables/historyDragDrop";
 
@@ -329,7 +328,7 @@ function updateContentStats() {
 }
 
 function reloadContents() {
-    startWatchingHistory();
+    historyStore.startWatchingHistory();
 }
 
 function setInvisible(item: HistoryItemSummary) {

client/src/components/History/adapters/HistoryPanelProxy.js

@@ -6,7 +6,6 @@ import Backbone from "backbone";
 import { createDatasetCollection } from "components/History/model/queries";
 import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
-import { startWatchingHistory } from "watch/watchHistoryProvided";
 
 import { buildRuleCollectionModal } from "./buildCollectionModal";
 
@@ -26,7 +25,7 @@ export class HistoryPanelProxy {
         };
 
         // start watching the history with continuous queries
-        startWatchingHistory();
+        this.historyStore.startWatchingHistory();
     }
 
     syncCurrentHistoryModel(currentHistory) {

client/src/components/RuleCollectionBuilder.vue

@@ -631,12 +631,13 @@ import Select2 from "components/Select2";
 import UploadUtils from "components/Upload/utils";
 import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
+import { mapActions } from "pinia";
 import _ from "underscore";
 import _l from "utils/localization";
 import Vue from "vue";
 
+import { useHistoryStore } from "@/stores/historyStore";
 import { errorMessageAsString } from "@/utils/simple-error";
-import { startWatchingHistory } from "@/watch/watchHistoryProvided";
 
 import GButton from "./BaseComponents/GButton.vue";
 import TooltipOnHover from "components/TooltipOnHover.vue";
@@ -1340,6 +1341,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useHistoryStore, ["startWatchingHistory"]),
         restoreRules(event) {
             const json = JSON.parse(event);
             this.rules = json.rules;
@@ -1458,7 +1460,7 @@ export default {
             this.mapping.splice(index, 1);
         },
         refreshAndWait(response) {
-            startWatchingHistory();
+            this.startWatchingHistory();
             this.waitOnJob(response);
         },
         waitOnJob(response) {
@@ -1474,7 +1476,7 @@ export default {
                         "Unknown error encountered while running your upload job, this could be a server issue or a problem with the upload definition.";
                     this.doFullJobCheck(jobId);
                 } else {
-                    startWatchingHistory();
+                    this.startWatchingHistory();
                     this.$emit("onCreate", jobResponse.data);
                     if (this.oncreate) {
                         // legacy non-event handling

client/src/components/Tool/ToolForm.vue

@@ -128,7 +128,6 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { useTourStore } from "@/stores/tourStore";
 import { useUserStore } from "@/stores/userStore";
 import { useUserToolsServiceCredentialsStore } from "@/stores/userToolsServiceCredentialsStore";
-import { startWatchingHistory } from "@/watch/watchHistoryProvided";
 
 import ToolRecommendation from "../ToolRecommendation";
 import { getToolFormData, submitJob, updateToolFormData } from "./services";
@@ -310,6 +309,7 @@ export default {
     methods: {
         ...mapActions(useJobStore, ["saveLatestResponse"]),
         ...mapActions(useTourStore, ["setTour"]),
+        ...mapActions(useHistoryStore, ["startWatchingHistory"]),
         emailAllowed(config, user) {
             return config.server_mail_configured && !user.isAnonymous;
         },
@@ -428,7 +428,7 @@ export default {
                     this.submissionRequestFailed = false;
                     this.showExecuting = false;
                     let changeRoute = false;
-                    startWatchingHistory();
+                    this.startWatchingHistory();
                     if (jobResponse.produces_entry_points) {
                         this.showEntryPoints = true;
                         this.entryPoints = jobResponse.jobs;

client/src/components/Workflow/Run/WorkflowRunSuccess.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted } from "vue";
 
 import type { WorkflowInvocation } from "@/api/invocations";
-import { startWatchingHistory } from "@/watch/watchHistoryProvided";
+import { useHistoryStore } from "@/stores/historyStore";
 
 import Webhook from "@/components/Common/Webhook.vue";
 import GridInvocation from "@/components/Grid/GridInvocation.vue";
@@ -13,8 +13,10 @@ const props = defineProps<{
     invocations: WorkflowInvocation[];
 }>();
 
+const historyStore = useHistoryStore();
+
 onMounted(() => {
-    startWatchingHistory();
+    historyStore.startWatchingHistory();
 });
 
 const targetHistories = computed(() =>

client/src/composables/resourceWatcher.ts

@@ -43,6 +43,9 @@ export function useResourceWatcher<T = unknown>(
     let currentPollingInterval = shortPollingInterval;
     let watchTimeout: NodeJS.Timeout | null = null;
     let isEventSetup = false;
+
+    /** ID to track the current request to prevent duplicate polling */
+    let currentRequestId = 0;
     const isWatchingResource = ref<boolean>(false);
 
     /**
@@ -81,19 +84,26 @@ export function useResourceWatcher<T = unknown>(
 
     function stopWatcher() {
         isWatchingResource.value = false;
+
+        // Update the request ID to invalidate any in-flight requests
+        currentRequestId++;
+
         if (watchTimeout) {
             clearTimeout(watchTimeout);
             watchTimeout = null;
         }
     }
 
     async function tryWatchResource(app?: T) {
+        // Capture the current request ID to ensure we only schedule the next poll
+        const requestId = currentRequestId;
         try {
             await watchHandler(app);
         } catch (error) {
             console.warn(error);
         } finally {
-            if (currentPollingInterval && isWatchingResource.value) {
+            // Only schedule next poll if still watching and no new requests have been made
+            if (currentPollingInterval && isWatchingResource.value && requestId === currentRequestId) {
                 watchTimeout = setTimeout(() => {
                     tryWatchResource(app);
                 }, currentPollingInterval);
@@ -113,7 +123,13 @@ export function useResourceWatcher<T = unknown>(
             currentPollingInterval = shortPollingInterval;
             startWatchingResourceIfNeeded();
         } else {
-            currentPollingInterval = enableBackgroundPolling ? longPollingInterval : undefined;
+            if (enableBackgroundPolling) {
+                currentPollingInterval = longPollingInterval;
+            } else {
+                // Stop watching when tab is not visible and background polling is disabled
+                currentPollingInterval = undefined;
+                stopWatchingResourceIfNeeded();
+            }
         }
     }
 

client/src/stores/historyStore.ts

@@ -12,7 +12,9 @@ import {
 } from "@/api";
 import type { UpdateHistoryPayload } from "@/api/histories";
 import type { ArchivedHistoryDetailed } from "@/api/histories.archived";
+import { getGalaxyInstance } from "@/app";
 import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { useResourceWatcher } from "@/composables/resourceWatcher";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import {
     createAndSelectNewHistory,
@@ -25,6 +27,11 @@ import {
 } from "@/stores/services/history.services";
 import { rethrowSimple } from "@/utils/simple-error";
 import { sortByObjectProp } from "@/utils/sorting";
+import {
+    ACTIVE_POLLING_INTERVAL,
+    INACTIVE_POLLING_INTERVAL,
+    watchHistory as watchHistorySuppliedApp,
+} from "@/watch/watchHistory";
 
 const PAGINATION_LIMIT = 10;
 const isLoadingHistory = new Set();
@@ -356,6 +363,19 @@ export const useHistoryStore = defineStore("historyStore", () => {
         }
     }
 
+    function watchHistory() {
+        const app = getGalaxyInstance();
+        return watchHistorySuppliedApp(app);
+    }
+
+    const { startWatchingResource: startWatchingHistory, isWatchingResource: isWatchingHistory } = useResourceWatcher(
+        watchHistory,
+        {
+            shortPollingInterval: ACTIVE_POLLING_INTERVAL,
+            longPollingInterval: INACTIVE_POLLING_INTERVAL,
+        },
+    );
+
     async function loadHistoryById(historyId: string): Promise<HistorySummaryExtended | undefined> {
         if (!isLoadingHistory.has(historyId)) {
             isLoadingHistory.add(historyId);
@@ -475,6 +495,8 @@ export const useHistoryStore = defineStore("historyStore", () => {
         restoreHistory,
         restoreHistories,
         handleTotalCountChange,
+        startWatchingHistory,
+        isWatchingHistory,
         loadCurrentHistory,
         loadHistories,
         loadHistoryById,

client/src/utils/data.js

@@ -1,8 +1,8 @@
 import { useGlobalUploadModal } from "composables/globalUploadModal";
 
+import { useHistoryStore } from "@/stores/historyStore";
 import { uploadPayload } from "@/utils/upload-payload.js";
 import { uploadSubmit } from "@/utils/upload-submit.js";
-import { startWatchingHistory } from "@/watch/watchHistory";
 
 import { getCurrentGalaxyHistory, mountSelectionDialog } from "./dataModalUtils";
 
@@ -41,7 +41,8 @@ export function create(galaxy, options) {
     getHistory().then((history_id) => {
         uploadSubmit({
             success: (response) => {
-                startWatchingHistory(galaxy);
+                const historyStore = useHistoryStore();
+                historyStore.startWatchingHistory();
                 if (options.success) {
                     options.success(response);
                 }

client/src/watch/watchHistory.js

@@ -11,7 +11,6 @@ import { useHistoryStore } from "stores/historyStore";
 import { loadSet } from "utils/setCache";
 import { urlData } from "utils/url";
 
-import { useResourceWatcher } from "@/composables/resourceWatcher";
 import { useCollectionElementsStore } from "@/stores/collectionElementsStore";
 import { useDatasetStore } from "@/stores/datasetStore";
 
@@ -26,13 +25,6 @@ let lastUpdateTime = null;
 // last time changed history items have been requested
 let lastRequestDate = new Date();
 
-const { startWatchingResource: startWatchingHistory } = useResourceWatcher(watchHistory, {
-    shortPollingInterval: ACTIVE_POLLING_INTERVAL,
-    longPollingInterval: INACTIVE_POLLING_INTERVAL,
-});
-
-export { startWatchingHistory };
-
 export async function watchHistory(app) {
     // GalaxyApp
     const { isWatching } = storeToRefs(useHistoryItemsStore());