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', }, ], 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/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 = () => {
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..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: { @@ -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 bc44d5049..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 */ @@ -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 }, @@ -45,20 +57,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; }; @@ -84,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); }); @@ -98,7 +113,8 @@ export const transformFetchingEvents = ( eventToModify.type = 'Start Fetch ' + eventName; - eventToModify.eventType = 'interestGroupAuctionNetworkRequestCreated'; + eventToModify.eventType = + 'interestGroupAuctionNetworkRequestCreated' as singleAuctionEvent['eventType']; fetchEventsToBeReturned.push(eventToModify); }); @@ -147,7 +163,8 @@ export const transformBidEvent = ( interestGroups: { interestGroupName: string; ownerOrigin: string; - }[] + }[], + isTopLevel: boolean ) => { const bidEventsToBeReturned: singleAuctionEvent[] = []; @@ -160,6 +177,10 @@ export const transformBidEvent = ( eventToModify.name = interestGroupName; eventToModify.bid = randomIntFromInterval(1, 100); + if (isTopLevel) { + eventToModify.type = 'topLevelBid'; + } + bidEventsToBeReturned.push(eventToModify); }); @@ -173,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)); @@ -214,7 +236,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, @@ -245,3 +267,179 @@ 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[], + adUnitCode: string +) => { + const bidsArray: ReceivedBids[] = []; + + sellers.forEach((seller) => { + const filteredBidEvents = + auctionData[seller]?.filter((event) => event.type === 'bid') ?? []; + + bidsArray.push( + ...filteredBidEvents.map((event) => { + return { + ...event, + adUnitCode, + adContainerSize: [[320, 320]], + mediaType: 'video', + }; + }) + ); + }); + + return bidsArray; +}; + +const getFlattenedAuctionEvents = ( + sellersArray: string[], + currentSiteData: CurrentSiteData, + interestGroups: { + interestGroupName: string; + ownerOrigin: 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, + new URL(seller).host, + advertisers, + new Date(currentSiteData?.datetime).getTime(), + new URL(seller).host === host && isMultiSeller + ); + }); + + 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( + websiteString, + '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, + isMultiSeller + ), + }, + }, + 'div-200-2': { + [dateTimeString]: { + [websiteString]: getFlattenedAuctionEvents( + sellersArray, + currentSiteData, + interestGroups, + advertisers, + isMultiSeller + ), + }, + }, + 'div-200-3': { + [dateTimeString]: { + [websiteString]: getFlattenedAuctionEvents( + sellersArray, + currentSiteData, + interestGroups, + advertisers, + isMultiSeller + ), + }, + }, + }; + + const receivedBids = { + 'div-200-1': getBidData( + auctionData['div-200-1']?.[dateTimeString]?.[websiteString], + sellersArray, + 'div-200-1' + ), + 'div-200-2': getBidData( + auctionData['div-200-2']?.[dateTimeString]?.[websiteString], + sellersArray, + 'div-200-2' + ), + 'div-200-3': getBidData( + auctionData['div-200-3']?.[dateTimeString]?.[websiteString], + sellersArray, + 'div-200-3' + ), + }; + + const adsAndBidders = { + 'div-200-1': { + adUnitCode: 'div-200-1', + bidders: sellersArray, + mediaContainerSize: [[320, 320]], + winningBid: getBidData( + auctionData['div-200-1']?.[dateTimeString]?.[websiteString], + sellersArray, + 'div-200-1' + ).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, + 'div-200-2' + ).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, + 'div-200-3' + ).filter(({ type }) => type === 'win')?.[0]?.bid, + bidCurrency: 'USD', + winningBidder: 'DSP 1', + }, + }; + + return { + auctionData, + receivedBids, + adsAndBidders, + }; +}; 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 4e4319540..1486d683e 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[]; @@ -742,14 +742,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', @@ -757,7 +757,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', @@ -767,7 +767,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', @@ -775,7 +775,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', @@ -787,7 +787,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 ed28769cb..3fe860603 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 @@ -28,24 +28,20 @@ import Panel from './panel'; import IGTable from '../interestGroups/table'; import Auctions from './auctions'; import { SYNTHETIC_INTEREST_GROUPS } from './constants'; -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); + + const [isMultiSeller, setIsMultiSeller] = useState(false); + const [interestGroupsData, setInterestGroupsData] = useState< InterestGroups[] >([]); @@ -146,113 +142,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, adsAndBidders } = + configuredAuctionEvents( + interestGroups.flat(), + Array.from(advertiserSet), + isMultiSeller, + 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') ?? [], - }, - }; - }, [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', - }, + receivedBids, + adsAndBidders, }; - }, [auctionsData, currentSiteData]); + }, [currentSiteData, sitesVisited, isMultiSeller]); const tabItems = useMemo( () => [ @@ -273,7 +176,7 @@ const ExplorableExplanation = () => { auctionEvents: { ...auctionsData, }, - customAdsAndBidders: customAdsAndBidders, + customAdsAndBidders: auctionsData.adsAndBidders, }, }, }, @@ -303,7 +206,7 @@ const ExplorableExplanation = () => { }, }, ], - [auctionsData, customAdsAndBidders, interestGroupsData] + [auctionsData, interestGroupsData] ); return ( @@ -313,6 +216,8 @@ const ExplorableExplanation = () => { setCurrentSite={_setCurrentSiteData} setInteractiveMode={setInteractiveMode} interactiveMode={interactiveMode} + isMultiSeller={isMultiSeller} + setIsMultiSeller={setIsMultiSeller} /> ); 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 09b51a437..86a461c8c 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 { @@ -48,6 +48,8 @@ declare module 'react' { interface PanelProps { setCurrentSite: (siteData: CurrentSiteData | null) => void; currentSiteData: CurrentSiteData | null; + isMultiSeller: boolean; + setIsMultiSeller: React.Dispatch>; interactiveMode: boolean; setInteractiveMode: (event: React.ChangeEvent) => void; } @@ -55,13 +57,14 @@ interface PanelProps { const Panel = ({ currentSiteData, setCurrentSite, + isMultiSeller, + setIsMultiSeller, interactiveMode, setInteractiveMode, }: PanelProps) => { const [play, setPlay] = useState(true); const [sliderStep, setSliderStep] = useState(1); const [autoExpand, setAutoExpand] = useState(true); - const [isMultiSeller, setIsMultiSeller] = useState(false); const historyCount = 8; const divRef = useRef(null); const containerRef = useRef(null);