Feature: Introduce AdUnit and Bids tabs to explorable explanation in EE.

packages/design-system/src/components/pillToggle/index.tsx

@@ -24,13 +24,15 @@ interface PillToggleProps {
   secondOption: string;
   pillToggle: string;
   setPillToggle: (value: string) => void;
+  eeAnimatedTab: boolean;
 }
 
 const PillToggle = ({
   firstOption,
   secondOption,
   pillToggle,
   setPillToggle,
+  eeAnimatedTab,
 }: PillToggleProps) => {
   return (
     <div className="w-80 h-8 rounded-full border border-gray-300 dark:border-quartz text-sm">
@@ -40,6 +42,7 @@ const PillToggle = ({
           {
             'bg-gray-200 dark:bg-gray-500 ': pillToggle === firstOption,
             'bg-transparent': pillToggle !== firstOption,
+            'text-xs': eeAnimatedTab,
           }
         )}
         onClick={() => setPillToggle(firstOption)}
@@ -52,6 +55,7 @@ const PillToggle = ({
           {
             'bg-gray-200 dark:bg-gray-500': pillToggle === secondOption,
             'bg-transparent': pillToggle !== secondOption,
+            'text-xs': eeAnimatedTab,
           }
         )}
         onClick={() => setPillToggle(secondOption)}

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

@@ -171,7 +171,6 @@ app.addToPromiseQueue = (indexToStartFrom) => {
     app.promiseQueue.push((cb) => {
       app.bubbles.interestGroupCounts +=
         config.timeline.circles[app.timeline.currentIndex]?.igGroupsCount ?? 0;
-      app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]);
 
       cb(null, true);
     });
@@ -239,6 +238,10 @@ app.handleNonInteractivePrev = async () => {
   app.promiseQueue.end();
   app.cancelPromise = true;
   app.timeline.isPaused = true;
+  //This is to set the data for previous site in react as well.
+  app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]);
+  await utils.delay(100);
+
   app.timeline.currentIndex -= 1;
 
   app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]);
@@ -324,14 +327,14 @@ app.handleNextButton = () => {
   }
 
   if (app.isInteractiveMode) {
-    app.handleInteravtiveNext();
+    app.handleInteractiveNext();
     return;
   }
 
-  app.handleNonInteravtiveNext();
+  app.handleNonInteractiveNext();
 };
 
-app.handleNonInteravtiveNext = async () => {
+app.handleNonInteractiveNext = async () => {
   if (
     app.bubbles.isExpanded ||
     app.timeline.currentIndex > config.timeline.circles.length - 1
@@ -341,6 +344,9 @@ app.handleNonInteravtiveNext = async () => {
   app.promiseQueue.end();
   app.timeline.isPaused = true;
   app.cancelPromise = true;
+  //This is to set the data for previous site in react as well.
+  app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]);
+  await utils.delay(100);
   app.timeline.currentIndex += 1;
 
   app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]);
@@ -363,7 +369,7 @@ app.handleNonInteravtiveNext = async () => {
   app.promiseQueue.start();
 };
 
