From 59256d3a969eb429e4c641645e726d184ce508d2 Mon Sep 17 00:00:00 2001
From: Kudaligi Amoghavarsha <kgamoghavarsha@gmail.com>
Date: Sun, 24 Nov 2024 07:03:29 +0530
Subject: [PATCH] Feature: Add previous and next buttons for EE PA (#872)

* Add next and previous button.

* Fix bug

* Fix condition.

* Fix bubble showing.

* Fix navigation using next and previous buttons.

* Add disable buttons functions.

* Use different variable for cancelling promise.

* Fix animation problems and errors.

* Fix condition for cursor.

* Make the previous and next button invisible when and unclickable in interactive mode.

* Add some performance improvements.

* Fix page unresponsive

* Add spacing.

* Draw user icon.

* Fix bugs in bubbles.

* Use requestAnimationFrame instead of setTimeout.
---
 .../explorable-explanations/public/index.html |  14 ++
 .../src/components/branches.js                |   4 +-
 .../src/components/progressLine.js            |   2 +-
 .../src/lib/ripple-effect.js                  |   2 +-
 .../explorable-explanations/src/lib/utils.js  |  33 +++++
 .../src/modules/auctions.js                   |   2 +-
 .../src/modules/bubbles.js                    |  33 +++--
 .../src/modules/join-interest-group.js        |  13 +-
 .../src/modules/timeline.js                   |  87 ++++++------
 .../src/protectedAudience.js                  | 126 +++++++++++++-----
 10 files changed, 216 insertions(+), 100 deletions(-)

diff --git a/packages/explorable-explanations/public/index.html b/packages/explorable-explanations/public/index.html
index f43598489..ba85bc082 100644
--- a/packages/explorable-explanations/public/index.html
+++ b/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" />
diff --git a/packages/explorable-explanations/src/components/branches.js b/packages/explorable-explanations/src/components/branches.js
index 3d54a48ce..6580fa0b5 100644
--- a/packages/explorable-explanations/src/components/branches.js
+++ b/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;
     }
diff --git a/packages/explorable-explanations/src/components/progressLine.js b/packages/explorable-explanations/src/components/progressLine.js
index 0a28363c6..a83d57393 100644
--- a/packages/explorable-explanations/src/components/progressLine.js
+++ b/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;
       }
diff --git a/packages/explorable-explanations/src/lib/ripple-effect.js b/packages/explorable-explanations/src/lib/ripple-effect.js
index 54f4d61af..2e5b65646 100644
--- a/packages/explorable-explanations/src/lib/ripple-effect.js
+++ b/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;
       }
diff --git a/packages/explorable-explanations/src/lib/utils.js b/packages/explorable-explanations/src/lib/utils.js
index 4720a6e64..683fb7171 100644
--- a/packages/explorable-explanations/src/lib/utils.js
+++ b/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;
diff --git a/packages/explorable-explanations/src/modules/auctions.js b/packages/explorable-explanations/src/modules/auctions.js
index c9a4a6097..be270f69f 100644
--- a/packages/explorable-explanations/src/modules/auctions.js
+++ b/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;
     }
 
diff --git a/packages/explorable-explanations/src/modules/bubbles.js b/packages/explorable-explanations/src/modules/bubbles.js
index fd550f99b..31765027a 100644
--- a/packages/explorable-explanations/src/modules/bubbles.js
+++ b/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;
     }
   });
diff --git a/packages/explorable-explanations/src/modules/join-interest-group.js b/packages/explorable-explanations/src/modules/join-interest-group.js
index 5947c9c76..79bb0bebd 100644
--- a/packages/explorable-explanations/src/modules/join-interest-group.js
+++ b/packages/explorable-explanations/src/modules/join-interest-group.js
@@ -150,7 +150,7 @@ 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) {
@@ -158,9 +158,10 @@ joinInterestGroup.draw = async (index) => {
   }
 
   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();
 };
