leaderboard: fixed 4-sample gallery, auto-size iframe, center modal

Replace the gallery's interactive fixture picker with a fixed
comparison sheet: two generation + two editing samples, one Medium and
one Hard per task. Difficulty is chosen once from the Claude Opus 4.8
baseline's per-sample CAD scores (median = Medium, 20th percentile =
Hard) and frozen into FIXED_FIXTURES; the GUI no longer recomputes it
as the leaderboard evolves, trading a moving ground truth for a simple,
stable interface. Adds tools/pick_gallery_fixtures.py to regenerate the
constant.

Size the gallery iframe to its content (no more 90vh fixed box / nested
scrollbar) and pin the compare modal to the visible part of the iframe
so it opens centered in view instead of far below the fold.

Co-authored-by: Cursor <cursoragent@cursor.com>

app.py

@@ -793,9 +793,13 @@ def _gallery_iframe_html() -> str:
         rows, _render_proxy_url, _gt_proxy_url, _render_diff_proxy_url,
     )
     escaped = html.escape(doc, quote=True)
+    # The gallery JS (`fitIframe`) resizes this iframe to its own content so the
+    # page scrolls naturally in the parent (no oversized fixed box, no nested
+    # scrollbar). The inline height is only the pre-script fallback for the case
+    # where same-origin `frameElement` access is blocked.
     return (
         f'<iframe srcdoc="{escaped}" '
-        'style="width:100%; height:90vh; border:0; display:block;" '
+        'style="width:100%; height:700px; border:0; display:block;" '
         'title="CADGenBench gallery"></iframe>'
     )
 

gallery.py

@@ -17,27 +17,29 @@
 Builds a self-contained HTML document (its own CSS + JS) from the live
 submission rows. The Space serves it at ``/gallery`` and embeds it in
 the Gradio "Gallery" tab via an iframe, so the bespoke visual surface
-(sticky ground-truth row, fixture picker, turntable grid, report
-modal) lives in plain HTML/JS isolated from Gradio's styles rather
-than being forced into Gradio components.
-
-The page is data-driven: :func:`build_gallery_payload` shapes the
-top-10 verified rows + the fixture universe into a small JSON blob,
-which the page's JS renders. Render lookups are isolated behind the
-``renderFor`` / ``gtRenderFor`` JS hooks (mirroring the design brief),
-pointed at the cached render-proxy URLs the caller injects via the two
-resolvers:
+(sticky ground-truth row, turntable grid, report modal) lives in plain
+HTML/JS isolated from Gradio's styles rather than being forced into
+Gradio components.
+
+The page is intentionally simple: it shows a **fixed** set of four
+sample columns (see :data:`FIXED_FIXTURES`) for the top-10 verified
+rows. There is no fixture picker -- the columns are the same on every
+visit so the page reads like a printed comparison sheet rather than an
+interactive matrix. :func:`build_gallery_payload` shapes the rows +
+the fixed fixtures into a small JSON blob the page's JS renders. Render
+lookups are isolated behind the ``renderFor`` / ``gtRenderFor`` JS
+hooks (mirroring the design brief), pointed at the cached render-proxy
+URLs the caller injects via the two resolvers:
 
 - ``renderFor(sub, fixtureId)``  -> ``/render/<id>/<fixture>.webp`` (or
   ``null`` when the per-fixture status is invalid/missing, which draws
   the dashed "invalid generation" cell).
 - ``gtRenderFor(fixtureId)``     -> ``/gt-render/<fixture>.webp``.
 
-GIFs are lazy-loaded by the browser, so only the ~33 on-screen
-tiles are fetched and CDN/browser caching makes fixture-swaps and
-repeat visits essentially free. This requires the Space to be
-**public** (HF's edge 404s in-browser fetches to our custom routes
-while private).
+GIFs are lazy-loaded by the browser, so only the on-screen tiles are
+fetched and CDN/browser caching makes repeat visits essentially free.
+This requires the Space to be **public** (HF's edge 404s in-browser
+fetches to our custom routes while private).
 
 Turntable clicks open a GT-vs-output compare modal that points at the
 existing per-submission detail/report view.
@@ -53,10 +55,24 @@ from leaderboard import _report_relative_url
 # tab, not here.
 GALLERY_TOP_N = 10
 
