Fix: EE PA Bugs (#916)

* Reset visited index array and trackers config * Wipe main canvas in callback * Update ig data to table * Wrap callback for current site data set cb, make updates batched and use state for IG data * Set currentSite null on reset, fix next and prev navigation data inconsistency, and remove unused data * Fix regression. * Remove extra calls to stateSetter. * Fix bug when animation is paused, user click on expanding bubbles after closing the bubble, animation restarts automatically * Add initial preview of autoscrolling. * Make scrolling smooth. * Fix scroll jerkiness. * Modify logic for stopping tracking of mouse. * Fix regression. * Disable highlighting if ad unit is available. * Fix shift error. * Remove scrollToCoordinates. * Minimise bubble when clicked on play. * Fix issue of bubbles not appearing. * Catch error related to failure in append child. * Remove return. * Fix mouse move out in interactive mode. * Fix dropdown icon disappear. * Fix sync in interest groups in interactive mode. * Dont set currentSite as null after flow is over. * Fix reset due to state uplifting. * Fix issues of reset. --------- Co-authored-by: Mayank Rana <[email protected]>
GoogleChromeLabs · Jan 20, 2025 · 98e8c62 · 98e8c62
1 parent e036a8a
commit 98e8c62
Show file tree

Hide file tree

Showing 16 changed files with 283 additions and 276 deletions.
diff --git a/packages/design-system/src/components/inspectButton/index.tsx b/packages/design-system/src/components/inspectButton/index.tsx
@@ -26,12 +26,14 @@ import { InspectActiveIcon, InspectIcon, InspectWhiteIcon } from '../../icons';
 
 interface InspectButtonProps {
   isInspecting: boolean;
+  selectedAdUnit: string | null;
   setIsInspecting: React.Dispatch<React.SetStateAction<boolean>>;
   isTabFocused: boolean;
 }
 
 const InspectButton = ({
   isInspecting,
+  selectedAdUnit,
   setIsInspecting,
   isTabFocused,
 }: InspectButtonProps) => {
@@ -44,7 +46,11 @@ const InspectButton = ({
         setIsInspecting(!isInspecting);
       }}
     >
-      {isInspecting ? <InspectActiveIcon /> : <InactiveInspectIcon />}
+      {isInspecting && !selectedAdUnit ? (
+        <InspectActiveIcon />
+      ) : (
+        <InactiveInspectIcon />
+      )}
     </span>
   );
 };

