Merge pull request #495 from MDA2AV/site/grp

group implementations, improve framework card

Author: MDA2AV

scripts/benchmark.sh

@@ -79,26 +79,47 @@ rebuild_site_data() {
     local site_data="$ROOT_DIR/site/data"
     mkdir -p "$site_data"
 
-    # Rebuild frameworks.json from individual meta.json files
+    # Rebuild frameworks.json from individual meta.json files.
+    # Hybrid shape: the "primary" entry fields (dir/description/repo/type/engine)
+    # stay at top level for backwards compatibility with all leaderboards.
+    # Additional entries that share the same display_name go in `variants`
+    # (read only by the composite popup to show every aggregated variant).
+    # Primary is chosen as the entry whose dir matches the display_name, or
+    # the first alphabetically.
     local fw_json="$site_data/frameworks.json"
-    echo '{' > "$fw_json"
-    local fw_first=true
-    for fw_dir in "$ROOT_DIR"/frameworks/*/; do
-        [ -d "$fw_dir" ] || continue
-        local fw=$(basename "$fw_dir")
-        local meta="$fw_dir/meta.json"
-        [ -f "$meta" ] || continue
-        $fw_first || echo ',' >> "$fw_json"
-        local dn=$(python3 -c "import json,sys; d=json.load(open(sys.argv[1])); print(d.get('display_name',sys.argv[2]))" "$meta" "$fw")
-        local desc=$(python3 -c "import json,sys; print(json.load(open(sys.argv[1])).get('description',''))" "$meta")
-        local repo=$(python3 -c "import json,sys; print(json.load(open(sys.argv[1])).get('repo',''))" "$meta")
-        local ftype=$(python3 -c "import json,sys; print(json.load(open(sys.argv[1])).get('type','realistic'))" "$meta")
-        local engine=$(python3 -c "import json,sys; print(json.load(open(sys.argv[1])).get('engine',''))" "$meta")
-        printf '  "%s": {"dir": "%s", "description": "%s", "repo": "%s", "type": "%s", "engine": "%s"}' "$dn" "$fw" "$desc" "$repo" "$ftype" "$engine" >> "$fw_json"
-        fw_first=false
-    done
-    echo '' >> "$fw_json"
-    echo '}' >> "$fw_json"
+    python3 - "$ROOT_DIR" > "$fw_json" <<'PYEOF'
+import json, sys, os, glob
+root = sys.argv[1]
+groups = {}
+for meta_path in sorted(glob.glob(os.path.join(root, "frameworks", "*", "meta.json"))):
+    fw_dir = os.path.basename(os.path.dirname(meta_path))
+    try:
+        with open(meta_path) as f:
+            m = json.load(f)
+    except Exception:
+        continue
+    display = m.get("display_name", fw_dir)
+    entry = {
+        "dir": fw_dir,
+        "description": m.get("description", ""),
+        "repo": m.get("repo", ""),
+        "type": m.get("type", "realistic"),
+        "engine": m.get("engine", ""),
+    }
+    groups.setdefault(display, []).append(entry)
+
+out = {}
+for display, entries in groups.items():
+    # Primary = the one whose dir == display_name, else first alphabetical
+    entries_sorted = sorted(entries, key=lambda e: e["dir"])
+    primary = next((e for e in entries_sorted if e["dir"] == display), entries_sorted[0])
+    variants = [e for e in entries_sorted if e["dir"] != primary["dir"]]
+    obj = dict(primary)
+    if variants:
+        obj["variants"] = variants
+    out[display] = obj
+print(json.dumps(out, indent=2))
+PYEOF
     echo "[updated] site/data/frameworks.json"
 
     for profile_dir in "$RESULTS_DIR"/*/; do

site/data/baseline-h3-256.json

@@ -1009,24 +1009,46 @@
       if (r.framework === 'genhttp') {
         popupBadges += '<div style="margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem;"><span style="font-size:1.5rem; filter:brightness(0.7) sepia(1) saturate(3) hue-rotate(-10deg);">\uD83C\uDFC5</span><span style="font-weight:700; font-size:0.95rem; color:#B45309;">Participation Award</span></div><div style="margin-bottom:0.5rem; font-size:0.8rem; font-style:italic; color:#B45309;">He\'s happy to be here</div>';
       }
-      var popupBadgeSection = popupBadges ? '<div style="margin:0.75rem 0; padding:0.75rem; background:rgba(0,0,0,0.02); border-radius:8px; border:1px solid rgba(0,0,0,0.06);">' + popupBadges + '</div>' : '';
+      // Awards section collapsed by default (<details>) — was occupying too much vertical space
+      var popupBadgeSection = popupBadges
+        ? '<details class="lb-popup-awards" style="margin:0.75rem 0; padding:0.6rem 0.75rem; background:rgba(0,0,0,0.02); border-radius:8px; border:1px solid rgba(0,0,0,0.06);">'
+          + '<summary style="cursor:pointer; font-weight:600; font-size:0.85rem; color:#475569; user-select:none;">Awards &amp; Badges</summary>'
+          + '<div style="margin-top:0.6rem;">' + popupBadges + '</div>'
+          + '</details>'
+        : '';
+
+      // Build one "variant" section per framework directory sharing this display_name.
+      // `fmeta.variants` contains sibling entries; we merge primary + variants into one list.
+      var variantsList = [{ dir: fmeta.dir || r.framework, description: fmeta.description || '', repo: fmeta.repo || '' }];
+      if (Array.isArray(fmeta.variants)) {
+        fmeta.variants.forEach(function(v) {
+          variantsList.push({ dir: v.dir, description: v.description || '', repo: v.repo || '' });
+        });
+      }
+      var variantsHtml = variantsList.map(function(v) {
+        var header = variantsList.length > 1
+          ? '<div style="font-size:0.75rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.04em; margin-top:0.5rem;">' + v.dir + '</div>'
+          : '';
+        var desc = v.description ? '<div class="lb-popup-desc" style="margin-top:0.2rem;">' + v.description + '</div>' : '';
+        var repoLink = v.repo ? '<a class="lb-popup-link" href="' + v.repo + '" target="_blank" rel="noreferrer">View source &rarr;</a>' : '';
+        var benchLink = '<a class="lb-popup-link" href="https://github.com/MDA2AV/HttpArena/tree/main/frameworks/' + encodeURIComponent(v.dir) + '" target="_blank" rel="noreferrer">Benchmark implementation &rarr;</a>';
+        var links = '<div class="lb-popup-links" style="margin-top:0.35rem;">' + repoLink + benchLink + '</div>';
+        return header + desc + links;
+      }).join('');
 
-      var repoHtml = fmeta.repo ? '<a class="lb-popup-link" href="' + fmeta.repo + '" target="_blank" rel="noreferrer">View source &rarr;</a>' : '';
-      var benchHtml = '<a class="lb-popup-link" href="https://github.com/MDA2AV/HttpArena/tree/main/frameworks/' + encodeURIComponent(r.framework) + '" target="_blank" rel="noreferrer">Benchmark implementation &rarr;</a>';
       var overlay = document.createElement('div');
       overlay.className = 'lb-overlay';
       overlay.innerHTML =
         '<div class="lb-popup">' +
           '<button class="lb-popup-close" aria-label="Close">&times;</button>' +
           '<div class="lb-popup-name">' + r.framework + '</div>' +
           '<div class="lb-popup-lang">' + r.language + '</div>' +
-          '<div class="lb-popup-desc">' + (fmeta.description || '') + '</div>' +
+          variantsHtml +
           popupBadgeSection +
           '<div class="lb-popup-stats">' +
             '<div><div class="lb-popup-stat-label">Composite Score</div><div class="lb-popup-stat-value" style="font-size:1.5rem; font-weight:700;">' + r.composite.toFixed(1) + '</div></div>' +
             profileDetails +
           '</div>' +
-          '<div class="lb-popup-links">' + repoHtml + benchHtml + '</div>' +
         '</div>';
       document.body.appendChild(overlay);
       function close() { overlay.remove(); }

site/data/baseline-h3-512.json

@@ -219,13 +219,16 @@
   border-radius: 12px;
   padding: 2rem 2.5rem;
   max-width: 520px; width: 90vw;
+  max-height: 85vh; overflow-y: auto;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
   position: relative;
 }
 .lb-popup-close {
-  position: absolute; top: 1rem; right: 1.25rem;
+  position: sticky; top: 0; float: right;
+  margin: -0.5rem -1rem 0 0;
   background: none; border: none; font-size: 1.4rem;
   color: #94a3b8; cursor: pointer; line-height: 1;
+  z-index: 1;
 }
 .lb-popup-close:hover { color: #334155; }
 .lb-popup-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.25rem; }

