add lambda support

UCSolarCarTeam · Dec 4, 2024 · 8334e48 · 8334e48
1 parent 2469d7c
commit 8334e48
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 46 deletions.
diff --git a/packages/client/public/correlationMatrixData.json b/packages/client/public/correlationMatrixData.json
diff --git a/packages/client/src/components/containers/MLContainer.tsx b/packages/client/src/components/containers/MLContainer.tsx
@@ -1,35 +1,40 @@
 "use client";
 
-import axios from "axios";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useState } from "react";
 import { PlotParams } from "react-plotly.js";
 
-import correlationMatrixData from "@/correlationMatrixData.json";
 import useWindowDimensions from "@/hooks/PIS/useWindowDimensions";
 
 const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
 const SMALL_SCREEN = 380;
-export default function MLContainer() {
-  const [plot, setPlot] = useState<PlotParams>();
+type PlotTypes =
+  | "/api/getPacketCorrelationMatrix"
+  | "/api/getLapCorrelationMatrix";
+export default function MLContainer({
+  plotType = "/api/getLapCorrelationMatrix",
+}: {
+  plotType?: PlotTypes;
+}) {
+  const [plot, setPlot] = useState<PlotParams | { error: boolean }>();
   const { width } = useWindowDimensions();
 
   const fetchPlot = useCallback(async () => {
-    let data = JSON.parse(correlationMatrixData);
-
     try {
-      const response = await axios.get("http://localhost:8000/packet_plot");
-      data = JSON.parse(await response.data);
-    } catch {}
-
-    const layout: PlotParams["layout"] = {
-      autosize: true,
-      title: data.layout.title.text,
-    };
-    data.layout = layout;
+      const response = await fetch(plotType);
+      const graph = await response.json();
+      const data = JSON.parse(graph);
+      const layout: PlotParams["layout"] = {
+        autosize: true,
+        title: data.layout.title.text,
+      };
+      data.layout = layout;
 
-    setPlot(data);
-  }, []);
+      setPlot(data);
+    } catch (e) {
+      setPlot({ error: true });
+    }
+  }, [plotType]);
 
   useEffect(() => {
     fetchPlot();
@@ -38,26 +43,27 @@ export default function MLContainer() {
   if (!plot) {
     return <div>Loading...</div>;
   }
+  if ("error" in plot) {
+    return <div>Error loading data</div>;
+  }
   return (
-    <div className="flex max-h-96 w-full items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold">
-      <Plot
-        className="h-96 w-full"
-        config={{
-          displayModeBar: width < SMALL_SCREEN,
-          displaylogo: false,
-          modeBarButtonsToRemove: [
-            "toImage",
-            "zoomOut2d",
-            "zoom2d",
-            "resetScale2d",
-          ],
-          scrollZoom: true,
-          staticPlot: width < SMALL_SCREEN,
-        }}
-        data={plot.data}
-        layout={plot.layout}
-        useResizeHandler={true}
-      />
-    </div>
+    <Plot
+      className="h-96 w-full"
+      config={{
+        displayModeBar: width < SMALL_SCREEN,
+        displaylogo: false,
+        modeBarButtonsToRemove: [
+          "toImage",
+          "zoomOut2d",
+          "zoom2d",
+          "resetScale2d",
+        ],
+        scrollZoom: true,
+        staticPlot: width < SMALL_SCREEN,
+      }}
+      data={plot.data}
+      layout={plot.layout}
+      useResizeHandler={true}
+    />
   );
 }
diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -22,7 +22,7 @@ const filters: string[] = [
   "Power Out",
   "Battery Voltage",
   "Battery Current",
-];
+] as const;
 
 const theme = createTheme({
   palette: {
@@ -98,8 +98,8 @@ function AnalysisTab() {
       </div>
 
       {/* MAIN */}
-      <div className="flex flex-col flex-wrap justify-between gap-y-6 md:flex-row md:gap-x-4">
-        <div className="flex max-w-44 flex-col gap-y-1 md:w-auto">
+      <div className="flex flex-col justify-between gap-4 md:flex-row">
+        <div className="flex max-w-44 flex-col gap-1 md:w-auto">
           {filters.map((filter) => (
             <div className="flex items-center space-x-2" key={filter}>
               <input
@@ -114,14 +114,17 @@ function AnalysisTab() {
         </div>
 
         <div
-          className="flex w-full flex-1 flex-col justify-center gap-y-4 md:flex-row md:flex-wrap md:gap-x-4 lg:w-auto"
+          className="flex w-full flex-1 flex-col justify-center gap-4 md:flex-row md:gap-x-4 lg:w-auto lg:flex-nowrap"
           id="main-content"
         >
           <TabContent className="w-full" index={0} value={value}>
-            {/* Graphs */}
-            <div className="flex size-full max-h-96 flex-1 items-center justify-center gap-x-4">
-              <MLContainer />
-              {/* Put other graphs here */}
+            <div className="grid size-full max-h-96 grid-flow-col grid-cols-2 items-center gap-4">
+              <div className="flex max-h-96 w-full items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold">
+                <MLContainer plotType="/api/getLapCorrelationMatrix" />
+              </div>
+              <div className="flex max-h-96 w-full items-center justify-center gap-4 rounded-lg bg-white p-2 text-3xl font-bold">
+                <MLContainer plotType="/api/getPacketCorrelationMatrix" />
+              </div>
             </div>
           </TabContent>
           <TabContent index={1} value={value}>

diff --git a/packages/client/src/pages/api/getLapCorrelationMatrix.ts b/packages/client/src/pages/api/getLapCorrelationMatrix.ts
@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const API_ROUTE = process.env.GET_LAP_CORRELATION_MATRIX_URL;
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (!API_ROUTE) {
+    throw new Error("GET_LAP_CORRELATION_MATRIX_URL is not defined");
+  }
+  try {
+    const result = await fetch(API_ROUTE);
+    const graph = await result.json();
+    res.status(200).json(graph);
+  } catch (err) {
+    res.status(500).json({ error: "failed to load data" + err });
+  }
+}
diff --git a/packages/client/src/pages/api/getPacketCorrelationMatrix.ts b/packages/client/src/pages/api/getPacketCorrelationMatrix.ts
@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const API_ROUTE = process.env.GET_PACKET_CORRELATION_MATRIX_URL;
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (!API_ROUTE) {
+    throw new Error("GET_PACKET_CORRELATION_MATRIX_URL is not defined");
+  }
+  try {
+    const result = await fetch(API_ROUTE);
+    const graph = await result.json();
+    res.status(200).json(graph);
+  } catch (err) {
+    res.status(500).json({ error: "failed to load data" + err });
+  }
+}