Feature: Add visited index and add dropdown icon to open non-animated flow.

packages/explorable-explanations/public/index.html

@@ -12,7 +12,7 @@
     <main>
         <div id="ps-canvas">
             <div id="canvas-container">
-                <div class="controls">
+                <div id="controls-div" class="controls">
                     <button id="previous-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">

packages/explorable-explanations/src/icons.json

@@ -4,5 +4,6 @@
   "pause": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAZhJREFUeF7tm00OgjAQRoeb6Ukk0QW3UG/BAhM8idwMg9EgP+1IpyVGn4mrqlOfrx8w1Ex4eAlk8PETAJBiCIAAZAsRDMIgDLIRwCAbPzIIgzDIRgCDbPzIoFQG5YdiIyLd0/po6qps5j5kjRra5IMNyg/FqW3lqBXQxrNMznVVnhyAktdQ56e9wDUOIIUcgAD0IJAig2YD98l7EuqBGRSthhYxsQE110u5dRXd7Yt2PBYC6HopnfPe7Yvb+OjqqwGgbpl4jpQAAtDQAZaYiJBBTylc51oAAlCfGxzm3zKU8yARThRfQjgCFEAA0s69/UcYDMIgDBoQoN2hCAEgANEPGjhAu4N2Ry8E7Q6lHQogAE36xdz24b4YF6ufXYzRDwrbvEC7g3bHZytMWGIssST7g8ggJYO64Wibmzzb/KLV0BIldsNMqzcZD7mzurTIN+0PWjp37+amNTaKahPGoJVbrtoP8ldLjL8iLNbhB98QnEE/yGL2KwEoVUhj0L8QwCDbL00GYRAG2QhgkI0fGYRBGGQjgEE2fnfmq4R2jqXwowAAAABJRU5ErkJggg==",
   "completedCheckMark": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAyNyAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjQ5OTkgMjYuNDE2N0MxMS43MTMxIDI2LjQxNjcgMTAuMDMzOSAyNi4wNzc2IDguNDYyNDIgMjUuMzk5NUM2Ljg5MDg5IDI0LjcyMTQgNS41MjM4OCAyMy44MDExIDQuMzYxMzggMjIuNjM4NkMzLjE5ODg4IDIxLjQ3NjEgMi4yNzg1NiAyMC4xMDkxIDEuNjAwNDQgMTguNTM3NUMwLjkyMjMxNCAxNi45NjYgMC41ODMyNTIgMTUuMjg2OCAwLjU4MzI1MiAxMy41QzAuNTgzMjUyIDExLjcxMzIgMC45MjIzMTQgMTAuMDM0MSAxLjYwMDQ0IDguNDYyNTRDMi4yNzg1NiA2Ljg5MTAxIDMuMTk4ODggNS41MjQgNC4zNjEzOCA0LjM2MTVDNS41MjM4OCAzLjE5OSA2Ljg5MDg5IDIuMjc4NjkgOC40NjI0MiAxLjYwMDU2QzEwLjAzMzkgMC45MjI0MzcgMTEuNzEzMSAwLjU4MzM3NCAxMy40OTk5IDAuNTgzMzc0QzE0Ljg5OTIgMC41ODMzNzQgMTYuMjIzMiAwLjc4Nzg4OCAxNy40NzE4IDEuMTk2OTJDMTguNzIwNCAxLjYwNTk0IDE5Ljg3MjEgMi4xNzY0MyAyMC45MjcgMi45MDgzN0wxOS4wNTQxIDQuODEzNThDMTguMjM2IDQuMjk2OTIgMTcuMzY0MiAzLjg5MzI3IDE2LjQzODUgMy42MDI2NEMxNS41MTI4IDMuMzEyMDIgMTQuNTMzMyAzLjE2NjcxIDEzLjQ5OTkgMy4xNjY3MUMxMC42MzY3IDMuMTY2NzEgOC4xOTg3IDQuMTczMTMgNi4xODU4NiA2LjE4NTk4QzQuMTczMDEgOC4xOTg4MyAzLjE2NjU5IDEwLjYzNjggMy4xNjY1OSAxMy41QzMuMTY2NTkgMTYuMzYzMiA0LjE3MzAxIDE4LjgwMTMgNi4xODU4NiAyMC44MTQxQzguMTk4NyAyMi44MjcgMTAuNjM2NyAyMy44MzM0IDEzLjQ5OTkgMjMuODMzNEMxNi4zNjMxIDIzLjgzMzQgMTguODAxMSAyMi44MjcgMjAuODE0IDIwLjgxNDFDMjIuODI2OCAxOC44MDEzIDIzLjgzMzMgMTYuMzYzMiAyMy44MzMzIDEzLjVDMjMuODMzMyAxMy4xMTI1IDIzLjgxMTcgMTIuNzI1IDIzLjc2ODcgMTIuMzM3NUMyMy43MjU2IDExLjk1IDIzLjY2MSAxMS41NzMzIDIzLjU3NDkgMTEuMjA3M0wyNS42NzM5IDkuMTA4MzdDMjUuOTEwNyA5Ljc5NzI2IDI2LjA5MzcgMTAuNTA3NyAyNi4yMjI4IDExLjIzOTZDMjYuMzUyIDExLjk3MTYgMjYuNDE2NiAxMi43MjUgMjYuNDE2NiAxMy41QzI2LjQxNjYgMTUuMjg2OCAyNi4wNzc1IDE2Ljk2NiAyNS4zOTk0IDE4LjUzNzVDMjQuNzIxMyAyMC4xMDkxIDIzLjgwMSAyMS40NzYxIDIyLjYzODUgMjIuNjM4NkMyMS40NzYgMjMuODAxMSAyMC4xMDg5IDI0LjcyMTQgMTguNTM3NCAyNS4zOTk1QzE2Ljk2NTkgMjYuMDc3NiAxNS4yODY3IDI2LjQxNjcgMTMuNDk5OSAyNi40MTY3Wk0xMS42OTE2IDE5LjQ0MTdMNi4yMDIgMTMuOTUyMUw4LjAxMDMzIDEyLjE0MzhMMTEuNjkxNiAxNS44MjVMMjQuNjA4MyAyLjg3NjA4TDI2LjQxNjYgNC42ODQ0MkwxMS42OTE2IDE5LjQ0MTdaIiBmaWxsPSIjMUE3M0U4Ii8+Cjwvc3ZnPgo=",
   "expand": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJtNDgwLTM0MCAxODAtMTgwLTU3LTU2LTEyMyAxMjMtMTIzLTEyMy01NyA1NiAxODAgMTgwWm0wIDI2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIi8+PC9zdmc+",
