Improve selection in vizualizer

Summary:
Clicking on a node a second time will unselect which was impossible before.

The behaviour of the on click handler doesnt always line up what is currently hovered, this is a temporary work around. There are deeper issues with this in that on exit we hover the parent, but in some situations the parent is too small to propagate. In future we will use the mouse position and do a hit test and drive selection / hover from that

Reviewed By: lblasa

Differential Revision: D40637356

fbshipit-source-id: 9df19dbf619845891bb46624730d7cf74f73cf25

desktop/plugins/public/ui-debugger/components/Visualization2D.tsx

@@ -19,7 +19,7 @@ export const Visualization2D: React.FC<
     snapshots: Map<Id, Snapshot>;
     hoveredNode?: Id;
     selectedNode?: Id;
-    onSelectNode: (id: Id) => void;
+    onSelectNode: (id?: Id) => void;
     onHoverNode: (id?: Id) => void;
     modifierPressed: boolean;
   } & React.HTMLAttributes<HTMLDivElement>
@@ -102,7 +102,7 @@ function Visualization2DNode({
   modifierPressed: boolean;
   hoveredNode?: Id;
   selectedNode?: Id;
-  onSelectNode: (id: Id) => void;
+  onSelectNode: (id?: Id) => void;
   onHoverNode: (id?: Id) => void;
 }) {
   const node = nodes.get(nodeId);
@@ -124,6 +124,7 @@ function Visualization2DNode({
   } else {
     childrenIds = node.children;
   }
+
   // stop drawing children if hovered with the modifier so you
   // can see parent views without their children getting in the way
   if (isHovered && modifierPressed) {
@@ -175,7 +176,13 @@ function Visualization2DNode({
       }}
       onClick={(e) => {
         e.stopPropagation();
-        onSelectNode(nodeId);
+
+        if (hoveredNode === selectedNode) {
+          onSelectNode(undefined);
+        } else {
+          //the way click is resolved doesn't always match what is hovered, this is a way to ensure what is hovered is selected
+          onSelectNode(hoveredNode);
+        }
       }}>
       <NodeBorder tags={node.tags}></NodeBorder>
       {snapshot && (