Update page

app.js

@@ -478,7 +478,8 @@ function buildTables(filtered, chartsShown) {
     // Resolve table_sort: family-specific overrides global
     const familyCfg = config.model_families?.[filters.family] || {};
     const sortRules = familyCfg.table_sort || config.table_sort || [];
-    const tableGroupBy = familyCfg.table_group_by || "";
+    const tableGroupBy = familyCfg.table_group_by || config.table_group_by || "";
+    const tableGroupCols = Array.isArray(tableGroupBy) ? tableGroupBy : (tableGroupBy ? [tableGroupBy] : []);
 
     groupVals.forEach(gv => {
         const rows = filtered.filter(r => String(r[GROUP_BY]) === String(gv));
@@ -521,33 +522,60 @@ function buildTables(filtered, chartsShown) {
 
         let html = chartsShown ? '' : `<h3>${heading}</h3>`;
         html += `<div class="table-scroll"><table><thead><tr>`;
-        html += colDefs.map(c => {
+        const firstMetricIdx = colDefs.findIndex(c => c.isMetric);
+        html += colDefs.map((c, i) => {
             const tip = c.description ? ` data-tip="${c.description.replace(/"/g, '&quot;')}"` : '';
-            return `<th${tip}>${c.label}</th>`;
+            const cls = i === firstMetricIdx ? ' class="first-metric"' : '';
+            return `<th${tip}${cls}>${c.label}</th>`;
         }).join("");
         html += `</tr></thead><tbody>`;
 
+        // Compute best metric value per sub-group (tableGroupBy) per column
+        const bestByGroup = {};
+        const groupRowKey = r => tableGroupCols.length
+            ? tableGroupCols.map(c => String(r[c] ?? "")).join("\0")
+            : "__all__";
+        const subGroups = tableGroupCols.length
+            ? [...new Set(rows.map(groupRowKey))]
+            : ["__all__"];
+        subGroups.forEach(sg => {
+            const groupRows = tableGroupCols.length ? rows.filter(r => groupRowKey(r) === sg) : rows;
+            bestByGroup[sg] = {};
+            colDefs.filter(c => c.isMetric).forEach(c => {
+                const metricCfg = config.metrics.find(m => m.column === c.key);
+                const vals = groupRows.map(r => r[c.key]).filter(v => v !== null && v !== undefined);
+                if (vals.length) {
+                    bestByGroup[sg][c.key] = metricCfg?.higher_is_better ? Math.max(...vals) : Math.min(...vals);
+                }
+            });
+        });
+
         rows.forEach(r => {
             const oom = isOOMRow(r);
             let rowClass = "";
-            if (tableGroupBy) {
-                const curVal = String(r[tableGroupBy] ?? "");
+            if (tableGroupCols.length) {
+                const curVal = groupRowKey(r);
                 if (prevGroupVal !== undefined && curVal !== prevGroupVal) {
                     rowClass = "row-group-break";
                 }
                 prevGroupVal = curVal;
             }
             html += `<tr class="${rowClass}">`;
-            colDefs.forEach(c => {
+            colDefs.forEach((c, i) => {
                 const val = r[c.key];
+                const fmCls = i === firstMetricIdx ? ' class="first-metric"' : '';
                 if (c.isModel) {
                     const hfUrl = LINK_PREFIX + val;
                     const modelColor = MODEL_COLORS[val]?.border || '#888';
                     html += `<td class="model-cell"><span class="model-dot" style="background:${modelColor}"></span><a href="${hfUrl}" target="_blank" rel="noopener" style="color:${modelColor}">${val}</a></td>`;
                 } else if (oom) {
-                    html += `<td><span class="oom">OOM</span></td>`;
+                    html += `<td${fmCls}><span class="oom">OOM</span></td>`;
                 } else if (c.isMetric) {
-                    html += `<td>${val === null ? '<span class="oom">OOM</span>' : (val ?? "—")}</td>`;
+                    const sg = groupRowKey(r);
+                    const isBest = val !== null && val !== undefined && val === bestByGroup[sg]?.[c.key];
+                    const display = val === null ? '<span class="oom">OOM</span>' : (typeof val === "number" ? val.toFixed(2) : (val ?? "—"));
+                    const modelColor = MODEL_COLORS[r[MODEL_COL]]?.border || '#888';
+                    html += `<td${fmCls}>${isBest ? '<strong style="color:' + "white" + '; opacity: 0.7">' + display + '</strong>' : display}</td>`;
                 } else {
                     html += `<td>${val || "—"}</td>`;
                 }

config.json

@@ -1,6 +1,6 @@
 {
   "title": "Edge Inference Benchmarks",
-  "subtitle": "Compare throughput and latency across devices and model variants. Use filters to focus on what matters.",
+  "subtitle": "Compare throughput and latency across devices and model variants.",
   "model_column": "model",
   "model_family_column": "model_family",
   "model_link_prefix": "https://huggingface.co/",
@@ -129,7 +129,7 @@
   "model_families": {
     "Cosmos-Reason2-2B": {
       "data_file": "data/cosmos-reason2.csv",
-      "table_group_by": "res",
+      "table_group_by": ["res", "fps"],
       "experiment_setup": {
         "agx_thor": "Measurement setup: NVIDIA vLLM 26.01, 256 tokens generated, 10 warm-up runs, averaged over 25 runs.",
         "agx_orin": "Measurement setup: NVIDIA vLLM 0.14.0 for Jetson, 256 tokens generated, 10 warm-up runs, averaged over 25 runs.",

data/cosmos-reason2.csv

@@ -62,9 +62,6 @@ Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,854x480,2,6,3.
 Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,854x480,4,12,3.9974,512.34,11.43,349.00
 Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,orin_nano_super,1280x720,2,6,7.7657,263.72,19.47,918.23
 Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,orin_nano_super,1280x720,4,12,10.2787,199.25,29.04,918.25
-Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,orin_nano_super,1920x1080,2,6,OOM,OOM,OOM,OOM
-Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,orin_nano_super,1920x1080,4,12,OOM,OOM,OOM,OOM
-Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,orin_nano_super,854x480,4,12,OOM,OOM,OOM,OOM
 Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,agx_orin,1280x720,N/A,N/A,3.5585,71.94,11.69,57.02
 Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,agx_orin,1920x1080,N/A,N/A,3.4224,74.80,11.68,54.49
 Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,agx_orin,854x480,N/A,N/A,3.5028,73.08,11.67,56.27
@@ -154,9 +151,6 @@ Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,854x480,2,6,5.0284,5
 Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,854x480,4,12,4.5504,56.26,17.01,123.61
 Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,orin_nano_super,OOM,OOM,OOM,OOM,OOM,OOM,OOM
 Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_orin,1280x720,2,6,10.2747,199.33,29.03,918.06
-Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_orin,1280x720,4,12,OOM,OOM,OOM,OOM
-Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_orin,1920x1080,2,6,OOM,OOM,OOM,OOM
-Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_orin,1920x1080,4,12,OOM,OOM,OOM,OOM
 Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1280x720,2,6,7.0704,289.66,19.80,778.89
 Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1280x720,4,12,7.0242,291.56,19.61,779.39
 Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1920x1080,2,6,10.1481,201.81,22.92,1749.06

style.css

@@ -13,7 +13,7 @@
     --text: #e8e8e8;
     --text-muted: #8899aa;
     --text-dim: #5a6a7a;
-    --border: rgba(255, 255, 255, 0.06);
+    --border: rgba(255, 255, 255, 0.15);
     --btn-hover-bg: rgba(255, 255, 255, 0.03);
     --btn-active-bg: rgba(88, 177, 195, 0.12);
     --btn-active-border: rgba(88, 177, 195, 0.3);
@@ -316,7 +316,7 @@ tbody td {
 }
 
 tbody tr:last-child td {
-    border-bottom: none;
+    border-bottom: 1px solid var(--border);
 }
 
 tbody tr:hover {
@@ -348,6 +348,10 @@ tbody tr:hover {
     flex-shrink: 0;
 }
 
+th.first-metric, td.first-metric {
+    padding-left: 2.5rem;
+}
+
 .oom {
     color: var(--red);
     font-weight: 600;