Basic new tree implemenation

Summary: The old implementation would always rerender on every operation (select, hover etc) and was quite slow for large hierachies

Reviewed By: lblasa

Differential Revision: D41838166

fbshipit-source-id: 1270841027926440a9c1f1a846d3aedc75ffe8bf

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

@@ -25,6 +25,7 @@ import {
   UINode,
 } from './types';
 import './node_modules/react-complex-tree/lib/style.css';
+import {Draft} from 'immer';
 
 type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
@@ -38,7 +39,7 @@ type UIState = {
   isContextMenuOpen: Atom<boolean>;
   hoveredNodes: Atom<Id[]>;
   focusedNode: Atom<Id | undefined>;
-  treeState: Atom<TreeState>;
+  expandedNodes: Atom<Set<Id>>;
 };
 
 export function plugin(client: PluginClient<Events>) {
@@ -84,7 +85,7 @@ export function plugin(client: PluginClient<Events>) {
 
     searchTerm: createState<string>(''),
     focusedNode: createState<Id | undefined>(undefined),
-    treeState: createState<TreeState>({expandedNodes: []}),
+    expandedNodes: createState<Set<Id>>(new Set()),
   };
 
   client.onMessage('coordinateUpdate', (event) => {
@@ -110,7 +111,7 @@ export function plugin(client: PluginClient<Events>) {
     if (!isPaused) {
       //When going back to play mode then set the atoms to the live state to rerender the latest
       //Also need to fixed expanded state for any change in active child state
-      uiState.treeState.update((draft) => {
+      uiState.expandedNodes.update((draft) => {
         liveClientData.nodes.forEach((node) => {
           collapseinActiveChildren(node, draft);
         });
@@ -144,10 +145,10 @@ export function plugin(client: PluginClient<Events>) {
       setParentPointers(rootId.get()!!, undefined, draft.nodes);
     });
 
-    uiState.treeState.update((draft) => {
+    uiState.expandedNodes.update((draft) => {
       for (const node of event.nodes) {
         if (!seenNodes.has(node.id)) {
-          draft.expandedNodes.push(node.id);
+          draft.add(node.id);
         }
         seenNodes.add(node.id);
 
@@ -193,17 +194,7 @@ function setParentPointers(
   });
 }
 
-function checkFocusedNodeStillActive(
-  uiState: {
-    isPaused: Atom<boolean>;
-    searchTerm: Atom<string>;
-    isContextMenuOpen: Atom<boolean>;
-    hoveredNodes: Atom<Id[]>;
-    focusedNode: Atom<Id | undefined>;
-    treeState: Atom<TreeState>;
-  },
-  nodes: Map<Id, UINode>,
-) {
+function checkFocusedNodeStillActive(uiState: UIState, nodes: Map<Id, UINode>) {
   const focusedNodeId = uiState.focusedNode.get();
   const focusedNode = focusedNodeId && nodes.get(focusedNodeId);
   if (focusedNode && !isFocusedNodeAncestryAllActive(focusedNode, nodes)) {
@@ -239,16 +230,14 @@ function isFocusedNodeAncestryAllActive(
   return false;
 }
 
-function collapseinActiveChildren(node: UINode, draft: TreeState) {
+function collapseinActiveChildren(node: UINode, expandedNodes: Draft<Set<Id>>) {
   if (node.activeChild) {
-    const inactiveChildren = node.children.filter(
-      (child) => child !== node.activeChild,
-    );
-
-    draft.expandedNodes = draft.expandedNodes.filter(
-      (nodeId) => !inactiveChildren.includes(nodeId),
-    );
-    draft.expandedNodes.push(node.activeChild);
+    expandedNodes.add(node.activeChild);
+    for (const child of node.children) {
+      if (child !== node.activeChild) {
+        expandedNodes.delete(child);
+      }
+    }
   }
 }