Add missing types for ThreadCard, ThreadList

src/sidebar/components/ThreadCard.js

@@ -42,6 +42,7 @@ function ThreadCard({ frameSync, thread }) {
   );
 
   const scrollToAnnotation = useCallback(
+    /** @param {string} tag */
     tag => {
       frameSync.scrollToAnnotation(tag);
     },
@@ -72,11 +73,14 @@ function ThreadCard({ frameSync, thread }) {
       onClick={e => {
         // Prevent click events intended for another action from
         // triggering a page scroll.
-        if (!isFromButtonOrLink(/** @type {Element} */ (e.target))) {
+        if (
+          !isFromButtonOrLink(/** @type {Element} */ (e.target)) &&
+          threadTag
+        ) {
           scrollToAnnotation(threadTag);
         }
       }}
-      onMouseEnter={() => focusThreadAnnotation(threadTag)}
+      onMouseEnter={() => focusThreadAnnotation(threadTag ?? null)}
       onMouseLeave={() => focusThreadAnnotation(null)}
       key={thread.id}
     >

src/sidebar/components/ThreadList.js

@@ -87,7 +87,7 @@ function ThreadList({ threads }) {
   }, []);
 
   // Map of thread ID to measured height of thread.
-  const [threadHeights, setThreadHeights] = useState({});
+  const [threadHeights, setThreadHeights] = useState(() => new Map());
 
   // ID of thread to scroll to after the next render. If the thread is not
   // present, the value persists until it can be "consumed".
@@ -151,8 +151,9 @@ function ThreadList({ threads }) {
     // Clear `scrollToId` so we don't scroll again after the next render.
     setScrollToId(null);
 
+    /** @param {Thread} thread */
     const getThreadHeight = thread =>
-      threadHeights[thread.id] || THREAD_DIMENSION_DEFAULTS.defaultHeight;
+      threadHeights.get(thread.id) || THREAD_DIMENSION_DEFAULTS.defaultHeight;
 
     const yOffset = topLevelThreads
       .slice(0, threadIndex)
@@ -166,7 +167,7 @@ function ThreadList({ threads }) {
   // heights of thread cards and update `threadHeights` state if there are changes.
   useEffect(() => {
     setThreadHeights(prevHeights => {
-      const changedHeights = {};
+      const changedHeights = new Map();
       for (let { id } of visibleThreads) {
         const threadElement = /** @type {HTMLElement} */ (
           document.getElementById(id)
@@ -186,18 +187,18 @@ function ThreadList({ threads }) {
         }
 
         const height = getElementHeightWithMargins(threadElement);
-        if (height !== prevHeights[id]) {
-          changedHeights[id] = height;
+        if (height !== prevHeights.get(id)) {
+          changedHeights.set(id, height);
         }
       }
 
       // Skip update if no heights changed from previous measured values
       // (or defaults).
-      if (Object.keys(changedHeights).length === 0) {
+      if (changedHeights.size === 0) {
         return prevHeights;
       }
 
-      return { ...prevHeights, ...changedHeights };
+      return new Map([...prevHeights, ...changedHeights]);
     });
   }, [visibleThreads]);
 

src/sidebar/helpers/test/visible-threads-test.js

@@ -19,7 +19,7 @@ describe('sidebar/helpers/visible-threads', () => {
       { id: 't9' },
       { id: 't10' },
     ];
-    fakeThreadHeights = {};
+    fakeThreadHeights = new Map();
     fakeWindowHeight = 100;
     fakeDefaultDimensions = {
       defaultHeight: 200,

src/sidebar/helpers/visible-threads.js

@@ -18,7 +18,7 @@ export const THREAD_DIMENSION_DEFAULTS = {
  * estimating which of the threads are within or near the viewport.
  *
  * @param {Thread[]} threads - List of threads in the order they appear
- * @param {Record<string, number>} threadHeights - Map of thread ID to measured height
+ * @param {Map<string, number>} threadHeights - Map of thread ID to measured height
  * @param {number} scrollPos - Vertical scroll offset of scrollable container
  * @param {number} windowHeight -
  *   Height of the visible area of the scrollable container.
@@ -43,7 +43,7 @@ export function calculateVisibleThreads(
   let offscreenLowerHeight = 0;
 
   threads.forEach(thread => {
-    const threadHeight = threadHeights[thread.id] || defaultHeight;
+    const threadHeight = threadHeights.get(thread.id) || defaultHeight;
 
     const threadIsAboveViewport =
       totalHeight + threadHeight < scrollPos - marginAbove;