From f6dcaa2143fa4ae1818d19bff08d070919f036da 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] Selection interaction from overlay

Summary:
Previously we were registering a click handler with every single div in the visualiser. This is somewhat wasteful as well as was causing issues since i needed to call stop propagation to prevent the click bubbling and selecting all the parents too.

as a result of stop propagation the context menu behaviour was weird, when left clicking elsewhere to close the context menu it wouldnt work as the click was swallowed by the click handlers for the nodes.

Now we have a much simpler system. The hovered overlay is the click handler. Thats it.

Another benefit of this is the visualisation nodes under the overlays are all interaction less so they can be moved to canvas one day if need be

Reviewed By: lblasa

Differential Revision: D47550673

fbshipit-source-id: 1a607059c68f0b936f0184bd98a6a1492703d41b
---
 .../components/Visualization2D.tsx            | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index eba541e99e2..369eb0b1508 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -132,6 +132,7 @@ export const Visualization2D: React.FC<
         }>
         {hoveredNodeId && (
           <HoveredOverlay
+            onSelectNode={instance.uiActions.onSelectNode}
             key={hoveredNodeId}
             nodeId={hoveredNodeId}
             nodes={nodes}
@@ -241,13 +242,6 @@ function Visualization2DNode({
         height: toPx(node.bounds.height),
         opacity: isHighlighted ? 0.3 : 1,
         backgroundColor: isHighlighted ? 'red' : 'transparent',
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-
-        const hoveredNodes = instance.uiState.hoveredNodes.get();
-
-        onSelectNode(hoveredNodes[0], 'visualiser');
       }}>
       <NodeBorder />
 
@@ -259,9 +253,11 @@ function Visualization2DNode({
 function HoveredOverlay({
   nodeId,
   nodes,
+  onSelectNode,
 }: {
   nodeId: Id;
   nodes: Map<Id, ClientNode>;
+  onSelectNode: OnSelectNode;
 }) {
   const node = nodes.get(nodeId);
 
@@ -278,7 +274,14 @@ function HoveredOverlay({
       align={{
         offset: [0, 7],
       }}>
-      <OverlayBorder nodeId={nodeId} nodes={nodes} type="hovered" />
+      <OverlayBorder
+        onClick={() => {
+          onSelectNode(nodeId, 'visualiser');
+        }}
+        nodeId={nodeId}
+        nodes={nodes}
+        type="hovered"
+      />
     </Tooltip>
   );
 }
@@ -292,7 +295,7 @@ const OverlayBorder = styled.div<{
   const node = nodes.get(nodeId);
   return {
     zIndex: 100,
-    pointerEvents: 'none',
+    pointerEvents: type === 'selected' ? 'none' : 'auto',
     cursor: 'pointer',
     position: 'absolute',
     top: toPx(offset.y),