Event Deltas: Always-on attribute distribution mode (no selection required)

[alex-fedotyev]

Summary

Show attribute value distribution charts in Event Deltas even without a heatmap selection, enabling users to understand data cardinality and drill down via filtering before engaging the comparison feature.

Problem

Currently, Event Deltas shows a placeholder "Please highlight an outlier range in the heatmap" until the user selects an area. This means users can't see attribute distributions or use filter/exclude actions without first making a selection — but they need to understand the data to know where to select.

Changes

Always-on distribution query

• DBDeltaChart accepts nullable xMin/xMax/yMin/yMax props. A hasSelection boolean determines the mode
• New allSpansData query (enabled when !hasSelection) fetches sampled spans without range filters
• When no selection: allSpansData used as "outlier" data, empty array as "inlier" — charts show single-bar distributions
• When selection exists: original outlier/inlier queries unchanged

Legend and visual modes

• Distribution mode (no selection): blue bars labeled "All spans", hint text "Select an area on the chart above to enable comparisons"
• Comparison mode (with selection): red/green bars labeled "Selection" / "Background"
• Legend shows colored boxes matching bar colors

Selection lifecycle

• DBSearchHeatmapChart always renders DBDeltaChart (no conditional placeholder)
• "Filter by Selection" button → applies filter, hides button, keeps selection visible with "✕" only
• "✕" button → clears selection, resets to distribution mode via onClearSelection
• clearSelectionAndRect() — clears React state AND uPlot visual selection rectangle
• Date range change → automatically clears any existing selection (via useEffect on primitive timestamp deps)
• After applying a filter from delta chart → also clears heatmap selection

Files

• packages/app/src/components/DBDeltaChart.tsx (hasSelection logic, allSpansData query, legend)
• packages/app/src/components/Search/DBSearchHeatmapChart.tsx (always-render, handleClearSelection, date range reset)
• packages/app/src/components/DBHeatmapChart.tsx (clearSelectionAndRect, hasFiltered state, selection buttons UX)

Dependencies

• Event Deltas: Chart UX polish and heatmap fixes #1823 (Chart UX polish) — builds on extracted PropertyComparisonChart and layout constants

Test plan

• Page loads → distribution charts appear immediately with blue "All spans" bars
• Legend shows "All spans (n=X sampled)" with hint text
• Select area on heatmap → charts switch to red/green comparison bars with "Selection" / "Background" legend
• Click "Filter by Selection" → filter applied, button hides, "✕" remains, selection rectangle stays
• Click "✕" → selection cleared, charts return to distribution mode
• Change date range → selection auto-clears
• Apply filter from delta chart click popover → selection also clears

Context

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