Upload index.html with huggingface_hub

index.html

@@ -403,9 +403,18 @@
 
     async function loadModels() {
       ALL_MODELS = await query(`
-        SELECT DISTINCT model, model_display_name, is_checkpoint
-        FROM scores
-        ORDER BY is_checkpoint DESC, model_display_name
+        WITH raw AS (
+          SELECT DISTINCT model, model_display_name, is_checkpoint
+          FROM scores
+        ),
+        ckpt_models AS (
+          SELECT model FROM raw WHERE is_checkpoint = true
+        )
+        SELECT r.model, r.model_display_name, r.is_checkpoint
+        FROM raw r
+        WHERE r.is_checkpoint = true
+           OR r.model NOT IN (SELECT model FROM ckpt_models)
+        ORDER BY r.is_checkpoint DESC, r.model_display_name
       `);
 
       // Assign colors: config overrides first, then fallback palette
@@ -591,17 +600,19 @@
             const tip = name.dataset.missingTip;
             if (!tip) return;
             const tooltip = document.getElementById('custom-tooltip');
-            tooltip.textContent = tip;
-            tooltip.classList.remove('scrollable');
+            if (tooltip.classList.contains('scrollable')) return;
+            tooltip.innerHTML = tip;
             tooltip.style.display = 'block';
+            tooltip._modelTip = true;
             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')) {
+            if (tooltip._modelTip) {
               tooltip.style.display = 'none';
+              tooltip._modelTip = false;
             }
           });
 
@@ -889,32 +900,45 @@
         const rootKeys = Object.keys(subtaskTree).filter(k => !allChildren.has(k));
         const html = this.renderSubtaskTree(subtaskTree, rootKeys);
 
+        const positionTooltip = () => {
+          const titleEl = this.el.chart.querySelector('.gtitle');
+          const chartRect = this.el.chart.getBoundingClientRect();
+          const tw = tooltip.offsetWidth;
+          let tipTop;
+          if (titleEl) {
+            const titleRect = titleEl.getBoundingClientRect();
+            const titleCenter = (titleRect.left + titleRect.right) / 2;
+            tooltip.style.left = (titleCenter - tw / 2) + 'px';
+            tipTop = titleRect.bottom + 4;
+          } else {
+            tooltip.style.left = (chartRect.left + chartRect.width / 2 - tw / 2) + 'px';
+            tipTop = chartRect.top + 40;
+          }
+          tooltip.style.top = tipTop + 'px';
+          tooltip.style.maxHeight = Math.max(0, chartRect.bottom - tipTop) + 'px';
+        };
+
         this._titleClick = (e) => {
           // Toggle: if already visible for this panel, hide it
           if (tooltip.style.display === 'block' && tooltip._panelId === this.id) {
             tooltip.style.display = 'none';
             tooltip.classList.remove('scrollable');
             tooltip._panelId = null;
+            window.removeEventListener('scroll', this._titleScroll, true);
             return;
           }
           tooltip.innerHTML = html;
           tooltip.classList.add('scrollable');
           tooltip.style.display = 'block';
           tooltip._panelId = this.id;
-          // Position: top-left of tooltip below bottom-left of title text
-          const titleEl = this.el.chart.querySelector('.gtitle');
-          const chartRect = this.el.chart.getBoundingClientRect();
-          const tw = tooltip.offsetWidth;
-          if (titleEl) {
-            const titleRect = titleEl.getBoundingClientRect();
-            const titleCenter = (titleRect.left + titleRect.right) / 2;
-            tooltip.style.left = (titleCenter - tw / 2) + 'px';
-            tooltip.style.top = (titleRect.bottom + 4) + 'px';
-          } else {
-            tooltip.style.left = (chartRect.left + chartRect.width / 2 - tw / 2) + 'px';
-            tooltip.style.top = (chartRect.top + 40) + 'px';
+          positionTooltip();
+          window.addEventListener('scroll', this._titleScroll, true);
+        };
+
+        this._titleScroll = () => {
+          if (tooltip.style.display === 'block' && tooltip._panelId === this.id) {
+            positionTooltip();
           }
-          tooltip.style.maxHeight = chartRect.height + 'px';
         };
 
         this._titleOutsideClick = (e) => {
@@ -923,6 +947,7 @@
           tooltip.style.display = 'none';
           tooltip.classList.remove('scrollable');
           tooltip._panelId = null;
+          window.removeEventListener('scroll', this._titleScroll, true);
         };
 
         hoverZone.addEventListener('click', this._titleClick);
@@ -977,6 +1002,10 @@
           hz.style.display = 'none';
           this._titleClick = null;
         }
+        if (this._titleScroll) {
+          window.removeEventListener('scroll', this._titleScroll, true);
+          this._titleScroll = null;
+        }
         if (this._titleOutsideClick) {
           document.removeEventListener('mousedown', this._titleOutsideClick);
           this._titleOutsideClick = null;
@@ -1087,7 +1116,8 @@
         const annotations = names.map((name, i) => ({
           x: 0,
           y: name,
-          text: 'tokens trained: ' + tokens[i],
+          text: tokens[i],
+          hovertext: 'Tokens Trained',
           xanchor: 'left',
           yanchor: 'middle',
           showarrow: false,