From edf11267ed63af181b9f85577bcd4e6f0a9d8fdd Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 17 Jan 2025 12:39:34 +0530 Subject: [PATCH 1/8] Fix replacer function. --- .../auctionEventTransformers.ts | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts index bc44d5049..196a9089d 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts @@ -45,20 +45,22 @@ export const transformAuctionConfig = (seller: string) => { //Using structured clone since it was seen while using normal assignment it didnt change the object properties. const eventAuctionConfig = structuredClone(SYNTHETIC_AUCTION_CONFIG); - eventAuctionConfig.decisionLogicURL.replace( - 'privacysandboxdemos-seller.domain-aaa', - seller - ); + eventAuctionConfig.decisionLogicURL = + eventAuctionConfig.decisionLogicURL.replace( + 'privacysandboxdemos-seller.domain-aaa.com', + seller + ); - eventAuctionConfig.seller.replace( - 'privacysandboxdemos-seller.domain-aaa', + eventAuctionConfig.seller = eventAuctionConfig.seller.replace( + 'privacysandboxdemos-seller.domain-aaa.com', seller ); - eventAuctionConfig.trustedScoringSignalsURL.replace( - 'privacysandboxdemos-seller.domain-aaa', - seller - ); + eventAuctionConfig.trustedScoringSignalsURL = + eventAuctionConfig.trustedScoringSignalsURL.replace( + 'privacysandboxdemos-seller.domain-aaa.com', + seller + ); return eventAuctionConfig; }; From 7c0ec4d16005d23c5b8624611c882a6e2254adb5 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Fri, 17 Jan 2025 12:46:01 +0530 Subject: [PATCH 2/8] Uplift multiseller state --- .../protectedAudience/explorableExplanation/index.tsx | 4 ++++ .../protectedAudience/explorableExplanation/panel.tsx | 10 ++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx index 92a3e4797..94eb655e6 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx @@ -46,6 +46,8 @@ const ExplorableExplanation = () => { const [currentSiteData, setCurrentSiteData] = useState(null); + const [isMultiSeller, setIsMultiSeller] = useState(false); + const [sitesVisited, setSitesVisited] = useState([]); const interestGroupsRef = useRef([]); @@ -259,6 +261,8 @@ const ExplorableExplanation = () => { ); diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx index 5b113ef46..53f58dbbb 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx @@ -48,14 +48,20 @@ declare module 'react' { interface PanelProps { setCurrentSite: React.Dispatch>; currentSiteData: CurrentSiteData | null; + isMultiSeller: boolean; + setIsMultiSeller: React.Dispatch>; } -const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => { +const Panel = ({ + currentSiteData, + setCurrentSite, + isMultiSeller, + setIsMultiSeller, +}: PanelProps) => { const [play, setPlay] = useState(true); const [sliderStep, setSliderStep] = useState(1); const [interactiveMode, _setInteractiveMode] = useState(false); const [autoExpand, setAutoExpand] = useState(true); - const [isMultiSeller, setIsMultiSeller] = useState(false); const historyCount = 8; const divRef = useRef(null); const containerRef = useRef(null); From 772ad4c8df38ea267c8e44cd730bdb665a9ac0f7 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Fri, 17 Jan 2025 13:25:20 +0530 Subject: [PATCH 3/8] Memoise data for unnecessary side effects --- .../protectedAudience/auctions/index.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx index e96a71419..4b1626f26 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx @@ -16,7 +16,7 @@ /** * External dependencies. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { SIDEBAR_ITEMS_KEYS, useSidebar, @@ -65,6 +65,12 @@ const Auctions = () => { updateSelectedItemKey: actions.updateSelectedItemKey, })); + const auctionData = useMemo(() => { + return { + auctionData: auctionEvents, + }; + }, [auctionEvents]); + if (!isUsingCDP) { return (
@@ -102,9 +108,7 @@ const Auctions = () => {
From 428768ec272b0fd19acb407882d16f40d5847282 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 17 Jan 2025 13:43:36 +0530 Subject: [PATCH 4/8] Add auction events for multi-seller. --- .../protectedAudience/auctions/container.tsx | 2 +- .../auctions/panel/index.tsx | 1 - .../auctionEventTransformers.ts | 138 +++++++++++++++++- .../explorableExplanation/auctions.tsx | 2 +- .../explorableExplanation/constants.ts | 14 +- .../explorableExplanation/index.tsx | 131 ++--------------- 6 files changed, 159 insertions(+), 129 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx index 6095aa6e4..9472f3bc7 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx @@ -29,7 +29,7 @@ import React from 'react'; */ import AuctionPanel from './panel'; import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; -import type { AdUnitLiteral } from '../explorableExplanation'; +import type { AdUnitLiteral } from '../explorableExplanation/auctionEventTransformers'; interface AuctionsContainerProps { auctionEvents: { diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx index 8cd1f65c3..a35340b72 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx @@ -78,7 +78,6 @@ const AuctionPanel = ({ ...adUnitChildren[time]?.children, } as SidebarItems; const sellerUrl = Object.keys(auctionEventsData[adUnit][time])[0]; - const entries = Object.entries( auctionEventsData[adUnit][time][sellerUrl] ) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts index 196a9089d..6fc1a79ae 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts @@ -30,6 +30,18 @@ import { } from './constants'; import formatTime from '../../../../../../store/utils/formatTime'; +export interface CurrentSiteData { + type: 'advertiser' | 'publisher'; + website: string; + datetime: string; + igGroupsCount: number; + interestGroups: string[]; + visited: boolean; + visitedIndex: boolean; +} + +export type AdUnitLiteral = 'div-200-1' | 'div-200-2' | 'div-200-3'; + const getRandomisedNumbers = (count: number, min: number, max: number) => { const randomNumbers = Array.from( { length: count }, @@ -86,7 +98,8 @@ export const transformFetchingEvents = ( eventToModify.type = 'Finished Fetch ' + eventName; eventToModify.auctionConfig = transformAuctionConfig(seller); - eventToModify.eventType = 'interestGroupAuctionNetworkRequestCompleted'; + eventToModify.eventType = + 'interestGroupAuctionNetworkRequestCompleted' as singleAuctionEvent['eventType']; fetchEventsToBeReturned.push(eventToModify); }); @@ -100,7 +113,8 @@ export const transformFetchingEvents = ( eventToModify.type = 'Start Fetch ' + eventName; - eventToModify.eventType = 'interestGroupAuctionNetworkRequestCreated'; + eventToModify.eventType = + 'interestGroupAuctionNetworkRequestCreated' as singleAuctionEvent['eventType']; fetchEventsToBeReturned.push(eventToModify); }); @@ -216,7 +230,7 @@ export const createAuctionEvents = ( time: 1734076670.129756, bid: bidEvents[bidEvents.length - 1].bid, bidCurrency: bidEvents[bidEvents.length - 1].bidCurrency, - eventType: 'interestGroupAccessed', + eventType: 'interestGroupAccessed' as singleAuctionEvent['eventType'], }, transformFetchingEvents( advertisers, @@ -247,3 +261,121 @@ export const createAuctionEvents = ( const randomIntFromInterval = (min: number, max: number) => { return Math.floor(Math.random() * (max - min + 1) + min); }; + +const getBidData = ( + auctionData: { [key: string]: singleAuctionEvent[] }, + sellers: string[] +) => { + const bidsArray: singleAuctionEvent[] = []; + + sellers.forEach((seller) => { + bidsArray.push( + ...(auctionData[seller]?.filter((event) => event.type === 'bid') ?? []) + ); + }); + + return bidsArray; +}; + +const getFlattenedAuctionEvents = ( + sellersArray: string[], + currentSiteData: CurrentSiteData, + interestGroups: { + interestGroupName: string; + ownerOrigin: string; + }[], + advertisers: string[] +) => { + const events: { [key: string]: singleAuctionEvent[] } = {}; + + sellersArray.forEach((seller) => { + events[seller] = createAuctionEvents( + interestGroups, + seller, + advertisers, + new Date(currentSiteData?.datetime).getTime() + ); + }); + + return events; +}; + +export const configuredAuctionEvents = ( + interestGroups: { + interestGroupName: string; + ownerOrigin: string; + }[], + advertisers: string[], + isMultiSeller: boolean, + currentSiteData: CurrentSiteData +) => { + const dateTimeString = new Date(currentSiteData?.datetime).toUTCString(); + const websiteString = `https://www.${currentSiteData?.website}`; + const sellersArray = []; + + if (isMultiSeller) { + sellersArray.push( + 'https://ssp-a.com', + 'https://ssp-b.com', + 'https://ssp-c.com' + ); + } else { + sellersArray.push(websiteString); + } + + const auctionData = { + 'div-200-1': { + [dateTimeString]: { + [websiteString]: getFlattenedAuctionEvents( + sellersArray, + currentSiteData, + interestGroups, + advertisers + ), + }, + }, + 'div-200-2': { + [dateTimeString]: { + [websiteString]: getFlattenedAuctionEvents( + sellersArray, + currentSiteData, + interestGroups, + advertisers + ), + }, + }, + 'div-200-3': { + [dateTimeString]: { + [websiteString]: getFlattenedAuctionEvents( + sellersArray, + currentSiteData, + interestGroups, + advertisers + ), + }, + }, + }; + + const receivedBids = { + 'div-200-1': getBidData( + auctionData['div-200-1']?.[dateTimeString]?.[websiteString], + sellersArray + ), + 'div-200-2': getBidData( + auctionData['div-200-2']?.[dateTimeString]?.[websiteString], + sellersArray + ), + 'div-200-3': getBidData( + auctionData['div-200-3']?.[dateTimeString]?.[websiteString], + sellersArray + ), + }; + + const winningBids = {}; + + return { + auctionData, + receivedBids, + winningBids, + }; +}; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctions.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctions.tsx index 4f6f8ea30..aba66075f 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctions.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctions.tsx @@ -30,7 +30,7 @@ import type { import AdUnitsPanel from '../adUnits/panel'; import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; import AuctionsContainer from '../auctions/container'; -import type { AdUnitLiteral } from '.'; +import type { AdUnitLiteral } from './auctionEventTransformers'; interface AuctionsProps { auctionEvents: { diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/constants.ts b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/constants.ts index 5470c812f..baf101571 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/constants.ts +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/constants.ts @@ -16,7 +16,7 @@ /** * External dependencies */ -import type { InterestGroups } from '@google-psat/common'; +import type { InterestGroups, singleAuctionEvent } from '@google-psat/common'; interface WebsiteInterestGroup { [websiteName: string]: InterestGroups[]; @@ -876,14 +876,14 @@ export const SYNTHETIC_INTEREST_GROUPS: WebsiteInterestGroup = { ], }; -export const SYNTHETIC_AUCTION_EVENT_STARTED = { +export const SYNTHETIC_AUCTION_EVENT_STARTED: singleAuctionEvent = { uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', type: 'started', formattedTime: '0 ms', time: 1734076669.500694, eventType: 'interestGroupAuctionEventOccurred', }; -export const SYNTHETIC_AUCTION_EVENT_CONFIG_RESOLVED = { +export const SYNTHETIC_AUCTION_EVENT_CONFIG_RESOLVED: singleAuctionEvent = { uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', type: 'configResolved', formattedTime: '0.75ms', @@ -891,7 +891,7 @@ export const SYNTHETIC_AUCTION_EVENT_CONFIG_RESOLVED = { eventType: 'interestGroupAuctionEventOccurred', }; -export const SYNTHETIC_AUCTION_EVENT_LOADED = { +export const SYNTHETIC_AUCTION_EVENT_LOADED: singleAuctionEvent = { uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', name: 'shoes', ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', @@ -901,7 +901,7 @@ export const SYNTHETIC_AUCTION_EVENT_LOADED = { eventType: 'interestGroupAccessed', }; -export const SYNTHETIC_AUCTION_EVENT_BIDDERJS = { +export const SYNTHETIC_AUCTION_EVENT_BIDDERJS: singleAuctionEvent = { uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', formattedTime: '77.17ms', type: 'Start fetch bidderJs', @@ -909,7 +909,7 @@ export const SYNTHETIC_AUCTION_EVENT_BIDDERJS = { eventType: 'interestGroupAuctionNetworkRequestCreated', }; -export const SYNTHETIC_AUCTION_EVENTS_BID = { +export const SYNTHETIC_AUCTION_EVENTS_BID: singleAuctionEvent = { uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', name: 'shoes', ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', @@ -921,7 +921,7 @@ export const SYNTHETIC_AUCTION_EVENTS_BID = { bidCurrency: 'USD', }; -export const SYNTHETIC_AUCTION_EVENTS_WIN = { +export const SYNTHETIC_AUCTION_EVENTS_WIN: singleAuctionEvent = { uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', name: 'shoes', ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx index 92a3e4797..0e15be7ef 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx @@ -27,21 +27,14 @@ import IGTable from '../interestGroups/table'; import Auctions from './auctions'; import { SYNTHETIC_INTEREST_GROUPS } from './constants'; import type { InterestGroups } from '@google-psat/common'; -import { createAuctionEvents } from './auctionEventTransformers'; +import { + configuredAuctionEvents, + type CurrentSiteData, + type AdUnitLiteral, +} from './auctionEventTransformers'; import InfoPanel from './infoPanel'; import BidsPanel from '../bids/panel'; -export interface CurrentSiteData { - type: 'advertiser' | 'publisher'; - website: string; - datetime: string; - igGroupsCount: number; - interestGroups: string[]; - visited: boolean; - visitedIndex: boolean; -} -export type AdUnitLiteral = 'div-200-1' | 'div-200-2' | 'div-200-3'; - const ExplorableExplanation = () => { const [currentSiteData, setCurrentSiteData] = useState(null); @@ -75,114 +68,20 @@ const ExplorableExplanation = () => { }); }); - const dateTimeString = new Date(currentSiteData?.datetime).toUTCString(); - const websiteString = `https://www.${currentSiteData?.website}`; - - const auctionData = { - 'div-200-1': { - [dateTimeString]: { - [websiteString]: { - [websiteString]: createAuctionEvents( - interestGroups.flat(), - currentSiteData?.website, - Array.from(advertiserSet), - new Date(currentSiteData?.datetime).getTime() - ), - }, - }, - }, - 'div-200-2': { - [dateTimeString]: { - [websiteString]: { - [websiteString]: createAuctionEvents( - interestGroups.flat(), - currentSiteData?.website, - Array.from(advertiserSet), - new Date(currentSiteData?.datetime).getTime() - ), - }, - }, - }, - 'div-200-3': { - [dateTimeString]: { - [websiteString]: { - [websiteString]: createAuctionEvents( - interestGroups.flat(), - currentSiteData?.website, - Array.from(advertiserSet), - new Date(currentSiteData?.datetime).getTime() - ), - }, - }, - }, - }; + const { auctionData, receivedBids, winningBids } = configuredAuctionEvents( + interestGroups.flat(), + Array.from(advertiserSet), + true, + currentSiteData + ); return { auctionData, - receivedBids: { - 'div-200-1': - auctionData['div-200-1']?.[dateTimeString]?.[websiteString]?.[ - websiteString - ].filter((event) => event.type === 'bid') ?? [], - 'div-200-2': - auctionData['div-200-2']?.[dateTimeString]?.[websiteString]?.[ - websiteString - ].filter((event) => event.type === 'bid') ?? [], - 'div-200-3': - auctionData['div-200-3']?.[dateTimeString]?.[websiteString]?.[ - websiteString - ].filter((event) => event.type === 'bid') ?? [], - }, + receivedBids, + winningBids, }; }, [currentSiteData, sitesVisited]); - const customAdsAndBidders = useMemo(() => { - if (!currentSiteData || currentSiteData?.type === 'advertiser') { - return {}; - } - - const currentWebsite = `https://www.${currentSiteData?.website}`; - - return { - 'div-200-1': { - adUnitCode: 'div-200-1', - bidders: ['DSP 1', 'DSP 2'], - mediaContainerSize: [[320, 320]], - winningBid: auctionsData.auctionData?.['div-200-1']?.[ - new Date(currentSiteData?.datetime).toUTCString() - ]?.[currentWebsite]?.[currentWebsite].filter( - ({ type }) => type === 'win' - )?.[0]?.bid, - bidCurrency: 'USD', - winningBidder: 'DSP 1', - }, - 'div-200-2': { - adUnitCode: 'div-200-2', - bidders: ['DSP 1', 'DSP 2'], - mediaContainerSize: [[320, 320]], - winningBid: auctionsData.auctionData?.['div-200-2']?.[ - new Date(currentSiteData?.datetime).toUTCString() - ]?.[currentWebsite]?.[currentWebsite].filter( - ({ type }) => type === 'win' - )?.[0]?.bid, - bidCurrency: 'USD', - winningBidder: 'DSP 1', - }, - 'div-200-3': { - adUnitCode: 'div-200-3', - bidders: ['DSP 1', 'DSP 2'], - mediaContainerSize: [[320, 320]], - winningBid: auctionsData.auctionData?.['div-200-3']?.[ - new Date(currentSiteData?.datetime).toUTCString() - ]?.[currentWebsite]?.[currentWebsite].filter( - ({ type }) => type === 'win' - )?.[0]?.bid, - bidCurrency: 'USD', - winningBidder: 'DSP 2', - }, - }; - }, [auctionsData, currentSiteData]); - const interestGroupData = useMemo(() => { if (!currentSiteData || currentSiteData?.type === 'publisher') { return interestGroupsRef.current; @@ -221,7 +120,7 @@ const ExplorableExplanation = () => { auctionEvents: { ...auctionsData, }, - customAdsAndBidders: customAdsAndBidders, + customAdsAndBidders: auctionsData.winningBids, }, }, }, @@ -251,7 +150,7 @@ const ExplorableExplanation = () => { }, }, ], - [auctionsData, customAdsAndBidders, interestGroupData] + [auctionsData, interestGroupData] ); return ( From 1717037b4260265c2c226275d5ec272bc2be7e91 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 17 Jan 2025 13:46:16 +0530 Subject: [PATCH 5/8] Use state instead of constant. --- .../protectedAudience/explorableExplanation/index.tsx | 4 ++-- .../protectedAudience/explorableExplanation/panel.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx index 6f1bbcf47..b00085ea5 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx @@ -73,7 +73,7 @@ const ExplorableExplanation = () => { const { auctionData, receivedBids, winningBids } = configuredAuctionEvents( interestGroups.flat(), Array.from(advertiserSet), - true, + isMultiSeller, currentSiteData ); @@ -82,7 +82,7 @@ const ExplorableExplanation = () => { receivedBids, winningBids, }; - }, [currentSiteData, sitesVisited]); + }, [currentSiteData, sitesVisited, isMultiSeller]); const interestGroupData = useMemo(() => { if (!currentSiteData || currentSiteData?.type === 'publisher') { diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx index 53f58dbbb..10315cc94 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx @@ -38,7 +38,7 @@ import { useTabs } from '@google-psat/design-system'; */ import Header from '../../../explorableExplanation/header'; import TableTray from '../../../explorableExplanation/tableTray'; -import type { CurrentSiteData } from '.'; +import type { CurrentSiteData } from './auctionEventTransformers'; declare module 'react' { interface CSSProperties { From afe90d8fe26da6d46378c6f71e44d0712741eb71 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 17 Jan 2025 14:14:05 +0530 Subject: [PATCH 6/8] Fix transformer. --- .../auctions/panel/index.tsx | 2 +- .../auctionEventTransformers.ts | 69 ++++++++++++++++--- .../explorableExplanation/index.tsx | 17 ++--- 3 files changed, 68 insertions(+), 20 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx index a35340b72..3e969ff66 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx @@ -36,7 +36,7 @@ import type { AuctionEventsType } from '../../../../../stateProviders/protectedA import AuctionTable from '../table'; import AdunitPanel from '../adunitPanel'; import AdunitSubPanel from '../adunitPanel/panel'; -import type { AdUnitLiteral } from '../../explorableExplanation'; +import type { AdUnitLiteral } from '../../explorableExplanation/auctionEventTransformers'; interface AuctionPanelProps { auctionEvents: { diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts index 6fc1a79ae..881bc15a5 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts @@ -163,7 +163,8 @@ export const transformBidEvent = ( interestGroups: { interestGroupName: string; ownerOrigin: string; - }[] + }[], + isTopLevel: boolean ) => { const bidEventsToBeReturned: singleAuctionEvent[] = []; @@ -176,6 +177,10 @@ export const transformBidEvent = ( eventToModify.name = interestGroupName; eventToModify.bid = randomIntFromInterval(1, 100); + if (isTopLevel) { + eventToModify.type = 'topLevelBid'; + } + bidEventsToBeReturned.push(eventToModify); }); @@ -189,9 +194,10 @@ export const createAuctionEvents = ( }[], seller: string, advertisers: string[], - eventStartTime: number + eventStartTime: number, + isTopLevelBid: boolean ) => { - const bidEvents = transformBidEvent(interestGroups); + const bidEvents = transformBidEvent(interestGroups, isTopLevelBid); bidEvents.sort((a, b) => (a?.bid ?? 0) - (b?.bid ?? 0)); @@ -284,16 +290,19 @@ const getFlattenedAuctionEvents = ( interestGroupName: string; ownerOrigin: string; }[], - advertisers: string[] + advertisers: string[], + isMultiSeller: boolean ) => { const events: { [key: string]: singleAuctionEvent[] } = {}; + const host = new URL(`https://www.${currentSiteData?.website}`).host; sellersArray.forEach((seller) => { events[seller] = createAuctionEvents( interestGroups, - seller, + new URL(seller).host, advertisers, - new Date(currentSiteData?.datetime).getTime() + new Date(currentSiteData?.datetime).getTime(), + new URL(seller).host === host && isMultiSeller ); }); @@ -315,6 +324,7 @@ export const configuredAuctionEvents = ( if (isMultiSeller) { sellersArray.push( + websiteString, 'https://ssp-a.com', 'https://ssp-b.com', 'https://ssp-c.com' @@ -330,7 +340,8 @@ export const configuredAuctionEvents = ( sellersArray, currentSiteData, interestGroups, - advertisers + advertisers, + isMultiSeller ), }, }, @@ -340,7 +351,8 @@ export const configuredAuctionEvents = ( sellersArray, currentSiteData, interestGroups, - advertisers + advertisers, + isMultiSeller ), }, }, @@ -350,7 +362,8 @@ export const configuredAuctionEvents = ( sellersArray, currentSiteData, interestGroups, - advertisers + advertisers, + isMultiSeller ), }, }, @@ -371,11 +384,45 @@ export const configuredAuctionEvents = ( ), }; - const winningBids = {}; + const adsAndBidders = { + 'div-200-1': { + adUnitCode: 'div-200-1', + bidders: sellersArray, + mediaContainerSize: [[320, 320]], + winningBid: getBidData( + auctionData['div-200-1']?.[dateTimeString]?.[websiteString], + sellersArray + ).filter(({ type }) => type === 'win')?.[0]?.bid, + bidCurrency: 'USD', + winningBidder: 'DSP 1', + }, + 'div-200-2': { + adUnitCode: 'div-200-2', + bidders: sellersArray, + mediaContainerSize: [[320, 320]], + winningBid: getBidData( + auctionData['div-200-2']?.[dateTimeString]?.[websiteString], + sellersArray + ).filter(({ type }) => type === 'win')?.[0]?.bid, + bidCurrency: 'USD', + winningBidder: 'DSP 1', + }, + 'div-200-3': { + adUnitCode: 'div-200-2', + bidders: sellersArray, + mediaContainerSize: [[320, 320]], + winningBid: getBidData( + auctionData['div-200-3']?.[dateTimeString]?.[websiteString], + sellersArray + ).filter(({ type }) => type === 'win')?.[0]?.bid, + bidCurrency: 'USD', + winningBidder: 'DSP 1', + }, + }; return { auctionData, receivedBids, - winningBids, + adsAndBidders, }; }; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx index b00085ea5..69b51570e 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx @@ -70,17 +70,18 @@ const ExplorableExplanation = () => { }); }); - const { auctionData, receivedBids, winningBids } = configuredAuctionEvents( - interestGroups.flat(), - Array.from(advertiserSet), - isMultiSeller, - currentSiteData - ); + const { auctionData, receivedBids, adsAndBidders } = + configuredAuctionEvents( + interestGroups.flat(), + Array.from(advertiserSet), + isMultiSeller, + currentSiteData + ); return { auctionData, receivedBids, - winningBids, + adsAndBidders, }; }, [currentSiteData, sitesVisited, isMultiSeller]); @@ -122,7 +123,7 @@ const ExplorableExplanation = () => { auctionEvents: { ...auctionsData, }, - customAdsAndBidders: auctionsData.winningBids, + customAdsAndBidders: auctionsData.adsAndBidders, }, }, }, From 58094839fffffe75f08613fbf4cd55804d1b85fe Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Mon, 20 Jan 2025 12:59:27 +0530 Subject: [PATCH 7/8] =?UTF-8?q?Fix=20Ad=20Unit=20Code=20and=20Ad=20Contain?= =?UTF-8?q?er=20Size=20in=20Bids=20tab=20in=20the=20bottom=20table=20shoul?= =?UTF-8?q?dn=E2=80=99t=20be=20empty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../auctionEventTransformers.ts | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts index 881bc15a5..682038e04 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts @@ -16,7 +16,7 @@ /** * External dependencies */ -import type { singleAuctionEvent } from '@google-psat/common'; +import type { ReceivedBids, singleAuctionEvent } from '@google-psat/common'; /** * Internal dependencies */ @@ -270,13 +270,24 @@ const randomIntFromInterval = (min: number, max: number) => { const getBidData = ( auctionData: { [key: string]: singleAuctionEvent[] }, - sellers: string[] + sellers: string[], + adUnitCode: string ) => { - const bidsArray: singleAuctionEvent[] = []; + const bidsArray: ReceivedBids[] = []; sellers.forEach((seller) => { + const filteredBidEvents = + auctionData[seller]?.filter((event) => event.type === 'bid') ?? []; + bidsArray.push( - ...(auctionData[seller]?.filter((event) => event.type === 'bid') ?? []) + ...filteredBidEvents.map((event) => { + return { + ...event, + adUnitCode, + adContainerSize: [[320, 320]], + mediaType: 'video', + }; + }) ); }); @@ -372,15 +383,18 @@ export const configuredAuctionEvents = ( const receivedBids = { 'div-200-1': getBidData( auctionData['div-200-1']?.[dateTimeString]?.[websiteString], - sellersArray + sellersArray, + 'div-200-1' ), 'div-200-2': getBidData( auctionData['div-200-2']?.[dateTimeString]?.[websiteString], - sellersArray + sellersArray, + 'div-200-2' ), 'div-200-3': getBidData( auctionData['div-200-3']?.[dateTimeString]?.[websiteString], - sellersArray + sellersArray, + 'div-200-3' ), }; @@ -391,7 +405,8 @@ export const configuredAuctionEvents = ( mediaContainerSize: [[320, 320]], winningBid: getBidData( auctionData['div-200-1']?.[dateTimeString]?.[websiteString], - sellersArray + sellersArray, + 'div-200-1' ).filter(({ type }) => type === 'win')?.[0]?.bid, bidCurrency: 'USD', winningBidder: 'DSP 1', @@ -402,7 +417,8 @@ export const configuredAuctionEvents = ( mediaContainerSize: [[320, 320]], winningBid: getBidData( auctionData['div-200-2']?.[dateTimeString]?.[websiteString], - sellersArray + sellersArray, + 'div-200-2' ).filter(({ type }) => type === 'win')?.[0]?.bid, bidCurrency: 'USD', winningBidder: 'DSP 1', @@ -413,7 +429,8 @@ export const configuredAuctionEvents = ( mediaContainerSize: [[320, 320]], winningBid: getBidData( auctionData['div-200-3']?.[dateTimeString]?.[websiteString], - sellersArray + sellersArray, + 'div-200-3' ).filter(({ type }) => type === 'win')?.[0]?.bid, bidCurrency: 'USD', winningBidder: 'DSP 1', From b990dab607ea574761cc6cbc5e30a36a52af598d Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Tue, 21 Jan 2025 14:22:45 +0530 Subject: [PATCH 8/8] Update data for ad unit and time --- .../modules/auctions/setUpAdUnitCode.js | 4 ++-- .../modules/auctions/setupBranches.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js index c365899fb..05ea0bc0a 100644 --- a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js +++ b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js @@ -41,13 +41,13 @@ const setUpAdUnitCode = (steps, index) => { }, { title: 'adunit-code', - description: 'div-200-1', + description: 'div-200-2', type: 'box', color: colors.box.browser, }, { title: 'adunit-code', - description: 'div-200-1', + description: 'div-200-3', 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 index e238c21fe..10dc44985 100644 --- a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js +++ b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js @@ -28,18 +28,18 @@ const setupBranches = (steps, index) => { currentIndex: index, branches: [ { - date: '2024-10-02', - time: '10:00:22PM', + date: 'Sun, 01 October 2023', + time: '6:30:00 GMT', type: 'datetime', }, { - date: '2024-10-03', - time: '11:00:22PM', + date: 'Sun, 01 October 2023', + time: '6:31:00 GMT', type: 'datetime', }, { - date: '2024-10-03', - time: '11:00:22PM', + date: 'Sun, 01 October 2023', + time: '6:32:00 GMT', type: 'datetime', }, ],