Fix: Interactive mode switching (#878)

* Conifgure webpack to spit dist folder.

* Add styles to extension.
Add html of canvas to extension.

* Use App exported from index.js

* Remove circular dependency.

* Fix calculation in bubblr click listener.

* Fix the bubbles calculation for interactive mode.

* Move explorable explaination tab next to overview

* Reduce font size of Interactive mode and multi seller

* Calculate height and width of the expanded bubble according to the parentNode viewport.

* Calculate height and width of the expanded bubble according to the parentNode viewport.

* Fix returning promise.

* Silence errors and handle ending of the loop.

* Add reset button to EE.

* Remvove react wrapper.

* Fix undefined color error.

* Disable previous and next button when timeline ends.

* Add DSP boxes for bidding.
Add boxes for show winning ad.
Fix the date time branch for publisher 2.

* Fix bubble generation for interactive mode.

* Add promise queue.

* Implement new promise queue and modify next and previous function.

* Using window variable.

* Fix promise queue.

* Modify promise queue.

* Fix bugs.

* Fix errors.

* Fix misc conditions.

* Add mechanism for development mode.

* Fix bugs in development mode.

* Fix bubble generation calls.

* Fix timeline issue of toggling.

* Remove unused config variables.

* Do not disable the previous and next button.

* Fix bug.

* Add index visited.

* Add visited index number.

* Move state controllers to app.

* Fix webpack config.

* Code improvements

* Improve code

* Add comment for utils.disableButtons.

* Fix cursor.

* Fix disableButton call.

* Fix bug post merge.

* Fix reference for circleVisitedIndex.

* Add baseline displaying visited diagram.

* Adjust the number in the visited node.

* Fix auction display on revisit.

* Fix number display in interactive mode.

* Add next and previous button for inteeractive mode.

* Fix logic of displaying flow.

* Fix bug.

* Fix icons displaying on revisiting node.

* Fix post merge conflicts bug.

* Fix post rebase.

* Comment out code.

* Fix failing lint.

* Fix linter

* Change PromiseQueue to promiseQueue.

* Add code improvements.

* Remove artifact.

* Fix file name.

* Fix mode switching.

* Add .js to file imports.

* Rename file.

---------

Co-authored-by: sayedtaqui <[email protected]>

packages/explorable-explanations/package.json

@@ -33,4 +33,4 @@
   "dependencies": {
     "p5": "^1.11.0"
   }
-}
+}

packages/explorable-explanations/public/index.html

@@ -20,7 +20,7 @@
                                 d="M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z" />
                         </svg>
                     </button>
-                    <button id="next-div" class="play-pause-button">
+                    <button id="next-div" disabled class="play-pause-button">
                         <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"
                             fill="#808080">
                             <path

packages/explorable-explanations/src/app.js

@@ -19,6 +19,7 @@ const app = {
     circlePositions: [],
     smallCirclePositions: [],
     circlePublisherIndices: [],
+    expandIconPositions: [],
     currentIndex: 0,
   },
   color: null,
@@ -57,6 +58,10 @@ const app = {
   mouseY: 0,
   shouldRespondToClick: true,
   startTrackingMouse: true,
+  visitedIndexes: 1,
+  visitedIndexOrder: [],
+  visitedIndexOrderTracker: -1,
+  isRevisitingNodeInInteractiveMode: false,
 };
 
 export default app;

packages/explorable-explanations/src/components/branches.js

