chore(lens): debounce react component stack panel update to avoid UI flickering

Summary: This diff debounces updates to the React component stack panel to prevent a flickering loop caused by rapid mouse transitions. The issue occurs when the mouse leaves leak outline A and enters the React component stack, which causes the stack to disappear due to the outline change. If leak outline B is underneath the stack, it triggers a re-render of the stack. This causes the mouse out to be out of B (because the react component stack is rendered on top of it) and back into the react component stack panel, this causes the same <leaving outline, enter component stack, component stack disappear, re-enter outline> behavior to repeat, resulting in an infinite loop of UI flickering.

Reviewed By: twobassdrum

Differential Revision: D73486515

fbshipit-source-id: 523c5b0f821c1c60f774270ab26d988732cc6a0b

Author: JacksonGL

packages/lens/src/visual/components/component-stack-panel.ts

@@ -11,7 +11,7 @@ import {
   RegisterDataUpdateCallback,
   VisualizerData,
 } from '../dom-element-visualizer-interactive';
-import {createVisualizerElement} from '../visual-utils';
+import {createVisualizerElement, debounce} from '../visual-utils';
 
 export function createComponentStackPanel(
   registerDataUpdateCallback: RegisterDataUpdateCallback,
@@ -34,37 +34,52 @@ export function createComponentStackPanel(
   panel.style.color = 'white';
   panel.id = 'memory-visualization-component-stack-panel';
 
+  let pinned = false;
+
+  panel.addEventListener('mouseenter', () => {
+    pinned = true;
+  });
+
+  panel.addEventListener('mouseleave', () => {
+    pinned = false;
+  });
+
   // Register data update callback to update component stack panel
-  registerDataUpdateCallback((data: VisualizerData) => {
-    panel.style.display = data.selectedElementId != null ? 'flex' : 'none';
-    panel.innerHTML = '';
+  registerDataUpdateCallback(
+    debounce((data: VisualizerData) => {
+      if (pinned) {
+        return;
+      }
+      panel.style.display = data.selectedElementId != null ? 'flex' : 'none';
+      panel.innerHTML = '';
 
-    if (
-      data.selectedElementId == null ||
-      !data.selectedReactComponentStack?.length
-    ) {
-      return;
-    }
+      if (
+        data.selectedElementId == null ||
+        !data.selectedReactComponentStack?.length
+      ) {
+        return;
+      }
 
-    const title = createVisualizerElement('div');
-    title.textContent = 'Component Stack:';
-    title.style.fontWeight = 'bold';
-    title.style.marginBottom = '8px';
-    panel.appendChild(title);
+      const title = createVisualizerElement('div');
+      title.textContent = 'Component Stack:';
+      title.style.fontWeight = 'bold';
+      title.style.marginBottom = '8px';
+      panel.appendChild(title);
 
-    let actualComponentStackLength = 0;
-    data.selectedReactComponentStack.forEach((component: string) => {
-      const componentDiv = createVisualizerElement('div');
-      componentDiv.style.marginBottom = '4px';
-      componentDiv.textContent = component;
-      panel.appendChild(componentDiv);
-      ++actualComponentStackLength;
-    });
+      let actualComponentStackLength = 0;
+      data.selectedReactComponentStack.forEach((component: string) => {
+        const componentDiv = createVisualizerElement('div');
+        componentDiv.style.marginBottom = '4px';
+        componentDiv.textContent = component;
+        panel.appendChild(componentDiv);
+        ++actualComponentStackLength;
+      });
 
-    if (actualComponentStackLength === 0) {
-      title.remove();
-    }
-  });
+      if (actualComponentStackLength === 0) {
+        title.remove();
+      }
+    }, 1),
+  );
 
   return panel;
 }

packages/lens/src/visual/components/overlay-rectangle.ts

@@ -9,7 +9,11 @@
  */
 import type {AnyValue, DOMElementInfo} from '../../core/types';
 import {IntersectionObserverManager} from '../../utils/intersection-observer';
-import {createVisualizerElement} from '../visual-utils';
+import {
+  createVisualizerElement,
+  addTrackedListener,
+  removeAllListeners,
+} from '../visual-utils';
 
 type OutlineState = {pinned: boolean; selected: boolean};
 
@@ -64,28 +68,31 @@ export function createOverlayRectangle(
 
   const componentStack = info.componentStack ?? [];
   const componentName = componentStack[0] ?? '';
-  const elementIdStr = `memory-id-${elementId}@`;
 
   let pinned = false;
   let selected = false;
 
   const divRef = new WeakRef(div);
 
-  div.addEventListener('mouseover', () => {
+  addTrackedListener(divRef, 'mouseover', () => {
+    // note that elementIdStr should not be genearated in the
+    // inside the function scope of createOverlayRectangle
+    // to avoid unnecessary retainer path in the heap snapshot
+    const elementIdStr = `memory-id-${elementId}@`;
     labelDiv.remove();
-    div.appendChild(labelDiv);
+    divRef.deref()?.appendChild(labelDiv);
     labelDiv.textContent = `${componentName} (${elementIdStr})`;
     labelDiv.style.display = 'inline-block';
     setSelectedId(elementId);
   });
 
-  div.addEventListener('mouseout', () => {
+  addTrackedListener(divRef, 'mouseout', () => {
     labelDiv.style.display = 'none';
     labelDiv.remove();
     setUnSelectedId(elementId);
   });
 
-  div.addEventListener('click', () => {
+  addTrackedListener(divRef, 'click', () => {
     setClickedId(elementId);
   });
 
@@ -122,6 +129,7 @@ export function createOverlayRectangle(
     if (div == null) {
       return;
     }
+    removeAllListeners(divRef);
     observerManager.unobserve(divRef);
     (div as AnyValue).__cleanup = null;
     (div as AnyValue).__selected = null;

packages/lens/src/visual/visual-utils.ts

@@ -7,10 +7,13 @@
  * @format
  * @oncall memory_lab
  */
+import type {AnyValue} from '../core/types';
+
 const VISUALIZER_DATA_ATTR = 'data-visualizer';
 
 function setVisualizerElement(element: Element) {
   element.setAttribute(VISUALIZER_DATA_ATTR, 'true');
+  element.setAttribute('data-visualcompletion', 'ignore');
 }
 
 export function isVisualizerElement(element: Element): boolean {
@@ -28,3 +31,59 @@ export function tryToAttachOverlay(overlayDiv: HTMLDivElement) {
     document.body.appendChild(overlayDiv);
   }
 }
+
+type EventListenerEntry = {
+  type: string;
+  cb: EventListenerOrEventListenerObject;
+  options?: boolean | AddEventListenerOptions;
+};
+
+const listenerMap = new WeakMap<EventTarget, EventListenerEntry[]>();
+
+export function addTrackedListener(
+  elRef: WeakRef<EventTarget>,
+  type: string,
+  cb: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions,
+): void {
+  const el = elRef.deref();
+  if (!el) return;
+
+  el.addEventListener(type, cb, options);
+
+  if (!listenerMap.has(el)) {
+    listenerMap.set(el, []);
+  }
+
+  listenerMap.get(el)?.push({type, cb, options});
+}
+
+export function removeAllListeners(elRef: WeakRef<EventTarget>): void {
+  const el = elRef.deref();
+  if (!el) return;
+
+  const listeners = listenerMap.get(el);
+  if (!listeners) return;
+
+  for (const {type, cb, options} of listeners) {
+    el.removeEventListener(type, cb, options);
+  }
+
+  listenerMap.delete(el);
+}
+
+export function debounce<T extends (...args: AnyValue[]) => AnyValue>(
+  callback: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+}