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

frontend/src/client/schemas.gen.ts

@@ -2622,6 +2622,11 @@ export const SeriesAnswerSchema = {
             type: 'string',
             title: 'Metric'
         },
+        x: {
+            type: 'string',
+            title: 'X',
+            default: 'step'
+        },
         lines: {
             items: {
                 '$ref': '#/components/schemas/MetricSeries'

frontend/src/client/sdk.gen.ts

@@ -1899,9 +1899,13 @@ export class RunsService {
      * This is the comparison view: it answers in the same shape a flow answers a
      * chart's query with, so putting three training curves beside each other is
      * a widget binding rather than a screen of its own.
+     *
+     * ``x`` names what to plot against — nothing or "step", "time", or another
+     * metric of the same runs.
      * @param data The data for the request.
      * @param data.ids
      * @param data.metric
+     * @param data.x
      * @returns SeriesAnswer Successful Response
      * @throws ApiError
      */
@@ -1911,7 +1915,8 @@ export class RunsService {
             url: '/api/v1/runs/series/compare',
             query: {
                 ids: data.ids,
-                metric: data.metric
+                metric: data.metric,
+                x: data.x
             },
             errors: {
                 422: 'Validation Error'

frontend/src/client/types.gen.ts

@@ -929,6 +929,7 @@ export type SecretValue = {
 
 export type SeriesAnswer = {
     metric: string;
+    x?: string;
     lines?: Array<MetricSeries>;
 };
 
@@ -1611,6 +1612,7 @@ export type RunsReadMetricsResponse = (Array<MetricPoint>);
 export type RunsCompareMetricData = {
     ids: string;
     metric: string;
+    x?: string;
 };
 
 export type RunsCompareMetricResponse = (SeriesAnswer);