Fix post rebase.

GoogleChromeLabs · Dec 2, 2024 · 50d2107 · 50d2107
1 parent 129e0fb
commit 50d2107
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 108 deletions.
diff --git a/packages/explorable-explanations/src/components/branches.js b/packages/explorable-explanations/src/components/branches.js
@@ -152,6 +152,10 @@ const drawAnimatedTimeline = (x, y, branches) => {
       const branchX = x + i * spacing;
       const branch = branches[i];
       let endpoint;
+      if (app.cancelPromise) {
+        resolve();
+        return;
+      }
 
       if (app.cancelPromise) {
         resolve();

diff --git a/packages/explorable-explanations/src/lib/utils.js b/packages/explorable-explanations/src/lib/utils.js
@@ -320,52 +320,4 @@ utils.markVisitedValue = (index, value) => {
   });
 };
 
-utils.setButtonsDisabilityState = () => {
-  const prevButton = document.getElementById('prevButton') ?? app.prevButton;
-  const nextButton = document.getElementById('nextButton') ?? app.nextButton;
-  // Exit early if buttons are not found
-  if (!prevButton || !nextButton) {
-    return;
-  }
-
-  if (!app.isInteractiveMode) {
-    document.getElementById('prevButton').disabled =
-      app.timeline.currentIndex > 0 ? false : true;
-
-    // Helper function to set button state
-    const setButtonState = (button, isDisabled) => {
-      button.disabled = isDisabled;
-      button.classList.toggle('disabled:pointer-events-none', isDisabled);
-    };
-
-    if (!isInteractiveMode) {
-      setButtonState(prevButton, currentIndex <= 0);
-      setButtonState(nextButton, currentIndex >= circles.length - 1);
-    }
-
-    // Additional state when the currentIndex exceeds the total circles
-    if (currentIndex >= circles.length) {
-      setButtonState(prevButton, true);
-      setButtonState(nextButton, true);
-    }
-  }
-  // eslint-disable-next-line no-undef
-  if (process.env.IS_RUNNING_STANDALONE) {
-    utils.disableButtons();
-  }
-};
-// This is only called in the standalone canvas.
-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
@@ -270,12 +270,6 @@ auction.setUp = (index) => {
     {
       title: 'DSP 2',
     },
-    {
-      title: 'DSP 1',
-    },
-    {
-      title: 'DSP 2',
-    },
     {
       title: 'Key/Value Trusted',
       description: 'SSP Server',
@@ -470,16 +464,13 @@ auction.draw = (index) => {
         if (props?.showBarrageAnimation) {
           await bubbles.barrageAnimation(index); // eslint-disable-line no-await-in-loop
 
-      const returnValue = await component(props); // eslint-disable-line no-await-in-loop
+          if (app.cancelPromise) {
+            return;
+          }
 
-      const delay = component === Box ? 1000 : 0;
+          await utils.delay(500); // eslint-disable-line no-await-in-loop
 
-      if (props?.showBarrageAnimation) {
-        if (
-          app.isInteractiveMode &&
-          config.timeline.circles[index].visited === true
-        ) {
-          return;
+          utils.wipeAndRecreateInterestCanvas(); // eslint-disable-line no-await-in-loop
         }
 
         if (props?.showRippleEffect) {

diff --git a/packages/explorable-explanations/src/modules/bubbles.js b/packages/explorable-explanations/src/modules/bubbles.js
@@ -490,10 +490,6 @@ bubbles.bubbleChart = (
     .attr('stroke-opacity', strokeOpacity)
     .attr('class', 'svg overflowing-text circle-svg')
     .attr('style', `${!app.bubbles.isExpanded ? 'pointer-events: none;' : ''}`)
-    .attr(
-      'style',
-      `${!config.bubbles.isExpanded ? 'pointer-events: none;' : ''}`
-    )
     .attr(
       'fill',
       groups

diff --git a/packages/explorable-explanations/src/modules/timeline.js b/packages/explorable-explanations/src/modules/timeline.js
@@ -85,10 +85,27 @@ timeline.init = () => {
         }
       });
 
+      expandIconPositions.forEach((positions) => {
+        if (
+          utils.isInsideCircle(
+            app.mouseX,
+            app.mouseY,
+            positions.x + config.timeline.circleProps.diameter / 2,
+            positions.y,
+            20
+          )
+        ) {
+          app.isRevisitingNodeInInteractiveMode = true;
+          clickedIndex = positions.index;
+        }
+      });
+
       if (
         clickedIndex !== undefined &&
-        !config.timeline.circles[clickedIndex].visited
+        !app.isRevisitingNodeInInteractiveMode
       ) {
+        PromiseQueue.clear();
+        flow.clearBelowTimelineCircles();
         app.shouldRespondToClick = false;
         app.timeline.currentIndex = clickedIndex;
         utils.wipeAndRecreateUserCanvas();

diff --git a/packages/explorable-explanations/src/protectedAudience.js b/packages/explorable-explanations/src/protectedAudience.js
@@ -32,37 +32,6 @@ import bubbles from './modules/bubbles.js';
 import app from './app.js';
 import PromiseQueue from './lib/PromiseQueue.js';
 
-const app = {
-  timeline: {
-    isPaused: false,
-    circlePositions: [],
-    smallCirclePositions: [],
-    circlePublisherIndices: [],
-    currentIndex: 0,
-  },
-  auction: {
-    auctions: [],
-    nextTipCoordinates: { x: 0, y: 0 },
-  },
-  joinInterestGroup: {
-    joinings: [],
-    nextTipCoordinates: { x: 0, y: 0 },
-  },
-  flow: {
-    intervals: {},
-  },
-  bubbles: {
-    positions: [],
-    minifiedSVG: null,
-    expandedSVG: null,
-  },
-  utils: {},
-  p: null,
-  igp: null,
-  up: null,
-  isMultiSeller: false,
-};
-
 app.setUpTimeLine = () => {
   app.auction.auctions = [];
   app.joinInterestGroup.joinings = [];
@@ -328,10 +297,6 @@ app.handleNonInteravtiveNext = () => {
     return;
   }
 
-  if (app.timeline.currentIndex > config.timeline.circles.length - 1) {
-    return;
-  }
-
   app.timeline.isPaused = true;
   app.cancelPromise = true;
   app.timeline.currentIndex += 1;
@@ -458,7 +423,7 @@ app.handleControls = () => {
 };
 
 app.toggleInteractiveMode = async () => {
-  PromiseQueue.stop();
+  PromiseQueue.clear();
   app.cancelPromise = true;
   app.timeline.isPaused = true;
 
@@ -471,11 +436,6 @@ app.toggleInteractiveMode = async () => {
   app.shouldRespondToClick = true;
   app.startTrackingMouse = true;
 
-  if (!config.isInteractiveMode) {
-    config.shouldRespondToClick = true;
-    config.startTrackingMouse = true;
-  }
-
   utils.markVisitedValue(config.timeline.circles.length, false);
   timeline.eraseAndRedraw();
   await utils.delay(100);