-  "info": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDQwLTI4MGg4MHYtMjQwaC04MHYyNDBabTQwLTMyMHExNyAwIDI4LjUtMTEuNVQ1MjAtNjQwcTAtMTctMTEuNS0yOC41VDQ4MC02ODBxLTE3IDAtMjguNSAxMS41VDQ0MC02NDBxMCAxNyAxMS41IDI4LjVUNDgwLTYwMFptMCA1MjBxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIvPjwvc3ZnPg=="
+  "info": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDQwLTI4MGg4MHYtMjQwaC04MHYyNDBabTQwLTMyMHExNyAwIDI4LjUtMTEuNVQ1MjAtNjQwcTAtMTctMTEuNS0yOC41VDQ4MC02ODBxLTE3IDAtMjguNSAxMS41VDQ0MC02NDBxMCAxNyAxMS41IDI4LjVUNDgwLTYwMFptMCA1MjBxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIvPjwvc3ZnPg==",
+  "openWithoutAnimation": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDgwLTIwMCAyNDAtNDQwbDU2LTU2IDE4NCAxODMgMTg0LTE4MyA1NiA1Ni0yNDAgMjQwWm0wLTI0MEwyNDAtNjgwbDU2LTU2IDE4NCAxODMgMTg0LTE4MyA1NiA1Ni0yNDAgMjQwWiIvPjwvc3ZnPg=="
 }

