Pin a chart to the last few runs of a flow

frontend/src/components/Runs/MetricChart.tsx

@@ -13,7 +13,7 @@ import {
   compareQueryOptions,
   NO_CURVE,
   runMetricsQueryOptions,
-  shortId,
+  shortenRunLabel,
 } from "./queries"
 
 /** The metrics one run recorded, in the order they are worth offering. */
@@ -46,11 +46,7 @@ export function RunMetricChart({
     compareQueryOptions(ids, metric, refreshMs),
   )
   const lines = (data?.lines ?? []).slice(0, MAX_SERIES)
-  const labels = lines.map((line) =>
-    // The endpoint labels a line with the whole run id, which is too long to
-    // read in a legend beside four others.
-    line.label.replace(/^\S+/, (id) => shortId(id)),
-  )
+  const labels = lines.map((line) => shortenRunLabel(line.label))
   const plots: HistoryPoint[][] = lines.map((line) =>
     (line.points ?? []).map(([step, value]) => ({ ts: step, value })),
   )