Enhancement: Autoscroll table on row highlighting (#919)

* Add owner of IG in state and compare it for highlighting * Auto scroll table to the highlighted row * test: Test for autoscroll in bodyrow * Auto switch to IG table if bubbles clicked while other tabs * Add default text colors for table * Use optional chaining to handle undefined data
GoogleChromeLabs · Jan 25, 2025 · 3a8418a · 3a8418a
1 parent b9aa491
commit 3a8418a
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 10 deletions.
diff --git a/packages/design-system/src/components/table/components/index.tsx b/packages/design-system/src/components/table/components/index.tsx
@@ -118,7 +118,7 @@ const Table = ({
   );
 
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="w-full h-full flex flex-col text-raisin-black dark:text-bright-gray">
       {!hideTableTopBar && (
         <>
           <TableTopBar

diff --git a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx
@@ -17,7 +17,7 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -82,6 +82,17 @@ const BodyRow = ({
   );
   const extraClasses = getExtraClasses();
 
+  useEffect(() => {
+    if (isHighlighted) {
+      const element = document.getElementById(index.toString());
+      element?.scrollIntoView?.({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'start',
+      });
+    }
+  }, [index, isHighlighted]);
+
   return (
     <div
       id={index.toString()}

diff --git a/packages/design-system/src/components/table/components/tableBody/tests/bodyRow.tsx b/packages/design-system/src/components/table/components/tableBody/tests/bodyRow.tsx
@@ -116,4 +116,29 @@ describe('BodyRow', () => {
     expect(BodyRowProp.onRowClick).toHaveBeenCalled();
     expect(BodyRowProp.isRowFocused).toBe(true);
   });
+
+  it('should autoscroll to the highlighted row', () => {
+    globalThis.document.getElementById = jest.fn(() => ({
+      scrollIntoView: jest.fn(),
+    }));
+
+    BodyRowProp.row.originalData.highlighted = true;
+
+    render(
+      <BodyRow
+        index={0}
+        // @ts-ignore
+        row={BodyRowProp.row}
+        columns={BodyRowProp.columns}
+        selectedKey={BodyRowProp.selectedKey}
+        getRowObjectKey={BodyRowProp.getRowObjectKey}
+        getExtraClasses={() => ''}
+        isRowFocused={BodyRowProp.isRowFocused}
+        onRowClick={BodyRowProp.onRowClick}
+        onKeyDown={BodyRowProp.onKeyDown}
+      />
+    );
+
+    expect(globalThis.document.getElementById).toHaveBeenCalled();
+  });
 });
diff --git a/packages/design-system/src/test-data/cookieTableMockData.tsx b/packages/design-system/src/test-data/cookieTableMockData.tsx
@@ -55,7 +55,7 @@ export const originalData = [
     // @ts-ignore
     isCookieSet: false,
     frameUrls: 'https://psanalysis.rt.gw',
-    highlighted: true,
+    highlighted: false,
   },
   {
     parsedCookie: {

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/bubbles.js b/packages/explorable-explanations/src/protectedAudience/modules/bubbles.js
@@ -499,6 +499,7 @@ bubbles.bubbleChart = (
   const eventHandler = (event, d) => {
     app.setHighlightedInterestGroup({
       interestGroupName: titles[d.data].split('\n')[0],
+      interestGroupOwner: 'https://www.' + groups[d.data],
       color: app.color(groups[d.data]),
     });
     event.stopPropagation();

diff --git a/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx b/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx
@@ -166,6 +166,7 @@ const ExplorableExplanation = () => {
 
   const [highlightedInterestGroup, setHighlightedInterestGroup] = useState<{
     interestGroupName: string;
+    interestGroupOwner: string;
     color: string;
   } | null>(null);
 
@@ -245,6 +246,7 @@ const ExplorableExplanation = () => {
         interactiveMode={interactiveMode}
         info={info}
         setInfo={setInfo}
+        highlightedInterestGroup={highlightedInterestGroup}
         setHighlightedInterestGroup={setHighlightedInterestGroup}
         isMultiSeller={isMultiSeller}
         setIsMultiSeller={setIsMultiSeller}

diff --git a/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx b/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx
@@ -48,9 +48,15 @@ declare module 'react' {
 interface PanelProps {
   setCurrentSite: (siteData: CurrentSiteData | null) => void;
   currentSiteData: CurrentSiteData | null;
+  highlightedInterestGroup: {
+    interestGroupName: string;
+    interestGroupOwner: string;
+    color: string;
+  } | null;
   setHighlightedInterestGroup: React.Dispatch<
     React.SetStateAction<{
       interestGroupName: string;
+      interestGroupOwner: string;
       color: string;
     } | null>
   >;
@@ -65,6 +71,7 @@ interface PanelProps {
 const Panel = ({
   currentSiteData,
   setCurrentSite,
+  highlightedInterestGroup,
   setHighlightedInterestGroup,
   isMultiSeller,
   setIsMultiSeller,
@@ -108,6 +115,12 @@ const Panel = ({
     setActiveTab: actions.setActiveTab,
   }));
 
+  useEffect(() => {
+    if (highlightedInterestGroup) {
+      setActiveTab(0);
+    }
+  }, [highlightedInterestGroup, setActiveTab]);
+
   useEffect(() => {
     if (info) {
       setActiveTab(3);

diff --git a/...onents/privateAdvertising/protectedAudience/explorableExplanation/tableTabPanels/info.tsx b/...onents/privateAdvertising/protectedAudience/explorableExplanation/tableTabPanels/info.tsx
@@ -24,20 +24,18 @@ interface InfoProps {
     description?: string;
     info: string;
     key: number;
-  };
+  } | null;
 }
 
 const Info = ({ data }: InfoProps) => {
-  const { title, description, info } = data;
-
   return (
     <div className="flex-1 text-raisin-black dark:text-bright-gray border border-gray-300 dark:border-quartz shadow h-full w-full min-w-[10rem] bg-white dark:bg-raisin-black overflow-auto">
-      {info ? (
+      {data?.info ? (
         <div className="p-2">
           <h3 className="text-sm font-medium">
-            {title + ' ' + (description || '')}
+            {data?.title + ' ' + (data?.description || '')}
           </h3>
-          <div className="text-[12.5px] mt-1">{info}</div>
+          <div className="text-[12.5px] mt-1">{data?.info}</div>
         </div>
       ) : (
         <div className="h-full box-border p-8 flex items-center">

diff --git a/...rc/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx b/...rc/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx
@@ -38,6 +38,7 @@ interface InterestGroupsProps {
   interestGroupDetails: InterestGroupsType[];
   highlightedInterestGroup?: {
     interestGroupName: string;
+    interestGroupOwner: string;
     color: string;
   } | null;
 }
@@ -124,7 +125,9 @@ const IGTable = ({
 
     return interestGroupDetails.map((interestGroup) => {
       const isHighlighted =
-        interestGroup.name === highlightedInterestGroup.interestGroupName;
+        interestGroup.name === highlightedInterestGroup.interestGroupName &&
+        new URL(interestGroup?.ownerOrigin || '').host ===
+          new URL(highlightedInterestGroup?.interestGroupOwner || '').host;
 
       return {
         ...interestGroup,