Be able to handle different snapshots for different roots

Summary:
^

This change allows to take different snapshots for different nodes and render them each on the visualiser.

At the moment, more than likely, this is not really used. At the same time, it fixes an issue whereas any subtree update can override and set the only visible snapshot.

Reviewed By: LukeDefeo, antonk52

Differential Revision: D39821920

fbshipit-source-id: ab8f6a4a2a5e96801c951a4e3009cc571a617f22

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

@@ -19,7 +19,7 @@ import {
 import {Typography} from 'antd';
 
 import {useHotkeys} from 'react-hotkeys-hook';
-import {Id, UINode} from '../types';
+import {Id, Snapshot, UINode} from '../types';
 import {PerfStats} from './PerfStats';
 import {Tree} from './Tree';
 import {Visualization2D} from './Visualization2D';
@@ -29,7 +29,7 @@ export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
   const nodes: Map<Id, UINode> = useValue(instance.nodes);
-  const snapshot: String | undefined = useValue(instance.snapshot);
+  const snapshots: Map<Id, Snapshot> = useValue(instance.snapshots);
 
   const [showPerfStats, setShowPerfStats] = useState(false);
   const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
@@ -72,7 +72,7 @@ export function Component() {
             <Visualization2D
               root={rootId}
               nodes={nodes}
-              snapshot={snapshot}
+              snapshots={snapshots}
               hoveredNode={hoveredNode}
               onHoverNode={setHoveredNode}
               selectedNode={selectedNode}