Right-align flame graph children
Brian Vaughn committed
May 3, 2019 at 09:21 UTC
e71bda525799341e5f10200922760259b29a87fb
1 file changed
+21
-17
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+21
-17
@@ -49,11 +49,7 @@ export function getChartData({
49
let maxSelfDuration = 0;
50
51
// Generate flame graph structure using tree base durations.
52
- const walkTree = (
53
- id: number,
54
- parentOffset: number = 0,
55
- currentDepth: number = 1
56
- ) => {
52
+ const walkTree = (id: number, rightOffset: number, currentDepth: number) => {
53
idToDepthMap.set(id, currentDepth);
54
55
const node = nodes.get(id);
@@ -61,12 +57,14 @@ export function getChartData({
57
throw Error(`Could not find node with id "${id}" in commit tree`);
58
}
59
60
+ const { children, displayName, key, treeBaseDuration } = node;
61
+
62
const actualDuration = actualDurations.get(id) || 0;
63
const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
64
const didRender = actualDurations.has(id);
65
68
- const name = node.displayName || 'Unknown';
69
- const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
66
+ const name = displayName || 'Unknown';
67
+ const maybeKey = key !== null ? ` key="${key}"` : '';
68
69
let label = `${name}${maybeKey}`;
70
if (didRender) {
@@ -84,9 +82,9 @@ export function getChartData({
82
id,
83
label,
84
name,
87
- offset: parentOffset,
85
+ offset: rightOffset - treeBaseDuration,
86
selfDuration,
89
- treeBaseDuration: node.treeBaseDuration,
87
+ treeBaseDuration,
88
};
89
90
if (currentDepth > rows.length) {
@@ -95,10 +93,11 @@ export function getChartData({
93
rows[currentDepth - 1].push(chartNode);
94
}
95
98
- node.children.forEach(childID => {
99
- const childChartNode = walkTree(childID, parentOffset, currentDepth + 1);
100
- parentOffset += childChartNode.treeBaseDuration;
101
- });
96
+ for (let i = children.length - 1; i >= 0; i--) {
97
+ const childID = children[i];
98
+ const childChartNode = walkTree(childID, rightOffset, currentDepth + 1);
99
+ rightOffset -= childChartNode.treeBaseDuration;
100
+ }
101
102
return chartNode;
103
};
@@ -112,10 +111,15 @@ export function getChartData({
111
// Don't assume a single root.
112
// Component filters or Fragments might lead to multiple "roots" in a flame graph.
113
let baseDuration = 0;
115
- root.children.forEach(childID => {
116
- const chartNode = walkTree(childID, baseDuration);
117
- baseDuration += chartNode.treeBaseDuration;
118
- });
114
+ for (let i = root.children.length - 1; i >= 0; i--) {
115
+ const id = root.children[i];
116
+ const node = nodes.get(id);
117
+ if (node == null) {
118
+ throw Error(`Could not find node with id "${id}" in commit tree`);
119
+ }
120
+ baseDuration += node.treeBaseDuration;
121
+ walkTree(id, baseDuration, 1);
122
+ }
123
124
const chartData = {
125
baseDuration,