Add more diagnostics

Summary: node count and root node prescense will be very useful

Reviewed By: lblasa

Differential Revision: D47153394

fbshipit-source-id: 067f6f3aefa17cdfa88124956781400f53fe08d7

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

@@ -12,6 +12,7 @@ import {
   DynamicPerformanceStatsEvent,
   UIState,
   Id,
+  UINode,
 } from '../types';
 import React, {useMemo} from 'react';
 import {
@@ -25,6 +26,7 @@ import {
 
 export function PerfStats(props: {
   uiState: UIState;
+  nodes: Map<Id, UINode>;
   rootId?: Id;
   events: DataSource<DynamicPerformanceStatsEvent, number>;
 }) {
@@ -68,6 +70,8 @@ export function PerfStats(props: {
           data={{
             ...Object.fromEntries(uiStateValues),
             rootId: props.rootId,
+            nodesCount: props.nodes.size,
+            rootNode: props.nodes.get(props.rootId ?? 'noroot'),
           }}></DataInspector>
       </DetailSidebar>
     </Layout.Container>

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

@@ -50,6 +50,16 @@ export function Component() {
     setBottomPanelComponent(undefined);
   };
 
+  if (showPerfStats)
+    return (
+      <PerfStats
+        uiState={instance.uiState}
+        rootId={rootId}
+        nodes={nodes}
+        events={instance.perfEvents}
+      />
+    );
+
   if (streamState.state === 'FatalError') {
     return (
       <StreamInterceptorErrorView
@@ -78,15 +88,6 @@ export function Component() {
     );
   }
 
-  if (showPerfStats)
-    return (
-      <PerfStats
-        uiState={instance.uiState}
-        rootId={rootId}
-        events={instance.perfEvents}
-      />
-    );
-
   if (rootId == null || streamState.state === 'RetryingAfterError') {
     return (
       <Centered>