Skip to content

Commit 3c6ea8f

Browse files
committed
filter commits that have no corresponding commitData
1 parent e81e69a commit 3c6ea8f

File tree

1 file changed

+14
-5
lines changed

1 file changed

+14
-5
lines changed

packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function InteractionListItem({data: itemData, index, style}: Props) {
3535
selectTab,
3636
} = itemData;
3737

38-
const {commitData} = dataForRoot;
38+
const {commitData, interactionCommits} = dataForRoot;
3939
const {interactions, lastInteractionTime, maxCommitDuration} = chartData;
4040

4141
const interaction = interactions[index];
@@ -47,6 +47,10 @@ function InteractionListItem({data: itemData, index, style}: Props) {
4747
selectInteraction(interaction.id);
4848
}, [interaction, selectInteraction]);
4949

50+
const commits = (interactionCommits.get(interaction.id) || []).filter(
51+
commitIndex => commitData[commitIndex],
52+
);
53+
5054
const startTime = interaction.timestamp;
5155
const stopTime = lastInteractionTime;
5256

@@ -77,17 +81,22 @@ function InteractionListItem({data: itemData, index, style}: Props) {
7781
width: scaleX(stopTime - startTime, 0),
7882
}}
7983
/>
80-
{commitData.map((commit, commitIndex) => (
84+
{commits.map(commitIndex => (
8185
<div
8286
className={styles.CommitBox}
8387
key={commitIndex}
8488
onClick={() => viewCommit(commitIndex)}
8589
style={{
8690
backgroundColor: getGradientColor(
87-
Math.min(1, Math.max(0, commit.duration / maxCommitDuration)) ||
88-
0,
91+
Math.min(
92+
1,
93+
Math.max(
94+
0,
95+
commitData[commitIndex].duration / maxCommitDuration,
96+
),
97+
) || 0,
8998
),
90-
left: labelWidth + scaleX(commit.timestamp, 0),
99+
left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),
91100
}}
92101
/>
93102
))}

0 commit comments

Comments
 (0)