Upload index.html with huggingface_hub

index.html

@@ -50,36 +50,29 @@
     .btn-danger { color: #e63946; border-color: #e6394640; }
     .btn-danger:hover { background: #e6394610; }
 
+    /* ── Panels grid ────────────────────────────── */
+    #panels-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20px;
+    }
+
     /* ── Panel ───────────────────────────────────── */
     .panel {
       background: #fff;
       border: 1px solid #dee2e6;
       border-radius: 8px;
-      margin-bottom: 20px;
       overflow: hidden;
     }
-    .panel-header {
+    .panel-toolbar {
       display: flex;
       align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
+      justify-content: flex-end;
+      gap: 6px;
+      padding: 6px 10px;
       border-bottom: 1px solid #dee2e6;
       background: #f8f9fa;
     }
-    .panel-title {
-      flex: 1;
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: #1a1a2e;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .panel-info {
-      font-size: 0.7rem;
-      color: #6c757d;
-      font-weight: 400;
-    }
     .panel-controls {
       padding: 16px;
       border-bottom: 1px solid #dee2e6;
@@ -162,8 +155,58 @@
     }
 
     /* ── Chart ───────────────────────────────────── */
+    .panel-chart-wrapper {
+      position: relative;
+    }
     .panel-chart {
       min-height: 100px;
+      overflow: hidden;
+    }
+    .title-hover-zone {
+      position: absolute;
+      top: 0;
+      left: 50px;
+      right: 50px;
+      height: 40px;
+      cursor: pointer;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .title-info-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #e9ecef;
+      color: #495057;
+      font-size: 11px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.6;
+      transition: opacity 0.15s;
+    }
+    .title-hover-zone:hover .title-info-icon {
+      opacity: 1;
+    }
+
+    /* ── Resize handle ──────────────────────────── */
+    .panel-resize-handle {
+      height: 6px;
+      cursor: ns-resize;
+      background: linear-gradient(to bottom, #dee2e6 1px, transparent 1px, transparent 3px, #dee2e6 3px);
+      background-size: 100% 4px;
+      background-position: center;
+      transition: background-color 0.15s;
+    }
+    .panel-resize-handle:hover,
+    .panel-resize-handle.active {
+      background-color: #e9ecef;
     }
     .loading {
       display: flex;
@@ -178,16 +221,23 @@
     .custom-tooltip {
       position: fixed;
       pointer-events: none;
-      background: rgba(0, 0, 0, 0.8);
+      background: rgba(0, 0, 0, 0.85);
       color: #fff;
-      padding: 6px 10px;
+      padding: 8px 12px 12px;
       border-radius: 4px;
-      font-size: 12px;
-      line-height: 1.4;
+      font-size: 11px;
+      line-height: 1.5;
       z-index: 9999;
       display: none;
       white-space: nowrap;
     }
+    .custom-tooltip.scrollable {
+      pointer-events: auto;
+      overflow-y: auto;
+      white-space: normal;
+      min-width: 200px;
+      max-width: 400px;
+    }
 
     /* ── Add panel button ────────────────────────── */
     .add-panel-row {
@@ -381,9 +431,7 @@
         panel.id = `panel-${this.id}`;
 
         panel.innerHTML = `
-          <div class="panel-header">
-            <span class="panel-title" id="ptitle-${this.id}">New Panel</span>
-            <span class="panel-info" id="pinfo-${this.id}"></span>
+          <div class="panel-toolbar">
             <button class="btn btn-sm" id="ptoggle-${this.id}">Collapse</button>
             <button class="btn btn-sm" id="pexport-png-${this.id}">PNG</button>
             <button class="btn btn-sm" id="pexport-svg-${this.id}">SVG</button>
@@ -437,15 +485,17 @@
               <div class="checkbox-grid" id="pmodels-${this.id}"></div>
             </div>
           </div>
-          <div class="panel-chart" id="pchart-${this.id}"></div>
+          <div class="panel-chart-wrapper">
+            <div class="title-hover-zone" id="ptitle-hover-${this.id}" style="display:none"></div>
+            <div class="panel-chart" id="pchart-${this.id}"></div>
+          </div>
+          <div class="panel-resize-handle" id="presize-${this.id}"></div>
         `;
 
         container.appendChild(panel);
 
         // Cache refs
         this.el.panel       = panel;
-        this.el.title       = panel.querySelector(`#ptitle-${this.id}`);
-        this.el.info        = panel.querySelector(`#pinfo-${this.id}`);
         this.el.controls    = panel.querySelector(`#pcontrols-${this.id}`);
         this.el.suite       = panel.querySelector(`#psuite-${this.id}`);
         this.el.group       = panel.querySelector(`#pgroup-${this.id}`);
@@ -455,6 +505,9 @@
         this.el.chartType   = panel.querySelector(`#pchart-type-${this.id}`);
         this.el.models      = panel.querySelector(`#pmodels-${this.id}`);
         this.el.chart       = panel.querySelector(`#pchart-${this.id}`);
+        this.el.titleHover  = panel.querySelector(`#ptitle-hover-${this.id}`);
+        this.el.resize      = panel.querySelector(`#presize-${this.id}`);
+        this.chartHeight    = null; // null = use default
 
         // Events
         panel.querySelector(`#ptoggle-${this.id}`).addEventListener('click', () => this.toggleControls());
@@ -474,6 +527,9 @@
         panel.querySelector(`#pmodels-ckpt-${this.id}`).addEventListener('click', () => this.setModelsByType(true));
         panel.querySelector(`#pmodels-base-${this.id}`).addEventListener('click', () => this.setModelsByType(false));
 
+        // Resize handle drag
+        this.el.resize.addEventListener('mousedown', (e) => this.startResize(e));
+
         this.buildModelCheckboxes();
       }
 
@@ -632,7 +688,6 @@
 
         if (!task || !metric || models.length === 0) {
           this.el.chart.innerHTML = '';
-          this.updateTitle(task, metric);
           return;
         }
 
@@ -649,7 +704,6 @@
 
         if (rows.length === 0) {
           this.el.chart.innerHTML = '<div class="loading">No data for this selection</div>';
-          this.updateTitle(task, metric);
           return;
         }
 
@@ -657,13 +711,27 @@
         const chartType = this.resolveChartType(rows);
         const higherIsBetter = rows[0]?.higher_is_better;
 
+        // Fetch subtask tree JSON from the data
+        let subtaskTree = null;
+        try {
+          const stRows = await query(`
+            SELECT subtask_tree FROM scores
+            WHERE task = '${esc(task)}' AND metric = '${esc(metric)}'
+              AND subtask_tree IS NOT NULL
+            LIMIT 1
+          `);
+          if (stRows.length > 0 && stRows[0].subtask_tree) {
+            subtaskTree = JSON.parse(stRows[0].subtask_tree);
+          }
+        } catch (e) {
+          // ignore
+        }
+
         if (chartType === 'bar') {
-          this.drawBarChart(rows, task, metric, higherIsBetter);
+          this.drawBarChart(rows, task, metric, higherIsBetter, subtaskTree);
         } else {
-          this.drawLineChart(rows, task, metric, higherIsBetter);
+          this.drawLineChart(rows, task, metric, higherIsBetter, subtaskTree);
         }
-
-        this.updateTitle(task, metric, higherIsBetter);
       }
 
       resolveChartType(rows) {
@@ -685,11 +753,112 @@
         return `${task} \u2014 ${metric}${arrow}`;
       }
 
-      updateTitle(task, metric, higherIsBetter) {
-        const w = this.getSmoothing();
-        const smooth = w > 1 ? ` (smooth=${w})` : '';
-        const arrow = higherIsBetter === true ? ' \u2191' : higherIsBetter === false ? ' \u2193' : '';
-        this.el.title.textContent = `${task || '...'} \u2014 ${metric || '...'}${arrow}${smooth}`;
+      renderSubtaskTree(map, keys, depth = 0) {
+        if (!keys || keys.length === 0) return '';
+        const indent = depth * 16;
+        return keys.map(key => {
+          const children = map[key];
+          let html = `<div style="padding-left:${indent}px">${key}</div>`;
+          if (children) {
+            html += this.renderSubtaskTree(map, children, depth + 1);
+          }
+          return html;
+        }).join('');
+      }
+
+      setupTitleTooltip(subtaskTree) {
+        const hoverZone = this.el.titleHover;
+        hoverZone.innerHTML = '';
+        if (!subtaskTree || typeof subtaskTree !== 'object' || Object.keys(subtaskTree).length === 0) {
+          hoverZone.style.display = 'none';
+          return;
+        }
+        hoverZone.style.display = '';
+
+        // Position icon right before the title text
+        const icon = document.createElement('span');
+        icon.className = 'title-info-icon';
+        icon.textContent = 'i';
+        hoverZone.appendChild(icon);
+        const titleEl = this.el.chart.querySelector('.gtitle');
+        if (titleEl) {
+          const wrapperRect = this.el.chart.closest('.panel-chart-wrapper').getBoundingClientRect();
+          const titleRect = titleEl.getBoundingClientRect();
+          icon.style.left = (titleRect.right - wrapperRect.left - 50 + 6) + 'px'; // 50 = hover zone left offset, 6 = gap
+        } else {
+          icon.style.right = '0px';
+        }
+        const tooltip = document.getElementById('custom-tooltip');
+        // Find true roots: keys that never appear as a child value
+        const allChildren = new Set(Object.values(subtaskTree).flat());
+        const rootKeys = Object.keys(subtaskTree).filter(k => !allChildren.has(k));
+        const html = this.renderSubtaskTree(subtaskTree, rootKeys);
+
+        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;
+            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';
+          }
+          tooltip.style.maxHeight = chartRect.height + 'px';
+        };
+
+        this._titleOutsideClick = (e) => {
+          if (tooltip._panelId !== this.id) return;
+          if (tooltip.contains(e.target) || hoverZone.contains(e.target)) return;
+          tooltip.style.display = 'none';
+          tooltip.classList.remove('scrollable');
+          tooltip._panelId = null;
+        };
+
+        hoverZone.addEventListener('click', this._titleClick);
+        document.addEventListener('mousedown', this._titleOutsideClick);
+      }
+
+      startResize(e) {
+        e.preventDefault();
+        const startY = e.clientY;
+        const startH = this.el.chart.offsetHeight;
+        this.el.resize.classList.add('active');
+
+        const onMove = (ev) => {
+          const delta = ev.clientY - startY;
+          const newH = Math.max(200, startH + delta);
+          this.chartHeight = newH;
+          Plotly.relayout(this.el.chart, { height: newH });
+        };
+
+        const onUp = () => {
+          this.el.resize.classList.remove('active');
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+        };
+
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+      }
+
+      getChartHeight(fallback) {
+        return this.chartHeight || fallback;
       }
 
       cleanupTooltip() {
@@ -706,9 +875,24 @@
           chart.removeEventListener('mouseleave', this._tooltipMouseLeave);
           this._tooltipMouseLeave = null;
         }
+        // Clean up title click popup
+        if (this._titleClick) {
+          const hz = this.el.titleHover;
+          hz.removeEventListener('click', this._titleClick);
+          hz.style.display = 'none';
+          this._titleClick = null;
+        }
+        if (this._titleOutsideClick) {
+          document.removeEventListener('mousedown', this._titleOutsideClick);
+          this._titleOutsideClick = null;
+        }
+        if (tooltip._panelId === this.id) {
+          tooltip.classList.remove('scrollable');
+          tooltip._panelId = null;
+        }
       }
 
-      drawLineChart(rows, task, metric, higherIsBetter) {
+      drawLineChart(rows, task, metric, higherIsBetter, subtasks) {
         this.cleanupTooltip();
         const w = this.getSmoothing();
 
@@ -774,11 +958,13 @@
           margin: { t: 80, r: 20, b: 70, l: 50 },
           plot_bgcolor: '#fff', paper_bgcolor: '#fff',
           font: { family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-          height: 500,
+          height: this.getChartHeight(600),
         }, { responsive: true });
+
+        this.setupTitleTooltip(subtasks);
       }
 
-      drawBarChart(rows, task, metric, higherIsBetter) {
+      drawBarChart(rows, task, metric, higherIsBetter, subtasks) {
         this.cleanupTooltip();
         // For bar chart, use latest checkpoint per model
         const byModel = {};
@@ -840,7 +1026,7 @@
           margin: { t: 60, r: 80, b: 60, l: 10 },
           plot_bgcolor: '#fff', paper_bgcolor: '#fff',
           font: { family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-          height: Math.max(300, names.length * 40 + 100),
+          height: this.getChartHeight(Math.max(400, names.length * 40 + 100)),
           showlegend: false,
         }, { responsive: true });
 
@@ -848,24 +1034,30 @@
         const tooltip = document.getElementById('custom-tooltip');
         const chart = this.el.chart;
         chart.on('plotly_hover', (data) => {
+          if (tooltip.classList.contains('scrollable')) return;
           const pt = data.points[0];
           tooltip.innerHTML = pt.customdata;
           tooltip.style.display = 'block';
         });
         chart.on('plotly_unhover', () => {
+          if (tooltip.classList.contains('scrollable')) return;
           tooltip.style.display = 'none';
         });
         this._tooltipMouseMove = (e) => {
+          if (tooltip.classList.contains('scrollable')) return;
           if (tooltip.style.display === 'block') {
             tooltip.style.left = (e.clientX + 12) + 'px';
             tooltip.style.top = (e.clientY - 10) + 'px';
           }
         };
         this._tooltipMouseLeave = () => {
+          if (tooltip.classList.contains('scrollable')) return;
           tooltip.style.display = 'none';
         };
         chart.addEventListener('mousemove', this._tooltipMouseMove);
         chart.addEventListener('mouseleave', this._tooltipMouseLeave);
+
+        this.setupTitleTooltip(subtasks);
       }
 
       export(format) {
@@ -906,12 +1098,13 @@
         elInitLoading.style.display = 'none';
         elAddPanelRow.style.display = '';
 
-        // Create default panel: deu_base_easy, aggregate, bits_per_byte, bar chart
-        await addPanel({
-          suite: 'deu_base_easy',
-          metric: 'bits_per_byte',
-          chartType: 'bar',
-        });
+        // Create 2x2 default panels
+        await Promise.all([
+          addPanel({ suite: 'eng_base_easy', group: 'eng_base_easy_bpb', metric: 'bits_per_byte', chartType: 'bar' }),
+          addPanel({ suite: 'deu_base_easy', group: 'deu_base_easy_bpb', metric: 'bits_per_byte', chartType: 'bar' }),
+          addPanel({ suite: 'eng_base_easy', group: 'eng_base_easy_rc', metric: 'acc_norm', chartType: 'bar' }),
+          addPanel({ suite: 'deu_base_easy', group: 'deu_base_easy_rc', metric: 'acc_norm', chartType: 'bar' }),
+        ]);
       } catch (err) {
         elInitLoading.innerHTML = `<span style="color:#e63946">
           Error: ${err.message}<br>