Sync selected Profiler node back to the Components tab
Also show element keys in Profiler charts
Brian Vaughn committed
Apr 5, 2019 at 08:47 UTC
0c8129c78abf8d7d4bff9abb6a8378eb8c2a466b
4 files changed
+33
-18
src/devtools/views/Profiler/CommitFlamegraphListItem.js
+1
-6
@@ -47,10 +47,9 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
47
<Fragment>
48
{row.map(chartNode => {
49
const {
50
- actualDuration,
50
didRender,
51
id,
53
- name,
52
+ label,
53
offset,
54
selfDuration,
55
treeBaseDuration,
@@ -74,12 +73,8 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
73
}
74
75
let color = 'var(--color-commit-did-not-render)';
77
- let label = name;
76
if (didRender) {
77
color = getGradientColor(selfDuration / maxSelfDuration);
80
- label = `${name} (${selfDuration.toFixed(
81
- 1
82
- )}ms of ${actualDuration.toFixed(1)}ms)`;
78
}
79
80
return (
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+14
-6
@@ -9,7 +9,6 @@ export type ChartNode = {|
9
didRender: boolean,
10
id: number,
11
label: string,
12
- name: string,
12
offset: number,
13
selfDuration: number,
14
treeBaseDuration: number,
@@ -61,19 +60,28 @@ export function getChartData({
60
throw Error(`Could not find node with id "${id}" in commit tree`);
61
}
62
63
+ const actualDuration = actualDurations.get(id) || 0;
64
+ const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
65
+ const didRender = actualDurations.has(id);
66
+
67
const name = node.displayName || 'Unknown';
68
+ const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
69
66
- const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);
70
+ let label = `${name}${maybeKey}`;
71
+ if (didRender) {
72
+ label += ` (${selfDuration.toFixed(1)}ms) of ${actualDuration.toFixed(
73
+ 1
74
+ )}ms)`;
75
+ }
76
77
maxDepth = Math.max(maxDepth, currentDepth);
78
maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
79
80
const chartNode: ChartNode = {
72
- actualDuration: actualDurations.get(id) || 0,
73
- didRender: actualDurations.has(id),
81
+ actualDuration,
82
+ didRender,
83
id,
75
- label: `${name} (${selfDuration.toFixed(1)}ms)`,
76
- name,
84
+ label,
85
offset: parentOffset,
86
selfDuration,
87
treeBaseDuration: node.treeBaseDuration,
src/devtools/views/Profiler/ProfilerContext.js
+16
-3
@@ -78,7 +78,7 @@ type Props = {|
78
79
function ProfilerContextController({ children }: Props) {
80
const store = useContext(StoreContext);
81
- const { selectedElementID } = useContext(TreeContext);
81
+ const { selectElementAtIndex, selectedElementID } = useContext(TreeContext);
82
83
const subscription = useMemo(
84
() => ({
@@ -140,18 +140,31 @@ function ProfilerContextController({ children }: Props) {
140
null
141
);
142
const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
143
- const [selectedFiberID, selectFiber] = useState<number | null>(null);
143
+ const [selectedFiberID, selectFiberID] = useState<number | null>(null);
144
const [selectedInteractionID, selectInteraction] = useState<number | null>(
145
null
146
);
147
148
+ const selectFiber = useCallback(
149
+ (id: number | null) => {
150
+ selectFiberID(id);
151
+ if (id !== null) {
152
+ const index = store.getIndexOfElementID(id);
153
+ if (index !== null) {
154
+ selectElementAtIndex(index);
155
+ }
156
+ }
157
+ },
158
+ [selectElementAtIndex, selectFiberID, store]
159
+ );
160
+
161
if (isProfiling) {
162
batchedUpdates(() => {
163
if (selectedCommitIndex !== null) {
164
selectCommitIndex(null);
165
}
166
if (selectedFiberID !== null) {
154
- selectFiber(null);
167
+ selectFiberID(null);
168
}
169
if (selectedInteractionID !== null) {
170
selectInteraction(null);
src/devtools/views/Profiler/RankedChartBuilder.js
+2
-3
@@ -7,7 +7,6 @@ import type { CommitDetails, CommitTree, Node } from './types';
7
export type ChartNode = {|
8
id: number,
9
label: string,
10
- name: string,
10
value: number,
11
|};
12
@@ -54,11 +53,11 @@ export function getChartData({
53
maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
54
55
const name = node.displayName || 'Unknown';
57
- const label = `${name} (${selfDuration.toFixed(1)}ms)`;
56
+ const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
57
+ const label = `${name}${maybeKey} (${selfDuration.toFixed(1)}ms)`;
58
chartNodes.push({
59
id,
60
label,
61
- name,
61
value: selfDuration,
62
});
63
});