fix(webapp): apply the sparse-series bucket floor to the queue detail charts

The queue detail page has the same event-driven series as the Queues list hero
row, and the same problem: scheduling delay and throttling only have samples
when something started or was held back, so at the 10-second width a short range
picks, most buckets held nothing and the lines read as a run of zeros.

Scheduling delay (p50/p95/p99), Throttled, and the per-key mean delay on the
Concurrency keys tab now take the same 60-second floor, and the two delay charts
break where a bucket genuinely has no samples instead of drawing a zero. The
gauge charts on this page (concurrency, queue depth, keys with backlog, worst key
wait) carry forward and read correctly at any width, so they are left alone.

None of this page's charts carry a headline readout, so there is no share-of-
buckets figure here to skew the way the list page's throttled readout did.

The floor and the no-samples break are plumbed through the shared queue-metric
card, so the task detail page and run inspector can opt in later without
further changes.

Author: ericallam

apps/webapp/app/components/queues/QueueMetricCards.tsx

@@ -54,6 +54,8 @@ export function useQueueMetric(
     defaultPeriod?: string;
     /** Poll ClickHouse on this cadence (ms). Omit to use the query's default interval. */
     refreshIntervalMs?: number;
+    /** Floor for the bucket width, for series too sparse to read at the range's natural width. */
+    minBucketSeconds?: number;
   }
 ) {
   return useMetricResourceQuery(query, {
@@ -62,6 +64,7 @@ export function useQueueMetric(
     defaultPeriod: opts.defaultPeriod ?? QUEUE_METRICS_DEFAULT_PERIOD,
     queues: [opts.queueName],
     fillGaps: opts.fillGaps,
+    minBucketSeconds: opts.minBucketSeconds,
     refreshIntervalMs: opts.refreshIntervalMs,
   });
 }
@@ -120,6 +123,14 @@ type QueueMetricChartProps = {
   /** Reports whether the chart has data to plot (false once it settles on the "no activity" state),
    * so a wrapping card can hide the legend to match. */
   onHasDataChange?: (hasData: boolean) => void;
+  /** Floor for the bucket width, for series too sparse to read at the range's natural width. */
+  minBucketSeconds?: number;
+  /**
+   * Column whose value counts the samples behind the plotted series. Where it is zero the metric
+   * has nothing to report, so every series breaks there instead of reading as a real zero. Keep it
+   * out of `series` — it is read for this test only, never drawn.
+   */
+  sampleCountColumn?: string;
 };
 
 // Bare chart (no card chrome) so it can live inside a shared card, e.g. a tabbed panel.
@@ -136,22 +147,26 @@ export function QueueMetricChart({
   carryBackfill,
   thresholdStroke,
   onHasDataChange,
+  minBucketSeconds,
+  sampleCountColumn,
 }: QueueMetricChartProps) {
   const { rows, showLoading, failed } = useQueueMetric(query, {
     ids,
     timeRange,
     queueName,
     fillGaps,
     defaultPeriod,
+    minBucketSeconds,
   });
 
   const data = useMemo(() => {
     const points = rows
       .map((r) => {
-        const point: { bucket: number } & Record<string, number> = {
+        const point: { bucket: number } & Record<string, number | null> = {
           bucket: clickhouseTimeToMs(r.t),
         };
-        for (const s of series) point[s.key] = toNumber(r[s.key]);
+        const hasSamples = sampleCountColumn ? toNumber(r[sampleCountColumn]) > 0 : true;
+        for (const s of series) point[s.key] = hasSamples ? toNumber(r[s.key]) : null;
         return point;
       })
       .filter((p) => Number.isFinite(p.bucket));
@@ -160,15 +175,15 @@ export function QueueMetricChart({
     // value and carry it back over the earlier buckets so the line doesn't start at a false 0.
     if (carryBackfill?.length) {
       for (const key of carryBackfill) {
-        const first = points.findIndex((p) => p[key] > 0);
+        const first = points.findIndex((p) => toNumber(p[key]) > 0);
         if (first > 0) {
           const value = points[first]![key]!;
           for (let i = 0; i < first; i++) points[i]![key] = value;
         }
       }
     }
     return points;
-  }, [rows, series, carryBackfill]);
+  }, [rows, series, carryBackfill, sampleCountColumn]);
 
   const chartConfig = useMemo(() => {
     const cfg: ChartConfig = {};

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx

@@ -191,6 +191,14 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
 const CK_LIVE_LIMIT = 50;
 
+/**
+ * Bucket floor for this page's event-driven charts (scheduling delay, throttling). Their samples
+ * only exist when something started or was held back, so at the 10-second width a short range
+ * picks, most buckets hold nothing and the line reads as a run of zeros. Gauge charts on this page
+ * (concurrency, queue depth, backlogged keys) carry forward and are left at the natural width.
+ */
+const SPARSE_CHART_MIN_BUCKET_SECONDS = 60;
+
 // Whole-queue oldest wait right now: for keyed queues the per-key breakdown carries the oldest
 // enqueue time per key, so the queue's oldest is the max wait across keys; otherwise fall back to
 // the queue's oldest message directly. Returns null when nothing is waiting.
@@ -470,8 +478,10 @@ function OverviewCharts({
           info="How long runs wait before they start."
           showLegend
           className="aspect-[2/1]"
-          query={`SELECT timeBucket() AS t,\n  round(quantilesMerge(0.5, 0.9, 0.95, 0.99)(wait_quantiles)[1]) AS p50,\n  round(quantilesMerge(0.5, 0.9, 0.95, 0.99)(wait_quantiles)[3]) AS p95,\n  round(quantilesMerge(0.5, 0.9, 0.95, 0.99)(wait_quantiles)[4]) AS p99\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
+          query={`SELECT timeBucket() AS t,\n  round(quantilesMerge(0.5, 0.9, 0.95, 0.99)(wait_quantiles)[1]) AS p50,\n  round(quantilesMerge(0.5, 0.9, 0.95, 0.99)(wait_quantiles)[3]) AS p95,\n  round(quantilesMerge(0.5, 0.9, 0.95, 0.99)(wait_quantiles)[4]) AS p99,\n  sum(wait_ms_count) AS samples\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
           fillGaps
+          minBucketSeconds={SPARSE_CHART_MIN_BUCKET_SECONDS}
+          sampleCountColumn="samples"
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -493,6 +503,7 @@ function OverviewCharts({
           className="aspect-[2/1] sm:col-span-2 sm:aspect-[4/1]"
           query={`SELECT timeBucket() AS t, sum(throttled_count) AS throttled\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
           fillGaps
+          minBucketSeconds={SPARSE_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -1003,7 +1014,10 @@ function KeyDrilldown({
         <QueueDetailChartCard
           title={`Key ${keyName}: mean scheduling delay`}
           className="aspect-[2/1]"
-          query={`SELECT timeBucket() AS t, if(sum(wait_ms_count) > 0, round(sum(wait_ms_sum) / sum(wait_ms_count)), 0) AS wait\nFROM queue_metrics_by_key\nWHERE ${pin}\nGROUP BY t\nORDER BY t`}
+          query={`SELECT timeBucket() AS t, if(sum(wait_ms_count) > 0, round(sum(wait_ms_sum) / sum(wait_ms_count)), 0) AS wait, sum(wait_ms_count) AS samples\nFROM queue_metrics_by_key\nWHERE ${pin}\nGROUP BY t\nORDER BY t`}
+          fillGaps
+          minBucketSeconds={SPARSE_CHART_MIN_BUCKET_SECONDS}
+          sampleCountColumn="samples"
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}