diff --git a/packages/explorable-explanations/src/protectedAudience/app.js b/packages/explorable-explanations/src/protectedAudience/app.js
@@ -21,6 +21,7 @@ const app = {
     circlePublisherIndices: [],
     expandIconPositions: [],
     currentIndex: 0,
+    pausedReason: '',
   },
   color: null,
   auction: {
@@ -47,6 +48,7 @@ const app = {
     expandedCircleDiameter: 640,
     minifiedCircleDiameter: 50,
   },
+  mouseOutOfDiv: false,
   speedMultiplier: 1,
   p: null,
   igp: null,
@@ -65,6 +67,7 @@ const app = {
   isRevisitingNodeInInteractiveMode: false,
   setCurrentSite: () => null,
   setPlayState: () => null,
+  getPlayState: () => null,
   usedNextOrPrev: false,
   promiseQueue: null,
   canvasEventListerners: {

diff --git a/packages/explorable-explanations/src/protectedAudience/canvas/setupInterestGroupCanvas.js b/packages/explorable-explanations/src/protectedAudience/canvas/setupInterestGroupCanvas.js
@@ -21,50 +21,55 @@ import app from '../app.js';
 import { calculateCanvasDimensions } from '../utils';
 
 export const setupInterestGroupCanvas = (p) => {
-  const { height, width } = calculateCanvasDimensions();
-  const overlayCanvas = p.createCanvas(width, height);
+  try {
+    const { height, width } = calculateCanvasDimensions();
+    const overlayCanvas = p.createCanvas(width, height);
 
-  overlayCanvas.parent('interest-canvas');
-  overlayCanvas.style('z-index', 2);
-  p.textSize(config.canvas.fontSize);
-  // eslint-disable-next-line no-undef
-  if (process.env.IS_RUNNING_STANDALONE) {
-    app.bubbles.minifiedBubbleX = 35;
-    app.bubbles.minifiedBubbleY = 35;
+    overlayCanvas.parent('interest-canvas');
+    overlayCanvas.style('z-index', 2);
+    p.textSize(config.canvas.fontSize);
+    // eslint-disable-next-line no-undef
+    if (process.env.IS_RUNNING_STANDALONE) {
+      app.bubbles.minifiedBubbleX = 35;
+      app.bubbles.minifiedBubbleY = 35;
 
-    app.bubbles.expandedBubbleX = config.canvas.width / 4 + 320;
-    app.bubbles.expandedBubbleY = 0;
+      app.bubbles.expandedBubbleX = config.canvas.width / 4 + 320;
+      app.bubbles.expandedBubbleY = 0;
 
-    // 335 is the angle where the close icon should be visible.
-    const angle = (305 * Math.PI) / 180;
-    // 335 is the radius + the size of icon so that icon is attached to the circle.
-    const x = 335 * Math.cos(angle) + app.bubbles.expandedBubbleX;
-    const y = 335 * Math.sin(angle) + 320;
+      // 335 is the angle where the close icon should be visible.
+      const angle = (305 * Math.PI) / 180;
+      // 335 is the radius + the size of icon so that icon is attached to the circle.
+      const x = 335 * Math.cos(angle) + app.bubbles.expandedBubbleX;
+      const y = 335 * Math.sin(angle) + 320;
 
-    app.closeButton.style.left = `${x}px`;
-    app.closeButton.style.top = `${y}px`;
+      app.closeButton.style.left = `${x}px`;
+      app.closeButton.style.top = `${y}px`;
 
-    document.styleSheets[0].cssRules.forEach((rules, index) => {
-      if (rules.selectorText === '.minified-bubble-container.expanded') {
-        document.styleSheets[0].cssRules[index].style.left = `${
-          app.bubbles.expandedBubbleX - 320
-        }px`;
+      document.styleSheets[0].cssRules.forEach((rules, index) => {
+        if (rules.selectorText === '.minified-bubble-container.expanded') {
+          document.styleSheets[0].cssRules[index].style.left = `${
+            app.bubbles.expandedBubbleX - 320
+          }px`;
 
-        document.styleSheets[0].cssRules[
-          index
-        ].style.width = `${app.bubbles.expandedCircleDiameter}px`;
-        document.styleSheets[0].cssRules[
-          index
-        ].style.height = `${app.bubbles.expandedCircleDiameter}px`;
-      }
+          document.styleSheets[0].cssRules[
+            index
+          ].style.width = `${app.bubbles.expandedCircleDiameter}px`;
+          document.styleSheets[0].cssRules[
+            index
+          ].style.height = `${app.bubbles.expandedCircleDiameter}px`;
+        }
 
-      if (rules.selectorText === '.minified-bubble-container') {
-        document.styleSheets[0].cssRules[index].style.top = `${
-          app.bubbles.minifiedBubbleY - 25
-        }px`;
-      }
-    });
-  }
+        if (rules.selectorText === '.minified-bubble-container') {
+          document.styleSheets[0].cssRules[index].style.top = `${
+            app.bubbles.minifiedBubbleY - 25
+          }px`;
+        }
+      });
+    }
 
-  app.igp = p;
+    app.igp = p;
+  } catch (error) {
+    // eslint-disable-next-line no-console -- We should know the error and let it fail silently since it doesnt break anything.
+    console.log(error);
+  }
 };
diff --git a/packages/explorable-explanations/src/protectedAudience/canvas/setupMainCanvas.js b/packages/explorable-explanations/src/protectedAudience/canvas/setupMainCanvas.js
@@ -26,45 +26,50 @@ import { calculateCanvasDimensions } from '../utils';
 import throttle from 'just-throttle';
 
 export const setupMainCanvas = async (p, doNotPlay = false) => {
-  const { height, width } = calculateCanvasDimensions();
-  const canvas = p.createCanvas(width, height);
+  try {
+    const { height, width } = calculateCanvasDimensions();
+    const canvas = p.createCanvas(width, height);
 
-  p.smooth();
-  canvas.parent('ps-canvas');
-  canvas.style('z-index', 0);
-  p.background(config.canvas.background);
-  p.textSize(config.canvas.fontSize);
-  app.p = p;
+    p.smooth();
+    canvas.parent('ps-canvas');
+    canvas.style('z-index', 0);
+    p.background(config.canvas.background);
+    p.textSize(config.canvas.fontSize);
+    app.p = p;
 
-  canvas.mouseOut(() => {
-    if (app.isInteractiveMode) {
-      app.startTrackingMouse = false;
-    }
-  });
+    canvas.mouseOut(() => {
+      if (app.isInteractiveMode) {
+        app.mouseOutOfDiv = true;
+      }
+    });
 
-  canvas.mouseOver(() => {
-    if (app.isInteractiveMode) {
-      app.startTrackingMouse = true;
-    }
-  });
+    canvas.mouseOver(() => {
+      if (app.isInteractiveMode) {
+        app.mouseOutOfDiv = false;
+      }
+    });
 
-  const mouseMovedCallback = throttle(() => {
-    const callbacks = app.canvasEventListerners.main.mouseMoved;
+    const mouseMovedCallback = throttle(() => {
+      const callbacks = app.canvasEventListerners.main.mouseMoved;
 
-    Object.keys(callbacks).forEach((key) => {
-      const callback = callbacks[key];
+      Object.keys(callbacks).forEach((key) => {
+        const callback = callbacks[key];
 
-      if (typeof callback === 'function') {
-        callback(p.mouseX, p.mouseY);
-      }
-    });
-  }, 500);
+        if (typeof callback === 'function') {
+          callback(p.mouseX, p.mouseY);
+        }
+      });
+    }, 500);
 
-  canvas.mouseMoved(mouseMovedCallback);
+    canvas.mouseMoved(mouseMovedCallback);
 
-  app.setUpTimeLine();
+    app.setUpTimeLine();
 
-  if (!app.isInteractiveMode) {
-    await app.play(false, doNotPlay);
+    if (!app.isInteractiveMode) {
+      await app.play(false, doNotPlay);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console -- We should know the error and let it fail silently since it doesnt break anything.
+    console.log(error);
   }
 };
diff --git a/packages/explorable-explanations/src/protectedAudience/canvas/setupUserCanvas.js b/packages/explorable-explanations/src/protectedAudience/canvas/setupUserCanvas.js
@@ -21,11 +21,16 @@ import app from '../app.js';
 import { calculateCanvasDimensions } from '../utils';
 
 export const setupUserCanvas = (p) => {
-  const { height, width } = calculateCanvasDimensions();
-  const overlayCanvas = p.createCanvas(width, height);
+  try {
+    const { height, width } = calculateCanvasDimensions();
+    const overlayCanvas = p.createCanvas(width, height);
 
-  overlayCanvas.parent('user-canvas');
-  overlayCanvas.style('z-index', 1);
-  p.textSize(config.canvas.fontSize);
-  app.up = p;
+    overlayCanvas.parent('user-canvas');
+    overlayCanvas.style('z-index', 1);
+    p.textSize(config.canvas.fontSize);
+    app.up = p;
+  } catch (error) {
+    // eslint-disable-next-line no-console -- We should know the error and let it fail silently since it doesnt break anything.
+    console.log(error);
+  }
 };
diff --git a/packages/explorable-explanations/src/protectedAudience/components/branches.js b/packages/explorable-explanations/src/protectedAudience/components/branches.js
@@ -88,7 +88,21 @@ const Branches = async ({
     });
   };
 
-  if (app.isRevisitingNodeInInteractiveMode || noAnimation) {
+  if (app.isRevisitingNodeInInteractiveMode) {
+    drawInstantly();
+
+    if (app.isAutoExpand) {
+      return endpoints[1];
+    } else {
+      const nextTip = await FlowExpander({
+        nextTipCoordinates: endpoints,
+      });
+
+      return nextTip;
+    }
+  }
+
+  if (noAnimation) {
     drawInstantly();
     await delay(noAnimation ? 1000 : 0);
 

diff --git a/packages/explorable-explanations/src/protectedAudience/index.js b/packages/explorable-explanations/src/protectedAudience/index.js
@@ -80,7 +80,12 @@ app.play = (resumed = false, doNotPlay = false) => {
     app.pauseButton.classList.remove('hidden');
   }
 
+  if (app.bubbles.isExpanded) {
+    app.minimiseBubbleActions();
+  }
+
   app.timeline.isPaused = false;
+  app.timeline.pausedReason = '';
 
   if (!resumed) {
     app.setupLoop(doNotPlay);
@@ -100,7 +105,9 @@ app.pause = () => {
     app.pauseButton.classList.add('hidden');
     app.playButton.classList.remove('hidden');
   }
-
+  if (!app.timeline.pausedReason) {
+    app.timeline.pausedReason = 'userClick';
+  }
   app.promiseQueue.stop();
   app.timeline.isPaused = true;
 };
@@ -109,14 +116,22 @@ app.minimiseBubbleActions = () => {
   bubbles.generateBubbles(true);
   app.bubbles.isExpanded = false;
   bubbles.showMinifiedBubbles();
+  app.timeline.pausedReason;
+  if (app.timeline.pausedReason === 'userClick') {
+    return;
+  }
   app.play(true);
 };
 
 app.expandBubbleActions = () => {
   app.bubbles.isExpanded = true;
   bubbles.showExpandedBubbles();
   bubbles.generateBubbles(true);
+  if (!app.timeline.pausedReason) {
+    app.timeline.pausedReason = 'bubble';
+  }
   app.pause();
+  app.setPlayState(false);
 };
 
 app.minifiedBubbleClickListener = (event, expandOverride) => {
@@ -215,7 +230,6 @@ app.addToPromiseQueue = (indexToStartFrom) => {
     app.timeline.expandIconPositions.forEach((position) => {
       app.p.image(app.p.openWithoutAnimation, position.x, position.y, 20, 20);
     });
-    app.setCurrentSite(null);
 
     cb(null, true);
   });
@@ -380,6 +394,15 @@ app.handleNonInteractiveNext = async () => {
   app.cancelPromise = true;
   //This is to set the data for previous site in react as well.
   app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]);
+
+  if (
+    app.bubbles.positions.length <
+    bubbles.calculateTotalBubblesForAnimation(app.timeline.currentIndex + 1)
+  ) {
+    bubbles.generateBubbles();
+    bubbles.showMinifiedBubbles();
+  }
+
   await utils.delay(10);
   app.timeline.currentIndex += 1;
 
@@ -677,6 +700,7 @@ app.reset = async () => {
 
   app.timeline.isPaused = true;
   app.setPlayState(false);
+  app.setCurrentSite(null);
 };
 
 app.createCanvas = () => {

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/joinInterestGroup.js b/packages/explorable-explanations/src/protectedAudience/modules/joinInterestGroup.js
@@ -165,6 +165,14 @@ joinInterestGroup.draw = (index) => {
     return;
   }
 
+  app.promiseQueue.push((cb) => {
+    if (index > 1 && config.timeline.circles[index - 1].type === 'publisher') {
+      app.setCurrentSite(config.timeline.circles[index - 2]);
+    }
+
+    cb(null, true);
+  });
+
   for (const step of steps) {
     app.promiseQueue.push(async (cb) => {
       const { component, props, callBack, delay } = step;

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/timeline.js b/packages/explorable-explanations/src/protectedAudience/modules/timeline.js
@@ -20,7 +20,6 @@ import config from '../config';
 import app from '../app';
 import {
   wipeAndRecreateInterestCanvas,
-  wipeAndRecreateMainCanvas,
   wipeAndRecreateUserCanvas,
 } from '../utils';
 import bubbles from './bubbles';
@@ -214,7 +213,7 @@ timeline.drawCircle = (index, completed = false) => {
     app.up.text(circles[index].visitedIndex ?? '', position.x, position.y);
     app.up.pop();
 
-    app.p.image(
+    app.up.image(
       app.p.openWithoutAnimation,
       position.x - 10,
       position.y + diameter / 2,
@@ -277,8 +276,6 @@ timeline.eraseAndRedraw = () => {
   const currentIndex = app.timeline.currentIndex;
   const { colors } = config.timeline;
 
-  wipeAndRecreateMainCanvas();
-
   if (app.isInteractiveMode) {
     config.timeline.circles.forEach((circle, index) => {
       if (circle.visited === true) {