Basic tree UI

Summary: A very basic tree in Antd to visualise the UI

Reviewed By: lblasa

Differential Revision: D38977035

fbshipit-source-id: f9bbf765ea8027eeb263cad86407502c6a5779dd

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

@@ -8,12 +8,56 @@
  */
 
 import React from 'react';
-import {plugin} from '../index';
+import {Id, plugin, UINode} from '../index';
 import {usePlugin, useValue} from 'flipper-plugin';
+import {Tree} from 'antd';
+import type {DataNode} from 'antd/es/tree';
+import {DownOutlined} from '@ant-design/icons';
+
+function treeToAntTree(uiNode: UINode): DataNode {
+  return {
+    key: uiNode.id,
+    title: uiNode.name,
+    children: uiNode.children ? uiNode.children.map(treeToAntTree) : [],
+  };
+}
+
+function treeToMap(uiNode: UINode): Map<Id, UINode> {
+  const result = new Map<Id, UINode>();
+
+  function treeToMapRec(node: UINode): void {
+    result.set(node.id, node);
+    for (const child of node.children) {
+      treeToMapRec(child);
+    }
+  }
+
+  treeToMapRec(uiNode);
+
+  return result;
+}
 
 export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
+  const tree = useValue(instance.tree);
+
+  if (tree) {
+    const nodeMap = treeToMap(tree);
+    const antTree = treeToAntTree(tree);
+    return (
+      <Tree
+        showIcon
+        showLine
+        onSelect={(selected) => {
+          console.log(nodeMap.get(selected[0] as string));
+        }}
+        defaultExpandAll
+        switcherIcon={<DownOutlined />}
+        treeData={[antTree]}
+      />
+    );
+  }
 
   return <div>{rootId}</div>;
 }

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

@@ -9,14 +9,60 @@
 
 import {PluginClient, createState} from 'flipper-plugin';
 
+export type Inspectable =
+  | InspectableObject
+  | InspectableText
+  | InspectableNumber
+  | InspectableColor;
+
+export type InspectableText = {
+  type: 'text';
+  value: string;
+  mutable: boolean;
+};
+
+export type InspectableNumber = {
+  type: 'number';
+  value: number;
+  mutable: boolean;
+};
+
+export type InspectableColor = {
+  type: 'number';
+  value: number;
+  mutable: boolean;
+};
+
+export type InspectableObject = {
+  type: 'object';
+  fields: Record<string, Inspectable>;
+};
+
+export type Id = string;
+export type UINode = {
+  id: Id;
+  name: string;
+  attributes: Record<string, Inspectable>;
+  children: UINode[];
+};
+
 type Events = {
   init: {rootId: string};
+
+  nativeScan: {root: UINode};
 };
 
 export function plugin(client: PluginClient<Events>) {
   const rootId = createState<string | undefined>(undefined);
+
+  const tree = createState<UINode | undefined>(undefined);
   client.onMessage('init', (root) => rootId.set(root.rootId));
-  return {rootId};
+
+  client.onMessage('nativeScan', ({root}) => {
+    tree.set(root as UINode);
+  });
+
+  return {rootId, tree};
 }
 
 export {Component} from './components/main';