Event Deltas: Heatmap visualization overhaul - log scale, color refinement, legend

[alex-fedotyev]

Summary

The current heatmap in Event Deltas uses linear y-axis buckets and aggressive log-20 color mapping, which makes latency data hard to interpret. Most observability traffic has log-normal latency distributions — with linear buckets, the p50 cluster compresses into the bottom few pixels while the vast majority of the chart is empty space.

This is a well-known limitation in latency heatmaps. Industry best practices and user feedback consistently point to logarithmic y-axis scaling as the single most impactful improvement for this type of visualization.

Scope

Log-spaced y-axis buckets

• Replace widthBucket(val, min, max, 80) with log-spaced bucket boundaries: min * (max/min)^(i/80)
• Reveals multi-modal distributions, latency bands, and makes the tail visible
• Acts like a "fish-eye lens" — more resolution where most data lives (low latency), less in the sparse tail

Linear/log scale toggle

• Add a toggle near the heatmap to switch between linear and log bucket computation
• Default to log for duration/latency metrics, linear for count-based metrics
• Some metrics (error counts, custom expressions) are genuinely better on linear scale

Sqrt color mapping

• Replace log(count)/log(20) with sqrt(count)/sqrt(maxCount) (power ~0.5)
• Less aggressive compression than log-20, better visual separation between sparse and dense regions
• Standard approach for heatmap color scaling in observability tools

Color legend

• Small gradient bar with min/max count labels below or beside the heatmap
• Users currently see purple-to-yellow but can't interpret magnitude

Bucket range: quantile lower bound + actual max upper bound

• Lower bound: Use quantile(0.01)(val) for log scale / quantile(0.001)(val) for linear to avoid near-zero outliers stretching the bottom of the axis
• Upper bound: Use actual max(val) so that latency spikes (typically <1% of spans) remain visible — log scale already handles wide ranges naturally
• Note: An earlier iteration used quantile(0.99) for the upper bound, but this hid latency spikes above the 99th percentile. Since the whole point of a heatmap is to spot anomalies like timeouts and slow queries, capping at p99 defeated the purpose. See Event Deltas: Heatmap overflow bucket indicators for outlier detection #1914 for future smart overflow-bucket indicators.

Key files

• packages/app/src/components/DBHeatmapChart.tsx — rendering, color mapping, legend
• packages/app/src/components/Search/DBSearchHeatmapChart.tsx — toggle UI
• Min/max query in HeatmapContainer — bucket range + log spacing

Out of scope (see follow-up issues)

• Symlog scale for zero-inclusive metrics
• Adaptive bucket density
• Hover tooltip with percentile rank