Feature: Add previous and next buttons for EE PA

packages/explorable-explanations/public/index.html

@@ -13,6 +13,20 @@
         <div id="ps-canvas">
             <div id="canvas-container">
                 <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">
+                            <path
+                                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">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"
+                            fill="#808080">
+                            <path
+                                d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />
+                        </svg>
+                    </button>
                     <div class="play-pause-button" id="play-pause-button">
                         <button id="play" class="hidden">
                             <img src="./icons/play-button.png" alt="play" />

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

@@ -53,7 +53,7 @@ const Branches = async ({ x1, y1, branches }) => {
 
   return new Promise((resolve) => {
     const animate = () => {
-      if (window.cancelPromise) {
+      if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
         resolve(endpoints);
         return;
       }
@@ -96,7 +96,7 @@ const drawAnimatedTimeline = (x, y, branches) => {
     // Draw the horizontal line
     p.line(x, y, x + progress, y);
 
-    if (window.cancelPromise) {
+    if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
       resolve();
       return;
     }

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

@@ -51,7 +51,7 @@ const ProgressLine = ({
 
   return new Promise((resolve) => {
     const animate = () => {
-      if (window.cancelPromise) {
+      if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
         resolve();
         return;
       }

packages/explorable-explanations/src/lib/ripple-effect.js

@@ -46,7 +46,7 @@ rippleEffect.start = (x = 0, y = 0) => {
     config.rippleEffect.rippled = true;
 
     const animate = (timestamp) => {
-      if (window.cancelPromise) {
+      if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
         resolve();
         return;
       }

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

@@ -127,6 +127,16 @@ utils.triangle = (size, x, y, direction = 'right', color = 'black') => {
 utils.delay = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+
+utils.wipeAndRecreateMainCanvas = () => {
+  const { height, width } = utils.calculateCanvasDimensions();
+  const canvas = app.p.createCanvas(width, height);
+  canvas.parent('ps-canvas');
+  canvas.style('z-index', 0);
+  app.p.background(config.canvas.background);
+  app.p.textSize(config.canvas.fontSize);
+};
+
 utils.wipeAndRecreateInterestCanvas = () => {
   const { height, width } = utils.calculateCanvasDimensions();
   const overlayCanvas = app.igp.createCanvas(width, height);
@@ -332,4 +342,27 @@ utils.isOverControls = (mouseX, mouseY) => {
   return false;
 };
 
+utils.markVisitedValue = (index, value) => {
+  config.timeline.circles = config.timeline.circles.map((circle, i) => {
+    if (i < index && index >= 0) {
+      circle.visited = value;
+    }
+    return circle;
+  });
+};
+
+utils.disableButtons = () => {
+  app.prevButton.style.cursor =
+    app.timeline.currentIndex > 0 ? 'pointer' : 'default';
+  app.prevButton.disabled = app.timeline.currentIndex > 0 ? false : true;
+  app.nextButton.disabled =
+    app.timeline.currentIndex === config.timeline.circles.length - 1
+      ? true
+      : false;
+  app.nextButton.style.cursor =
+    app.timeline.currentIndex >= config.timeline.circles.length - 1
+      ? 'default'
+      : 'pointer';
+};
+
 export default utils;

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

@@ -300,7 +300,7 @@ auction.draw = async (index) => {
   }
 
   for (const step of steps) {
-    if (window.cancelPromise) {
+    if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
       return;
     }
 

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

@@ -52,6 +52,7 @@ bubbles.init = () => {
 bubbles.generateBubbles = (recalculate = false) => {
   const interestGroupsToBeAdded =
     config.timeline.circles[app.timeline.currentIndex]?.igGroupsCount ?? 0;
+
   if (!recalculate) {
     for (let index = 0; index < interestGroupsToBeAdded; index++) {
       app.bubbles.positions.push({
@@ -69,7 +70,6 @@ bubbles.generateBubbles = (recalculate = false) => {
 
     const groups = d3.map(app.bubbles.positions, (d) => d.group);
     const color = d3.scaleOrdinal(groups, d3.schemeTableau10);
-
     app.bubbles.positions = app.bubbles.positions.map((data, i) => {
       return {
         ...data,
@@ -137,13 +137,13 @@ bubbles.barrageAnimation = async (index) => {
 
   await new Promise((resolve) => {
     const animate = () => {
-      if (app.timeline.isPaused) {
-        requestAnimationFrame(animate); // Keep the animation loop alive but paused.
+      if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
+        resolve();
         return;
       }
 
-      if (window.cancelPromise) {
-        resolve();
+      if (app.timeline.isPaused) {
+        requestAnimationFrame(animate); // Keep the animation loop alive but paused.
         return;
       }
 
@@ -246,7 +246,6 @@ bubbles.reverseBarrageAnimation = async (index) => {
     const target = igp.createVector(midPointX, midPointY);
     const { color: currentColor } = app.bubbles.positions[i];
     const color = currentColor;
-
     positionsOfCircles.push({
       x:
         dspTags?.props?.x() +
@@ -266,13 +265,13 @@ bubbles.reverseBarrageAnimation = async (index) => {
 
   await new Promise((resolve) => {
     const animate = () => {
-      if (app.timeline.isPaused) {
-        requestAnimationFrame(animate);
+      if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
+        resolve();
         return;
       }
 
-      if (window.cancelPromise) {
-        resolve();
+      if (app.timeline.isPaused) {
+        requestAnimationFrame(animate);
         return;
       }
 
@@ -427,6 +426,7 @@ bubbles.bubbleChart = (
   const totalBubbles = bubbles.calculateTotalBubblesForAnimation(
     app.timeline.currentIndex
   );
+
   data = data.filter((_data, i) => {
     if (i < totalBubbles) {
       return true;
@@ -555,12 +555,17 @@ bubbles.clearAndRewriteBubbles = () => {
 
 bubbles.calculateTotalBubblesForAnimation = (index) => {
   let bubblesCount = 0;
+  if (config.isInteractiveMode) {
+    config.timeline.circles.forEach((circle) => {
+      if (circle.visited) {
+        bubblesCount += circle.igGroupsCount ?? 0;
+      }
+    });
+    return bubblesCount;
+  }
 
   config.timeline.circles.forEach((circle, currIndex) => {
-    if (
-      (currIndex < index && !config.isInteractiveMode) ||
-      (currIndex <= index && config.isInteractiveMode)
-    ) {
+    if (currIndex < index) {
       bubblesCount += circle.igGroupsCount ?? 0;
     }
   });

packages/explorable-explanations/src/modules/join-interest-group.js

@@ -150,17 +150,18 @@ joinInterestGroup.setUp = (index) => {
  */
 joinInterestGroup.draw = async (index) => {
   app.p.textAlign(app.p.CENTER, app.p.CENTER);
-
+  bubbles.generateBubbles();
   const steps = app.joinInterestGroup.joinings[index];
 
   if (!steps) {
     return;
   }
 
   for (const step of steps) {
-    if (window.cancelPromise) {
+    if (window.cancelPromise || window.cancelPromiseForPreviousAndNext) {
       return;
     }
+
     const { component, props, callBack } = step;
 
     const returnValue = await component(props); // eslint-disable-line no-await-in-loop
@@ -173,8 +174,6 @@ joinInterestGroup.draw = async (index) => {
     await utils.delay(delay); // eslint-disable-line no-await-in-loop
   }
 
-  bubbles.generateBubbles();
-
   await bubbles.reverseBarrageAnimation(index);
 
   if (config.bubbles.isExpanded) {
@@ -183,8 +182,10 @@ joinInterestGroup.draw = async (index) => {
     bubbles.showMinifiedBubbles();
   }
 
-  config.bubbles.interestGroupCounts +=
-    config.timeline.circles[index]?.igGroupsCount ?? 0;
+  if (!window.cancelPromiseForPreviousAndNext) {
+    config.bubbles.interestGroupCounts +=
+      config.timeline.circles[index]?.igGroupsCount ?? 0;
+  }
 
   flow.clearBelowTimelineCircles();
 };

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

@@ -32,6 +32,7 @@ const timeline = {};
  * and drawing the initial timeline and user icon.
  */
 timeline.init = () => {
+  app.timeline.circlePublisherIndices = [];
   config.timeline.circles.forEach((circle, index) => {
     if (circle.type === 'publisher') {
       app.timeline.circlePublisherIndices.push(index);
@@ -92,19 +93,19 @@ timeline.init = () => {
         utils.wipeAndRecreateUserCanvas();
         timeline.renderUserIcon();
         await app.drawFlows(clickedIndex);
+        config.timeline.circles[clickedIndex].visited = true;
         bubbles.clearAndRewriteBubbles();
         bubbles.showMinifiedBubbles();
         config.shouldRespondToClick = true;
-        config.timeline.circles[clickedIndex].visited = true;
         utils.wipeAndRecreateUserCanvas();
         timeline.renderUserIcon();
       }
     };
   } else {
-    app.timeline.drawTimelineLine();
-    app.timeline.renderUserIcon();
+    timeline.drawTimelineLine();
+    timeline.renderUserIcon();
   }
-  app.timeline.drawTimeline(config.timeline);
+  timeline.drawTimeline(config.timeline);
 };
 
 /**
@@ -134,30 +135,37 @@ timeline.drawTimeline = ({ position, circleProps, circles }) => {
   p.textAlign(p.CENTER, p.CENTER);
   // Draw circles and text at the timeline position
   circles.forEach((circleItem, index) => {
-    const xPositionForCircle =
-      config.timeline.position.x + diameter / 2 + circleVerticalSpace * index;
-    const yPositionForCircle = position.y + circleVerticalSpace;
-
-    app.timeline.circlePositions.push({
-      x: xPositionForCircle,
-      y: yPositionForCircle,
-    });
-
-    p.push();
-    p.stroke(config.timeline.colors.grey);
-    timeline.drawCircle(index);
-    p.pop();
+    if (!window.cancelPromiseForPreviousAndNext) {
+      const xPositionForCircle =
+        config.timeline.position.x + diameter / 2 + circleVerticalSpace * index;
+      const yPositionForCircle = position.y + circleVerticalSpace;
+
+      app.timeline.circlePositions.push({
+        x: xPositionForCircle,
+        y: yPositionForCircle,
+      });
 
-    p.push();
-    p.fill(config.timeline.colors.black);
-    p.textSize(12);
-    p.strokeWeight(0.1);
-    p.textFont('ui-sans-serif');
-    if (!config.isInteractiveMode) {
-      p.text(circleItem.datetime, xPositionForCircle, position.y);
+      p.push();
+      p.stroke(config.timeline.colors.grey);
+      timeline.drawCircle(index);
+      p.pop();
+
+      p.push();
+      p.fill(config.timeline.colors.black);
+      p.textSize(12);
+      p.strokeWeight(0.1);
+      p.textFont('ui-sans-serif');
+      if (!config.isInteractiveMode) {
+        p.text(circleItem.datetime, xPositionForCircle, position.y);
+      }
+      p.text(circleItem.website, xPositionForCircle, position.y + 20);
+      p.pop();
+    } else {
+      p.push();
+      p.stroke(config.timeline.colors.grey);
+      timeline.drawCircle(index);
+      p.pop();
     }
-    p.text(circleItem.website, xPositionForCircle, position.y + 20);
-    p.pop();
 
     timeline.drawLineAboveCircle(index);
   });
@@ -179,19 +187,16 @@ timeline.drawTimelineLine = () => {
   const p = app.p;
   let x = 0;
 
-  if (app.timeline.currentIndex === 0) {
-    p.push();
-    p.stroke(colors.grey);
-    p.line(
-      0,
-      yPositonForLine,
-      config.timeline.position.x +
-        circleVerticalSpace * (config.timeline.circles.length - 1),
-      yPositonForLine
-    );
-    p.pop();
-    return;
-  }
+  p.push();
+  p.stroke(colors.grey);
+  p.line(
+    0,
+    yPositonForLine,
+    config.timeline.position.x +
+      circleVerticalSpace * (config.timeline.circles.length - 1),
+    yPositonForLine
+  );
+  p.pop();
 
   while (
     x <=
@@ -200,7 +205,7 @@ timeline.drawTimelineLine = () => {
     app.timeline.currentIndex < config.timeline.circles.length
   ) {
     p.push();
-    p.stroke(26, 115, 232);
+    p.stroke(colors.visitedBlue);
     p.line(0, yPositonForLine, x, yPositonForLine);
     p.pop();
     x = x + 1;
@@ -237,7 +242,6 @@ timeline.renderUserIcon = () => {
   }
 
   const user = config.timeline.user;
-
   timeline.eraseAndRedraw();
   utils.wipeAndRecreateInterestCanvas();
 
@@ -269,7 +273,6 @@ timeline.eraseAndRedraw = () => {
   utils.wipeAndRecreateUserCanvas();
 
   if (currentIndex > 0) {
-    timeline.drawTimelineLine();
     let i = 0;
     while (i < currentIndex) {
       app.p.push();