Feature: Highlight IG table row from bubbles

packages/design-system/src/components/table/components/tableBody/bodyCell.tsx

@@ -27,8 +27,6 @@ import type { TableRow } from '../../useTable';
 interface BodyCellProps {
   cell?: () => React.JSX.Element;
   width: number;
-  isHighlighted?: boolean;
-  isRowFocused: boolean;
   row: TableRow;
   hasIcon?: boolean;
   showIcon?: boolean | null;
@@ -42,12 +40,10 @@ interface BodyCellProps {
 const BodyCell = ({
   cell,
   width,
-  isRowFocused,
   row,
   hasIcon = false,
   showIcon = false,
   icon,
-  isHighlighted = false,
   rowHeightClass,
 }: BodyCellProps) => {
   const IconElement = icon?.Element;
@@ -70,13 +66,9 @@ const BodyCell = ({
           e.stopPropagation();
         }
       }}
-      className={`flex box-border outline-0 px-1 py-px text-xs ${
-        isHighlighted
-          ? `${
-              isRowFocused ? 'text-white' : 'dark:text-dirty-red text-dirty-red'
-            }`
-          : 'dark:text-bright-gray'
-      } cursor-default flex-1 ${rowHeightClass ?? 'h-5'}`}
+      className={`flex box-border outline-0 px-1 py-px text-xs cursor-default flex-1 ${
+        rowHeightClass ?? 'h-5'
+      }`}
     >
       {hasIcon && (
         <div className="h-full grid place-items-center min-w-[15px] pr-1">

packages/design-system/src/components/table/components/tableBody/bodyRow.tsx

@@ -105,7 +105,7 @@ const BodyRow = ({
           style={{
             backgroundColor: verticalBarColorHash,
           }}
-          className="absolute block top-0 bottom-0 left-0 border-l-2 border-emerald-600 dark:border-leaf-green-dark"
+          className="absolute block top-0 bottom-0 left-0 w-1 h-full"
         />
       )}
       {columns.map(
@@ -124,8 +124,6 @@ const BodyRow = ({
             onRowClick={onRowClick}
             cell={row[accessorKey]?.value}
             width={width || 0}
-            isHighlighted={isHighlighted}
-            isRowFocused={rowKey === selectedKey}
             row={row}
             hasIcon={enableBodyCellPrefixIcon}
             showIcon={

packages/design-system/src/components/table/useTable/provider.tsx

@@ -42,6 +42,7 @@ export const TableProvider = ({
   conditionalTableRowClassesHandler,
   exportTableData,
   hasVerticalBar,
+  getVerticalBarColorHash,
   isRowSelected,
   children,
 }: PropsWithChildren<TableProviderProps>) => {
@@ -167,6 +168,7 @@ export const TableProvider = ({
           conditionalTableRowClassesHandler,
           exportTableData,
           hasVerticalBar,
+          getVerticalBarColorHash,
         },
       }}
     >

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

@@ -64,6 +64,7 @@ const app = {
   visitedIndexOrderTracker: -1,
   isRevisitingNodeInInteractiveMode: false,
   setCurrentSite: () => null,
+  setHighlightedInterestGroup: () => null,
   setPlayState: () => null,
   usedNextOrPrev: false,
   promiseQueue: null,

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

@@ -638,6 +638,10 @@ export const interestGroupSketch = (p) => {
       app.setCurrentSite = props.setCurrentSite;
     }
 
+    if (props.setHighlightedInterestGroup) {
+      app.setHighlightedInterestGroup = props.setHighlightedInterestGroup;
+    }
+
     if (app.setPlayState) {
       app.setPlayState = props.setPlayState;
     }

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

@@ -374,6 +374,7 @@ bubbles.showExpandedBubbles = () => {
   app.openButton.style.display = 'none';
   app.minifiedBubbleContainer.classList.toggle('expanded', true);
 };
+
 bubbles.showMinifiedBubbles = () => {
   app.bubbles.minifiedSVG = bubbles.bubbleChart(app.bubbles.positions, {
     label: (d) =>
@@ -495,9 +496,13 @@ bubbles.bubbleChart = (
     .attr('style', `${!app.bubbles.isExpanded ? 'pointer-events: none;' : ''}`)
     .attr('transform', (d) => `translate(${d.x},${d.y})`);
 
-  const eventHandler = (event) => {
+  const eventHandler = (event, d) => {
     // eslint-disable-next-line no-console
     console.log(event);
+    app.setHighlightedInterestGroup({
+      interestGroupName: titles[d.data].split('\n')[0],
+      color: app.color(groups[d.data]),
+    });
     event.stopPropagation();
   };
 
@@ -518,7 +523,10 @@ bubbles.bubbleChart = (
         ? 'none'
         : fill
     )
-    .on('click', !app.bubbles.isExpanded ? null : eventHandler)
+    .on(
+      'click',
+      !app.bubbles.isExpanded ? null : (event, d) => eventHandler(event, d)
+    )
     .attr('fill-opacity', fillOpacity)
     .attr('r', (d) => {
       return d.r;

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

@@ -202,6 +202,25 @@ const ExplorableExplanation = () => {
     return interestGroupsRef.current;
   }, [currentSiteData]);
 
+  const [highlightedInterestGroup, setHighlightedInterestGroup] = useState<{
+    interestGroupName: string;
+    color: string;
+  } | null>(null);
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(() => {
+      setHighlightedInterestGroup(null);
+    }, 1500);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [highlightedInterestGroup]);
+
   const tabItems = useMemo<TabItems>(
     () => [
       {
@@ -210,6 +229,7 @@ const ExplorableExplanation = () => {
           Element: IGTable,
           props: {
             interestGroupDetails: [...(interestGroupData as InterestGroups[])],
+            highlightedInterestGroup,
           },
         },
       },
@@ -251,14 +271,20 @@ const ExplorableExplanation = () => {
         },
       },
     ],
-    [auctionsData, customAdsAndBidders, interestGroupData]
+    [
+      auctionsData,
+      customAdsAndBidders,
+      highlightedInterestGroup,
+      interestGroupData,
+    ]
   );
 
   return (
     <TabsProvider items={tabItems}>
       <Panel
         currentSiteData={currentSiteData}
         setCurrentSite={setCurrentSiteData}
+        setHighlightedInterestGroup={setHighlightedInterestGroup}
       />
     </TabsProvider>
   );

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

@@ -48,9 +48,19 @@ declare module 'react' {
 interface PanelProps {
   setCurrentSite: React.Dispatch<React.SetStateAction<CurrentSiteData | null>>;
   currentSiteData: CurrentSiteData | null;
+  setHighlightedInterestGroup: React.Dispatch<
+    React.SetStateAction<{
+      interestGroupName: string;
+      color: string;
+    } | null>
+  >;
 }
 
-const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => {
+const Panel = ({
+  currentSiteData,
+  setCurrentSite,
+  setHighlightedInterestGroup,
+}: PanelProps) => {
   const [play, setPlay] = useState(true);
   const [sliderStep, setSliderStep] = useState(1);
   const [interactiveMode, _setInteractiveMode] = useState(false);
@@ -279,6 +289,7 @@ const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => {
         speedMultiplier={2 * sliderStep}
         setCurrentSite={setCurrentSite}
         setPlayState={setPlay}
+        setHighlightedInterestGroup={setHighlightedInterestGroup}
       />
       <ReactP5Wrapper sketch={userSketch} />
       <TableTray />

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx

@@ -36,9 +36,16 @@ import { prettyPrintJson } from 'pretty-print-json';
 
 interface InterestGroupsProps {
   interestGroupDetails: InterestGroupsType[];
+  highlightedInterestGroup?: {
+    interestGroupName: string;
+    color: string;
+  } | null;
 }
 
-const IGTable = ({ interestGroupDetails }: InterestGroupsProps) => {
+const IGTable = ({
+  interestGroupDetails,
+  highlightedInterestGroup,
+}: InterestGroupsProps) => {
   const [selectedRow, setSelectedRow] = useState<TableData | null>(null);
   const [filterData, setFilterData] = useState(false);
 
@@ -110,6 +117,49 @@ const IGTable = ({ interestGroupDetails }: InterestGroupsProps) => {
     []
   );
 
+  const modifiedInterestGroupDetails = useMemo(() => {
+    if (!highlightedInterestGroup) {
+      return interestGroupDetails;
+    }
+
+    return interestGroupDetails.map((interestGroup) => {
+      const isHighlighted =
+        interestGroup.name === highlightedInterestGroup.interestGroupName;
+
+      return {
+        ...interestGroup,
+        highlighted: isHighlighted,
+      };
+    });
+  }, [interestGroupDetails, highlightedInterestGroup]);
+
+  const hasVerticalBar = useCallback((row: TableRow) => {
+    return Boolean(row.originalData.highlighted);
+  }, []);
+
+  const getVerticalBarColorHash = useCallback(
+    (row: TableRow) => {
+      return row.originalData.highlighted
+        ? highlightedInterestGroup?.color ?? ''
+        : '';
+    },
+    [highlightedInterestGroup?.color]
+  );
+
+  const conditionalTableRowClassesHandler = useCallback(
+    (row: TableRow, isRowFocused: boolean) => {
+      const isHighlighted = row?.originalData?.highlighted;
+      const tableRowClassName = isHighlighted
+        ? isRowFocused
+          ? 'bg-selection-yellow-dark dark:bg-selection-yellow-light text-black transition-colors'
+          : 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'
+        : '';
+
+      return tableRowClassName;
+    },
+    []
+  );
+
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setFilterData(event.target.checked);
@@ -153,15 +203,18 @@ const IGTable = ({ interestGroupDetails }: InterestGroupsProps) => {
         <TableProvider
           data={
             filterData
-              ? interestGroupDetails
-              : interestGroupDetails.filter(
+              ? modifiedInterestGroupDetails
+              : modifiedInterestGroupDetails.filter(
                   (event) => event.type === 'leave' || event.type === 'join'
                 )
           }
           tableColumns={tableColumns}
           tableFilterData={tableFilters}
           tableSearchKeys={undefined}
           tablePersistentSettingsKey="interestGroupsTable"
+          conditionalTableRowClassesHandler={conditionalTableRowClassesHandler}
+          getVerticalBarColorHash={getVerticalBarColorHash}
+          hasVerticalBar={hasVerticalBar}
           onRowClick={(row) => {
             setSelectedRow(row as InterestGroupsType);
           }}