Fix: Issues on PAT panels (#867)

* Handle root node expansion from search * Remove ee panel from pa panels * Fix timeouts leak on panel change * No early return, change condition to not add click event and allow styles to still render * Make searchbar sticky and update click logic
GoogleChromeLabs · Nov 18, 2024 · 521d6e1 · 521d6e1
1 parent de8d5ba
commit 521d6e1
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git a/...ges/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx b/...ges/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx
@@ -28,7 +28,6 @@ import {
 } from '@google-psat/design-system';
 import { I18n } from '@google-psat/i18n';
 import classNames from 'classnames';
-import ExplorableExplanation from './explorableExplanation';
 
 /**
  * Internal dependencies.
@@ -64,12 +63,6 @@ const ProtectedAudience = () => {
           className: 'p-4',
         },
       },
-      {
-        title: 'Explorable Explanation',
-        content: {
-          Element: ExplorableExplanation,
-        },
-      },
       {
         title: 'Interest Groups',
         content: {

diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
@@ -77,6 +77,7 @@ const Topics = () => {
             githubUrl:
               'https://github.com/patcg-individual-drafts/topics/blob/main/taxonomy_v2.md',
           },
+          className: 'overflow-hidden',
         },
       },
       {
@@ -89,6 +90,7 @@ const Topics = () => {
             githubUrl:
               'https://github.com/patcg-individual-drafts/topics/blob/main/taxonomy_v1.md',
           },
+          className: 'overflow-hidden',
         },
       },
     ],

diff --git a/...s/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/index.tsx b/...s/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/index.tsx
@@ -39,7 +39,7 @@ interface TaxonomyTreeProps {
 
 const TaxonomyTree = ({ taxonomyUrl, githubUrl }: TaxonomyTreeProps) => {
   const divRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>[]>([]);
   const [taxonomyArray, setTaxonomyArray] = useState<string[]>([]);
 
   useEffect(() => {
@@ -72,31 +72,32 @@ const TaxonomyTree = ({ taxonomyUrl, githubUrl }: TaxonomyTreeProps) => {
 
   const nodeClickHandler = useCallback((value: string) => {
     const clicker = (id: string, nextId?: string) => {
-      if (nextId && document.getElementById(nextId)) {
-        return;
-      }
+      const shouldClick = Boolean(!(nextId && document.getElementById(nextId)));
 
       const svgGroup = document.getElementById(id);
 
       if (svgGroup) {
-        const clickEvent = new MouseEvent('click', {
-          view: window,
-          bubbles: true,
-          cancelable: true,
-        });
+        if (shouldClick) {
+          const clickEvent = new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+          });
 
-        svgGroup.dispatchEvent(clickEvent);
+          svgGroup.dispatchEvent(clickEvent);
+        }
 
         svgGroup.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
         svgGroup.style.fill = 'orangered';
         svgGroup.style.transition = 'fill 1s';
 
-        timeoutRef.current = setTimeout(() => {
+        const timeout = setTimeout(() => {
           svgGroup.style.fill = '';
           svgGroup.style.fontWeight = '';
           svgGroup.style.transition = '';
         }, 3000);
+
+        timeoutRef.current.push(timeout);
       }
     };
 
@@ -106,20 +107,28 @@ const TaxonomyTree = ({ taxonomyUrl, githubUrl }: TaxonomyTreeProps) => {
       const _id = id.trim().split(' ').join('');
       const nextId = nodeIds[idx + 1]?.trim().split(' ').join('');
 
-      clicker(_id, nextId);
+      if (idx !== 0 && _id === '') {
+        return;
+      }
+
+      clicker(_id || 'tax-tree-root-node', nextId); // if no id is provided it's the root of the tree
     });
   }, []);
 
   useEffect(() => {
+    const timeouts = timeoutRef.current;
+
     return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+      if (timeouts) {
+        timeouts.forEach((timeout) => {
+          clearTimeout(timeout);
+        });
       }
     };
   }, []);
 
   return (
-    <div className="relative">
+    <div className="relative h-full flex flex-col">
       <SearchDropdown values={taxonomyArray} onSelect={nodeClickHandler} />
       <a
         href={githubUrl}
@@ -133,7 +142,7 @@ const TaxonomyTree = ({ taxonomyUrl, githubUrl }: TaxonomyTreeProps) => {
           width="14"
         />
       </a>
-      <div className="p-4" ref={divRef} />
+      <div className="p-4 overflow-auto" ref={divRef} />
     </div>
   );
 };

diff --git a/...ges/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/tree.js b/...ges/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/tree.js
@@ -131,7 +131,10 @@ const Tree = async (
     const nodeEnter = node
       .enter()
       .append('g')
-      .attr('id', (d) => d.data.name.split(' ').join(''))
+      .attr(
+        'id',
+        (d) => d.data.name.split(' ').join('') || 'tax-tree-root-node'
+      ) // if no name means it is root of the tree
       .attr('transform', () => `translate(${source.y0},${source.x0})`)
       .attr('fill-opacity', 0)
       .attr('stroke-opacity', 0)