Skip to content
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.

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

fix: Truncate sunburst chart's breadcrumbs #3413

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

suejung-sentry
Copy link
Contributor

@suejung-sentry suejung-sentry commented Oct 21, 2024

Fix bug with sunburst's breadcrumbs show a "..." if too long. It always display just the last element with "..." if it goes more than 1 deep as it seemed like in most cases only 1 fits on the page. This is a quick and dirty solution. For real we should probably give more real estate for this rich information or make a truncatable Breadcrumbs reusable component that has a resize observer.

Closes codecov/engineering-team#2337

Example screenshots:
Screenshot 2024-10-21 at 5 32 02 PM
Screenshot 2024-10-21 at 5 31 51 PM
Screenshot 2024-10-21 at 5 31 45 PM

here are the befores which just need a bandaid:
Screenshot 2024-10-21 at 5 34 19 PM
Screenshot 2024-10-21 at 5 33 38 PM

Copy link

codecov bot commented Oct 21, 2024

Bundle Report

Changes will decrease total bundle size by 17 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-production-system 5.5MB 197 bytes (-0.0%) ⬇️
gazebo-production-system-esm 5.55MB 180 bytes (0.0%) ⬆️

Copy link

codecov bot commented Oct 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.15%. Comparing base (ebbfd96) to head (edc7dd2).

✅ All tests successful. No failed tests found.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #3413   +/-   ##
=======================================
  Coverage   99.15%   99.15%           
=======================================
  Files         809      809           
  Lines       14275    14281    +6     
  Branches     3942     3937    -5     
=======================================
+ Hits        14154    14160    +6     
  Misses        112      112           
  Partials        9        9           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <100.00%> (+3.80%) ⬆️
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 100.00% <ø> (ø)
Pages 98.89% <100.00%> (+<0.01%) ⬆️
Services 99.45% <ø> (ø)
Shared 99.80% <ø> (ø)
UI 99.06% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ebbfd96...edc7dd2. Read the comment docs.

@codecov-qa
Copy link

codecov-qa bot commented Oct 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.15%. Comparing base (ebbfd96) to head (edc7dd2).

✅ All tests successful. No failed tests found.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #3413   +/-   ##
=======================================
  Coverage   99.15%   99.15%           
=======================================
  Files         809      809           
  Lines       14275    14281    +6     
  Branches     3935     3937    +2     
=======================================
+ Hits        14154    14160    +6     
  Misses        112      112           
  Partials        9        9           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <100.00%> (+3.80%) ⬆️
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 100.00% <ø> (ø)
Pages 98.89% <100.00%> (+<0.01%) ⬆️
Services 99.45% <ø> (ø)
Shared 99.80% <ø> (ø)
UI 99.06% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ebbfd96...edc7dd2. Read the comment docs.

@codecov-notifications
Copy link

codecov-notifications bot commented Oct 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #3413   +/-   ##
=======================================
  Coverage   99.15%   99.15%           
=======================================
  Files         809      809           
  Lines       14275    14281    +6     
  Branches     3935     3937    +2     
=======================================
+ Hits        14154    14160    +6     
  Misses        112      112           
  Partials        9        9           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <100.00%> (+3.80%) ⬆️
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 100.00% <ø> (ø)
Pages 98.89% <100.00%> (+<0.01%) ⬆️
Services 99.45% <ø> (ø)
Shared 99.80% <ø> (ø)
UI 99.06% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ebbfd96...edc7dd2. Read the comment docs.

Copy link

codecov-public-qa bot commented Oct 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.15%. Comparing base (ebbfd96) to head (edc7dd2).

✅ All tests successful. No failed tests found.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #3413   +/-   ##
=======================================
  Coverage   99.15%   99.15%           
=======================================
  Files         809      809           
  Lines       14275    14281    +6     
  Branches     3935     3944    +9     
=======================================
+ Hits        14154    14160    +6     
  Misses        112      112           
  Partials        9        9           
Files Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <100.00%> (+3.80%) ⬆️
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 100.00% <ø> (ø)
Pages 98.89% <100.00%> (+<0.01%) ⬆️
Services 99.45% <ø> (ø)
Shared 99.80% <ø> (ø)
UI 99.06% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ebbfd96...edc7dd2. Read the comment docs.

@codecov-releaser
Copy link
Contributor

codecov-releaser commented Oct 21, 2024

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit Created Cloud Enterprise
9ec5ecc Mon, 21 Oct 2024 02:28:05 GMT Expired Expired
6afaaee Mon, 21 Oct 2024 23:39:22 GMT Expired Expired
edc7dd2 Tue, 22 Oct 2024 00:32:30 GMT Expired Expired
edc7dd2 Tue, 22 Oct 2024 00:37:30 GMT Cloud Enterprise

if (breadcrumbPaths.length <= 1) {
pathsToDisplay = breadcrumbPaths
} else {
pathsToDisplay = [breadcrumbPaths[0], { text: '...' }]
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we extend this to more than just one level? Something like 2 or 3 so it matches the depth you can travel while looking at the sunburst? I find it pretty difficult to get any context as to "where" i am in the file structure with just the current level.

Copy link
Contributor

Choose a reason for hiding this comment

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

Could also poke the design folks, and get their input on this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, I'll ping design. This is just a quick and dirty. Really we have too much information trying to be displayed in too little of space. I added some screenshots to the PR description to show what it's like. If it's any consolation, there's the hover tooltip on the sunburst - I can add one to the breadcrumbs as well perhaps.
If we want to do this for real a reusable truncated breadcrumbs component would be ideal imo

@codecov-staging
Copy link

codecov-staging bot commented Oct 21, 2024

Bundle Report

Changes will decrease total bundle size by 17 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-staging-system-esm 5.55MB 180 bytes (0.0%) ⬆️
gazebo-staging-system 5.5MB 197 bytes (-0.0%) ⬇️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: truncated sunburst font
3 participants