Add MOABB-style chart visualization to leaderboard

Add a Table/Chart toggle with a publication-grade dot plot view
inspired by MOABB ranking figures. Models are grouped by adapter
type with Tol's colorblind-friendly palette, hollow circle markers,
dashed median reference line, and per-dataset selector buttons.
Average view shows error bars (±1 std across benchmarks). Chart is
lazy-loaded via React.lazy and the view mode persists in the URL
(?view=chart).

frontend/package.json

@@ -20,8 +20,10 @@
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
+    "plotly.js-basic-dist": "^3.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "serve-static": "^1.15.0",

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

@@ -1,5 +1,13 @@
-import React, { useMemo, useEffect, useCallback } from "react";
-import { Box, Typography } from "@mui/material";
+import React, { useMemo, useEffect, useCallback, lazy, Suspense } from "react";
+import {
+  Box,
+  Typography,
+  ToggleButtonGroup,
+  ToggleButton,
+  CircularProgress,
+} from "@mui/material";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import BarChartIcon from "@mui/icons-material/BarChart";
 import { useSearchParams } from "react-router-dom";
 
 import { TABLE_DEFAULTS } from "./constants/defaults";
@@ -15,6 +23,8 @@ import QuickFilters, {
   QuickFiltersSkeleton,
 } from "./components/Filters/QuickFilters";
 
+const Chart = lazy(() => import("./components/Chart/Chart"));
+
 const FilterAccordion = ({ expanded, quickFilters, advancedFilters }) => {
   const advancedFiltersRef = React.useRef(null);
   const quickFiltersRef = React.useRef(null);
@@ -213,6 +223,15 @@ const Leaderboard = () => {
     actions.resetFilters();
   }, [actions]);
 
+  const onViewModeChange = useCallback(
+    (_, value) => {
+      if (value !== null) {
+        actions.setDisplayOption("viewMode", value);
+      }
+    },
+    [actions]
+  );
+
   // Memoize loading states
   const loadingStates = useMemo(() => {
     const isInitialLoading = dataLoading || !data;
@@ -422,6 +441,37 @@ const Leaderboard = () => {
           </Box>
         </Box>
 
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            width: {
+              xs: "100%",
+              sm: "100%",
+              md: "80%",
+            },
+            maxWidth: "1200px",
+            mt: 1,
+            mb: 0.5,
+          }}
+        >
+          <ToggleButtonGroup
+            value={state.display.viewMode}
+            exclusive
+            onChange={onViewModeChange}
+            size="small"
+          >
+            <ToggleButton value="table">
+              <TableChartIcon sx={{ mr: 0.5, fontSize: 18 }} />
+              Table
+            </ToggleButton>
+            <ToggleButton value="chart">
+              <BarChartIcon sx={{ mr: 0.5, fontSize: 18 }} />
+              Chart
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Box>
+
         <Box
           sx={{
             display: "flex",
@@ -437,7 +487,29 @@ const Leaderboard = () => {
               px: 1,
             }}
           >
-            {tableComponent}
+            {state.display.viewMode === "chart" ? (
+              <Suspense
+                fallback={
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      minHeight: 400,
+                    }}
+                  >
+                    <CircularProgress />
+                  </Box>
+                }
+              >
+                <Chart
+                  filteredData={memoizedFilteredData}
+                  scoreDisplay={state.display.scoreDisplay}
+                />
+              </Suspense>
+            ) : (
+              tableComponent
+            )}
           </Box>
         </Box>
       </Box>

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

