Skip to content

feat(explore): enable heat map tooltips on click #115413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nikkikapadia merged 4 commits into from
May 14, 2026
+6 −1
Merged

feat(explore): enable heat map tooltips on click #115413

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef88ded
feat(explore): enable heat map tooltips on click
nikkikapadia May 12, 2026
79a6555
Merge branch 'master' into nikki/feat/heat-map-click-tooltip
nikkikapadia May 13, 2026
99c0bda
Merge branch 'master' into nikki/feat/heat-map-click-tooltip
nikkikapadia May 14, 2026
c94781f
make a todo comment for myself
nikkikapadia May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion static/app/views/dashboards/widgets/heatMapWidget/heatMapWidgetVisualization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,16 @@ export function HeatMapWidgetVisualization(props: HeatMapWidgetVisualizationProp
<Flex direction="column" height="100%">
<BaseChart
autoHeightResize
// will be grouped by date as we only support time as the x-axis right now.
// TODO(nikki): eventually this will change later and we'll pass in what kind of x-axis we have
isGroupedByDate
showTimeInTooltip
tooltip={{
show: false,
show: true,
axisPointer: {
show: false,
},
triggerOn: 'click',
Comment on lines 68 to +73
Copy link
Copy Markdown
Contributor

@sentry sentry Bot May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Member Author

@nikkikapadia nikkikapadia May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya ya later problem

Comment on lines 68 to +73
Copy link
Copy Markdown
Contributor

@sentry sentry Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Member Author

@nikkikapadia nikkikapadia May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

doing this in a different pr

}}
series={series}
xAxis={{
Expand Down
Loading