diff --git a/frontend/src/components/Runs/MetricChart.tsx b/frontend/src/components/Runs/MetricChart.tsx
index 8cad4e7..dda283b 100644
--- a/frontend/src/components/Runs/MetricChart.tsx
+++ b/frontend/src/components/Runs/MetricChart.tsx
@@ -83,70 +83,93 @@ export function RunMetricChart({
)
}
+/**
+ * The axis a picker sets, written beside it rather than into every option.
+ *
+ * The dropdown then lists names — "step", "loss" — instead of repeating "vs"
+ * once per row, and which axis is being set is said once, where it belongs.
+ */
+function AxisLabel({ children }: { children: string }) {
+ return (
+
+ {children}
+
+ )
+}
+
/** The metric picker both the detail and the comparison sit under. */
export function MetricPicker({
names,
value,
+ axis,
onChange,
}: {
names: string[]
value: string
+ /** Named where the chart has an axis for it to be; bare on its own. */
+ axis?: string
onChange: (name: string) => void
}) {
if (names.length === 0) return null
return (
-
+
+ {axis && {axis}}
+
+
)
}
-/**
- * What the comparison is plotted against.
- *
- * Doubles as the axis label — it sits directly above the chart, and naming the
- * axis twice is one caption too many.
- */
+/** What the comparison is plotted against. */
export function AxisPicker({
names,
metric,
value,
+ axis = "X",
onChange,
}: {
names: string[]
/** Excluded from the choices: a metric against itself is a straight line. */
metric: string
value: string
+ axis?: string
onChange: (x: string) => void
}) {
const options = [
- { value: STEP_AXIS, label: "vs step" },
- { value: TIME_AXIS, label: "vs time (s)" },
+ { value: STEP_AXIS, label: "step" },
+ { value: TIME_AXIS, label: "time (s)" },
...names
.filter((name) => name !== metric)
- .map((name) => ({ value: name, label: `vs ${name}` })),
+ .map((name) => ({ value: name, label: name })),
]
return (
-
+
+ {axis}
+
+
)
}
diff --git a/frontend/src/components/Runs/RunsScreen.tsx b/frontend/src/components/Runs/RunsScreen.tsx
index 1fd8058..dd17cc0 100644
--- a/frontend/src/components/Runs/RunsScreen.tsx
+++ b/frontend/src/components/Runs/RunsScreen.tsx
@@ -500,6 +500,7 @@ function Compare({
update({ metric: name })}
/>
{names.length > 0 && (