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

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),