Label all historical SOTA models

app.js

@@ -56,7 +56,6 @@ function historicalSotaRuns(points) {
   });
 
   const highlighted = new Set();
-  let currentLabel = null;
   let bestScore = -Infinity;
 
   [...releases.keys()]
@@ -70,17 +69,98 @@ function historicalSotaRuns(points) {
         (point) => point.plotScore === releaseBest,
       );
       releaseLeaders.forEach((point) => highlighted.add(plotRunKey(point)));
-
-      const labelLeader = [...releaseLeaders].sort(
-        (a, b) =>
-          (b.quantization_bits || 0) - (a.quantization_bits || 0) ||
-          a.model.localeCompare(b.model),
-      )[0];
-      currentLabel = plotRunKey(labelLeader);
       bestScore = Math.max(bestScore, releaseBest);
     });
 
-  return { highlighted, labeled: currentLabel ? [currentLabel] : [] };
+  return highlighted;
+}
+
+function layoutSotaLabels(points, highlighted, dimensions) {
+  const { x, y, quantizationJitter, width, height, margin } = dimensions;
+  const labels = new Map();
+  const occupied = [];
+  const verticalOffsets = [-11, 22, -30, 41, -49, 60, -68, 79, -87, 98];
+  const sotaPoints = points
+    .filter((point) => highlighted.has(plotRunKey(point)))
+    .sort(
+      (a, b) =>
+        a.releasedTime - b.releasedTime ||
+        a.plotScore - b.plotScore ||
+        a.model.localeCompare(b.model),
+    );
+
+  sotaPoints.forEach((point, index) => {
+    const pointX = x(point.releasedTime) + quantizationJitter(point.quantization_bits);
+    const pointY = y(point.plotScore);
+    const name = shortModelName(point.model);
+    const labelWidth = Math.max(54, name.length * 6.2);
+    const preferredDirections =
+      pointX + labelWidth + 14 > width - margin.right
+        ? [-1, 1]
+        : index % 2 === 0
+          ? [1, -1]
+          : [-1, 1];
+    let selected = null;
+
+    for (const offset of verticalOffsets) {
+      for (const direction of preferredDirections) {
+        const labelX = pointX + direction * 10;
+        const labelY = Math.max(
+          margin.top + 12,
+          Math.min(height - margin.bottom - 4, pointY + offset),
+        );
+        const box = {
+          left: direction === 1 ? labelX : labelX - labelWidth,
+          right: direction === 1 ? labelX + labelWidth : labelX,
+          top: labelY - 11,
+          bottom: labelY + 3,
+        };
+        const withinPlot =
+          box.left >= margin.left &&
+          box.right <= width - margin.right &&
+          box.top >= margin.top &&
+          box.bottom <= height - margin.bottom;
+        const collides = occupied.some(
+          (other) =>
+            box.left < other.right + 5 &&
+            box.right > other.left - 5 &&
+            box.top < other.bottom + 4 &&
+            box.bottom > other.top - 4,
+        );
+        if (withinPlot && !collides) {
+          selected = {
+            x: labelX,
+            y: labelY,
+            anchor: direction === 1 ? "start" : "end",
+            box,
+          };
+          break;
+        }
+      }
+      if (selected) break;
+    }
+
+    if (!selected) {
+      const labelX = Math.min(width - margin.right, pointX + 10);
+      const labelY = Math.max(margin.top + 12, pointY - 11);
+      selected = {
+        x: labelX,
+        y: labelY,
+        anchor: "start",
+        box: {
+          left: labelX,
+          right: labelX + labelWidth,
+          top: labelY - 11,
+          bottom: labelY + 3,
+        },
+      };
+    }
+
+    occupied.push(selected.box);
+    labels.set(plotRunKey(point), selected);
+  });
+
+  return labels;
 }
 
 function plotDate(value) {
@@ -152,20 +232,24 @@ function renderReleasePlot(rows) {
   }).join("");
 
   const sotaRuns = historicalSotaRuns(points);
+  const sotaLabels = layoutSotaLabels(points, sotaRuns, {
+    x,
+    y,
+    quantizationJitter,
+    width,
+    height,
+    margin,
+  });
 
   const marks = points
     .map((point) => {
       const runKey = plotRunKey(point);
-      const labelIndex = sotaRuns.labeled.indexOf(runKey);
-      const isSota = sotaRuns.highlighted.has(runKey);
-      const showLabel = labelIndex !== -1;
+      const isSota = sotaRuns.has(runKey);
+      const labelPosition = sotaLabels.get(runKey);
       const pointX = x(point.releasedTime) + quantizationJitter(point.quantization_bits);
       const pointY = y(point.plotScore);
-      const labelOnLeft = pointX > width - 210;
-      const labelX = pointX + (labelOnLeft ? -10 : 10);
-      const labelY = pointY + (labelIndex % 2 === 1 ? 22 : -10);
-      const label = showLabel
-        ? `<text class="point-label" x="${labelX}" y="${labelY}" text-anchor="${labelOnLeft ? "end" : "start"}">${escapeHtml(shortModelName(point.model))}</text>`
+      const label = labelPosition
+        ? `<text class="point-label" x="${labelPosition.x}" y="${labelPosition.y}" text-anchor="${labelPosition.anchor}">${escapeHtml(shortModelName(point.model))}</text>`
         : "";
       const sotaDescription = isSota
         ? ", historical state of the art at release"
@@ -173,16 +257,13 @@ function renderReleasePlot(rows) {
       const accessibleLabel = `${point.model}, ${point.plotScore.toFixed(2)} ${metricDescription}, released ${point.releasedAt}${sotaDescription}`;
       const tooltipMeta = `${metricLabel}: ${point.plotScore.toFixed(2)} · ${point.releasedAt} · ${runLabel(point)}${isSota ? " · SOTA at release" : ""}`;
       return `<a class="plot-point" href="https://huggingface.co/${encodeURI(point.hub_model)}" target="_blank" rel="noreferrer" tabindex="0" aria-label="${escapeHtml(accessibleLabel)}" aria-describedby="plot-tooltip" data-tooltip-title="${escapeHtml(point.model)}" data-tooltip-meta="${escapeHtml(tooltipMeta)}">
-        <circle class="${isSota ? "sota-point" : ""}" cx="${pointX}" cy="${pointY}" r="${isSota ? 8 : 6}">
-          <title>${escapeHtml(accessibleLabel)}</title>
-        </circle>
+        <circle class="${isSota ? "sota-point" : ""}" cx="${pointX}" cy="${pointY}" r="${isSota ? 8 : 6}"></circle>
         ${label}
       </a>`;
     })
     .join("");
 
-  plot.innerHTML = `<svg viewBox="0 0 ${width} ${height}" role="img" aria-labelledby="plot-svg-title plot-svg-desc">
-    <title id="plot-svg-title">Model release date versus ${escapeHtml(metricDescription)}</title>
+  plot.innerHTML = `<svg viewBox="0 0 ${width} ${height}" role="img" aria-label="Model release date versus ${escapeHtml(metricDescription)}" aria-describedby="plot-svg-desc">
     <desc id="plot-svg-desc">Each point is an evaluated model run. The horizontal axis is release date and the vertical axis is ${escapeHtml(metricDescription)} from zero to one hundred. Coral points matched or established the best score available at their release date.</desc>
     <g class="plot-grid">${yTicks}${xTicks}</g>
     <text class="axis-label y-axis-label" transform="translate(17 ${height / 2}) rotate(-90)" text-anchor="middle">${escapeHtml(metricLabel)} score</text>