size the invited tab to its content and line the tables up (#19)

- size the invited tab to its content and line the tables up (aba62528278072637aea5c14935c772c57695ef9)

app.py

@@ -964,8 +964,12 @@ def _invited_html():
     who is invited is worse than a slow page.
     """
     doc = invited.document(config.HF_TOKEN)
+    # No scrolling="no": the document self-sizes, but if that script ever fails
+    # to run the frame keeps its default height, and suppressing the scrollbar
+    # turns that into silent truncation. That is exactly how this shipped the
+    # first time -- the page was cut off partway down the second of six tables
+    # with no way to reach the rest. Degrade to a scrollbar instead.
     return (f'<iframe title="invited teams" srcdoc="{html.escape(doc)}" '
-            f'scrolling="no" '
             f'style="width:100%;border:0;display:block;min-height:400px"></iframe>')
 
 

invited.py

@@ -22,20 +22,75 @@ import config
 # shortlist cannot silently reorder what participants read.
 _ORDER = [(t, d) for t in config.TRACKS for d in config.DIVISIONS]
 
+# Deliberately the same variables, fonts and border colours as results._DOC_CSS,
+# because this tab sits beside the two boards and a different table style reads
+# as a different system rather than a third view of the same data.
 CSS = """
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
-     margin:0;color:#1c1e21;font-size:14px}
-h3{font-size:1rem;margin:1.4rem 0 .3rem}
-p.note{color:#65676b;font-size:.87rem;margin:.2rem 0 1rem}
-table{border-collapse:collapse;margin:.3rem 0 1rem;font-size:.87rem}
-th,td{border:1px solid #dcdee1;padding:.3rem .6rem;text-align:left;white-space:nowrap}
-th{background:#f2f3f5;font-weight:600}
-td.num{text-align:right;font-variant-numeric:tabular-nums}
-td.team{max-width:20rem;white-space:normal;overflow-wrap:anywhere;font-weight:600}
-.selfrep{color:#65676b;font-weight:400;font-size:.85em}
-.empty{color:#65676b;font-style:italic}
+:root{--lb-border:#e4e1f0;--lb-text:#1b1830;--lb-sec:#6a6585;--lb-faint:#9b96b3;
+--lb-head:#f6f5fc;--lb-hover:#faf9fe;
+--lb-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
+--lb-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{font-family:var(--lb-sans);color:var(--lb-text);background:transparent;
+     font-size:14px;padding:2px 0 12px}
+h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:1.5rem 0 .5rem;
+   padding-bottom:.4rem;border-bottom:2px solid var(--lb-border)}
+p.note{color:var(--lb-sec);font-size:.87rem;margin:.2rem 0 1.1rem;line-height:1.5}
+/* Fixed layout + a shared colgroup is what makes all six tables line up. With
+   auto layout each table sizes to its own longest cell, so the columns stepped
+   left and right between sub-tracks and it read as six unrelated tables. */
+table{border-collapse:collapse;width:100%;table-layout:fixed;
+      margin:.3rem 0 1.2rem;font-size:.87rem}
+th,td{border:1px solid var(--lb-border);padding:.4rem .6rem;text-align:left;
+      vertical-align:top}
+th{background:var(--lb-head);font-weight:600;white-space:nowrap}
+tbody tr:hover{background:var(--lb-hover)}
+/* Team, account and model WRAP: model_name is free text from participants and
+   reaches 80+ chars, so nowrap here is what pushed the table off the page. */
+td.team,td.acct,td.model{white-space:normal;overflow-wrap:anywhere}
+td.team{font-weight:600}
+td.acct,td.model{color:var(--lb-sec)}
+td.num,th.num{text-align:right;white-space:nowrap;
+              font-variant-numeric:tabular-nums;font-family:var(--lb-mono)}
+td.rank{text-align:right;color:var(--lb-faint);font-family:var(--lb-mono)}
+.selfrep{color:var(--lb-sec);font-weight:400;font-size:.85em}
+.empty{color:var(--lb-sec);font-style:italic}
 """
 
+# One colgroup for every table, so a column is in the same place in all six.
+COLS = ("<colgroup><col style='width:2.8rem'><col style='width:20%'>"
+        "<col style='width:15%'><col><col style='width:8.5rem'>"
+        "<col style='width:7rem'></colgroup>")
+
+# Same self-sizing contract as results.board_document(). Two things it must get
+# right, both learned there: measure the CONTENT wrapper for height, never
+# documentElement.scrollHeight, which is bounded below by the iframe viewport and
+# so feeds back into an infinite grow loop; and set width from the parent's
+# #lb-tab, because an iframe is a replaced element with a 300px intrinsic width
+# that Gradio's flex wrappers shrink-wrap regardless of CSS width:100%.
+FIT_JS = (
+    "<script>"
+    "function fitW(){try{var fe=window.frameElement;if(!fe||!window.parent)return;"
+    "var host=window.parent.document.getElementById('lb-tab');if(!host)return;"
+    "var cs=window.parent.getComputedStyle(host);"
+    "var w=host.clientWidth-parseFloat(cs.paddingLeft||0)"
+    "-parseFloat(cs.paddingRight||0)-2;"
+    "if(w>40)fe.style.width=w+'px';}catch(e){}}"
+    "function fitH(){try{var r=document.getElementById('invroot');"
+    "if(!r||!window.frameElement)return;"
+    "var h=Math.ceil(r.getBoundingClientRect().height)+16;"
+    "var cur=parseInt(window.frameElement.style.height||'0',10)||0;"
+    "if(h>40&&Math.abs(h-cur)>2)window.frameElement.style.height=h+'px';}catch(e){}}"
+    "function fit(){fitW();fitH();}"
+    "window.addEventListener('load',fit);"
+    "window.addEventListener('resize',fit);"
+    "if(window.parent)window.parent.addEventListener('resize',fit);"
+    "if(window.ResizeObserver){new ResizeObserver(fit).observe(document.body);}"
+    "setTimeout(fit,60);setTimeout(fit,400);setTimeout(fit,1200);"
+    "</script>"
+)
+
 
 def load_shortlist_report(token: str | None) -> dict | None:
     """The raw shortlist file, or None if it is not there yet."""
@@ -60,15 +115,34 @@ def _rows(subtrack: dict) -> list[dict]:
     return sorted(rows, key=lambda t: t.get("rank") or 0)
 
 
+def _head() -> str:
+    """Document head, with the same webfont the two boards load."""
+    return (
+        "<!DOCTYPE html><html lang='en'><head><meta charset='utf-8'>"
+        "<meta name='viewport' content='width=device-width, initial-scale=1'>"
+        "<link rel='preconnect' href='https://fonts.googleapis.com'>"
+        "<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>"
+        "<link href='https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600"
+        "&family=IBM+Plex+Sans:wght@400;600;700&display=swap' rel='stylesheet'>"
+        f"<style>{CSS}</style></head><body>"
+    )
+
+
 def document(token: str | None) -> str:
-    """The whole page, as a standalone HTML document for an iframe srcdoc."""
+    """The whole page, as a standalone HTML document for an iframe srcdoc.
+
+    Everything visible sits inside #invroot, which is what the sizing script
+    measures. Without a content wrapper the iframe stays at its default height
+    and the page is simply cut off partway down the second table.
+    """
     rep = load_shortlist_report(token)
     esc = html.escape
-    out = [f"<!doctype html><meta charset=utf-8><style>{CSS}</style>"]
+    out = [_head(), "<div id='invroot'>"]
 
     if not rep or not rep.get("subtracks"):
         out.append("<p class=empty>The invited teams have not been published "
                    "yet. They appear here once the shortlist is final.</p>")
+        out.append(f"</div>{FIT_JS}</body></html>")
         return "".join(out)
 
     by_sub = {(st["track"], st["division"]): st for st in rep["subtracks"]}
@@ -99,8 +173,10 @@ def document(token: str | None) -> str:
         if not rows:
             out.append("<p class=empty>No teams invited in this sub-track.</p>")
             continue
-        out.append("<table><tr><th>#</th><th>Team</th><th>HF account</th>"
-                   f"<th>Model</th><th>{metric}</th><th>Total params</th></tr>")
+        out.append(f"<table>{COLS}<thead><tr><th class=num>#</th><th>Team</th>"
+                   "<th>HF account</th>"
+                   f"<th>Model</th><th class=num>{metric}</th>"
+                   "<th class=num>Total params</th></tr></thead><tbody>")
         for i, t in enumerate(rows, 1):
             score = t.get("primary_score")
             try:
@@ -111,15 +187,16 @@ def document(token: str | None) -> str:
             params = (f"{params/1e9:g}B"
                       if isinstance(params, (int, float)) and params else "—")
             out.append(
-                f"<tr><td class=num>{i}</td>"
+                f"<tr><td class=rank>{i}</td>"
                 f"<td class=team>{esc(str(t.get('team_name') or ''))}</td>"
-                f"<td>{esc(str(t.get('hf_user') or ''))}</td>"
-                f"<td>{esc(str(t.get('model_name') or ''))}</td>"
+                f"<td class=acct>{esc(str(t.get('hf_user') or ''))}</td>"
+                f"<td class=model>{esc(str(t.get('model_name') or ''))}</td>"
                 f"<td class=num>{score}</td>"
                 f"<td class=num>{esc(params)}</td></tr>")
-        out.append("</table>")
+        out.append("</tbody></table>")
 
     out.append("<p class=note>Ranked by each sub-track's own validation metric, "
                "open-weight entries only, deduplicated by team. Scores are the "
                "validation results already shown on the Validation board.</p>")
+    out.append(f"</div>{FIT_JS}</body></html>")
     return "".join(out)

tests/test_invited.py

@@ -0,0 +1,165 @@
+"""Tests for the Invited to Test Phase tab.
+
+Written 2026-08-08 after the first version shipped with no tests and three
+visible defects: the iframe never grew past its default height so the page was
+cut off partway down the second of six tables, the intro line ran off the right
+edge, and each table sized to its own content so the columns stepped left and
+right between sub-tracks. Each of those is pinned below.
+"""
+
+import os
+import re
+import sys
+import unittest
+from unittest import mock
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+import invited  # noqa: E402
+
+
+def _report(n_subtracks=2, rows_per=3, note_rows=0):
+    subs = []
+    for i in range(n_subtracks):
+        shortlist = [
+            {
+                "rank": r + 1,
+                "team_name": f"Team {i}{r}",
+                "hf_user": f"user{i}{r}",
+                "model_name": "a-very-long-model-name-" + "x" * 60,
+                "primary_score": 0.5 - r / 100,
+                "total_params": 7_000_000_000,
+            }
+            for r in range(rows_per)
+        ]
+        for k in range(note_rows):
+            shortlist.append({
+                "rank": rows_per + k + 1, "team_name": "htranx",
+                "hf_user": "htranx", "model_name": "smoke",
+                "primary_score": 1.0, "total_params": 1,
+                "note": "organizer smoke test",
+            })
+        subs.append({
+            "track": ["convqa", "longqa"][i % 2],
+            "division": ["small", "large"][i % 2],
+            "track_label": f"Track{i}",
+            "primary_metric_label": "Accuracy",
+            "primary_is_self_reported": False,
+            "shortlist": shortlist,
+        })
+    return {"distinct_teams": 5, "total_seats": n_subtracks * rows_per,
+            "subtracks": subs}
+
+
+def _doc(rep):
+    with mock.patch.object(invited, "load_shortlist_report", lambda t: rep):
+        return invited.document(None)
+
+
+class DocumentIsWellFormedTest(unittest.TestCase):
+    def test_it_is_a_complete_html_document(self):
+        d = _doc(_report())
+        self.assertTrue(d.startswith("<!DOCTYPE html>"), d[:40])
+        self.assertTrue(d.rstrip().endswith("</html>"), d[-40:])
+
+    def test_the_empty_state_is_also_a_complete_document(self):
+        """The no-shortlist branch returned early and closed nothing."""
+        d = _doc(None)
+        self.assertTrue(d.startswith("<!DOCTYPE html>"))
+        self.assertTrue(d.rstrip().endswith("</html>"))
+        self.assertIn("have not been published", d)
+
+    def test_every_container_is_balanced(self):
+        d = _doc(_report(n_subtracks=2))
+        for tag in ("div", "table", "thead", "tbody", "tr", "th", "td"):
+            # `<th` also prefixes `<thead`, so match the tag name followed by a
+            # delimiter rather than by str.count on the opening bracket.
+            opens = len(re.findall(rf"<{tag}[\s>]", d))
+            self.assertEqual(opens, d.count(f"</{tag}>"), tag)
+
+
+class SelfSizingTest(unittest.TestCase):
+    """The page was cut off partway down. This is why."""
+
+    def test_the_content_is_wrapped_in_the_element_the_script_measures(self):
+        d = _doc(_report())
+        self.assertEqual(1, d.count("id='invroot'"))
+        # the wrapper must close before the script, or the script is inside it
+        self.assertIn("</div><script>", d)
+
+    def test_it_measures_the_wrapper_not_the_document(self):
+        """documentElement.scrollHeight is bounded below by the iframe's own
+        viewport, so feeding it back into the iframe height grows without
+        bound. results.board_document() hit this first; do not reintroduce it.
+        """
+        d = _doc(_report())
+        self.assertIn("getElementById('invroot')", d)
+        self.assertNotIn("documentElement.scrollHeight", d)
+
+    def test_it_sets_width_from_the_host_tab(self):
+        """An iframe has a 300px intrinsic width and Gradio shrink-wraps it."""
+        d = _doc(_report())
+        self.assertIn("getElementById('lb-tab')", d)
+
+    def test_it_refits_on_load_and_resize(self):
+        d = _doc(_report())
+        for hook in ("load", "resize"):
+            self.assertIn(f"addEventListener('{hook}',fit)", d)
+
+
+class ColumnsLineUpTest(unittest.TestCase):
+    def test_every_table_carries_the_same_colgroup(self):
+        d = _doc(_report(n_subtracks=2))
+        self.assertEqual(2, d.count("<table>"))
+        self.assertEqual(d.count("<table>"), d.count(invited.COLS))
+
+    def test_the_layout_is_fixed_so_widths_cannot_be_content_driven(self):
+        d = _doc(_report())
+        self.assertIn("table-layout:fixed", d)
+
+    def test_long_free_text_wraps_rather_than_widening_the_table(self):
+        """model_name is participant free text and reaches 80+ chars."""
+        d = _doc(_report())
+        self.assertIn("td.team,td.acct,td.model{white-space:normal", d)
+        self.assertIn("overflow-wrap:anywhere", d)
+
+
+class ContentTest(unittest.TestCase):
+    def test_organizer_rows_are_filtered_by_their_note_field(self):
+        d = _doc(_report(n_subtracks=1, rows_per=2, note_rows=1))
+        self.assertNotIn("htranx", d)
+        self.assertIn("<b>2 seats</b>", d)
+
+    def test_the_team_count_is_read_from_the_file_not_recounted(self):
+        """Neither team names nor accounts reproduce the transitive merge."""
+        d = _doc(_report(n_subtracks=1, rows_per=2))
+        self.assertIn("5 teams", d)
+
+    def test_rows_are_ordered_by_rank(self):
+        rep = _report(n_subtracks=1, rows_per=3)
+        rep["subtracks"][0]["shortlist"].reverse()
+        d = _doc(rep)
+        pos = [d.index(f"Team 0{r}") for r in range(3)]
+        self.assertEqual(pos, sorted(pos))
+
+    def test_a_missing_score_or_param_count_renders_a_dash(self):
+        rep = _report(n_subtracks=1, rows_per=1)
+        rep["subtracks"][0]["shortlist"][0]["primary_score"] = None
+        rep["subtracks"][0]["shortlist"][0]["total_params"] = None
+        d = _doc(rep)
+        self.assertEqual(2, d.count("—"))
+
+    def test_a_sub_track_with_no_invited_teams_says_so(self):
+        rep = _report(n_subtracks=1, rows_per=0)
+        self.assertIn("No teams invited", _doc(rep))
+
+    def test_team_names_are_escaped(self):
+        rep = _report(n_subtracks=1, rows_per=1)
+        rep["subtracks"][0]["shortlist"][0]["team_name"] = "<script>x</script>"
+        d = _doc(rep)
+        self.assertNotIn("<script>x</script>", d)
+        self.assertIn("&lt;script&gt;", d)
+
+
+if __name__ == "__main__":
+    unittest.main()