Upload index.html with huggingface_hub

index.html

@@ -148,6 +148,14 @@
       cursor: pointer;
       accent-color: #4361ee;
     }
+    .checkbox-item .model-name.missing {
+      text-decoration: line-through;
+      opacity: 0.5;
+      cursor: help;
+    }
+    .checkbox-item .model-name.missing:hover {
+      opacity: 0.8;
+    }
     .model-separator {
       width: 100%;
       border-top: 1px solid #eee;
@@ -572,12 +580,31 @@
           dot.style.cssText = `display:inline-block;width:9px;height:9px;border-radius:50%;background:${MODEL_COLORS[m.model_display_name]}`;
 
           const name = document.createElement('span');
+          name.className = 'model-name';
+          name.dataset.modelName = m.model_display_name;
           name.textContent = ' ' + m.model_display_name;
           if (!m.is_checkpoint) {
             name.style.fontStyle = 'italic';
-            name.title = 'Baseline';
           }
 
+          name.addEventListener('mouseenter', (e) => {
+            const tip = name.dataset.missingTip;
+            if (!tip) return;
+            const tooltip = document.getElementById('custom-tooltip');
+            tooltip.textContent = tip;
+            tooltip.classList.remove('scrollable');
+            tooltip.style.display = 'block';
+            const rect = name.getBoundingClientRect();
+            tooltip.style.left = (rect.left) + 'px';
+            tooltip.style.top = (rect.bottom + 4) + 'px';
+          });
+          name.addEventListener('mouseleave', () => {
+            const tooltip = document.getElementById('custom-tooltip');
+            if (!tooltip.classList.contains('scrollable')) {
+              tooltip.style.display = 'none';
+            }
+          });
+
           lbl.append(cb, dot, name);
           container.appendChild(lbl);
         }
@@ -680,20 +707,49 @@
         await this.renderChart();
       }
 
+      async updateMissingModels(task, metric) {
+        const nameEls = this.el.models.querySelectorAll('.model-name');
+        if (!task || !metric) {
+          nameEls.forEach(el => {
+            el.classList.remove('missing');
+            delete el.dataset.missingTip;
+          });
+          return;
+        }
+        const available = await query(`
+          SELECT DISTINCT model_display_name FROM scores
+          WHERE task = '${esc(task)}' AND metric = '${esc(metric)}'
+            AND tokens_trained IS NOT NULL
+        `);
+        const availableSet = new Set(available.map(r => r.model_display_name));
+        nameEls.forEach(el => {
+          const modelName = el.dataset.modelName;
+          if (!availableSet.has(modelName)) {
+            el.classList.add('missing');
+            el.dataset.missingTip = `No scores for "${modelName}" on this task / metric`;
+          } else {
+            el.classList.remove('missing');
+            delete el.dataset.missingTip;
+          }
+        });
+      }
+
       // ── Chart rendering ────────────────────────────────────────
       async renderChart() {
         const task = this.getSelectedTask();
         const metric = this.el.metric.value;
         const models = this.getSelectedModels();
 
+        await this.updateMissingModels(task, metric);
+
         if (!task || !metric || models.length === 0) {
           this.el.chart.innerHTML = '';
           return;
         }
 
         const rows = await query(`
-          SELECT model_display_name, tokens_trained, score, score_stderr,
-                 is_checkpoint, higher_is_better
+          SELECT model, model_display_name, tokens_trained, score, score_stderr,
+                 is_checkpoint, higher_is_better, step
           FROM scores
           WHERE task = '${esc(task)}'
             AND metric = '${esc(metric)}'
@@ -707,9 +763,12 @@
           return;
         }
 
+        // Merge final checkpoints (step=null) into matching checkpoint series
+        const mergedRows = this.mergeFinalCheckpoints(rows);
+
         // Determine chart type
-        const chartType = this.resolveChartType(rows);
-        const higherIsBetter = rows[0]?.higher_is_better;
+        const chartType = this.resolveChartType(mergedRows);
+        const higherIsBetter = mergedRows[0]?.higher_is_better;
 
         // Fetch subtask tree JSON from the data
         let subtaskTree = null;
@@ -728,10 +787,46 @@
         }
 
         if (chartType === 'bar') {
-          this.drawBarChart(rows, task, metric, higherIsBetter, subtaskTree);
+          this.drawBarChart(mergedRows, task, metric, higherIsBetter, subtaskTree);
         } else {
-          this.drawLineChart(rows, task, metric, higherIsBetter, subtaskTree);
+          this.drawLineChart(mergedRows, task, metric, higherIsBetter, subtaskTree);
+        }
+      }
+
+      mergeFinalCheckpoints(rows) {
+        // Final checkpoints have step=null. If a matching checkpoint series
+        // exists (same `model` id), append the final checkpoint to that series.
+        const regular = [];
+        const finals = [];
+        for (const r of rows) {
+          if (r.step === null || r.step === undefined) {
+            finals.push(r);
+          } else {
+            regular.push(r);
+          }
+        }
+        if (finals.length === 0) return rows;
+
+        // Map model id -> series model_display_name for checkpoint series
+        const modelToSeries = {};
+        for (const r of regular) {
+          if (r.is_checkpoint) {
+            modelToSeries[r.model] = r.model_display_name;
+          }
+        }
+
+        const result = [...regular];
+        for (const fc of finals) {
+          const seriesName = modelToSeries[fc.model];
+          if (seriesName) {
+            // Append to matching checkpoint series
+            result.push({ ...fc, model_display_name: seriesName, is_checkpoint: true });
+          } else {
+            // No matching series, keep as-is
+            result.push(fc);
+          }
         }
+        return result;
       }
 
       resolveChartType(rows) {