Topics EE changes (#898)

* Change bg and show infobox on hover * Add hand pointer to clickable elements * Use circle inside group to scroll into view * Cleanup of timeout * handle visit indexes for each epoch * Add hand cursor for non visited sites and make click to visit till index * Change bg and show infobox on hover * Add interactive mode functionality * Clear data on mode change and handle click on small circles * Use object index to set highlighting tech
GoogleChromeLabs · Jan 2, 2025 · e6a4460 · e6a4460
1 parent e6d7a15
commit e6a4460
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 51 deletions.
diff --git a/...rc/view/devtools/components/privateAdvertising/topics/explorableExplanation/animation.tsx b/...rc/view/devtools/components/privateAdvertising/topics/explorableExplanation/animation.tsx
@@ -34,6 +34,7 @@ interface AnimationProps {
   isPlaying: boolean;
   resetAnimation: boolean;
   speedMultiplier: number;
+  isInteractive: boolean;
   setPAActiveTab: (tabIndex: number) => void;
   setPAStorage: (content: string) => void;
   setHighlightAdTech: React.Dispatch<React.SetStateAction<string | null>>;
@@ -51,6 +52,7 @@ const Animation = ({
   isPlaying,
   resetAnimation,
   speedMultiplier,
+  isInteractive,
   setPAActiveTab,
   setPAStorage,
   setHighlightAdTech,
@@ -63,12 +65,10 @@ const Animation = ({
   const [speedMultiplierCallback, setSpeedMultiplierCallback] =
     useState<(speed: number) => void>();
   const animationRef = useRef(isAnimating);
-  const visitIndexStartRef = useRef(visitIndexStart);
 
   useEffect(() => {
     // Using the useRef hook to store the current value of isAnimating because the animation should not be re-rendered when the value of isAnimating changes.
     animationRef.current = isAnimating;
-    visitIndexStartRef.current = visitIndexStart;
   }, [isAnimating, visitIndexStart]);
 
   useEffect(() => {
@@ -79,11 +79,12 @@ const Animation = ({
           epoch,
           animationRef.current,
           siteAdTechs,
-          visitIndexStartRef.current,
+          visitIndexStart,
           animationRef.current
             ? handleUserVisit
             : (idx: number) => handleUserVisit(idx, false),
-          setHighlightAdTech
+          setHighlightAdTech,
+          isInteractive
         );
 
       setTogglePlayCallback(() => togglePlay);
@@ -100,11 +101,13 @@ const Animation = ({
   }, [
     epoch,
     handleUserVisit,
+    isInteractive,
     setCurrentVisitIndexCallback,
     setHighlightAdTech,
     setPAActiveTab,
     setPAStorage,
     siteAdTechs,
+    visitIndexStart,
   ]);
 
   useEffect(() => {

diff --git a/...on/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx b/...on/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/panel.tsx
@@ -23,6 +23,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { useTabs } from '@google-psat/design-system';
 
 /**
  * Internal dependencies.
@@ -32,7 +33,6 @@ import Animation from './animation';
 import { assignAdtechsToSites, createEpochs } from './topicsAnimation/utils';
 import { adtechs, websites } from './topicsAnimation/data';
 import type { TopicsTableType } from './topicsTable';
-import { useTabs } from '@google-psat/design-system';
 import TableTray from '../../../explorableExplanation/tableTray';
 
 interface PanelProps {
@@ -82,9 +82,23 @@ const Panel = ({
     );
   }, []);
   const [visitIndexStart, setVisitIndexStart] = useState(
-    JSON.parse(storageRef.current[1] || '{}')?.currentVisitIndex ?? 0
+    JSON.parse(storageRef.current[1] || '{}')?.currentVisitIndexes?.[
+      activeTab
+    ] ?? 0
   );
 
+  useEffect(() => {
+    storageRef.current = PAstorage;
+  }, [PAstorage]);
+
+  useEffect(() => {
+    setVisitIndexStart(
+      JSON.parse(storageRef.current[1] || '{}')?.currentVisitIndexes?.[
+        activeTab
+      ] ?? 0
+    );
+  }, [activeTab]);
+
   useEffect(() => {
     setTopicsTableData(
       JSON.parse(storageRef.current[1] || '{}')?.topicsTableData || {}
@@ -97,10 +111,14 @@ const Panel = ({
   useEffect(() => {
     const currentVisitIndex = currentVisitIndexCallback?.();
 
+    const visitIndexes =
+      JSON.parse(storageRef.current[1] || '{}')?.currentVisitIndexes || [];
+    visitIndexes[activeTab] = currentVisitIndex;
+
     if (currentVisitIndex !== undefined) {
       setPAStorage(
         JSON.stringify({
-          currentVisitIndex,
+          currentVisitIndexes: visitIndexes,
           epochCompleted,
           topicsTableData,
           siteAdTechs,
@@ -222,6 +240,29 @@ const Panel = ({
     }
   }, [activeTab, epochCompleted, setReset]);
 
+  const [isInteractiveModeOn, setIsInteractiveModeOn] = useState(false);
+
+  useEffect(() => {
+    setTopicsTableData({});
+    setActiveTab(0);
+    setEpochCompleted({});
+    setPAStorage('');
+  }, [isInteractiveModeOn, setActiveTab, setPAStorage, setTopicsTableData]);
+
+  const extraInterface = (
+    <div className="flex gap-2 items-center">
+      <label className="text-raisin-black dark:text-bright-gray flex items-center gap-2 hover:cursor-pointer">
+        <input
+          type="checkbox"
+          className="hover:cursor-pointer"
+          checked={isInteractiveModeOn}
+          onChange={() => setIsInteractiveModeOn((prev) => !prev)}
+        />
+        Interactive Mode
+      </label>
+    </div>
+  );
+
   return (
     <div className="flex flex-col h-full">
       <Header
@@ -231,6 +272,8 @@ const Panel = ({
         setSliderStep={setSliderStep}
         historyCount={epochs[activeTab].webVisits.length}
         reset={setReset}
+        extraInterface={extraInterface}
+        showNextPrevButtons={false}
       />
       <div className="flex-1 overflow-auto">
         <Animation
@@ -246,6 +289,7 @@ const Panel = ({
           setPAStorage={setPAStorage}
           setHighlightAdTech={setHighlightAdTech}
           setCurrentVisitIndexCallback={setCurrentVisitIndexCallback}
+          isInteractive={isInteractiveModeOn}
         />
       </div>
       <TableTray />