From 8f857dc1c563761ae35a56e04a93bc4fad981517 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Fri, 21 Jul 2023 07:17:31 -0700
Subject: [PATCH] Fixed bug where visualizer not working after using focus more
 in visualiser context menu

Summary:
I introduced this to stop the visualiser going off while the framework events modal was open. However on mouse leave fires when the context menu is open. and if you click to focus then it never refires.

Also renamed the ref to make it clearer

Reviewed By: lblasa

Differential Revision: D47550672

fbshipit-source-id: 62e108e55e5c42a37d3aebded6467ececdc458df
---
 .../ui-debugger/components/Visualization2D.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 369eb0b1508..a6aa4b1472f 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -42,7 +42,7 @@ export const Visualization2D: React.FC<
 
   //this ref is to ensure the mouse has entered the visualiser, otherwise when you have overlapping modals
   //the hover state / tooltips all fire
-  const mouseInVisualiserRef = useRef(false);
+  const visualizerActive = useRef(false);
   useEffect(() => {
     const mouseListener = throttle((ev: MouseEvent) => {
       const domRect = rootNodeRef.current?.getBoundingClientRect();
@@ -52,7 +52,7 @@ export const Visualization2D: React.FC<
         !domRect ||
         instance.uiState.isContextMenuOpen.get() ||
         !snapshotNode ||
-        !mouseInVisualiserRef.current
+        !visualizerActive.current
       ) {
         return;
       }
@@ -98,6 +98,14 @@ export const Visualization2D: React.FC<
     instance.uiActions,
   ]);
 
+  useEffect(() => {
+    return instance.uiState.isContextMenuOpen.subscribe((value) => {
+      if (value === false) {
+        visualizerActive.current = true;
+      }
+    });
+  }, [instance.uiState.isContextMenuOpen]);
+
   if (!focusState || !snapshotNode) {
     return null;
   }
@@ -114,10 +122,10 @@ export const Visualization2D: React.FC<
             instance.uiActions.onHoverNode();
           }
 
-          mouseInVisualiserRef.current = false;
+          visualizerActive.current = false;
         }}
         onMouseEnter={() => {
-          mouseInVisualiserRef.current = true;
+          visualizerActive.current = true;
         }}
         //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
         style={