Enhancement: Update synthetic data for distinction (#918)

* Add new publisher node, update data for branches, and add more ad unit code * Add pub3 and update the config for auction table * Add prop for passing date from parent * Differentiate ssp title and urls * Move publisher related data to config and create single object, and use it --------- Co-authored-by: sayedtaqui <[email protected]>
GoogleChromeLabs · Jan 25, 2025 · 692e457 · 692e457
1 parent 3a8418a
commit 692e457
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 54 deletions.
diff --git a/packages/explorable-explanations/src/index.js b/packages/explorable-explanations/src/index.js
@@ -20,4 +20,7 @@ export {
   interestGroupSketch,
   sketch,
 } from './protectedAudience';
-export { default as config } from './protectedAudience/config.js';
+export {
+  default as config,
+  publisherData,
+} from './protectedAudience/config.js';
diff --git a/packages/explorable-explanations/src/protectedAudience/config.js b/packages/explorable-explanations/src/protectedAudience/config.js
@@ -104,6 +104,13 @@ const config = {
         visited: false,
         visitedIndex: null,
       },
+      {
+        type: 'publisher',
+        website: 'pub3.com',
+        datetime: '2023-10-01 16:00',
+        visited: false,
+        visitedIndex: null,
+      },
     ],
     colors: {
       visitedBlue: '#1A73E8',
@@ -138,3 +145,45 @@ const config = {
 };
 
 export default config;
+
+export const publisherData = {
+  'pub1.com': {
+    branches: [
+      { date: 'Sun, 01 October 2023', time: '12:00:00 GMT', type: 'datetime' },
+      { date: 'Sun, 01 October 2023', time: '12:01:00 GMT', type: 'datetime' },
+      { date: 'Sun, 01 October 2023', time: '12:02:00 GMT', type: 'datetime' },
+    ],
+    adunits: ['div-200-1', 'div-200-2', 'div-200-3'],
+    ssps: [
+      ['SSP A', 'https://ssp-a.com'],
+      ['SSP B', 'https://ssp-b.com'],
+      ['SSP C', 'https://ssp-c.com'],
+    ],
+  },
+  'pub2.com': {
+    branches: [
+      { date: 'Sun, 01 October 2023', time: '14:00:00 GMT', type: 'datetime' },
+      { date: 'Sun, 01 October 2023', time: '14:01:00 GMT', type: 'datetime' },
+      { date: 'Sun, 01 October 2023', time: '14:02:00 GMT', type: 'datetime' },
+    ],
+    adunits: ['div-400-1', 'div-400-2', 'div-400-3'],
+    ssps: [
+      ['SSP D', 'https://ssp-d.com'],
+      ['SSP E', 'https://ssp-e.com'],
+      ['SSP F', 'https://ssp-f.com'],
+    ],
+  },
+  'pub3.com': {
+    branches: [
+      { date: 'Sun, 01 October 2023', time: '16:00:00 GMT', type: 'datetime' },
+      { date: 'Sun, 01 October 2023', time: '16:01:00 GMT', type: 'datetime' },
+      { date: 'Sun, 01 October 2023', time: '16:02:00 GMT', type: 'datetime' },
+    ],
+    adunits: ['div-600-1', 'div-600-2', 'div-600-3'],
+    ssps: [
+      ['SSP G', 'https://ssp-g.com'],
+      ['SSP H', 'https://ssp-h.com'],
+      ['SSP I', 'https://ssp-i.com'],
+    ],
+  },
+};
diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/index.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/index.js
@@ -70,7 +70,7 @@ auction.setUp = (index) => {
   if (app.isMultiSeller) {
     setUpMultiSellerFirstSSPTagFlow(steps);
     setUpPublisherAdServerFlow(steps);
-    setUpComponentAuctions(steps);
+    setUpComponentAuctions(steps, index);
   } else {
     setUpSingleSellerFirstSSPTagFlow(steps);
     setUpRunadAuction(steps);

diff --git a/...xplanations/src/protectedAudience/modules/auctions/multi-seller/setUpComponentAuctions.js b/...xplanations/src/protectedAudience/modules/auctions/multi-seller/setUpComponentAuctions.js
@@ -17,7 +17,7 @@
  * Internal dependencies.
  */
 import app from '../../../app';
-import config from '../../../config';
+import config, { publisherData } from '../../../config';
 import { Box, ProgressLine, Text, Custom } from '../../../components';
 import setUpRunadAuction from '../setUpRunadAuction';
 
@@ -29,8 +29,9 @@ const BOX_COLUMN_MARGIN = 390;
 
 const boxCordinates = {};
 
-const setUpComponentAuctions = (steps) => {
+const setUpComponentAuctions = (steps, index) => {
   const { box } = config.flow;
+  const publisher = config.timeline.circles[index].website;
 
   steps.push({
     component: ProgressLine,
@@ -76,7 +77,7 @@ const setUpComponentAuctions = (steps) => {
         BORDER_BOX_MARGIN * 2 +
         20,
       y: () => app.auction.nextTipCoordinates?.y - 225 - 15,
-      ssp: 'SSP A',
+      ssp: publisherData[publisher].ssps[0][0],
       config: {
         bidValue: '$10',
       },
@@ -89,7 +90,7 @@ const setUpComponentAuctions = (steps) => {
         BOX_HEIGHT +
         BORDER_BOX_MARGIN * 2 +
         15,
-      ssp: 'SSP B',
+      ssp: publisherData[publisher].ssps[1][0],
       config: {
         bidValue: '$8',
       },
@@ -102,19 +103,19 @@ const setUpComponentAuctions = (steps) => {
         BOX_HEIGHT +
         BORDER_BOX_MARGIN * 2 +
         15,
-      ssp: 'SSP C',
+      ssp: publisherData[publisher].ssps[2][0],
       config: {
         bidValue: '$6',
       },
     },
   ];
 
-  componentAuctions.forEach((componentAuction, index) => {
+  componentAuctions.forEach((componentAuction, idx) => {
     setUpComponentAuction(
       steps,
       componentAuction,
       componentAuction.config,
-      index
+      idx
     );
   });
 

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js
@@ -17,13 +17,14 @@
  * Internal dependencies.
  */
 import app from '../../app';
-import config from '../../config';
+import config, { publisherData } from '../../config';
 import flow from '../flow';
 import { Branches } from '../../components';
 
 const setUpAdUnitCode = (steps, index) => {
   const { colors } = config.flow;
   const { x, y } = flow.getTimelineCircleCoordinates(index);
+  const publisher = config.timeline.circles[index].website;
 
   // Setup Ad unit codes
   steps.push({
@@ -35,19 +36,19 @@ const setUpAdUnitCode = (steps, index) => {
       branches: [
         {
           title: 'adunit-code',
-          description: 'div-200-1',
+          description: publisherData[publisher].adunits[0],
           type: 'box',
           color: colors.box.browser,
         },
         {
           title: 'adunit-code',
-          description: 'div-200-2',
+          description: publisherData[publisher].adunits[1],
           type: 'box',
           color: colors.box.browser,
         },
         {
           title: 'adunit-code',
-          description: 'div-200-3',
+          description: publisherData[publisher].adunits[2],
           type: 'box',
           color: colors.box.browser,
         },

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js
@@ -18,8 +18,11 @@
  */
 import app from '../../app';
 import { Branches } from '../../components';
+import config, { publisherData } from '../../config';
 
 const setupBranches = (steps, index) => {
+  const publisher = config.timeline.circles[index].website;
+
   steps.push({
     component: Branches,
     props: {
@@ -28,18 +31,18 @@ const setupBranches = (steps, index) => {
       currentIndex: index,
       branches: [
         {
-          date: 'Sun, 01 October 2023',
-          time: '6:30:00 GMT',
+          date: publisherData[publisher].branches[0].date,
+          time: publisherData[publisher].branches[0].time,
           type: 'datetime',
         },
         {
-          date: 'Sun, 01 October 2023',
-          time: '6:31:00 GMT',
+          date: publisherData[publisher].branches[1].date,
+          time: publisherData[publisher].branches[1].time,
           type: 'datetime',
         },
         {
-          date: 'Sun, 01 October 2023',
-          time: '6:32:00 GMT',
+          date: publisherData[publisher].branches[2].date,
+          time: publisherData[publisher].branches[2].time,
           type: 'datetime',
         },
       ],

diff --git a/...rc/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx b/...rc/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx
@@ -90,6 +90,7 @@ const AuctionPanel = ({
                   props: {
                     auctionEvents: events,
                     parentOrigin: events[0]?.auctionConfig?.seller,
+                    startDate: time,
                   },
                 },
                 children: {},
@@ -114,6 +115,7 @@ const AuctionPanel = ({
                 parentOrigin:
                   auctionEventsData[adUnit][time][sellerUrl][sellerUrl][0]
                     ?.auctionConfig?.seller,
+                startDate: time,
               },
             },
             children,

diff --git a/...rc/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx b/...rc/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx
@@ -36,11 +36,13 @@ import BottomTray from './bottomTray';
 interface AuctionTableProps {
   auctionEvents: singleAuctionEvent[];
   parentOrigin?: string;
+  startDate?: string;
 }
 
 const AuctionTable = ({
   auctionEvents,
   parentOrigin = '',
+  startDate = '',
 }: AuctionTableProps) => {
   const [selectedJSON, setSelectedJSON] = useState<singleAuctionEvent | null>(
     null
@@ -179,7 +181,11 @@ const AuctionTable = ({
       >
         <div className="flex justify-between items-center p-2">
           <p>Started by: {auctionEvents?.[0]?.auctionConfig?.seller}</p>
-          <p>{new Date(auctionEvents?.[0]?.time * 1000 || '').toUTCString()}</p>
+          <p>
+            {startDate
+              ? startDate
+              : new Date(auctionEvents?.[0]?.time * 1000 || '').toUTCString()}
+          </p>
         </div>
         <div className="flex-1 border border-american-silver dark:border-quartz overflow-auto">
           <TableProvider