fix(profiles): Fix treemap and sunburst display issues #1203
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Update FRAME_COLOR constants with vibrant, high-contrast colors - Update CSS theme variables for frame colors - Add custom nanovis palette for Spotlight's dark theme - Add overlay to fix sunburst center showing bytes instead of samples - Fix tooltip to show sample counts properly
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![sentry[bot]](https://avatars.githubusercontent.com/u/1396951?s=60&v=4){kind=small}
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Outdated
Show resolved
Hide resolved
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
6804a76 to
dbe49fc
Compare
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
dbe49fc to
a29d5cb
Compare
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
a29d5cb to
ba414b6
Compare
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
ba414b6 to
a9f647d
Compare
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
a9f647d to
87a68ca
Compare
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
87a68ca to
779f122
Compare
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
BYK
changed the title
BYK
commented
Dec 12, 2025
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
8031eec to
8b895ea
Compare
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
8b895ea to
a12fbdf
Compare
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Outdated
Show resolved
Hide resolved
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
a12fbdf to
3a9b844
Compare
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
...es/spotlight/src/ui/telemetry/components/traces/TraceDetails/components/TraceProfileTree.tsx
Show resolved
Hide resolved
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
3a9b844 to
fe7f4c5
Compare
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
fe7f4c5 to
0663bd6
Compare
…ions The nanovis library calls resize() in its constructor before the element is appended to the DOM, resulting in 0 dimensions. Using ResizeObserver ensures we call resize() only after the container has been laid out with proper dimensions. This fixes the treemap being invisible on initial render.
BYK
force-pushed
the
byk/fix/profile-visualization
branch
from
0663bd6 to
153fb21
Compare
betegon
approved these changes
Dec 17, 2025
Member
betegon
left a comment
betegon
left a comment
There was a problem hiding this comment.
this looks good. i think we could benefit from moving some visualization code from TraceProfileTree.tsx if we add more visualization things, but we're good!
Comment on lines
+81
to
+88
| palette: { | ||
| text: "#e0e7ff", // primary-100 for better visibility | ||
| fg: "#fff", | ||
| bg: "#1e1b4b", // primary-950 | ||
| stroke: "#4338ca", // primary-700 | ||
| fallback: "#9ca3af", // Gray-400 fallback | ||
| hover: "#ffffff33", // Semi-transparent white for hover | ||
| shadow: "#00000066", // Semi-transparent black for shadows |
Member
There was a problem hiding this comment.
wonder if we should reuse these color fo other charts
BYK
pushed a commit
that referenced
this pull request
Dec 23, 2025
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @spotlightjs/[email protected] ### Minor Changes - Add support for continuous profiling (Profiling V2) ([#1202](#1202)) - Add self-documenting CLI commands with per-command help support ([#1206](#1206)) Each CLI command now provides its own metadata (short description, usage, detailed help, and examples). The main help output is generated dynamically from this metadata, and users can get detailed help for specific commands via `spotlight help <command>` or `spotlight <command> --help`. ### Patch Changes - Remove dead code ([#1214](#1214)) - Fix profile visualization issues in trace views: ([#1203](#1203)) - Update frame colors to use vibrant, high-contrast colors for better visibility - Add custom nanovis palette for Spotlight's dark theme - Fix sunburst center text showing bytes instead of sample counts - Fix treemap visibility with proper color contrast - added support for AI SDK v2 in AI Mode ([#1216](#1216)) - updated the empty pages of traces and envelopes ([#1213](#1213)) - open external links in default browser ([#1212](#1212)) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fix two issues with the Profiles tab under trace views:
Sunburst chart showing byte sizes (e.g., '42kb'): The nanovis library interprets the
sizefield as bytes. Added an overlay to cover the center text and display proper sample counts instead.Treemap and sunburst colors appearing white/invisible: rendering issue
Changes