[FEATURE] Add metadata dialog for Exemplars - #278
Conversation
2230167 to
025919e
Compare
Tooltip showing a single exemplar's metadata (series labels, exemplar labels, value and timestamp) that follows the mouse while an exemplar marker is hovered and can be pinned in place when the marker is clicked, built on the shared tooltip helpers (assembleTransform, getTooltipStyles, useMousePosition) — same interaction as the annotation tooltip — so panels can render it next to the chart, HeatMapChart included later. Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
025919e to
273ac03
Compare
|
Can you please provide a screenshot of a sample metadata dialog in the Screenshots section of the PR desc? thank you in advance 🙏 |
|
@julianocosta89 I have updated the spec dependency. If you rebase your PR hopefully the CI should pass now. |
|
@AntoineThebaud I added screenshots now. In order to actually see the exemplars, we need to enable it. |
|
@Nexucis would you be able to approve the run? |
AntoineThebaud
changed the title
AntoineThebaud
left a comment
AntoineThebaud
left a comment
There was a problem hiding this comment.
Thanks for your work! Just asking some small visual adjustments for the dialog, we'd like something like this:
So basically:
- timestamp at the top to align on the TimeSeriesTooltip:
- same vertical spacing between sections
- horizontal align for series labels values.
|
Addressed @AntoineThebaud ✅ 
|
Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
bd0826d to
36dc67e
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Initial pinned positioning is incorrect, and the interactive unpin control is inaccessible to keyboard users.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds a reusable exemplar metadata tooltip to the components package.
Changes:
- Displays exemplar labels, series labels, formatted value, and timestamp.
- Supports mouse-following and pinned positioning.
- Adds public exports and focused component tests.
File summaries
| File | Description |
|---|---|
components/src/index.ts |
Exports exemplar metadata APIs. |
components/src/ExemplarMetadata/index.ts |
Defines the feature barrel export. |
components/src/ExemplarMetadata/ExemplarMetadataTooltip.tsx |
Implements the tooltip UI and positioning. |
components/src/ExemplarMetadata/ExemplarMetadataTooltip.test.tsx |
Tests rendering, following, and unpinning behavior. |
Review details
Suppressed comments (1)
components/src/ExemplarMetadata/ExemplarMetadataTooltip.tsx:138
Exemplar.labelsmay be empty; in that caseLabelGridreturns null while this divider still renders immediately above Value. Render the grid and divider together only when labels contain entries.
<LabelGrid title="Exemplar labels" labels={labels} />
<Divider />
- Files reviewed: 4/4 changed files
- Comments generated: 4
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
- Fall back to pinnedPos when no mousemove has happened yet, so a pinned tooltip renders at its saved position instead of (0, 0) - Wrap the unpin Pin icon in an IconButton with an aria-label so keyboard and screen-reader users can invoke it - Document containerId as a CSS selector, matching document.querySelector - Build the body from non-empty sections so no divider is left dangling when series or exemplar labels are empty, plus a test for that case Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
|
@Nexucis copilot comments addressed ✅ |
|
So cool, thank you @julianocosta89 ! @Gladorme can you check for the final review before moving forward please ? |
|
Looking at your latest screenshot it's still missing these 2 suggested changes:
Btw I just realized now that when light theme is on, the color of the separator between section is not right (it becomes dark gray, so barely visible that I didn't even notice the separators the first time). |
…nd divider color - Even vertical spacing between sections: sections are now laid out in a Stack with spacing, so the gap around every separator is identical - Horizontally align series/exemplar label values: label rows now use a CSS grid whose first column is sized by the longest label name, so all values start at the same x position - Fix separators being barely visible in light theme: section dividers were using the default theme divider color, which becomes a dark overlay on the always-dark tooltip background. Pin them to grey['500'] like the header divider Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
07d6e0f to
503d783
Compare
|
Thanks for the feedback @AntoineThebaud, I indeed missed the 2 suggestions that were at the bottom. Light mode: Dark mode: |
AntoineThebaud
left a comment
AntoineThebaud
left a comment
There was a problem hiding this comment.
Great! Thank you for this contribution 🙏
Part of #3445 (perses/perses#3445).
Adds an
ExemplarMetadataTooltipto@perses-dev/componentsthat shows the metadata of a single exemplar: the labels of its series, the exemplar's own labels (e.g. trace ID), its value and its timestamp. It follows the same pattern as the existing chart tooltips (TimeChartTooltip/ annotation tooltip): it renders in a portal next to the chart, follows the mouse while an exemplar marker is hovered, and can be pinned in place when the marker is clicked — no modal dialog, the chart stays interactive.Lives in shared from the start — as suggested in the issue — so HeatMapChart can reuse it later. It's a self-contained presentational component (props: exemplar, optional seriesLabels, optional
FormatOptionsfor the value,pinnedPos,enablePinning,onUnpinClick), built on the shared tooltip positioning helpers (assembleTransform,getTooltipStyles,useMousePosition).Note: this builds on the exemplars contract in
@perses-dev/spec(merged as perses/spec#97,TimeSeriesData.exemplars); the exemplar types it imports land in the next spec release.Testing
components/src/ExemplarMetadata/ExemplarMetadataTooltip.test.tsx(renders labels/value when pinned, renders while following the mouse, unpin affordance +onUnpinClick, hides the series-labels section when undefined)type-check,oxlint,oxfmtcleanScreenshots
Dark mode:
Mouse hover opens the dialog and if we click on it, it pins the dialog.
Light mode: