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

ref: Render only two levels of the sunburst #3783

Merged

Conversation

nicholas-codecov
Copy link
Contributor

@nicholas-codecov nicholas-codecov commented Feb 27, 2025

Description

The goal of this PR is to optimize the sunbursts performance overall and reduce the lagginess when viewing the coverage overview page. This was accomplished by changing the way that we render the sunburst. Previously we would render the entire tree structure of the repo, hiding elements that weren't currently visible. This lead to many performance issues as we were creating two elements per file in a repo. When users interacted with the sunburst, under the hood it was actually D3 updating the elements attributes overtime "animating" the transition.

With this refactor we have changed our rendering strategy, and how users interact with the sunburst:

Initial render:

  1. Process and set root node
  2. Set the root node as the selected node
  3. Run effect
    1. Call renderArcs
      1. Determine nodes to render
      2. Render two levels of arcs
      3. Set events for folders and files
      4. Format and append title
      5. Setup back circle and back text (i.e. ..)
      6. Setup click event handlers

On Click

  1. User clicks on a folder
    1. Update coordinates for selected node (i.e. directory)
    2. Set selected node to the clicked node with updated coordinates
  2. Re-run effect
    1. Call renderArcs

One regression of this change is the removal of the animation with the sunburst, as the change to the render process doesn't support this. We may explore some potential solutions for bringing this back down the road, however for the time being we will be leaving it as is.

Closes: codecov/engineering-team#3382

Notable Changes

  • Remove work that is not required for processing initial dataset
  • Move to storing selected node to React state
    • When user clicks on directory, set as selected node
  • Move D3 drawing into a render function

@codecov-staging
Copy link

codecov-staging bot commented Feb 27, 2025

Bundle Report

