From 08bcedd698b3958e0b36a3a3ad323ceb87e646bd Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@clickhouse.com>
Date: Fri, 24 Jul 2026 00:35:54 +0200
Subject: [PATCH] Playground: compare selected systems + mobile/URL fixes

Add a "compare selected systems" feature to the playground and fix
several usability issues found along the way.

Compare selected systems:
- Shift/Ctrl/Cmd-click, right-click, or long-press (touch) a system to
  toggle it into a multi-selection, highlighted bright blue. A plain
  click/tap clears the selection.
- When a selection exists, "Run all" arms yellow as "Run selected (N)"
  and the competition runs only among the selected systems.
- The selection is remembered in the URL (?compare=a,b,c) so a link
  reopens with the same systems highlighted.
- A hint (top-right on hover, static caption on touch) explains the
  gestures.

Other improvements:
- Remember the selected example query in the URL (?example=N).
- On Run / Run all, smooth-scroll to the results (mobile usability).
- Competition results panel now fits its content, growing up to the
  viewport height then scrolling inside the rail.
- Fix a persistent horizontal scrollbar: the per-slab uptime balloons
  were laid out (visibility:hidden) at all times; render them only on
  hover (display:none). Also stop flex from shrinking slabs and cap the
  example <select> width.
- When opened from file://, fall back to the production API if no local
  dev server is running.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 playground/app.js     | 243 +++++++++++++++++++++++++++++++++++++++---
 playground/index.html |   5 +-
 playground/style.css  |  99 +++++++++++++++--
 3 files changed, 323 insertions(+), 24 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index 5c723328e3..d098216cb6 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -17,10 +17,14 @@ const $ = (sel) => document.querySelector(sel);
 //     the live playground; CORS is open (Access-Control-Allow-Origin: *
 //     is set by the server's middleware).
 //   - file:// → localhost dev instance.
-const API =
+const PROD_API = "https://clickbench-playground.clickhouse.com";
+// `let`, not `const`: when opened from file:// the default target is a
+// local dev server, but loadCatalog transparently falls back to
+// PROD_API if that server isn't running (see below).
+let API =
     location.hostname === "clickbench-playground.clickhouse.com" ? "" :
     location.protocol === "file:" ? "http://localhost:8000" :
-    "https://clickbench-playground.clickhouse.com";
+    PROD_API;
 
 const listEl = $("#system-list");
 const queryEl = $("#query");
@@ -42,6 +46,19 @@ const uiDown = $("#ui-down");
 let catalog = [];          // [{name, display_name, data_format, ...}]
 let stateByName = {};      // {name: {state, ...}}
 let selected = null;       // selected system name
+// Multi-selection for the "compare selected systems" feature. Shift /
+// Ctrl / Cmd click, right-click, or a long press (touch) on a slab
+// toggles its membership; a plain click/tap clears the whole set. When
+// non-empty, "Run all" runs the competition only among these systems
+// (see runAll).
+let multiSelected = new Set();
+// Long-press (touch) state. A press held for LONG_PRESS_MS toggles
+// multi-selection, mirroring right-click on the desktop.
+const LONG_PRESS_MS = 500;
+let _lpTimer = null;        // pending long-press timer
+let _lpFired = false;       // the current touch already toggled via long press
+let _lastTouchStart = 0;    // ts of last touchstart — lets us tell a touch-origin
+                            // contextmenu (long press) from a mouse right-click
 let pollTimer = null;
 let resultsByName = {};    // {name: {output, time, wall, bytes, truncated, exit}}
 let queriesByName = {};    // {name: [q1, q2, ...]}
@@ -49,9 +66,28 @@ let queriesByName = {};    // {name: [q1, q2, ...]}
 // example). If the current textarea still equals it, the user hasn't
 // edited it and we're free to swap in the next system's example.
 let pristineQuery = "";
