From f5921df8a99313f171301dae1c7b72a4346442c2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 00:21:41 -0400
Subject: [PATCH] Add a non-jquery promise queue to reduce form update requests
 (particularly useful for sliders in the workflow forms)

---
 .../src/components/Workflow/Editor/Index.vue  |  4 +-
 client/src/utils/promise-queue.js             | 42 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 client/src/utils/promise-queue.js

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index e73139f019f..fc59880a8c2 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -175,6 +175,7 @@
 </template>
 
 <script>
+import { LastQueue } from "utils/promise-queue";
 import { getDatatypesMapper } from "components/Datatypes";
 import { fromSimple } from "./modules/model";
 import { getModule, getVersions, saveWorkflow, loadWorkflow } from "./modules/services";
@@ -287,6 +288,7 @@ export default {
         },
     },
     created() {
+        this.lastQueue = new LastQueue();
         getDatatypesMapper().then((mapper) => {
             this.datatypesMapper = mapper;
             this.datatypes = mapper.datatypes;
@@ -470,7 +472,7 @@ export default {
         },
         onSetData(nodeId, newData) {
             const node = this.nodes[nodeId];
-            getModule(newData).then((data) => {
+            this.lastQueue.enqueue(getModule, newData).then((data) => {
                 node.setData(data);
             });
         },
diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
new file mode 100644
index 00000000000..8548549fcf1
--- /dev/null
+++ b/client/src/utils/promise-queue.js
@@ -0,0 +1,42 @@
+/**
+ * This queue waits until the current promise is resolved and only executes the last enqueued
+ * promise. Promises added between the last and the currently executing promise are skipped.
+ * This is useful when earlier enqueued promises become obselete.
+ * See: https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
+ */
+export class LastQueue {
+    constructor() {
+        this._nextPromise = null;
+        this._pendingPromise = false;
+    }
+
+    enqueue(action, payload) {
+        return new Promise((resolve, reject) => {
+            this._nextPromise = { action, payload, resolve, reject };
+            this.dequeue();
+        });
+    }
+
+    async dequeue() {
+        if (this._pendingPromise) {
+            return false;
+        }
+        if (this._nextPromise) {
+            let item = this._nextPromise;
+            this._nextPromise = null;
+            try {
+                this._pendingPromise = true;
+                let payload = await item.action(item.payload);
+                this._pendingPromise = false;
+                item.resolve(payload);
+            } catch (e) {
+                this._pendingPromise = false;
+                item.reject(e);
+            } finally {
+                this.dequeue();
+            }
+            return true;
+        }
+        return false;
+    }
+}