From 34f6b100d7d4fcc44960698bc0582534195a307c Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 19 Jul 2023 08:58:20 -0700
Subject: [PATCH] Refactor node highlighting

Summary: The previous approach would set the atom many times causing several unnecessary renders

Reviewed By: lblasa

Differential Revision: D47519869

fbshipit-source-id: 536334c892334035a6c0fefc86a2e205b2c9769d
---
 desktop/plugins/public/ui-debugger/index.tsx | 44 ++++++++++++--------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 3a5756466..c06253596 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -281,16 +281,6 @@ export function plugin(client: PluginClient<Events>) {
     frameworkEvents.update((draft) => {
       if (frameScan?.frameworkEvents) {
         frameScan.frameworkEvents.forEach((frameworkEvent) => {
-          if (
-            uiState.frameworkEventMonitoring.get().get(frameworkEvent.type) ===
-              true &&
-            uiState.isPaused.get() === false
-          ) {
-            highlightedNodes.update((draft) => {
-              draft.add(frameworkEvent.nodeId);
-            });
-          }
-
           const frameworkEventsForNode = draft.get(frameworkEvent.nodeId);
           if (frameworkEventsForNode) {
             frameworkEventsForNode.push(frameworkEvent);
@@ -298,15 +288,35 @@ export function plugin(client: PluginClient<Events>) {
             draft.set(frameworkEvent.nodeId, [frameworkEvent]);
           }
         });
-        setTimeout(() => {
-          highlightedNodes.update((laterDraft) => {
-            for (const event of frameScan.frameworkEvents!!.values()) {
-              laterDraft.delete(event.nodeId);
-            }
-          });
-        }, HighlightTime);
       }
     });
+
+    if (uiState.isPaused.get() === true) {
+      return;
+    }
+
+    const monitoredEvents = uiState.frameworkEventMonitoring.get();
+
+    const nodesToHighlight =
+      frameScan.frameworkEvents
+        ?.filter(
+          (frameworkEvent) => monitoredEvents.get(frameworkEvent.type) === true,
+        )
+        .map((event) => event.nodeId) ?? [];
+
+    highlightedNodes.update((draft) => {
+      for (const node of nodesToHighlight) {
+        draft.add(node);
+      }
+    });
+
+    setTimeout(() => {
+      highlightedNodes.update((draft) => {
+        for (const nodeId of nodesToHighlight) {
+          draft.delete(nodeId);
+        }
+      });
+    }, HighlightTime);
   }
 
   //todo deal with racecondition, where bloks screen is fetching, takes time then you go back get more recent frame then bloks screen comes and overrites it