Fix: Interactive mode switching (#896)

* Remove app.cancelPromise * Use queue library for queuing. * Remove custom promise queue and use queue package. * Fix barrage cancellation. * Do not recreate queue everytime. * Revert commit. * Move queue creation in sketch function. * Refactor code to add more readability. * Fix failing tests. --------- Co-authored-by: sayedtaqui <sayedwp@gmail.com>
GoogleChromeLabs · Dec 16, 2024 · c94095c · c94095c
1 parent 6fc2ada
commit c94095c
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 223 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/explorable-explanations/package.json b/packages/explorable-explanations/package.json
@@ -32,6 +32,7 @@
   "homepage": "https://github.com/GoogleChromeLabs/ps-analysis-tool",
   "dependencies": {
     "just-throttle": "^4.2.0",
-    "p5": "^1.11.0"
+    "p5": "^1.11.0",
+    "queue": "^7.0.0"
   }
 }
diff --git a/packages/explorable-explanations/src/protectedAudience/app.js b/packages/explorable-explanations/src/protectedAudience/app.js
@@ -62,6 +62,7 @@ const app = {
   visitedIndexOrderTracker: -1,
   isRevisitingNodeInInteractiveMode: false,
   usedNextOrPrev: false,
+  promiseQueue: null,
   canvasEventListerners: {
     main: {
       mouseOver: {},

diff --git a/packages/explorable-explanations/src/protectedAudience/components/branches.js b/packages/explorable-explanations/src/protectedAudience/components/branches.js
@@ -150,11 +150,6 @@ const drawAnimatedTimeline = (x, y, branches) => {
         return;
       }
 
-      if (app.cancelPromise) {
-        resolve();
-        return;
-      }
-
       if (progress >= i * spacing && !renderedBranchIds.includes(branch.id)) {
         // Draw vertical line once the horizontal line reaches its position
         p.push();

diff --git a/packages/explorable-explanations/src/protectedAudience/components/progressLine.js b/packages/explorable-explanations/src/protectedAudience/components/progressLine.js
@@ -102,12 +102,6 @@ const ProgressLine = ({
 
   return new Promise((resolve) => {
     const animate = () => {
-      if (noAnimation || app.isRevisitingNodeInInteractiveMode) {
-        drawInstantly();
-        resolve(returnCoordinates);
-        return;
-      }
-
       if (app.cancelPromise) {
         resolve();
         return;
@@ -118,6 +112,12 @@ const ProgressLine = ({
         return;
       }
 
+      if (noAnimation || app.isRevisitingNodeInInteractiveMode) {
+        drawInstantly();
+        resolve(returnCoordinates);
+        return;
+      }
+
       p.push();
       p.stroke(0);
       p.strokeWeight(1);