-# Default number of fixture columns the picker opens with, capped at the
-# size of the available fixture universe. Also the hard cap on the
-# picker (the matrix only stays comparable with a small column count).
-DEFAULT_FIXTURE_COLUMNS = 3
+# Fixed gallery columns: two generation + two editing samples, one
+# "Medium" and one "Hard" per task. Difficulty is deliberately **not**
+# dynamic. It was chosen once from the Claude Opus 4.8 baseline
+# (submission ``huggingface_claude-opus-4-8-hf-baseline-with-build12...``)
+# by taking, within each task type's *valid* per-fixture CAD scores
+# sorted ascending, the 50th-percentile fixture as "Medium" and the
+# 20th-percentile fixture (i.e. 80% of fixtures score higher, so it is
+# harder) as "Hard". See ``tools/pick_gallery_fixtures.py`` to recompute.
+#
+# The GUI does NOT refresh this selection as the leaderboard evolves:
+# what counts as medium/hard may drift with new models, but a stable,
+# simple comparison sheet is worth more here than a moving ground truth.
+FIXED_FIXTURES = [
+    {"id": "108", "task": "generation", "difficulty": "Medium"},
+    {"id": "111", "task": "generation", "difficulty": "Hard"},
+    {"id": "246", "task": "editing", "difficulty": "Medium"},
+    {"id": "211", "task": "editing", "difficulty": "Hard"},
+]
 
 
 def _verified_rows(rows: list[dict]) -> list[dict]:
@@ -78,30 +94,13 @@ def _verified_rows(rows: list[dict]) -> list[dict]:
     return verified[:GALLERY_TOP_N]
 
 
-def _fixture_universe(rows: list[dict]) -> list[dict]:
-    """Ordered fixture list discovered from the rows' ``per_fixture_scores``.
-
-    The fixture set is never hardcoded (it shifts as parts get added /
-    removed): it is the union of every ``per_fixture_scores`` key across
-    the verified rows, sorted for a stable column order. ``task_type``
-    is carried along (first non-null wins) as the small chip tag, since
-    difficulty tags are not available in the data.
-    """
-    task_by_fixture: dict[str, str] = {}
-    for r in rows:
-        pfs = r.get("per_fixture_scores") or {}
-        for fixture_id, fx in pfs.items():
-            if fixture_id not in task_by_fixture:
-                task_by_fixture[fixture_id] = (fx or {}).get("task_type") or ""
-    return [
-        {"id": fid, "name": fid, "task": task_by_fixture[fid]}
-        for fid in sorted(task_by_fixture)
-    ]
-
-
-def _sub_payload(row: dict, render_resolver, diff_resolver) -> dict:
+def _sub_payload(row: dict, fixture_ids: list[str], render_resolver, diff_resolver) -> dict:
     """Project one verified row into the compact shape the page JS needs.
 
+    Only the fixed gallery columns (``fixture_ids``) are projected; a
+    fixture the row never scored shows up as a ``missing`` cell (dashed
+    tile) rather than being dropped.
+
     ``render_resolver(submission_id, fixture_id)`` returns the cached
     proxy URL for a *valid* fixture, or ``None``. Invalid/missing
     fixtures carry ``img: null`` so the page draws the dashed cell;
@@ -119,8 +118,8 @@ def _sub_payload(row: dict, render_resolver, diff_resolver) -> dict:
     pfs = row.get("per_fixture_scores") or {}
     sid = row.get("submission_id") or ""
     cells: dict[str, dict] = {}
-    for fid, fx in pfs.items():
-        fx = fx or {}
+    for fid in fixture_ids:
+        fx = pfs.get(fid) or {}
         status = fx.get("status") or "missing"
         valid = status == "valid"
         is_editing = (fx.get("task_type") or "") == "editing"
@@ -154,8 +153,10 @@ def _sub_payload(row: dict, render_resolver, diff_resolver) -> dict:
 def build_gallery_payload(rows: list[dict], render_resolver, gt_resolver, diff_resolver) -> dict:
     """Shape live rows into the JSON the gallery page renders from.
 
-    Image sources are injected via resolvers so this module stays
-    agnostic to how the cached render URLs are constructed:
+    The fixture columns are the fixed :data:`FIXED_FIXTURES` set (no
+    picker), so the page is the same every visit. Image sources are
+    injected via resolvers so this module stays agnostic to how the
+    cached render URLs are constructed:
 
     - ``render_resolver(submission_id, fixture_id) -> str | None`` (plain
       candidate turntable; backs the modal and non-editing grid tiles)
@@ -163,18 +164,23 @@ def build_gallery_payload(rows: list[dict], render_resolver, gt_resolver, diff_r
       turntable; backs the grid tile for editing fixtures)
     - ``gt_resolver(fixture_id) -> str | None``
 
