feat: SW-2099 Reference-line / annotation layer — thresholds & bands for charts#166
Open
owilliams-tetrascience wants to merge 6 commits into
Open
feat: SW-2099 Reference-line / annotation layer — thresholds & bands for charts#166owilliams-tetrascience wants to merge 6 commits into
owilliams-tetrascience wants to merge 6 commits into
Conversation
Adds a shared, opt-in annotation layer for charts: threshold/reference lines and shaded from-to bands, rendered as themed Plotly shapes and labeled annotations. Wired as additive `referenceLines` / `bands` props on Histogram and InteractiveScatter (no breaking changes). Labels use a theme-aware opaque backing so they stay legible in light and dark mode. Includes Storybook stories with play tests (light + dark) on both charts, a unit test for the pure builder, and exports the types from src/index.ts. SW-2099 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 8, 2026 01:46 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
owilliams-tetrascience
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a reusable, opt-in Plotly annotation layer to the UI kit’s chart components, enabling threshold/reference lines and shaded bands with theme-aware labeling for light/dark mode.
Changes:
- Introduces
buildChartAnnotations()plus public types (ReferenceLine,Band) to generate Plotlyshapes+annotations. - Adds
referenceLines/bandsprops toHistogramandInteractiveScatterand wires the generated shapes into their Plotly layouts. - Adds unit tests for the builder and new Storybook stories + play assertions for both charts (including dark-mode variants).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/chart-annotations.ts | New shared builder/types for Plotly shapes + annotations for reference lines and bands. |
| src/utils/chart-annotations.test.ts | Unit tests covering shape/annotation output, ordering, and theme-backed label styling. |
| src/index.ts | Re-exports the new chart annotation utilities from the package entrypoint. |
| src/components/charts/InteractiveScatter/types.ts | Adds opt-in referenceLines / bands props to the public props interface. |
| src/components/charts/InteractiveScatter/InteractiveScatter.tsx | Builds annotation layer via buildChartAnnotations() and applies it to the Plotly layout. |
| src/components/charts/InteractiveScatter/InteractiveScatter.stories.tsx | Adds “reference lines + bands” stories with play assertions (light + dark). |
| src/components/charts/Histogram/Histogram.tsx | Adds opt-in props and merges annotation layer into the Plotly layout. |
| src/components/charts/Histogram/Histogram.stories.tsx | Adds “reference line + band” stories with play assertions (light + dark). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add "longdashdot" to ReferenceLineDash so the full set of Plotly dash styles is accepted. - Re-export usePlotlyTheme / PlotlyThemeColors from the package entrypoint so buildChartAnnotations' signature is nameable without a deep import. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 8, 2026 01:52 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
The `globals.theme` toggle sets `.dark` in the Storybook UI, but the @storybook/addon-vitest runner doesn't propagate it to documentElement, so `useIsDark` never saw it and the "dark mode is active" assertion failed in CI. Drive the class from the play function (with cleanup) so the component genuinely renders dark during the test, and drop the brittle infrastructure assertion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 8, 2026 02:02 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Dark mode is viewable on any story via the Storybook theme toggle, so separate dark-mode stories are redundant. Keep the light reference-line + band stories for both charts. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 8, 2026 13:57 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Labeled reference lines and bands now surface in each chart's legend instead of as on-plot text tags. The shared builder returns chart- agnostic legendItems; InteractiveScatter renders them via Plotly's legend (annotationLegendTraces), and Histogram folds them into its custom HTML legend (line swatch for lines, filled box for bands). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 8, 2026 14:17 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 16, 2026 13:30 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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
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
Implements SW-2099 (VIZ-2) — a shared, opt-in annotation layer for
ts-lib-ui-kitcharts: threshold/reference lines and shaded bands, rendered as themed Plotly shapes and labeled annotations.Net-new enabler (VIZ-4, VIZ-8, VIZ-9, VIZ-10, VIZ-12 build on it). Use-case source: HTS Hit Finder — Global Filtering page.
What's included
src/utils/chart-annotations.ts— shared builder + public typesReferenceLine({ axis, value, label?, color?, width?, dash? }) — vertical (axis:'x') or horizontal (axis:'y') threshold line spanning the full plotBand({ axis, from, to, label?, color?, opacity? }) — shaded from–to region (pass/fail, ±σ)buildChartAnnotations(theme, config)→{ shapes, annotations }to spread into a Plotly layoutHistogramandInteractiveScatter—referenceLines/bands. Additive, no breaking changes.layer:"above"(visible over bars/points); bands drawlayer:"below"(data stays readable). Label tags get a theme-aware opaque backing + colored border so they're legible in light and dark mode.src/index.ts.API (matches the ticket)
Screenshots
Rendered from the new Storybook stories (light + dark).
Histogram —
cutoffreference line +passbandInteractiveScatter —
hit line/midpointreference lines +focusbandAcceptance criteria
src/index.tsTesting
yarn typecheck✓ ·yarn lint(zero warnings) ✓ ·yarn test✓ (763 tests, incl. 10 new for the pure builder)🤖 Generated with Claude Code