fix vercel fail

UCSolarCarTeam · Jan 12, 2025 · e1b4cf1 · e1b4cf1
1 parent 99eb9f6
commit e1b4cf1
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 2,039 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -25,14 +25,13 @@
     "lodash": "^4.17.21",
     "mapbox-gl": "^3.5.1",
     "next": "14.2.10",
-    "plotly.js": "^2.35.2",
+    "plotly.js-dist-min": "^2.35.3",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "react-indiana-drag-scroll": "^2.2.0",
     "react-map-gl": "^7.1.7",
-    "react-plotly.js": "^2.6.0",
     "socket.io-client": "^4.7.5",
     "tailwind-merge": "^2.3.0",
     "three": "^0.161.0"
@@ -43,11 +42,12 @@
     "@types/google.maps": "^3.55.11",
     "@types/lodash": "^4",
     "@types/node": "^20.14.10",
-    "@types/plotly.js": "^2",
+    "@types/plotly.js": "^2.35.1",
+    "@types/plotly.js-dist-min": "^2",
     "@types/prettier": "^3.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-plotly.js": "^2",
+    "@types/react-plotly.js": "^2.6.3",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.4.19",

diff --git a/packages/client/src/components/containers/MLContainer.tsx b/packages/client/src/components/containers/MLContainer.tsx
@@ -1,14 +1,12 @@
 "use client";
 
-import dynamic from "next/dynamic";
-import { useCallback, useEffect, useState } from "react";
-import { PlotParams } from "react-plotly.js";
+import { useEffect, useState } from "react";
+import type { PlotParams } from "react-plotly.js";
 
 import useWindowDimensions from "@/hooks/PIS/useWindowDimensions";
 
-const Plot = dynamic<PlotParams>(() => import("react-plotly.js"), {
-  ssr: false,
-});
+import Plotly from "./Plotly";
+
 const SMALL_SCREEN = 380;
 
 type PlotTypes =
@@ -23,27 +21,30 @@ export default function MLContainer({
   const [plot, setPlot] = useState<PlotParams | { error: boolean }>();
   const { width } = useWindowDimensions();
 
-  const fetchPlot = useCallback(async () => {
-    try {
-      const response = await fetch(plotType);
-      const graph = await response.json();
-      const data = JSON.parse(graph);
-      const layout: PlotParams["layout"] = {
-        autosize: true,
-        margin: { l: 175, t: 75 },
-        title: data.layout.title.text,
-      };
-      data.layout = layout;
-
-      setPlot(data);
-    } catch (e) {
-      setPlot({ error: true });
-    }
-  }, [plotType]);
-
   useEffect(() => {
+    const fetchPlot = async () => {
+      try {
+        const response = await fetch(plotType);
+        const graph = await response.json();
+        const data = JSON.parse(graph) as PlotParams;
+        const layout: PlotParams["layout"] = {
+          autosize: true,
+          font: {
+            color: "black",
+          },
+          margin: { l: 175, t: 75 },
+          paper_bgcolor: "rgba(0,0,0,0)",
+          title: data.layout.title,
+        };
+        data.layout = layout;
+
+        setPlot(data);
+      } catch (e) {
+        setPlot({ error: true });
+      }
+    };
     fetchPlot();
-  }, [fetchPlot]);
+  }, [plotType]);
 
   if (!plot) {
     return <div>Loading...</div>;
@@ -52,8 +53,8 @@ export default function MLContainer({
     return <div>Error loading data</div>;
   }
   return (
-    <Plot
-      className="h-72 w-full"
+    <Plotly
+      className="h-72 w-full bg-inherit"
       config={{
         displayModeBar: width < SMALL_SCREEN,
         displaylogo: false,
@@ -68,7 +69,6 @@ export default function MLContainer({
       }}
       data={plot.data}
       layout={plot.layout}
-      useResizeHandler={true}
     />
   );
 }
diff --git a/packages/client/src/components/containers/Plotly.tsx b/packages/client/src/components/containers/Plotly.tsx
@@ -0,0 +1,57 @@
+import dynamic from "next/dynamic";
+import { Config, Layout } from "plotly.js";
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+interface PlotlyProps {
+  id?: string;
+  className?: string;
+  data: Plotly.Data[];
+  layout?: Partial<Layout>;
+  config?: Partial<Config>;
+}
+type PlotlyHTML = Plotly.PlotlyHTMLElement & { align: string };
+const Plotly = dynamic(
+  () =>
+    import("plotly.js-dist-min").then(({ newPlot, purge }) => {
+      const Plotly = forwardRef<HTMLDivElement, PlotlyProps>(
+        ({ className, config, data, id, layout }, ref) => {
+          const originId = useId();
+          const realId = id || originId;
+          const originRef = useRef(null);
+          const [handle, setHandle] = useState<
+            Plotly.PlotlyHTMLElement | undefined
+          >(undefined);
+
+          useEffect(() => {
+            let instance: Plotly.PlotlyHTMLElement | undefined;
+            if (originRef.current) {
+              newPlot(originRef.current, data, layout, config).then((ref) => {
+                setHandle((instance = ref));
+              });
+            }
+            return () => {
+              if (instance) {
+                purge(instance);
+              }
+            };
+          }, [data, layout, config]);
+
+          useImperativeHandle(ref, () => handle as PlotlyHTML, [handle]);
+
+          return <div className={className} id={realId} ref={originRef} />;
+        },
+      );
+      Plotly.displayName = "Plotly";
+      return Plotly;
+    }),
+  { ssr: false },
+);
+
+export default Plotly;
diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -125,18 +125,14 @@ function AnalysisTab() {
         >
           <TabContent className="my-auto w-full" index={0} value={value}>
             <div
-              className="grid max-h-72 w-full flex-1 grid-flow-row items-center gap-4"
-              style={{
-                gridTemplateColumns:
-                  width >= 1200
-                    ? "repeat(2, minmax(0, 1fr))"
-                    : "repeat(1, minmax(0, 1fr))",
-              }}
+              className={twMerge(
+                `grid max-h-72 w-full flex-1 grid-flow-row items-center gap-4 ${width >= 1200 ? "grid-cols-2" : "grid-cols-1 overflow-y-auto"}`,
+              )}
             >
-              <div className="flex max-h-72 w-full max-w-2xl items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold">
+              <div className="flex max-h-72 w-full max-w-2xl items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold dark:bg-[#BAB8B8] dark:text-black">
                 <MLContainer plotType="/api/getLapCorrelationMatrix" />
               </div>
-              <div className="flex max-h-72 w-full max-w-2xl items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold">
+              <div className="flex max-h-72 w-full max-w-2xl items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold dark:bg-[#BAB8B8] dark:text-black">
                 <MLContainer plotType="/api/getPacketCorrelationMatrix" />
               </div>
             </div>

diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
@@ -4,9 +4,12 @@
     "checkJs": true,
     "baseUrl": ".",
     "paths": {
+      "plotly.js-dist-min": [
+        "node_modules/@types/plotly.js"
+      ],
       "@/*": [
         "./src/*",
-        "./public/*"
+        "./public/*",
       ],
       "@/server/*": [
         "../server/src/*"