-    Returns ``{"fixtures", "subs", "selected", "gtImg"}`` where
-    ``selected`` is the default set of (up to three) fixture columns and
-    ``gtImg`` maps each fixture to its ground-truth image source.
+    Returns ``{"fixtures", "subs", "gtImg"}`` where ``fixtures`` carries
+    the fixed columns (id + task + difficulty) and ``gtImg`` maps each
+    fixture to its ground-truth image source.
     """
     verified = _verified_rows(rows)
-    fixtures = _fixture_universe(verified)
-    selected = [f["id"] for f in fixtures[:DEFAULT_FIXTURE_COLUMNS]]
-    gt_img = {f["id"]: gt_resolver(f["id"]) for f in fixtures}
+    fixtures = [
+        {"id": f["id"], "name": f["id"], "task": f["task"], "difficulty": f["difficulty"]}
+        for f in FIXED_FIXTURES
+    ]
+    fixture_ids = [f["id"] for f in fixtures]
+    gt_img = {fid: gt_resolver(fid) for fid in fixture_ids}
     return {
         "fixtures": fixtures,
-        "subs": [_sub_payload(r, render_resolver, diff_resolver) for r in verified],
-        "selected": selected,
+        "subs": [
+            _sub_payload(r, fixture_ids, render_resolver, diff_resolver)
+            for r in verified
+        ],
         "gtImg": gt_img,
     }
 
@@ -230,65 +236,8 @@ body {
 }
 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
 
-.controls {
-  background: var(--panel); border: 1px solid var(--line);
-  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
-}
-.controls .label {
-  font-size: 12px; font-weight: 700; text-transform: uppercase;
-  letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 12px;
-}
-.picker-help { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-size: 12px; }
-
-/* Compact picker: current picks as removable pills + Add + Reset */
-.picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.pills { display: flex; gap: 8px; flex-wrap: wrap; }
-.pill {
-  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
-  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent);
-  padding: 8px 8px 8px 12px; border-radius: 10px; font-family: inherit;
-}
-.pill .pgroup { font-family: var(--mono); font-size: 10px; color: var(--accent); opacity: .7; }
-.pill .pname { font-family: var(--mono); font-weight: 700; }
-.pill .premove { cursor: pointer; border: none; background: rgba(67,56,202,.12); color: var(--accent); width: 18px; height: 18px; border-radius: 5px; font-size: 13px; line-height: 1; display: grid; place-items: center; font-family: inherit; }
-.pill .premove:hover { background: var(--accent); color: #fff; }
-
-.picker-anchor { position: relative; }
-.add-fixture {
-  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-soft);
-  background: #fafbfc; border: 1px dashed var(--line-strong); padding: 9px 14px; border-radius: 10px;
-  transition: all .14s ease;
-}
-.add-fixture:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
-.add-fixture:disabled { opacity: .45; cursor: not-allowed; }
-.reset-fixtures {
-  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--ink-faint);
-  background: none; border: none; padding: 9px 6px; text-decoration: underline; text-underline-offset: 2px;
-}
-.reset-fixtures:hover { color: var(--accent); }
-
-/* Searchable grouped dropdown over all fixtures */
-.popover {
-  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 340px;
-  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
-  box-shadow: 0 16px 40px rgba(20,22,28,.18); overflow: hidden;
-}
-.popover[hidden] { display: none; }
-.popover-search { width: 100%; border: none; border-bottom: 1px solid var(--line); padding: 13px 15px; font-family: inherit; font-size: 14px; outline: none; }
-.popover-search:focus { background: #fbfbff; }
-.popover-list { max-height: 300px; overflow-y: auto; padding: 6px; }
-.popover-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 10px 10px 5px; position: sticky; top: 0; background: var(--panel); }
-.popover-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
-.popover-item:hover { background: var(--accent-soft); }
-.popover-item.is-selected { color: var(--accent); font-weight: 600; }
-.popover-item.is-selected::after { content: '\\2713'; margin-left: auto; color: var(--accent); }
-.popover-item .itask { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.05); text-transform: uppercase; }
-.popover-item .iname { font-family: var(--mono); font-weight: 700; }
-.popover-empty { padding: 18px; text-align: center; color: var(--ink-faint); font-size: 13px; }
-.popover-cap { padding: 10px 12px; font-size: 11.5px; color: #b45309; background: #fdf3e7; border-top: 1px solid var(--line); }
-
 .section-label {
-  display: flex; align-items: center; gap: 10px; margin: 28px 0 14px;
+  display: flex; align-items: center; gap: 10px; margin: 4px 0 6px;
   font-size: 14px; font-weight: 700; color: var(--accent);
   text-transform: uppercase; letter-spacing: .05em;
 }
@@ -298,11 +247,13 @@ body {
   letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
 }
 .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.section-caption { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
+.section-caption b { color: var(--ink); font-weight: 600; }
 
 .gallery { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
 .grid-head, .grow {
   display: grid;
-  grid-template-columns: 52px minmax(220px, 1.4fr) 170px repeat(var(--ncol, 3), minmax(150px, 1fr));
+  grid-template-columns: 52px minmax(200px, 1.3fr) 160px repeat(var(--ncol, 4), minmax(140px, 1fr));
   align-items: stretch;
 }
 .grid-head {
@@ -312,9 +263,16 @@ body {
   border-radius: var(--radius) var(--radius) 0 0;
 }
 .grid-head > div { padding: 13px 14px; display: flex; align-items: center; }
-.grid-head .fix-h { flex-direction: column; align-items: flex-start; gap: 2px; }
-.grid-head .fix-h .fname { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; }
-.grid-head .fix-h .ftask { font-size: 9.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
+.grid-head .fix-h { flex-direction: column; align-items: flex-start; gap: 3px; }
+.grid-head .fix-h .ftask { font-size: 11px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 700; }
+.grid-head .fix-h .ftop { display: flex; align-items: center; gap: 6px; }
+.grid-head .fix-h .fname { font-size: 9.5px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-family: var(--mono); font-weight: 600; }
+.grid-head .fix-h .fdiff {
+  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
+  padding: 2px 7px; border-radius: 999px;
+}
+.fdiff.diff-medium { color: #b45309; background: #fdf3e7; }
+.fdiff.diff-hard { color: var(--bad); background: var(--bad-soft); }
 
 .grow.gt-row {
   background: var(--gt-soft); border-bottom: 2px solid var(--gt);
@@ -411,24 +369,15 @@ a.sub-name:hover { color: var(--accent); text-decoration: underline; }
 
 _BODY = """
 <div class="wrap">
