Chart: bump right padding to 80px, drop non-record labels (orange records only)

static/index.html

@@ -1801,9 +1801,6 @@ const HF_ORANGE_LABEL_BG = 'rgba(255,157,0,0.12)';
 const HF_ORANGE_LABEL_BORDER = 'rgba(255,157,0,0.35)';
 const HF_ORANGE_LABEL_TEXT = '#d97706';
 const NON_BEST_COLOR = '#9ca3af';
-const NON_BEST_LABEL_BG = 'rgba(107,114,128,0.08)';
-const NON_BEST_LABEL_BORDER = 'rgba(107,114,128,0.2)';
-const NON_BEST_LABEL_TEXT = '#6b7280';
 const GRID_COLOR = 'rgba(0,0,0,0.05)';
 
 // Hash of the entries last passed to renderChart. We rebuild the chart only
@@ -1912,40 +1909,10 @@ function renderChart(entries) {
       ctx2.restore();
     }
   };
-  const nonBestLabels = {
-    id: 'nonBestLabels',
-    afterDatasetsDraw(c) {
-      const meta = c.getDatasetMeta(2);
-      if (!meta?.data) return;
-      const ctx2 = c.ctx;
-      ctx2.save();
-      meta.data.forEach((pt, i) => {
-        const e = nonBestData[i];
-        if (!e) return;
-        const label = `${e.agent}  ${e.y.toLocaleString()} bytes`;
-        ctx2.font = '500 10px "JetBrains Mono", monospace';
-        const tw = ctx2.measureText(label).width;
-        const px = 6, boxW = tw + px * 2, boxH = 20, off = 14;
-        let lx = pt.x + 10, ly = pt.y + off;
-        const a = c.chartArea;
-        if (lx + boxW > a.right) lx = pt.x - boxW - 10;
-        if (ly + boxH > a.bottom) ly = pt.y - off - boxH;
-        ctx2.fillStyle = NON_BEST_LABEL_BG;
-        ctx2.strokeStyle = NON_BEST_LABEL_BORDER;
-        ctx2.lineWidth = 1;
-        ctx2.beginPath(); ctx2.roundRect(lx, ly, boxW, boxH, 5); ctx2.fill(); ctx2.stroke();
-        ctx2.fillStyle = NON_BEST_LABEL_TEXT;
-        ctx2.textBaseline = 'middle';
-        ctx2.fillText(label, lx + px, ly + boxH / 2);
-      });
-      ctx2.restore();
-    }
-  };
 
   // 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.
+  // Added *after* the three core datasets so the bestLabels (idx 1) plugin
+  // continues to find its dataset meta. Identified by name on hover.
   const BASELINE_COLOR = 'rgba(107,114,128,0.55)';
   const BASELINE_HOVER_COLOR = 'rgba(55,65,81,0.95)';
   const baselineDatasets = baselineEntries.map(e => ({
@@ -1974,9 +1941,8 @@ function renderChart(entries) {
         { label: 'Running Best', data: bestLineData, borderColor: HF_ORANGE, backgroundColor: HF_ORANGE_DIM, borderWidth: 2.5, stepped: 'after', fill: true, pointRadius: 0, pointHoverRadius: 0, tension: 0, order: 2 },
         { label: 'Records', data: bestScatter, type: 'scatter', backgroundColor: HF_ORANGE, borderColor: '#fff', borderWidth: 2, pointRadius: 7, pointHoverRadius: 9, pointStyle: 'circle', order: 1 },
         { label: 'Non-Records', data: nonBestData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0 },
-        // Negatives: same look as Non-Records (full grey dot, same size).
-        // The only difference is the nonBestLabels plugin doesn't draw an
-        // always-on label for them; tooltip on hover identifies them.
+        // Negatives: same styling as Non-Records, also unlabeled. Tooltip
+        // on hover identifies any non-record dot.
         { label: 'Negatives', data: negativeData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0 },
         ...baselineDatasets,
       ],
@@ -1984,7 +1950,7 @@ function renderChart(entries) {
     options: {
       responsive: true,
       maintainAspectRatio: false,
-      layout: { padding: { top: 30, right: 30, bottom: 6, left: 6 } },
+      layout: { padding: { top: 30, right: 80, bottom: 6, left: 6 } },
       plugins: {
         legend: { display: false },
         tooltip: {
@@ -2049,7 +2015,7 @@ function renderChart(entries) {
       // for long stretches so the swooping-in animation gets repetitive.
       animation: false,
     },
-    plugins: [bestLabels, nonBestLabels],
+    plugins: [bestLabels],
   });
 }