diff --git a/apps/web/app/[locale]/benchmark/page.tsx b/apps/web/app/[locale]/benchmark/page.tsx index 9b829b9..913cecc 100644 --- a/apps/web/app/[locale]/benchmark/page.tsx +++ b/apps/web/app/[locale]/benchmark/page.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react"; import Link from "next/link"; +import { BenchmarkHeatmap } from "@/components/BenchmarkHeatmap"; import { Skeleton } from "@/components/Skeleton"; import { useUrlNumber, useUrlParam } from "@/lib/useUrlParam"; import { @@ -150,6 +151,9 @@ export default function BenchmarkPage() { const evalSetId = (evalSetIdRaw ?? "all") as string | "all"; const setEvalSetId = (v: string | "all") => setEvalSetIdRaw(v === "all" ? null : v); const [selectedK, setSelectedK] = useUrlNumber("k", null); + // Default view: heatmap small-multiples (#81). The full numeric matrix is + // still one click away under the toggle for export workflows. + const [viewMode, setViewMode] = useState<"heatmap" | "table">("heatmap"); // Unfiltered catalog fetch — populates the full set of known stages and // eval sets, so selector chips don't disappear when a filtered query @@ -348,11 +352,12 @@ export default function BenchmarkPage() { -
+
{stageList.map((s) => ( {open && ( -
+

{group.title} @@ -68,6 +75,8 @@ function DropdownGroup({ group, pathname }: { group: NavGroup; pathname: string setOpen(false)} className={`flex items-center gap-2 mx-1.5 px-3 py-2 rounded-lg text-[13px] transition-colors ${ active @@ -76,6 +85,7 @@ function DropdownGroup({ group, pathname }: { group: NavGroup; pathname: string }`} > { setOpen(false); }, [pathname]); + // Body scroll lock while the mobile menu is open. Restore the user's + // previous overflow on close so we don't fight other modals. + useEffect(() => { + if (typeof document === "undefined") return; + if (!open) return; + const previous = document.body.style.overflow; + document.body.style.overflow = "hidden"; + return () => { + document.body.style.overflow = previous; + }; + }, [open]); + return ( <> {/* Desktop nav */} diff --git a/apps/web/components/StatusBadge.tsx b/apps/web/components/StatusBadge.tsx index 62c89b1..6f7c7ea 100644 --- a/apps/web/components/StatusBadge.tsx +++ b/apps/web/components/StatusBadge.tsx @@ -15,6 +15,48 @@ const STYLES: Record = { const KNOWN_STATUSES = ["queued", "running", "succeeded", "failed", "cancelled"] as const; type KnownStatus = typeof KNOWN_STATUSES[number]; +/** + * Leading glyph per status. Communicates the state via shape, redundant + * with color so colorblind users (and tiny-screen readers) still parse + * the badge at a glance. + */ +function StatusGlyph({ status }: { status: string }) { + switch (status) { + case "queued": + return ( + + + + + ); + case "running": + return ( + + ); + case "succeeded": + return ( + + + + ); + case "failed": + return ( + + + + ); + case "cancelled": + return ( + + + + + ); + default: + return null; + } +} + export function StatusBadge({ status }: { status: Status }) { const t = useTranslations("components.statusBadge"); const key = status.toLowerCase(); @@ -22,10 +64,12 @@ export function StatusBadge({ status }: { status: Status }) { const isKnown = KNOWN_STATUSES.includes(key as KnownStatus); const label = isKnown ? t(key as KnownStatus) : status.toUpperCase(); return ( - - {key === "running" && ( - - )} + + {label} );