Scroll the runs table, pick a range, and choose what a comparison plots against

frontend/src/components/Runs/queries.ts

@@ -27,8 +27,8 @@ export const runKeys = {
   detail: (id: string) => ["runs", "detail", id] as const,
   metrics: (id: string, name: string) =>
     ["runs", "detail", id, "metrics", name] as const,
-  compare: (ids: string[], metric: string) =>
-    ["runs", "compare", ids.join(","), metric] as const,
+  compare: (ids: string[], metric: string, x: string) =>
+    ["runs", "compare", ids.join(","), metric, x] as const,
 }
 
 /** The resting surface these screens are built from, as Health names it. */
@@ -93,17 +93,31 @@ export const runMetricsQueryOptions = (id: string, name = "") => ({
   queryFn: () => RunsService.readMetrics({ runId: id, name }),
 })
 
+/** What a comparison can be plotted against, beside another metric's name. */
+export const STEP_AXIS = "step"
+export const TIME_AXIS = "time"
+
 export const compareQueryOptions = (
   ids: string[],
   metric: string,
+  x = STEP_AXIS,
   refetchInterval?: number,
 ) => ({
-  queryKey: runKeys.compare(ids, metric),
-  queryFn: () => RunsService.compareMetric({ ids: ids.join(","), metric }),
+  queryKey: runKeys.compare(ids, metric, x),
+  queryFn: () => RunsService.compareMetric({ ids: ids.join(","), metric, x }),
   enabled: ids.length > 0 && Boolean(metric),
   ...(refetchInterval ? { refetchInterval } : {}),
 })
 
+/**
+ * How many runs one selection carries.
+ *
+ * The selection is the address, which is what makes a comparison a link — and
+ * a URL is not a place to put five hundred 22-character ids. A chart draws
+ * five of them anyway; the rest of the room is for changing your mind.
+ */
+export const MAX_SELECTION = 50
+
 export function useCancelRun() {
   const client = useQueryClient()
   return useMutation({