Event Deltas: Filter/Exclude/Copy actions on attribute values

[alex-fedotyev]

Summary

Add interactive filter actions to Event Deltas chart values, enabling users to click an attribute bar and Filter (include), Exclude, or Copy the value — consistent with the filtering UX in the results table and trace drilldown flyout.

Implements #1796.

Problem

Users can see attribute value distributions in the Event Deltas charts but have no way to act on them. To filter by a specific value, they must manually type a SQL expression in the search bar. The results table and trace flyout already support click-to-filter — Event Deltas should be consistent.

Changes

Click popover (PropertyComparisonChart)

• Clicking a bar opens a portal-rendered popover at click position showing:
  • Property name (truncated to 40 chars)
  • Value text (with word-break for long values)
  • In selection mode: "Selection: X%" and "Background: X%" in respective colors
  • In distribution mode: "Distribution: X%"
  • Action buttons: Filter (include), Exclude, Copy value — using DBRowTableIconButton variant="copy" matching existing HyperDX patterns
• Dismiss: click outside (mousedown), scroll (capture phase), Escape key, or action button click
• "Other" bucket: click handler no-ops on isOther entries (can't filter by aggregate)
• Copy feedback: "Copied!" checkmark via isActive prop, resets on new bar click

Filter key conversion

• flattenedKeyToSqlExpression(key, columnMeta) — converts flattened dot-notation to valid ClickHouse SQL bracket notation. Handles Map columns (ResourceAttributes['service.name']), Array(Map) with 0→1 index conversion (Events.Attributes[1]['key']), SQL injection prevention (single-quote escaping)
• flattenedKeyToFilterKey(key, columnMeta) — produces bracket notation for filter keys, matching the search bar's WHERE clause format

Wiring

• DBSearchPage.tsx: passes searchFilters.setFilterValue as onAddFilter to DBSearchHeatmapChart
• DBSearchHeatmapChart: wraps with handleAddFilterAndClearSelection (applies filter + clears heatmap selection)
• DBDeltaChart: handleAddFilter converts flattened keys via flattenedKeyToFilterKey before calling onAddFilter

Known limitation

Filter keys use bracket notation (ResourceAttributes['service.name']) which is valid ClickHouse SQL but doesn't match the sidebar's facet key format (toString(ResourceAttributes.\service`.`name`)`). Filters work at the SQL level but appear as separate entries in the sidebar rather than matching existing checkboxes. Improving sidebar key compatibility is tracked separately.

Files

• packages/app/src/components/PropertyComparisonChart.tsx (click popover, action buttons, dismiss handlers)
• packages/app/src/components/deltaChartUtils.ts (flattenedKeyToSqlExpression, flattenedKeyToFilterKey, AddFilterFn type)
• packages/app/src/components/DBDeltaChart.tsx (handleAddFilter callback)
• packages/app/src/components/Search/DBSearchHeatmapChart.tsx (onAddFilter prop, handleAddFilterAndClearSelection)
• packages/app/src/DBSearchPage.tsx (1 line: passes searchFilters.setFilterValue)
• packages/app/src/components/__tests__/DBDeltaChart.test.ts (flattenedKeyToSqlExpression tests, flattenedKeyToFilterKey tests)

Dependencies

• Event Deltas: Chart UX polish and heatmap fixes #1823 (Chart UX polish) — builds on extracted PropertyComparisonChart
• Event Deltas: Always-on attribute distribution mode (no selection required) #1824 (Always-on distribution) — filter action clears selection and resets to distribution mode

Test plan

• Click a bar → popover appears with property name, value, percentages, and action buttons
• Click "Filter" → filter applied, data changes, heatmap selection clears
• Click "Exclude" → filter applied with exclusion
• Click "Copy" → value copied to clipboard, checkmark appears
• Click outside / Escape / scroll → popover dismisses
• "Other" bucket → click is ignored (no popover)
• Map column keys produce valid ClickHouse SQL: ResourceAttributes['service.name'] IN ('value')
• Single quotes in values are properly escaped

Context

Part of the Event Deltas improvement series. Reference implementation in PR #1797.