Native UI scan

Summary: Added scheduler to scan the Native UI every 500 ms to test, Also added instrumentation in a separate event with the timings of each stage visualised in a Data table on desktop which can be accessed with ctrl+I. Currently this instrumentation event is sent every time but it could be a config option controlled from the desktop in the future

Reviewed By: lblasa

Differential Revision: D39205313

fbshipit-source-id: ca034171db6b062396b4ef28028aaa663c4d852a

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

@@ -7,35 +7,20 @@
  * @format
  */
 
-import React from 'react';
-import {Id, plugin, UINode} from '../index';
-import {usePlugin, useValue} from 'flipper-plugin';
+import React, {useState} from 'react';
+import {PerfStatsEvent, plugin} from '../index';
+import {
+  DataTable,
+  DataTableColumn,
+  Layout,
+  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;
-// }
+import {useHotkeys} from 'react-hotkeys-hook';
+import {Id, UINode} from '../types';
 
 function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): DataNode {
   function uiNodeToAntNode(id: Id): DataNode {
@@ -50,26 +35,84 @@ function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): DataNode {
   return uiNodeToAntNode(root);
 }
 
+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: 'nodesCount',
+    title: 'Total nodes',
+  },
+  {
+    key: 'start',
+    title: 'Start',
+    onRender: (row: PerfStatsEvent) => {
+      console.log(row.start);
+      return new Date(row.start).toISOString();
+    },
+  },
+  {
+    key: 'scanComplete',
+    title: 'Scan time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.start, row.scanComplete);
+    },
+  },
+  {
+    key: 'serializationComplete',
+    title: 'Serialization time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.scanComplete, 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 [showPerfStats, setShowPerfStats] = useState(false);
+
+  useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
+
+  if (showPerfStats)
+    return (
+      <DataTable<PerfStatsEvent>
+        dataSource={instance.perfEvents}
+        columns={columns}
+      />
+    );
+
   if (rootId) {
     const antTree = nodesToAntTree(rootId, nodes);
-    console.log(antTree);
-    console.log(rootId);
     return (
-      <Tree
-        showIcon
-        showLine
-        onSelect={(selected) => {
-          console.log(nodes.get(selected[0] as string));
-        }}
-        defaultExpandAll
-        switcherIcon={<DownOutlined />}
-        treeData={[antTree]}
-      />
+      <Layout.ScrollContainer>
+        <Tree
+          showIcon
+          showLine
+          onSelect={(selected) => {
+            console.log(nodes.get(selected[0] as string));
+          }}
+          defaultExpandAll
+          expandedKeys={[...nodes.keys()]}
+          switcherIcon={<DownOutlined />}
+          treeData={[antTree]}
+        />
+      </Layout.ScrollContainer>
     );
   }
 

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

@@ -7,62 +7,43 @@
  * @format
  */
 
-import {PluginClient, createState} from 'flipper-plugin';
+import {PluginClient, createState, createDataSource} from 'flipper-plugin';
+import {Id, UINode} from './types';
 
-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: Id[];
+export type PerfStatsEvent = {
+  txId: number;
+  start: number;
+  scanComplete: number;
+  serializationComplete: number;
+  socketComplete: number;
+  nodesCount: number;
 };
 
 type Events = {
   init: {rootId: string};
-  nativeScan: {nodes: UINode[]};
+  nativeScan: {txId: number; nodes: UINode[]};
+  perfStats: PerfStatsEvent;
 };
 
 export function plugin(client: PluginClient<Events>) {
   const rootId = createState<Id | undefined>(undefined);
-
-  const nodesAtom = createState<Map<Id, UINode>>(new Map());
   client.onMessage('init', (root) => rootId.set(root.rootId));
 
+  const perfEvents = createDataSource<PerfStatsEvent, 'txId'>([], {
+    key: 'txId',
+    limit: 10 * 1024,
+  });
+  client.onMessage('perfStats', (event) => {
+    perfEvents.append(event);
+  });
+
+  const nodesAtom = createState<Map<Id, UINode>>(new Map());
   client.onMessage('nativeScan', ({nodes}) => {
     nodesAtom.set(new Map(nodes.map((node) => [node.id, node])));
     console.log(nodesAtom.get());
   });
 
-  return {rootId, nodes: nodesAtom};
+  return {rootId, nodes: nodesAtom, perfEvents};
 }
 
 export {Component} from './components/main';

desktop/plugins/public/ui-debugger/package.json

@@ -12,6 +12,9 @@
   "keywords": [
     "flipper-plugin"
   ],
+  "dependencies": {
+    "react-hotkeys-hook" : "^3.4.7"
+  },
   "bugs": {
     "url": "https://github.com/facebook/flipper/issues"
   },

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

@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+
+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: Id[];
+};