Toolbar: display-styled labels, bordered CSV glyph, hover on controls

app.py

@@ -402,6 +402,7 @@ TABLE_CSS = """
          --lb-ink-3:#9ca3af; --lb-ink-4:#c3c8d0; --lb-empty:#cbd0d6; --lb-accent:#7b61c9;
          --lb-row-line:#f1f2f4; --lb-row-alt:#fafafa; --lb-tip-bg:#1f2328; --lb-tip-ink:#f5f6f7;
          --lb-tip-border:#1f2328; --lb-shadow:rgba(0,0,0,.18); --lb-ramp:@RAMP_LIGHT@;
+         --lb-dim-bg:#eef0f2; --lb-dim-ink:#9aa1ab;
          font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
          color:var(--lb-ink); max-width:100%; margin:0; color-scheme:light;
          background:var(--lb-surface); border:1px solid var(--lb-border); border-radius:12px; padding:16px 18px; }
@@ -409,6 +410,7 @@ TABLE_CSS = """
                --lb-ink-3:#9098a4; --lb-ink-4:#67707e; --lb-empty:#3f444d; --lb-accent:#9c83d6;
                --lb-row-line:#26292e; --lb-row-alt:#202327; --lb-tip-bg:#262e3a; --lb-tip-ink:#e7eaef;
                --lb-tip-border:#39424f; --lb-shadow:rgba(0,0,0,.55); --lb-ramp:@RAMP_DARK@;
+               --lb-dim-bg:#22262d; --lb-dim-ink:#79818d;
                color-scheme:dark; }
 .ttslb .tbl-wrap { overflow-x:auto; }
 /* Natural table width + pinned widths keep the rank/provider/License columns the
@@ -430,7 +432,7 @@ TABLE_CSS = """
    sit in low rows, where a downward bubble would poke past the table). */
 .ttslb .info { position:relative; margin-left:5px; color:var(--lb-ink-4); cursor:help; font-weight:400; }
 .ttslb .info:hover { color:var(--lb-ink-2); }