+// Example index requested via the URL (?example=N), to be applied once
+// the queries for the first selected system load. Consumed on first use.
+let pendingExampleFromURL = null;
 
 async function loadCatalog() {
-    const r = await fetch(API + "/api/systems");
+    let r;
+    try {
+        r = await fetch(API + "/api/systems");
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+    } catch (e) {
+        // The file:// default (localhost:8000) is a dev server that may
+        // not be running when someone just opens index.html from disk.
+        // Fall back to the live production API so the page still works.
+        // API is reassigned so every later fetch (state, query, run-all)
+        // uses the same working base.
+        if (location.protocol === "file:" && API !== PROD_API) {
+            API = PROD_API;
+            r = await fetch(API + "/api/systems");
+        } else {
+            throw e;
+        }
+    }
     catalog = await r.json();
     catalog.sort((a, b) => a.display_name.localeCompare(b.display_name));
     renderList();
@@ -63,6 +99,18 @@ async function loadCatalog() {
     } else if (catalog.length) {
         select(catalog[0].name);
     }
+    restoreMultiSelectionFromURL();
+}
+
+// Compute the full class string for a system slab: base + state +
+// single-selection + multi-selection. Centralized so renderList and
+// pollState (which rebuilds classes every 2 s) stay in sync and don't
+// wipe the multi-selection highlight.
+function slabClass(name, st) {
+    let c = `system-item state-${st}`;
+    if (name === selected) c += " selected";
+    if (multiSelected.has(name)) c += " multi-selected";
+    return c;
 }
 
 function renderList() {
@@ -71,11 +119,45 @@ function renderList() {
         const sObj = stateByName[s.name];
         const st = (sObj && sObj.state) || "down";
         const row = document.createElement("div");
-        row.className = `system-item state-${st}` + (s.name === selected ? " selected" : "");
+        row.className = slabClass(s.name, st);
         row.dataset.name = s.name;
         row.textContent = s.display_name;
         row.dataset.tooltip = tooltipFor(sObj, st);
-        row.addEventListener("click", () => onSlabClick(s.name));
+        row.addEventListener("click", (e) => onSlabClick(s.name, e));
+        // Right-click also toggles multi-selection (mirrors Shift/Ctrl/
+        // Cmd click). Suppress the browser context menu so it feels like
+        // a first-class gesture.
+        row.addEventListener("contextmenu", (e) => {
+            e.preventDefault();
+            // On touch devices a long press also fires contextmenu; the
+            // touch timer below already handled the toggle, so skip it
+            // here to avoid toggling twice. A desktop right-click has no
+            // recent touchstart and falls through to toggle.
+            if (Date.now() - _lastTouchStart < 1000) return;
+            toggleMulti(s.name);
+        });
+        // Long press on touch: hold for LONG_PRESS_MS to toggle
+        // multi-selection. A quick tap cancels the timer (touchend) and
+        // behaves as a normal click; scrolling cancels it (touchmove).
+        row.addEventListener("touchstart", () => {
+            _lastTouchStart = Date.now();
+            _lpFired = false;
+            clearTimeout(_lpTimer);
+            _lpTimer = setTimeout(() => {
+                _lpFired = true;
+                toggleMulti(s.name);
+            }, LONG_PRESS_MS);
+        }, {passive: true});
+        row.addEventListener("touchmove", () => clearTimeout(_lpTimer), {passive: true});
+        row.addEventListener("touchend", (e) => {
+            clearTimeout(_lpTimer);
+            if (_lpFired) {
+                // The long press already toggled the selection; swallow
+                // the click the browser synthesizes so it doesn't
+                // immediately reset it.
+                e.preventDefault();
+            }
+        });
         // In competition mode, hovering a slab highlights its row in
         // the leaderboard so the user can scan from picker to result
         // without losing context.
@@ -85,6 +167,72 @@ function renderList() {
     }
 }
 
+// Reapply slab classes to the existing rows without rebuilding the DOM —
+// used when the multi-selection changes.
+function refreshSlabClasses() {
+    for (const row of listEl.children) {
+        const s = stateByName[row.dataset.name];
+        const st = (s && s.state) || "down";
+        row.className = slabClass(row.dataset.name, st);
+    }
+}
+
+function toggleMulti(name) {
+    // Seed a fresh selection with the current single-selection so the
+    // first modifier/right click compares "current + clicked" rather
+    // than just the clicked system on its own.
+    if (multiSelected.size === 0 && selected && selected !== name) {
+        multiSelected.add(selected);
+    }
+    if (multiSelected.has(name)) multiSelected.delete(name);
+    else multiSelected.add(name);
+    updateMultiUI();
+}
+
+// Reflect the current multi-selection in the UI: recolor the slabs and
+// arm the "Run all" button (yellow) when a selection exists.
+function updateMultiUI() {
+    refreshSlabClasses();
+    const n = multiSelected.size;
+    runAllBtn.classList.toggle("armed", n > 0);
+    if (n > 0) {
+        runAllBtn.style.display = "";
+        runAllBtn.textContent = `Run selected (${n})`;
+        runAllBtn.title = "Run the competition among the selected systems only";
+    } else {
+        runAllBtn.textContent = "Run all";
+        runAllBtn.title = "Run this query on every snapshotted system in parallel — per-system translation if an example is picked, exact text otherwise";
+        refreshRunAllVisibility();
+    }
+    updateMultiSelectionURL();
+}
+
+// Persist the multi-selection in the URL (?compare=a,b,c) so a copied
+// link reopens with the same systems highlighted and "Run all" armed.
+// replaceState (not pushState) so toggling doesn't spam history.
+function updateMultiSelectionURL() {
+    const u = new URL(window.location.href);
+    if (multiSelected.size) {
+        u.searchParams.set("compare",
+            [...multiSelected].map(encodeURIComponent).join(","));
+    } else {
+        u.searchParams.delete("compare");
+    }
+    window.history.replaceState({}, "", u.toString());
+}
+
+// Restore a shared multi-selection from the URL. Called once after the
+// catalog is loaded (so we can drop names that no longer exist).
+function restoreMultiSelectionFromURL() {
+    const compare = new URL(window.location.href).searchParams.get("compare");
+    if (!compare) return;
+    multiSelected = new Set(
+        compare.split(",")
+            .map(decodeURIComponent)
+            .filter(nm => catalog.some(s => s.name === nm)));
+    updateMultiUI();
+}
+
 function tooltipFor(sObj, st) {
     if (st === "ready") {
         const since = sObj && sObj.ready_since;
@@ -114,11 +262,23 @@ function formatDuration(secs) {
     return `${d} day${d === 1 ? "" : "s"}`;
 }
 
-function onSlabClick(name) {
+function onSlabClick(name, e) {
+    // Shift / Ctrl / Cmd click toggles multi-selection instead of
+    // selecting/running — this is how the user builds up a set of
+    // systems to compare.
+    if (e && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+        toggleMulti(name);
+        return;
+    }
     // Systems that are mid-install/load aren't queryable yet; ignore
     // clicks so the user doesn't get a stranded selection.
     const st = stateByName[name] && stateByName[name].state;
     if (st === "provisioning") return;
+    // A plain click resets any multi-selection.
+    if (multiSelected.size) {
+        multiSelected.clear();
+        updateMultiUI();
+    }
     // Click on the already-selected system = shortcut to run the
     // current query, as long as that system is in a queryable state.
     if (name === selected) {
@@ -193,12 +353,19 @@ async function loadExamples(name) {
             o.textContent = `Q${i + 1}: ${label}`;
             exampleSel.appendChild(o);
         }
-        // Clamp prevIndex into range; default to 0.
+        // Choose the example index: a URL-requested one (?example=N)
+        // takes priority on first load, then the preserved prevIndex,
+        // else 0.
         let idx = 0;
-        if (!isNaN(prevIndex) && prevIndex >= 0 && prevIndex < qs.length) {
+        if (pendingExampleFromURL != null
+            && pendingExampleFromURL >= 0 && pendingExampleFromURL < qs.length) {
+            idx = pendingExampleFromURL;
+            pendingExampleFromURL = null;  // consume once
+        } else if (!isNaN(prevIndex) && prevIndex >= 0 && prevIndex < qs.length) {
             idx = prevIndex;
         }
         exampleSel.value = String(idx);
+        updateExampleURL();
         refreshRunAllVisibility();
         // Replace the textarea with this system's example at the same
         // index, but only if the user hasn't edited the current text
@@ -295,8 +462,7 @@ async function pollState() {
         for (const row of listEl.children) {
             const s = stateByName[row.dataset.name];
             const st = (s && s.state) || "down";
-            row.className = `system-item state-${st}` +
-                (row.dataset.name === selected ? " selected" : "");
+            row.className = slabClass(row.dataset.name, st);
             row.dataset.tooltip = tooltipFor(s, st);
         }
         if (selected && stateByName[selected]) {
@@ -329,6 +495,8 @@ async function runQuery() {
     outLabelEl.textContent = "Output";
     uiOutput.style.display = "";
     uiStats.style.display = "";
+    // Bring the results into view now that the run has started.
+    scrollIntoViewSmooth(uiStats);
 
     const target = selected;  // capture in case the user switches mid-flight
     const t0 = performance.now();
@@ -380,6 +548,18 @@ async function runQuery() {
     if (selected === target) showResult(payload);
 }
 
+// Smoothly bring an element into view. Called when a run starts so the
+// results are visible without manual scrolling — chiefly for mobile,
+// where the output sits below the query editor and the fold.
+function scrollIntoViewSmooth(el) {
+    if (!el) return;
+    try {
+        el.scrollIntoView({behavior: "smooth", block: "start"});
+    } catch {
+        el.scrollIntoView();
+    }
+}
+
 function bytesToText(buf) {
     try {
         return new TextDecoder("utf-8", {fatal: false}).decode(buf);
@@ -400,8 +580,24 @@ function applyCurrentExample() {
     applyExampleIdx(parseInt(exampleSel.value, 10));
 }
 
+// Persist the selected example query in the URL (?example=N) so a
+// reload — or a shared competition link — reopens with the same query
+// chosen. Removed when the user switches to a custom (non-example)
+// query. replaceState so it doesn't spam history.
+function updateExampleURL() {
+    const u = new URL(window.location.href);
+    const idx = parseInt(exampleSel.value, 10);
+    if (!isNaN(idx)) {
+        u.searchParams.set("example", String(idx));
+    } else {
+        u.searchParams.delete("example");
+    }
+    window.history.replaceState({}, "", u.toString());
+}
+
 exampleSel.addEventListener("change", () => {
     applyCurrentExample();
+    updateExampleURL();
     refreshRunAllVisibility();
     hideRunAll();
 });
@@ -413,6 +609,7 @@ exampleSel.addEventListener("change", () => {
 queryEl.addEventListener("input", () => {
     if (queryEl.value !== pristineQuery) {
         exampleSel.value = "";
+        updateExampleURL();  // custom query → drop the ?example= param
     }
     refreshRunAllVisibility();
 });
@@ -461,6 +658,13 @@ async function maybeLoadShared() {
     // so first-system selection is free to swap it for the first
     // example.
     pristineQuery = queryEl.value;
+    // Pick up a shared example-query index before the catalog loads so
+    // loadExamples can apply it to the first selected system.
+    const exParam = new URL(window.location.href).searchParams.get("example");
+    if (exParam !== null) {
+        const n = parseInt(exParam, 10);
+        if (!isNaN(n)) pendingExampleFromURL = n;
+    }
     await loadCatalog();
     await pollState();
     await maybeLoadShared();
@@ -479,6 +683,13 @@ const runAllSection = $("#ui-runall");
 const runAllTable = $("#runall-table");
 
 function refreshRunAllVisibility() {
+    // A live multi-selection keeps the (armed) button on screen
+    // regardless of query state, so it can't disappear out from under
+    // the user while they're comparing selected systems.
+    if (multiSelected.size) {
+        runAllBtn.style.display = "";
+        return;
+    }
     // Always available when there's *something* to run: a picked
     // example index OR a non-empty custom query in the textarea.
     const haveExample = exampleSel.value !== ""
@@ -551,7 +762,10 @@ async function runAll() {
     runAllSection.style.display = "";
     uiSplit.classList.add("split");
     _measureSplitOffset();
-    runAllSection.focus();
+    // preventScroll so the instant focus-jump doesn't fight the smooth
+    // scroll below; then bring the leaderboard into view (mobile).
+    runAllSection.focus({preventScroll: true});
+    scrollIntoViewSmooth(runAllSection);
 
     // Collect candidate systems. With an example picked, each system
     // runs its OWN translation of the example at the same index
@@ -559,8 +773,13 @@ async function runAll() {
     // in the textarea, every system runs the exact same string —
     // the systems whose query language doesn't accept it will just
     // show up in the failed bucket.
-    const candidates = Object.values(stateByName)
+    let candidates = Object.values(stateByName)
         .filter(s => s.state === "snapshotted" || s.state === "ready");
+    // When the user has built a multi-selection, restrict the
+    // competition to those systems only ("compare selected systems").
+    if (multiSelected.size) {
+        candidates = candidates.filter(s => multiSelected.has(s.name));
+    }
     const targets = [];
     for (const s of candidates) {
         if (useExampleIndex) {
diff --git a/playground/index.html b/playground/index.html
index c9c1fab201..41f0bd44bf 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>ClickBench Playground &mdash; run SQL against 110+ databases</title>
-<link rel="stylesheet" href="style.css?v=23">
+<link rel="stylesheet" href="style.css?v=30">
 </head>
 <body>
 <header>
@@ -21,6 +21,7 @@ <h1>ClickBench Playground <span class="muted">&mdash; run SQL against 110+ datab
 <main>
     <section>
         <div id="system-list" class="system-list"></div>
+        <div id="multi-hint">Tip: <b>Shift</b> / <b>Ctrl</b> / <b>Cmd</b>-click, <b>right-click</b>, or <b>long-press</b> systems to select several, then <b>Run all</b> races only your selection.</div>
     </section>
 
     <section class="row" id="ui-active">
@@ -71,7 +72,7 @@ <h1>ClickBench Playground <span class="muted">&mdash; run SQL against 110+ datab
     </div>
 </main>
 
-<script src="app.js?v=36"></script>
+<script src="app.js?v=42"></script>
 <script>
 (function () {
     var el = document.getElementById('github-stars-count');
diff --git a/playground/style.css b/playground/style.css
index bf28068f42..c9e8eb5a03 100644
--- a/playground/style.css
+++ b/playground/style.css
@@ -119,6 +119,14 @@ button.run-all:hover:not(:disabled) {
     border-color: var(--border);
     filter: none;
 }
+/* Armed: a multi-selection exists, so "Run all" becomes "Run selected"
+   and lights up yellow like a primary action. */
+button.run-all.armed {
+    background: var(--accent);
+    color: var(--accent-fg);
+    border-color: var(--border);
+    font-weight: 600;
+}
 
 /* Competition-mode table. */
 #runall-table {
@@ -156,11 +164,9 @@ button.run-all:hover:not(:disabled) {
     display: grid;
     grid-template-columns: max-content minmax(0, 1fr);
     gap: 16px;
-    align-items: stretch;
-    /* Take the rest of the viewport (whatever's left below the
-       buttons row) so the rail can scroll independently rather than
-       stretching the page. */
-    height: calc(100vh - var(--ui-split-offset, 200px));
+    /* start (not stretch) so the rail is only as tall as its rows;
+       no forced height so the split doesn't stretch the page. */
+    align-items: start;
 }
 #ui-main { min-width: 0; overflow: auto; }
 #ui-main > section:first-child { margin-top: 0; }
@@ -171,7 +177,9 @@ aside#ui-runall {
        the rail's width fluctuates as rows finish, briefly making the
        right pane overflow and the page grow a horizontal scrollbar. */
     scrollbar-gutter: stable;
-    height: 100%;
+    /* Fit the content, but never taller than what's left of the
+       viewport below the split — then scroll inside the rail. */
+    max-height: calc(100vh - var(--ui-split-offset, 200px));
     border: 1px solid var(--border);
     background: var(--bg-alt);
     outline: none;
@@ -181,7 +189,7 @@ aside#ui-runall #runall-table {
     border: 0;
 }
 @media (max-width: 800px) {
-    #ui-split.split { grid-template-columns: 1fr; height: auto; }
+    #ui-split.split { grid-template-columns: 1fr; }
 }
 
 /* Flash on every state change in competition mode: yellow that
@@ -211,6 +219,10 @@ aside#ui-runall #runall-table {
 }
 .system-item {
     display: inline-block;
+    /* Don't let flex compress a slab below its (nowrap) text — a shrunk
+       slab overflows its own box, and those overflows add up into a
+       page-wide horizontal scrollbar. Keep natural width; wrap instead. */
+    flex: 0 0 auto;
     padding: 4px 8px;
     cursor: pointer;
     font-family: monospace;
@@ -238,7 +250,10 @@ aside#ui-runall #runall-table {
     line-height: 1.2;
     white-space: nowrap;
     pointer-events: none;
-    visibility: hidden;
+    /* display:none (not visibility:hidden) so the balloon isn't laid out
+       until hover — a laid-out, wider-than-slab absolute balloon on every
+       slab otherwise inflates the page's scroll width (horizontal scroll). */
+    display: none;
     z-index: 10;
 }
 
@@ -253,13 +268,13 @@ aside#ui-runall #runall-table {
     border-top-color: #000;
     border-bottom-width: 0;
     pointer-events: none;
-    visibility: hidden;
+    display: none;
     z-index: 10;
 }
 
 .system-item:hover::after,
 .system-item:hover::before {
-    visibility: visible;
+    display: block;
 }
 .system-item:hover { filter: brightness(0.95); }
 .system-item.selected {
@@ -276,7 +291,71 @@ aside#ui-runall #runall-table {
 }
 .system-item.state-down        { background: #f6d1ce; color: var(--bad); }
 
+/* Multi-selection ("compare selected systems"): bright blue, overriding
+   the state color. Placed after the state rules so it wins on equal
+   specificity. */
+.system-item.multi-selected {
+    background: #1a8cff;
+    color: #fff;
+    border-color: #0a5bd0;
+    font-weight: 600;
+}
+.system-item.multi-selected:hover { filter: brightness(1.08); }
+/* Keep the single-selection outline readable on top of blue. */
+.system-item.multi-selected.selected { outline-color: #002b6b; }
+
+/* Discoverability hint for multi-selection. On pointer devices it sits
+   in the top-right corner and fades in while the system list is hovered.
+   On touch devices (no hover) it falls back to a static muted caption
+   under the list so the long-press gesture is still discoverable. */
+#multi-hint {
+    position: fixed;
+    top: 10px;
+    right: 12px;
+    /* ~400px wraps the tip to two lines; never wider than the viewport. */
+    width: 400px;
+    max-width: calc(100vw - 24px);
+    background: #000;
+    color: #fff;
+    font-size: 12px;
+    line-height: 1.35;
+    padding: 8px 12px;
+    border-radius: 6px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    pointer-events: none;
+    /* Below the slabs' uptime balloons (z-index:10) so a balloon that
+       overlaps the tip stays readable on top of it. */
+    z-index: 9;
+}
+#multi-hint b { color: var(--accent); font-weight: 600; }
+.system-list:hover + #multi-hint { opacity: 1; transform: translateY(0); }
+
+@media (hover: none) {
+    #multi-hint {
+        position: static;
+        width: auto;
+        max-width: none;
+        margin-top: 8px;
+        padding: 0;
+        opacity: 1;
+        transform: none;
+        background: transparent;
+        color: var(--muted);
+        box-shadow: none;
+        pointer-events: auto;
+    }
+    #multi-hint b { color: var(--fg); }
+}
+
 select { padding: 0.5em; border-radius: 0; }
+/* The example dropdown's options carry long query text; without a cap the
+   <select> grows to the widest option and pushes the page wider than the
+   viewport (horizontal scroll on mobile). min-width:0 lets it shrink as a
+   flex item; max-width keeps it within the row. */
+#example { min-width: 0; max-width: 100%; }
 
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }