Improved interaction between tree and visualizer

Summary:
Improved the 2 way relationship between tree and vizualiser. There are 3 states.
1. Select, this is when you click on either tree node or view. View is highlighted darker colour, sidebar shows up for that node and select is persisted when you mouse away
2. Hover, this is when you hover over a tree node or in the vizualizer, the node is highlighted a lighter colur
3. Hover while holding control - same as hover but we dont draw any children, this lets you see how parent nodes appear without their children

Reviewed By: lblasa

Differential Revision: D39695661

fbshipit-source-id: 623e479fb03567e9f15a4a4f9201b2c7884cabe4

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

@@ -23,34 +23,36 @@ export function Tree(props: {
   const [antTree, inactive] = nodesToAntTree(props.rootId, props.nodes);
 
   return (
-    <AntTree
+    <div
       onMouseLeave={() => {
-        //when mouse exits the entire tree then unhover
+        //This div exists so when mouse exits the entire tree then unhover
         props.onHoveredNode(undefined);
-      }}
-      showIcon
-      showLine
-      titleRender={(node) => {
-        return (
-          <div
-            onMouseEnter={() => {
-              props.onHoveredNode(node.key as Id);
-            }}>
-            {node.title}
-          </div>
-        );
-      }}
-      selectedKeys={[props.selectedNode ?? '']}
-      onSelect={(selected) => {
-        props.onSelectNode(selected[0] as Id);
-      }}
-      defaultExpandAll
-      expandedKeys={[...props.nodes.keys()].filter(
-        (key) => !inactive.includes(key),
-      )}
-      switcherIcon={<DownOutlined />}
-      treeData={[antTree]}
-    />
+      }}>
+      <AntTree
+        showIcon
+        showLine
+        titleRender={(node) => {
+          return (
+            <div
+              onMouseEnter={() => {
+                props.onHoveredNode(node.key as Id);
+              }}>
+              {node.title}
+            </div>
+          );
+        }}
+        selectedKeys={[props.selectedNode ?? '']}
+        onSelect={(selected) => {
+          props.onSelectNode(selected[0] as Id);
+        }}
+        defaultExpandAll
+        expandedKeys={[...props.nodes.keys()].filter(
+          (key) => !inactive.includes(key),
+        )}
+        switcherIcon={<DownOutlined />}
+        treeData={[antTree]}
+      />
+    </div>
   );
 }