Updated Flamechart to support multiple nodes at root
Brian Vaughn committed
May 1, 2019 at 17:44 UTC
83b521c7b472823548292480f7bff4d5bb6c5c1f
3 files changed
+22
-10
src/devtools/views/Profiler/CommitFlamegraph.js
+9
-7
@@ -18,7 +18,7 @@ import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
18
export type ItemData = {|
19
chartData: ChartData,
20
scaleX: (value: number, fallbackValue: number) => number,
21
- selectedChartNode: ChartNode,
21
+ selectedChartNode: ChartNode | null,
22
selectedChartNodeIndex: number,
23
selectFiber: (id: number | null, name: string | null) => void,
24
width: number,
@@ -127,18 +127,20 @@ function CommitFlamegraph({
127
chartNode => chartNode.id === selectedFiberID
128
): any): ChartNode);
129
}
130
- // The selected node might not be in the tree for this commit,
131
- // so it's important that we have a fallback plan.
132
- if (chartNode == null) {
133
- return chartData.rows[0][0];
134
- }
130
return chartNode;
131
}, [chartData, selectedFiberID, selectedChartNodeIndex]);
132
133
const itemData = useMemo<ItemData>(
134
() => ({
135
chartData,
141
- scaleX: scale(0, selectedChartNode.treeBaseDuration, 0, width),
136
+ scaleX: scale(
137
+ 0,
138
+ selectedChartNode !== null
139
+ ? selectedChartNode.treeBaseDuration
140
+ : chartData.baseDuration,
141
+ 0,
142
+ width
143
+ ),
144
selectedChartNode,
145
selectedChartNodeIndex,
146
selectFiber,
src/devtools/views/Profiler/CommitFlamegraphListItem.js
+4
-1
@@ -41,7 +41,10 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
41
42
const row = rows[index];
43
44
- let selectedNodeOffset = scaleX(selectedChartNode.offset, width);
44
+ let selectedNodeOffset = scaleX(
45
+ selectedChartNode !== null ? selectedChartNode.offset : 0,
46
+ width
47
+ );
48
49
return (
50
<Fragment>
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+9
-2
@@ -16,6 +16,7 @@ export type ChartNode = {|
16
|};
17
18
export type ChartData = {|
19
+ baseDuration: number,
20
depth: number,
21
idToDepthMap: Map<number, number>,
22
maxSelfDuration: number,
@@ -108,10 +109,16 @@ export function getChartData({
109
throw Error(`Could not find root node with id "${rootID}" in commit tree`);
110
}
111
111
- // TODO: Looks like there's an assumption here that a root has only one child. Is that so with a fragment in the root?
112
- walkTree(root.children[0]);
112
+ // Don't assume a single root.
113
+ // Component filters or Fragments might lead to multiple "roots" in a flame graph.
114
+ let baseDuration = 0;
115
+ root.children.forEach(childID => {
116
+ const chartNode = walkTree(childID, baseDuration);
117
+ baseDuration += chartNode.treeBaseDuration;
118
+ });
119
120
const chartData = {
121
+ baseDuration,
122
depth: maxDepth,
123
idToDepthMap,
124
maxSelfDuration,