Pin a chart to the last few runs of a flow

frontend/src/components/Runs/queries.ts

@@ -61,6 +61,14 @@ export const runsInfiniteQueryOptions = (filters: RunFilters) => ({
   },
 })
 
+/** One page of runs, for a caller that pages nothing — a pinned chart. */
+export const runsListQueryOptions = (
+  filters: RunFilters & { limit?: number },
+) => ({
+  queryKey: [...runKeys.all, "pinned", filters] as const,
+  queryFn: () => RunsService.readRuns(filters),
+})
+
 export const runOverviewQueryOptions = () => ({
   queryKey: runKeys.overview,
   queryFn: () => RunsService.readOverview(),
@@ -138,6 +146,15 @@ export const NO_CURVE =
 /** A run id, short enough for a table cell. The tail is the random half. */
 export const shortId = (id: string) => id.slice(-8)
 
+/**
+ * A series label from the comparison endpoint, cut down to fit a legend.
+ *
+ * It leads with the whole run id, which is 22 characters of mostly timestamp
+ * beside four others.
+ */
+export const shortenRunLabel = (label: string) =>
+  label.replace(/^\S+/, (id) => shortId(id))
+
 /** A commit, at the length everyone reads one at. */
 export const shortCommit = (commit: string) => commit.slice(0, 7)