-.ttslb .info::after, .ttslb .notemark[data-tip]::after, .ttslb .csv-btn[data-tip]::after {
+.ttslb .info::after, .ttslb .notemark[data-tip]::after {
                       content:attr(data-tip); position:absolute; display:none; width:260px;
                       background:var(--lb-tip-bg); color:var(--lb-tip-ink); font-size:11.5px;
                       font-weight:400; letter-spacing:normal; line-height:1.45; text-align:left; white-space:normal;
@@ -438,9 +440,7 @@ TABLE_CSS = """
                       box-shadow:0 4px 12px var(--lb-shadow); z-index:20; pointer-events:none; }
 .ttslb .info::after { top:calc(100% + 6px); right:-12px; }
 .ttslb .notemark[data-tip]::after { bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:240px; }
-.ttslb .csv-btn[data-tip]::after { top:calc(100% + 6px); right:0; width:auto; white-space:nowrap; }
 .ttslb .info:hover::after { display:block; }
-.ttslb .csv-btn:hover::after { display:block; }
 .ttslb td.notecell { cursor:help; }
 .ttslb td.notecell:hover .notemark[data-tip]::after { display:block; }
 .ttslb table.lb th.rank { width:34px; text-align:right; }
@@ -455,6 +455,11 @@ TABLE_CSS = """
                font-variant-numeric:tabular-nums; font-weight:500;
                background:var(--hm-bg); color:var(--hm-fg); }
 .dark .ttslb .pill { background:var(--hm-bg-dark); color:var(--hm-fg-dark); }
+/* focus mode (default): only the active sort column keeps its heatmap — pills
+   in other columns grey out with dimmer numbers. The sort JS moves td.dim as
+   the active column changes; the toggle-all button puts .allcolors on the
+   table, which disables this rule and restores every column's colors. */
+.ttslb table.lb:not(.allcolors) td.dim .pill { background:var(--lb-dim-bg); color:var(--lb-dim-ink); }
 .ttslb .pill.primary { min-width:46px; font-weight:700; }
 .ttslb .cov-count { color:var(--lb-ink-2); font-size:12px; font-variant-numeric:tabular-nums; }
 .ttslb .empty { color:var(--lb-empty); }
@@ -474,22 +479,38 @@ TABLE_CSS = """
 .ttslb .legend { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--lb-ink-2); }
 .ttslb .legend-bar { width:160px; height:10px; border-radius:5px; background:var(--lb-ramp); }
 .ttslb .legend-end { color:var(--lb-ink-3); font-variant-numeric:tabular-nums; }
-/* icon-only download button: a data-URI SVG background (an inline <svg> in
-   gr.HTML would risk the sanitizer; a CSS mask proved too fragile). The stroke
-   colors are baked per state/theme below — url() can't read tokens — and track
-   --lb-ink-2 (idle) / --lb-ink (hover). Hover shows a "Download CSV" bubble.
-   NB: buttons inside gr.HTML get gradio's own button skin, so every contested
-   property here (and on .smp-tab) is element-qualified and !important. */
-.ttslb button.csv-btn { display:inline-block; position:relative; width:26px; height:26px;
-                  margin:0; appearance:none; box-shadow:none; cursor:pointer;
-                  padding:0 !important; border:1px solid var(--lb-border) !important;
-                  border-radius:6px !important; background-color:transparent !important;
-                  background-image:@CSV_ICON_L@ !important; background-position:center !important;
-                  background-size:14px 14px !important; background-repeat:no-repeat !important; }
-.ttslb button.csv-btn:hover { border-color:var(--lb-ink-3) !important;
-                  background-image:@CSV_ICON_LH@ !important; }
-.dark .ttslb button.csv-btn { background-image:@CSV_ICON_D@ !important; }
-.dark .ttslb button.csv-btn:hover { background-image:@CSV_ICON_DH@ !important; }
+/* toolbar controls (right side): a vertical stack — the "Toggle colors"
+   switch on top, "Download CSV" + bordered glyph button below, labels left /
+   controls right-aligned (track and box are both 26px wide, so their right
+   edges line up). The labels are display-styled — muted ink, no hover cue —
+   but stay inside the buttons, so they still enlarge the hit target. Buttons
+   inside gr.HTML get gradio's own button skin, so every contested property
+   here (and on .smp-tab) is element-qualified and !important. */
+.ttslb .lb-toolbar .btns { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
+.ttslb button.hm-btn, .ttslb button.csv-btn { display:inline-flex; align-items:center; gap:7px;
+                  margin:0; appearance:none; cursor:pointer; font-family:inherit; line-height:1;
+                  border:0 !important; box-shadow:none !important; background:transparent !important;
+                  padding:0 !important; color:var(--lb-ink-2) !important;
+                  font-size:11.5px !important; font-weight:600 !important; }
+/* the switch: off = focus mode (only the sorted column colored); on (.on,
+   accent track, knob right) = every column's heatmap shown */
+.ttslb .hm-track { flex:none; position:relative; width:26px; height:14px;
+                   border-radius:999px; background:var(--lb-ink-4); transition:background .15s; }
+.ttslb button.hm-btn:hover .hm-track { background:var(--lb-ink-3); }
+.ttslb .hm-knob { position:absolute; top:2px; left:2px; width:10px; height:10px;
+                  border-radius:50%; background:#ffffff; transition:left .15s; }
+.ttslb button.hm-btn.on .hm-track, .ttslb button.hm-btn.on:hover .hm-track { background:var(--lb-accent); }
+.ttslb button.hm-btn.on .hm-knob { left:14px; }
+/* the download glyph in its bordered box (the affordance lives on the box,
+   not the label): a data-URI SVG background (an inline <svg> in gr.HTML would
+   risk the sanitizer). Stroke colors are baked per state/theme below — url()
+   can't read tokens — tracking --lb-ink-2 (idle) / --lb-ink (hover). */
+.ttslb .csv-ico { flex:none; width:26px; height:26px; border:1px solid var(--lb-border);
+                  border-radius:6px; background-image:@CSV_ICON_L@;
+                  background-position:center; background-size:14px 14px; background-repeat:no-repeat; }
+.ttslb button.csv-btn:hover .csv-ico { border-color:var(--lb-ink-3); background-image:@CSV_ICON_LH@; }
+.dark .ttslb .csv-ico { background-image:@CSV_ICON_D@; }
+.dark .ttslb button.csv-btn:hover .csv-ico { background-image:@CSV_ICON_DH@; }
 /* per-tab Sample Generations section: factor category tabs + player rows */
 .ttslb .smp-h { margin:2px 2px 10px; font-size:15px; }
 .ttslb .smp-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
@@ -624,13 +645,18 @@ TABLE_CSS = (TABLE_CSS.replace("@RAMP_LIGHT@", _ramp_css(_PALETTE))
 
 
 # Behaviour, injected into <head> (a <script> inside gr.HTML would not execute);
-# delegated listeners survive filter re-renders. Three concerns:
+# delegated listeners survive filter re-renders. Concerns:
 #   * click-to-sort — every row stays visible: rows with a value in the active
 #     column are sorted and renumbered in the `#` column; rows without one sink
 #     to the bottom, unranked ("—"). Striping is reapplied in display order. Idle
 #     sortable headers keep a faint ↕ glyph; the active column shows ▲/▼ instead.
+#     Focus mode follows: the active column's pills keep their heatmap, all
+#     other pill cells are marked .dim (greyed unless .allcolors is on).
+#   * toggle-all-colors — the toolbar's grid button flips .allcolors on the
+#     table, restoring (or re-hiding) every column's heatmap at once.
 #   * CSV download — serialises the button's own table exactly as displayed
 #     (current sort order, current license filter, raw data-v values).
+#   * About-tab panel cards — click (or Enter/Space) jumps to that tab.
 #   * sample category tabs — one factor panel visible at a time per section.
 APP_JS = """
 <script>
@@ -673,6 +699,18 @@ APP_JS = """
       setTimeout(function () { URL.revokeObjectURL(a.href); }, 1000);
       return;
     }
+    var hmb = e.target.closest('.ttslb .hm-btn');
+    if (hmb) {   // "Toggle colors" switch: all-colors mode for this card's table
+      var hcard = hmb.closest('.ttslb');
+      var htable = hcard && hcard.querySelector('table.lb');
+      if (htable) {
+        htable.classList.toggle('allcolors');
+        var on = htable.classList.contains('allcolors');
+        hmb.classList.toggle('on', on);
+        hmb.setAttribute('aria-checked', on ? 'true' : 'false');
+      }
+      return;
+    }
     var stab = e.target.closest('.ttslb .smp-tab');
     if (stab) {
       var wrap = stab.closest('.smp');
@@ -731,13 +769,22 @@ APP_JS = """
       if (rk) rk.textContent = i < ranked.length ? i + 1 : '—';
       tbody.appendChild(r);
     });