@@ -40,6 +40,7 @@ const Branches = async ({ x1, y1, branches, currentIndex }) => {
   progress = 0;
   renderedBranchIds = [];
   endpoints = [];
+  const p = app.p;
 
   const y2 = y1 + 50;
   spacing = 300; // Calculate spacing based on canvas width
@@ -53,6 +54,37 @@ const Branches = async ({ x1, y1, branches, currentIndex }) => {
 
   return new Promise((resolve) => {
     const animate = () => {
+      if (app.isRevisitingNodeInInteractiveMode) {
+        const branchXEndpoint =
+          currentIndex * LEFT_MARGIN + 15 + (branches.length - 1) * spacing;
+
+        branches.forEach(({ id, type }, index) => {
+          const x = currentIndex * LEFT_MARGIN + 15 + index * spacing;
+          const y = y2 - 9;
+          let endpoint;
+          p.push();
+          p.stroke(0);
+          p.line(x, y, branchXEndpoint, y);
+          p.pop();
+          p.push();
+          p.stroke(0);
+          p.line(x, y, x, y + 20);
+          p.pop();
+          if (type === 'datetime') {
+            endpoint = drawDateTimeBranch(x, y, branches[index]);
+          }
+
+          if (type === 'box') {
+            endpoint = drawBoxesBranch(x, y, branches[index]);
+          }
+
+          endpoints.push(endpoint);
+
+          renderedBranchIds.push(id);
+        });
+        resolve(endpoints);
+        return;
+      }
       if (app.cancelPromise) {
         resolve(endpoints);
         return;
@@ -117,6 +149,11 @@ 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();
@@ -155,6 +192,7 @@ const drawAnimatedTimeline = (x, y, branches) => {
 
 const drawDateTimeBranch = (x, y, branch) => {
   const p = app.p;
+
   p.push();
   p.noStroke();
   p.fill(0);

packages/explorable-explanations/src/components/progressLine.js

@@ -50,6 +50,7 @@ const ProgressLine = ({
   };
 
   return new Promise((resolve) => {
+    // eslint-disable-next-line complexity
     const animate = () => {
       if (app.cancelPromise) {
         resolve();
@@ -69,6 +70,13 @@ const ProgressLine = ({
       switch (direction) {
         case 'right':
           currentX += incrementBy;
+          if (app.isRevisitingNodeInInteractiveMode) {
+            p.line(x1, y1, x1 + width, y2);
+            drawArrow(x1 + width, y1, direction);
+            resolve({ x: x1 + width, y: y2 });
+            return;
+          }
+
           if (currentX - x1 > width) {
             resolve({ x: currentX, y: y2 });
             return;
@@ -79,6 +87,14 @@ const ProgressLine = ({
 
         case 'left':
           targetX -= incrementBy;
+          if (app.isRevisitingNodeInInteractiveMode) {
+            p.line(x2, y2 + 10, targetX - width, y1 + 10);
+            drawArrow(targetX - width, y1 + 4, direction);
+            utils.drawText(text, targetX + width / 2, y1 + height / 2);
+            resolve({ x: targetX - width, y: y1 + 10 });
+            return;
+          }
+
           if (x2 - targetX > width) {
             utils.drawText(text, targetX + width / 2, y1 + height / 2);
             resolve({ x: targetX, y: y1 + 10 });
@@ -90,6 +106,18 @@ const ProgressLine = ({
 
         case 'down':
           currentY += incrementBy;
+          if (app.isRevisitingNodeInInteractiveMode) {
+            p.line(x1, y1, x2, y1 + height);
+            drawArrow(x1, y1 + height, direction);
+            utils.drawText(
+              text,
+              x1 - (text.startsWith('$') ? 10 : width / 2),
+              y1 + height / 2
+            );
+            resolve({ x: x2, y: y1 + height });
+            return;
+          }
+
           if (currentY - y1 > height) {
             utils.drawText(
               text,
@@ -105,6 +133,18 @@ const ProgressLine = ({
 
         case 'up':
           currentY -= incrementBy;
+          if (app.isRevisitingNodeInInteractiveMode) {
+            p.line(x1, y1, x2, y1 - height);
+            drawArrow(x1, y1 - height, direction);
+            utils.drawText(
+              text,
+              x1 + (text.startsWith('$') ? 10 : width / 2),
+              y1 - height / 2
+            );
+            resolve({ x: x2, y: y1 - height });
+            return;
+          }
+
           if (y1 - currentY > height) {
             utils.drawText(
               text,

packages/explorable-explanations/src/config.js

@@ -39,6 +39,7 @@ const config = {
         igGroupsCount: 3,
         interestGroups: ['shoes', 'heels', 'phones'],
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'advertiser',
@@ -47,12 +48,14 @@ const config = {
         igGroupsCount: 2,
         interestGroups: ['stilletos', 'shorts'],
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'publisher',
         website: 'pub1.com',
         datetime: '2023-10-01 12:00',
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'advertiser',
@@ -61,6 +64,7 @@ const config = {
         igGroupsCount: 2,
         interestGroups: ['bike', 'car'],
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'advertiser',
@@ -69,12 +73,14 @@ const config = {
         igGroupsCount: 3,
         interestGroups: ['football', 'basketball', 'baseball'],
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'publisher',
         website: 'pub2.com',
         datetime: '2023-10-01 14:00',
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'advertiser',
@@ -83,6 +89,7 @@ const config = {
         igGroupsCount: 3,
         interestGroups: ['movies', 'series', 'books'],
         visited: false,
+        visitedIndex: null,
       },
       {
         type: 'advertiser',
@@ -91,6 +98,7 @@ const config = {
         igGroupsCount: 3,
         interestGroups: ['IGG220', 'IGG201', 'IG225'],
         visited: false,
+        visitedIndex: null,
       },
     ],
     colors: {

packages/explorable-explanations/src/lib/PromiseQueue.js → packages/explorable-explanations/src/lib/promiseQueue.js

@@ -91,6 +91,9 @@ class PromiseQueue {
           flow.clearBelowTimelineCircles();
           app.cancelPromise = false;
           app.timeline.isPaused = false;
+          if (this.queue.length === 0) {
+            return;
+          }
         }
       } catch (error) {
         this.currentPromiseIndex++;
@@ -120,6 +123,7 @@ class PromiseQueue {
     this.currentPromiseIndex = 0;
     this.nextNodeSkipIndex = [];
     this.nextStepSkipIndex = [];
+    this.skipToIndex = -1;
   }
 }
 

packages/explorable-explanations/src/lib/utils.js

@@ -137,13 +137,11 @@ utils.delay = (ms) => {
 };
 
 utils.wipeAndRecreateMainCanvas = () => {
-  const { height, width } = utils.calculateCanvasDimensions();
-  const canvas = app.p.createCanvas(width, height);
-  canvas.parent('ps-canvas');
-  canvas.style('z-index', 0);
-  canvas.id('p5-canvas');
+  app.p.clear();
   app.p.background(config.canvas.background);
-  app.p.textSize(config.canvas.fontSize);
+
+  app.timeline.drawTimelineLine();
+  app.timeline.drawTimeline(config.timeline);
 };
 
 utils.wipeAndRecreateInterestCanvas = () => {
@@ -321,4 +319,5 @@ utils.markVisitedValue = (index, value) => {
     return circle;
   });
 };
+
 export default utils;

packages/explorable-explanations/src/modules/auctions.js

@@ -22,7 +22,7 @@ import config from '../config';
 import utils from '../lib/utils';
 import { Box, ProgressLine, Branches, RippleEffect } from '../components';
 import bubbles from './bubbles';
-import PromiseQueue from '../lib/PromiseQueue';
+import promiseQueue from '../lib/promiseQueue.js';
 
 /**
  * @module Auction
@@ -453,42 +453,57 @@ auction.draw = (index) => {
   }
 
   for (const step of steps) {
-    PromiseQueue.nextStepSkipIndex.push(PromiseQueue.queue.length - 1);
-    PromiseQueue.add(async () => {
+    promiseQueue.nextStepSkipIndex.push(promiseQueue.queue.length - 1);
+    promiseQueue.add(async () => {
       const { component, props, callBack } = step;
 
       const returnValue = await component(props); // eslint-disable-line no-await-in-loop
 
       const delay = component === Box ? 1000 : 0;
-
-      if (props?.showBarrageAnimation) {
-        await bubbles.barrageAnimation(index); // eslint-disable-line no-await-in-loop
-        await utils.delay(500); // eslint-disable-line no-await-in-loop
-
-        utils.wipeAndRecreateInterestCanvas(); // eslint-disable-line no-await-in-loop
-      }
-
-      if (props?.showRippleEffect) {
-        const x = props.x();
-        const y = props.y();
-
-        // eslint-disable-next-line no-await-in-loop
-        await RippleEffect({
-          x: x + config.flow.box.width + 2,
-          y: y + config.flow.box.height / 2,
-        });
+      if (!app.isRevisitingNodeInInteractiveMode) {
+        if (props?.showBarrageAnimation) {
+          await bubbles.barrageAnimation(index); // eslint-disable-line no-await-in-loop
+
+          if (app.cancelPromise) {
+            return;
+          }
+
+          await utils.delay(500); // eslint-disable-line no-await-in-loop
+
+          utils.wipeAndRecreateInterestCanvas(); // eslint-disable-line no-await-in-loop
+        }
+
+        if (props?.showRippleEffect) {
+          const x = props.x();
+          const y = props.y();
+
+          if (app.cancelPromise) {
+            return;
+          }
+          // eslint-disable-next-line no-await-in-loop
+          await RippleEffect({
+            x: x + config.flow.box.width + 2,
+            y: y + config.flow.box.height / 2,
+          });
+        }
       }
 
       if (callBack) {
         callBack(returnValue);
       }
-      await utils.delay(delay); // eslint-disable-line no-await-in-loop
+      if (!app.isRevisitingNodeInInteractiveMode) {
+        if (app.cancelPromise) {
+          return;
+        }
+        await utils.delay(delay); // eslint-disable-line no-await-in-loop
+      }
     });
   }
 
-  PromiseQueue.add(async () => {
-    await utils.delay(2000);
-    flow.clearBelowTimelineCircles();
+  promiseQueue.add(() => {
+    if (!app.isRevisitingNodeInInteractiveMode) {
+      flow.clearBelowTimelineCircles();
+    }
   });
 };