Improve Traces -> Event Deltas by introducing filtering actions for continuous drill down

[alex-fedotyev]

Currently Traces -> Event Deltas offers analysis of the attributes/values, which are not actionable.

Mouse over only shows the values and nothing else.
We should consider improving actionability by offering similar experience as in the results table or in the trace drilldown flyout, where actions are offered to filter, exclude of copy the value to help users drill down into the subset of spans defined by the value.

Example of actions on the results grid:

Example of actions on the flyout:

[alex-fedotyev]

@claude - are you able to implement this improvement, make ti consistent with other filtering actions like in the results table and reuse code and UI pattern how filters are applied in the traces and logs search?

[claude]

Claude finished @alex-fedotyev's task in 10m 4s —— View job • claude/issue-1796-20260225-0116 • Create PR ➔

---

Implementation Complete

• Analyze the request
• Explore Event Deltas component (DBDeltaChart.tsx)
• Explore filtering actions in results table (DBRowTableFieldWithPopover.tsx)
• Understand how filters are applied (searchFilters.tsx → setFilterValue)
• Implement interactive tooltip with filter actions in DBDeltaChart.tsx
• Add onAddFilter prop to DBSearchHeatmapChart.tsx
• Wire up searchFilters.setFilterValue in DBSearchPage.tsx
• Commit and push changes

What was implemented

Files changed:

• packages/app/src/components/DBDeltaChart.tsx — Core changes: interactive tooltip with action buttons
• packages/app/src/components/Search/DBSearchHeatmapChart.tsx — Thread onAddFilter prop through
• packages/app/src/DBSearchPage.tsx — Pass searchFilters.setFilterValue to the heatmap chart

How it works:

When hovering over a bar in the Event Deltas charts, the tooltip now shows Copy, Filter, and Exclude action buttons:

• Copy (📋) — Copies the bar's value to clipboard, shows a checkmark confirmation
• Filter (🔽) — Adds an include filter for attribute = value to the search query
• Exclude (⊘) — Adds an exclude filter for attribute != value to the search query

The filter actions call the same searchFilters.setFilterValue used by the results table, ensuring consistent filtering behavior across the search page.

Technical approach:

• Used controlled tooltip state (active/payload/label) to keep the tooltip visible while hovering over action buttons (with a 150ms close delay)
• Used wrapperStyle={{ pointerEvents: 'auto' }} on the Recharts Tooltip to enable mouse interaction
• Reused Mantine ActionIcon + Tooltip components consistent with the rest of the UI
• Exported AddFilterFn type from DBDeltaChart.tsx for reuse