Fix chart Y-axis: show architecture names and use automargin

Y-axis labels were clipped because model IDs are long and the left
margin was fixed. Now shows the foundation model architecture name
(since adapter type is already indicated by the grouping) with numeric
suffixes for duplicates, and uses Plotly automargin so the axis sizes
itself to fit the labels.

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Chart/useChartData.js

@@ -16,11 +16,11 @@ const getScore = (model, key, display) => {
   return v != null && !isNaN(v) ? v : null;
 };
 
-const shortName = (model) => {
-  const id = model.id || model.model?.name || "?";
-  const parts = id.split("/");
-  const name = parts.length > 1 ? parts.slice(1).join("/") : id;
-  return name.length > 32 ? name.slice(0, 29) + "..." : name;
+// Display name for the Y-axis. Since models are already grouped by adapter,
+// show just the architecture (foundation model) as the primary label.
+// Duplicates within a group get a numeric suffix.
+const displayName = (model) => {
+  return model.model?.architecture || model.model?.name || model.id || "?";
 };
 
 const useChartData = (filteredData, scoreDisplay, selectedDataset) => {
@@ -93,6 +93,14 @@ const useChartData = (filteredData, scoreDisplay, selectedDataset) => {
       const color = getAdapterColor(adapterKey);
       const label = getAdapterLabel(adapterKey);
 
+      // Deduplicate display names within this group
+      const nameCounts = new Map();
+      models.forEach((m) => {
+        const base = displayName(m);
+        nameCounts.set(base, (nameCounts.get(base) || 0) + 1);
+      });
+      const nameIndex = new Map();
+
       const ys = [];
       const xs = [];
       const stds = [];
@@ -102,7 +110,13 @@ const useChartData = (filteredData, scoreDisplay, selectedDataset) => {
         ys.push(y);
         xs.push(m._score);
         stds.push(m._std);
-        const n = shortName(m);
+        const base = displayName(m);
+        let n = base;
+        if (nameCounts.get(base) > 1) {
+          const idx = (nameIndex.get(base) || 0) + 1;
+          nameIndex.set(base, idx);
+          n = `${base} (${idx})`;
+        }
         names.push(n);
         allYTicks.push(y);
         allYLabels.push(n);
@@ -179,7 +193,7 @@ const useChartData = (filteredData, scoreDisplay, selectedDataset) => {
 
     const layout = {
       height,
-      margin: { l: 170, r: 30, t: 40, b: 60 },
+      margin: { l: 20, r: 30, t: 40, b: 60 },
       title: {
         text: `<b>${datasetLabel}</b>`,
         x: 0.5,
@@ -210,6 +224,7 @@ const useChartData = (filteredData, scoreDisplay, selectedDataset) => {
         ticklen: 3,
         zeroline: false,
         range: [yMin, yMax],
+        automargin: true,
         tickfont: { size: 11 },
       },
       shapes,