From 7812dae764fb9f6a57fb86a6fc4dd9a41cb5e8c7 Mon Sep 17 00:00:00 2001 From: Luke De Feo Date: Wed, 19 Jul 2023 08:58:20 -0700 Subject: [PATCH] Migrate framework events backing data structure to datasource Summary: This will allow us to build a nice table easily. Reviewed By: lblasa Differential Revision: D47520029 fbshipit-source-id: 3cdd776533b66688329171eb29b892e0b9153540 --- .../ui-debugger/components/PerfStats.tsx | 13 +---- .../public/ui-debugger/components/Tree.tsx | 52 +++++++++++-------- .../components/sidebar/Inspector.tsx | 7 ++- .../inspector/FrameworkEventsInspector.tsx | 4 +- desktop/plugins/public/ui-debugger/index.tsx | 22 +++----- desktop/plugins/public/ui-debugger/types.tsx | 1 + 6 files changed, 46 insertions(+), 53 deletions(-) diff --git a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx index 3907b2cac6d..6a2166e413d 100644 --- a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx +++ b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx @@ -17,14 +17,12 @@ import { } from '../types'; import React, {useMemo} from 'react'; import { - Atom, DataInspector, DataSource, DataTable, DataTableColumn, DetailSidebar, Layout, - useValue, } from 'flipper-plugin'; export function PerfStats(props: { @@ -32,15 +30,13 @@ export function PerfStats(props: { nodes: Map; rootId?: Id; events: DataSource; - frameworkEvents: Atom>; + frameworkEvents: DataSource; }) { const uiStateValues = Object.entries(props.uiState).map(([key, value]) => [ key, value.get(), ]); - const frameworkEventsValue = useValue(props.frameworkEvents); - const allColumns = useMemo(() => { if (props.events.size > 0) { const row = props.events.get(0); @@ -65,7 +61,6 @@ export function PerfStats(props: { return columns; }, [props.events]); - const newLocal = [...frameworkEventsValue.entries()]; return ( @@ -79,11 +74,7 @@ export function PerfStats(props: { rootId: props.rootId, nodesCount: props.nodes.size, rootNode: props.nodes.get(props.rootId ?? 'noroot'), - frameworkEvents: newLocal, - frameworkEventsSize: newLocal.reduce( - (acc, value) => acc + value[1].length, - 0, - ), + frameworkEventsSize: props.frameworkEvents.size, }}> diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx index c645fc50a89..484f16b0756 100644 --- a/desktop/plugins/public/ui-debugger/components/Tree.tsx +++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx @@ -24,6 +24,7 @@ import React, { useRef, } from 'react'; import { + DataSource, getFlipperLib, HighlightManager, HighlightProvider, @@ -69,6 +70,7 @@ export type TreeNode = UINode & { idx: number; isExpanded: boolean; indentGuide: NodeIndentGuide | null; + frameworkEvents: number | null; }; export function Tree2({nodes, rootId}: {nodes: Map; rootId: Id}) { const instance = usePlugin(plugin); @@ -79,7 +81,6 @@ export function Tree2({nodes, rootId}: {nodes: Map; rootId: Id}) { const isContextMenuOpen = useValue(instance.uiState.isContextMenuOpen); const hoveredNode = head(useValue(instance.uiState.hoveredNodes)); - const frameworkEvents = useValue(instance.frameworkEvents); const filterMainThreadMonitoring = useValue( instance.uiState.filterMainThreadMonitoring, ); @@ -94,6 +95,9 @@ export function Tree2({nodes, rootId}: {nodes: Map; rootId: Id}) { focusedNode || rootId, expandedNodes, selectedNode?.id, + instance.frameworkEvents, + frameworkEventsMonitoring, + filterMainThreadMonitoring, ); const refs: React.RefObject[] = treeNodes.map(() => @@ -101,7 +105,16 @@ export function Tree2({nodes, rootId}: {nodes: Map; rootId: Id}) { ); return {treeNodes, refs}; - }, [expandedNodes, focusedNode, nodes, rootId, selectedNode]); + }, [ + expandedNodes, + filterMainThreadMonitoring, + focusedNode, + frameworkEventsMonitoring, + instance.frameworkEvents, + nodes, + rootId, + selectedNode?.id, + ]); const isUsingKBToScrollUtill = useRef(0); @@ -240,9 +253,6 @@ export function Tree2({nodes, rootId}: {nodes: Map; rootId: Id}) { innerRef={refs[virtualRow.index]} key={virtualRow.index} treeNode={treeNodes[virtualRow.index]} - frameworkEvents={frameworkEvents} - frameworkEventsMonitoring={frameworkEventsMonitoring} - filterMainThreadMonitoring={filterMainThreadMonitoring} highlightedNodes={highlightedNodes} selectedNode={selectedNode?.id} hoveredNode={hoveredNode} @@ -292,9 +302,6 @@ function TreeItemContainer({ transform, innerRef, treeNode, - frameworkEvents, - frameworkEventsMonitoring, - filterMainThreadMonitoring, highlightedNodes, selectedNode, hoveredNode, @@ -308,10 +315,7 @@ function TreeItemContainer({ transform: string; innerRef: Ref; treeNode: TreeNode; - frameworkEvents: Map; highlightedNodes: Set; - frameworkEventsMonitoring: Map; - filterMainThreadMonitoring: boolean; selectedNode?: Id; hoveredNode?: Id; isUsingKBToScroll: RefObject; @@ -321,15 +325,6 @@ function TreeItemContainer({ onCollapseNode: (node: Id) => void; onHoverNode: (node: Id) => void; }) { - let events = frameworkEvents.get(treeNode.id); - if (events) { - events = events - .filter((e) => frameworkEventsMonitoring.get(e.type)) - .filter( - (e) => filterMainThreadMonitoring === false || e.thread === 'main', - ); - } - return (
- {events && ( + {treeNode.frameworkEvents && ( , selectedNode: Id | undefined, + frameworkEvents: DataSource, + frameworkEventsMonitoring: Map, + filterMainThreadMonitoring: boolean, ): TreeNode[] { const root = nodes.get(rootId); if (root == null) { @@ -643,11 +641,21 @@ function toTreeNodes( const isExpanded = expandedNodes.has(node.id); const isSelected = node.id === selectedNode; + let events = frameworkEvents.getAllRecordsByIndex({nodeId: node.id}); + if (events) { + events = events + .filter((e) => frameworkEventsMonitoring.get(e.type)) + .filter( + (e) => filterMainThreadMonitoring === false || e.thread === 'main', + ); + } + treeNodes.push({ ...node, idx: i, depth, isExpanded, + frameworkEvents: events.length > 0 ? events.length : null, indentGuide: stackItem.isChildOfSelectedNode ? { depth: stackItem.selectedNodeDepth, diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx index 5a256959c93..de02cae08c2 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx @@ -42,7 +42,6 @@ export const Inspector: React.FC = ({ }) => { const instance = usePlugin(plugin); const selectedNodeId = useValue(instance.uiState.selectedNode)?.id; - const frameworkEvents = useValue(instance.frameworkEvents); const selectedNode = selectedNodeId ? nodes.get(selectedNodeId) : undefined; if (!selectedNode) { @@ -50,8 +49,8 @@ export const Inspector: React.FC = ({ } const selectedFrameworkEvents = selectedNodeId - ? frameworkEvents?.get(selectedNodeId) - : undefined; + ? instance.frameworkEvents.getAllRecordsByIndex({nodeId: selectedNodeId}) + : []; return ( @@ -108,7 +107,7 @@ export const Inspector: React.FC = ({ /> )} - {selectedFrameworkEvents && ( + {selectedFrameworkEvents?.length > 0 && ( void; }; export const FrameworkEventsInspector: React.FC = ({ @@ -41,7 +41,7 @@ export const FrameworkEventsInspector: React.FC = ({ }; const hasStacktrace = (event: FrameworkEvent) => { - return event.attribution?.type === 'stacktrace'; + return event?.attribution?.type === 'stacktrace'; }; return ( diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx index c3d80f493de..7e4a9563192 100644 --- a/desktop/plugins/public/ui-debugger/index.tsx +++ b/desktop/plugins/public/ui-debugger/index.tsx @@ -143,7 +143,7 @@ export function plugin(client: PluginClient) { clearCallBack: async () => { uiState.streamState.set({state: 'Ok'}); nodesAtom.set(new Map()); - frameworkEvents.set(new Map()); + frameworkEvents.clear(); snapshot.set(null); }, }); @@ -191,7 +191,10 @@ export function plugin(client: PluginClient) { }); const nodesAtom = createState>(new Map()); - const frameworkEvents = createState>(new Map()); + const frameworkEvents = createDataSource([], { + indices: [['nodeId']], + limit: 10000, + }); const highlightedNodes = createState(new Set()); const snapshot = createState(null); @@ -279,18 +282,9 @@ export function plugin(client: PluginClient) { }; function applyFrameworkEvents(frameScan: FrameScanEvent) { - frameworkEvents.update((draft) => { - if (frameScan?.frameworkEvents) { - frameScan.frameworkEvents.forEach((frameworkEvent) => { - const frameworkEventsForNode = draft.get(frameworkEvent.nodeId); - if (frameworkEventsForNode) { - frameworkEventsForNode.push(frameworkEvent); - } else { - draft.set(frameworkEvent.nodeId, [frameworkEvent]); - } - }); - } - }); + for (const frameworkEvent of frameScan.frameworkEvents ?? []) { + frameworkEvents.append(frameworkEvent); + } if (uiState.isPaused.get() === true) { return; diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx index 60a1bff5fa1..f1a7e4da50d 100644 --- a/desktop/plugins/public/ui-debugger/types.tsx +++ b/desktop/plugins/public/ui-debugger/types.tsx @@ -110,6 +110,7 @@ type UpstreamEvent = {type: 'upstreamEvent'; eventId: Id}; type FrameworkEventAttribution = Stacktrace | Reason | UpstreamEvent; export type FrameworkEvent = { + id: number; nodeId: Id; type: FrameworkEventType; timestamp: number;