feat(webapp): improve task and dashboard activity charts#4064
Merged
Conversation
Improve the activity charts on the agent, standard, and scheduled task landing pages: - Bucket density adapts to the selected range so short ranges render many fine-grained bars instead of collapsing to a single 1h bar. - X-axis labels are chosen from the available width: evenly spaced across the plot, first + last always shown, kept horizontal, deduped, and they reflow on resize. - Synced vertical hover indicator across the agent page's charts via a reusable ChartSyncProvider. - 'Maximize' button + fullscreen dialog on each chart card (shared ChartCard), matching the dashboard widgets. - Abbreviated y-axis values (8000 -> 8K) by default on the compound charts. Also de-duplicates the previously copy-pasted status colors, time-axis formatters, and bucket/zero-fill logic into shared helpers.
Click-drag across an activity chart to zoom into that time range: - The drag selection mirrors across every chart in the same ChartSyncProvider group, and on release sets the Time/Date filter (from/to) to the dragged window, matching how the TimeFilter applies a custom range. - While dragging, a From/To range tooltip replaces the hovered-value tooltip and updates live. Built on the existing ChartSyncProvider (shared selection state) plus a small useZoomToTimeFilter hook; the per-chart enableZoom path is untouched.
Date-based line charts (Run metrics, AI metrics, custom dashboards, Models pages — everything rendered by QueryResultsChart) capped the x-axis at a fixed ~8 time labels regardless of chart width, so labels were too sparse on wide charts. Derive the tick count from the measured chart width (one label per TIME_AXIS_LABEL_SPACING_PX), feeding it into the existing nice-interval generateTimeTicks. Wide charts now show more clean-interval labels, narrow widgets fewer. The continuous time scale is kept, so data gaps still render.
Non-date x-axes on custom (Query mode) and dashboard charts — run IDs, task names, arbitrary strings — were rendered horizontally with every label shown, so long values overlapped into an unreadable smear. Now, with no configuration: - Labels are thinned to as many as fit the measured width (evenly spaced); all data still renders and the full value shows on hover. - Long values are middle-truncated (run_abc…f9c2) so ids sharing a prefix stay distinguishable. - The axis auto-rotates to -45° only when labels are long; short labels stay horizontal. Also share one CHART_MARGIN between ChartBar and ChartLine so the two stay aligned when toggling chart type and angled labels aren't clipped on line charts.
Refine the cross-chart hover indicator on the task landing pages: brighter (charcoal-500), dashed, and shown only on the charts you're not hovering — the hovered chart already has its own tooltip cursor.
The useMeasure ref was attached only to the line/area return path, so bar charts measured a width of 0 and never produced evenly-spaced x-axis ticks (and, because the categorical axis sets an angle, Chart.Bar's own useXAxisTicks was disabled too) — falling back to Recharts' default label spacing. Wrap the bar return in the same measuring div so categorical bar charts get the intended even-spaced label thinning.
…vements # Conflicts: # apps/webapp/app/presenters/v3/AgentDetailPresenter.server.ts # apps/webapp/app/presenters/v3/TaskDetailPresenter.server.ts
Trim the comments added in the chart work down to the load-bearing "why", drop redundant what-narration, and run the formatter over the changed files.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (3)
📜 Recent review details⏰ Context from checks skipped due to timeout. (16)
WalkthroughThis PR centralizes activity-series bucketing and zero-fill logic in 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
samejr
changed the title
…t x-axis tick) Give the chart maximize button an aria-label and reveal it on focus as well as hover, so keyboard and screen-reader users get a reachable, named control. Preserve the final x-axis tick when pruning duplicate labels (now extracted as dedupeTicksByLabel) so the end-of-range label is never dropped.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
d-cs
approved these changes
Jun 28, 2026
ericallam
approved these changes
Jun 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Improves and unifies the run-activity charts by extracting a shared set of chart primitives and adopting them on the three task landing pages (agent, standard, scheduled), with the density and label fixes also carried over to the dashboard and custom query charts.
Main changes a reviewer should know about:
ChartCard(title + maximize/fullscreen),ChartSyncContext(cross-chart hover + zoom state),useXAxisTicks(width-aware tick selection),activityTimeAxis, andstatusColors, plus a server-sideactivitySeries.server.tsholdingchooseBucketSeconds, status grouping, and the zero-fill helpers. The three task routes and both presenters were refactored onto these, removing roughly 3x duplicated tick logic, status-color tables, and bucket-ladder code.chooseBucketSeconds(nice-interval ladder, ~72 target, capped at 120 buckets) instead of the hardcoded 1h/6h/1d ladder, so a 5m or 1h range no longer collapses into a single bar.ChartBar/ChartLine.ChartSyncProvider, so single-chart pages are unaffected.vshortcut while hovered).from/toURL params, clearingperiod/cursor), with a From/To tooltip shown during the drag.TIME_AXIS_LABEL_SPACING_PXconstant.Intentionally unchanged
_index) page are untouched. They are hand-rolled raw-Recharts sparklines kept deliberately lightweight and do not use these primitives._is_deletedhandling).packages/*) changes, so there is no changeset; the.server-changes/entries cover it.Testing
Added 46 unit tests covering server-side bucket selection, width-aware tick spacing, time-axis formatting, zoom-range math, and categorical label truncation (
pnpm --filter webapp run test), andpnpm run typecheck --filter webapppasses. Manually exercised each task landing page (agent, standard, scheduled) plus the dashboard and custom query charts, stepping the Date/Time filter through 5m, 1h, 24h, 7d, and 30d to confirm dense bars on short ranges, non-overlapping labels that reflow on resize, the synced hover line across the agent charts, the maximize button, and drag-to-zoom updating the filter.Changelog
The activity charts on the task landing pages and the dashboard and custom query charts now share one set of reusable primitives. X-axis labels are width-aware so they never overlap and reflow when a panel resizes, y-axis values are abbreviated (8K, 1.2M), and short time ranges render dense bars instead of collapsing into a single bar. Hovering any agent chart mirrors a vertical line on the others, every chart gains a maximize button, and dragging across a task chart zooms the Time/Date filter. Long categorical labels such as run IDs and task names middle-truncate and auto-rotate only when needed.
chart.improvements.mp4