Use mouse position for hit test for 2D vizualizer

Summary:
The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours.

The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates.

Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender.

I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now

Reviewed By: lblasa

Differential Revision: D41218324

fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672

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

@@ -8,7 +8,7 @@
  */
 
 import {Id, UINode} from '../types';
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useMemo, useRef} from 'react';
 import {
   Tree as ComplexTree,
   ControlledTreeEnvironment,
@@ -26,19 +26,19 @@ export function Tree(props: {
   rootId: Id;
   nodes: Map<Id, UINode>;
   selectedNode?: Id;
-  hoveredNode?: Id;
   onSelectNode: (id: Id) => void;
-  onHoveredNode: (id?: Id) => void;
 }) {
   const instance = usePlugin(plugin);
   const expandedItems = useValue(instance.treeState).expandedNodes;
-  const items = toComplexTree(props.nodes);
+  const items = useMemo(() => toComplexTree(props.nodes), [props.nodes]);
 
+  const hoveredNode = useValue(instance.hoveredNode);
   const treeRef = useRef<TreeEnvironmentRef>();
+
   useEffect(() => {
     //this makes the keyboard arrow  controls work always, even when using the visualiser
     treeRef.current?.focusTree('tree', true);
-  }, [props.hoveredNode, props.selectedNode]);
+  }, [hoveredNode, props.selectedNode]);
   return (
     <ControlledTreeEnvironment
       ref={treeRef as any}
@@ -50,12 +50,14 @@ export function Tree(props: {
       autoFocus
       viewState={{
         tree: {
-          focusedItem: props.hoveredNode,
+          focusedItem: hoveredNode,
           expandedItems,
           selectedItems: props.selectedNode ? [props.selectedNode] : [],
         },
       }}
-      onFocusItem={(item) => props.onHoveredNode(item.index)}
+      onFocusItem={(item) => {
+        instance.hoveredNode.set(item.index);
+      }}
       onExpandItem={(item) => {
         instance.treeState.update((draft) => {
           draft.expandedNodes.push(item.index);
@@ -85,8 +87,9 @@ export function Tree(props: {
               actions.selectItem();
             }
           },
+
           onMouseOver: () => {
-            props.onHoveredNode(item.index);
+            instance.hoveredNode.set(item.index);
           },
         }),
       }}>