Skip to content

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

Open
alex-fedotyev wants to merge 2 commits intoclaude/dashboard-timeline-tile-schemafrom
claude/dashboard-timeline-tile-renderer
Open

feat(app): Timeline tile renderer (PR B)#2192
alex-fedotyev wants to merge 2 commits intoclaude/dashboard-timeline-tile-schemafrom
claude/dashboard-timeline-tile-renderer

Conversation

@alex-fedotyev
Copy link
Copy Markdown
Contributor

@alex-fedotyev alex-fedotyev commented May 5, 2026

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

@alex-fedotyev @claude
feat(app): add Timeline tile renderer and dashboard wiring
441c151 
Implements the rendering layer for the Timeline display type
introduced in the schema PR.

New components:
- DashboardTimelineChart: recharts AreaChart with vertical marker
  glyphs, hover tooltip, drag-to-select time range, and brush-zoom
- DBTimelineChart: dashboard tile wrapper with collapsible events
  table, loading state, and error boundary
- Supporting modules: chartSpine, compileTimelineSeries,
  formatTimelineResponse, severityColors, useBrushZoom, types

Dashboard wiring:
- DBDashboardPage renders <DBTimelineChart> for DisplayType.Timeline,
  passing through onTimeRangeSelect and toolbar items
- tilePositioning: Timeline defaults to full-width, 6-row height
- ChartEditor: adds Timeline to SQL_PLACEHOLDERS and column
  description docs; wires timelineSeries through form state

Unit tests cover compileTimelineSeries (10 cases), formatTimelineResponse
(9 cases), and DBTimelineChart render contract.

Co-Authored-By: Claude Opus <model> <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 5, 2026 •
edited
Loading

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

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

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 5, 2026 •
edited
Loading

⚠️ 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

@alex-fedotyev alex-fedotyev mentioned this pull request May 5, 2026
Open
2 tasks
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 5, 2026 •
edited
Loading

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 @claude
fix(app): address review feedback on Timeline renderer
b52e687 
- Fix escapeString to escape backslashes before single quotes so a
  backslash in a series label doesn't corrupt the SQL string literal.
- Add test covering backslash+single-quote in label escaping.
- Add TODO comment on compileTimelineSeries noting it needs wiring into
  useQueriedChartConfig before builder-mode tiles generate SQL.
- Add TODO comment at DBDashboardPage call site noting buildEventSearchHref
  is not yet wired (requires a route mapping event ts+lane to a search URL).

Co-Authored-By: Claude Opus <noreply@anthropic.com>
@alex-fedotyev
Copy link
Copy Markdown
Contributor Author

alex-fedotyev commented May 5, 2026

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@alex-fedotyev