Skip to content

Unify leaderboard selectors into a single controls bar #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
radinhamidi merged 1 commit into from
Jun 19, 2026
Merged

Unify leaderboard selectors into a single controls bar #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion reproducibility/site/src/layouts/Default.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,6 @@ const navLinks = [
<main class="mx-auto flex w-[90%] min-h-0 flex-1 flex-col overflow-y-auto px-4 pt-3 pb-3">
<slot />
</main>
<Footer />
<Footer paperHref="https://arxiv.org/abs/2604.27421" />
</body>
</html>
109 changes: 55 additions & 54 deletions reproducibility/site/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,62 +158,66 @@ const jsonLd = JSON.stringify({

{populated ? (
<>
{/* ── Selector card: Benchmark pills → Dataset dropdown → Retriever pills ── */}
<div class="lb-selector-card">
{/* Row 1: Benchmark */}
<div class="lb-selector-row">
<span class="lb-selector-label">Benchmark</span>
<div id="lb-bench-pills" class="lb-ret-pills">
{benchmarkGroups.map((g) => (
<button class:list={["lb-chip", g.key === defaultBenchmark && "active"]} data-bench={g.key}>
{g.label}
</button>
))}
{/* ── Controls bar: Benchmark / Dataset / Retriever, then LLM / Method / Search ── */}
<div class="lb-controls" data-lb-filters>
{/* Row 1: Benchmark pills · Dataset dropdown · Retriever pills */}
<div class="lb-ctrl-row">
<div class="lb-ctrl-grp">
<span class="lb-selector-label">Benchmark</span>
<div id="lb-bench-pills" class="lb-ret-pills">
{benchmarkGroups.map((g) => (
<button class:list={["lb-chip", g.key === defaultBenchmark && "active"]} data-bench={g.key}>
{g.label}
</button>
))}
</div>
</div>
</div>
{/* Row 2: Dataset dropdown — populated entirely by JS on init */}
<div class="lb-selector-row">
<span class="lb-selector-label">Dataset</span>
<select id="lb-ds-select" class="lb-ds-select"></select>
</div>
{/* Row 3: Retriever */}
<div class="lb-selector-row">
<span class="lb-selector-label">Retriever</span>
<div class="lb-ret-pills" id="lb-ret-pills">
<button class="lb-chip active" data-ret="">All</button>
{retrievers.map((r: any) => (
<button class="lb-chip" data-ret={r.id}>{r.display_name ?? r.id}</button>
))}
<div class="lb-divider"></div>
<div class="lb-ctrl-grp">
<span class="lb-selector-label">Dataset</span>
{/* populated entirely by JS on init */}
<select id="lb-ds-select" class="lb-ds-select"></select>
</div>
<div class="lb-divider"></div>
<div class="lb-ctrl-grp">
<span class="lb-selector-label">Retriever</span>
<div class="lb-ret-pills" id="lb-ret-pills">
<button class="lb-chip active" data-ret="">All</button>
{retrievers.map((r: any) => (
<button class="lb-chip" data-ret={r.id}>{r.display_name ?? r.id}</button>
))}
</div>
</div>
</div>
</div>

{/* ── Filter card: Model + Method chips + Search ── */}
<div class="lb-filter-card" data-lb-filters>
<div class="lb-filter-row">
<div class="lb-filter-group" data-group="model">
{/* Row 2: LLM dropdown · Method dropdown · Search · legend */}
<div class="lb-ctrl-row">
<div class="lb-ctrl-grp">
<span class="lb-filter-label">LLM</span>
<button class="lb-chip active" data-value="">All</button>
{(models as any[]).map((m) => (
<button class="lb-chip" data-value={m.id}>{m.display ?? m.id}</button>
))}
<select id="lb-model-select" class="lb-ds-select">
<option value="">All LLMs</option>
{(models as any[]).map((m) => (
<option value={m.id}>{m.display ?? m.id}</option>
))}
</select>
</div>
<div class="lb-filter-group" data-group="method">
<div class="lb-divider"></div>
<div class="lb-ctrl-grp">
<span class="lb-filter-label">Method</span>
<button class="lb-chip active" data-value="">All</button>
{(methods as any[]).map((m) => (
<button class="lb-chip" data-value={m.id}>{m.display ?? m.display_name ?? m.id}</button>
))}
<select id="lb-method-select" class="lb-ds-select">
<option value="">All methods</option>
{(methods as any[]).map((m) => (
<option value={m.id}>{m.display ?? m.display_name ?? m.id}</option>
))}
</select>
</div>
</div>
<div class="lb-filter-row">
<div class="lb-divider"></div>
<div class="lb-search-wrap">
<div class="lb-search-input">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input id="lb-search" placeholder="Filter by method or LLM…" autocomplete="off" />
<input id="lb-search" placeholder="Filter…" autocomplete="off" />
</div>
<span class="lb-row-count">
<span id="lb-shown">0</span> / {matrixRows.length} configs · {overview.run_count} runs
<span id="lb-shown">0</span> / {matrixRows.length} · {overview.run_count} runs
</span>
</div>
<span class="lb-best-legend" style="margin-left:auto">
Expand Down Expand Up @@ -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 --------------------------------------------------------------
Expand Down
45 changes: 45 additions & 0 deletions reproducibility/site/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
10 changes: 8 additions & 2 deletions web/shared/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
];
---

Expand Down
Loading