Changes will decrease total bundle size by 33.49kB (-0.27%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-staging-system 6.11MB -16.94kB (-0.28%) ⬇️
gazebo-staging-esm 6.19MB -16.55kB (-0.27%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: gazebo-staging-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/index.*.js -14.76kB 89.35kB -14.18%
assets/vendor_recharts.*.js -1.81kB 536.41kB -0.34%
assets/index.*.css 21 bytes 101.06kB 0.02%

Files in assets/index.*.js:

  • ./src/ui/SunburstChart/SunburstChart.jsx → Total Size: 7.9kB

  • ./src/pages/RepoPage/CoverageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx → Total Size: 1.7kB

view changes for bundle: gazebo-staging-system

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/index-legacy.*.js 21 bytes 717.01kB 0.0%
assets/index-legacy.*.js -14.52kB 84.1kB -14.72%
assets/vendor_recharts-legacy.*.js -1.74kB 521.8kB -0.33%
assets/polyfills-legacy.*.js -701 bytes 58.34kB -1.19%

Files in assets/index-legacy.*.js:

  • ./src/ui/SunburstChart/SunburstChart.jsx → Total Size: 7.9kB

  • ./src/pages/RepoPage/CoverageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx → Total Size: 1.7kB

Copy link

codecov bot commented Feb 27, 2025

Bundle Report

Changes will decrease total bundle size by 33.49kB (-0.27%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-production-system 6.11MB -16.94kB (-0.28%) ⬇️
gazebo-production-esm 6.19MB -16.55kB (-0.27%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: gazebo-production-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/index.*.js -14.76kB 89.35kB -14.18%
assets/vendor_recharts.*.js -1.81kB 536.41kB -0.34%
assets/index.*.css 21 bytes 101.06kB 0.02%

Files in assets/index.*.js:

  • ./src/pages/RepoPage/CoverageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx → Total Size: 1.7kB

  • ./src/ui/SunburstChart/SunburstChart.jsx → Total Size: 7.9kB

view changes for bundle: gazebo-production-system

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/index-legacy.*.js 21 bytes 717.01kB 0.0%
assets/index-legacy.*.js -14.52kB 84.1kB -14.72%
assets/vendor_recharts-legacy.*.js -1.74kB 521.8kB -0.33%
assets/polyfills-legacy.*.js -701 bytes 58.34kB -1.19%

Files in assets/index-legacy.*.js:

  • ./src/ui/SunburstChart/SunburstChart.jsx → Total Size: 7.9kB

  • ./src/pages/RepoPage/CoverageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx → Total Size: 1.7kB

Copy link

codecov bot commented Feb 27, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.74%. Comparing base (39c5c50) to head (74ccc0c).
Report is 5 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3783   +/-   ##
=======================================
  Coverage   98.74%   98.74%           
=======================================
  Files         826      826           
  Lines       14947    14947           
  Branches     4256     4264    +8     
=======================================
  Hits        14759    14759           
  Misses        181      181           
  Partials        7        7           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <ø> (ø)
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.69% <ø> (ø)
Pages 98.31% <ø> (ø)
Services 99.38% <ø> (ø)
Shared 99.12% <ø> (ø)
UI 99.07% <ø> (ø)

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 39c5c50...74ccc0c. Read the comment docs.

@codecov-releaser
Copy link
Contributor

codecov-releaser commented Feb 27, 2025

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit Created Cloud Enterprise
87a74dd Thu, 27 Feb 2025 17:08:36 GMT Expired Expired
80253a1 Thu, 27 Feb 2025 18:43:50 GMT Expired Expired
6fc34b6 Fri, 28 Feb 2025 12:42:41 GMT Expired Expired
a0b9798 Mon, 03 Mar 2025 17:41:31 GMT Expired Expired
b7c18de Mon, 03 Mar 2025 19:20:13 GMT Expired Expired
74ccc0c Mon, 03 Mar 2025 19:38:24 GMT Cloud Enterprise

@codecov-qa
Copy link

codecov-qa bot commented Feb 27, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.74%. Comparing base (39c5c50) to head (74ccc0c).
Report is 5 commits behind head on main.

✅ All tests successful. No failed tests found.

@@           Coverage Diff           @@
##             main    #3783   +/-   ##
=======================================
  Coverage   98.74%   98.74%           
=======================================
  Files         826      826           
  Lines       14947    14947           
  Branches     4256     4256           
=======================================
  Hits        14759    14759           
  Misses        181      181           
  Partials        7        7           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <ø> (ø)
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.69% <ø> (ø)
Pages 98.31% <ø> (ø)
Services 99.38% <ø> (ø)
Shared 99.12% <ø> (ø)
UI 99.07% <ø> (ø)

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 39c5c50...74ccc0c. Read the comment docs.

@codecov-notifications
Copy link

codecov-notifications bot commented Feb 27, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

@@           Coverage Diff           @@
##             main    #3783   +/-   ##
=======================================
  Coverage   98.74%   98.74%           
=======================================
  Files         826      826           
  Lines       14947    14947           
  Branches     4256     4256           
=======================================
  Hits        14759    14759           
  Misses        181      181           
  Partials        7        7           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <ø> (ø)
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.69% <ø> (ø)
Pages 98.31% <ø> (ø)
Services 99.38% <ø> (ø)
Shared 99.12% <ø> (ø)
UI 99.07% <ø> (ø)

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 39c5c50...74ccc0c. Read the comment docs.

@nicholas-codecov nicholas-codecov marked this pull request as ready for review February 28, 2025 12:38
Copy link

codecov-public-qa bot commented Feb 28, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.74%. Comparing base (39c5c50) to head (74ccc0c).
Report is 5 commits behind head on main.

✅ All tests successful. No failed tests found.

@@           Coverage Diff           @@
##             main    #3783   +/-   ##
=======================================
  Coverage   98.74%   98.74%           
=======================================
  Files         826      826           
  Lines       14947    14947           
  Branches     4264     4256    -8     
=======================================
  Hits        14759    14759           
  Misses        181      181           
  Partials        7        7           
Files with missing lines Coverage Δ
...rageTab/OverviewTab/subroute/Sunburst/Sunburst.jsx 90.47% <ø> (ø)
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.69% <ø> (ø)
Pages 98.31% <ø> (ø)
Services 99.38% <ø> (ø)
Shared 99.12% <ø> (ø)
UI 99.07% <ø> (ø)

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 39c5c50...74ccc0c. Read the comment docs.

@nicholas-codecov nicholas-codecov force-pushed the gh-eng-3382-render-only-three-levels-of-the-sunburst branch from 6fc34b6 to a0b9798 Compare March 3, 2025 17:36
.clamp(true)
})
function createColorFunction(parentSpan) {
return Sentry.startSpan({ name: 'SunburstChart.color', parentSpan }, () =>
Copy link
Contributor

Choose a reason for hiding this comment

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

do we use yaml set color indication range for this? seems like no

Copy link
Contributor Author

@nicholas-codecov nicholas-codecov Mar 4, 2025

Choose a reason for hiding this comment

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

We do not no, it would be really funky with the interpolation and how we handle it

Copy link
Contributor

Choose a reason for hiding this comment

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

Gotcha okay

@spalmurray-codecov
Copy link
Contributor

I feel like if I click on a leaf node, it should open the file. This is already a feature but I have to go click the link underneath the sunburst. Thoughts?

Other than that, I'm not qualified to scrutinize your d3 usage, but code looks good and seems to work as expected, so I'll approve.

@nicholas-codecov
Copy link
Contributor Author

nicholas-codecov commented Mar 4, 2025

I feel like if I click on a leaf node, it should open the file. This is already a feature but I have to go click the link underneath the sunburst. Thoughts?

Other than that, I'm not qualified to scrutinize your d3 usage, but code looks good and seems to work as expected, so I'll approve.

I like the idea, but it's a bit beyond the scope of this effort. Can you make up a ticket, and we can look at adding that in down the line?

The breadcrumb where you are clicking now, lives outside of the Sunburst chart, so would also require a tad of exploring to figure out what exactly to do.

@nicholas-codecov nicholas-codecov added this pull request to the merge queue Mar 4, 2025
Merged via the queue into main with commit 9b029c3 Mar 4, 2025
62 checks passed
@nicholas-codecov nicholas-codecov deleted the gh-eng-3382-render-only-three-levels-of-the-sunburst branch March 4, 2025 17:05
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.

[UI] Render only two levels of the sunburst
3 participants