UID Refactor 3/n UINode -> ClientNode

Summary:
UINode has never been a good name, we have 3 versions of a node.
ClientNode Previously UINode (the raw data from the client)
NestedNode (for the visualiser)
TreeNode (extends ClientNode and adds stuff specific to the tree like indentation and expanded states)

Arguablely we dont need nested node but that is another story

Reviewed By: elboman

Differential Revision: D47547529

fbshipit-source-id: 9a3b119d1230ea7b6734e7a3270c28287b04faf1

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

@@ -11,7 +11,7 @@ import {
   PerformanceStatsEvent,
   DynamicPerformanceStatsEvent,
   Id,
-  UINode,
+  ClientNode,
   FrameworkEvent,
 } from '../ClientTypes';
 import {UIState} from '../DesktopTypes';
@@ -27,7 +27,7 @@ import {
 
 export function PerfStats(props: {
   uiState: UIState;
-  nodes: Map<Id, UINode>;
+  nodes: Map<Id, ClientNode>;
   rootId?: Id;
   events: DataSource<DynamicPerformanceStatsEvent, number>;
   frameworkEvents: DataSource<FrameworkEvent>;

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

@@ -7,7 +7,12 @@
  * @format
  */
 
-import {FrameworkEvent, FrameworkEventType, Id, UINode} from '../ClientTypes';
+import {
+  FrameworkEvent,
+  FrameworkEventType,
+  Id,
+  ClientNode,
+} from '../ClientTypes';
 import {OnSelectNode, ViewMode} from '../DesktopTypes';
 import React, {
   ReactNode,
@@ -61,14 +66,20 @@ type NodeIndentGuide = {
   addHorizontalMarker: boolean;
   trimBottom: boolean;
 };
-export type TreeNode = UINode & {
+export type TreeNode = ClientNode & {
   depth: number;
   idx: number;
   isExpanded: boolean;
   indentGuide: NodeIndentGuide | null;
   frameworkEvents: number | null;
 };
-export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
+export function Tree2({
+  nodes,
+  rootId,
+}: {
+  nodes: Map<Id, ClientNode>;
+  rootId: Id;
+}) {
   const instance = usePlugin(plugin);
   const focusedNode = useValue(instance.uiState.focusedNode);
   const expandedNodes = useValue(instance.uiState.expandedNodes);
@@ -476,7 +487,7 @@ function HighlightedText(props: {text: string}) {
   return <span>{highlightManager.render(props.text)} </span>;
 }
 
-function nodeIcon(node: UINode) {
+function nodeIcon(node: ClientNode) {
   if (node.tags.includes('LithoMountable')) {
     return <DecorationImage src="icons/litho-logo-blue.png" />;
   } else if (node.tags.includes('Litho')) {
@@ -503,7 +514,7 @@ const renderDepthOffset = 12;
 
 const ContextMenu: React.FC<{
   frameworkEvents: DataSource<FrameworkEvent>;
-  nodes: Map<Id, UINode>;
+  nodes: Map<Id, ClientNode>;
   hoveredNodeId?: Id;
   focusedNodeId?: Id;
   onFocusNode: (id?: Id) => void;
@@ -625,14 +636,14 @@ const ContextMenu: React.FC<{
 };
 
 type TreeListStackItem = {
-  node: UINode;
+  node: ClientNode;
   depth: number;
   isChildOfSelectedNode: boolean;
   selectedNodeDepth: number;
 };
 
 function toTreeNodes(
-  nodes: Map<Id, UINode>,
+  nodes: Map<Id, ClientNode>,
   rootId: Id,
   expandedNodes: Set<Id>,
   selectedNode: Id | undefined,

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

@@ -8,7 +8,7 @@
  */
 
 import React, {useEffect, useMemo, useRef} from 'react';
-import {Bounds, Coordinate, Id, UINode} from '../ClientTypes';
+import {Bounds, Coordinate, Id, ClientNode} from '../ClientTypes';
 import {NestedNode, OnSelectNode} from '../DesktopTypes';
 
 import {produce, styled, theme, usePlugin, useValue} from 'flipper-plugin';
@@ -21,7 +21,7 @@ import {useDelay} from '../hooks/useDelay';
 export const Visualization2D: React.FC<
   {
     width: number;
-    nodes: Map<Id, UINode>;
+    nodes: Map<Id, ClientNode>;
     onSelectNode: OnSelectNode;
   } & React.HTMLAttributes<HTMLDivElement>
 > = ({width, nodes, onSelectNode}) => {
@@ -255,7 +255,13 @@ function Visualization2DNode({
   );
 }
 
-function HoveredOverlay({nodeId, nodes}: {nodeId: Id; nodes: Map<Id, UINode>}) {
+function HoveredOverlay({
+  nodeId,
+  nodes,
+}: {
+  nodeId: Id;
+  nodes: Map<Id, ClientNode>;
+}) {
   const node = nodes.get(nodeId);
 
   const isVisible = useDelay(longHoverDelay);
@@ -279,7 +285,7 @@ function HoveredOverlay({nodeId, nodes}: {nodeId: Id; nodes: Map<Id, UINode>}) {
 const OverlayBorder = styled.div<{
   type: 'selected' | 'hovered';
   nodeId: Id;
-  nodes: Map<Id, UINode>;
+  nodes: Map<Id, ClientNode>;
 }>(({type, nodeId, nodes}) => {
   const offset = getTotalOffset(nodeId, nodes);
   const node = nodes.get(nodeId);
@@ -305,7 +311,7 @@ const OverlayBorder = styled.div<{
  * computes the x,y offset of a given node from the root of the visualization
  * in node coordinates
  */
-function getTotalOffset(id: Id, nodes: Map<Id, UINode>): Coordinate {
+function getTotalOffset(id: Id, nodes: Map<Id, ClientNode>): Coordinate {
   const offset = {x: 0, y: 0};
   let curId: Id | undefined = id;
 
@@ -321,7 +327,7 @@ function getTotalOffset(id: Id, nodes: Map<Id, UINode>): Coordinate {
   return offset;
 }
 
-const ContextMenu: React.FC<{nodes: Map<Id, UINode>}> = ({children}) => {
+const ContextMenu: React.FC<{nodes: Map<Id, ClientNode>}> = ({children}) => {
   const instance = usePlugin(plugin);
 
   const focusedNodeId = useValue(instance.uiState.focusedNode);
@@ -392,9 +398,9 @@ function toPx(n: number) {
 
 function toNestedNode(
   rootId: Id,
-  nodes: Map<Id, UINode>,
+  nodes: Map<Id, ClientNode>,
 ): NestedNode | undefined {
-  function uiNodeToNestedNode(node: UINode): NestedNode {
+  function uiNodeToNestedNode(node: ClientNode): NestedNode {
     const nonNullChildren = node.children.filter(
       (childId) => nodes.get(childId) != null,
     );

desktop/plugins/public/ui-debugger/components/fb-stubs/IDEContextMenu.tsx

@@ -9,14 +9,14 @@
 
 import React from 'react';
 
-import {UINode} from '../../ClientTypes';
+import {ClientNode} from '../../ClientTypes';
 
-export async function prefetchSourceFileLocation(_: UINode) {}
+export async function prefetchSourceFileLocation(_: ClientNode) {}
 
-export function IDEContextMenuItems(_: {node: UINode}) {
+export function IDEContextMenuItems(_: {node: ClientNode}) {
   return <></>;
 }
 
-export function BigGrepContextMenuItems(_: {node: UINode}) {
+export function BigGrepContextMenuItems(_: {node: ClientNode}) {
   return <></>;
 }

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

@@ -18,7 +18,7 @@ import {
   theme,
 } from 'flipper-plugin';
 import {useHotkeys} from 'react-hotkeys-hook';
-import {Id, Metadata, MetadataId, UINode} from '../ClientTypes';
+import {Id, Metadata, MetadataId, ClientNode} from '../ClientTypes';
 import {PerfStats} from './PerfStats';
 import {Visualization2D} from './Visualization2D';
 import {Inspector} from './sidebar/Inspector';
@@ -35,7 +35,7 @@ export function Component() {
   const rootId = useValue(instance.rootId);
   const streamState = useValue(instance.uiState.streamState);
   const visualiserWidth = useValue(instance.uiState.visualiserWidth);
-  const nodes: Map<Id, UINode> = useValue(instance.nodes);
+  const nodes: Map<Id, ClientNode> = useValue(instance.nodes);
   const metadata: Map<MetadataId, Metadata> = useValue(instance.metadata);
 
   const [showPerfStats, setShowPerfStats] = useState(false);

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -19,7 +19,7 @@ import {
   usePlugin,
   useValue,
 } from 'flipper-plugin';
-import {Id, Metadata, MetadataId, UINode} from '../../ClientTypes';
+import {Id, Metadata, MetadataId, ClientNode} from '../../ClientTypes';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
 import {Tooltip} from 'antd';
@@ -29,7 +29,7 @@ import {FrameworkEventsInspector} from './inspector/FrameworkEventsInspector';
 
 type Props = {
   os: DeviceOS;
-  nodes: Map<Id, UINode>;
+  nodes: Map<Id, ClientNode>;
   metadata: Map<MetadataId, Metadata>;
   showExtra: (element: ReactNode) => void;
 };

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -13,7 +13,7 @@ import {
   InspectableObject,
   Metadata,
   MetadataId,
-  UINode,
+  ClientNode,
 } from '../../../ClientTypes';
 import {DataInspector, Panel, styled} from 'flipper-plugin';
 import {Col, Row} from 'antd';
@@ -244,7 +244,7 @@ function createSection(
 
 type InspectorMode = 'layout' | 'attribute';
 type Props = {
-  node: UINode;
+  node: ClientNode;
   metadata: Map<MetadataId, Metadata>;
   mode: InspectorMode;
   rawEnabled?: boolean;

desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx

@@ -8,10 +8,10 @@
  */
 
 import React from 'react';
-import {UINode} from '../../../ClientTypes';
+import {ClientNode} from '../../../ClientTypes';
 
 type Props = {
-  node: UINode;
+  node: ClientNode;
 };
 
 export const DocumentationInspector: React.FC<Props> = () => {

desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx

@@ -9,12 +9,12 @@
 
 import {Button} from 'antd';
 import {theme, TimelineDataDescription} from 'flipper-plugin';
-import {FrameworkEvent, UINode} from '../../../ClientTypes';
+import {FrameworkEvent, ClientNode} from '../../../ClientTypes';
 import React, {ReactNode, useState} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
 
 type Props = {
-  node: UINode;
+  node: ClientNode;
   events: readonly FrameworkEvent[];
   showExtra?: (element: ReactNode) => void;
 };

desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx

@@ -9,13 +9,13 @@
 
 import React from 'react';
 import {Col, Row} from 'antd';
-import {UINode} from '../../../ClientTypes';
+import {ClientNode} from '../../../ClientTypes';
 import {styled, theme} from 'flipper-plugin';
 import {CodeInspector} from './fb-stubs/CodeInspector';
 import {TopSpacedContainerStyle} from './Styles';
 
 type Props = {
-  node: UINode;
+  node: ClientNode;
 };
 
 const IdentityKey = styled.div({