Debounce onChange calls to avoid unnecessary tool rebuilding

galaxyproject · Oct 10, 2024 · e15b9f9 · e15b9f9
1 parent 865f924
commit e15b9f9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { debounce } from "underscore";
 import Vue from "vue";
 
 import FormInputs from "./FormInputs";
@@ -180,15 +181,15 @@ export default {
             });
             this.onCreateIndex();
         },
-        onChange(refreshOnChange) {
+        onChange: debounce(function (refreshOnChange) {
             this.onCreateIndex();
             const params = this.buildFormData();
             if (JSON.stringify(params) != JSON.stringify(this.formData)) {
                 this.formData = params;
                 this.resetErrors();
                 this.$emit("onChange", params, refreshOnChange);
             }
-        },
+        }, 500),
         onErrors() {
             this.resetErrors();
             if (this.errors) {

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
@@ -120,6 +120,7 @@ import ToolEntryPoints from "components/ToolEntryPoints/ToolEntryPoints";
 import { mapActions, mapState, storeToRefs } from "pinia";
 import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useJobStore } from "stores/jobStore";
+import { debounce } from "underscore";
 import { refreshContentsWrapper } from "utils/data";
 
 import { canMutateHistory } from "@/api";
@@ -284,7 +285,7 @@ export default {
                 this.onUpdate();
             }
         },
-        onUpdate() {
+        onUpdate: debounce(function (e) {
             this.disabled = true;
             console.debug("ToolForm - Updating input parameters.", this.formData);
             updateToolFormData(this.formConfig.id, this.currentVersion, this.history_id, this.formData)
@@ -294,7 +295,7 @@ export default {
                 .finally(() => {
                     this.disabled = false;
                 });
-        },
+        }, 500),
         onChangeVersion(newVersion) {
             this.requestTool(newVersion);
         },