Basic 2D wireframe

Summary: Basic visual wireframe for the purposes of verifying that our captured view hierachy is correct, the actual version we ship will hopefully be a lot better :)

Reviewed By: lblasa

Differential Revision: D39539278

fbshipit-source-id: 73d926ff1990f09ca9877430cb227f690d05d1d4

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

@@ -22,6 +22,7 @@ import {useHotkeys} from 'react-hotkeys-hook';
 import {Id, UINode} from '../types';
 import {PerfStats} from './PerfStats';
 import {Tree} from './Tree';
+import {Visualization2D} from './Visualization2D';
 
 export function Component() {
   const instance = usePlugin(plugin);
@@ -55,11 +56,14 @@ export function Component() {
     return (
       <>
         <Layout.ScrollContainer>
-          <Tree
-            setSelectedNode={setSelectedNode}
-            nodes={nodes}
-            rootId={rootId}
-          />
+          <Layout.Horizontal>
+            <Tree
+              setSelectedNode={setSelectedNode}
+              nodes={nodes}
+              rootId={rootId}
+            />
+            <Visualization2D root={rootId} nodes={nodes} />
+          </Layout.Horizontal>
         </Layout.ScrollContainer>
         {selectedNode && renderAttributesInspector(nodes.get(selectedNode))}
       </>