diff --git a/src/app/(dashboard)/dashboard/orchestration/tabs/HistoryTab.tsx b/src/app/(dashboard)/dashboard/orchestration/tabs/HistoryTab.tsx index d8939cf7f6..f94510b869 100644 --- a/src/app/(dashboard)/dashboard/orchestration/tabs/HistoryTab.tsx +++ b/src/app/(dashboard)/dashboard/orchestration/tabs/HistoryTab.tsx @@ -202,6 +202,33 @@ function PresetButtons({ ); } +/** Compare-mode toggle, rendered next to the preset buttons — presentation only. Its label + * flips between `compareMode` ("Compare runs") and `compareExit` ("Exit compare mode") so the + * accessible name itself communicates the current state, same idiom as `sourceCollapse` / + * `sourceExpand` elsewhere in this tab family. */ +function CompareToggle({ + compareMode, + t, + onToggle, +}: { + compareMode: boolean; + t: ReturnType; + onToggle: () => void; +}) { + return ( + + ); +} + /** Alert rows for history sources that failed to fetch — presentation only. */ function FailedSourcesList({ failedSources, @@ -222,18 +249,30 @@ function FailedSourcesList({ } /** The Airflow-grid table itself — header row of bucket labels + one row per identity with - * state-colored cell dots. Presentation only; clicking a dot calls `onSelectItem`. Extracted so - * `HistoryTab` stays under the max-lines ratchet. */ + * state-colored cell dots. Presentation only. + * + * `compareMode === false` (default): clicking a dot calls `onSelectItem`, opening the drawer — + * unchanged from before compare mode existed. + * `compareMode === true`: clicking a dot calls `onToggleSelect` instead (mark/unmark, never + * opens the drawer); `selectedIds` drives the highlight + `aria-pressed` on the dot itself. + * + * Extracted so `HistoryTab` stays under the max-lines ratchet. */ function HistoryGridTable({ grid, preset, t, + compareMode, + selectedIds, onSelectItem, + onToggleSelect, }: { grid: HistoryGrid; preset: Preset; t: ReturnType; + compareMode: boolean; + selectedIds: ReadonlySet; onSelectItem: (item: HistoryItem) => void; + onToggleSelect: (item: HistoryItem) => void; }) { return ( // Kept mounted (with the previous range's rows) while `isLoading` is true for a refetch — @@ -272,15 +311,21 @@ function HistoryGridTable({ const meta = `${item.label} · ${formatDuration(item.durationMs)} · ${t( STATE_KEY[item.state] )}`; + const isSelected = compareMode && selectedIds.has(item.id); return (