Refactor UI

Summary: Split our the mega component into separate parts in preparation for the visualizer

Reviewed By: lblasa

Differential Revision: D39509406

fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732

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

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {PerfStatsEvent} from '../types';
+import React from 'react';
+import {DataSource, DataTable, DataTableColumn} from 'flipper-plugin';
+
+export function PerfStats(props: {events: DataSource<PerfStatsEvent, number>}) {
+  return (
+    <DataTable<PerfStatsEvent> dataSource={props.events} columns={columns} />
+  );
+}
+
+function formatDiff(start: number, end: number): string {
+  const ms = end - start;
+  return `${ms.toFixed(0)}ms`;
+}
+
+const columns: DataTableColumn<PerfStatsEvent>[] = [
+  {
+    key: 'txId',
+    title: 'TXID',
+  },
+  {
+    key: 'observerType',
+    title: 'Type',
+  },
+  {
+    key: 'nodesCount',
+    title: 'Total nodes',
+  },
+  {
+    key: 'start',
+    title: 'Start',
+    onRender: (row: PerfStatsEvent) => {
+      return new Date(row.start).toISOString();
+    },
+  },
+  {
+    key: 'traversalComplete',
+    title: 'Traversal time (Main thread)',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.start, row.traversalComplete);
+    },
+  },
+  {
+    key: 'queuingComplete',
+    title: 'Queuing time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.traversalComplete, row.queuingComplete);
+    },
+  },
+  {
+    key: 'serializationComplete',
+    title: 'Serialization time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.queuingComplete, row.serializationComplete);
+    },
+  },
+  {
+    key: 'socketComplete',
+    title: 'Socket send time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.serializationComplete, row.socketComplete);
+    },
+  },
+];

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

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Id, UINode} from '../types';
+import {DataNode} from 'antd/es/tree';
+import {Tree as AntTree, Typography} from 'antd';
+import {DownOutlined} from '@ant-design/icons';
+import React from 'react';
+
+export function Tree(props: {
+  rootId: Id;
+  nodes: Map<Id, UINode>;
+  setSelectedNode: (id: Id) => void;
+}) {
+  const [antTree, inactive] = nodesToAntTree(props.rootId, props.nodes);
+
+  return (
+    <AntTree
+      showIcon
+      showLine
+      onSelect={(selected) => {
+        props.setSelectedNode(selected[0] as Id);
+      }}
+      defaultExpandAll
+      expandedKeys={[...props.nodes.keys()].filter(
+        (key) => !inactive.includes(key),
+      )}
+      switcherIcon={<DownOutlined />}
+      treeData={[antTree]}
+    />
+  );
+}
+
+function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): [DataNode, Id[]] {
+  const inactive: Id[] = [];
+
+  function uiNodeToAntNode(id: Id): DataNode {
+    const node = nodes.get(id);
+
+    if (node?.activeChild) {
+      for (const child of node.children) {
+        if (child !== node?.activeChild) {
+          inactive.push(child);
+        }
+      }
+    }
+
+    return {
+      key: id,
+      title: node?.name,
+      children: node?.children.map((id) => uiNodeToAntNode(id)),
+    };
+  }
+
+  return [uiNodeToAntNode(root), inactive];
+}

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

@@ -8,111 +8,28 @@
  */
 
 import React, {useState} from 'react';
-import {PerfStatsEvent, plugin} from '../index';
+import {plugin} from '../index';
 import {
   DataInspector,
-  DataTable,
-  DataTableColumn,
   DetailSidebar,
   Layout,
   usePlugin,
   useValue,
 } from 'flipper-plugin';
-import {Tree, Typography} from 'antd';
+import {Typography} from 'antd';
-import type {DataNode} from 'antd/es/tree';
+
-import {DownOutlined} from '@ant-design/icons';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {Id, UINode} from '../types';
-
+import {PerfStats} from './PerfStats';
-function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): [DataNode, Id[]] {
+import {Tree} from './Tree';
-  const inactive: Id[] = [];
-
-  function uiNodeToAntNode(id: Id): DataNode {
-    const node = nodes.get(id);
-
-    if (node?.activeChild) {
-      for (const child of node.children) {
-        if (child !== node?.activeChild) {
-          inactive.push(child);
-        }
-      }
-    }
-
-    return {
-      key: id,
-      title: node?.name,
-      children: node?.children.map((id) => uiNodeToAntNode(id)),
-    };
-  }
-
-  return [uiNodeToAntNode(root), inactive];
-}
-
-function formatDiff(start: number, end: number): string {
-  const ms = end - start;
-  return `${ms.toFixed(0)}ms`;
-}
-
-export const columns: DataTableColumn<PerfStatsEvent>[] = [
-  {
-    key: 'txId',
-    title: 'TXID',
-  },
-  {
-    key: 'observerType',
-    title: 'Type',
-  },
-  {
-    key: 'nodesCount',
-    title: 'Total nodes',
-  },
-  {
-    key: 'start',
-    title: 'Start',
-    onRender: (row: PerfStatsEvent) => {
-      console.log(row.start);
-      return new Date(row.start).toISOString();
-    },
-  },
-  {
-    key: 'traversalComplete',
-    title: 'Traversal time (Main thread)',
-    onRender: (row: PerfStatsEvent) => {
-      return formatDiff(row.start, row.traversalComplete);
-    },
-  },
-  {
-    key: 'queuingComplete',
-    title: 'Queuing time',
-    onRender: (row: PerfStatsEvent) => {
-      return formatDiff(row.traversalComplete, row.queuingComplete);
-    },
-  },
-  {
-    key: 'serializationComplete',
-    title: 'Serialization time',
-    onRender: (row: PerfStatsEvent) => {
-      return formatDiff(row.queuingComplete, row.serializationComplete);
-    },
-  },
-  {
-    key: 'socketComplete',
-    title: 'Socket send time',
-    onRender: (row: PerfStatsEvent) => {
-      return formatDiff(row.serializationComplete, row.socketComplete);
-    },
-  },
-];
 
 export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
