feat(app): Timeline tile renderer (PR B)

[alex-fedotyev]

What

Adds the frontend renderer for the Timeline dashboard tile introduced in #2190 (schema PR). That PR must merge first; this one is stacked on top of it.

The renderer visualises point-in-time event markers and version-change transitions in a Recharts AreaChart with custom Customized overlays. Users can brush to zoom the time range, click a marker to open the search page, and expand an events table below the chart.

Files

New components

• DBTimelineChart — top-level tile component that fetches data, formats the response, and composes the chart with a collapsible events table. Wired into DBDashboardPage for the DisplayType.Timeline branch.
• DashboardTimelineChart/ — presentational chart package:
  • DashboardTimelineChart.tsx — Recharts wrapper with brush-zoom and marker click callbacks
  • TimelineMarkers.tsx — SVG overlay rendering colored diamonds per lane at correct x-positions
  • TimelineTooltip.tsx — custom tooltip showing lane, time, and optional severity/value
  • chartSpine.ts — builds a time-bucketed spine array so Recharts has a stable x-axis even with no events
  • compileTimelineSeries.ts — transforms raw SQL rows into TimelineLane[] for both events and value_change modes
  • formatTimelineResponse.ts — normalises the generic chart API response into typed rows
  • severityColors.ts — maps OTel severity strings to marker colors
  • useBrushZoom.ts — manages drag-select state and fires onTimeRangeSelect on mouse-up
  • types.ts — shared types (TimelineEvent, TimelineLane)

Wiring

• DBDashboardPage.tsx — renders <DBTimelineChart> when a tile's displayType is Timeline
• ChartEditor/constants.tsx, types.ts, utils.ts — register the Timeline display type in the editor
• tilePositioning.ts — default tile size: full width, 6 rows

Tests (345 lines, unit only)

• compileTimelineSeries.test.ts — events mode, value_change mode, groupExpression partitioning, severity coloring
• formatTimelineResponse.test.ts — null handling, multi-series, empty result
• DBTimelineChart.test.tsx — mount-without-throw and 0-event render

What's not in this PR

• E2E Playwright spec — tracked as a follow-up; visual correctness depends on a real browser and real ClickHouse data
• External API support for the timeline chart type — deferred to a follow-up against external-api/v2/
• Chart editor form (TimelineSeriesForm) — deferred; users can save a dashboard config via external API for now

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	May 5, 2026 11:37am

[changeset-bot]

⚠️ No Changeset found

Latest commit: b52e687

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

PR Review

• ⚠️ ChartTooltipItem value={0} in TimelineTooltip.tsx — ChartTooltipItem renders name: value and value={0} hardcodes a 0 after every event label in the tooltip (e.g. "deploy v1: 0"). Either use a different presentational component that doesn't require a numeric value, or build a custom tooltip row without ChartTooltipItem.

• ⚠️ window.location.href in handleMarkerClick (DBTimelineChart.tsx) — causes a full-page reload instead of a client-side navigation. Since buildEventSearchHref returns an internal /search?... URL, replace with useRouter().push(href) from next/navigation.

• ℹ️ Array index as React key in EventsTable and TimelineTooltip — both use key={i}. Use a stable composite key like ${event.ts}-${event.label}-${i} to avoid subtle reconciliation bugs when the events list changes order.

[alex-fedotyev]

Good catches. Fixed in b52e687:

• escapeString backslash: fixed to escape backslashes before single quotes; added a test for the combined case.
• compileTimelineSeries dead code: added a TODO comment explaining it needs wiring into useQueriedChartConfig before builder-mode tiles work; raw-SQL mode is fully functional.
• buildEventSearchHref not wired: added a TODO comment at the call site in DBDashboardPage.tsx noting it requires a route that maps event ts+lane to a search URL.
• key={i} on table rows: confirmed intentional, no change.