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 19deac994..b92324b77 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx +++ b/packages/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 index e1cb0960a..2910418eb 100644 --- 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/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/index.tsx index d5c607d54..f5088329c 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/index.tsx +++ b/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/index.tsx @@ -39,7 +39,7 @@ interface TaxonomyTreeProps { const TaxonomyTree = ({ taxonomyUrl, githubUrl }: TaxonomyTreeProps) => { const divRef = useRef(null); - const timeoutRef = useRef | null>(null); + const timeoutRef = useRef[]>([]); const [taxonomyArray, setTaxonomyArray] = useState([]); 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 ( -
+
{ width="14" /> -
+
); }; diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/tree.js b/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/tree.js index 96057aaea..b0c8fc34a 100644 --- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/taxonomyTree/tree.js +++ b/packages/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)