From a3282158026f37ce2709fba306eadea44fbf083d Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Tue, 10 Dec 2024 12:09:23 +0530 Subject: [PATCH 01/29] Move table and config to seperate file --- .../interestGroups/index.tsx | 177 +----------------- .../interestGroups/table.tsx | 175 +++++++++++++++++ 2 files changed, 180 insertions(+), 172 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/index.tsx index c81de1d5b..077c6f13d 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/index.tsx @@ -17,55 +17,16 @@ /** * External dependencies. */ -import React, { useEffect, useMemo, useState } from 'react'; -import { Resizable } from 're-resizable'; -import { - Table, - type TableFilter, - TableProvider, - type TableColumn, - type TableRow, - useSidebar, - SIDEBAR_ITEMS_KEYS, - type TableData, -} from '@google-psat/design-system'; -import { I18n } from '@google-psat/i18n'; -import { - noop, - type InterestGroups as InterestGroupsType, -} from '@google-psat/common'; -import { prettyPrintJson } from 'pretty-print-json'; +import React from 'react'; +import { useSidebar, SIDEBAR_ITEMS_KEYS } from '@google-psat/design-system'; /** * Internal dependencies. */ import { useProtectedAudience, useSettings } from '../../../../stateProviders'; +import IGTable from './table'; -interface InterestGroupsProps { - filters?: Record; -} - -const InterestGroups = ({ filters }: InterestGroupsProps) => { - const [, setQuery] = useState({ - filter: {}, - }); - - useEffect(() => { - setQuery({ - filter: { - ...filters, - }, - }); - }, [filters]); - - // const clearQuery = useCallback(() => { - // setQuery({ - // filter: {}, - // }); - // }, []); - - const [selectedRow, setSelectedRow] = useState(null); - +const InterestGroups = () => { const { interestGroupDetails } = useProtectedAudience(({ state }) => ({ interestGroupDetails: state.interestGroupDetails, })); @@ -78,74 +39,6 @@ const InterestGroups = ({ filters }: InterestGroupsProps) => { updateSelectedItemKey: actions.updateSelectedItemKey, })); - const tableColumns = useMemo( - () => [ - { - header: 'Event Time', - accessorKey: 'formattedTime', - cell: (info) => - (info as string) - .replace('T', ' | ') - .replace('Z', '') - .split('-') - .join('/'), - enableHiding: false, - }, - { - header: 'Access Type', - accessorKey: 'type', - cell: (info) => info, - }, - { - header: 'Name', - accessorKey: 'name', - cell: (info) => info, - }, - { - header: 'Owner', - accessorKey: 'ownerOrigin', - cell: (info) => { - return new URL(info as string).hostname; - }, - }, - { - header: 'Expiration Time', - accessorKey: 'details.expirationTime', - cell: (info) => { - if (!info) { - return ''; - } - - return new Date(Number(info) * 1000) - .toISOString() - .replace('T', ' | ') - .replace('Z', '') - .split('-') - .join('/'); - }, - }, - ], - [] - ); - - const tableFilters = useMemo( - () => ({ - type: { - title: 'Access Type', - sortValues: true, - }, - ownerOrigin: { - title: 'Owner', - sortValues: true, - }, - name: { - title: 'Name', - sortValues: true, - }, - }), - [] - ); - if (!isUsingCDP) { return (
@@ -178,67 +71,7 @@ const InterestGroups = ({ filters }: InterestGroupsProps) => { ); } - return ( -
- - { - setSelectedRow(row as InterestGroupsType); - }} - onRowContextMenu={noop} - getRowObjectKey={(row: TableRow) => { - return ( - ((row.originalData as InterestGroupsType).uniqueAuctionId ?? '') + - (row.originalData as InterestGroupsType).time - ); - }} - > - - - -
- {selectedRow ? ( -
- 
-              

-
-
- ) : ( -
-

- {I18n.getMessage('selectRowToPreview')} -

-
- )} -
- - ); + return ; }; export default InterestGroups; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx new file mode 100644 index 000000000..c804ab366 --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/interestGroups/table.tsx @@ -0,0 +1,175 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies. + */ +import { + Table, + TableProvider, + type TableColumn, + type TableData, + type TableFilter, + type TableRow, +} from '@google-psat/design-system'; +import { I18n } from '@google-psat/i18n'; +import { Resizable } from 're-resizable'; +import { + noop, + type InterestGroups as InterestGroupsType, +} from '@google-psat/common'; +import React, { useMemo, useState } from 'react'; +import { prettyPrintJson } from 'pretty-print-json'; + +interface InterestGroupsProps { + interestGroupDetails: InterestGroupsType[]; +} + +const IGTable = ({ interestGroupDetails }: InterestGroupsProps) => { + const [selectedRow, setSelectedRow] = useState(null); + + const tableColumns = useMemo( + () => [ + { + header: 'Event Time', + accessorKey: 'formattedTime', + cell: (info) => + (info as string) + .replace('T', ' | ') + .replace('Z', '') + .split('-') + .join('/'), + enableHiding: false, + }, + { + header: 'Access Type', + accessorKey: 'type', + cell: (info) => info, + }, + { + header: 'Name', + accessorKey: 'name', + cell: (info) => info, + }, + { + header: 'Owner', + accessorKey: 'ownerOrigin', + cell: (info) => { + return new URL(info as string).hostname; + }, + }, + { + header: 'Expiration Time', + accessorKey: 'details.expirationTime', + cell: (info) => { + if (!info) { + return ''; + } + + return new Date(Number(info) * 1000) + .toISOString() + .replace('T', ' | ') + .replace('Z', '') + .split('-') + .join('/'); + }, + }, + ], + [] + ); + + const tableFilters = useMemo( + () => ({ + type: { + title: 'Access Type', + sortValues: true, + }, + ownerOrigin: { + title: 'Owner', + sortValues: true, + }, + name: { + title: 'Name', + sortValues: true, + }, + }), + [] + ); + + return ( +
+ + { + setSelectedRow(row as InterestGroupsType); + }} + onRowContextMenu={noop} + getRowObjectKey={(row: TableRow) => { + return ( + ((row.originalData as InterestGroupsType).uniqueAuctionId ?? '') + + (row.originalData as InterestGroupsType).time + ); + }} + > +
+ + +
+ {selectedRow ? ( +
+ 
+              

+
+
+ ) : ( +
+

+ {I18n.getMessage('selectRowToPreview')} +

+
+ )} +
+ + ); +}; + +export default IGTable; From d955f2ae9d98c3e6410069b21755b27cb665f6ea Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Tue, 10 Dec 2024 15:01:24 +0530 Subject: [PATCH 02/29] Reorganize auction and adunit components --- .../protectedAudience/adUnits/index.tsx | 20 +------ .../protectedAudience/adUnits/panel.tsx | 48 +++++++++++++++++ .../protectedAudience/auctions/container.tsx | 53 +++++++++++++++++++ .../protectedAudience/auctions/index.tsx | 33 +++++------- .../auctions/{panel.tsx => panel/index.tsx} | 6 +-- .../auctions/{ => table}/bottomTray.tsx | 0 .../{auctionTable.tsx => table/index.tsx} | 0 7 files changed, 120 insertions(+), 40 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx rename packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/{panel.tsx => panel/index.tsx} (95%) rename packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/{ => table}/bottomTray.tsx (100%) rename packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/{auctionTable.tsx => table/index.tsx} (100%) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/index.tsx index 17ea54948..71ad494b9 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/index.tsx @@ -22,9 +22,8 @@ import { SIDEBAR_ITEMS_KEYS, useSidebar } from '@google-psat/design-system'; /** * Internal dependencies. */ -import AdMatrix from './adMatrix'; -import AdTable from './adTable'; import { useProtectedAudience, useSettings } from '../../../../stateProviders'; +import Panel from './panel'; const AdUnits = () => { const { adsAndBidders, setSelectedAdUnit } = useProtectedAudience( @@ -70,22 +69,7 @@ const AdUnits = () => { ); } - return ( -
- {adsAndBidders && Object.keys(adsAndBidders).length > 0 ? ( - <> - - - - ) : ( -
-

- No ad units were recorded. -

-
- )} -
- ); + return ; }; export default AdUnits; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx new file mode 100644 index 000000000..7a0051acb --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx @@ -0,0 +1,48 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies. + */ +import React from 'react'; +import AdTable from './adTable'; +import AdMatrix from './adMatrix'; +import type { AdsAndBiddersType } from '@google-psat/common'; + +interface PanelProps { + adsAndBidders: AdsAndBiddersType; +} + +const Panel = ({ adsAndBidders }: PanelProps) => { + return ( +
+ {adsAndBidders && Object.keys(adsAndBidders).length > 0 ? ( + <> + + + + ) : ( +
+

+ No ad units were recorded. +

+
+ )} +
+ ); +}; + +export default Panel; 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 new file mode 100644 index 000000000..a838ecd5f --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx @@ -0,0 +1,53 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies. + */ +import { SidebarProvider, type SidebarItems } from '@google-psat/design-system'; +import React from 'react'; + +/** + * Internal dependencies. + */ +import AuctionPanel from './panel'; +import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; + +interface AuctionsContainerProps { + auctionEvents: AuctionEventsType; + sidebarData: SidebarItems; + setSidebarData: React.Dispatch>; +} + +const AuctionsContainer = ({ + auctionEvents, + sidebarData, + setSidebarData, +}: AuctionsContainerProps) => { + return ( + + + + ); +}; + +export default AuctionsContainer; 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 d3b48a5a2..c5081659c 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 @@ -19,7 +19,6 @@ import React, { useEffect, useState } from 'react'; import { SIDEBAR_ITEMS_KEYS, - SidebarProvider, useSidebar, type SidebarItems, } from '@google-psat/design-system'; @@ -28,7 +27,7 @@ import { */ import { useProtectedAudience, useSettings } from '../../../../stateProviders'; import Breakpoints from './breakpoints'; -import AuctionPanel from './panel'; +import AuctionsContainer from './container'; import AdUnits from '../adUnits'; const Auctions = () => { @@ -48,14 +47,6 @@ const Auctions = () => { auctionEvents: state.auctionEvents ?? {}, })); - const { isUsingCDP } = useSettings(({ state }) => ({ - isUsingCDP: state.isUsingCDP, - })); - - const { updateSelectedItemKey } = useSidebar(({ actions }) => ({ - updateSelectedItemKey: actions.updateSelectedItemKey, - })); - useEffect(() => { if (!auctionEvents || Object.keys(auctionEvents).length === 0) { setSidebarData((prev) => { @@ -66,6 +57,14 @@ const Auctions = () => { } }, [auctionEvents]); + const { isUsingCDP } = useSettings(({ state }) => ({ + isUsingCDP: state.isUsingCDP, + })); + + const { updateSelectedItemKey } = useSidebar(({ actions }) => ({ + updateSelectedItemKey: actions.updateSelectedItemKey, + })); + if (!isUsingCDP) { return (
@@ -102,15 +101,11 @@ const Auctions = () => {
- - - +
); diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx similarity index 95% rename from packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel.tsx rename to packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx index 376fe1ee9..7f275060d 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx @@ -28,9 +28,9 @@ import { /** * Internal dependencies. */ -import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; -import AuctionTable from './auctionTable'; -import AdunitPanel from './adunitPanel'; +import type { AuctionEventsType } from '../../../../../stateProviders/protectedAudience/context'; +import AuctionTable from '../table'; +import AdunitPanel from '../adunitPanel'; interface AuctionPanelProps { auctionEvents: AuctionEventsType; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/bottomTray.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/bottomTray.tsx similarity index 100% rename from packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/bottomTray.tsx rename to packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/bottomTray.tsx diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/auctionTable.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx similarity index 100% rename from packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/auctionTable.tsx rename to packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx From 2e96bd9050a2f6c63ea33dcb98bfb9d8cb217d16 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Tue, 10 Dec 2024 17:02:58 +0530 Subject: [PATCH 03/29] Update tabs for EE and render table tray --- .../protectedAudience/adUnits/panel.tsx | 6 +- .../explorableExplanation/auctions.tsx | 68 +++++++++++++++++++ .../explorableExplanation/index.tsx | 26 +++---- .../explorableExplanation/panel.tsx | 16 +++++ .../protectedAudience/index.tsx | 4 +- 5 files changed, 98 insertions(+), 22 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctions.tsx diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx index 7a0051acb..e3754964a 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/adUnits/panel.tsx @@ -22,11 +22,11 @@ import AdTable from './adTable'; import AdMatrix from './adMatrix'; import type { AdsAndBiddersType } from '@google-psat/common'; -interface PanelProps { +interface AdUnitsPanelProps { adsAndBidders: AdsAndBiddersType; } -const Panel = ({ adsAndBidders }: PanelProps) => { +const AdUnitsPanel = ({ adsAndBidders }: AdUnitsPanelProps) => { return (
{adsAndBidders && Object.keys(adsAndBidders).length > 0 ? ( @@ -45,4 +45,4 @@ const Panel = ({ adsAndBidders }: PanelProps) => { ); }; -export default Panel; +export default AdUnitsPanel; 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 new file mode 100644 index 000000000..c28702bff --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctions.tsx @@ -0,0 +1,68 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies. + */ +import type { SidebarItems } from '@google-psat/design-system'; +import React, { useEffect, useState } from 'react'; + +/** + * Internal dependencies. + */ +import AdUnitsPanel from '../adUnits/panel'; +import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; +import AuctionsContainer from '../auctions/container'; + +interface AuctionsProps { + auctionEvents: AuctionEventsType; +} + +const Auctions = ({ auctionEvents }: AuctionsProps) => { + const [sidebarData, setSidebarData] = useState({ + adunits: { + title: 'Ad Units', + panel: { + Element: AdUnitsPanel, + props: { + adsAndBidders: {}, + }, + }, + children: {}, + dropdownOpen: true, + }, + }); + + useEffect(() => { + if (!auctionEvents || Object.keys(auctionEvents).length === 0) { + setSidebarData((prev) => { + prev.adunits.children = {}; + + return { ...prev }; + }); + } + }, [auctionEvents]); + + return ( + + ); +}; + +export default Auctions; 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 eea46f3b0..bff9988b6 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 @@ -22,11 +22,9 @@ import React, { useMemo } from 'react'; /** * Internal dependencies. */ -import InterestGroups from '../interestGroups'; -import Auctions from '../auctions'; -import AdUnits from '../adUnits'; -import Bids from '../bids'; import Panel from './panel'; +import IGTable from '../interestGroups/table'; +import Auctions from './auctions'; const ExplorableExplanation = () => { const tabItems = useMemo( @@ -34,25 +32,19 @@ const ExplorableExplanation = () => { { title: 'Interest Groups', content: { - Element: InterestGroups, + Element: IGTable, + props: { + interestGroupDetails: [], + }, }, }, { title: 'Auctions', content: { Element: Auctions, - }, - }, - { - title: 'Ad Units', - content: { - Element: AdUnits, - }, - }, - { - title: 'Bids', - content: { - Element: Bids, + props: { + auctionEvents: {}, + }, }, }, ], 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 eb9437b29..62def0931 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 @@ -37,6 +37,8 @@ import { NextIcon, PreviousIcon } from '@google-psat/design-system'; * Internal dependencies. */ import Header from '../../../explorableExplanation/header'; +import TableTray from '../../../explorableExplanation/tableTray'; +import { Resizable } from 're-resizable'; declare module 'react' { interface CSSProperties { @@ -226,6 +228,20 @@ const Panel = () => { expandedBubbleWidth={expandedBubbleWidth} /> + + +
); }; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx index 1f1c64502..3cd20bfed 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx @@ -33,8 +33,8 @@ import InterestGroups from './interestGroups'; import Auctions from './auctions'; import Bids from './bids'; import Panel from './panel'; -import ExplorableExplanationPanel from './explorableExplanation/panel'; import AdUnits from './adUnits'; +import ExplorableExplanation from './explorableExplanation'; const InfoCard = ({ infoKey }: { infoKey: PSInfoKeyType }) => { return ( @@ -63,7 +63,7 @@ const ProtectedAudience = () => { { title: 'Explorable Explanations', content: { - Element: ExplorableExplanationPanel, + Element: ExplorableExplanation, }, }, { From d38b18607e1416fe5ee7d379f6411de3255ad17d Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Thu, 12 Dec 2024 18:01:52 +0530 Subject: [PATCH 04/29] Integrate tables with ee. --- .../src/protectedAudience/index.js | 29 +- .../explorableExplanation/constants.ts | 829 ++++++++++++++++++ .../explorableExplanation/index.tsx | 42 +- .../explorableExplanation/panel.tsx | 10 +- 4 files changed, 901 insertions(+), 9 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/constants.ts diff --git a/packages/explorable-explanations/src/protectedAudience/index.js b/packages/explorable-explanations/src/protectedAudience/index.js index 9a533f8fb..42f1a745b 100644 --- a/packages/explorable-explanations/src/protectedAudience/index.js +++ b/packages/explorable-explanations/src/protectedAudience/index.js @@ -46,6 +46,9 @@ app.setUpTimeLine = () => { app.bubbles.positions = []; app.bubbles.minifiedSVG = null; app.timeline.currentIndex = 0; + app.setCurrentSite( + config.timeline.circles[app.timeline.currentIndex].website + ); bubbles.clearAndRewriteBubbles(); app.setup(); @@ -168,6 +171,9 @@ app.setupLoop = (doNotPlay) => { promiseQueue.nextNodeSkipIndex.push(promiseQueue.queue.length); promiseQueue.add(() => { app.timeline.currentIndex += 1; + app.setCurrentSite( + config.timeline.circles[app.timeline.currentIndex].website + ); flow.setButtonsDisabilityState(); }); @@ -208,6 +214,9 @@ app.handleNonInteractivePrev = () => { app.timeline.isPaused = true; const nextIndexPromiseGetter = app.timeline.currentIndex - 1; app.timeline.currentIndex -= 1; + app.setCurrentSite( + config.timeline.circles[app.timeline.currentIndex].website + ); flow.setButtonsDisabilityState(); const nextIndex = promiseQueue.nextNodeSkipIndex[nextIndexPromiseGetter]; @@ -302,6 +311,9 @@ app.handleNonInteravtiveNext = () => { app.timeline.isPaused = true; app.cancelPromise = true; app.timeline.currentIndex += 1; + app.setCurrentSite( + config.timeline.circles[app.timeline.currentIndex].website + ); flow.setButtonsDisabilityState(); const nextIndexPromiseGetter = app.timeline.currentIndex; @@ -433,6 +445,9 @@ app.toggleInteractiveMode = async () => { app.isInteractiveMode = !app.isInteractiveMode; app.timeline.currentIndex = 0; + app.setCurrentSite( + config.timeline.circles[app.timeline.currentIndex].website + ); app.bubbles.interestGroupCounts = 0; app.bubbles.positions = []; app.bubbles.minifiedSVG = null; @@ -489,8 +504,11 @@ export const interestGroupSketch = (p) => { }; p.updateWithProps = (props) => { - if (props.onClick) { - app.igp.igClick = props.onClick; + if ( + props.expandedBubbleX && + props.expandedBubbleY && + props.expandedBubbleWidth + ) { app.bubbles.expandedBubbleX = props.expandedBubbleX; app.bubbles.expandedBubbleY = props.expandedBubbleY; app.bubbles.expandedCircleDiameter = props.expandedBubbleWidth; @@ -512,6 +530,10 @@ export const interestGroupSketch = (p) => { bubbles.showExpandedBubbles(); } } + + if (props.setCurrentSite) { + app.setCurrentSite = props.setCurrentSite; + } }; }; @@ -529,6 +551,9 @@ app.reset = async (callFromExtension = false) => { promiseQueue.clear(); app.timeline.currentIndex = 0; + app.setCurrentSite( + config.timeline.circles[app.timeline.currentIndex].website + ); app.bubbles.interestGroupCounts = 0; app.bubbles.minifiedSVG = null; app.bubbles.expandedSVG = null; 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 new file mode 100644 index 000000000..9d00e353c --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/constants.ts @@ -0,0 +1,829 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export const SYNTHETIC_INTEREST_GROUPS = { + 'adv1.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv1.com', + name: 'shoes', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'shoes', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv1.com', + name: 'heels', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'heels', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv1.com', + name: 'phones', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'phones', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], + 'adv2.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv2.com', + name: 'stilletos', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'stilletos', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv2.com', + name: 'shorts', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'shorts', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], + 'adv3.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv3.com', + name: 'bike', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'bike', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv3.com', + name: 'car', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'car', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], + 'adv4.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv4.com', + name: 'football', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'football', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv4.com', + name: 'basketball', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'basketball', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv4.com', + name: 'baseball', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'baseball', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], + 'adv5.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv5.com', + name: 'football', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'football', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv5.com', + name: 'basketball', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'basketball', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv5.com', + name: 'baseball', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'baseball', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], + 'adv6.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv6.com', + name: 'movies', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'movies', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv6.com', + name: 'series', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'series', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv6.com', + name: 'books', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'books', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], + 'adv7.com': [ + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv7.com', + name: 'IGG220', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'IGG220', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv7.com', + name: 'IGG201', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'IGG201', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + { + formattedTime: '123ms', + type: 'join', + ownerOrigin: 'https://www.adv7.com', + name: 'IG225', + details: { + ads: [ + { + metadata: + '{"type":"shoes","crid":"shoes_ad_1_crid","cid":"shoes_ad_1_cid","cat":["IAB-1"],"seat":"shoes_ad_1_seat_id","adomain":["shoes_ad_1_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-1.html', + }, + { + metadata: + '{"type":"shoes","crid":"shoes_ad_2_crid","cid":"shoes_ad_2_cid","cat":["IAB-2"],"seat":"shoes_ad_2_seat_id","adomain":["shoes_ad_2_adomain.com"],"w":300,"h":250}', + renderURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/advertiser/test-ad-2.html', + }, + ], + auctionServerRequestFlags: [], + biddingLogicURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', + enableBiddingSignalsPrioritization: false, + executionMode: 'compatibility', + expirationTime: 1736593408.252279, + joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', + maxTrustedBiddingSignalsURLLength: 0, + name: 'IG225', + priority: 0, + sellerCapabilities: { + '*': [], + }, + trustedBiddingSignalsKeys: ['remainingBudget', 'arbitrary-key'], + trustedBiddingSignalsSlotSizeMode: 'none', + trustedBiddingSignalsURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding_signal-1.json', + updateURL: + 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/daily_update_url-test.json', + userBiddingSignals: '{"user_bidding_signals":"user_bidding_signals"}', + }, + }, + ], +}; 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 bff9988b6..84c0853b7 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 @@ -17,7 +17,7 @@ * External dependencies. */ import { TabsProvider, type TabItems } from '@google-psat/design-system'; -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; /** * Internal dependencies. @@ -25,8 +25,42 @@ import React, { useMemo } from 'react'; import Panel from './panel'; import IGTable from '../interestGroups/table'; import Auctions from './auctions'; +import { SYNTHETIC_INTEREST_GROUPS } from './constants'; +import type { InterestGroups } from '@google-psat/common'; const ExplorableExplanation = () => { + const [currentSite, setCurrentSite] = useState(''); + + const interestGroupData = useMemo(() => { + if (!currentSite) { + return []; + } + + const perSiteInterestGroups: InterestGroups[] = + //@ts-ignore + SYNTHETIC_INTEREST_GROUPS[currentSite]; + + return perSiteInterestGroups?.map( + ({ + formattedTime, + name, + type, + ownerOrigin, + details: { expirationTime }, + }: InterestGroups) => { + return { + formattedTime, + type, + name, + details: { + expirationTime, + }, + ownerOrigin, + }; + } + ); + }, [currentSite]); + const tabItems = useMemo( () => [ { @@ -34,7 +68,7 @@ const ExplorableExplanation = () => { content: { Element: IGTable, props: { - interestGroupDetails: [], + interestGroupDetails: [...interestGroupData], }, }, }, @@ -48,12 +82,12 @@ const ExplorableExplanation = () => { }, }, ], - [] + [interestGroupData] ); return ( - + ); }; 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 50064ad42..38bea443c 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 @@ -45,8 +45,11 @@ declare module 'react' { [key: `--${string}`]: string | number; } } +interface PanelProps { + setCurrentSite: React.Dispatch>; +} -const Panel = () => { +const Panel = ({ setCurrentSite }: PanelProps) => { const [play, setPlay] = useState(true); const [sliderStep, setSliderStep] = useState(1); const [interactiveMode, _setInteractiveMode] = useState(false); @@ -111,9 +114,11 @@ const Panel = () => { setExpandedBubbleX(centerX); setExpandedBubbleY(centerY); } + if (containerRef.current) { handleResizeCallback.observe(containerRef.current); } + const containerRefCopy = containerRef; return () => { app.reset(true); @@ -219,11 +224,10 @@ const Panel = () => { console.log('dole shole')} expandedBubbleX={expandedBubbleX} expandedBubbleY={expandedBubbleY} expandedBubbleWidth={expandedBubbleWidth} + setCurrentSite={setCurrentSite} /> Date: Fri, 13 Dec 2024 11:59:06 +0530 Subject: [PATCH 05/29] Pause drawing of the flow. --- .../src/protectedAudience/components/progressLine.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/explorable-explanations/src/protectedAudience/components/progressLine.js b/packages/explorable-explanations/src/protectedAudience/components/progressLine.js index af9104e11..265037557 100644 --- a/packages/explorable-explanations/src/protectedAudience/components/progressLine.js +++ b/packages/explorable-explanations/src/protectedAudience/components/progressLine.js @@ -101,12 +101,6 @@ const ProgressLine = ({ return new Promise((resolve) => { const animate = () => { - if (noAnimation || app.isRevisitingNodeInInteractiveMode) { - drawInstantly(); - resolve(returnCoordinates); - return; - } - if (app.cancelPromise) { resolve(); return; @@ -117,6 +111,12 @@ const ProgressLine = ({ return; } + if (noAnimation || app.isRevisitingNodeInInteractiveMode) { + drawInstantly(); + resolve(returnCoordinates); + return; + } + p.push(); p.stroke(0); p.strokeWeight(1); From 2a3c36e0edec38bfb6a2be0ab7c3cec6daadce9f Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 12:12:51 +0530 Subject: [PATCH 06/29] Add setCurrentSite and more constants to stop breakage. --- packages/explorable-explanations/src/protectedAudience/app.js | 1 + .../protectedAudience/explorableExplanation/constants.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/explorable-explanations/src/protectedAudience/app.js b/packages/explorable-explanations/src/protectedAudience/app.js index afc62d402..14b751406 100644 --- a/packages/explorable-explanations/src/protectedAudience/app.js +++ b/packages/explorable-explanations/src/protectedAudience/app.js @@ -61,6 +61,7 @@ const app = { visitedIndexOrder: [], visitedIndexOrderTracker: -1, isRevisitingNodeInInteractiveMode: false, + setCurrentSite: () => null, usedNextOrPrev: false, canvasEventListerners: { main: { 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 9d00e353c..cae7b9fac 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 @@ -228,6 +228,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, ], + 'pub1.com': [], 'adv3.com': [ { formattedTime: '123ms', @@ -570,6 +571,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, ], + 'pub2.com': [], 'adv6.com': [ { formattedTime: '123ms', From b22a3fce625e0a3bd132425e1b18e0e685445b69 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 13:10:10 +0530 Subject: [PATCH 07/29] Show formatted data. --- .../explorableExplanation/constants.ts | 94 +++++++++++-------- .../explorableExplanation/index.tsx | 20 +--- 2 files changed, 57 insertions(+), 57 deletions(-) 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 cae7b9fac..fe9fdb9c7 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,10 +16,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'adv1.com': [ { - formattedTime: '123ms', + formattedTime: '101ms', type: 'join', ownerOrigin: 'https://www.adv1.com', name: 'shoes', + time: 1696154400.101, details: { ads: [ { @@ -40,7 +41,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1696156992.101, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'shoes', @@ -58,10 +59,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '102ms', type: 'join', ownerOrigin: 'https://www.adv1.com', name: 'heels', + time: 1696154400.102, details: { ads: [ { @@ -82,7 +84,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1696156992.102, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'heels', @@ -100,7 +102,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '103ms', type: 'join', ownerOrigin: 'https://www.adv1.com', name: 'phones', @@ -124,7 +126,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1696156992.103, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'phones', @@ -144,10 +146,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { ], 'adv2.com': [ { - formattedTime: '123ms', + formattedTime: '101ms', type: 'join', ownerOrigin: 'https://www.adv2.com', name: 'stilletos', + time: 1696157600.101, details: { ads: [ { @@ -168,7 +171,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698749600.101, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'stilletos', @@ -186,10 +189,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '102ms', type: 'join', ownerOrigin: 'https://www.adv2.com', name: 'shorts', + time: 1696157600.102, details: { ads: [ { @@ -210,7 +214,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698749600.102, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'shorts', @@ -231,10 +235,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'pub1.com': [], 'adv3.com': [ { - formattedTime: '123ms', + formattedTime: '101ms', type: 'join', ownerOrigin: 'https://www.adv3.com', name: 'bike', + time: 1696161200.101, details: { ads: [ { @@ -255,7 +260,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698853200.101, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'bike', @@ -273,10 +278,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '102ms', type: 'join', ownerOrigin: 'https://www.adv3.com', name: 'car', + time: 1696161200.102, details: { ads: [ { @@ -297,7 +303,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698853200.102, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'car', @@ -317,10 +323,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { ], 'adv4.com': [ { - formattedTime: '123ms', + formattedTime: '90ms', type: 'join', ownerOrigin: 'https://www.adv4.com', name: 'football', + time: 1696161200.09, details: { ads: [ { @@ -341,7 +348,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698753200.09, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'football', @@ -359,10 +366,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '95ms', type: 'join', ownerOrigin: 'https://www.adv4.com', name: 'basketball', + time: 1696161200.095, details: { ads: [ { @@ -383,7 +391,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698753200.095, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'basketball', @@ -401,10 +409,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '98ms', type: 'join', ownerOrigin: 'https://www.adv4.com', name: 'baseball', + time: 1696161200.098, details: { ads: [ { @@ -425,7 +434,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698753200.098, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'baseball', @@ -445,10 +454,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { ], 'adv5.com': [ { - formattedTime: '123ms', + formattedTime: '80ms', type: 'join', ownerOrigin: 'https://www.adv5.com', name: 'football', + time: 1696161520.08, details: { ads: [ { @@ -469,7 +479,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698753520.08, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'football', @@ -487,10 +497,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '81ms', type: 'join', ownerOrigin: 'https://www.adv5.com', name: 'basketball', + time: 1696161520.081, details: { ads: [ { @@ -511,7 +522,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698753520.081, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'basketball', @@ -529,10 +540,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '88ms', type: 'join', ownerOrigin: 'https://www.adv5.com', name: 'baseball', + time: 1696161520.088, details: { ads: [ { @@ -553,7 +565,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698753520.088, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'baseball', @@ -574,10 +586,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'pub2.com': [], 'adv6.com': [ { - formattedTime: '123ms', + formattedTime: '67ms', type: 'join', ownerOrigin: 'https://www.adv6.com', name: 'movies', + time: 1696164860.067, details: { ads: [ { @@ -598,7 +611,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698756860.067, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'movies', @@ -616,10 +629,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '69ms', type: 'join', ownerOrigin: 'https://www.adv6.com', name: 'series', + time: 1696164860.069, details: { ads: [ { @@ -640,7 +654,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698756860.069, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'series', @@ -658,10 +672,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '71ms', type: 'join', ownerOrigin: 'https://www.adv6.com', name: 'books', + time: 1696164860.071, details: { ads: [ { @@ -682,7 +697,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698756860.071, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'books', @@ -702,10 +717,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { ], 'adv7.com': [ { - formattedTime: '123ms', + formattedTime: '71ms', type: 'join', ownerOrigin: 'https://www.adv7.com', name: 'IGG220', + time: 1696168400.071, details: { ads: [ { @@ -726,7 +742,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698760400.071, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'IGG220', @@ -744,10 +760,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '76ms', type: 'join', ownerOrigin: 'https://www.adv7.com', name: 'IGG201', + time: 1696168400.076, details: { ads: [ { @@ -768,7 +785,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698760400.076, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'IGG201', @@ -786,10 +803,11 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, }, { - formattedTime: '123ms', + formattedTime: '151ms', type: 'join', ownerOrigin: 'https://www.adv7.com', name: 'IG225', + time: 1696168400.151, details: { ads: [ { @@ -810,7 +828,7 @@ export const SYNTHETIC_INTEREST_GROUPS = { 'https://privacysandboxdemos-buyer-1.domain-aaa.com/dsp/bidding-logic.js', enableBiddingSignalsPrioritization: false, executionMode: 'compatibility', - expirationTime: 1736593408.252279, + expirationTime: 1698760400.151, joiningOrigin: 'https://privacysandboxdemos.domain-aaa.com', maxTrustedBiddingSignalsURLLength: 0, name: 'IG225', 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 84c0853b7..0a5d0bec6 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 @@ -40,25 +40,7 @@ const ExplorableExplanation = () => { //@ts-ignore SYNTHETIC_INTEREST_GROUPS[currentSite]; - return perSiteInterestGroups?.map( - ({ - formattedTime, - name, - type, - ownerOrigin, - details: { expirationTime }, - }: InterestGroups) => { - return { - formattedTime, - type, - name, - details: { - expirationTime, - }, - ownerOrigin, - }; - } - ); + return perSiteInterestGroups; }, [currentSite]); const tabItems = useMemo( From 58c846bfca386efe267a41a364d4dfb3c221a816 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 13:25:46 +0530 Subject: [PATCH 08/29] Add switching mechanism. --- .../src/protectedAudience/index.js | 20 ++++------------ .../explorableExplanation/index.tsx | 13 ++++++---- .../explorableExplanation/panel.tsx | 24 ++++++++++++++++--- 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/packages/explorable-explanations/src/protectedAudience/index.js b/packages/explorable-explanations/src/protectedAudience/index.js index 42f1a745b..1e6309cd6 100644 --- a/packages/explorable-explanations/src/protectedAudience/index.js +++ b/packages/explorable-explanations/src/protectedAudience/index.js @@ -46,9 +46,7 @@ app.setUpTimeLine = () => { app.bubbles.positions = []; app.bubbles.minifiedSVG = null; app.timeline.currentIndex = 0; - app.setCurrentSite( - config.timeline.circles[app.timeline.currentIndex].website - ); + app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); bubbles.clearAndRewriteBubbles(); app.setup(); @@ -214,9 +212,7 @@ app.handleNonInteractivePrev = () => { app.timeline.isPaused = true; const nextIndexPromiseGetter = app.timeline.currentIndex - 1; app.timeline.currentIndex -= 1; - app.setCurrentSite( - config.timeline.circles[app.timeline.currentIndex].website - ); + app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); flow.setButtonsDisabilityState(); const nextIndex = promiseQueue.nextNodeSkipIndex[nextIndexPromiseGetter]; @@ -311,9 +307,7 @@ app.handleNonInteravtiveNext = () => { app.timeline.isPaused = true; app.cancelPromise = true; app.timeline.currentIndex += 1; - app.setCurrentSite( - config.timeline.circles[app.timeline.currentIndex].website - ); + app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); flow.setButtonsDisabilityState(); const nextIndexPromiseGetter = app.timeline.currentIndex; @@ -445,9 +439,7 @@ app.toggleInteractiveMode = async () => { app.isInteractiveMode = !app.isInteractiveMode; app.timeline.currentIndex = 0; - app.setCurrentSite( - config.timeline.circles[app.timeline.currentIndex].website - ); + app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); app.bubbles.interestGroupCounts = 0; app.bubbles.positions = []; app.bubbles.minifiedSVG = null; @@ -551,9 +543,7 @@ app.reset = async (callFromExtension = false) => { promiseQueue.clear(); app.timeline.currentIndex = 0; - app.setCurrentSite( - config.timeline.circles[app.timeline.currentIndex].website - ); + app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); app.bubbles.interestGroupCounts = 0; app.bubbles.minifiedSVG = null; app.bubbles.expandedSVG = null; 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 0a5d0bec6..4a69b08d8 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 @@ -29,19 +29,19 @@ import { SYNTHETIC_INTEREST_GROUPS } from './constants'; import type { InterestGroups } from '@google-psat/common'; const ExplorableExplanation = () => { - const [currentSite, setCurrentSite] = useState(''); + const [currentSiteData, setCurrentSiteData] = useState(null); const interestGroupData = useMemo(() => { - if (!currentSite) { + if (!currentSiteData) { return []; } const perSiteInterestGroups: InterestGroups[] = //@ts-ignore - SYNTHETIC_INTEREST_GROUPS[currentSite]; + SYNTHETIC_INTEREST_GROUPS[currentSiteData?.website]; return perSiteInterestGroups; - }, [currentSite]); + }, [currentSiteData]); const tabItems = useMemo( () => [ @@ -69,7 +69,10 @@ const ExplorableExplanation = () => { return ( - + ); }; 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 38bea443c..4dd9620c1 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 @@ -31,7 +31,7 @@ import { sketch, } from '@google-psat/explorable-explanations'; import { ReactP5Wrapper } from '@p5-wrapper/react'; -import { NextIcon, PreviousIcon } from '@google-psat/design-system'; +import { NextIcon, PreviousIcon, useTabs } from '@google-psat/design-system'; /** * Internal dependencies. @@ -46,10 +46,11 @@ declare module 'react' { } } interface PanelProps { - setCurrentSite: React.Dispatch>; + setCurrentSite: React.Dispatch>; + currentSiteData: object | null; } -const Panel = ({ setCurrentSite }: PanelProps) => { +const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => { const [play, setPlay] = useState(true); const [sliderStep, setSliderStep] = useState(1); const [interactiveMode, _setInteractiveMode] = useState(false); @@ -71,6 +72,23 @@ const Panel = ({ setCurrentSite }: PanelProps) => { }); }, []); + const { setActiveTab } = useTabs(({ actions }) => ({ + setActiveTab: actions.setActiveTab, + })); + + useEffect(() => { + if (!currentSiteData) { + setActiveTab(0); + return; + } + + if (currentSiteData?.type === 'advertiser') { + setActiveTab(0); + } else { + setActiveTab(1); + } + }, [currentSiteData, currentSiteData?.type, setActiveTab]); + const setInteractiveMode = useCallback( (event: React.ChangeEvent) => { _setInteractiveMode(event.target.checked); From f86965b7773b2aa3b57bc9c3220fcc37847d2b0c Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 13:57:31 +0530 Subject: [PATCH 09/29] Add tab switching to interest groups. Remove console and use to UTC string. --- .../src/protectedAudience/index.js | 4 +- .../explorableExplanation/constants.ts | 529 ++++++++++++++++++ .../explorableExplanation/index.tsx | 44 +- .../explorableExplanation/panel.tsx | 5 +- 4 files changed, 571 insertions(+), 11 deletions(-) diff --git a/packages/explorable-explanations/src/protectedAudience/index.js b/packages/explorable-explanations/src/protectedAudience/index.js index 1e6309cd6..6bd2154c9 100644 --- a/packages/explorable-explanations/src/protectedAudience/index.js +++ b/packages/explorable-explanations/src/protectedAudience/index.js @@ -169,9 +169,7 @@ app.setupLoop = (doNotPlay) => { promiseQueue.nextNodeSkipIndex.push(promiseQueue.queue.length); promiseQueue.add(() => { app.timeline.currentIndex += 1; - app.setCurrentSite( - config.timeline.circles[app.timeline.currentIndex].website - ); + app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); flow.setButtonsDisabilityState(); }); 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 fe9fdb9c7..09e6b9ec7 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 @@ -847,3 +847,532 @@ export const SYNTHETIC_INTEREST_GROUPS = { }, ], }; + +export const SYNTHETIC_AUCTION_EVENTS = [ + [ + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + type: 'started', + formattedTime: '0 ms', + time: 1734076669.500694, + auctionConfig: { + auctionSignals: { + pending: true, + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: true, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: true, + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionEventOccurred', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + type: 'configResolved', + formattedTime: '0.75ms', + time: 1734076669.501441, + auctionConfig: { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://privacysandboxdemos-buyer-1.domain-aaa.com': + '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionEventOccurred', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'shoes', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '2.16ms', + type: 'loaded', + time: 1734076669.502853, + eventType: 'interestGroupAccessed', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'books', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '2.41ms', + type: 'loaded', + time: 1734076669.503104, + eventType: 'interestGroupAccessed', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + formattedTime: '76.09ms', + type: 'Start fetch bidderTrustedSignals', + time: 1734076669.576781, + eventType: 'interestGroupAuctionNetworkRequestCreated', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + formattedTime: '76.79ms', + type: 'Start fetch sellerJs', + time: 1734076669.577482, + eventType: 'interestGroupAuctionNetworkRequestCreated', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + formattedTime: '77.17ms', + type: 'Start fetch bidderJs', + time: 1734076669.577862, + eventType: 'interestGroupAuctionNetworkRequestCreated', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + bidCurrency: '', + bid: null, + name: '', + ownerOrigin: '', + type: 'Finished FetchbidderTrustedSignals', + formattedTime: '78.95ms', + time: 1734076669.579643, + auctionConfig: { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://privacysandboxdemos-buyer-1.domain-aaa.com': + '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionNetworkRequestCompleted', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + bidCurrency: '', + bid: null, + name: '', + ownerOrigin: '', + type: 'Finished FetchbidderJs', + formattedTime: '464.45ms', + time: 1734076669.965148, + auctionConfig: { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://privacysandboxdemos-buyer-1.domain-aaa.com': + '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionNetworkRequestCompleted', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'shoes', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '472.61ms', + type: 'bid', + time: 1734076669.973304, + eventType: 'interestGroupAccessed', + bid: 24, + bidCurrency: 'USD', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'books', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '475.95ms', + type: 'bid', + time: 1734076669.976647, + eventType: 'interestGroupAccessed', + bid: 1, + bidCurrency: 'USD', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + formattedTime: '476.71ms', + type: 'Start fetch sellerTrustedSignals', + time: 1734076669.977401, + eventType: 'interestGroupAuctionNetworkRequestCreated', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + bidCurrency: '', + bid: null, + name: '', + ownerOrigin: '', + type: 'Finished FetchsellerJs', + formattedTime: '540.07ms', + time: 1734076670.040759, + auctionConfig: { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://privacysandboxdemos-buyer-1.domain-aaa.com': + '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionNetworkRequestCompleted', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + bidCurrency: '', + bid: null, + name: '', + ownerOrigin: '', + type: 'Finished FetchsellerTrustedSignals', + formattedTime: '614.30ms', + time: 1734076670.114991, + auctionConfig: { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://privacysandboxdemos-buyer-1.domain-aaa.com': + '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionNetworkRequestCompleted', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'shoes', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '629.06ms', + type: 'win', + time: 1734076670.129756, + eventType: 'interestGroupAccessed', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + formattedTime: '704.83ms', + type: 'Start fetch bidderJs', + time: 1734076670.205522, + eventType: 'interestGroupAuctionNetworkRequestCreated', + }, + { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + bidCurrency: '', + bid: null, + name: '', + ownerOrigin: '', + type: 'Finished FetchbidderJs', + formattedTime: '706.31ms', + time: 1734076670.207004, + auctionConfig: { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: [ + 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + ], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://privacysandboxdemos-buyer-1.domain-aaa.com': + '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', + }, + eventType: 'interestGroupAuctionNetworkRequestCompleted', + }, + ], +]; 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 4a69b08d8..fc699387c 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 @@ -25,14 +25,46 @@ import React, { useMemo, useState } from 'react'; import Panel from './panel'; import IGTable from '../interestGroups/table'; import Auctions from './auctions'; -import { SYNTHETIC_INTEREST_GROUPS } from './constants'; +import { + SYNTHETIC_AUCTION_EVENTS, + SYNTHETIC_INTEREST_GROUPS, +} from './constants'; import type { InterestGroups } from '@google-psat/common'; +import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; + +export interface CurrentSiteData { + type: 'advertiser' | 'publisher'; + website: string; + datetime: string; + igGroupsCount: number; + interestGroups: string[]; + visited: boolean; + visitedIndex: boolean; +} const ExplorableExplanation = () => { - const [currentSiteData, setCurrentSiteData] = useState(null); + const [currentSiteData, setCurrentSiteData] = + useState(null); + + const auctionsData = useMemo(() => { + if (!currentSiteData || currentSiteData?.type === 'advertiser') { + return {}; + } + + return { + 'div-200-1': { + [new Date(currentSiteData?.datetime).toUTCString()]: { + [`https://www.${currentSiteData?.website}`]: { + [`https://www.${currentSiteData?.website}`]: + SYNTHETIC_AUCTION_EVENTS[0], + }, + }, + }, + }; + }, [currentSiteData]); const interestGroupData = useMemo(() => { - if (!currentSiteData) { + if (!currentSiteData || currentSiteData?.type === 'publisher') { return []; } @@ -50,7 +82,7 @@ const ExplorableExplanation = () => { content: { Element: IGTable, props: { - interestGroupDetails: [...interestGroupData], + interestGroupDetails: [...(interestGroupData as InterestGroups[])], }, }, }, @@ -59,12 +91,12 @@ const ExplorableExplanation = () => { content: { Element: Auctions, props: { - auctionEvents: {}, + auctionEvents: auctionsData as AuctionEventsType, }, }, }, ], - [interestGroupData] + [auctionsData, interestGroupData] ); return ( 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 4dd9620c1..1878420fd 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 @@ -39,6 +39,7 @@ import { NextIcon, PreviousIcon, useTabs } from '@google-psat/design-system'; import Header from '../../../explorableExplanation/header'; import TableTray from '../../../explorableExplanation/tableTray'; import { Resizable } from 're-resizable'; +import type { CurrentSiteData } from '.'; declare module 'react' { interface CSSProperties { @@ -46,8 +47,8 @@ declare module 'react' { } } interface PanelProps { - setCurrentSite: React.Dispatch>; - currentSiteData: object | null; + setCurrentSite: React.Dispatch>; + currentSiteData: CurrentSiteData | null; } const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => { From e154886a3b65ab1f38de454e39cab6dd2c662408 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 13:59:42 +0530 Subject: [PATCH 10/29] Add jest.retryTimes(3) to flaky tests. --- .../extension/src/view/devtools/e2e-tests/allowList/index.ts | 2 +- .../src/view/devtools/e2e-tests/cookieLandingPage/index.ts | 2 +- .../view/devtools/e2e-tests/cookieSearch/validateClearSearch.ts | 2 +- .../devtools/e2e-tests/cookieSearch/validateSearchCookie.ts | 2 +- .../view/devtools/e2e-tests/cookieTable/cookieDescription.ts | 2 +- .../src/view/devtools/e2e-tests/cookieTable/cookieFilter.ts | 2 +- .../src/view/devtools/e2e-tests/cookieTable/cookieSorting.ts | 2 +- .../e2e-tests/cookieTable/cookieTableFilterClearAllButton.ts | 2 +- .../src/view/devtools/e2e-tests/rwsMembership/index.ts | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/extension/src/view/devtools/e2e-tests/allowList/index.ts b/packages/extension/src/view/devtools/e2e-tests/allowList/index.ts index 8f8051eb5..5f904ca85 100644 --- a/packages/extension/src/view/devtools/e2e-tests/allowList/index.ts +++ b/packages/extension/src/view/devtools/e2e-tests/allowList/index.ts @@ -27,7 +27,7 @@ import { PuppeteerManagement } from '../../test-utils/puppeteerManagement'; import { Interaction } from '../../test-utils/interaction'; dotenv.config(); - +jest.retryTimes(3); describe('Allow Listing', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieLandingPage/index.ts b/packages/extension/src/view/devtools/e2e-tests/cookieLandingPage/index.ts index 1656c188b..465fb1f9b 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieLandingPage/index.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieLandingPage/index.ts @@ -28,7 +28,7 @@ import { Interaction } from '../../test-utils/interaction'; import { selectors } from '../../test-utils/constants'; dotenv.config(); - +jest.retryTimes(3); describe('Validate the Cookies Tab and count', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateClearSearch.ts b/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateClearSearch.ts index b8dafc3a7..6d40d4285 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateClearSearch.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateClearSearch.ts @@ -27,7 +27,7 @@ import { PuppeteerManagement } from '../../test-utils/puppeteerManagement'; import { Interaction } from '../../test-utils/interaction'; dotenv.config(); - +jest.retryTimes(3); describe('Verify the Clear search button works as expected', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateSearchCookie.ts b/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateSearchCookie.ts index fcd76e90c..29ed15aab 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateSearchCookie.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieSearch/validateSearchCookie.ts @@ -28,7 +28,7 @@ import { Interaction } from '../../test-utils/interaction'; import { selectors } from '../../test-utils/constants'; dotenv.config(); - +jest.retryTimes(3); describe('Validate the Cookies search', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieDescription.ts b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieDescription.ts index 2f7a756c9..6d9d81147 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieDescription.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieDescription.ts @@ -29,7 +29,7 @@ import { Interaction } from '../../test-utils/interaction'; import { selectors } from '../../test-utils/constants'; dotenv.config(); - +jest.retryTimes(3); describe('Validate the Cookies description', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieFilter.ts b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieFilter.ts index f0603634e..217470ee1 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieFilter.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieFilter.ts @@ -27,7 +27,7 @@ import { PuppeteerManagement } from '../../test-utils/puppeteerManagement'; import { Interaction } from '../../test-utils/interaction'; dotenv.config(); - +jest.retryTimes(3); describe('Validate the Cookies filter option', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieSorting.ts b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieSorting.ts index 543224e2e..9093b607c 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieSorting.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieSorting.ts @@ -28,7 +28,7 @@ import { Interaction } from '../../test-utils/interaction'; import { selectors } from '../../test-utils/constants'; dotenv.config(); - +jest.retryTimes(3); describe('Validate the Cookies sort option', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieTableFilterClearAllButton.ts b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieTableFilterClearAllButton.ts index 76284caba..fa3d8b7f7 100644 --- a/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieTableFilterClearAllButton.ts +++ b/packages/extension/src/view/devtools/e2e-tests/cookieTable/cookieTableFilterClearAllButton.ts @@ -27,7 +27,7 @@ import { PuppeteerManagement } from '../../test-utils/puppeteerManagement'; import { Interaction } from '../../test-utils/interaction'; dotenv.config(); - +jest.retryTimes(3); describe('Validate the Cookies filter option', () => { let page: Page; let puppeteer: PuppeteerManagement; diff --git a/packages/extension/src/view/devtools/e2e-tests/rwsMembership/index.ts b/packages/extension/src/view/devtools/e2e-tests/rwsMembership/index.ts index ce0dbcb55..7261beb36 100644 --- a/packages/extension/src/view/devtools/e2e-tests/rwsMembership/index.ts +++ b/packages/extension/src/view/devtools/e2e-tests/rwsMembership/index.ts @@ -28,7 +28,7 @@ import { Interaction } from '../../test-utils/interaction'; import { selectors } from '../../test-utils/constants'; dotenv.config(); - +jest.retryTimes(3); describe('RWS membership', () => { let page: Page; let puppeteer: PuppeteerManagement; From 1edee39da59ac6f8225b983abfdaeb35598f2655 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 14:01:08 +0530 Subject: [PATCH 11/29] Fix lint error. --- .../procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts b/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts index a96b17db5..6aa665626 100644 --- a/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts +++ b/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts @@ -25,7 +25,6 @@ import { removeAndAddNewSpinnerText, type SingleURLError, type Selectors, - type SingleURLError, } from '@google-psat/common'; /** From 1baeb67b5fc29e8ee25b471d561be94b5ac3d63d Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 16:20:31 +0530 Subject: [PATCH 12/29] Fix lint failure. --- .../report/src/dashboard/components/siteMapReport/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/report/src/dashboard/components/siteMapReport/layout.tsx b/packages/report/src/dashboard/components/siteMapReport/layout.tsx index 89a52730d..87fe18a75 100644 --- a/packages/report/src/dashboard/components/siteMapReport/layout.tsx +++ b/packages/report/src/dashboard/components/siteMapReport/layout.tsx @@ -25,7 +25,6 @@ import { type CompleteJson, type LibraryData, noop, - type ErroredOutUrlsData, reshapeCookies, type ErroredOutUrlsData, } from '@google-psat/common'; From 00473daabdc781b601889dbc55ff2d3580d1e1bd Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Fri, 13 Dec 2024 16:32:52 +0530 Subject: [PATCH 13/29] Fix CLI E2E tests. --- packages/cli/src/utils/saveReports.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/cli/src/utils/saveReports.ts b/packages/cli/src/utils/saveReports.ts index 4feed456b..6f1b6b521 100644 --- a/packages/cli/src/utils/saveReports.ts +++ b/packages/cli/src/utils/saveReports.ts @@ -61,7 +61,6 @@ const saveReports = async ( ); const errorLogs = generateErrorLogFile(result); - await ensureFile(path.join(outDir, 'error_logs.txt')); await writeFile(path.join(outDir, 'error_logs.txt'), errorLogs); @@ -69,8 +68,6 @@ const saveReports = async ( await ensureFile(path.join(outDir, 'report.csv')); await writeFile(path.join(outDir, 'report.csv'), rootSummaryData); - const errorLogs = generateErrorLogFile(result); - await ensureFile(path.join(outDir, 'error_logs.txt')); await writeFile(path.join(outDir, 'error_logs.txt'), errorLogs); // Sitemap report From 46123a76499a279de1559cecc720dba6e29c030f Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Mon, 16 Dec 2024 12:24:08 +0530 Subject: [PATCH 14/29] Add down icon to hide table tray and move resizable logic to table tray component --- .../src/icons/double-down-arrow.svg | 2 + packages/design-system/src/icons/index.tsx | 1 + .../explorableExplanation/tableTray.tsx | 43 ++++++++++++++++--- .../explorableExplanation/panel.tsx | 16 +------ .../topics/explorableExplanation/panel.tsx | 16 +------ 5 files changed, 41 insertions(+), 37 deletions(-) create mode 100644 packages/design-system/src/icons/double-down-arrow.svg diff --git a/packages/design-system/src/icons/double-down-arrow.svg b/packages/design-system/src/icons/double-down-arrow.svg new file mode 100644 index 000000000..0bbe020c1 --- /dev/null +++ b/packages/design-system/src/icons/double-down-arrow.svg @@ -0,0 +1,2 @@ + + diff --git a/packages/design-system/src/icons/index.tsx b/packages/design-system/src/icons/index.tsx index 4be6bd6ec..edee20383 100644 --- a/packages/design-system/src/icons/index.tsx +++ b/packages/design-system/src/icons/index.tsx @@ -95,3 +95,4 @@ export { default as NextIcon } from './next.svg'; export { default as PreviousIcon } from './previous.svg'; export { default as WebStoriesIcon } from './web-stories.svg'; export { default as WebStoriesIconWhite } from './web-stories-white.svg'; +export { default as DoubleDownArrow } from './double-down-arrow.svg'; diff --git a/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx b/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx index b6645df1c..6b73a2ff7 100644 --- a/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx +++ b/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx @@ -17,21 +17,50 @@ /** * External dependencies. */ -import { Tabs, useTabs } from '@google-psat/design-system'; -import React from 'react'; +import { DoubleDownArrow, Tabs, useTabs } from '@google-psat/design-system'; +import { Resizable } from 're-resizable'; +import React, { useState } from 'react'; const TableTray = () => { const { panel } = useTabs(({ state }) => ({ panel: state.panel })); const ActiveTabContent = panel.Element; const props = panel.props; + const [hidden, setHidden] = useState(false); + return ( -
-
- +
+ ); }; 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 1878420fd..a9539c31b 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,6 @@ import { NextIcon, PreviousIcon, useTabs } from '@google-psat/design-system'; */ import Header from '../../../explorableExplanation/header'; import TableTray from '../../../explorableExplanation/tableTray'; -import { Resizable } from 're-resizable'; import type { CurrentSiteData } from '.'; declare module 'react' { @@ -249,20 +248,7 @@ const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => { setCurrentSite={setCurrentSite} /> - - - +
); }; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx index 883b74b4f..31778c674 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx @@ -23,7 +23,6 @@ import React, { useRef, useState, } from 'react'; -import { Resizable } from 're-resizable'; /** * Internal dependencies. @@ -249,20 +248,7 @@ const Panel = ({ setCurrentVisitIndexCallback={setCurrentVisitIndexCallback} /> - - - + ); }; From 955496406209ac9635f841e130a50c61d1acb7d4 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Mon, 16 Dec 2024 12:53:03 +0530 Subject: [PATCH 15/29] Add info panel for showing data --- .../explorableExplanation/tableTray.tsx | 3 +- .../explorableExplanation/index.tsx | 10 ++++ .../explorableExplanation/infoPanel.tsx | 52 +++++++++++++++++++ 3 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/infoPanel.tsx diff --git a/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx b/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx index 6b73a2ff7..3a4562d2f 100644 --- a/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx +++ b/packages/extension/src/view/devtools/components/explorableExplanation/tableTray.tsx @@ -47,9 +47,8 @@ const TableTray = () => { enable={{ top: true, }} - className="h-full flex" > -
+
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 fc699387c..7514b46fb 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 @@ -31,6 +31,7 @@ import { } from './constants'; import type { InterestGroups } from '@google-psat/common'; import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; +import InfoPanel from './infoPanel'; export interface CurrentSiteData { type: 'advertiser' | 'publisher'; @@ -95,6 +96,15 @@ const ExplorableExplanation = () => { }, }, }, + { + title: 'Info', + content: { + Element: InfoPanel, + props: { + data: undefined, + }, + }, + }, ], [auctionsData, interestGroupData] ); diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/infoPanel.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/infoPanel.tsx new file mode 100644 index 000000000..9ea460353 --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/infoPanel.tsx @@ -0,0 +1,52 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies. + */ +import { prettyPrintJson } from 'pretty-print-json'; +import React from 'react'; + +interface InfoPanelProps { + data: any; +} + +const InfoPanel = ({ data }: InfoPanelProps) => { + return ( +
+ {data ? ( +
+ 
+            

+
+
+ ) : ( +
+

+ No data available +

+
+ )} +
+ ); +}; + +export default InfoPanel; From 4743a496a258af693a0f6e455dbbe76bb45d3a7a Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Mon, 16 Dec 2024 16:07:57 +0530 Subject: [PATCH 16/29] Generate synthetic auction event. --- .../auctionEventTransformers.ts | 204 ++++++ .../explorableExplanation/constants.ts | 634 +++--------------- .../explorableExplanation/index.tsx | 36 +- 3 files changed, 339 insertions(+), 535 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts 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 new file mode 100644 index 000000000..423ad32b5 --- /dev/null +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/auctionEventTransformers.ts @@ -0,0 +1,204 @@ +/* + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * External dependencies + */ +import type { singleAuctionEvent } from '@google-psat/common'; +/** + * Internal dependencies + */ +import { + SYNTHETIC_AUCTION_CONFIG, + SYNTHETIC_AUCTION_EVENT_BIDDERJS, + SYNTHETIC_AUCTION_EVENT_CONFIG_RESOLVED, + SYNTHETIC_AUCTION_EVENT_LOADED, + SYNTHETIC_AUCTION_EVENT_STARTED, + SYNTHETIC_AUCTION_EVENTS_BID, +} from './constants'; + +export const transformAuctionConfig = (seller: string) => { + const eventAuctionConfig = structuredClone(SYNTHETIC_AUCTION_CONFIG); + eventAuctionConfig.decisionLogicURL.replace( + 'privacysandboxdemos-seller.domain-aaa', + seller + ); + eventAuctionConfig.seller.replace( + 'privacysandboxdemos-seller.domain-aaa', + seller + ); + eventAuctionConfig.trustedScoringSignalsURL.replace( + 'privacysandboxdemos-seller.domain-aaa', + seller + ); + return eventAuctionConfig; +}; + +export const transformFetchingEvents = ( + advertisers: string[], + type: 'finish' | 'start', + seller: string, + eventName: + | 'bidderTrustedSignals' + | 'sellerJS' + | 'bidderJS' + | 'sellerTrustedSignals' +) => { + const fetchEventsToBeReturned: singleAuctionEvent[] = []; + + if (type === 'finish') { + advertisers.forEach(() => { + const eventToModify: singleAuctionEvent = structuredClone( + SYNTHETIC_AUCTION_EVENT_BIDDERJS + ) as singleAuctionEvent; + eventToModify.type = 'Finished Fetch ' + eventName; + eventToModify.auctionConfig = transformAuctionConfig(seller); + eventToModify.eventType = 'interestGroupAuctionNetworkRequestCompleted'; + fetchEventsToBeReturned.push(eventToModify); + }); + return fetchEventsToBeReturned; + } else { + advertisers.forEach(() => { + const eventToModify: singleAuctionEvent = + SYNTHETIC_AUCTION_EVENT_BIDDERJS as singleAuctionEvent; + eventToModify.type = 'Start Fetch ' + eventName; + eventToModify.eventType = 'interestGroupAuctionNetworkRequestCreated'; + fetchEventsToBeReturned.push(eventToModify); + }); + return fetchEventsToBeReturned; + } +}; + +export const transformStartedEvent = (seller: string) => { + return { + ...SYNTHETIC_AUCTION_EVENT_STARTED, + auctionConfig: transformAuctionConfig(seller), + }; +}; + +export const transformConfigResolvedEvent = (seller: string) => { + return { + ...SYNTHETIC_AUCTION_EVENT_CONFIG_RESOLVED, + auctionConfig: transformAuctionConfig(seller), + }; +}; + +export const transformLoadedEvent = ( + interestGroups: { + interestGroupName: string; + ownerOrigin: string; + }[] +) => { + const interestGroupEvents: singleAuctionEvent[] = []; + + interestGroups.forEach(({ interestGroupName, ownerOrigin }) => { + const eventToModify: singleAuctionEvent = structuredClone( + SYNTHETIC_AUCTION_EVENT_LOADED + ) as singleAuctionEvent; + eventToModify.ownerOrigin = ownerOrigin; + eventToModify.name = interestGroupName; + + interestGroupEvents.push(eventToModify); + }); + + return interestGroupEvents; +}; + +export const transformBidEvent = ( + interestGroups: { + interestGroupName: string; + ownerOrigin: string; + }[] +) => { + const bidEventsToBeReturned: singleAuctionEvent[] = []; + + interestGroups.forEach(({ interestGroupName, ownerOrigin }) => { + const eventToModify: singleAuctionEvent = structuredClone( + SYNTHETIC_AUCTION_EVENTS_BID + ) as singleAuctionEvent; + eventToModify.ownerOrigin = ownerOrigin; + eventToModify.name = interestGroupName; + eventToModify.bid = randomIntFromInterval(1, 100); + bidEventsToBeReturned.push(eventToModify); + }); + + return bidEventsToBeReturned; +}; + +export const createAuctionEvents = ( + interestGroups: { + interestGroupName: string; + ownerOrigin: string; + }[], + seller: string, + advertisers: string[] +) => { + const bidEvents = transformBidEvent(interestGroups); + + bidEvents.sort((a, b) => (a?.bid ?? 0) - (b?.bid ?? 0)); + + const winEvent = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: bidEvents[bidEvents.length - 1].name, + ownerOrigin: bidEvents[bidEvents.length - 1].ownerOrigin, + formattedTime: '629.06ms', + type: 'win', + time: 1734076670.129756, + bid: bidEvents[bidEvents.length - 1].bid, + bidCurrency: bidEvents[bidEvents.length - 1].bidCurrency, + eventType: 'interestGroupAccessed', + }; + + const events = [ + transformStartedEvent(seller), + transformConfigResolvedEvent(seller), + transformLoadedEvent(interestGroups), + transformFetchingEvents( + advertisers, + 'start', + seller, + 'bidderTrustedSignals' + ), + transformFetchingEvents(advertisers, 'start', seller, 'bidderJS'), + transformFetchingEvents(advertisers, 'start', seller, 'sellerJS'), + transformFetchingEvents(advertisers, 'finish', seller, 'bidderJS'), + transformFetchingEvents( + advertisers, + 'start', + seller, + 'sellerTrustedSignals' + ), + bidEvents, + transformFetchingEvents( + advertisers, + 'finish', + seller, + 'sellerTrustedSignals' + ), + winEvent, + transformFetchingEvents( + advertisers, + 'finish', + seller, + 'bidderTrustedSignals' + ), + ]; + return events.flat(); +}; + +const randomIntFromInterval = (min: number, max: number) => { + // min and max included + return Math.floor(Math.random() * (max - min + 1) + min); +}; 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 09e6b9ec7..7cb333596 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 @@ -848,531 +848,109 @@ export const SYNTHETIC_INTEREST_GROUPS = { ], }; -export const SYNTHETIC_AUCTION_EVENTS = [ - [ - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - type: 'started', - formattedTime: '0 ms', - time: 1734076669.500694, - auctionConfig: { - auctionSignals: { - pending: true, - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: true, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: true, - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionEventOccurred', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - type: 'configResolved', - formattedTime: '0.75ms', - time: 1734076669.501441, - auctionConfig: { - auctionSignals: { - pending: false, - value: '{"auction_signals":"auction_signals"}', - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: false, - value: { - 'https://privacysandboxdemos-buyer-1.domain-aaa.com': - '{"buyerdata":"per_buyer_signals"}', - }, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: false, - value: - '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionEventOccurred', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - name: 'shoes', - ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - formattedTime: '2.16ms', - type: 'loaded', - time: 1734076669.502853, - eventType: 'interestGroupAccessed', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - name: 'books', - ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - formattedTime: '2.41ms', - type: 'loaded', - time: 1734076669.503104, - eventType: 'interestGroupAccessed', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - formattedTime: '76.09ms', - type: 'Start fetch bidderTrustedSignals', - time: 1734076669.576781, - eventType: 'interestGroupAuctionNetworkRequestCreated', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - formattedTime: '76.79ms', - type: 'Start fetch sellerJs', - time: 1734076669.577482, - eventType: 'interestGroupAuctionNetworkRequestCreated', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - formattedTime: '77.17ms', - type: 'Start fetch bidderJs', - time: 1734076669.577862, - eventType: 'interestGroupAuctionNetworkRequestCreated', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - bidCurrency: '', - bid: null, - name: '', - ownerOrigin: '', - type: 'Finished FetchbidderTrustedSignals', - formattedTime: '78.95ms', - time: 1734076669.579643, - auctionConfig: { - auctionSignals: { - pending: false, - value: '{"auction_signals":"auction_signals"}', - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: false, - value: { - 'https://privacysandboxdemos-buyer-1.domain-aaa.com': - '{"buyerdata":"per_buyer_signals"}', - }, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: false, - value: - '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionNetworkRequestCompleted', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - bidCurrency: '', - bid: null, - name: '', - ownerOrigin: '', - type: 'Finished FetchbidderJs', - formattedTime: '464.45ms', - time: 1734076669.965148, - auctionConfig: { - auctionSignals: { - pending: false, - value: '{"auction_signals":"auction_signals"}', - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: false, - value: { - 'https://privacysandboxdemos-buyer-1.domain-aaa.com': - '{"buyerdata":"per_buyer_signals"}', - }, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: false, - value: - '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionNetworkRequestCompleted', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - name: 'shoes', - ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - formattedTime: '472.61ms', - type: 'bid', - time: 1734076669.973304, - eventType: 'interestGroupAccessed', - bid: 24, - bidCurrency: 'USD', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - name: 'books', - ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - formattedTime: '475.95ms', - type: 'bid', - time: 1734076669.976647, - eventType: 'interestGroupAccessed', - bid: 1, - bidCurrency: 'USD', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - formattedTime: '476.71ms', - type: 'Start fetch sellerTrustedSignals', - time: 1734076669.977401, - eventType: 'interestGroupAuctionNetworkRequestCreated', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - bidCurrency: '', - bid: null, - name: '', - ownerOrigin: '', - type: 'Finished FetchsellerJs', - formattedTime: '540.07ms', - time: 1734076670.040759, - auctionConfig: { - auctionSignals: { - pending: false, - value: '{"auction_signals":"auction_signals"}', - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: false, - value: { - 'https://privacysandboxdemos-buyer-1.domain-aaa.com': - '{"buyerdata":"per_buyer_signals"}', - }, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: false, - value: - '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionNetworkRequestCompleted', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - bidCurrency: '', - bid: null, - name: '', - ownerOrigin: '', - type: 'Finished FetchsellerTrustedSignals', - formattedTime: '614.30ms', - time: 1734076670.114991, - auctionConfig: { - auctionSignals: { - pending: false, - value: '{"auction_signals":"auction_signals"}', - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: false, - value: { - 'https://privacysandboxdemos-buyer-1.domain-aaa.com': - '{"buyerdata":"per_buyer_signals"}', - }, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: false, - value: - '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionNetworkRequestCompleted', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - name: 'shoes', - ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - formattedTime: '629.06ms', - type: 'win', - time: 1734076670.129756, - eventType: 'interestGroupAccessed', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - formattedTime: '704.83ms', - type: 'Start fetch bidderJs', - time: 1734076670.205522, - eventType: 'interestGroupAuctionNetworkRequestCreated', - }, - { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - bidCurrency: '', - bid: null, - name: '', - ownerOrigin: '', - type: 'Finished FetchbidderJs', - formattedTime: '706.31ms', - time: 1734076670.207004, - auctionConfig: { - auctionSignals: { - pending: false, - value: '{"auction_signals":"auction_signals"}', - }, - decisionLogicURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', - deprecatedRenderURLReplacements: { - pending: false, - value: [], - }, - expectsAdditionalBids: false, - expectsDirectFromSellerSignalsHeaderAdSlot: false, - interestGroupBuyers: [ - 'https://privacysandboxdemos-buyer-1.domain-aaa.com', - ], - maxTrustedScoringSignalsURLLength: 0, - perBuyerCumulativeTimeouts: { - pending: false, - value: {}, - }, - perBuyerCurrencies: { - pending: false, - value: {}, - }, - perBuyerExperimentGroupIds: {}, - perBuyerGroupLimits: { - '*': 65535, - }, - perBuyerMultiBidLimit: { - '*': 0, - }, - perBuyerPrioritySignals: {}, - perBuyerSignals: { - pending: false, - value: { - 'https://privacysandboxdemos-buyer-1.domain-aaa.com': - '{"buyerdata":"per_buyer_signals"}', - }, - }, - perBuyerTimeouts: { - pending: false, - value: {}, - }, - requiredSellerCapabilities: [], - seller: 'https://privacysandboxdemos-seller.domain-aaa.com', - sellerSignals: { - pending: false, - value: - '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', - }, - trustedScoringSignalsURL: - 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', - }, - eventType: 'interestGroupAuctionNetworkRequestCompleted', - }, - ], -]; +export const SYNTHETIC_AUCTION_EVENT_STARTED = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + type: 'started', + formattedTime: '0 ms', + time: 1734076669.500694, + eventType: 'interestGroupAuctionEventOccurred', +}; +export const SYNTHETIC_AUCTION_EVENT_CONFIG_RESOLVED = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + type: 'configResolved', + formattedTime: '0.75ms', + time: 1734076669.501441, + eventType: 'interestGroupAuctionEventOccurred', +}; + +export const SYNTHETIC_AUCTION_EVENT_LOADED = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'shoes', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '2.16ms', + type: 'loaded', + time: 1734076669.502853, + eventType: 'interestGroupAccessed', +}; + +export const SYNTHETIC_AUCTION_EVENT_BIDDERJS = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + formattedTime: '77.17ms', + type: 'Start fetch bidderJs', + time: 1734076669.577862, + eventType: 'interestGroupAuctionNetworkRequestCreated', +}; + +export const SYNTHETIC_AUCTION_EVENTS_BID = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'shoes', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '472.61ms', + type: 'bid', + time: 1734076669.973304, + eventType: 'interestGroupAccessed', + bid: 24, + bidCurrency: 'USD', +}; + +export const SYNTHETIC_AUCTION_EVENTS_WIN = { + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: 'shoes', + ownerOrigin: 'https://privacysandboxdemos-buyer-1.domain-aaa.com', + formattedTime: '629.06ms', + type: 'win', + time: 1734076670.129756, + eventType: 'interestGroupAccessed', +}; + +export const SYNTHETIC_AUCTION_CONFIG = { + auctionSignals: { + pending: false, + value: '{"auction_signals":"auction_signals"}', + }, + decisionLogicURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/decision-logic.js', + deprecatedRenderURLReplacements: { + pending: false, + value: [], + }, + expectsAdditionalBids: false, + expectsDirectFromSellerSignalsHeaderAdSlot: false, + interestGroupBuyers: ['https://dsp.com'], + maxTrustedScoringSignalsURLLength: 0, + perBuyerCumulativeTimeouts: { + pending: false, + value: {}, + }, + perBuyerCurrencies: { + pending: false, + value: {}, + }, + perBuyerExperimentGroupIds: {}, + perBuyerGroupLimits: { + '*': 65535, + }, + perBuyerMultiBidLimit: { + '*': 0, + }, + perBuyerPrioritySignals: {}, + perBuyerSignals: { + pending: false, + value: { + 'https://dsp.com': '{"buyerdata":"per_buyer_signals"}', + }, + }, + perBuyerTimeouts: { + pending: false, + value: {}, + }, + requiredSellerCapabilities: [], + seller: 'https://privacysandboxdemos-seller.domain-aaa.com', + sellerSignals: { + pending: false, + value: + '{"bidFloor":7,"floor":7,"auctionID":"id_683036","divId":"ad-container","type":"image","size":[300,250],"isFencedFrame":true}', + }, + trustedScoringSignalsURL: + 'https://privacysandboxdemos-seller.domain-aaa.com/ssp/kv.json', +}; 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 fc699387c..6c6baad5f 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 @@ -25,12 +25,10 @@ import React, { useMemo, useState } from 'react'; import Panel from './panel'; import IGTable from '../interestGroups/table'; import Auctions from './auctions'; -import { - SYNTHETIC_AUCTION_EVENTS, - SYNTHETIC_INTEREST_GROUPS, -} from './constants'; +import { SYNTHETIC_INTEREST_GROUPS } from './constants'; import type { InterestGroups } from '@google-psat/common'; import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context'; +import { createAuctionEvents } from './auctionEventTransformers'; export interface CurrentSiteData { type: 'advertiser' | 'publisher'; @@ -45,23 +43,37 @@ export interface CurrentSiteData { const ExplorableExplanation = () => { const [currentSiteData, setCurrentSiteData] = useState(null); + const [interestGroups, setInterestGroups] = useState< + { + interestGroupName: string; + ownerOrigin: string; + }[] + >([]); const auctionsData = useMemo(() => { if (!currentSiteData || currentSiteData?.type === 'advertiser') { return {}; } + const advertiserSet = new Set(); + interestGroups.forEach(({ ownerOrigin }) => { + advertiserSet.add(ownerOrigin); + }); + return { 'div-200-1': { [new Date(currentSiteData?.datetime).toUTCString()]: { [`https://www.${currentSiteData?.website}`]: { - [`https://www.${currentSiteData?.website}`]: - SYNTHETIC_AUCTION_EVENTS[0], + [`https://www.${currentSiteData?.website}`]: createAuctionEvents( + interestGroups, + currentSiteData?.website, + Array.from(advertiserSet) + ), }, }, }, }; - }, [currentSiteData]); + }, [currentSiteData, interestGroups]); const interestGroupData = useMemo(() => { if (!currentSiteData || currentSiteData?.type === 'publisher') { @@ -72,6 +84,16 @@ const ExplorableExplanation = () => { //@ts-ignore SYNTHETIC_INTEREST_GROUPS[currentSiteData?.website]; + setInterestGroups((prevState) => { + return [ + ...prevState, + ...perSiteInterestGroups.map(({ name, ownerOrigin }) => ({ + interestGroupName: name ?? '', + ownerOrigin: ownerOrigin ?? '', + })), + ]; + }); + return perSiteInterestGroups; }, [currentSiteData]); From a21b16d771b165b543be9df3514d31bb7fa02c5d Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Mon, 16 Dec 2024 16:39:06 +0530 Subject: [PATCH 17/29] Add event times --- .../auctionEventTransformers.ts | 64 ++++++++++++++----- .../explorableExplanation/index.tsx | 3 +- 2 files changed, 51 insertions(+), 16 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 423ad32b5..a2dc6ac39 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 @@ -28,6 +28,18 @@ import { SYNTHETIC_AUCTION_EVENT_STARTED, SYNTHETIC_AUCTION_EVENTS_BID, } from './constants'; +import formatTime from '../../../../../../store/utils/formatTime'; + +const getRandomisedNumbers = (count: number, min: number, max: number) => { + const randomNumbers = Array.from( + { length: count }, + () => Math.floor(Math.random() * (max - min + 1)) + min + ); + + randomNumbers.sort((a, b) => a - b); + + return randomNumbers; +}; export const transformAuctionConfig = (seller: string) => { const eventAuctionConfig = structuredClone(SYNTHETIC_AUCTION_CONFIG); @@ -63,20 +75,28 @@ export const transformFetchingEvents = ( const eventToModify: singleAuctionEvent = structuredClone( SYNTHETIC_AUCTION_EVENT_BIDDERJS ) as singleAuctionEvent; + eventToModify.type = 'Finished Fetch ' + eventName; eventToModify.auctionConfig = transformAuctionConfig(seller); + eventToModify.eventType = 'interestGroupAuctionNetworkRequestCompleted'; + fetchEventsToBeReturned.push(eventToModify); }); + return fetchEventsToBeReturned; } else { advertisers.forEach(() => { const eventToModify: singleAuctionEvent = SYNTHETIC_AUCTION_EVENT_BIDDERJS as singleAuctionEvent; + eventToModify.type = 'Start Fetch ' + eventName; + eventToModify.eventType = 'interestGroupAuctionNetworkRequestCreated'; + fetchEventsToBeReturned.push(eventToModify); }); + return fetchEventsToBeReturned; } }; @@ -131,6 +151,7 @@ export const transformBidEvent = ( eventToModify.ownerOrigin = ownerOrigin; eventToModify.name = interestGroupName; eventToModify.bid = randomIntFromInterval(1, 100); + bidEventsToBeReturned.push(eventToModify); }); @@ -143,24 +164,13 @@ export const createAuctionEvents = ( ownerOrigin: string; }[], seller: string, - advertisers: string[] + advertisers: string[], + eventStartTime: number ) => { const bidEvents = transformBidEvent(interestGroups); bidEvents.sort((a, b) => (a?.bid ?? 0) - (b?.bid ?? 0)); - const winEvent = { - uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', - name: bidEvents[bidEvents.length - 1].name, - ownerOrigin: bidEvents[bidEvents.length - 1].ownerOrigin, - formattedTime: '629.06ms', - type: 'win', - time: 1734076670.129756, - bid: bidEvents[bidEvents.length - 1].bid, - bidCurrency: bidEvents[bidEvents.length - 1].bidCurrency, - eventType: 'interestGroupAccessed', - }; - const events = [ transformStartedEvent(seller), transformConfigResolvedEvent(seller), @@ -187,7 +197,17 @@ export const createAuctionEvents = ( seller, 'sellerTrustedSignals' ), - winEvent, + { + formattedTime: '', + uniqueAuctionId: '27A93A016A30D0A5FB7B8C8779D98AF8', + name: bidEvents[bidEvents.length - 1].name, + ownerOrigin: bidEvents[bidEvents.length - 1].ownerOrigin, + type: 'win', + time: 1734076670.129756, + bid: bidEvents[bidEvents.length - 1].bid, + bidCurrency: bidEvents[bidEvents.length - 1].bidCurrency, + eventType: 'interestGroupAccessed', + }, transformFetchingEvents( advertisers, 'finish', @@ -195,7 +215,21 @@ export const createAuctionEvents = ( 'bidderTrustedSignals' ), ]; - return events.flat(); + + const flattenedEvents = events.flat(); + + const randomNumbers = getRandomisedNumbers(flattenedEvents.length, 0, 1000); + + flattenedEvents.map((event, index) => { + event.formattedTime = formatTime( + eventStartTime, + eventStartTime + randomNumbers[index] / 1000 + ); + event.time = eventStartTime + randomNumbers[index]; + + return event; + }); + return flattenedEvents; }; const randomIntFromInterval = (min: number, max: number) => { 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 6c6baad5f..8a956fd25 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 @@ -67,7 +67,8 @@ const ExplorableExplanation = () => { [`https://www.${currentSiteData?.website}`]: createAuctionEvents( interestGroups, currentSiteData?.website, - Array.from(advertiserSet) + Array.from(advertiserSet), + new Date(currentSiteData?.datetime).getTime() ), }, }, From 211a2fa60d85e6b6c87853871b6e5bdfb5294718 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Mon, 16 Dec 2024 17:15:07 +0530 Subject: [PATCH 18/29] Fix linting issues. --- .../procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts | 1 + .../report/src/dashboard/components/siteMapReport/layout.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts b/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts index 8b94ce82a..6ab54674a 100644 --- a/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts +++ b/packages/analysis-utils/src/procedures/analyzeCookiesUrlsInBatchesAndFetchResources.ts @@ -22,6 +22,7 @@ import { type CookieDatabase, LibraryData, type LibraryMatchers, + type SingleURLError, removeAndAddNewSpinnerText, type Selectors, } from '@google-psat/common'; diff --git a/packages/report/src/dashboard/components/siteMapReport/layout.tsx b/packages/report/src/dashboard/components/siteMapReport/layout.tsx index 0f591ac87..09045e161 100644 --- a/packages/report/src/dashboard/components/siteMapReport/layout.tsx +++ b/packages/report/src/dashboard/components/siteMapReport/layout.tsx @@ -24,6 +24,7 @@ import { type CookieFrameStorageType, type CompleteJson, type LibraryData, + type ErroredOutUrlsData, noop, reshapeCookies, } from '@google-psat/common'; From c043fb50d3028a049f4d4e0f37578e9340bc02b7 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Mon, 16 Dec 2024 17:49:12 +0530 Subject: [PATCH 19/29] FIx comparator. --- .../protectedAudience/auctions/table/index.tsx | 5 +++-- .../explorableExplanation/auctionEventTransformers.ts | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx index 421bad248..ef3977bb9 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/table/index.tsx @@ -50,8 +50,9 @@ const AuctionTable = ({ () => [ { header: 'Event Time', - accessorKey: 'formattedTime', - cell: (info) => info, + accessorKey: 'time', + cell: (info, details) => + (details as singleAuctionEvent)?.formattedTime as string, enableHiding: false, widthWeightagePercentage: 10, }, 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 a2dc6ac39..e393e43a4 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 @@ -229,6 +229,7 @@ export const createAuctionEvents = ( return event; }); + flattenedEvents.sort((a, b) => a.time - b.time); return flattenedEvents; }; From 796aa8ba1cf4b8279ecd7606c7a9087841ed2478 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Tue, 17 Dec 2024 18:13:19 +0530 Subject: [PATCH 20/29] Handle reset and do not add table data till interest groups are added. --- .../src/protectedAudience/index.js | 1 - .../protectedAudience/explorableExplanation/index.tsx | 1 + .../protectedAudience/explorableExplanation/panel.tsx | 9 +++++++-- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/explorable-explanations/src/protectedAudience/index.js b/packages/explorable-explanations/src/protectedAudience/index.js index 0778003af..b61e1dc4a 100644 --- a/packages/explorable-explanations/src/protectedAudience/index.js +++ b/packages/explorable-explanations/src/protectedAudience/index.js @@ -46,7 +46,6 @@ app.setUpTimeLine = () => { app.bubbles.positions = []; app.bubbles.minifiedSVG = null; app.timeline.currentIndex = 0; - app.setCurrentSite(config.timeline.circles[app.timeline.currentIndex]); bubbles.clearAndRewriteBubbles(); app.setup(); 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 077522269..661b03e78 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 @@ -44,6 +44,7 @@ export interface CurrentSiteData { const ExplorableExplanation = () => { const [currentSiteData, setCurrentSiteData] = useState(null); + const [interestGroups, setInterestGroups] = useState< { interestGroupName: string; 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 a9539c31b..0bf74e131 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 @@ -139,13 +139,18 @@ const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => { const containerRefCopy = containerRef; return () => { - app.reset(true); + app.reset(); if (containerRefCopy.current) { handleResizeCallback.unobserve(containerRefCopy.current); } }; }, [handleResizeCallback]); + const resetHandler = useCallback(() => { + app.reset(); + setCurrentSite(null); + }, [setCurrentSite]); + const extraInterface = (