Feature: Expand EE flow from AdUnitBox or DateTimeBranch (#903)

* Refactor timeline code.

* Add flow expander component and modify branches according to it.

* Remove unnecessary arguments.

* Add cursor marker.

* Add auto expand checkbox.

* Move amp-player-main to custom scripts

* Remove displaying arrow in auto expand mode.

* Integrate autoExpand workflow with extension.

* Move flow expander to components from modules.

* Rotate the icon which was selected.

* Fix bugs.

packages/explorable-explanations/public/index.html

@@ -47,6 +47,12 @@
                             Multi-Sellers
                         </label>
                     </div>
+                    <div id="auto-expand-div">
+                        <label for="auto-expand">
+                            <input type="checkbox" name="auto-expand" id="auto-expand" checked>
+                            Auto Expand
+                        </label>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -51,6 +51,7 @@ const app = {
   p: null,
   igp: null,
   up: null,
+  isAutoExpand: true,
   isMultiSeller: false,
   cancelPromise: false,
   isInteractiveMode: false,

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

@@ -18,7 +18,7 @@
  */
 import app from '../app';
 import config from '../config';
-import { addCanvasEventListener } from '../utils';
+import { addCanvasEventListener, isInsideBox } from '../utils';
 
 const INFO_ICON_SIZE = 16;
 const INFO_ICON_SPACING = 3;
@@ -67,13 +67,11 @@ const Box = ({
     p.image(p.infoIcon, iconX, iconY, INFO_ICON_SIZE, INFO_ICON_SIZE);
 
     const callback = (mouseX, mouseY) => {
-      if (
-        mouseX >= iconX &&
-        mouseX <= iconX + INFO_ICON_SIZE &&
-        mouseY >= iconY &&
-        mouseY <= iconY + INFO_ICON_SIZE
-      ) {
+      if (isInsideBox(mouseX, mouseY, iconX, iconY, INFO_ICON_SIZE)) {
+        app.p.cursor('pointer');
         console.log(info); // eslint-disable-line no-console
+      } else {
+        app.p.cursor('default');
       }
     };
 

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

@@ -21,9 +21,10 @@ import app from '../app';
 import config from '../config';
 import Box from './box';
 import { delay, wipeAndRecreateInterestCanvas } from '../utils';
+import FlowExpander from './flowExpander';
 
 const LEFT_MARGIN = 70; // Margin from the left side of the canvas
-const EXPAND_ICON_SIZE = 20;
+const EXPAND_ICON_SIZE = config.timeline.expandIconSize;
 
 let spacing, renderedBranchIds, endpoints;
 
@@ -142,7 +143,15 @@ const Branches = async ({
     })
   );
 
-  return endpoints;
+  if (app.isAutoExpand) {
+    return endpoints[1];
+  }
+
+  const nextTip = await FlowExpander({
+    nextTipCoordinates: endpoints,
+  });
+
+  return nextTip;
 };
 
 const drawDateTimeBranch = (x, y, branch) => {
@@ -155,6 +164,11 @@ const drawDateTimeBranch = (x, y, branch) => {
   p.text(`${branch.date}`, x, y + 35);
   p.text(`${branch.time}`, x, y + 50);
 
+  if (app.isAutoExpand) {
+    p.pop();
+    return { x: x, y: y + 30 };
+  }
+
   p.image(
     p.expandIcon,
     x - EXPAND_ICON_SIZE / 2,
@@ -179,6 +193,10 @@ const drawBoxesBranch = (x, y, branch) => {
     color: branch?.color || flow.colors.box.background,
   });
 
+  if (app.isAutoExpand) {
+    return { x: x, y: y + 30 };
+  }
+
   p.image(
     p.expandIcon,
     x - EXPAND_ICON_SIZE / 2,

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

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies
+ */
+import app from '../app';
+import config from '../config';
+import { isInsideCircle } from '../utils';
+
+const FlowExpander = async ({ nextTipCoordinates }) => {
+  const p = app.p;
+  const igp = app.igp;
+  const iconSize = config.timeline.expandIconSize;
+  const iconRadius = iconSize / 2;
+
+  igp.mouseMoved = ({ offsetX, offsetY }) => {
+    let hoveringOverSomething = false;
+    nextTipCoordinates.forEach(({ x, y }) => {
+      if (isInsideCircle(offsetX, offsetY, x, y + 27, iconRadius)) {
+        hoveringOverSomething = true;
+      }
+    });
+    if (hoveringOverSomething) {
+      p.cursor('pointer');
+    } else {
+      p.cursor('default');
+    }
+  };
+
+  const endpoint = await new Promise((resolve) => {
+    igp.mouseClicked = ({ offsetX, offsetY }) => {
+      nextTipCoordinates.forEach(({ x, y }) => {
+        if (isInsideCircle(offsetX, offsetY, x, y + 27, iconRadius)) {
+          igp.mouseClicked(false);
+          igp.mouseMoved(false);
+          resolve({ x, y });
+          return;
+        }
+      });
+    };
+  });
+
+  nextTipCoordinates.forEach(({ x, y }) => {
+    p.push();
+    p.noStroke();
+    p.circle(x, y + 27, 25);
+    p.pop();
+
+    if (endpoint.x !== x) {
+      p.push();
+      p.tint(255, 90);
+      p.image(p.expandIcon, x - iconRadius, y + 17, iconSize, iconSize);
+      p.pop();
+    } else {
+      p.push();
+      p.rotate(p.TWO_PI / 2, [1, 1, 0]);
+      p.image(p.expandIcon, -x - iconRadius, -y - 35, iconSize, iconSize);
+      p.pop();
+    }
+  });
+
+  return endpoint;
+};
+
+export default FlowExpander;

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

@@ -17,3 +17,4 @@ export { default as Box } from './box';
 export { default as Branches } from './branches';
 export { default as ProgressLine } from './progressLine';
 export { default as RippleEffect } from './rippleEffect';
+export { default as FlowExpander } from './flowExpander';

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

@@ -31,6 +31,7 @@ const config = {
       width: 30,
       height: 30,
     },
+    expandIconSize: 20,
     circles: [
       {
         type: 'advertiser',

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

@@ -442,6 +442,11 @@ app.handleControls = () => {
       'change',
       app.toggleInteractiveMode
     );
+    document
+      .getElementById('auto-expand')
+      .addEventListener('change', (event) => {
+        app.isAutoExpand = event.target.checked;
+      });
   }
 
   const minifiedBubbleContainerRect =
@@ -536,6 +541,8 @@ export const interestGroupSketch = (p) => {
       app.speedMultiplier = props.speedMultiplier;
     }
 
+    app.isAutoExpand = props.autoExpand;
+
     if (
       props.expandedBubbleX &&
       props.expandedBubbleY &&

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

@@ -143,7 +143,7 @@ auction.setUpAdUnitCode = (index) => {
       ],
     },
     callBack: (returnValue) => {
-      app.auction.nextTipCoordinates = returnValue[1];
+      app.auction.nextTipCoordinates = returnValue;
     },
   });
 };
@@ -174,7 +174,7 @@ auction.setupBranches = (index) => {
       ],
     },
     callBack: (returnValue) => {
-      app.auction.nextTipCoordinates = returnValue[1];
+      app.auction.nextTipCoordinates = returnValue;
     },
   });
 };

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

@@ -70,7 +70,10 @@ bubbles.generateBubbles = (recalculate = false) => {
       });
     });
 
-    if (totalInterestGroups < app.bubbles.positions.length) {
+    if (
+      totalInterestGroups < app.bubbles.positions.length &&
+      !app.isInteractiveMode
+    ) {
       app.bubbles.positions = app.bubbles.positions.slice(
         0,
         totalInterestGroups