feat(explore): enable heat map tooltips on click#115413
Conversation
github-actions
Bot
added
the
Scope: Frontend
📊 Type Coverage Diff✅ No new type safety issues introduced. Coverage: 93.52% |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| tooltip={{ | ||
| show: false, | ||
| show: true, | ||
| axisPointer: { | ||
| show: false, | ||
| }, | ||
| triggerOn: 'click', |
There was a problem hiding this comment.
Bug: The heatmap tooltip formatter is not customized for 3D data, causing it to display the Y-axis label instead of the Z-axis count as the series value.
Severity: MEDIUM
Suggested Fix
Provide a custom formatter function in the tooltip configuration for the heatmap chart. This formatter should correctly access the Z-axis value from the 3D series data at index 2 (e.g., params.value[2]) to display the correct count in the tooltip.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location:
static/app/views/dashboards/widgets/heatMapWidget/heatMapWidgetVisualization.tsx#L68-L73
Potential issue: The `tooltip` configuration for the heatmap chart in
`heatMapWidgetVisualization.tsx` lacks a custom `formatter`. Consequently, the default
formatter from `tooltip.tsx` is used, which is designed for 2D data and extracts the
value from index 1 of the series data (`getSeriesValue(serie, 1)`). For heatmap series,
which are 3D (`[xAxis, yAxis, zAxis]`), index 1 holds the Y-axis bucket label (e.g.,
'p95'), while the actual count is at index 2. This results in the tooltip incorrectly
displaying the Y-axis label as the metric value, misleading users about the data.
Did we get this right? 👍 / 👎 to inform future reviews.
There was a problem hiding this comment.
ya ya later problem
| tooltip={{ | ||
| show: false, | ||
| show: true, | ||
| axisPointer: { | ||
| show: false, | ||
| }, | ||
| triggerOn: 'click', |
There was a problem hiding this comment.
Bug: The heatmap tooltip incorrectly displays a single timestamp instead of a time range because bucketSize is calculated as 0 due to the data structure.
Severity: LOW
Suggested Fix
Adjust the bucketSize calculation in BaseChart to handle heatmap data structures correctly. This could involve finding the first two data points with distinct x-axis values to compute the interval, rather than assuming the first two points in the series are sufficient.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location:
static/app/views/dashboards/widgets/heatMapWidget/heatMapWidgetVisualization.tsx#L68-L73
Potential issue: In `BaseChart`, the `bucketSize` for time-series charts is calculated
by subtracting the x-axis values of the first two data points. For heatmaps, the data is
structured such that multiple points share the same x-axis timestamp, leading to a
`bucketSize` of `0`. When this `bucketSize` is passed to the tooltip formatter, the
condition `!bucketSize` evaluates to true. This causes the tooltip to render a single,
uninformative timestamp instead of the correct time range for the data bucket, failing
to accurately represent the aggregated data in the heatmap.
There was a problem hiding this comment.
doing this in a different pr
| <BaseChart | ||
| autoHeightResize | ||
| // will be grouped by date as we only support time as the x-axis right now. | ||
| // this will change later and we'll pass in what kind of x-axis we have |
There was a problem hiding this comment.
Nit: leave a TODO w/ author name for the comments to follow this pattern
…s bucket (#115560) I've changed the tooltip for heat maps to use the y-axis time bucket and the z-axis value side by side. I've also gotten rid of the marker and series name on the tooltip because they're not needed for heat maps. Here's what it looks like: | Before (using y-axis value without units) | After (using y-axis bucket and z-axis value) | |--------|--------| | <img width="870" height="401" alt="image" src="https://github.com/user-attachments/assets/64606c37-7972-45f0-b2b1-55a00e66e434" /> | <img width="853" height="463" alt="image" src="https://github.com/user-attachments/assets/e5db0bdf-5cb7-426c-b97d-8503a007b8f4" /> | must be merged after #115413
2 participants
this just enables the tooltip on heat map charts and shows the tooltip on click instead of on hover. I have to make the formatter for the tooltip so it's showing the default for now. Here's a demo of it working:
Screen.Recording.2026-05-12.at.3.55.21.PM.mov