Skip to content

[Flight] Make it more obvious what the short name in the I/O description represents #33944

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 21, 2025
+387 −277
Merged

[Flight] Make it more obvious what the short name in the I/O description represents #33944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
74f0af6
[Flight] Make it more obvious what the short name in the I/O descript…
eps1lon Jul 18, 2025
6b10c6a
Cut out the middle instead
eps1lon Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/react-client/src/ReactFlightPerformanceTrack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,13 @@ function getIOShortName(
const slashIdx = description.lastIndexOf('/', queryIdx - 1);
if (queryIdx - slashIdx < descMaxLength) {
// This may now be either the file name or the host.
desc = ' (' + description.slice(slashIdx + 1, queryIdx) + ')';
// Include the slash to make it more obvious what we trimmed.
desc = ' (…' + description.slice(slashIdx, queryIdx) + ')';
} else {
// cut out the middle to not exceed the max length
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure this is better. The max length is assuming that most things will be either below the limit or excluded all together. This makes it so that much more is always the exact limit which is large. Making it much noisier.

Additionally, Chrome will insert its own ellipsis in the middle when it's collapsed which can lead to two.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better to just elide it if it's long or increase the limit and let Chrome insert the ellipsis in the middle.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally, Chrome will insert its own ellipsis in the middle when it's collapsed which can lead to two.

I guess the original idea was that we don't want to make the track too busy so a limit does make sense. The double ellipsis is unfortunate. Eliding the value felt pretty bad. It looked like some information was missing.

const start = description.slice(slashIdx, slashIdx + descMaxLength / 2);
const end = description.slice(queryIdx - descMaxLength / 2, queryIdx);
desc = ' (' + (slashIdx > 0 ? '…' : '') + start + '…' + end + ')';
}
}
}
Expand Down
Loading
Loading