From 438758b6ba92245211537c0c628faa8983461306 Mon Sep 17 00:00:00 2001 From: Radin Hamidi Rad Date: Thu, 18 Jun 2026 23:34:23 -0400 Subject: [PATCH] leaderboard: unify selectors into a single controls bar; LLM/Method as dropdowns Replace the two stacked selector/filter cards on the leaderboard home page with one controls bar: Benchmark / Dataset / Retriever on the first row and LLM / Method / Search on the second, separated by vertical dividers. LLM and Method move from chip groups to - - {/* Row 3: Retriever */} -
- Retriever -
- - {retrievers.map((r: any) => ( - - ))} +
+
+ Dataset + {/* populated entirely by JS on init */} + +
+
+
+ Retriever +
+ + {retrievers.map((r: any) => ( + + ))} +
-
- - {/* ── Filter card: Model + Method chips + Search ── */} -
-
-
+ {/* Row 2: LLM dropdown · Method dropdown · Search · legend */} +
+
LLM - - {(models as any[]).map((m) => ( - - ))} +
-
+
+
Method - - {(methods as any[]).map((m) => ( - - ))} +
-
-
+
- +
- 0 / {matrixRows.length} configs · {overview.run_count} runs + 0 / {matrixRows.length} · {overview.run_count} runs
@@ -444,16 +448,13 @@ const jsonLd = JSON.stringify({ // ------ model / method chips ------------------------------------------------ const filterState = { model: "", method: "" }; - document.querySelectorAll("[data-lb-filters] [data-group]").forEach((g) => { - const key = g.dataset.group; - g.querySelectorAll("button.lb-chip").forEach((btn) => { - btn.addEventListener("click", () => { - g.querySelectorAll("button.lb-chip").forEach((b) => b.classList.remove("active")); - btn.classList.add("active"); - filterState[key] = btn.dataset.value ?? ""; - renderTable(); - }); - }); + document.getElementById("lb-model-select")?.addEventListener("change", (e) => { + filterState.model = e.target.value ?? ""; + renderTable(); + }); + document.getElementById("lb-method-select")?.addEventListener("change", (e) => { + filterState.method = e.target.value ?? ""; + renderTable(); }); // ------ search -------------------------------------------------------------- diff --git a/reproducibility/site/src/styles/global.css b/reproducibility/site/src/styles/global.css index 3ffc1ba..e331790 100644 --- a/reproducibility/site/src/styles/global.css +++ b/reproducibility/site/src/styles/global.css @@ -33,6 +33,7 @@ /* ── Font family: Source Sans 3 matching HuggingFace / Gradio default theme ── */ .lb-selector-card, .lb-filter-card, +.lb-controls, .lb-table-card, table.lb, .lb-exp-panel, @@ -141,6 +142,50 @@ table.lb, /* Dark mode: keep options readable */ .lb-ds-select option { background: var(--qg-bg, #1a1d27); color: var(--qg-fg, #e2e8f0); } +/* ---------- unified controls bar (home page) ----------------------------- */ +/* Single card: Benchmark / Dataset / Retriever on row 1; LLM / Method / + * Search on row 2, groups separated by vertical dividers. Reuses .lb-chip, + * .lb-ds-select, .lb-search-*, .lb-best-legend primitives. */ +.lb-controls { + background: var(--qg-bg-soft); + border: 1px solid var(--qg-border); + border-radius: 12px; + padding: 8px 12px; + margin-bottom: 8px; + display: flex; + flex-direction: column; + gap: 7px; +} +.lb-controls .lb-ctrl-row { + display: flex; + align-items: center; + gap: 8px 14px; + flex-wrap: wrap; +} +.lb-controls .lb-ctrl-row + .lb-ctrl-row { + border-top: 1px solid var(--qg-border-soft, var(--qg-border)); + padding-top: 7px; +} +.lb-controls .lb-selector-label, +.lb-controls .lb-filter-label { min-width: 0; margin: 0; } +.lb-controls .lb-ctrl-grp { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} +.lb-controls .lb-divider { + width: 1px; + align-self: stretch; + background: var(--qg-border); + margin: 1px 2px; +} +.lb-controls .lb-chip { font-size: 13.5px; padding: 4px 10px; } +.lb-controls .lb-ds-select { font-size: 13.5px; padding: 5px 30px 5px 11px; min-width: 140px; } +.lb-controls .lb-search-input { padding: 4px 9px; min-width: 200px; } +.lb-controls .lb-search-input input { font-size: 12.5px; } +@media (max-width: 760px) { .lb-controls .lb-divider { display: none; } } + /* ---------- filter card -------------------------------------------------- */ .lb-filter-card { background: var(--qg-bg-soft); diff --git a/web/shared/components/Footer.astro b/web/shared/components/Footer.astro index 515d072..3fc2739 100644 --- a/web/shared/components/Footer.astro +++ b/web/shared/components/Footer.astro @@ -11,17 +11,23 @@ interface FooterLink { interface Props { /** Lab / org name displayed in the copyright line. */ org?: string; + /** Override the "Paper" link target (defaults to the WWW toolkit paper). */ + paperHref?: string; /** Extra links appended after the defaults. */ extraLinks?: FooterLink[]; } -const { org = "ls3-lab", extraLinks = [] } = Astro.props; +const { + org = "ls3-lab", + paperHref = "https://arxiv.org/abs/2511.15996", + extraLinks = [], +} = Astro.props; const year = new Date().getFullYear(); const baseLinks: FooterLink[] = [ { label: "GitHub", href: "https://github.com/ls3-lab/QueryGym" }, { label: "Docs", href: "https://querygym.readthedocs.io" }, - { label: "Paper", href: "https://arxiv.org/abs/2511.15996" }, + { label: "Paper", href: paperHref }, ]; ---