Snapshots on Visualiser

Summary:
^

TODO: the snapshot corresponds to the referring subtree update. However, the snapshot is getting applied as if it was the current top view of the running app. This is true in most cases but it doesn't for some. To solve this, we need to use the rootId for the subtree and apply the snapshot only if appropriate.

Having said that, is good enough for the current submission as we keep iterating on it.

Reviewed By: LukeDefeo

Differential Revision: D39813307

fbshipit-source-id: 33b6aff6e9dd085934150ebd2f247062447a59ff

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

@@ -16,6 +16,7 @@ export const Visualization2D: React.FC<
   {
     root: Id;
     nodes: Map<Id, UINode>;
+    snapshot?: String;
     hoveredNode?: Id;
     selectedNode?: Id;
     onSelectNode: (id: Id) => void;
@@ -25,6 +26,7 @@ export const Visualization2D: React.FC<
 > = ({
   root,
   nodes,
+  snapshot,
   hoveredNode,
   selectedNode,
   onSelectNode,
@@ -59,6 +61,12 @@ export const Visualization2D: React.FC<
           height: toPx(rootBounds.height),
         }}>
         <OuterBorder />
+        {snapshot ? (
+          <img
+            src={'data:image/jpeg;base64,' + snapshot}
+            style={{maxWidth: '100%'}}
+          />
+        ) : null}
         <Visualization2DNode
           nodeId={root}
           nodes={nodes}

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

@@ -29,6 +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 [showPerfStats, setShowPerfStats] = useState(false);
   const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
@@ -71,6 +72,7 @@ export function Component() {
             <Visualization2D
               root={rootId}
               nodes={nodes}
+              snapshot={snapshot}
               hoveredNode={hoveredNode}
               onHoverNode={setHoveredNode}
               selectedNode={selectedNode}

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

@@ -23,7 +23,9 @@ export function plugin(client: PluginClient<Events>) {
   });
 
   const nodesAtom = createState<Map<Id, UINode>>(new Map());
-  client.onMessage('subtreeUpdate', ({nodes}) => {
+  const snapshotAtom = createState<String | undefined>(undefined);
+  client.onMessage('subtreeUpdate', ({nodes, snapshot}) => {
+    snapshotAtom.set(snapshot);
     nodesAtom.update((draft) => {
       for (const node of nodes) {
         draft.set(node.id, node);
@@ -36,7 +38,7 @@ export function plugin(client: PluginClient<Events>) {
     nodesAtom.set(new Map(nodes.map((node) => [node.id, node])));
   });
 
-  return {rootId, nodes: nodesAtom, perfEvents};
+  return {rootId, snapshot: snapshotAtom, nodes: nodesAtom, perfEvents};
 }
 
 export {Component} from './components/main';

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

@@ -10,7 +10,12 @@
 export type Events = {
   init: {rootId: string};
   nativeScan: {txId: number; nodes: UINode[]};
-  subtreeUpdate: {txId: number; nodes: UINode[]};
+  subtreeUpdate: {
+    txId: number;
+    rootId: String;
+    nodes: UINode[];
+    snapshot: String;
+  };
   perfStats: PerfStatsEvent;
 };