Event Deltas: Chart UX polish and heatmap fixes

[alex-fedotyev]

Summary

Improve the Event Deltas chart rendering quality, fix heatmap tooltip issues, and add accessibility features. These are independent UX improvements that can land first as a clean foundation.

Changes

Chart rendering improvements

• Extract PropertyComparisonChart into its own file with TruncatedTick (custom XAxis tick truncating to 12 chars with SVG tooltip), HDXBarChartTooltip (hover tooltip with error boundary), and layout constants (CHART_WIDTH, CHART_HEIGHT, CHART_GAP, PAGINATION_HEIGHT)
• applyTopNAggregation with adaptive MAX_CHART_VALUES_UPPER (8) — shows all values when ≤ 8 unique, aggregates into "Other (N)" beyond that. Avoids awkward "Other (1)" cases
• Per-bar coloring using Recharts Cell components — different colors for "Other" bucket, selection/background/all-spans modes
• CSS text-overflow: ellipsis for chart titles instead of fixed 32-char JS truncation — adapts to container width

Heatmap fixes

• Tooltip not showing on page load — uPlot fires setCursor during init, which triggered the tooltip before user hovered. Fixed with mouseInsideRef gate
• Tooltip overflow near right edge — flip threshold changed from 2/3 width to 1/2 width, added maxWidth: 50% and whiteSpace: nowrap
• Selection color alignment — heatmap selection rectangle now uses --color-chart-error (red) via scoped .heatmap-selection-container .u-select CSS override, matching the "Selection" legend and bar color in comparison charts
• Keyboard accessibility — tabIndex={0} and onKeyDown (Enter/Space) added to "Filter by Selection" and "✕" heatmap toolbar buttons
• Invalid CSS fix — rgba(#1A1D23 0.75) corrected to rgba(26, 29, 35, 0.75) in two heatmap tooltip backgrounds

Files

• packages/app/src/components/PropertyComparisonChart.tsx (NEW — extracted)
• packages/app/src/components/DBHeatmapChart.tsx
• packages/app/src/components/deltaChartUtils.ts (applyTopNAggregation, MAX_CHART_VALUES constants)
• packages/app/src/components/__tests__/DBDeltaChart.test.ts (applyTopNAggregation tests)
• packages/app/styles/app.scss (selection color override)

Dependencies

None — this is a foundational PR that other improvements build on.

Test plan

• Verify chart titles adapt to container width (wider = more text visible)
• Verify tooltip doesn't appear on page load before hovering
• Verify tooltip stays within chart bounds when hovering near right edge
• Verify heatmap selection rectangle matches red "Selection" color in comparison legend
• Verify "Filter by Selection" and "✕" buttons are keyboard-accessible (Tab → Enter)
• Verify "Other (N)" bucket appears only when > 8 unique values; 7-8 values show in full

Context

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

[alex-fedotyev]

Dependency update: This issue now depends on #1830 (extract refactor) which establishes the file structure (deltaChartUtils.ts, PropertyComparisonChart.tsx) that this PR adds features to.