-  const nodes = useValue(instance.nodes);
+  const nodes: Map<Id, UINode> = useValue(instance.nodes);
 
   const [showPerfStats, setShowPerfStats] = useState(false);
-  const [selectedNode, setSelectedNode] = useState<string | undefined>(
+  const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
-    undefined,
-  );
 
   useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
 
@@ -125,38 +42,23 @@ export function Component() {
         <DetailSidebar>
           <Layout.Container gap pad>
             <Typography.Title level={2}>Attributes Inspector</Typography.Title>
-            <DataInspector data={node.attributes} expandRoot />
+            <DataInspector data={node} expandRoot />
           </Layout.Container>
         </DetailSidebar>
       </>
     );
   }
 
-  if (showPerfStats)
+  if (showPerfStats) return <PerfStats events={instance.perfEvents} />;
-    return (
-      <DataTable<PerfStatsEvent>
-        dataSource={instance.perfEvents}
-        columns={columns}
-      />
-    );
 
   if (rootId) {
-    const [antTree, inactive] = nodesToAntTree(rootId, nodes);
     return (
       <>
         <Layout.ScrollContainer>
           <Tree
-            showIcon
+            setSelectedNode={setSelectedNode}
-            showLine
+            nodes={nodes}
-            onSelect={(selected) => {
+            rootId={rootId}
-              setSelectedNode(selected[0] as string);
-            }}
-            defaultExpandAll
-            expandedKeys={[...nodes.keys()].filter(
-              (key) => !inactive.includes(key),
-            )}
-            switcherIcon={<DownOutlined />}
-            treeData={[antTree]}
           />
         </Layout.ScrollContainer>
         {selectedNode && renderAttributesInspector(nodes.get(selectedNode))}

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

@@ -8,25 +8,7 @@
  */
 
 import {PluginClient, createState, createDataSource} from 'flipper-plugin';
-import {Id, UINode} from './types';
+import {Events, Id, PerfStatsEvent, UINode} from './types';
-
-export type PerfStatsEvent = {
-  txId: number;
-  observerType: string;
-  start: number;
-  traversalComplete: number;
-  serializationComplete: number;
-  queuingComplete: number;
-  socketComplete: number;
-  nodesCount: number;
-};
-
-type Events = {
-  init: {rootId: string};
-  nativeScan: {txId: number; nodes: UINode[]};
-  subtreeUpdate: {txId: number; nodes: UINode[]};
-  perfStats: PerfStatsEvent;
-};
 
 export function plugin(client: PluginClient<Events>) {
   const rootId = createState<Id | undefined>(undefined);

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

@@ -7,6 +7,45 @@
  * @format
  */
 
+export type Events = {
+  init: {rootId: string};
+  nativeScan: {txId: number; nodes: UINode[]};
+  subtreeUpdate: {txId: number; nodes: UINode[]};
+  perfStats: PerfStatsEvent;
+};
+
+export type PerfStatsEvent = {
+  txId: number;
+  observerType: string;
+  start: number;
+  traversalComplete: number;
+  serializationComplete: number;
+  queuingComplete: number;
+  socketComplete: number;
+  nodesCount: number;
+};
+
+export type UINode = {
+  id: Id;
+  name: string;
+  attributes: Record<string, Inspectable>;
+  children: Id[];
+  bounds?: Bounds;
+  tags: Tag[];
+  activeChild?: Id;
+};
+
+export type Bounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type Id = string;
+
+export type Tag = 'Native' | 'Declarative' | 'Android' | 'Litho ';
+
 export type Inspectable =
   | InspectableObject
   | InspectableText
@@ -35,12 +74,3 @@ 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: Id[];
-  activeChild?: Id;
-};