Fix: Protected audience sort button (#1161)

* Fix PA-sort button

* use set interval instead of settimeout

* Fix session count inconsistency

Author: amovar18

packages/extension/src/store/PRTStore.ts

@@ -378,7 +378,7 @@ class PRTStore extends DataStore {
 
       globalStats.domains = Object.keys(prtStatistics).length;
 
-      globalStats.mdl = await chrome.runtime.sendMessage({
+      await chrome.runtime.sendMessage({
         type: TAB_TOKEN_DATA,
         payload: {
           tabId,

packages/extension/src/view/devtools/pages/privateAdvertising/protectedAudience/auctions/components/sortButton/index.tsx

@@ -21,20 +21,29 @@ import { DescendingOrder } from '@google-psat/design-system';
 
 interface SortButtonProps {
   sortOrder: 'asc' | 'desc';
-  setSortOrder: React.Dispatch<React.SetStateAction<'asc' | 'desc'>>;
+  setSortOrder: React.Dispatch<
+    React.SetStateAction<Record<string, 'asc' | 'desc'>>
+  >;
   isSidebarFocused: boolean;
+  adUnit: string;
 }
 
 const SortButton = ({
   setSortOrder,
   sortOrder,
   isSidebarFocused,
+  adUnit,
 }: SortButtonProps) => {
   return (
     <span
       className="h-full"
       onClick={() => {
-        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+        setSortOrder((prev) => {
+          return {
+            ...prev,
+            [adUnit]: prev[adUnit] === 'asc' ? 'desc' : 'asc',
+          };
+        });
       }}
       title={`Sort in ${
         sortOrder === 'asc' ? 'descending' : 'ascending'

packages/extension/src/view/devtools/pages/privateAdvertising/protectedAudience/auctions/hooks/useDataProcessing.tsx

@@ -17,24 +17,27 @@
 /**
  * External dependencies.
  */
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 /**
  * Internal dependencies.
  */
 import { usePrebid, useProtectedAudience } from '../../../../../stateProviders';
 
 const useDataProcessing = () => {
-  const { paapi, isMultiSeller } = useProtectedAudience(({ state }) => ({
-    paapi: {
-      auctionEvents: state.auctionEvents,
-      adsAndBidders: state.adsAndBidders,
+  const { paapi, isMultiSeller, setSortOrder } = useProtectedAudience(
+    ({ state, actions }) => ({
+      paapi: {
+        auctionEvents: state.auctionEvents,
+        adsAndBidders: state.adsAndBidders,
+        isMultiSeller: state.isMultiSellerAuction,
+        receivedBids: state.receivedBids,
+        noBids: state.noBids,
+      },
       isMultiSeller: state.isMultiSellerAuction,
-      receivedBids: state.receivedBids,
-      noBids: state.noBids,
-    },
-    isMultiSeller: state.isMultiSellerAuction,
-  }));
+      setSortOrder: actions.setSortOrder,
+    })
+  );
 
   const {
     prebidAdunits,
@@ -56,9 +59,34 @@ const useDataProcessing = () => {
     return Object.keys(paapi?.adsAndBidders || {});
   }, [paapi.adsAndBidders, prebidAdunits]);
 
+  useEffect(() => {
+    const _sortOrder: Record<string, 'asc' | 'desc'> = {};
+    if (Object.keys(prebidAdunits || {}).length > 0) {
+      Object.values(prebidAuctionEvents || {}).forEach((events) => {
+        if (!events?.length || !events[0]?.adUnitCodes?.length) {
+          return;
+        }
+
+        const _adUnits = events[0].adUnitCodes as string[];
+
+        _adUnits.forEach((adUnit) => {
+          _sortOrder[adUnit] = 'asc';
+        });
+      });
+    }
+
+    if (Object.keys(paapi?.adsAndBidders || {}).length > 0) {
+      const _adUnits = Object.keys(paapi.adsAndBidders || {});
+
+      _adUnits.forEach((adUnit) => {
+        _sortOrder[adUnit] = 'asc';
+      });
+    }
+    setSortOrder(_sortOrder);
+  }, [paapi.adsAndBidders, prebidAdunits, prebidAuctionEvents, setSortOrder]);
+
   const adUnitsTimestamp = useMemo(() => {
     const _adUnitsTimestamp: Record<string, string[]> = {};
-
     if (Object.keys(prebidAdunits || {}).length > 0) {
       Object.values(prebidAuctionEvents || {}).forEach((events) => {
         if (!events?.length || !events[0]?.adUnitCodes?.length) {

packages/extension/src/view/devtools/pages/privateAdvertising/protectedAudience/auctions/hooks/useSidebarProcessing.tsx

@@ -50,7 +50,7 @@ const useSidebarProcessing = () => {
     _prebidAuctionEvents: state.prebidData?.auctionEvents || {},
   }));
 
-  const changedValue = useRef({ oldAuctionEvents: {}, oldSortOrder: '' });
+  const changedValue = useRef({ oldAuctionEvents: {}, oldSortOrder: {} });
 
   const { updateSelectedItemKey, isSidebarFocused, isKeySelected } = useSidebar(
     ({ state, actions }) => ({
@@ -98,7 +98,7 @@ const useSidebarProcessing = () => {
           _prebidAuctionEvents,
           _paAuctionEvents,
         },
-        oldSortOrder: sortOrder ?? '',
+        oldSortOrder: sortOrder,
       };
     };
   }, [_paAuctionEvents, _prebidAuctionEvents, sortOrder]);
@@ -245,8 +245,9 @@ const useSidebarProcessing = () => {
         adUnitContainerChildren[adUnit].extraInterfaceToTitle = {
           Element: SortButton,
           props: {
+            adUnit,
             setSortOrder,
-            sortOrder,
+            sortOrder: sortOrder[adUnit],
             isSidebarFocused: isSidebarFocused && isKeySelected(adUnit),
           },
         };
@@ -258,8 +259,8 @@ const useSidebarProcessing = () => {
         newSidebarData.adunits.children = {
           ...adUnitContainerChildren,
         };
-        if (sortOrder === 'asc') {
-          Object.keys(newSidebarData['adunits'].children).forEach((adUnit) => {
+        Object.keys(newSidebarData['adunits'].children).forEach((adUnit) => {
+          if (sortOrder[adUnit] === 'asc') {
             const sortedKeys = Object.keys(
               newSidebarData['adunits'].children[adUnit].children
             ).sort((a, b) => {
@@ -274,9 +275,7 @@ const useSidebarProcessing = () => {
                   newSidebarData['adunits'].children[adUnit].children[key];
                 return acc;
               }, {} as SidebarItems);
-          });
-        } else {
-          Object.keys(newSidebarData['adunits'].children).forEach((adUnit) => {
+          } else {
             const sortedKeys = Object.keys(
               newSidebarData['adunits'].children[adUnit].children
             ).sort((a, b) => {
@@ -292,8 +291,8 @@ const useSidebarProcessing = () => {
                   newSidebarData['adunits'].children[adUnit].children[key];
                 return acc;
               }, {} as SidebarItems);
-          });
-        }
+          }
+        });
       }
 
       return newSidebarData;

packages/extension/src/view/devtools/stateProviders/probabilisticRevealTokens/probabilisticRevealTokensProvider.tsx

@@ -168,12 +168,11 @@ const Provider = ({ children }: PropsWithChildren) => {
             acc.nonZeroSignal =
               prtStatistics[key].nonZeroSignal + acc.nonZeroSignal;
 
-            let hostname = isValidURL(origin) ? new URL(origin).hostname : '';
+            let hostname = isValidURL(key) ? new URL(key).hostname : '';
 
             hostname = hostname.startsWith('www.')
               ? hostname.slice(4)
               : hostname;
-
             acc.mdl +=
               hostname &&
               scriptBlockingData.filter((_data) => _data.domain === hostname)
@@ -190,10 +189,15 @@ const Provider = ({ children }: PropsWithChildren) => {
 
       if (hasChangesForPrtStatisticsData) {
         setStatistics((prev) => {
-          return {
+          const newData = {
             ...prev,
             globalView: globalStats,
           };
+
+          if (isEqual(prev, newData)) {
+            return prev;
+          }
+          return newData;
         });
       }
     },

packages/extension/src/view/devtools/stateProviders/protectedAudience/context.ts

@@ -36,11 +36,13 @@ export interface ProtectedAudienceContextType {
     noBids: NoBidsType;
     adsAndBidders: AdsAndBiddersType;
     selectedAdUnit: string | null;
-    sortOrder: 'asc' | 'desc';
+    sortOrder: Record<string, 'asc' | 'desc'>;
   };
   actions: {
     setSelectedAdUnit: React.Dispatch<React.SetStateAction<string | null>>;
-    setSortOrder: React.Dispatch<React.SetStateAction<'asc' | 'desc'>>;
+    setSortOrder: React.Dispatch<
+      React.SetStateAction<Record<string, 'asc' | 'desc'>>
+    >;
   };
 }
 
@@ -53,7 +55,7 @@ export const initialState: ProtectedAudienceContextType = {
     noBids: {},
     adsAndBidders: {},
     selectedAdUnit: null,
-    sortOrder: 'asc',
+    sortOrder: {},
   },
   actions: {
     setSelectedAdUnit: noop,

packages/extension/src/view/devtools/stateProviders/protectedAudience/protectedAudienceProvider.tsx

@@ -67,8 +67,9 @@ const Provider = ({ children }: PropsWithChildren) => {
     ProtectedAudienceContextType['state']['noBids']
   >({});
 
-  const [sortOrder, setSortOrder] =
-    useState<ProtectedAudienceContextType['state']['sortOrder']>('asc');
+  const [sortOrder, setSortOrder] = useState<
+    ProtectedAudienceContextType['state']['sortOrder']
+  >({});
 
   const [adsAndBidders, setAdsAndBidders] = useState<
     ProtectedAudienceContextType['state']['adsAndBidders']
@@ -113,7 +114,6 @@ const Provider = ({ children }: PropsWithChildren) => {
             }
 
             const time = new Date(events?.[0]?.time * 1000).toISOString();
-
             reshapedAuctionEvents[adUnitCode] = {
               ...reshapedAuctionEvents[adUnitCode],
               [time + '||' + events?.[0]?.uniqueAuctionId]: {
@@ -183,7 +183,6 @@ const Provider = ({ children }: PropsWithChildren) => {
 
               return acc;
             }, {} as Record<string, singleAuctionEvent[]>);
-
             reshapedAuctionEvents[adUnit] = {
               ...reshapedAuctionEvents[adUnit],
               // @ts-ignore

packages/extension/src/view/devtools/stateProviders/settings/settingsProvider.tsx

@@ -143,10 +143,13 @@ const Provider = ({ children }: PropsWithChildren) => {
 
   const reloadExtension = useCallback(() => {
     chrome.runtime.reload();
-    // using timeout since if frame is reloaded immidieatly it results in extension being blocked.
-    setTimeout(() => {
-      globalThis?.location?.reload();
-    }, 250);
+
+    const interval = setInterval(() => {
+      if (chrome?.runtime?.id) {
+        clearInterval(interval);
+        globalThis?.location?.reload();
+      }
+    }, 100);
   }, []);
 
   const openIncognitoTab = useCallback(async () => {