From 87a1b657c314f385f403cdff7ee360c800f3e56c Mon Sep 17 00:00:00 2001 From: Luke De Feo Date: Fri, 21 Jul 2023 07:17:31 -0700 Subject: [PATCH] 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 --- .../public/ui-debugger/ClientTypes.tsx | 6 ++--- .../public/ui-debugger/DesktopTypes.tsx | 6 ++--- .../ui-debugger/components/PerfStats.tsx | 4 +-- .../public/ui-debugger/components/Tree.tsx | 25 ++++++++++++----- .../components/Visualization2D.tsx | 22 +++++++++------ .../components/fb-stubs/IDEContextMenu.tsx | 8 +++--- .../public/ui-debugger/components/main.tsx | 4 +-- .../components/sidebar/Inspector.tsx | 4 +-- .../sidebar/inspector/AttributesInspector.tsx | 4 +-- .../inspector/DocumentationInspector.tsx | 4 +-- .../inspector/FrameworkEventsInspector.tsx | 4 +-- .../sidebar/inspector/IdentityInspector.tsx | 4 +-- .../fb-stubs/StreamInterceptor.tsx | 6 ++--- desktop/plugins/public/ui-debugger/index.tsx | 27 ++++++++++++------- 14 files changed, 77 insertions(+), 51 deletions(-) diff --git a/desktop/plugins/public/ui-debugger/ClientTypes.tsx b/desktop/plugins/public/ui-debugger/ClientTypes.tsx index 9d593a17d..9090c6d23 100644 --- a/desktop/plugins/public/ui-debugger/ClientTypes.tsx +++ b/desktop/plugins/public/ui-debugger/ClientTypes.tsx @@ -18,7 +18,7 @@ export type Events = { export type FrameScanEvent = { frameTime: number; - nodes: UINode[]; + nodes: ClientNode[]; snapshot?: SnapshotInfo; frameworkEvents?: FrameworkEvent[]; }; @@ -30,7 +30,7 @@ export type FrameScanEvent = { export type SubtreeUpdateEvent = { txId: number; rootId: Id; - nodes: UINode[]; + nodes: ClientNode[]; snapshot: Snapshot; frameworkEvents?: FrameworkEvent[]; }; @@ -107,7 +107,7 @@ export type UpdateMetadataEvent = { attributeMetadata: Record; }; -export type UINode = { +export type ClientNode = { id: Id; parent?: Id; qualifiedName: string; //this is the name of the component plus qualification so myles has a chance of finding it. E.g com.facebook.MyView diff --git a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx index 4cab00c6e..e800b8db7 100644 --- a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx +++ b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx @@ -14,7 +14,7 @@ import { Inspectable, Bounds, Tag, - UINode, + ClientNode, Metadata, } from './ClientTypes'; @@ -91,8 +91,8 @@ export type StreamState = export interface StreamInterceptor { transformNodes( - nodes: Map, - ): Promise<[Map, Metadata[]]>; + nodes: Map, + ): Promise<[Map, Metadata[]]>; transformMetadata(metadata: Metadata): Promise; } diff --git a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx index f6f892f6d..5224772be 100644 --- a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx +++ b/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; + nodes: Map; rootId?: Id; events: DataSource; frameworkEvents: DataSource; diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx index 5927de1a7..80b97e264 100644 --- a/desktop/plugins/public/ui-debugger/components/Tree.tsx +++ b/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; rootId: Id}) { +export function Tree2({ + nodes, + rootId, +}: { + nodes: Map; + 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 {highlightManager.render(props.text)} ; } -function nodeIcon(node: UINode) { +function nodeIcon(node: ClientNode) { if (node.tags.includes('LithoMountable')) { return ; } else if (node.tags.includes('Litho')) { @@ -503,7 +514,7 @@ const renderDepthOffset = 12; const ContextMenu: React.FC<{ frameworkEvents: DataSource; - nodes: Map; + nodes: Map; 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, + nodes: Map, rootId: Id, expandedNodes: Set, selectedNode: Id | undefined, diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx index a7e87a52d..de77162fe 100644 --- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx +++ b/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; + nodes: Map; onSelectNode: OnSelectNode; } & React.HTMLAttributes > = ({width, nodes, onSelectNode}) => { @@ -255,7 +255,13 @@ function Visualization2DNode({ ); } -function HoveredOverlay({nodeId, nodes}: {nodeId: Id; nodes: Map}) { +function HoveredOverlay({ + nodeId, + nodes, +}: { + nodeId: Id; + nodes: Map; +}) { const node = nodes.get(nodeId); const isVisible = useDelay(longHoverDelay); @@ -279,7 +285,7 @@ function HoveredOverlay({nodeId, nodes}: {nodeId: Id; nodes: Map}) { const OverlayBorder = styled.div<{ type: 'selected' | 'hovered'; nodeId: Id; - nodes: Map; + nodes: Map; }>(({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): Coordinate { +function getTotalOffset(id: Id, nodes: Map): Coordinate { const offset = {x: 0, y: 0}; let curId: Id | undefined = id; @@ -321,7 +327,7 @@ function getTotalOffset(id: Id, nodes: Map): Coordinate { return offset; } -const ContextMenu: React.FC<{nodes: Map}> = ({children}) => { +const ContextMenu: React.FC<{nodes: Map}> = ({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, + nodes: Map, ): NestedNode | undefined { - function uiNodeToNestedNode(node: UINode): NestedNode { + function uiNodeToNestedNode(node: ClientNode): NestedNode { const nonNullChildren = node.children.filter( (childId) => nodes.get(childId) != null, ); diff --git a/desktop/plugins/public/ui-debugger/components/fb-stubs/IDEContextMenu.tsx b/desktop/plugins/public/ui-debugger/components/fb-stubs/IDEContextMenu.tsx index b465a02cf..062d09029 100644 --- a/desktop/plugins/public/ui-debugger/components/fb-stubs/IDEContextMenu.tsx +++ b/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 <>; } diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx index cc4a64479..9e29cd552 100644 --- a/desktop/plugins/public/ui-debugger/components/main.tsx +++ b/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 = useValue(instance.nodes); + const nodes: Map = useValue(instance.nodes); const metadata: Map = useValue(instance.metadata); const [showPerfStats, setShowPerfStats] = useState(false); diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx index fccaf5796..cd8298206 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx +++ b/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; + nodes: Map; metadata: Map; showExtra: (element: ReactNode) => void; }; diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx index c9641d193..0e2346e93 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx +++ b/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; mode: InspectorMode; rawEnabled?: boolean; diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx index c828fa6be..eb07ae9b3 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx +++ b/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 = () => { diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx index 355ed8a46..c44318ccb 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx +++ b/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; }; diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx index e4fbed8d2..532a8e016 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx +++ b/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({ diff --git a/desktop/plugins/public/ui-debugger/fb-stubs/StreamInterceptor.tsx b/desktop/plugins/public/ui-debugger/fb-stubs/StreamInterceptor.tsx index cfb927542..f1ea56bdc 100644 --- a/desktop/plugins/public/ui-debugger/fb-stubs/StreamInterceptor.tsx +++ b/desktop/plugins/public/ui-debugger/fb-stubs/StreamInterceptor.tsx @@ -8,7 +8,7 @@ */ import {DeviceOS} from 'flipper-plugin'; -import {Id, Metadata, UINode} from '../ClientTypes'; +import {Id, Metadata, ClientNode} from '../ClientTypes'; import {StreamInterceptor} from '../DesktopTypes'; export function getStreamInterceptor(_: DeviceOS): StreamInterceptor { @@ -21,8 +21,8 @@ class NoOpStreamInterceptor implements StreamInterceptor { } async transformNodes( - nodes: Map, - ): Promise<[Map, Metadata[]]> { + nodes: Map, + ): Promise<[Map, Metadata[]]> { return [nodes, []]; } diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx index fe6ba899e..89b8d8b3e 100644 --- a/desktop/plugins/public/ui-debugger/index.tsx +++ b/desktop/plugins/public/ui-debugger/index.tsx @@ -24,7 +24,7 @@ import { MetadataId, PerformanceStatsEvent, SnapshotInfo, - UINode, + ClientNode, } from './ClientTypes'; import { UIState, @@ -42,7 +42,7 @@ import {prefetchSourceFileLocation} from './components/fb-stubs/IDEContextMenu'; type LiveClientState = { snapshotInfo: SnapshotInfo | null; - nodes: Map; + nodes: Map; }; type PendingData = { @@ -193,7 +193,7 @@ export function plugin(client: PluginClient) { perfEvents.append(event); }); - const nodesAtom = createState>(new Map()); + const nodesAtom = createState>(new Map()); const frameworkEvents = createDataSource([], { indices: [['nodeId']], limit: 10000, @@ -327,7 +327,7 @@ export function plugin(client: PluginClient) { //todo deal with racecondition, where bloks screen is fetching, takes time then you go back get more recent frame then bloks screen comes and overrites it function applyFrameData( - nodes: Map, + nodes: Map, snapshotInfo: SnapshotInfo | undefined, ) { liveClientData = produce(liveClientData, (draft) => { @@ -390,7 +390,10 @@ export function plugin(client: PluginClient) { }; } -function uiActions(uiState: UIState, nodes: Atom>): UIActions { +function uiActions( + uiState: UIState, + nodes: Atom>, +): UIActions { const onExpandNode = (node: Id) => { uiState.expandedNodes.update((draft) => { draft.add(node); @@ -483,7 +486,10 @@ function uiActions(uiState: UIState, nodes: Atom>): UIActions { }; } -function checkFocusedNodeStillActive(uiState: UIState, nodes: Map) { +function checkFocusedNodeStillActive( + uiState: UIState, + nodes: Map, +) { const focusedNodeId = uiState.focusedNode.get(); const focusedNode = focusedNodeId && nodes.get(focusedNodeId); if (!focusedNode || !isFocusedNodeAncestryAllActive(focusedNode, nodes)) { @@ -492,8 +498,8 @@ function checkFocusedNodeStillActive(uiState: UIState, nodes: Map) { } function isFocusedNodeAncestryAllActive( - focused: UINode, - nodes: Map, + focused: ClientNode, + nodes: Map, ): boolean { let node = focused; @@ -519,7 +525,10 @@ function isFocusedNodeAncestryAllActive( return false; } -function collapseinActiveChildren(node: UINode, expandedNodes: Draft>) { +function collapseinActiveChildren( + node: ClientNode, + expandedNodes: Draft>, +) { if (node.activeChild) { expandedNodes.add(node.activeChild); for (const child of node.children) {