Feature: Add info tab to bottom table.

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

@@ -22,6 +22,7 @@ const app = {
     expandIconPositions: [],
     currentIndex: 0,
     pausedReason: '',
+    infoIconsPositions: [],
   },
   color: null,
   auction: {
@@ -66,6 +67,7 @@ const app = {
   visitedIndexOrderTracker: -1,
   isRevisitingNodeInInteractiveMode: false,
   setCurrentSite: () => null,
+  setInfo: () => null,
   setHighlightedInterestGroup: () => null,
   setPlayState: () => null,
   getPlayState: () => null,
@@ -76,6 +78,7 @@ const app = {
       mouseOver: {},
       mouseOut: {},
       mouseMoved: {},
+      mouseClicked: {},
     },
   },
 };

packages/explorable-explanations/src/protectedAudience/canvas/setupMainCanvas.js

@@ -25,7 +25,7 @@ import { calculateCanvasDimensions } from '../utils';
  */
 import throttle from 'just-throttle';
 
-export const setupMainCanvas = async (p, doNotPlay = false) => {
+export const setupMainCanvas = async (p, pause = false) => {
   try {
     const { height, width } = calculateCanvasDimensions();
     const canvas = p.createCanvas(width, height);
@@ -49,6 +49,18 @@ export const setupMainCanvas = async (p, doNotPlay = false) => {
       }
     });
 
+    canvas.mouseClicked(() => {
+      const callbacks = app.canvasEventListerners.main.mouseClicked;
+
+      Object.keys(callbacks).forEach((key) => {
+        const callback = callbacks[key];
+
+        if (typeof callback === 'function') {
+          callback(p.mouseX, p.mouseY);
+        }
+      });
+    });
+
     const mouseMovedCallback = throttle(() => {
       const callbacks = app.canvasEventListerners.main.mouseMoved;
 
@@ -66,7 +78,7 @@ export const setupMainCanvas = async (p, doNotPlay = false) => {
     app.setUpTimeLine();
 
     if (!app.isInteractiveMode) {
-      await app.play(false, doNotPlay);
+      await app.play(false, pause);
     }
   } catch (error) {
     // eslint-disable-next-line no-console -- We should know the error and let it fail silently since it doesnt break anything.

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

@@ -20,7 +20,6 @@ import app from '../app';
 import config from '../config';
 import { addCanvasEventListener, isInsideBox } from '../utils';
 
-const INFO_ICON_SIZE = 16;
 const INFO_ICON_SPACING = 3;
 
 const Box = ({
@@ -43,14 +42,23 @@ const Box = ({
     },
   };
 
+  const {
+    flow: {
+      colors: {
+        box: { background, text },
+      },
+    },
+    timeline: { infoIconSize },
+  } = config;
+
   const p = app.p;
 
   p.push();
   p.textAlign(p.CENTER, p.CENTER);
-  p.fill(color || config.flow.colors.box.background);
+  p.fill(color || background);
   p.rect(x, y, width, height);
   p.strokeWeight(0.1);
-  p.fill(config.flow.colors.box.text);
+  p.fill(text);
   p.textFont('sans-serif');
 
   if (description) {
@@ -61,22 +69,25 @@ const Box = ({
   }
 
   if (info) {
-    const iconX = x + width - INFO_ICON_SIZE - INFO_ICON_SPACING;
+    const iconX = x + width - infoIconSize - INFO_ICON_SPACING;
     const iconY = y + INFO_ICON_SPACING;
+    app.timeline.infoIconsPositions.push({ x: iconX, y: iconY });
 
-    p.image(p.infoIcon, iconX, iconY, INFO_ICON_SIZE, INFO_ICON_SIZE);
+    p.image(p.infoIcon, iconX, iconY, infoIconSize, infoIconSize);
 
-    const callback = (mouseX, mouseY) => {
-      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');
+    const mouseClickedCallback = (mouseX, mouseY) => {
+      if (isInsideBox(mouseX, mouseY, iconX, iconY, infoIconSize)) {
+        app.setInfo({
+          title,
+          description,
+          info,
+          key: Date.now(), // To force change the state, so that the info modal is shown in case of same value.
+        });
       }
     };
 
     const key = title + description + x + y;
-    addCanvasEventListener('mouseMoved', callback, key);
+    addCanvasEventListener('mouseClicked', mouseClickedCallback, key);
   }
 
   p.pop();

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

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

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

@@ -661,6 +661,10 @@ export const interestGroupSketch = (p) => {
       app.setCurrentSite = props.setCurrentSite;
     }
 
+    if (props.setInfo) {
+      app.setInfo = props.setInfo;
+    }
+
     if (props.setHighlightedInterestGroup) {
       app.setHighlightedInterestGroup = props.setHighlightedInterestGroup;
     }
@@ -705,6 +709,7 @@ app.reset = async () => {
   app.timeline.isPaused = true;
   app.setPlayState(false);
   app.setCurrentSite(null);
+  app.setInfo({});
 };
 
 app.createCanvas = () => {

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

@@ -152,6 +152,7 @@ auction.draw = (index) => {
   app.promiseQueue.push((cb) => {
     if (!app.isRevisitingNodeInInteractiveMode) {
       flow.clearBelowTimelineCircles();
+      app.timeline.infoIconsPositions = [];
     }
     cb(null, true);
   });

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

@@ -19,16 +19,18 @@
 import app from '../../app';
 import config from '../../config';
 import { Box, ProgressLine } from '../../components';
+import { SINGLE_SELLER_CONFIG } from '../flowConfig.jsx';
 
 const setUpRunadAuction = (steps, afterRippleStep = null) => {
   const { box, colors } = config.flow;
 
   steps.push({
     component: Box,
     props: {
-      title: 'runAdAuction',
+      title: SINGLE_SELLER_CONFIG.RUN_AD_AUCTION.title,
       x: () => app.auction.nextTipCoordinates?.x + 10,
       y: () => app.auction.nextTipCoordinates?.y - box.height / 2,
+      info: SINGLE_SELLER_CONFIG.RUN_AD_AUCTION.info,
     },
     delay: 1000,
     callBack: (returnValue) => {
@@ -38,23 +40,26 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
 
   const boxes = [
     {
-      title: 'Load Interest Group',
+      title: SINGLE_SELLER_CONFIG.LOAD_INTEREST_GROUP.title,
       extraProps: {
         showBarrageAnimation: true,
       },
+      info: SINGLE_SELLER_CONFIG.LOAD_INTEREST_GROUP.info,
     },
     {
-      title: 'Key/Value Trusted',
-      description: 'DSP Server',
+      title: SINGLE_SELLER_CONFIG.KEY_VALUE_DSP_SERVER.title,
+      description: SINGLE_SELLER_CONFIG.KEY_VALUE_DSP_SERVER.description,
       color: colors.box.notBrowser,
+      info: SINGLE_SELLER_CONFIG.KEY_VALUE_DSP_SERVER.info,
     },
     {
-      title: 'generateBid()',
-      description: '(from DSPs on dsp.js)',
+      title: SINGLE_SELLER_CONFIG.GENERATE_BID.title,
+      description: SINGLE_SELLER_CONFIG.GENERATE_BID.description,
       color: colors.box.notBrowser,
       extraProps: {
         showRippleEffect: true,
       },
+      info: SINGLE_SELLER_CONFIG.GENERATE_BID.info,
     },
     {
       title: 'DSP 1',
@@ -63,25 +68,29 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
       title: 'DSP 2',
     },
     {
-      title: 'Key/Value Trusted',
-      description: 'SSP Server',
+      title: SINGLE_SELLER_CONFIG.KEY_VALUE_SSP_SERVER.title,
+      description: SINGLE_SELLER_CONFIG.KEY_VALUE_SSP_SERVER.description,
+      info: SINGLE_SELLER_CONFIG.KEY_VALUE_SSP_SERVER.info,
     },
     {
-      title: 'scoreAd()',
-      description: '(by SSPs on ssp.js)',
+      title: SINGLE_SELLER_CONFIG.SCORE_AD.title,
+      description: SINGLE_SELLER_CONFIG.SCORE_AD.description,
+      info: SINGLE_SELLER_CONFIG.SCORE_AD.info,
     },
     {
-      title: 'reportWin()',
-      description: '(on dsp.js)',
+      title: SINGLE_SELLER_CONFIG.REPORT_WIN.title,
+      description: SINGLE_SELLER_CONFIG.REPORT_WIN.description,
       color: colors.box.notBrowser,
+      info: SINGLE_SELLER_CONFIG.REPORT_WIN.info,
     },
     {
-      title: 'reportResult()',
-      description: '(on ssp.js)',
+      title: SINGLE_SELLER_CONFIG.REPORT_RESULT.title,
+      description: SINGLE_SELLER_CONFIG.REPORT_RESULT.description,
+      info: SINGLE_SELLER_CONFIG.REPORT_RESULT.info,
     },
   ];
 
-  boxes.forEach(({ title, description, color, extraProps = {} }) => {
+  boxes.forEach(({ title, description, color, info, extraProps = {} }) => {
     if (title === 'DSP 1') {
       if (afterRippleStep) {
         steps.push(afterRippleStep());
@@ -108,6 +117,7 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
           x: () => app.auction.nextTipCoordinates?.x + 10,
           y: () => app.auction.nextTipCoordinates?.y - box.height + 15,
           color,
+          info,
         },
         delay: 1000,
         callBack: (returnValue) => {
@@ -154,6 +164,7 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
           x: () => app.auction.nextTipCoordinates?.x + 10,
           y: () => app.auction.nextTipCoordinates?.y,
           color,
+          info,
         },
         delay: 1000,
         callBack: (returnValue) => {
@@ -204,6 +215,7 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
         x: () => app.auction.nextTipCoordinates?.x - box.width / 2,
         y: () => app.auction.nextTipCoordinates?.y + 10,
         color,
+        info,
       },
       delay: 1000,
       callBack: (returnValue) => {

packages/explorable-explanations/src/protectedAudience/modules/auctions/single-seller/setupFirstSSPTagFlow.js

@@ -19,6 +19,7 @@
 import app from '../../../app';
 import config from '../../../config';
 import { Box, ProgressLine } from '../../../components';
+import { SINGLE_SELLER_CONFIG } from '../../flowConfig.jsx';
 
 const setUpSingleSellerFirstSSPTagFlow = (steps) => {
   const { box, colors } = config.flow;
@@ -39,9 +40,10 @@ const setUpSingleSellerFirstSSPTagFlow = (steps) => {
   steps.push({
     component: Box,
     props: {
-      title: 'SSP Tag',
+      title: SINGLE_SELLER_CONFIG.SSP_TAG.title,
       x: () => app.auction.nextTipCoordinates?.x - box.width / 2,
       y: () => app.auction.nextTipCoordinates?.y,
+      info: SINGLE_SELLER_CONFIG.SSP_TAG.info,
     },
     delay: 1000,
     callBack: (returnValue) => {
@@ -64,10 +66,11 @@ const setUpSingleSellerFirstSSPTagFlow = (steps) => {
   steps.push({
     component: Box,
     props: {
-      title: 'SSP',
+      title: SINGLE_SELLER_CONFIG.SSP.title,
       x: () => app.auction.nextTipCoordinates?.x - box.width / 2,
       y: () => app.auction.nextTipCoordinates?.y + config.flow.arrowSize,
       color: colors.box.noData,
+      info: SINGLE_SELLER_CONFIG.SSP.info,
     },
     delay: 1000,
     callBack: (returnValue) => {
@@ -90,10 +93,11 @@ const setUpSingleSellerFirstSSPTagFlow = (steps) => {
   steps.push({
     component: Box,
     props: {
-      title: 'DSPs',
+      title: SINGLE_SELLER_CONFIG.DSPS.title,
       x: () => app.auction.nextTipCoordinates?.x - box.width / 2,
       y: () => app.auction.nextTipCoordinates?.y + config.flow.arrowSize,
       color: colors.box.noData,
+      info: SINGLE_SELLER_CONFIG.DSPS.info,
     },
     delay: 1000,
     callBack: (returnValue) => {