-app.handleInteravtiveNext = () => {
+app.handleInteractiveNext = () => {
   if (
     app.visitedIndexOrder.length === 0 ||
     app.visitedIndexOrderTracker === app.visitedIndexOrder.length

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

@@ -493,6 +493,12 @@ auction.draw = (index) => {
     return;
   }
 
+  app.promiseQueue.push((cb) => {
+    app.setCurrentSite(config.timeline.circles[index]);
+
+    cb(null, true);
+  });
+
   for (const step of steps) {
     app.promiseQueue.push(async (cb) => {
       const { component, props, callBack, delay = 0 } = step;

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

@@ -184,6 +184,7 @@ joinInterestGroup.draw = (index) => {
   app.promiseQueue.push(async (cb) => {
     if (!app.isRevisitingNodeInInteractiveMode) {
       await bubbles.reverseBarrageAnimation(index);
+      app.setCurrentSite(config.timeline.circles[index]);
     }
 
     if (app.bubbles.isExpanded) {

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/adMatrix.tsx

@@ -19,21 +19,19 @@
  */
 import React, { useMemo } from 'react';
 import { MatrixComponent } from '@google-psat/design-system';
+import type {
+  AdsAndBiddersType,
+  NoBidsType,
+  ReceivedBids,
+} from '@google-psat/common';
 
-/**
- * Internal dependencies.
- */
-import { useProtectedAudience } from '../../../../stateProviders';
-
-const AdMatrix = () => {
-  const { adsAndBidders, receivedBids, noBids } = useProtectedAudience(
-    ({ state }) => ({
-      adsAndBidders: state.adsAndBidders,
-      receivedBids: state.receivedBids,
-      noBids: state.noBids,
-    })
-  );
+interface AdMatrixProps {
+  adsAndBidders: AdsAndBiddersType;
+  receivedBids: ReceivedBids[];
+  noBids: NoBidsType;
+}
 
+const AdMatrix = ({ adsAndBidders, receivedBids, noBids }: AdMatrixProps) => {
   const biddersCount = useMemo(() => {
     const bidders = Object.values(adsAndBidders).reduce((acc, ad) => {
       if (ad.bidders) {

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/adTable.tsx

@@ -17,7 +17,7 @@
  * External dependencies.
  */
 import React, { useMemo, useState } from 'react';
-import { noop } from '@google-psat/common';
+import { noop, type AdsAndBiddersType } from '@google-psat/common';
 import {
   FrameIcon,
   Pill,
@@ -34,23 +34,19 @@ import { I18n } from '@google-psat/i18n';
 import { Resizable } from 're-resizable';
 import { prettyPrintJson } from 'pretty-print-json';
 
-/**
- * Internal dependencies.
- */
-import { useCookie, useProtectedAudience } from '../../../../stateProviders';
-
-const AdTable = () => {
-  const { adsAndBidders, setSelectedAdUnit, selectedAdUnit } =
-    useProtectedAudience(({ state, actions }) => ({
-      adsAndBidders: state.adsAndBidders,
-      setSelectedAdUnit: actions.setSelectedAdUnit,
-      selectedAdUnit: state.selectedAdUnit,
-    }));
-
-  const { setIsInspecting } = useCookie(({ actions }) => ({
-    setIsInspecting: actions.setIsInspecting,
-  }));
+interface AdTableProps {
+  adsAndBidders: AdsAndBiddersType;
+  setSelectedAdUnit?: React.Dispatch<React.SetStateAction<string | null>>;
+  selectedAdUnit?: string | null;
+  setIsInspecting?: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
+const AdTable = ({
+  adsAndBidders,
+  setSelectedAdUnit,
+  selectedAdUnit,
+  setIsInspecting,
+}: AdTableProps) => {
   const [selectedRow, setSelectedRow] = useState<TableData | null>(null);
 
   const tableColumns = useMemo<TableColumn[]>(
@@ -63,11 +59,11 @@ const AdTable = () => {
             className="w-full flex gap-2 items-center"
             onClick={() => {
               if (selectedAdUnit === info) {
-                setSelectedAdUnit(null);
-                setIsInspecting(false);
+                setSelectedAdUnit?.(null);
+                setIsInspecting?.(false);
               } else {
-                setIsInspecting(true);
-                setSelectedAdUnit(info as string);
+                setIsInspecting?.(true);
+                setSelectedAdUnit?.(info as string);
               }
             }}
           >

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/index.tsx

@@ -22,16 +22,31 @@ import { SIDEBAR_ITEMS_KEYS, useSidebar } from '@google-psat/design-system';
 /**
  * Internal dependencies.
  */
-import { useProtectedAudience, useSettings } from '../../../../stateProviders';
+import {
+  useCookie,
+  useProtectedAudience,
+  useSettings,
+} from '../../../../stateProviders';
 import Panel from './panel';
 
 const AdUnits = () => {
-  const { adsAndBidders, setSelectedAdUnit } = useProtectedAudience(
-    ({ state, actions }) => ({
-      adsAndBidders: state.adsAndBidders,
-      setSelectedAdUnit: actions.setSelectedAdUnit,
-    })
-  );
+  const {
+    adsAndBidders,
+    setSelectedAdUnit,
+    receivedBids,
+    noBids,
+    selectedAdUnit,
+  } = useProtectedAudience(({ state, actions }) => ({
+    adsAndBidders: state.adsAndBidders,
+    setSelectedAdUnit: actions.setSelectedAdUnit,
+    receivedBids: state.receivedBids,
+    noBids: state.noBids,
+    selectedAdUnit: state.selectedAdUnit,
+  }));
+
+  const { setIsInspecting } = useCookie(({ actions }) => ({
+    setIsInspecting: actions.setIsInspecting,
+  }));
 
   const { isUsingCDP } = useSettings(({ state }) => ({
     isUsingCDP: state.isUsingCDP,
@@ -69,7 +84,16 @@ const AdUnits = () => {
     );
   }
 
-  return <Panel adsAndBidders={adsAndBidders} />;
+  return (
+    <Panel
+      adsAndBidders={adsAndBidders}
+      receivedBids={receivedBids}
+      noBids={noBids}
+      setSelectedAdUnit={setSelectedAdUnit}
+      selectedAdUnit={selectedAdUnit}
+      setIsInspecting={setIsInspecting}
+    />
+  );
 };
 
 export default AdUnits;

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx

@@ -20,19 +20,47 @@
 import React from 'react';
 import AdTable from './adTable';
 import AdMatrix from './adMatrix';
-import type { AdsAndBiddersType } from '@google-psat/common';
+import type {
+  AdsAndBiddersType,
+  NoBidsType,
+  ReceivedBids,
+} from '@google-psat/common';
+import type { AdUnitLiteral } from '../explorableExplanation';
 
 interface AdUnitsPanelProps {
   adsAndBidders: AdsAndBiddersType;
+  receivedBids: Record<AdUnitLiteral, ReceivedBids[]>;
+  noBids: NoBidsType;
+  setSelectedAdUnit: React.Dispatch<React.SetStateAction<string | null>>;
+  selectedAdUnit: string | null;
+  setIsInspecting?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const AdUnitsPanel = ({ adsAndBidders }: AdUnitsPanelProps) => {
+const AdUnitsPanel = ({
+  adsAndBidders,
+  receivedBids,
+  noBids,
+  setSelectedAdUnit,
+  selectedAdUnit,
+  setIsInspecting,
+}: AdUnitsPanelProps) => {
   return (
     <div className="flex flex-col h-full w-full">
       {adsAndBidders && Object.keys(adsAndBidders).length > 0 ? (
         <>
-          <AdMatrix />
-          <AdTable />
+          <AdMatrix
+            adsAndBidders={adsAndBidders}
+            receivedBids={Object.keys(receivedBids ?? {})
+              .map((key: string) => receivedBids?.[key as AdUnitLiteral] ?? [])
+              .flat()}
+            noBids={noBids}
+          />
+          <AdTable
+            adsAndBidders={adsAndBidders}
+            setSelectedAdUnit={setSelectedAdUnit}
+            selectedAdUnit={selectedAdUnit}
+            setIsInspecting={setIsInspecting}
+          />
         </>
       ) : (
         <div className="w-full h-full flex items-center justify-center">