Fix OOM build: load Plotly from CDN instead of npm bundle

The plotly.js-basic-dist npm package (~1.4MB gzipped) caused the
Docker build to OOM on the HF Space cpu-basic tier. Replace it with
a lightweight CDN loader that fetches plotly-basic at runtime. This
removes the heavy webpack processing entirely and drops the JS bundle
from 1.7MB to 250KB.

frontend/package.json

@@ -20,10 +20,8 @@
     "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/components/Chart/Chart.js

@@ -1,12 +1,80 @@
-import React, { useState, lazy, Suspense } from "react";
+import React, { useState, useEffect, useRef, useCallback } 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 PLOTLY_CDN = "https://cdn.plot.ly/plotly-basic-2.35.2.min.js";
+
+// Load Plotly from CDN once, return a promise
+let plotlyPromise = null;
+const loadPlotly = () => {
+  if (window.Plotly) return Promise.resolve(window.Plotly);
+  if (plotlyPromise) return plotlyPromise;
+  plotlyPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = PLOTLY_CDN;
+    script.async = true;
+    script.onload = () => resolve(window.Plotly);
+    script.onerror = () => reject(new Error("Failed to load Plotly"));
+    document.head.appendChild(script);
+  });
+  return plotlyPromise;
+};
+
+const PlotlyChart = ({ data, layout, config, style }) => {
+  const containerRef = useRef(null);
+  const [Plotly, setPlotly] = useState(window.Plotly || null);
+  const [loading, setLoading] = useState(!window.Plotly);
+
+  useEffect(() => {
+    if (!Plotly) {
+      loadPlotly()
+        .then((P) => {
+          setPlotly(P);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    }
+  }, [Plotly]);
+
+  const draw = useCallback(() => {
+    if (Plotly && containerRef.current && data?.length) {
+      Plotly.react(containerRef.current, data, layout, config);
+    }
+  }, [Plotly, data, layout, config]);
+
+  useEffect(() => {
+    draw();
+  }, [draw]);
+
+  // Resize handler
+  useEffect(() => {
+    if (!Plotly || !containerRef.current) return;
+    const ro = new ResizeObserver(() => {
+      if (containerRef.current) Plotly.Plots.resize(containerRef.current);
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [Plotly]);
+
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          minHeight: 400,
+        }}
+      >
+        <CircularProgress size={28} />
+      </Box>
+    );
+  }
+
+  return <div ref={containerRef} style={style} />;
+};
 
 const Chart = ({ filteredData, scoreDisplay }) => {
   const theme = useTheme();
@@ -124,32 +192,16 @@ const Chart = ({ filteredData, scoreDisplay }) => {
       </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>
+      <PlotlyChart
+        data={traces}
+        layout={themedLayout}
+        config={{
+          responsive: true,
+          displayModeBar: false,
+          staticPlot: false,
+        }}
+        style={{ width: "100%" }}
+      />
 
       {/* Reference line legend */}
       <Box