-  <div class="controls">
-    <div class="label">Samples shown <span class="picker-help">- pick up to 3 to compare across all models (changes columns globally)</span></div>
-    <div class="picker-row">
-      <div class="pills" id="pills"></div>
-      <div class="picker-anchor">
-        <button class="add-fixture" id="addFixtureBtn">+ Add sample</button>
-        <div class="popover" id="popover" hidden>
-          <input type="text" class="popover-search" id="popoverSearch" placeholder="Search samples..." autocomplete="off">
-          <div class="popover-list" id="popoverList"></div>
-        </div>
-      </div>
-      <button class="reset-fixtures" id="resetFixtures" title="Reset to the default comparison set">Reset</button>
-    </div>
-  </div>
   <div class="section-label">
     Validated leaderboard - Top 10
     <span class="verified-pill"><span class="dot"></span>verified only</span>
   </div>
+  <p class="section-caption">
+    A fixed comparison sheet: <b>two generation</b> and <b>two editing</b> samples,
+    one <b>Medium</b> and one <b>Hard</b> per task. Difficulty is fixed (picked from the
+    Claude Opus 4.8 baseline's per-sample scores), so every visit shows the same columns.
+  </p>
   <div class="gallery" id="gallery">
     <div class="grid-head" id="gridHead"></div>
   </div>
@@ -454,11 +403,10 @@ _BODY = """
 # ---------------------------------------------------------------------------
 
 _JS = """
-const DATA = window.GALLERY_DATA || {fixtures: [], subs: [], selected: [], gtImg: {}};
+const DATA = window.GALLERY_DATA || {fixtures: [], subs: [], gtImg: {}};
+// Fixed columns: the server hands us exactly the gallery's sample set, in
+// order, so there is no picker and no client-side selection state.
 const FIXTURES = DATA.fixtures || [];
-const MAX_FIXTURES = 3;
-const DEFAULT_FIXTURES = (DATA.selected || []).slice();
-let selected = DEFAULT_FIXTURES.slice();
 
 // --- Render hooks. ---------------------------------------------------------
 // The image sources are cached render-proxy URLs injected by the server, so
@@ -485,140 +433,17 @@ function pct(x) { return (x === null || x === undefined) ? '-' : Math.round(Numb
 function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
 function fixtureMeta(id) { return FIXTURES.find(f => f.id === id); }
 function groupLabel(task) { return task ? (task.charAt(0).toUpperCase() + task.slice(1)) : 'Other'; }
-function groupOf(f) { return groupLabel(f ? f.task : ''); }
-
-// Distinct group labels in fixture order (e.g. Generation, Editing).
-const GROUPS = (() => {
-  const seen = [];
-  FIXTURES.forEach(f => { const g = groupOf(f); if (!seen.includes(g)) seen.push(g); });
-  return seen;
-})();
-
-// --- URL persistence: ?fixtures=a,b,c -------------------------------------
-// Wrapped in try/catch: history.replaceState and the URL read both throw in
-// sandboxed iframe contexts (this caused an "Uncaught Error: Script error.").
-function loadSelectedFromURL() {
-  try {
-    const p = new URLSearchParams(location.search).get('fixtures');
-    if (!p) return;
-    const ids = p.split(',').map(s => s.trim())
-      .filter(id => FIXTURES.some(f => f.id === id)).slice(0, MAX_FIXTURES);
-    if (ids.length) selected = ids;
-  } catch (e) { /* sandboxed context -> keep defaults */ }
-}
-function syncURL() {
-  try {
-    const u = new URL(location.href);
-    u.searchParams.set('fixtures', selected.join(','));
-    history.replaceState(null, '', u);
-  } catch (e) { /* sandboxed/cross-origin context -> URL persistence no-ops */ }
-}
-
-// --- Fixture picker: pills + searchable grouped dropdown -------------------
-function renderPills() {
-  const wrap = document.getElementById('pills');
-  if (!selected.length) { wrap.innerHTML = ''; return; }
-  wrap.innerHTML = selected.map(id => {
-    const f = fixtureMeta(id);
-    const grp = (f && f.task) ? '<span class="pgroup">' + esc(groupOf(f)) + '</span>' : '';
-    return '<span class="pill">' + grp
-      + '<span class="pname">' + esc(f ? f.name : id) + '</span>'
-      + '<button class="premove" data-remove="' + esc(id) + '" title="Remove" aria-label="Remove ' + esc(id) + '">\\u00d7</button>'
-      + '</span>';
-  }).join('');
-  wrap.querySelectorAll('.premove').forEach(b => {
-    b.onclick = () => {
-      if (selected.length <= 1) return;          // keep at least 1 column
-      selected = selected.filter(x => x !== b.dataset.remove);
-      refreshPicker(); buildGallery(); syncURL();
-    };
-  });
-}
-
-let popoverQuery = '';
-function renderPopoverList() {
-  const list = document.getElementById('popoverList');
-  const q = popoverQuery.trim().toLowerCase();
-  const match = f => !q || f.name.toLowerCase().includes(q)
-    || groupOf(f).toLowerCase().includes(q) || (f.task || '').toLowerCase().includes(q);
-  let html = '';
-  GROUPS.forEach(g => {
-    const items = FIXTURES.filter(f => groupOf(f) === g && match(f));
-    if (!items.length) return;
-    html += '<div class="popover-group">' + esc(g) + '</div>';
-    html += items.map(f => {
-      const sel = selected.includes(f.id);
-      const tag = f.task ? '<span class="itask">' + esc(f.task) + '</span>' : '';
-      return '<div class="popover-item ' + (sel ? 'is-selected' : '') + '" data-pick="' + esc(f.id) + '">'
-        + tag + '<span class="iname">' + esc(f.name) + '</span></div>';
-    }).join('');
-  });
-  if (!html) html = '<div class="popover-empty">No samples match \\u201c' + esc(popoverQuery) + '\\u201d.</div>';
-  list.innerHTML = html;
-  // At the cap, show a note rather than silently dropping a pick.
-  const existingCap = document.getElementById('popoverCap');
-  if (existingCap) existingCap.remove();
-  if (selected.length >= MAX_FIXTURES) {
-    list.insertAdjacentHTML('afterend',
-      '<div class="popover-cap" id="popoverCap">Max ' + MAX_FIXTURES + ' samples - remove one to add another.</div>');
-  }
-  list.querySelectorAll('.popover-item').forEach(it => {
-    it.onclick = () => {
-      const id = it.dataset.pick;
-      if (selected.includes(id)) {
-        if (selected.length <= 1) return;        // keep at least 1
-        selected = selected.filter(x => x !== id);
-      } else {
-        if (selected.length >= MAX_FIXTURES) return; // hard cap; user removes to add
-        selected.push(id);
-      }
-      refreshPicker(); buildGallery(); syncURL();
-    };
-  });
-}
-
-function refreshPicker() {
-  renderPills();
-  renderPopoverList();
-  const add = document.getElementById('addFixtureBtn');
-  if (add) add.disabled = !FIXTURES.length;
-}
-
-function openPopover() {
-  const pop = document.getElementById('popover');
-  pop.hidden = false;
-  popoverQuery = '';
-  document.getElementById('popoverSearch').value = '';
-  renderPopoverList();
-  document.getElementById('popoverSearch').focus();
-}
-function closePopover() { document.getElementById('popover').hidden = true; }
-
-function wirePicker() {
-  document.getElementById('addFixtureBtn').onclick = (e) => {
-    e.stopPropagation();
-    const pop = document.getElementById('popover');
-    pop.hidden ? openPopover() : closePopover();
-  };
-  document.getElementById('popoverSearch').oninput = (e) => { popoverQuery = e.target.value; renderPopoverList(); };
-  document.getElementById('resetFixtures').onclick = () => {
-    selected = DEFAULT_FIXTURES.slice(); refreshPicker(); buildGallery(); syncURL(); closePopover();
-  };
-  // click-outside closes the popover
-  document.addEventListener('click', (e) => {
-    const anchor = document.querySelector('.picker-anchor');
-    if (anchor && !anchor.contains(e.target)) closePopover();
-  });
-}
 
 // --- Gallery render -------------------------------------------------------
 function buildHead() {
   const head = document.getElementById('gridHead');
   let h = '<div>#</div><div>Submission</div><div>Score</div>';
-  selected.forEach(id => {
-    const f = fixtureMeta(id);
-    const task = f && f.task ? '<span class="ftask">' + esc(f.task) + '</span>' : '';
-    h += '<div class="fix-h"><span class="fname">' + esc(f ? f.name : id) + '</span>' + task + '</div>';
+  FIXTURES.forEach(f => {
+    const diff = f.difficulty
+      ? '<span class="fdiff diff-' + esc((f.difficulty || '').toLowerCase()) + '">' + esc(f.difficulty) + '</span>'
+      : '';
+    h += '<div class="fix-h"><div class="ftop"><span class="ftask">' + esc(groupLabel(f.task)) + '</span>' + diff + '</div>'
+      + '<span class="fname">#' + esc(f.name) + '</span></div>';
   });
   head.innerHTML = h;
 }
@@ -628,6 +453,7 @@ function buildHead() {
 function imgFail(img) {
   const cell = img.closest('.thumb-cell');
   if (cell) cell.innerHTML = '<div class="thumb failed"><span class="ftag">invalid<br>generation</span></div>';
+  fitIframe();
 }
 
 function thumbHTML(url, attrs, clickable) {
@@ -636,13 +462,13 @@ function thumbHTML(url, attrs, clickable) {
   }
   const hint = clickable ? '<span class="open-hint">open</span>' : '';
   return '<div class="thumb" ' + attrs + '>'
-    + '<img loading="lazy" decoding="async" src="' + url + '" alt="" onerror="imgFail(this)">'
+    + '<img loading="lazy" decoding="async" src="' + url + '" alt="" onload="fitIframe()" onerror="imgFail(this)">'
     + hint + '</div>';
 }
 
 function buildGallery() {
   const g = document.getElementById('gallery');
-  g.style.setProperty('--ncol', Math.max(selected.length, 1));
+  g.style.setProperty('--ncol', Math.max(FIXTURES.length, 1));
   buildHead();
   g.querySelectorAll('.grow').forEach(n => n.remove());
 
@@ -663,8 +489,8 @@ function buildGallery() {
   let gtCells = '<div class="rank">&#9733;</div>'
     + '<div class="ident">Ground truth<span class="gt-sub">reference geometry</span></div>'
     + '<div class="score-cell"><span class="agg">1.000</span></div>';
-  selected.forEach(id => {
-    gtCells += '<div class="thumb-cell">' + thumbHTML(gtRenderFor(id), 'data-gt="' + esc(id) + '"', false) + '</div>';
+  FIXTURES.forEach(f => {
+    gtCells += '<div class="thumb-cell">' + thumbHTML(gtRenderFor(f.id), 'data-gt="' + esc(f.id) + '"', false) + '</div>';
   });
   gt.innerHTML = gtCells;
   g.appendChild(gt);
@@ -689,8 +515,8 @@ function buildGallery() {
       + '<span class="sb"><span class="sb-l">Edit</span><span class="sb-v">' + fmt(s.edit, 3) + '</span></span>'
       + '</div>'
       + '<span class="validity ' + imperfect + '">' + pct(s.validity) + ' <span class="vlabel">valid</span></span></div>';
-    selected.forEach(id => {
-      cells += '<div class="thumb-cell">' + thumbHTML(gridRenderFor(s, id), 'data-sub="' + esc(s.id) + '" data-fix="' + esc(id) + '"', true) + '</div>';
+    FIXTURES.forEach(f => {
+      cells += '<div class="thumb-cell">' + thumbHTML(gridRenderFor(s, f.id), 'data-sub="' + esc(s.id) + '" data-fix="' + esc(f.id) + '"', true) + '</div>';
     });
     row.innerHTML = cells;
     g.appendChild(row);
@@ -710,7 +536,11 @@ function wireGallery() {
 }
 
 function openModal(fxId, sub) {
-  document.getElementById('modalTitle').textContent = fxId;
+  const f = fixtureMeta(fxId);
+  const title = f
+    ? groupLabel(f.task) + (f.difficulty ? ' \\u00b7 ' + f.difficulty : '') + ' (#' + fxId + ')'
+    : fxId;
+  document.getElementById('modalTitle').textContent = title;
   document.getElementById('modalSub').textContent = sub.name;
   const gt = gtRenderFor(fxId);
   const out = renderFor(sub, fxId);
@@ -729,26 +559,93 @@ function openModal(fxId, sub) {
   document.getElementById('modalNote').innerHTML =
     'CAD score for this sample: <b>' + cad + '</b>. The full per-sample report '
     + '(shape similarity, interface, topology + 3D view) opens from the report viewer.';
-  document.getElementById('modalBack').classList.add('show');
+  const back = document.getElementById('modalBack');
+  back.classList.add('show');
+  positionModalToView();
+  attachModalViewSync();
 }
 function closeModal() {
   document.getElementById('modalBack').classList.remove('show');
+  detachModalViewSync();
 }
 document.getElementById('modalClose').onclick = closeModal;
 document.getElementById('modalBack').onclick = (e) => { if (e.target.id === 'modalBack') closeModal(); };
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
 
+// --- Modal positioning ----------------------------------------------------
+// The page lives in a srcdoc iframe sized to its full content (see fitIframe),
+// so a plain `position: fixed` overlay would anchor to the iframe's full
+// height and land far below the fold. Instead we pin the overlay to the part
+// of the iframe currently visible inside the parent viewport. srcdoc iframes
+// are same-origin with the embedding document, so frameElement / parent are
+// readable; everything is wrapped in try/catch and falls back to a fixed,
+// viewport-centred overlay if that access is ever blocked.
+function positionModalToView() {
+  const back = document.getElementById('modalBack');
+  try {
+    const fe = window.frameElement;
+    const pv = window.parent;
+    if (fe && pv) {
+      const rect = fe.getBoundingClientRect();        // iframe box in parent viewport
+      const docH = document.documentElement.scrollHeight;
+      const visTop = Math.max(0, -rect.top);          // iframe-doc y at top of view
+      const visBottom = Math.min(docH, -rect.top + pv.innerHeight);
+      if (visBottom > visTop) {
+        back.style.position = 'absolute';
+        back.style.left = '0';
+        back.style.right = '0';
+        back.style.bottom = 'auto';
+        back.style.top = visTop + 'px';
+        back.style.height = (visBottom - visTop) + 'px';
+        return;
+      }
+    }
+  } catch (e) { /* cross-origin / sandboxed -> fixed fallback below */ }
+  back.style.position = 'fixed';
+  back.style.top = '0'; back.style.left = '0';
+  back.style.right = '0'; back.style.bottom = '0';
+  back.style.height = '';
+}
+
+let _modalSync = null;
+function attachModalViewSync() {
+  try {
+    const pv = window.parent;
+    _modalSync = () => positionModalToView();
+    pv.addEventListener('scroll', _modalSync, { passive: true });
+    pv.addEventListener('resize', _modalSync);
+  } catch (e) { _modalSync = null; }
+}
+function detachModalViewSync() {
+  try {
+    const pv = window.parent;
+    if (_modalSync) {
+      pv.removeEventListener('scroll', _modalSync);
+      pv.removeEventListener('resize', _modalSync);
+    }
+  } catch (e) { /* ignore */ }
+  _modalSync = null;
+}
+
 // Pin the GT row exactly beneath the sticky column header.
 function syncHeadHeight() {
   const head = document.getElementById('gridHead');
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
-loadSelectedFromURL();
-wirePicker();
-refreshPicker();
+// Size the iframe to its content so the page scrolls naturally in the parent
+// (no oversized fixed-height box, no nested scrollbar). No-ops if frameElement
+// is unreadable (the wrapper then keeps its CSS fallback height).
+function fitIframe() {
+  try {
+    const fe = window.frameElement;
+    if (fe) fe.style.height = Math.ceil(document.body.scrollHeight) + 'px';
+  } catch (e) { /* sandboxed -> keep fallback height */ }
+}
+
 buildGallery();
-syncURL();
-window.addEventListener('resize', syncHeadHeight);
-if (document.fonts && document.fonts.ready) document.fonts.ready.then(syncHeadHeight);
+fitIframe();
+window.addEventListener('resize', () => { syncHeadHeight(); fitIframe(); });
+if (window.ResizeObserver) new ResizeObserver(fitIframe).observe(document.body);
+if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => { syncHeadHeight(); fitIframe(); });
 """

tools/pick_gallery_fixtures.py

@@ -0,0 +1,125 @@
+"""Recompute the gallery's fixed Medium/Hard sample columns.
+
+The gallery shows a **fixed** four-column comparison sheet (two
+generation + two editing samples, one Medium and one Hard per task);
+see ``gallery.FIXED_FIXTURES``. The difficulty split is picked once from
+a single reference submission's per-fixture CAD scores and then frozen
+into ``FIXED_FIXTURES`` -- the live page never recomputes it.
+
+This script reproduces that pick so the constant can be regenerated when
+the reference model changes. Within each task type, over the reference
+submission's *valid* fixtures sorted by score ascending, it takes the
+50th-percentile fixture as "Medium" and the 20th-percentile fixture
+(80% of fixtures score higher, so it is harder) as "Hard".
+
+Usage::
+
+    # From a local results.jsonl:
+    python cadgenbench-leaderboard/tools/pick_gallery_fixtures.py path/to/results.jsonl
+
+    # Or pull the live file straight from the Hub (needs a read token):
+    python cadgenbench-leaderboard/tools/pick_gallery_fixtures.py \\
+        --repo HuggingAI4Engineering/cadgenbench-submissions
+
+By default it selects the Claude Opus 4.8 baseline; override with
+``--submission-id`` or ``--name-contains``.
+"""
+from __future__ import annotations
+
+import argparse
+import json
+import sys
+import urllib.request
+from collections import defaultdict
+
+DEFAULT_NAME_CONTAINS = "Claude Opus 4.8"
+# Score-distribution percentiles: Medium = median, Hard = low tail.
+MEDIUM_PCT = 0.50
+HARD_PCT = 0.20
+
+
+def _load_rows(source: str, *, is_repo: bool, token: str | None) -> list[dict]:
+    if is_repo:
+        url = f"https://huggingface.co/datasets/{source}/resolve/main/results.jsonl"
+        req = urllib.request.Request(url, headers={"Cache-Control": "no-cache"})
+        if token:
+            req.add_header("Authorization", f"Bearer {token}")
+        with urllib.request.urlopen(req, timeout=30) as resp:  # noqa: S310
+            text = resp.read().decode("utf-8")
+    else:
+        with open(source, encoding="utf-8") as fh:
+            text = fh.read()
+    return [json.loads(line) for line in text.splitlines() if line.strip()]
+
+
+def _pick_reference(rows: list[dict], args: argparse.Namespace) -> dict:
+    if args.submission_id:
+        for r in rows:
+            if r.get("submission_id") == args.submission_id:
+                return r
+        sys.exit(f"No submission with id {args.submission_id!r}")
+    needle = (args.name_contains or DEFAULT_NAME_CONTAINS).lower()
+    matches = [r for r in rows if needle in (r.get("submission_name") or "").lower()]
+    if not matches:
+        sys.exit(f"No submission name contains {needle!r}")
+    if len(matches) > 1:
+        names = ", ".join(repr(r.get("submission_name")) for r in matches)
+        sys.exit(f"Ambiguous --name-contains {needle!r}: {names}")
+    return matches[0]
+
+
+def _pick_at(sorted_scores: list[tuple[float, str]], pct: float) -> tuple[float, str]:
+    """Nearest-rank pick at ``pct`` of an ascending score list."""
+    idx = round(pct * (len(sorted_scores) - 1))
+    return sorted_scores[idx]
+
+
+def main() -> int:
+    ap = argparse.ArgumentParser(description=__doc__)
+    ap.add_argument("source", nargs="?", help="Path to a local results.jsonl")
+    ap.add_argument("--repo", help="Hub dataset repo id to pull results.jsonl from")
+    ap.add_argument("--token", help="HF read token (for a private --repo)")
+    ap.add_argument("--submission-id", help="Reference submission id (exact)")
+    ap.add_argument(
+        "--name-contains",
+        help=f"Reference by name substring (default: {DEFAULT_NAME_CONTAINS!r})",
+    )
+    args = ap.parse_args()
+
+    if bool(args.source) == bool(args.repo):
+        ap.error("Pass exactly one of a local results.jsonl path or --repo.")
+    rows = _load_rows(
+        args.repo or args.source, is_repo=bool(args.repo), token=args.token,
+    )
+    ref = _pick_reference(rows, args)
+    print(f"Reference: {ref.get('submission_name')!r} [{ref.get('submission_id')}]\n")
+
+    by_task: dict[str, list[tuple[float, str]]] = defaultdict(list)
+    for fid, fx in (ref.get("per_fixture_scores") or {}).items():
+        fx = fx or {}
+        if fx.get("status") == "valid" and fx.get("cad_score") is not None:
+            by_task[fx.get("task_type") or "?"].append((float(fx["cad_score"]), fid))
+
+    snippet = []
+    for task in ("generation", "editing"):
+        items = sorted(by_task.get(task, []))
+        if not items:
+            print(f"{task}: no valid fixtures")
+            continue
+        med = _pick_at(items, MEDIUM_PCT)
+        hard = _pick_at(items, HARD_PCT)
+        print(f"{task}: {len(items)} valid fixtures")
+        print(f"   Medium (p{int(MEDIUM_PCT * 100)}): #{med[1]}  score={med[0]:.4f}")
+        print(f"   Hard   (p{int(HARD_PCT * 100)}): #{hard[1]}  score={hard[0]:.4f}")
+        snippet.append((task, "Medium", med[1]))
+        snippet.append((task, "Hard", hard[1]))
+
+    print("\nFIXED_FIXTURES = [")
+    for task, diff, fid in snippet:
+        print(f'    {{"id": "{fid}", "task": "{task}", "difficulty": "{diff}"}},')
+    print("]")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())