Enable spike lines on scatter plot axes#267
Draft
Copilot wants to merge 20 commits into
Draft
Conversation
|
Co-authored-by: meganrm <5170636+meganrm@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Display x and y values on plot axes
Enable spike lines on scatter plot axes
Mar 9, 2026
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Enables Plotly spike lines on the scatter plot's main x/y axes and surfaces the hovered point's x and y values inside the existing PopoverCard, so users can read precise coordinates without relying on Plotly's unavailable axis spike labels (the app uses hovermode: "closest"). To make spike lines render correctly, plot_bgcolor is changed from transparent to solid black, and a palette is introduced for shared color constants.
Changes:
- Configure
showspikes/spike styling on main axes inMainPlotand set a solid darkplot_bgcolorvia a newspikeColorconstant. - Capture hovered
x/yon the point, plumb them throughSelectedPointData, add selectors (getXDisplayName,getYDisplayName,getFormattedHoveredX/YValue) with categorical-aware formatting, and render them inPopoverCard. - Add selector unit tests and design/plan docs.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/MainPlot/index.tsx | Adds spike line settings to the main axes. |
| src/constants/index.ts | Reorganizes palette and adds spikeColor; changes backgroundColor to opaque black. |
| src/state/selection/types.ts | Adds optional xValue/yValue to SelectedPointData. |
| src/containers/MainPlotContainer/index.tsx | Captures hovered x/y and passes formatted values + labels to PopoverCard. |
| src/containers/MainPlotContainer/selectors.ts | New display-name and formatted-hovered-value selectors. |
| src/containers/MainPlotContainer/test/selectors.test.ts | Tests for new selectors. |
| src/components/PopoverCard/index.tsx | Renders optional x/y rows in the popover. |
| src/components/PopoverCard/style.css | Styles for the new axis-value rows. |
| docs/superpowers/specs/2026-05-28-spike-lines-styling-design.md | New design doc. |
| docs/superpowers/plans/2026-05-28-spike-lines-styling.md | New implementation plan. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const getYDisplayName = createSelector( | ||
| [getPlotByOnY, getMeasuredFeaturesDefs], | ||
| (plotByOnY, featureDefs): string => { | ||
| const feature = find(featureDefs, { key: plotByOnY }); |
Comment on lines
+84
to
+86
| ### 3. Spike line color (already done) | ||
|
|
||
| `GENERAL_PLOT_SETTINGS.spikeColor` was updated to `"rgb(0, 0, 0)"` in Task 1. This remains correct. |
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.
Time to review: Medium
Problem
Closes #102
Solution
Changed the settings for the plot to include spike lines and the x and y values in the pop over card. Having the background of the plot set to transparent made the spike lines render white.
Question:
Should the spike lines go under the annotation popup?