@@ -0,0 +1,182 @@
+import React, { useState, lazy, Suspense } from "react";
+import { Box, Typography, Chip, CircularProgress } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useChartData from "./useChartData";
+import { DATASET_OPTIONS, REFERENCE_LINE_COLOR } from "../../constants/chartDefaults";
+
+const Plot = lazy(() =>
+  import("react-plotly.js").then((mod) => ({ default: mod.default }))
+);
+
+const Chart = ({ filteredData, scoreDisplay }) => {
+  const theme = useTheme();
+  const [selectedDataset, setSelectedDataset] = useState("average");
+
+  const { traces, layout } = useChartData(
+    filteredData,
+    scoreDisplay,
+    selectedDataset
+  );
+
+  const isDark = theme.palette.mode === "dark";
+  const textColor = theme.palette.text.primary;
+  const lineColor = isDark ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.3)";
+  const tickColor = isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)";
+
+  const themedLayout = {
+    ...layout,
+    paper_bgcolor: "transparent",
+    plot_bgcolor: "transparent",
+    font: { color: textColor },
+    title: {
+      ...layout.title,
+      font: { ...layout.title?.font, color: textColor },
+    },
+    xaxis: {
+      ...layout.xaxis,
+      linecolor: lineColor,
+      tickcolor: tickColor,
+      tickfont: { ...layout.xaxis?.tickfont, color: textColor },
+      title: {
+        ...layout.xaxis?.title,
+        font: { ...layout.xaxis?.title?.font, color: textColor },
+      },
+    },
+    yaxis: {
+      ...layout.yaxis,
+      tickcolor: tickColor,
+      tickfont: { ...layout.yaxis?.tickfont, color: textColor },
+    },
+    legend: {
+      ...layout.legend,
+      font: { ...layout.legend?.font, color: textColor },
+    },
+  };
+
+  if (!filteredData || filteredData.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          minHeight: 300,
+        }}
+      >
+        <Typography color="text.secondary">
+          No models match the current filters.
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ width: "100%", maxWidth: 960, mx: "auto" }}>
+      {/* Dataset selector */}
+      <Box
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 0.75,
+          justifyContent: "center",
+          mb: 2,
+        }}
+      >
+        {DATASET_OPTIONS.map((opt) => {
+          const active = selectedDataset === opt.value;
+          return (
+            <Chip
+              key={opt.value}
+              label={opt.label}
+              size="small"
+              variant={active ? "filled" : "outlined"}
+              onClick={() => setSelectedDataset(opt.value)}
+              sx={{
+                fontWeight: active ? 600 : 400,
+                fontSize: "0.75rem",
+                height: 28,
+                borderRadius: "14px",
+                cursor: "pointer",
+                borderColor: active ? "transparent" : "divider",
+                bgcolor: active
+                  ? isDark
+                    ? "grey.800"
+                    : "grey.900"
+                  : "transparent",
+                color: active
+                  ? isDark
+                    ? "grey.100"
+                    : "common.white"
+                  : "text.secondary",
+                "&:hover": {
+                  bgcolor: active
+                    ? isDark
+                      ? "grey.700"
+                      : "grey.800"
+                    : isDark
+                      ? "grey.800"
+                      : "grey.100",
+                },
+              }}
+            />
+          );
+        })}
+      </Box>
+
+      {/* Plot */}
+      <Suspense
+        fallback={
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              minHeight: 400,
+            }}
+          >
+            <CircularProgress size={28} />
+          </Box>
+        }
+      >
+        <Plot
+          data={traces}
+          layout={themedLayout}
+          config={{
+            responsive: true,
+            displayModeBar: false,
+            staticPlot: false,
+          }}
+          style={{ width: "100%" }}
+          useResizeHandler
+        />
+      </Suspense>
+
+      {/* Reference line legend */}
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 0.75,
+          mt: -1,
+        }}
+      >
+        <Box
+          sx={{
+            width: 24,
+            height: 0,
+            borderTop: `2px dashed ${REFERENCE_LINE_COLOR}`,
+          }}
+        />
+        <Typography
+          variant="caption"
+          sx={{ color: "text.secondary", fontSize: "0.7rem" }}
+        >
+          Median score
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default Chart;

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

