fix(viewer): latency chart spilled off pane edge — legend over end-of-line labels#175
Merged
Conversation
… end-of-line labels (#161) The "Latency by percentile" pane (sre/observability dashboard) rendered its p50/p95/p99 lines and end-of-line text labels past the right edge of the pane at narrow widths. Root cause: the chart labelled each line's end with a `text` layer at the last data point and reserved room with `x.scale.domainMax`. Vega's `fit` autosize (injected for `width:"container"`) contains the axes + legend but NOT a text mark whose pixel width extends past the data domain, and `domainMax` reserves room proportional to the x-range — so at a narrow pane width the fixed-pixel labels still overflowed. Fix: drop the `text` layer entirely and restore the merged color+dash legend (remove `color.legend:null` + `strokeDash.legend:null` + `x.scale.domainMax`). The fit-autosize always reserves room for a legend at any pane width, so the chart now stays inside the pane from 480px to 1440px (verified: 0px overflow). Applied to both the demo seed (packages/viewer/src/demo/observability.json) and the recipe example (observability-dashboard.panes.json). Reconciled the SKILL.md charting note to prefer a legend and warn against end-of-line text labels (they spill on narrow panes).
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Problem
The Latency by percentile pane (
#sre/observabilitydashboard) renders its p50/p95/p99 lines + end-of-line text labels past the right edge of its pane at narrow widths.A prior fix (#174) added
x.scale.domainMaxto reserve room for the labels, but that reservation is proportional to the x-range, not a fixed pixel amount — so it still spilled at narrow pane widths.Root cause
The chart labelled each line's end with a
textlayer at the last data point. Vega'sfitautosize (which the viewer injects forwidth:"container") contains the axes + legend but not a text mark whose pixel width extends past the data domain. NodomainMaxvalue reserves enough room at every width.Fix
Drop the
textlayer entirely and restore the merged color + dash legend (removecolor.legend:null,strokeDash.legend:null, andx.scale.domainMax). The fit-autosize always reserves room for a legend at any pane width, so the chart stays inside the pane.Applied to both:
packages/viewer/src/demo/observability.json(demo seed)plugin/skills/diagram-recipes/examples/observability-dashboard.panes.json(recipe example)Reconciled the
SKILL.mdcharting guidance to prefer a legend and warn that end-of-line text labels spill on narrow panes.Verification
npx vitest run→ 424/424 pass.npm run build→ exit 0.