fixed average col

frontend/leaderboard.html

@@ -195,6 +195,11 @@
             left: var(--sticky-avg-left, 620px) !important;
             z-index: 28 !important;
             box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+            font-weight: 700 !important;
+        }
+
+        #table-wrapper table.gridjs-table tbody td:nth-child(3) * {
+            font-weight: 700 !important;
         }
 
         .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
@@ -212,27 +217,44 @@
             position: sticky !important;
             left: var(--sticky-avg-left, 620px) !important;
             z-index: 30 !important;
-            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+            background: #ffffff !important;
+            font-weight: 700 !important;
+        }
+
+        #table-wrapper .gridjs-td.avg-col-header * {
+            font-weight: 700 !important;
         }
 
         #table-wrapper .gridjs-th.avg-col-header {
-            background: #f1f5f9 !important;
+            background: #f8faff !important;
             z-index: 39 !important;
             top: 0 !important;
         }
 
-        #table-wrapper .gridjs-td.avg-col-header {
-            background: #fff !important;
-        }
-
         .dark #table-wrapper .gridjs-th.avg-col-header {
-            background: #0f172a !important;
-            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+            background: #1e2235 !important;
         }
 
         .dark #table-wrapper .gridjs-td.avg-col-header {
-            background: #1e293b !important;
-            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+            background: #222639 !important;
+        }
+
+        #avg-col-highlight {
+            position: absolute;
+            top: 0;
+            pointer-events: none;
+            z-index: 2;
+            border-radius: 6px;
+            background: transparent;
+            border-left: 1px solid rgba(100, 116, 139, 0.25);
+            border-right: 1px solid rgba(100, 116, 139, 0.25);
+            box-shadow: -2px 0 8px rgba(0,0,0,0.07), 2px 0 8px rgba(0,0,0,0.07);
+        }
+
+        .dark #avg-col-highlight {
+            border-left: 1px solid rgba(148, 163, 184, 0.2);
+            border-right: 1px solid rgba(148, 163, 184, 0.2);
+            box-shadow: -2px 0 10px rgba(0,0,0,0.25), 2px 0 10px rgba(0,0,0,0.25);
         }
 
         .dark .gridjs-head,
@@ -269,7 +291,12 @@
         th.gridjs-th,
         td.gridjs-td {
             border-left: none !important;
-            border-right: none !important;
+            border-right: 1px solid rgba(148, 163, 184, 0.15) !important;
+        }
+
+        .dark th.gridjs-th,
+        .dark td.gridjs-td {
+            border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
         }
 
         .line-clamp-2-custom {
@@ -630,11 +657,6 @@
                 </div>
             </div>
 
-            <!-- Precision -->
-            <div>
-                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Precision</label>
-                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3" id="precisionFilterContainer"></div>
-            </div>
 
             <!-- Type & License -->
             <div
@@ -885,9 +907,6 @@
                             class="w-3.5 h-3.5"></i> <span id="modalLicense">--</span></span>
                     <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
 
-                    <span class="flex items-center gap-1" title="Precision"><i data-lucide="cpu"
-                            class="w-3.5 h-3.5"></i> <span id="modalPrecision">--</span></span>
-                    <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
 
                     <!-- <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit"
                             class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">--</span></span> -->
@@ -1481,8 +1500,6 @@
                     // We don't have an ID for downloads yet in the static HTML, so we rely on the injected HTML below
                     const modalLicenseEl = $('#modalLicense');
                     if (modalLicenseEl) modalLicenseEl.innerText = asUnknown(model["License"]);
-                    const modalPrecisionEl = $('#modalPrecision');
-                    if (modalPrecisionEl) modalPrecisionEl.innerText = asUnknown(model["Precision"]);
                     const modalRevisionEl = $('#modalRevision');
                     if (modalRevisionEl) modalRevisionEl.innerText = revision;
 
@@ -1492,8 +1509,6 @@
         <span class="flex items-center gap-1" title="License"><i data-lucide="scale" class="w-3.5 h-3.5"></i> <span id="modalLicense">${asUnknown(model["License"])}</span></span>
         <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
 
-        <span class="flex items-center gap-1" title="Precision"><i data-lucide="cpu" class="w-3.5 h-3.5"></i> <span id="modalPrecision">${asUnknown(model["Precision"])}</span></span>
-        <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
 
         <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit" class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">${revision}</span></span>
         <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
@@ -1660,6 +1675,28 @@
                     return true;
                 }
 
