Skip to content

feat: add gradient labels and line labels to GPU comparison charts#137

Open
functionstackx wants to merge 1 commit intomasterfrom
feat/gpu-graph-gradient-labels
Open

feat: add gradient labels and line labels to GPU comparison charts#137
functionstackx wants to merge 1 commit intomasterfrom
feat/gpu-graph-gradient-labels

Conversation

@functionstackx
Copy link
Copy Markdown
Contributor

Summary

  • Extends gradient labels (parallelism strategy coloring on roofline paths) and line labels (hardware name pills) from ScatterGraph to GPUGraph, so date-range comparison charts get the same visualization tools
  • Converts GPUGraph's roofline layer from declarative { type: 'roofline' } to a custom D3 layer with gradient SVG defs, parallelism pill labels, and line labels with greedy collision avoidance
  • Adds "Gradient Labels" and "Line Labels" toggle switches to the comparison chart legend sidebar, including the gradient nudge toast integration

Test plan

  • Select GPUs + date range to enter comparison mode, toggle "Gradient Labels" — roofline paths should show multi-color gradients by parallelism strategy
  • Verify parallelism pill labels (e.g. "TP8", "DEP8") appear above roofline segments when gradient labels are on
  • Toggle "Line Labels" — GPU+date name pills should appear along each roofline with collision avoidance
  • Zoom in/out — gradients, pill labels, and line labels should track correctly
  • Hover legend items — parallelism and line labels should fade with non-hovered series
  • Toggle "Parallelism Labels" when gradient labels are off — gradient nudge toast should appear
  • Verify scatter points color by parallelism strategy (not GPU+date) when gradient labels are on
  • Verify no regressions in default ScatterGraph gradient/line label behavior

🤖 Generated with Claude Code

Extends the gradient label feature (parallelism strategy coloring on
roofline paths) and line labels (hardware name pills) from ScatterGraph
to GPUGraph, so date-range comparison charts get the same visual tools.

Key changes:
- Convert GPUGraph roofline layer from declarative to custom D3 rendering
- Add gradient stops, parallelism pill labels, and line labels with
  collision avoidance
- Add Gradient Labels, Line Labels toggle switches to the legend sidebar
- Wire up gradient nudge toast for the comparison chart
- Color scatter points by parallelism strategy when gradient labels are on
- Handle zoom updates for all label types
@functionstackx functionstackx force-pushed the feat/gpu-graph-gradient-labels branch from 09da1b4 to 5802015 Compare March 31, 2026 21:11
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
inferencemax-app Ready Ready Preview, Comment Mar 31, 2026 9:11pm

Request Review

@functionstackx
Copy link
Copy Markdown
Contributor Author

@adibarra can u read the code & can i get an rfr for this

@adibarra
Copy link
Copy Markdown
Contributor

adibarra commented Apr 1, 2026

The gradient line colors seem to be overwritten by the colors for the series that are being rendered when they are on in gpu comparison mode.
image

Interestingly it seems to not happen for every combination however
image

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.

2 participants