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 && (