+                function updateAvgColHighlight() {
+                    const wrapper = $('#table-wrapper');
+                    const outer = $('#table-outer');
+                    if (!wrapper || !outer) return;
+                    const th = wrapper.querySelector('th.avg-col-header');
+                    if (!th) return;
+
+                    let highlight = $('#avg-col-highlight');
+                    if (!highlight) {
+                        highlight = document.createElement('div');
+                        highlight.id = 'avg-col-highlight';
+                        outer.appendChild(highlight);
+                    }
+
+                    const outerRect = outer.getBoundingClientRect();
+                    const thRect = th.getBoundingClientRect();
+
+                    highlight.style.left = `${thRect.left - outerRect.left}px`;
+                    highlight.style.width = `${thRect.width}px`;
+                    highlight.style.height = `${outer.offsetHeight}px`;
+                }
+
                 function initGradientScroll() {
                     const wrapper = $('#table-wrapper');
                     const outer = $('#table-outer');
@@ -1669,6 +1706,7 @@
                         const ratio = max > 0 ? wrapper.scrollTop / max : 0;
                         outer.style.setProperty('--green-opacity', (0.07 * (1 - ratio)).toFixed(3));
                         outer.style.setProperty('--red-opacity', (0.07 * ratio).toFixed(3));
+                        updateAvgColHighlight();
                     }, { passive: true });
                 }
 
@@ -1676,7 +1714,14 @@
                     let attempts = 0;
                     const run = () => {
                         const ok = applyStickyModelNameColumn();
-                        if (ok || attempts >= retries) return;
+                        if (ok) {
+                            updateAvgColHighlight();
+                            // Re-run after layout settles to fix first-load position
+                            setTimeout(() => requestAnimationFrame(updateAvgColHighlight), 100);
+                            setTimeout(() => requestAnimationFrame(updateAvgColHighlight), 400);
+                            return;
+                        }
+                        if (attempts >= retries) return;
                         attempts += 1;
                         setTimeout(() => requestAnimationFrame(run), 40);
                     };
@@ -1690,7 +1735,7 @@
                     const maxSz = (parseInt($('#maxSizeSlider').value) === maxMeta) ? 99999 : parseInt($('#maxSizeSlider').value);
 
                     const getVals = cls => $$(`.${cls}:checked`).map(c => c.value);
-                    const [precs, types, lics] = [getVals('precision-chk'), getVals('type-chk'), getVals('license-chk')];
+                    const [types, lics] = [getVals('type-chk'), getVals('license-chk')];
 
                     // 1. Filter Data
                     let filtered = lbData.filter(r =>
@@ -1700,7 +1745,7 @@
                             const sizeValue = s === null ? 0 : s;
                             return sizeValue >= minSz && sizeValue <= maxSz;
                         })() &&
-                        (!precs.length || precs.includes(r["Precision"])) &&
+
                         (!types.length || types.includes(r["Full Type"])) &&
                         (!lics.length || lics.includes(r["License"]))
                     ).map(row => ({ ...row }));
@@ -1773,7 +1818,7 @@
 
                     tableColumns = keys.map(key => {
                         const isScore = EVAL_COLUMNS.includes(key), isAvg = key.includes("Average");
-                        let name = key;
+                        let name = isAvg ? key.toUpperCase() : key;
                         let icon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
                         let cls = "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300";
 
@@ -1851,6 +1896,11 @@
 
                             def.formatter = (c, r) => {
                                 const modelName = (modelNameIdx > -1 && r.cells[modelNameIdx]) ? r.cells[modelNameIdx].data : "";
+                                if (isAvg) {
+                                    const n = parseFloat(c); if (isNaN(n)) return c;
+                                    const h = (Math.max(0, Math.min(100, n)) / 100) * 120;
+                                    return gridjs.html(`<div class="flex justify-center"><div style="background: linear-gradient(to right, hsla(${h},100%,45%,0.55) ${n}%, hsla(${h},100%,45%,0.07) ${n}%); border: 1.5px solid hsla(${h},90%,40%,0.65);" class="w-24 py-1 rounded-md text-center text-xs font-bold text-slate-700 dark:text-slate-200 shadow-sm">${n.toFixed(2)}<span class="text-[10px] font-normal opacity-70 ml-0.5">%</span></div></div>`);
+                                }
                                 return shouldUseBar ? renderBar(c, modelName, key) : renderRaw(c, modelName, key);
                             };
 
@@ -1911,7 +1961,6 @@
                             : `<label class="inline-flex items-center p-2 border border-slate-200 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 hover:bg-white transition cursor-pointer"><input type="checkbox" value="${v}" class="${cls} form-checkbox h-4 w-4 text-indigo-600 rounded" checked onchange="window.applyFilters()"><span class="ml-2 text-xs font-medium text-slate-700 dark:text-slate-200">${v}</span></label>`
                         ).join('');
                     };
-                    createInputs('#precisionFilterContainer', 'Precision', 'precision-chk', 'box');
                     createInputs('#typeFilterContainer', 'Full Type', 'type-chk', 'pill');
                     createInputs('#licenseFilterContainer', 'License', 'license-chk', 'pill');
                 }
@@ -1919,7 +1968,7 @@
                 function buildColMenuDOM() {
                     const addBtns = (grp, el) => {
                         $(el).innerHTML = '';
-                        tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type"].includes(c.id)).forEach(c => {
+                        tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type", "Precision"].includes(c.id)).forEach(c => {
                             const b = document.createElement('button');
                             b.innerText = c.id.includes("Average") ? "Average" : (c.id === "Model Size Filter" ? "Params" : c.id);
                             b.className = `px-2 py-1 text-xs font-medium rounded-md border transition-all select-none ${!c.hidden ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300"}`;