@@ -0,0 +1,232 @@
+import { useMemo } from "react";
+import {
+  BENCHMARK_KEYS,
+  BENCHMARK_LABELS,
+  REFERENCE_LINE_COLOR,
+  getAdapterKey,
+  getAdapterLabel,
+  getAdapterColor,
+} from "../../constants/chartDefaults";
+import { MODEL_TYPE_ORDER } from "../../constants/modelTypes";
+
+const getScore = (model, key, display) => {
+  const ev = model.evaluations?.[key];
+  if (!ev) return null;
+  const v = display === "normalized" ? ev.normalized_score : ev.value;
+  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;
+};
+
+const useChartData = (filteredData, scoreDisplay, selectedDataset) => {
+  return useMemo(() => {
+    if (!filteredData || filteredData.length === 0) {
+      return { traces: [], layout: {} };
+    }
+
+    const isAverage = selectedDataset === "average";
+
+    // 1. Compute score (+ std for average) per model
+    const scored = filteredData
+      .map((m) => {
+        let score, std = 0;
+        if (isAverage) {
+          const vals = BENCHMARK_KEYS
+            .map((k) => getScore(m, k, scoreDisplay))
+            .filter(Boolean);
+          if (vals.length === 0) return null;
+          score = vals.reduce((a, b) => a + b, 0) / vals.length;
+          std = Math.sqrt(
+            vals.reduce((s, v) => s + (v - score) ** 2, 0) / vals.length
+          );
+        } else {
+          score = getScore(m, selectedDataset, scoreDisplay);
+          if (score === null) return null;
+        }
+        return {
+          ...m,
+          _score: score,
+          _std: std,
+          _adapterKey: getAdapterKey(m.model?.type),
+        };
+      })
+      .filter(Boolean);
+
+    // 2. Group by adapter type in MODEL_TYPE_ORDER
+    const groups = new Map();
+    MODEL_TYPE_ORDER.forEach((t) => groups.set(t, []));
+    scored.forEach((m) => {
+      const arr = groups.get(m._adapterKey);
+      if (arr) arr.push(m);
+      else {
+        if (!groups.has("unknown")) groups.set("unknown", []);
+        groups.get("unknown").push(m);
+      }
+    });
+    for (const [k, v] of groups) {
+      if (v.length === 0) groups.delete(k);
+    }
+
+    // 3. Sort within group: ascending score (worst at lowest y, best at highest y within group)
+    for (const [, arr] of groups) {
+      arr.sort((a, b) => a._score - b._score);
+    }
+
+    // 4. Build traces with y positions; process groups in reverse so first adapter type is at top
+    const GAP = 1.0;
+    let y = 0;
+    const traces = [];
+    const shapes = [];
+    const allYTicks = [];
+    const allYLabels = [];
+    const allScores = [];
+
+    // Reverse so MODEL_TYPE_ORDER[0] (LoRA) ends up at the top (highest y)
+    const groupEntries = Array.from(groups.entries()).reverse();
+
+    groupEntries.forEach(([adapterKey, models], gi) => {
+      const color = getAdapterColor(adapterKey);
+      const label = getAdapterLabel(adapterKey);
+
+      const ys = [];
+      const xs = [];
+      const stds = [];
+      const names = [];
+
+      models.forEach((m) => {
+        ys.push(y);
+        xs.push(m._score);
+        stds.push(m._std);
+        const n = shortName(m);
+        names.push(n);
+        allYTicks.push(y);
+        allYLabels.push(n);
+        allScores.push(m._score);
+        y++;
+      });
+
+      const trace = {
+        type: "scatter",
+        mode: "markers",
+        name: label,
+        x: xs,
+        y: ys,
+        marker: {
+          symbol: "circle-open",
+          size: 10,
+          line: { width: 2.5, color },
+        },
+        hovertemplate: names.map(
+          (n, i) =>
+            `<b>${n}</b><br>Score: ${xs[i].toFixed(4)}<extra>${label}</extra>`
+        ),
+      };
+
+      // Error bars only for average view
+      if (isAverage && stds.some((s) => s > 0)) {
+        trace.error_x = {
+          type: "data",
+          array: stds,
+          arrayminus: stds,
+          visible: true,
+          color,
+          thickness: 2,
+          width: 4,
+        };
+      }
+
+      traces.push(trace);
+
+      // Add spacing between groups
+      if (gi < groupEntries.length - 1) {
+        y += GAP;
+      }
+    });
+
+    // 5. Median reference line
+    const sorted = [...allScores].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    const median =
+      sorted.length === 0
+        ? 0
+        : sorted.length % 2 === 0
+          ? (sorted[mid - 1] + sorted[mid]) / 2
+          : sorted[mid];
+
+    const yMin = -0.8;
+    const yMax = y - 1 + GAP + 0.3;
+
+    shapes.push({
+      type: "line",
+      x0: median,
+      x1: median,
+      y0: yMin,
+      y1: yMax,
+      line: { color: REFERENCE_LINE_COLOR, width: 2, dash: "dash" },
+    });
+
+    // 6. Layout — stripped-down, academic
+    const height = Math.max(420, (y + 1) * 28 + 120);
+
+    const datasetLabel = isAverage
+      ? "Average"
+      : BENCHMARK_LABELS[selectedDataset] || selectedDataset;
+
+    const layout = {
+      height,
+      margin: { l: 170, r: 30, t: 40, b: 60 },
+      title: {
+        text: `<b>${datasetLabel}</b>`,
+        x: 0.5,
+        xanchor: "center",
+        font: { size: 18 },
+      },
+      xaxis: {
+        title: {
+          text: scoreDisplay === "normalized" ? "Normalized Score" : "Raw Score",
+          font: { size: 12 },
+          standoff: 8,
+        },
+        showgrid: false,
+        showline: true,
+        linewidth: 1,
+        ticks: "outside",
+        ticklen: 5,
+        zeroline: false,
+        side: "bottom",
+        tickfont: { size: 11 },
+      },
+      yaxis: {
+        tickvals: allYTicks,
+        ticktext: allYLabels,
+        showgrid: false,
+        showline: false,
+        ticks: "outside",
+        ticklen: 3,
+        zeroline: false,
+        range: [yMin, yMax],
+        tickfont: { size: 11 },
+      },
+      shapes,
+      legend: {
+        orientation: "h",
+        y: -0.13,
+        x: 0.5,
+        xanchor: "center",
+        font: { size: 11 },
+        tracegroupgap: 5,
+      },
+      hovermode: "closest",
+      dragmode: false,
+    };
+
+    return { traces, layout };
+  }, [filteredData, scoreDisplay, selectedDataset]);
+};
+
+export default useChartData;