site/data/frameworks.json

@@ -1,6 +1,6 @@
 {{ $profiles := slice
-  (dict "id" "baseline-h3" "label" "Baseline (HTTP/3)" "conns" (slice 256 512) "desc" "Same workload as the HTTP/1.1 baseline — <code>GET /baseline2</code> with query parameter parsing — but over HTTP/3 (QUIC) with TLS 1.3. Benchmarked with <code>oha</code> using 128 parallel streams per connection. Measures how efficiently a framework handles HTTP/3 over UDP-based QUIC transport. Container pinned to 64 CPU threads (cores 0-31, 64-95). <a href='/docs/test-profiles/h3/baseline-h3/' class='lb-desc-link'>Learn more &rarr;</a>")
-  (dict "id" "static-h3" "label" "Static Files (HTTP/3)" "conns" (slice 256 512) "desc" "Serves 20 static files of various types and sizes (CSS, JS, HTML, fonts, SVG, WebP, JSON — totaling ~325 KB) over HTTP/3 (QUIC) with TLS 1.3. The load generator (<code>oha</code>) requests all files using 128 parallel streams per connection, simulating a realistic browser page load over QUIC. Container pinned to 64 CPU threads (cores 0-31, 64-95). <a href='/docs/test-profiles/h3/static-h3/' class='lb-desc-link'>Learn more &rarr;</a>")
+  (dict "id" "baseline-h3" "label" "Baseline (HTTP/3)" "conns" (slice 64) "desc" "Same workload as the HTTP/1.1 baseline — <code>GET /baseline2</code> with query parameter parsing — but over HTTP/3 (QUIC) with TLS 1.3. Benchmarked with <code>h2load-h3</code> using 64 connections × 64 streams × 64 threads. Measures how efficiently a framework handles HTTP/3 over UDP-based QUIC transport. Container pinned to 64 CPU threads (cores 0-31, 64-95). <a href='/docs/test-profiles/h3/baseline-h3/' class='lb-desc-link'>Learn more &rarr;</a>")
+  (dict "id" "static-h3" "label" "Static Files (HTTP/3)" "conns" (slice 64) "desc" "Serves 20 static files of various types and sizes (CSS, JS, HTML, fonts, SVG, WebP, JSON — totaling ~325 KB) over HTTP/3 (QUIC) with TLS 1.3. Benchmarked with <code>h2load-h3</code> using 64 connections × 64 streams × 64 threads, simulating a realistic browser page load over QUIC. Container pinned to 64 CPU threads (cores 0-31, 64-95). <a href='/docs/test-profiles/h3/static-h3/' class='lb-desc-link'>Learn more &rarr;</a>")
 }}
 
 {{/* Build JSON data blob for round switching */}}