packages/explorable-explanations/src/protectedAudience/app.js

@@ -61,6 +61,7 @@ const app = {
   visitedIndexOrder: [],
   visitedIndexOrderTracker: -1,
   isRevisitingNodeInInteractiveMode: false,
+  usedNextOrPrev: false,
   canvasEventListerners: {
     main: {
       mouseOver: {},

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

@@ -100,13 +100,13 @@ const ProgressLine = ({
   let targetX = x2;
 
   return new Promise((resolve) => {
-    if (noAnimation || app.isRevisitingNodeInInteractiveMode) {
-      drawInstantly();
-      resolve(returnCoordinates);
-      return;
-    }
-
     const animate = () => {
+      if (noAnimation || app.isRevisitingNodeInInteractiveMode) {
+        drawInstantly();
+        resolve(returnCoordinates);
+        return;
+      }
+
       if (app.cancelPromise) {
         resolve();
         return;

packages/explorable-explanations/src/protectedAudience/index.js

@@ -240,6 +240,7 @@ app.handleInteractivePrev = () => {
 
   app.isRevisitingNodeInInteractiveMode = true;
   app.timeline.currentIndex = visitedIndex;
+  app.usedNextOrPrev = true;
 
   app.drawFlows(visitedIndex);
 
@@ -258,7 +259,7 @@ app.handleInteractivePrev = () => {
   flow.setButtonsDisabilityState();
 
   utils.wipeAndRecreateMainCanvas();
-  app.up.clear();
+  utils.wipeAndRecreateUserCanvas();
   timeline.renderUserIcon();
   promiseQueue.skipTo(0);
   promiseQueue.start();
@@ -345,6 +346,7 @@ app.handleInteravtiveNext = () => {
 
   app.isRevisitingNodeInInteractiveMode = true;
   app.timeline.currentIndex = visitedIndex;
+  app.usedNextOrPrev = true;
 
   app.drawFlows(visitedIndex);
 
@@ -359,7 +361,7 @@ app.handleInteravtiveNext = () => {
   flow.setButtonsDisabilityState();
 
   utils.wipeAndRecreateMainCanvas();
-  app.up.clear();
+  utils.wipeAndRecreateUserCanvas();
   timeline.renderUserIcon();
   promiseQueue.skipTo(0);
   promiseQueue.start();
@@ -380,6 +382,7 @@ app.handleControls = () => {
 
   // eslint-disable-next-line no-undef
   if (process.env.IS_RUNNING_STANDALONE) {
+    app.controlsDiv = document.getElementById('controls-div');
     app.nextButton = document.getElementById('next-div');
     app.prevButton = document.getElementById('previous-div');
     app.prevButton.addEventListener('click', app.handlePrevButton);
@@ -473,6 +476,7 @@ export const sketch = (p) => {
     p.pauseIcon = p.loadImage(icons.pause);
     p.expandIcon = p.loadImage(icons.expand);
     p.infoIcon = p.loadImage(icons.info);
+    p.openWithoutAnimation = p.loadImage(icons.openWithoutAnimation);
 
     p.completedCheckMark = p.loadImage(icons.completedCheckMark);
   };
@@ -518,7 +522,7 @@ export const userSketch = (p) => {
   };
 };
 
-app.reset = async () => {
+app.reset = async (callFromExtension = false) => {
   promiseQueue.stop();
   app.cancelPromise = true;
   app.timeline.isPaused = true;
@@ -533,9 +537,11 @@ app.reset = async () => {
   utils.markVisitedValue(config.timeline.circles.length, false);
   timeline.eraseAndRedraw();
   await utils.delay(1000);
-  setupInterestGroupCanvas(app.igp);
-  setupUserCanvas(app.up);
-  setupMainCanvas(app.p);
+  if (!callFromExtension) {
+    setupInterestGroupCanvas(app.igp);
+    setupUserCanvas(app.up);
+    setupMainCanvas(app.p);
+  }
 
   app.timeline.isPaused = true;
   app.cancelPromise = false;

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

@@ -502,6 +502,7 @@ auction.draw = (index) => {
       if (callBack) {
         callBack(returnValue);
       }
+
       if (!app.isRevisitingNodeInInteractiveMode) {
         if (app.cancelPromise) {
           return;
@@ -512,7 +513,7 @@ auction.draw = (index) => {
   }
 
   promiseQueue.add(() => {
-    if (!app.isRevisitingNodeInInteractiveMode) {
+    if (!app.isRevisitingNodeInInteractiveMode || !app.isInteractiveMode) {
       flow.clearBelowTimelineCircles();
     }
   });

packages/explorable-explanations/src/protectedAudience/modules/flow.js

@@ -36,6 +36,10 @@ flow.getTimelineCircleCoordinates = (index) => {
 
   const positions = app.timeline.circlePositions[index];
 
+  if (app.isRevisitingNodeInInteractiveMode) {
+    return { x: positions.x, y: positions.y + 20 + diameter / 2 };
+  }
+
   return { x: positions.x, y: positions.y + diameter / 2 };
 };
 

packages/explorable-explanations/src/protectedAudience/modules/joinInterestGroup.js

@@ -196,7 +196,7 @@ joinInterestGroup.draw = (index) => {
   });
 
   promiseQueue.add(() => {
-    if (!app.isRevisitingNodeInInteractiveMode) {
+    if (!app.isRevisitingNodeInInteractiveMode || !app.isInteractiveMode) {
       flow.clearBelowTimelineCircles();
     }
   });

packages/explorable-explanations/src/protectedAudience/modules/timeline.js

@@ -48,23 +48,46 @@ timeline.init = () => {
       if (!app.isInteractiveMode) {
         return;
       }
+
       const { offsetX, offsetY } = event;
+      let hoveringOnExpandIconPositions = false;
+
+      app.timeline.expandIconPositions.forEach((positions) => {
+        if (
+          utils.isInsideCircle(
+            offsetX,
+            offsetY,
+            positions.x - 10,
+            positions.y + config.timeline.circleProps.diameter / 2,
+            20
+          )
+        ) {
+          hoveringOnExpandIconPositions = true;
+        }
+      });
+
       app.mouseX = offsetX;
       app.mouseY = offsetY;
 
       if (!app.shouldRespondToClick) {
         return;
       }
 
+      if (
+        hoveringOnExpandIconPositions ||
+        utils.isOverControls(event.clientX, event.clientY)
+      ) {
+        app.startTrackingMouse = false;
+      } else {
+        app.startTrackingMouse = true;
+      }
+
       utils.wipeAndRecreateUserCanvas();
       timeline.renderUserIcon();
     };
 
     app.p.mouseClicked = () => {
-      if (!app.isInteractiveMode) {
-        return;
-      }
-      if (!app.shouldRespondToClick) {
+      if (!app.isInteractiveMode || !app.shouldRespondToClick) {
         return;
       }
 
@@ -85,13 +108,15 @@ timeline.init = () => {
         }
       });
 
+      app.usedNextOrPrev = false;
+
       expandIconPositions.forEach((positions) => {
         if (
           utils.isInsideCircle(
             app.mouseX,
             app.mouseY,
-            positions.x + config.timeline.circleProps.diameter / 2,
-            positions.y,
+            positions.x - 10,
+            positions.y + config.timeline.circleProps.diameter / 2,
             20
           )
         ) {
@@ -120,10 +145,13 @@ timeline.init = () => {
             app.p.stroke(config.timeline.colors.grey);
 
             config.timeline.circles.forEach((circle, index) => {
+              app.p.push();
+              app.p.stroke(config.timeline.colors.grey);
               timeline.drawCircle(
                 index,
                 circle.visited && index !== clickedIndex ? true : false
               );
+              app.p.pop();
 
               if (circle.visited && index === clickedIndex) {
                 const position = circlePositions[clickedIndex];
@@ -209,17 +237,30 @@ timeline.init = () => {
       ) {
         promiseQueue.clear();
         flow.clearBelowTimelineCircles();
+
+        if (config.timeline.circles[clickedIndex].type === 'advertiser') {
+          app.joinInterestGroup.joinings[clickedIndex][0].props.y1 += 20;
+        } else {
+          app.auction.auctions[clickedIndex][0].props.y1 += 20;
+        }
+
         app.shouldRespondToClick = false;
         app.drawFlows(clickedIndex);
 
         promiseQueue.add(() => {
           app.shouldRespondToClick = true;
           timeline.renderUserIcon();
           app.isRevisitingNodeInInteractiveMode = false;
+          if (config.timeline.circles[clickedIndex].type === 'advertiser') {
+            app.joinInterestGroup.joinings[clickedIndex][0].props.y1 -= 20;
+          } else {
+            app.auction.auctions[clickedIndex][0].props.y1 -= 20;
+          }
         });
 
         promiseQueue.skipTo(0);
         promiseQueue.start();
+
         utils.wipeAndRecreateUserCanvas();
         utils.wipeAndRecreateMainCanvas();
         return;
@@ -332,36 +373,54 @@ timeline.drawTimelineLine = () => {
 };
 
 timeline.drawCircle = (index, completed = false) => {
-  const { circleProps, user } = config.timeline;
+  const { circleProps, user, circles, colors } = config.timeline;
   const position = app.timeline.circlePositions[index];
   const { diameter } = circleProps;
 
   app.p.circle(position.x, position.y, diameter);
 
-  if (completed) {
-    if (app.isInteractiveMode) {
-      // app.up.text(
-      //   circles[index].visitedIndex ?? '',
-      //   position.x - 5,
-      //   position.y + diameter / 2
-      // );
-      // app.up.image(
-      //   app.p.expandIcon,
-      //   position.x + diameter / 2,
-      //   position.y,
-      //   20,
-      //   20
-      // );
+  if (!completed) {
+    return;
+  }
+
+  if (app.isInteractiveMode) {
+    if (app.usedNextOrPrev && app.timeline.currentIndex === index) {
+      app.up.image(
+        app.p.userIcon,
+        position.x - user.width / 2,
+        position.y - user.height / 2,
+        user.width,
+        user.height
+      );
+      return;
     }
 
+    app.up.push();
+    app.up.textSize(16);
+    app.up.fill(colors.visitedBlue);
+    app.up.stroke(colors.visitedBlue);
+    app.up.textStyle(app.up.BOLD);
+    app.up.textAlign(app.up.CENTER, app.up.CENTER);
+    app.up.text(circles[index].visitedIndex ?? '', position.x, position.y);
+    app.up.pop();
+
     app.up.image(
-      app.p.completedCheckMark,
-      position.x - user.width / 2,
-      position.y - user.height / 2,
-      user.width,
-      user.height
+      app.p.openWithoutAnimation,
+      position.x - 10,
+      position.y + diameter / 2,
+      20,
+      20
     );
+    return;
   }
+
+  app.up.image(
+    app.p.completedCheckMark,
+    position.x - user.width / 2,
+    position.y - user.height / 2,
+    user.width,
+    user.height
+  );
 };
 
 timeline.renderUserIcon = () => {
@@ -379,15 +438,17 @@ timeline.renderUserIcon = () => {
   timeline.eraseAndRedraw();
   utils.wipeAndRecreateInterestCanvas();
 
-  if (app.startTrackingMouse) {
-    app.up.image(
-      app.p.userIcon,
-      circlePosition.x - user.width / 2,
-      circlePosition.y - user.height / 2,
-      user.width,
-      user.height
-    );
+  if (!app.startTrackingMouse) {
+    return;
   }
+
+  app.up.image(
+    app.p.userIcon,
+    circlePosition.x - user.width / 2,
+    circlePosition.y - user.height / 2,
+    user.width,
+    user.height
+  );
 };
 
 timeline.eraseAndRedraw = () => {

packages/explorable-explanations/src/protectedAudience/utils/index.js

@@ -22,3 +22,4 @@ export * from './isInsideCircle';
 export * from './canvasEventListener';
 export * from './markVisitedValue';
 export * from './requestInterval';
+export * from './isOverControls';