Baselines: drop persistent labels, identify on hover with thicker line + tooltip

static/index.html

@@ -1715,59 +1715,27 @@ function renderChart(entries) {
   // Horizontal dashed line per baseline, spanning the full visible x-range.
   // Added *after* the three core datasets so the bestLabels (idx 1) and
   // nonBestLabels (idx 2) plugins continue to find their dataset metas.
+  // Identified by name on hover (tooltip), not by always-on labels.
   const BASELINE_COLOR = 'rgba(107,114,128,0.55)';
+  const BASELINE_HOVER_COLOR = 'rgba(55,65,81,0.95)';
   const baselineDatasets = baselineEntries.map(e => ({
-    label: `baseline · ${e.method || ''}`,
-    data: [{ x: xMin, y: e.score }, { x: extendedEnd, y: e.score }],
+    label: e.method || 'baseline',
+    data: [{ x: xMin, y: e.score, agent: 'baseline', method: e.method }, { x: extendedEnd, y: e.score, agent: 'baseline', method: e.method }],
     type: 'line',
     borderColor: BASELINE_COLOR,
+    hoverBorderColor: BASELINE_HOVER_COLOR,
     backgroundColor: 'transparent',
-    borderWidth: 1,
+    borderWidth: 1.5,
+    hoverBorderWidth: 3.5,
     borderDash: [5, 4],
     pointRadius: 0,
     pointHoverRadius: 0,
     fill: false,
     tension: 0,
     order: 100,
+    _isBaseline: true,
   }));
 
-  // Right-edge label per baseline. Stack vertically when y-values cluster.
-  const baselineLabels = {
-    id: 'baselineLabels',
-    afterDatasetsDraw(c) {
-      if (!baselineEntries.length) return;
-      const ctx2 = c.ctx;
-      const a = c.chartArea;
-      const yScale = c.scales.y;
-      ctx2.save();
-      ctx2.font = '500 10px "JetBrains Mono", monospace';
-      const placed = [];
-      // Draw smallest-score (top of chart) first so stacking pushes downward.
-      baselineEntries.forEach(e => {
-        const text = `${e.method || 'baseline'}  ${e.score.toLocaleString()}`;
-        const tw = ctx2.measureText(text).width;
-        const px = 6, boxH = 18, boxW = tw + px * 2;
-        let yc = yScale.getPixelForValue(e.score);
-        for (const p of placed) {
-          if (Math.abs(yc - p) < boxH + 2) yc = p + boxH + 2;
-        }
-        placed.push(yc);
-        let lx = a.right - boxW - 4;
-        let ly = yc - boxH / 2;
-        if (ly < a.top) ly = a.top + 1;
-        if (ly + boxH > a.bottom) ly = a.bottom - boxH - 1;
-        ctx2.fillStyle = 'rgba(243,244,246,0.95)';
-        ctx2.strokeStyle = 'rgba(107,114,128,0.45)';
-        ctx2.lineWidth = 1;
-        ctx2.beginPath(); ctx2.roundRect(lx, ly, boxW, boxH, 5); ctx2.fill(); ctx2.stroke();
-        ctx2.fillStyle = '#6b7280';
-        ctx2.textBaseline = 'middle';
-        ctx2.fillText(text, lx + px, ly + boxH / 2);
-      });
-      ctx2.restore();
-    },
-  };
-
   const ctx = document.getElementById('evolutionChart').getContext('2d');
   chart = new Chart(ctx, {
     type: 'line',
@@ -1791,11 +1759,23 @@ function renderChart(entries) {
           titleFont: { family: "'Source Sans 3', sans-serif", size: 12, weight: '700' },
           bodyFont: { family: "'JetBrains Mono', monospace", size: 11 },
           titleColor: '#fff', bodyColor: '#d1d5db',
-          // Skip tooltip points that aren't real run events (baselines, line extensions).
-          filter: it => it.datasetIndex < 3 && it.raw && !it.raw._ext && it.raw.agent,
+          // Run datasets (idx 0..2): only real points, skip line-extension synthetic point.
+          // Baseline datasets (idx >= 3): always allowed (hover line → identify it).
+          filter: it => {
+            if (it.datasetIndex >= 3) return true;
+            return it.raw && !it.raw._ext && it.raw.agent;
+          },
           callbacks: {
-            title: items => items[0]?.raw?.agent || '',
-            label: it => { const d = new Date(it.raw.x); return [`Bytes: ${it.raw.y.toLocaleString()}`, `Date: ${d.toLocaleString()}`]; }
+            title: items => {
+              const it = items[0];
+              if (it.datasetIndex >= 3) return `baseline · ${it.dataset.label}`;
+              return it.raw?.agent || '';
+            },
+            label: it => {
+              if (it.datasetIndex >= 3) return [`Bytes: ${it.raw.y.toLocaleString()}`];
+              const d = new Date(it.raw.x);
+              return [`Bytes: ${it.raw.y.toLocaleString()}`, `Date: ${d.toLocaleString()}`];
+            }
           },
         },
       },
@@ -1825,7 +1805,7 @@ function renderChart(entries) {
       },
       interaction: { mode: 'nearest', intersect: true },
     },
-    plugins: [bestLabels, nonBestLabels, baselineLabels],
+    plugins: [bestLabels, nonBestLabels],
   });
 }