feat(webapp): improve task and dashboard activity charts (#4064)

## 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:

- **Shared primitives (DRY).** New `ChartCard` (title +
maximize/fullscreen), `ChartSyncContext` (cross-chart hover + zoom
state), `useXAxisTicks` (width-aware tick selection),
`activityTimeAxis`, and `statusColors`, plus a server-side
`activitySeries.server.ts` holding `chooseBucketSeconds`, 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.
- **Denser bars on short ranges.** Server-side bucketing now uses
`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.
- **Width-aware x-axis labels.** Labels are selected to fit the measured
plot width (always first + last, evenly spaced, de-duplicated by
rendered text), stay horizontal, and reflow on panel/window resize.
Y-axis values default to compact form (8K, 1.2M) in
`ChartBar`/`ChartLine`.
- **Synced hover line.** Hovering one of the agent page's three charts
draws a dashed vertical line at the same bucket on the *other* two, and
suppresses it on the hovered chart. It is opt-in via
`ChartSyncProvider`, so single-chart pages are unaffected.
- **Maximize button.** Each chart gets a fullscreen dialog toggle
(reuses the existing dashboard-widget pattern, `v` shortcut while
hovered).
- **Drag-to-zoom on task pages.** Dragging across a task chart sets the
Time/Date filter (`from`/`to` URL params, clearing `period`/`cursor`),
with a From/To tooltip shown during the drag.
- **Custom query charts.** Long categorical x labels (run IDs, task
names) middle-truncate and auto-rotate only when needed, and label
thinning is now width-aware for both bar and line variants. Dashboard
line-chart label density is also width-aware, tuned by a
`TIME_AXIS_LABEL_SPACING_PX` constant.
- **Tests.** 46 new unit tests for the pure logic (bucket selection,
tick spacing, time-axis formatting, zoom range, truncation).

## Intentionally unchanged

- **No click/drag zoom on the dashboard or custom query charts.**
Drag-to-zoom is wired up on the task landing pages only; zooming the
dashboard and custom charts is deliberately deferred to a separate
follow-up PR. A plain click (without a drag) on a task chart is a no-op.
- **The 25 mini activity charts on the Task list (`_index`) page are
untouched.** They are hand-rolled raw-Recharts sparklines kept
deliberately lightweight and do not use these primitives.
- **Other raw-Recharts sparklines are untouched** (the usage sparkline,
errors and prompts pages).
- **No ClickHouse query semantics changed** beyond the bucket-interval
parameter (same filters, same FINAL / `_is_deleted` handling).
- **Webapp-only.** No public package (`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`), and `pnpm run
typecheck --filter webapp` passes. 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.

---



https://github.com/user-attachments/assets/6be09e38-3a0e-4947-b6e3-4839daa2fbe0

Author: samejr

.server-changes/custom-chart-categorical-x-axis.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Custom (Query mode) and dashboard charts keep non-date x-axis labels like run IDs and task names readable with no configuration: width-aware label thinning, middle-truncation with the full value on hover, and auto-rotation only when labels are long.

.server-changes/dashboard-line-chart-x-axis-density.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Dashboard and custom query line charts now choose how many x-axis time labels to show based on the chart's rendered width, so wide charts show more labels and narrow widgets show fewer.

.server-changes/task-landing-activity-charts.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Improve the activity charts on the task landing pages (agent, standard, scheduled): bar density now adapts to the selected time range so short ranges no longer collapse to a single bar, x-axis labels are width-aware and non-overlapping, the agent charts share a synced hover line, each chart gets a maximize button, and dragging across a chart zooms the Time/Date filter.

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -2,10 +2,12 @@ import type { ColumnFormatType, OutputColumnMetadata } from "@internal/clickhous
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import { BarChart3, LineChart } from "lucide-react";
 import { memo, useMemo } from "react";
+import { useMeasure } from "react-use";
 import { createValueFormatter } from "~/utils/columnFormat";
 import { formatCurrencyAccurate } from "~/utils/numberFormatter";
 import type { ChartConfig } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
+import { selectEvenlySpacedIndices } from "~/components/primitives/charts/useXAxisTicks";
 import { ChartBlankState } from "../primitives/charts/ChartBlankState";
 import { Callout } from "../primitives/Callout";
 import type { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
@@ -18,6 +20,39 @@ const MAX_SVG_ELEMENT_BUDGET = 6_000;
 const MIN_DATA_POINTS = 100;
 const MAX_DATA_POINTS = 500;
 
+// Width-aware x-axis label density for date-based line charts: reserve room for
+// the y-axis + margins, then fit one label per TIME_AXIS_LABEL_SPACING_PX (smaller = denser).
+const TIME_AXIS_Y_ALLOWANCE_PX = 56;
+const TIME_AXIS_LABEL_SPACING_PX = 40;
+const MIN_TIME_AXIS_TICKS = 3;
+
+// Categorical (non-date) x-axis: thin labels to fit, middle-truncate long values
+// (run IDs, task names), and auto-rotate when labels are long.
+const X_LABEL_PX_PER_CHAR = 6.5;
+const X_LABEL_GAP_PX = 16;
+const MIN_CATEGORICAL_LABEL_PX = 36;
+// Labels longer than this rotate to -45°.
+const CATEGORICAL_HORIZONTAL_MAX_CHARS = 10;
+// Middle-ellipsis cap for rotated labels (bounds axis height).
+const CATEGORICAL_ROTATED_MAX_CHARS = 14;
+// Rotated labels pack tighter than horizontal ones.
+const CATEGORICAL_ROTATED_LABEL_PX = 32;
+const CATEGORICAL_ROTATED_HEIGHT_PX = 80;
+const MIN_CATEGORICAL_TICKS = 2;
+
+/**
+ * Shorten to `maxChars` with a middle ellipsis (e.g. "run_abc…f9c2"), preserving
+ * the distinguishing tail for IDs that share a prefix.
+ */
+export function truncateMiddle(value: string, maxChars: number): string {
+  if (value.length <= maxChars) return value;
+  if (maxChars <= 1) return value.slice(0, Math.max(0, maxChars));
+  const keep = maxChars - 1; // room for the ellipsis
+  const head = Math.ceil(keep / 2);
+  const tail = Math.floor(keep / 2);
+  return `${value.slice(0, head)}…${value.slice(value.length - tail)}`;
+}
+
 interface QueryResultsChartProps {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
@@ -307,7 +342,7 @@ const NICE_TIME_INTERVALS = [
  * Generate evenly-spaced tick values for a time axis using "nice" intervals
  * that align to natural time boundaries (midnight, noon, hour marks, etc.)
  */
-function generateTimeTicks(minTime: number, maxTime: number, maxTicks = 8): number[] {
+export function generateTimeTicks(minTime: number, maxTime: number, maxTicks = 8): number[] {
   const range = maxTime - minTime;
 
   if (range <= 0) {
@@ -793,6 +828,22 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     timeTicks,
   } = useMemo(() => transformDataForChart(rows, config, timeRange), [rows, config, timeRange]);
 
+  // Measure the chart width so x-axis label density adapts to it (continuous time
+  // scale is kept, so data gaps still show).
+  const [chartMeasureRef, { width: chartWidth }] = useMeasure<HTMLDivElement>();
+
+  // Width-aware time-axis ticks: choose how many clean intervals to render based
+  // on width. Falls back to the default ticks until width is known (first paint).
+  const widthAwareTimeTicks = useMemo(() => {
+    if (!isDateBased || !timeDomain || !chartWidth) return timeTicks;
+    const plotWidth = Math.max(0, chartWidth - TIME_AXIS_Y_ALLOWANCE_PX);
+    const maxTicks = Math.max(
+      MIN_TIME_AXIS_TICKS,
+      Math.floor(plotWidth / TIME_AXIS_LABEL_SPACING_PX)
+    );
+    return generateTimeTicks(timeDomain[0], timeDomain[1], maxTicks);
+  }, [isDateBased, timeDomain, timeTicks, chartWidth]);
+
   // Apply sorting (for date-based, sort by timestamp to ensure correct order)
   const data = useMemo(() => {
     if (isDateBased) {
@@ -1022,6 +1073,41 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     };
   }, [isDateBased, xAxisTickFormatter, xAxisAngle]);
 
+  // Categorical x-axis: thin to fit width, middle-truncate long values, rotate when long.
+  const categoricalXAxisProps = useMemo(() => {
+    if (isDateBased) return null;
+
+    const labels = data.map((d) => String(d[xDataKey] ?? ""));
+    const maxLabelChars = labels.reduce((max, l) => Math.max(max, l.length), 0);
+    const angled = maxLabelChars > CATEGORICAL_HORIZONTAL_MAX_CHARS;
+
+    const tickFormatter = angled
+      ? (value: unknown) => truncateMiddle(String(value ?? ""), CATEGORICAL_ROTATED_MAX_CHARS)
+      : (value: unknown) => String(value ?? "");
+
+    // Rotated labels pack tighter; horizontal ones need roughly their own width.
+    const perLabelPx = angled
+      ? CATEGORICAL_ROTATED_LABEL_PX
+      : Math.max(MIN_CATEGORICAL_LABEL_PX, maxLabelChars * X_LABEL_PX_PER_CHAR + X_LABEL_GAP_PX);
+    const plotWidth = chartWidth > 0 ? Math.max(0, chartWidth - TIME_AXIS_Y_ALLOWANCE_PX) : 0;
+    const fitCount =
+      plotWidth > 0
+        ? Math.max(MIN_CATEGORICAL_TICKS, Math.floor(plotWidth / perLabelPx))
+        : data.length;
+    const ticks =
+      fitCount < data.length
+        ? selectEvenlySpacedIndices(data.length, fitCount).map((i) => data[i][xDataKey] as string)
+        : undefined;
+
+    return {
+      tickFormatter,
+      angle: angled ? -45 : 0,
+      textAnchor: angled ? ("end" as const) : ("middle" as const),
+      height: angled ? CATEGORICAL_ROTATED_HEIGHT_PX : undefined,
+      ...(ticks ? { ticks, interval: 0 as const } : {}),
+    };
+  }, [isDateBased, data, xDataKey, chartWidth]);
+
   // Validation — all hooks must be above this point
   const chartIcon = chartType === "bar" ? BarChart3 : LineChart;
 
@@ -1070,15 +1156,15 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         domain: timeDomain ?? (["auto", "auto"] as [string, string]),
         scale: "time" as const,
         // Explicitly specify tick positions so labels appear across the entire range
-        ticks: timeTicks ?? undefined,
+        ticks: widthAwareTimeTicks ?? undefined,
         ...baseXAxisProps,
       }
-    : baseXAxisProps;
+    : (categoricalXAxisProps ?? baseXAxisProps);
 
   // Bar charts always use categorical axis positioning
   // This ensures bars are evenly distributed regardless of data point count
   // (prevents massive bars when there are only a few data points)
-  const xAxisPropsForBar = baseXAxisProps;
+  const xAxisPropsForBar = isDateBased ? baseXAxisProps : (categoricalXAxisProps ?? baseXAxisProps);
 
   const yAxisProps = {
     tickFormatter: yAxisFormatter,
@@ -1089,6 +1175,40 @@ export const QueryResultsChart = memo(function QueryResultsChart({
 
   if (chartType === "bar") {
     return (
+      <div ref={chartMeasureRef} className="h-full w-full">
+        <Chart.Root
+          config={chartConfig}
+          data={data}
+          dataKey={xDataKey}
+          series={sortedSeries}
+          visibleSeries={visibleSeries}
+          labelFormatter={legendLabelFormatter}
+          showLegend={showLegend}
+          maxLegendItems={fullLegend ? Infinity : 5}
+          legendAggregation={config.aggregation}
+          legendValueFormatter={tooltipValueFormatter}
+          minHeight="300px"
+          fillContainer
+          onViewAllLegendItems={onViewAllLegendItems}
+          legendScrollable={legendScrollable}
+          state={isLoading ? "loading" : "loaded"}
+          beforeLegend={seriesLimitCallout}
+        >
+          <Chart.Bar
+            xAxisProps={xAxisPropsForBar}
+            yAxisProps={yAxisProps}
+            stackId={stacked ? "stack" : undefined}
+            tooltipLabelFormatter={tooltipLabelFormatter}
+            tooltipValueFormatter={tooltipValueFormatter}
+          />
+        </Chart.Root>
+      </div>
+    );
+  }
+
+  // Line or stacked area chart
+  return (
+    <div ref={chartMeasureRef} className="h-full w-full">
       <Chart.Root
         config={chartConfig}
         data={data}
@@ -1107,46 +1227,16 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         state={isLoading ? "loading" : "loaded"}
         beforeLegend={seriesLimitCallout}
       >
-        <Chart.Bar
-          xAxisProps={xAxisPropsForBar}
+        <Chart.Line
+          xAxisProps={xAxisPropsForLine}
           yAxisProps={yAxisProps}
-          stackId={stacked ? "stack" : undefined}
+          stacked={stacked && visibleSeries.length > 1}
           tooltipLabelFormatter={tooltipLabelFormatter}
           tooltipValueFormatter={tooltipValueFormatter}
+          lineType="linear"
         />
       </Chart.Root>
-    );
-  }
-
-  // Line or stacked area chart
-  return (
-    <Chart.Root
-      config={chartConfig}
-      data={data}
-      dataKey={xDataKey}
-      series={sortedSeries}
-      visibleSeries={visibleSeries}
-      labelFormatter={legendLabelFormatter}
-      showLegend={showLegend}
-      maxLegendItems={fullLegend ? Infinity : 5}
-      legendAggregation={config.aggregation}
-      legendValueFormatter={tooltipValueFormatter}
-      minHeight="300px"
-      fillContainer
-      onViewAllLegendItems={onViewAllLegendItems}
-      legendScrollable={legendScrollable}
-      state={isLoading ? "loading" : "loaded"}
-      beforeLegend={seriesLimitCallout}
-    >
-      <Chart.Line
-        xAxisProps={xAxisPropsForLine}
-        yAxisProps={yAxisProps}
-        stacked={stacked && visibleSeries.length > 1}
-        tooltipLabelFormatter={tooltipLabelFormatter}
-        tooltipValueFormatter={tooltipValueFormatter}
-        lineType="linear"
-      />
-    </Chart.Root>
+    </div>
   );
 });