feat: Show connect by feature value in tooltip - #301
Conversation
|
| export interface PlotlyCustomData { | ||
| thumbnailPath: string; | ||
| index: number; | ||
| srcPath?: string; |
There was a problem hiding this comment.
Added srcPath, since it was being defined in getPlotlyCustomData() in MainPlotContainers/selectors.ts.
| const getFeatureTickConversion = ( | ||
| featureKey: string, | ||
| featureDefs: MeasuredFeatureDef[] | ||
| ): TickConversion => { | ||
| const feature = find(featureDefs, { key: featureKey }); | ||
| if (feature && feature.discrete) { | ||
| return makeNumberToTextConversion(feature.options); | ||
| } | ||
| return makeNumberAxis(); | ||
| }; |
There was a problem hiding this comment.
Moved repeated logic out of getXTickConversion and getYTickConversion.
There was a problem hiding this comment.
Pull request overview
Adds support for showing the “connect-by” feature value in the main plot hover tooltip (line tooltip), wiring the value through Plotly customdata, selection hover state, formatting selectors, and the PopoverCard UI.
Changes:
- Extend hover/customdata types to carry
srcPathand a connect-by feature value. - Add selectors to format/display the connect-by feature name/value (including tick conversion).
- Render connect-by label/value in
PopoverCardwhen available.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/state/types.ts | Extends PlotlyCustomData to include srcPath and connect-by value. |
| src/state/selection/types.ts | Extends hovered point payload type to include connect-by value. |
| src/containers/MainPlotContainer/selectors.ts | Populates Plotly customdata with connect-by values; adds formatting/display selectors for connect-by. |
| src/containers/MainPlotContainer/index.tsx | Passes connect-by hover value into state and down to the tooltip UI. |
| src/components/PopoverCard/index.tsx | Adds optional line label/value rows to the tooltip card. |
Suppressed comments (1)
src/containers/MainPlotContainer/index.tsx:284
lineValueis always passed as a string, soPopoverCardwill render the line row even when the formatted value is empty (e.g., when connect-by lines are disabled and the value is missing). Passundefinedwhen there is no value to display so the row is suppressed.
lineLabel={connectByFeatureDisplayName}
lineValue={hoveredConnectByFeatureValue}
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
ShrimpCryptid
changed the title
There was a problem hiding this comment.
Updated rendering for the feature values at the bottom of this popover
| changeHoveredPoint({ | ||
| [CELL_ID_KEY]: point.id, | ||
| index: point.customdata.index, | ||
| thumbnailPath: point.customdata.thumbnailPath, | ||
| srcPath: point.customdata.srcPath, | ||
| xValue: point.x, | ||
| yValue: point.y, | ||
| }); | ||
| connectByFeatureValue: point.customdata.connectByFeature, | ||
| } satisfies SelectedPointData); |
There was a problem hiding this comment.
The type of SelectedPointData was updated to include the new field. I added in the satisfies syntax because changeHoveredPoint seems to take any by default.
b67aa5f to
0be64eb
Compare
| ( | ||
| filteredCellData: DataForPlot, | ||
| showConnectByLines: boolean, | ||
| connectByFeature: string |
There was a problem hiding this comment.
What are the potential values of connectByFeature? It's not immediately obvious to me. Is it an enum in practice or something else?
There was a problem hiding this comment.
It's the string key of any feature in the currently-loaded dataset!
0be64eb to
f631c74
Compare
f631c74 to
189ad3a
Compare
189ad3a to
57fcb29
Compare
57fcb29 to
01413a9
Compare
Problem
This change adds an additional line of text to the tooltip, that appears when connecting points by a feature value. This shows the feature name and value for the hovered point.
Estimated review size: small, 10 minutes
Solution
MainPlotContainer/selectors.tsto write the connect by feature's values to the Plotly customdata.Type of change
Steps to Verify:
Screenshots (optional):
Video talk-through (🔊):
2026-08-12.14-45-48.mp4