From 0c52ad307eaa0bd9370e4f88392ed1b5f04c9f90 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 25 Oct 2022 07:10:38 -0700
Subject: [PATCH] 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
---
 .../ui-debugger/components/Visualization2D.tsx      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 5296cf8b4..67bec8390 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/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 && (