Tree2 feedback

Summary:
1. only useValue from tree root
2. Pass down props for ui state  instead subscribing ad hoc
3. Pass down callbacks, instead of updating atoms ad hoc.
4. Create ui actions object holding api, will use this later on in the vizualizer as some of the same

In general its more verbose but with memoizing perf should be fine should hopefully be easier to reason about components and what they can do as things are more explicit

Hopefully this serves as a general template for how to organise the react code going forward

Reviewed By: lblasa

Differential Revision: D41872490

fbshipit-source-id: 94a33b0e951c04df367ba102fa0a097d4a0389cd

desktop/plugins/public/ui-debugger/index.tsx

@@ -21,7 +21,6 @@ import {
   MetadataId,
   PerfStatsEvent,
   Snapshot,
-  TreeState,
   UINode,
 } from './types';
 import './node_modules/react-complex-tree/lib/style.css';
@@ -171,6 +170,7 @@ export function plugin(client: PluginClient<Events>) {
   return {
     rootId,
     uiState,
+    uiActions: uiActions(uiState),
     nodes,
     snapshot,
     metadata,
@@ -194,6 +194,48 @@ function setParentPointers(
   });
 }
 
+type UIActions = {
+  onHoverNode: (node: Id) => void;
+  onFocusNode: (focused?: Id) => void;
+  onContextMenuOpen: (open: boolean) => void;
+  onExpandNode: (node: Id) => void;
+  onCollapseNode: (node: Id) => void;
+};
+
+function uiActions(uiState: UIState): UIActions {
+  const onExpandNode = (node: Id) => {
+    uiState.expandedNodes.update((draft) => {
+      draft.add(node);
+    });
+  };
+
+  const onCollapseNode = (node: Id) => {
+    uiState.expandedNodes.update((draft) => {
+      draft.delete(node);
+    });
+  };
+
+  const onHoverNode = (node: Id) => {
+    uiState.hoveredNodes.set([node]);
+  };
+
+  const onContextMenuOpen = (open: boolean) => {
+    uiState.isContextMenuOpen.set(open);
+  };
+
+  const onFocusNode = (focused?: Id) => {
+    uiState.focusedNode.set(focused);
+  };
+
+  return {
+    onExpandNode,
+    onCollapseNode,
+    onHoverNode,
+    onContextMenuOpen,
+    onFocusNode,
+  };
+}
+
 function checkFocusedNodeStillActive(uiState: UIState, nodes: Map<Id, UINode>) {
   const focusedNodeId = uiState.focusedNode.get();
   const focusedNode = focusedNodeId && nodes.get(focusedNodeId);