Clear data on mode change and handle click on small circles

GoogleChromeLabs · Dec 30, 2024 · 5c5ce6d · 5c5ce6d
1 parent bd079da
commit 5c5ce6d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/...on/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx b/...on/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx
@@ -244,7 +244,10 @@ const Panel = ({
 
   useEffect(() => {
     setTopicsTableData({});
-  }, [isInteractiveModeOn, setTopicsTableData]);
+    setActiveTab(0);
+    setEpochCompleted({});
+    setPAStorage('');
+  }, [isInteractiveModeOn, setActiveTab, setPAStorage, setTopicsTableData]);
 
   const extraInterface = (
     <div className="flex gap-2 items-center">

diff --git a/...tools/components/privateAdvertising/topics/explorableExplanation/topicsAnimation/index.ts b/...tools/components/privateAdvertising/topics/explorableExplanation/topicsAnimation/index.ts
@@ -416,17 +416,13 @@ export function topicsAnimation(
             app.resetInfoBox(app.inspectedCircleIndex);
           }
 
-          if (app.inspectedCircleIndex === index) {
-            return;
-          }
-
           app.drawInfoBox(index, epoch[index].website);
           app.inspectedCircleIndex = index;
         }
       });
 
-      app.smallCirclePositions[app.inspectedCircleIndex]?.forEach(
-        (position) => {
+      Object.values(app.smallCirclePositions).forEach((smallCircles) => {
+        smallCircles?.forEach((position) => {
           const { x: smallCircleX, y: smallCircleY } = position;
           const smallCircleDiameter = config.timeline.circleProps.diameter / 5;
 
@@ -439,8 +435,8 @@ export function topicsAnimation(
             app.showHandCursor = true;
             isInspecting = true;
           }
-        }
-      );
+        });
+      });
 
       if (!isInspecting) {
         app.showHandCursor = false;
@@ -466,20 +462,27 @@ export function topicsAnimation(
             y > circleY - diameter / 2 &&
             y < circleY + diameter / 2
           ) {
+            if (app.prevVisitedCircleIndex === index) {
+              return;
+            }
+
             if (app.prevVisitedCircleIndex !== -1) {
               app.userVisitDone(app.prevVisitedCircleIndex);
             }
 
             if (app.smallCirclePositions[index] === undefined) {
               app.handleUserVisit(index);
               app.prevVisitedCircleIndex = index;
+            } else {
+              app.drawInfoBox(index, epoch[index].website);
+              app.prevVisitedCircleIndex = index;
             }
           }
         });
       }
 
-      app.smallCirclePositions[app.inspectedCircleIndex]?.forEach(
-        (position, index) => {
+      Object.values(app.smallCirclePositions).forEach((smallCircles) => {
+        smallCircles?.forEach((position, index) => {
           const { x: smallCircleX, y: smallCircleY } = position;
           const smallCircleDiameter = config.timeline.circleProps.diameter / 5;
 
@@ -490,11 +493,11 @@ export function topicsAnimation(
             y < smallCircleY + smallCircleDiameter / 2
           ) {
             setHighlightAdTech(
-              siteAdTechs[epoch[app.inspectedCircleIndex].website][index]
+              siteAdTechs[epoch[app.prevVisitedCircleIndex].website][index]
             );
           }
-        }
-      );
+        });
+      });
     },
   };