+    // focus mode follows the sort: only the active column's pills stay
+    // colored; every other pill cell is marked dim (a no-op visually while
+    // the table is in .allcolors mode)
+    Array.prototype.forEach.call(tbody.rows, function (r) {
+      Array.prototype.forEach.call(r.cells, function (td, i) {
+        if (td.querySelector('.pill')) td.classList.toggle('dim', i !== ci);
+      });
+    });
   });
 })();
 </script>
 """
 
 
-def _row_html(p, heat_cols, primary_col, cov_col, rank_label, color_fn, marker_of=None) -> str:
+def _row_html(p, heat_cols, primary_col, cov_col, rank_label, color_fn, marker_of=None,
+              active_col=None) -> str:
     m = p.get("metrics", {}) or {}
     model_raw = str(p.get("model", ""))
     lic_raw = (p.get("license") or "").strip() or "—"
@@ -765,7 +812,11 @@ def _row_html(p, heat_cols, primary_col, cov_col, rank_label, color_fn, marker_o
         else:
             (bg, fg), (bgd, fgd) = color_fn(c, v)
             cls = "pill primary" if c is primary_col else "pill"
-            td_cls = " class='notecell'" if mark else ""
+            # dim = outside the initially-sorted column (focus mode); the sort
+            # JS re-marks these as the active column changes
+            td_classes = ((["notecell"] if mark else [])
+                          + (["dim"] if active_col is not None and c is not active_col else []))
+            td_cls = f" class='{' '.join(td_classes)}'" if td_classes else ""
             # unit suffix ("%", "x") rides along in the pill; data-v stays the
             # bare number so sorting and CSV export keep working
             txt = f"{v:.2f}{html.escape(c.get('unit') or '')}"
@@ -857,7 +908,7 @@ def render_board_html(board: dict, lic: str = "all", fname: str = "board") -> st
     for i, p in enumerate(ranked + unranked):
         alt = "alt" if (i + 1) % 2 == 0 else ""
         label = i + 1 if i < len(ranked) else "—"
-        body.append(f"<tr class='{alt}'>{_row_html(p, heat_cols, primary_col, cov_col, label, color_fn, marker_of)}</tr>")
+        body.append(f"<tr class='{alt}'>{_row_html(p, heat_cols, primary_col, cov_col, label, color_fn, marker_of, first_col)}</tr>")
 
     if not body:
         return "<div class='ttslb'><p class='nomatch'>No providers match this filter.</p></div>"
@@ -868,9 +919,10 @@ def render_board_html(board: dict, lic: str = "all", fname: str = "board") -> st
             f"<div><span class='notemark'>{mark}</span> {html.escape(note)}</div>"
             for note, mark in marker_of.items()) + "</div>")
 
-    # Toolbar: the score-scale legend and an icon button downloading the table as
-    # CSV, exactly as displayed (handled in APP_JS). Both sit inside .tbl-box, so
-    # they align with the table's edges. The legend follows the heatmap mode:
+    # Toolbar: the score-scale legend (left) and a vertical stack of labelled
+    # controls (right): the "Toggle colors" switch over "Download CSV", both
+    # handled in APP_JS. All sit inside .tbl-box, so they align with the
+    # table's edges. The legend follows the heatmap mode:
     # 1–5 rater scale by default, the board's own value anchors for "absolute"
     # boards (ends flipped for asc columns so red stays on the worst end), and a
     # generic worst→best for "normalized" boards.
@@ -895,8 +947,13 @@ def render_board_html(board: dict, lic: str = "all", fname: str = "board") -> st
                   "<span class='legend-bar'></span><span class='legend-end'>5</span>"
                   "<span>mean human rating</span></div>")
     toolbar = (f"<div class='lb-toolbar'>{legend}"
-               f"<button class='csv-btn' data-fname='{html.escape(fname, quote=True)}'"
-               " data-tip='Download CSV' aria-label='Download CSV'></button></div>")
+               "<div class='btns'>"
+               "<button class='hm-btn' role='switch' aria-checked='false'>"
+               "<span class='hm-lbl'>Toggle colors</span>"
+               "<span class='hm-track'><span class='hm-knob'></span></span></button>"
+               f"<button class='csv-btn' data-fname='{html.escape(fname, quote=True)}'>"
+               "<span class='csv-lbl'>Download CSV</span><span class='csv-ico'></span></button>"
+               "</div></div>")
 
     return (
         "<div class='ttslb'><div class='tbl-box'>"