fix(webapp): give every chart in a synced group the same bucket width

Flooring only the sparse charts on the queue detail page broke the shared hover
crosshair. It is drawn as a recharts ReferenceLine on a category x-axis, so it
only appears where the hovered bucket timestamp exists in the other chart's own
data: a 10-second timestamp has no match in a 60-second series, so hovering
Concurrency drew nothing on Scheduling delay or Throttled. Measured before the
fix, hovering Concurrency reached 2 of the 4 other charts; now it reaches 4.

Every chart inside each ChartSyncProvider on the page therefore takes the same
floor, which is what the Queues list hero row already does. The gauges lose some
resolution (a max over a wider bucket is still the same kind of value) in
exchange for the crosshair working across the row.

Also: a chart whose every plotted value is null still had rows, so it reported
itself as having data while rendering its own no-data placeholder, leaving the
series legend stranded above it. Presence is now derived from the plotted values
rather than the row count.

Author: ericallam

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

@@ -220,9 +220,14 @@ export function QueueMetricChart({
 
   // Report data presence so a wrapping card can hide its legend when the chart settles on the
   // "no activity" state. Only report once loaded, so the legend stays put while loading.
+  const hasPlottedData = useMemo(
+    () => data.some((point) => series.some((s) => point[s.key] != null)),
+    [data, series]
+  );
+
   useEffect(() => {
-    if (!showLoading) onHasDataChange?.(!failed && data.length > 0);
-  }, [showLoading, failed, data.length, onHasDataChange]);
+    if (!showLoading) onHasDataChange?.(!failed && hasPlottedData);
+  }, [showLoading, failed, hasPlottedData, onHasDataChange]);
 
   return (
     <Chart.Root

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

@@ -192,12 +192,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.
+ * Bucket floor for the charts in a synced group. The event-driven series (scheduling delay,
+ * throttling) need it: 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. The gauges beside them take the same floor because the shared hover crosshair is a
+ * recharts ReferenceLine on a category x-axis, so it only draws where the hovered bucket
+ * timestamp exists in the other chart's own data — mixing widths in one group silently drops it.
  */
-const SPARSE_CHART_MIN_BUCKET_SECONDS = 60;
+const SYNCED_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
@@ -417,6 +419,7 @@ function OverviewCharts({
           className="aspect-[2/1]"
           query={`SELECT timeBucket() AS t, max(max_running) AS running, max(max_limit) AS limit\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
           fillGaps
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -443,6 +446,7 @@ function OverviewCharts({
           className="aspect-[2/1]"
           query={`SELECT timeBucket() AS t, max(max_queued) AS queued\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
           fillGaps
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -462,6 +466,7 @@ function OverviewCharts({
           className="aspect-[2/1]"
           query={`SELECT timeBucket() AS t,\n  deltaSumTimestampMerge(enqueue_delta) AS enqueued,\n  deltaSumTimestampMerge(started_delta) AS started\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
           fillGaps
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -480,7 +485,7 @@ function OverviewCharts({
           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,\n  sum(wait_ms_count) AS samples\nFROM queue_metrics\nGROUP BY t\nORDER BY t`}
           fillGaps
-          minBucketSeconds={SPARSE_CHART_MIN_BUCKET_SECONDS}
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           sampleCountColumn="samples"
           ids={ids}
           timeRange={timeRange}
@@ -503,7 +508,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}
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -993,6 +998,7 @@ function KeyDrilldown({
           className="aspect-[2/1]"
           query={`SELECT timeBucket() AS t, max(max_queued) AS queued, max(max_running) AS running\nFROM queue_metrics_by_key\nWHERE ${pin}\nGROUP BY t\nORDER BY t`}
           fillGaps
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -1006,6 +1012,8 @@ function KeyDrilldown({
           title={`Key ${keyName}: throughput`}
           className="aspect-[2/1]"
           query={`SELECT timeBucket() AS t, deltaSumTimestampMerge(started_delta) AS started\nFROM queue_metrics_by_key\nWHERE ${pin}\nGROUP BY t\nORDER BY t`}
+          fillGaps
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           ids={ids}
           timeRange={timeRange}
           queueName={queueName}
@@ -1016,7 +1024,7 @@ function KeyDrilldown({
           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, 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}
+          minBucketSeconds={SYNCED_CHART_MIN_BUCKET_SECONDS}
           sampleCountColumn="samples"
           ids={ids}
           timeRange={timeRange}