frontend/src/pages/LeaderboardPage/components/Leaderboard/constants/chartDefaults.js

@@ -0,0 +1,50 @@
+import { MODEL_TYPE_ORDER, MODEL_TYPES } from "./modelTypes";
+
+// Tol's qualitative palette — colorblind-friendly, publication-grade
+// https://personal.sron.nl/~pault/data/colourschemes.pdf
+export const ADAPTER_PALETTE = {
+  lora: "#4477AA",
+  ia3: "#EE6677",
+  adalora: "#228833",
+  dora: "#CCBB44",
+  oft: "#66CCEE",
+  probe: "#AA3377",
+  full_finetune: "#999999",
+};
+
+// Human-readable benchmark labels
+export const BENCHMARK_LABELS = {
+  bcic2a: "BCIC IV-2a",
+  physionet: "PhysioNet MI",
+  isruc_sleep: "ISRUC Sleep",
+  tuab: "TUAB",
+  tuev: "TUEV",
+  chbmit: "CHB-MIT",
+  faced: "FACED",
+  seedv: "SEED-V",
+};
+
+export const BENCHMARK_KEYS = Object.keys(BENCHMARK_LABELS);
+
+// Dataset selector options: Average + each benchmark
+export const DATASET_OPTIONS = [
+  { value: "average", label: "Average" },
+  ...BENCHMARK_KEYS.map((key) => ({ value: key, label: BENCHMARK_LABELS[key] })),
+];
+
+// Reference line color (amber, matching MOABB Dummy baseline style)
+export const REFERENCE_LINE_COLOR = "#E67E22";
+
+export const getAdapterKey = (type) => {
+  const clean = type?.toLowerCase().trim();
+  return MODEL_TYPE_ORDER.find((key) => clean?.includes(key)) || "unknown";
+};
+
+export const getAdapterLabel = (type) => {
+  const key = getAdapterKey(type);
+  return key !== "unknown" && MODEL_TYPES[key] ? MODEL_TYPES[key].label : type || "Unknown";
+};
+
+export const getAdapterColor = (adapterKey) => {
+  return ADAPTER_PALETTE[adapterKey] || "#999999";
+};

frontend/src/pages/LeaderboardPage/components/Leaderboard/context/LeaderboardContext.js

@@ -29,6 +29,7 @@ const DEFAULT_DISPLAY = {
   averageMode: TABLE_DEFAULTS.AVERAGE_MODE,
   rankingMode: TABLE_DEFAULTS.RANKING_MODE,
   visibleColumns: TABLE_DEFAULTS.COLUMNS.DEFAULT_VISIBLE,
+  viewMode: "table",
 };
 
 // Create initial counter structure
@@ -416,6 +417,15 @@ const LeaderboardProvider = ({ children }) => {
           value: rankingModeFromUrl,
         });
       }
+
+      const viewFromUrl = searchParams.get("view");
+      if (viewFromUrl && (viewFromUrl === "table" || viewFromUrl === "chart")) {
+        dispatch({
+          type: "SET_DISPLAY_OPTION",
+          key: "viewMode",
+          value: viewFromUrl,
+        });
+      }
     };
 
     loadFromUrl();
@@ -439,6 +449,7 @@ const LeaderboardProvider = ({ children }) => {
     const currentScoreDisplay = searchParams.get("scoreDisplay");
     const currentAverageMode = searchParams.get("averageMode");
     const currentRankingMode = searchParams.get("rankingMode");
+    const currentView = searchParams.get("view");
     const currentPrecisions =
       searchParams.get("precision")?.split(",").filter(Boolean) || [];
     const currentTypes =
@@ -469,6 +480,7 @@ const LeaderboardProvider = ({ children }) => {
       state.display.scoreDisplay !== currentScoreDisplay;
     const averageModeChanged = state.display.averageMode !== currentAverageMode;
     const rankingModeChanged = state.display.rankingMode !== currentRankingMode;
+    const viewChanged = state.display.viewMode !== currentView;
     const precisionsChanged =
       state.filters.precisions.length !== currentPrecisions.length ||
       state.filters.precisions.some((p) => !currentPrecisions.includes(p));
@@ -576,6 +588,14 @@ const LeaderboardProvider = ({ children }) => {
       }
     }
 
+    if (viewChanged) {
+      if (state.display.viewMode !== "table") {
+        newSearchParams.set("view", state.display.viewMode);
+      } else {
+        newSearchParams.delete("view");
+      }
+    }
+
     if (
       paramsChanged ||
       filtersChanged ||
@@ -587,7 +607,8 @@ const LeaderboardProvider = ({ children }) => {
       averageModeChanged ||
       rankingModeChanged ||
       precisionsChanged ||
-      typesChanged
+      typesChanged ||
+      viewChanged
     ) {
       // Update search params and let HashRouter handle the URL
       setSearchParams(newSearchParams);