hyperdx/.changeset/filter-actions.md at db7606bd9fa3501b8543e9f5b0f9d72e0861a363

mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00

feat: filter/exclude/copy actions on attribute values (#1850 )

## Summary
Closes #1829

Adds interactive filter/exclude/copy actions to the Event Deltas attribute comparison charts:

- **Click popover on chart bars**: Clicking a bar in any PropertyComparisonChart opens a popover with the attribute name, value, and Selection/Background percentages, plus action buttons.
- **Filter/Exclude buttons**: Use the existing search sidebar filter system (`setFilterValue`) to include or exclude an attribute value from results. After applying a filter, the heatmap selection is automatically cleared.
- **Copy button**: Copies the raw attribute value to the clipboard.
- **Key conversion utilities**: New `flattenedKeyToSqlExpression` and `flattenedKeyToFilterKey` functions convert dot-notation property keys (produced by `flattenData()`) into ClickHouse bracket notation for Map columns (e.g., `ResourceAttributes.service.name` -> `ResourceAttributes['service.name']`), enabling correct filter integration.

## Changes
- `deltaChartUtils.ts` -- Added `escapeRegExp`, `flattenedKeyToSqlExpression`, `flattenedKeyToFilterKey`, and `AddFilterFn` type
- `PropertyComparisonChart.tsx` -- Added click handler, popover with Filter/Exclude/Copy actions using `createPortal`
- `DBDeltaChart.tsx` -- Added `onAddFilter` prop, `handleAddFilter` callback wrapping key conversion, re-exported `AddFilterFn`
- `DBSearchHeatmapChart.tsx` -- Added `onAddFilter` prop, `handleAddFilterAndClearSelection` callback
- `DBSearchPage.tsx` -- Passed `searchFilters.setFilterValue` as `onAddFilter` to `DBSearchHeatmapChart`
- New test file `deltaChartFilterKeys.test.ts` with 16 tests for key conversion functions

## Test plan
- [x] 16 unit tests for `flattenedKeyToSqlExpression` and `flattenedKeyToFilterKey` (Map columns, Array(Map) columns, simple columns, LowCardinality wrappers, SQL injection escaping)
- [x] All 57 existing delta chart tests still pass
- [x] ESLint passes with no errors
- [x] Manual: click a bar in the delta chart -> popover appears with correct value and percentages
- [x] Manual: click Filter button -> sidebar filter is applied, heatmap selection clears
- [x] Manual: click Exclude button -> exclusion filter is applied
- [x] Manual: click Copy button -> value copied to clipboard, button shows checkmark

🤖 Generated with [Claude Code](https://claude.com/claude-code)

2026-03-10 17:25:06 +00:00

98 B

Raw Blame History

@hyperdx/app
patch

feat: filter/exclude/copy actions on Event Deltas attribute values

98 B Raw Blame History

98 B

Raw Blame History