diff --git a/packages/explorable-explanations/src/modules/timeline.js b/packages/explorable-explanations/src/modules/timeline.js
index d3738fa84..0379c4cb5 100644
--- a/packages/explorable-explanations/src/modules/timeline.js
+++ b/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();
diff --git a/packages/explorable-explanations/src/protectedAudience.js b/packages/explorable-explanations/src/protectedAudience.js
index 33e56efb1..062ff9939 100644
--- a/packages/explorable-explanations/src/protectedAudience.js
+++ b/packages/explorable-explanations/src/protectedAudience.js
@@ -46,8 +46,8 @@ app.setUpTimeLine = () => {
 
   timeline.init();
 
-  app.auction.setupAuctions();
-  app.joinInterestGroup.setupJoinings();
+  auctions.setupAuctions();
+  joinInterestGroup.setupJoinings();
 };
 app.init = async (p) => {
   app.p = p;
@@ -76,12 +76,12 @@ app.userInit = (p) => {
   app.up = p;
 };
 
-app.play = async (resumed = false) => {
+app.play = (resumed = false) => {
   app.playButton.classList.add('hidden');
   app.pauseButton.classList.remove('hidden');
   app.timeline.isPaused = false;
   if (!resumed) {
-    await app.setupLoop();
+    app.setupLoop();
   }
 };
 
@@ -137,42 +137,45 @@ app.minifiedBubbleClickListener = (event, expandOverride) => {
   }
 };
 
-app.setupLoop = async () => {
+app.setupLoop = () => {
   if (window.cancelPromise) {
     window.cancelPromise = false;
   }
 
-  while (
-    app.timeline.currentIndex < config.timeline.circles.length &&
-    !config.isInteractiveMode
-  ) {
-    if (window.cancelPromise) {
-      config.timeline.circles = config.timeline.circles.map((circle) => {
-        circle.visited = false;
-        return circle;
-      });
+  const loop = async () => {
+    if (
+      window.cancelPromise ||
+      app.timeline.currentIndex >= config.timeline.circles.length
+    ) {
       return;
     }
 
-    if (app.timeline.isPaused) {
-      continue;
-    }
+    if (!app.timeline.isPaused) {
+      window.cancelPromiseForPreviousAndNext = false;
+      utils.disableButtons();
 
-    config.timeline.circles[app.timeline.currentIndex].visited = true;
+      utils.markVisitedValue(app.timeline.currentIndex, true);
+      bubbles.showMinifiedBubbles();
+      timeline.renderUserIcon();
 
-    bubbles.showMinifiedBubbles();
-    app.timeline.renderUserIcon();
-    // eslint-disable-next-line no-await-in-loop
-    await app.drawFlows(app.timeline.currentIndex);
+      await app.drawFlows(app.timeline.currentIndex);
 
-    app.timeline.currentIndex++;
-  }
-  app.timeline.eraseAndRedraw();
+      if (!window.cancelPromiseForPreviousAndNext) {
+        app.timeline.currentIndex++;
+      }
+    }
+
+    requestAnimationFrame(loop);
+    timeline.eraseAndRedraw();
+    timeline.renderUserIcon();
+  };
+
+  requestAnimationFrame(loop);
 };
 
 app.drawFlows = async (index) => {
-  await app.joinInterestGroup.draw(index);
-  await app.auction.draw(index);
+  await joinInterestGroup.draw(index);
+  await auctions.draw(index);
 };
 
 app.minifiedBubbleKeyPressListener = (event) => {
@@ -181,6 +184,53 @@ app.minifiedBubbleKeyPressListener = (event) => {
   }
 };
 
+app.handlePrevButton = () => {
+  if (config.bubbles.isExpanded || config.isInteractiveMode) {
+    return;
+  }
+
+  window.cancelPromiseForPreviousAndNext = true;
+  app.timeline.currentIndex -= 1;
+  app.prevButton.disabled = app.timeline.currentIndex > 0 ? false : true;
+  utils.markVisitedValue(app.timeline.currentIndex, true);
+  const totalBubbles = bubbles.calculateTotalBubblesForAnimation(
+    app.timeline.currentIndex
+  );
+
+  config.bubbles.interestGroupCounts = totalBubbles;
+  flow.clearBelowTimelineCircles();
+  timeline.drawTimelineLine();
+  timeline.drawTimeline(config.timeline);
+  utils.disableButtons();
+
+  if (app.timeline.isPaused) {
+    bubbles.generateBubbles();
+    bubbles.showMinifiedBubbles();
+  }
+};
+
+app.handleNextButton = () => {
+  if (config.bubbles.isExpanded || config.isInteractiveMode) {
+    return;
+  }
+
+  window.cancelPromiseForPreviousAndNext = true;
+
+  app.timeline.currentIndex += 1;
+  utils.markVisitedValue(app.timeline.currentIndex, true);
+  flow.clearBelowTimelineCircles();
+  timeline.drawTimelineLine();
+  timeline.drawTimeline(config.timeline);
+  config.bubbles.interestGroupCounts =
+    bubbles.calculateTotalBubblesForAnimation(app.timeline.currentIndex);
+  utils.disableButtons();
+
+  if (app.timeline.isPaused) {
+    bubbles.generateBubbles();
+    bubbles.showMinifiedBubbles();
+  }
+};
+
 app.handleControls = () => {
   app.playButton = document.getElementById('play');
   app.pauseButton = document.getElementById('pause');
@@ -193,6 +243,9 @@ app.handleControls = () => {
   app.minifiedBubbleContainer = document.getElementById(
     'minified-bubble-container'
   );
+  app.nextButton = document.getElementById('next-div');
+  app.prevButton = document.getElementById('previous-div');
+
   app.visitedSites = [];
 
   document.addEventListener('keyup', app.minifiedBubbleKeyPressListener);
@@ -202,6 +255,9 @@ app.handleControls = () => {
     app.minifiedBubbleClickListener
   );
 
+  app.prevButton.addEventListener('click', app.handlePrevButton);
+  app.nextButton.addEventListener('click', app.handleNextButton);
+
   app.bubbleContainerDiv.addEventListener(
     'click',
     app.minifiedBubbleClickListener
@@ -233,16 +289,20 @@ app.toggleInteractiveMode = () => {
   app.bubbles.minifiedSVG = null;
   app.bubbles.expandedSVG = null;
 
+  if (config.isInteractiveMode) {
+    app.prevButton.style.display = 'none';
+    app.nextButton.style.display = 'none';
+  } else {
+    app.prevButton.style.display = 'block';
+    app.nextButton.style.display = 'block';
+  }
+
   utils.setupInterestGroupCanvas(app.igp);
   utils.setupUserCanvas(app.up);
   utils.setupMainCanvas(app.p);
+  utils.markVisitedValue(config.timeline.circles.length, false);
 
-  config.timeline.circles = config.timeline.circles.map((circle) => {
-    circle.visited = false;
-    return circle;
-  });
-
-  app.timeline.eraseAndRedraw();
+  timeline.eraseAndRedraw();
 };
 
 // Write a callback function to get the value of the checkbox.