Fix typescript issues

Dockerfile

@@ -18,6 +18,4 @@ COPY backend /app/backend
 WORKDIR /app/backend
 RUN pip install --no-cache-dir -r requirements.txt
 
-EXPOSE 8765
-
 CMD ["python", "src/server.py"]

backend/src/main.py

@@ -3,13 +3,12 @@ from fastapi.staticfiles import StaticFiles
 from optimization_manager import OptimizationManager
 
 app = FastAPI()
-PORT = 8765
-
-app.mount("/", StaticFiles(directory="../frontend/sit", html=True), name="frontend")
+PORT = 7860
 
 
 @app.websocket("/ws")
 async def websocket_endpoint(websocket: WebSocket):
+    print("starting")
     await websocket.accept()
     manager = OptimizationManager()
     
@@ -96,6 +95,8 @@ async def send_error(websocket: WebSocket, error_message: str):
     })
 
 
+app.mount("/", StaticFiles(directory="../frontend/dist", html=True), name="frontend")
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=PORT)

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import Sidebar from "./Sidebar.tsx";
 import type { Settings } from "./types.ts";
 import useApi from "./useApi.ts";
 
-const API_URL = "ws://localhost:8080/ws";
+const API_URL = "ws://localhost:7860/ws";
 
 
 export default function App() {
@@ -63,8 +63,8 @@ export default function App() {
           onReset={() => api.sendReset()}
           onNextStep={() => api.sendNextStep()}
           onPrevStep={() => api.sendPrevStep()}
-          onPlay={() => api.sendPlay()}
-          onPause={() => api.sendPause()}
+          // onPlay={() => api.sendPlay()}
+          // onPause={() => api.sendPause()}
         />
       </div>
     </>

frontend/src/OptimizationPlot.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import Plot from "react-plotly.js";
 import type { PlotData } from "./types";
 
@@ -38,10 +38,18 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
       <Plot
         ref={plotRef}
         onRelayout={(event) => {
-          if (event['xaxis.range[0]'] && event['xaxis.range[1]']) {
-            const newXlim: [number, number] = [event['xaxis.range[0]'], event['xaxis.range[1]']];
-            const newYlim: [number, number] = [event['yaxis.range[0]'], event['yaxis.range[1]']];
-            setAxisLimits(newXlim, newYlim);
+          const x0 = event['xaxis.range[0]'];
+          const x1 = event['xaxis.range[1]'];
+          const y0 = event['yaxis.range[0]'];
+          const y1 = event['yaxis.range[1]'];
+
+          if (
+            typeof x0 === "number"
+            && typeof x1 === "number"
+            && typeof y0 === "number"
+            && typeof y1 === "number"
+          ) {
+            setAxisLimits([x0, x1], [y0, y1]);
           }
         }}
         data={[
@@ -63,8 +71,8 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
             hoverinfo: "skip",
           },
           {
-            x: [trajX.length > 0 ? trajX.at(-1) : undefined],
-            y: [trajY.length > 0 ? trajY.at(-1) : undefined],
+            x: trajX.length > 0 ? [trajX.at(-1)!] : [],
+            y: trajY.length > 0 ? [trajY.at(-1)!] : [],
             type: 'scatter',
             mode: 'markers',
             marker: { color: 'red', size: 12 },
@@ -85,10 +93,18 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
       <Plot
         ref={plotRef}
         onRelayout={(event) => {
-          if (event['xaxis.range[0]'] && event['xaxis.range[1]']) {
-            const newXlim: [number, number] = [event['xaxis.range[0]'], event['xaxis.range[1]']];
-            const newYlim: [number, number] = [event['yaxis.range[0]'], event['yaxis.range[1]']];
-            setAxisLimits(newXlim, newYlim);
+          const x0 = event['xaxis.range[0]'];
+          const x1 = event['xaxis.range[1]'];
+          const y0 = event['yaxis.range[0]'];
+          const y1 = event['yaxis.range[1]'];
+
+          if (
+            typeof x0 === "number"
+            && typeof x1 === "number"
+            && typeof y0 === "number"
+            && typeof y1 === "number"
+          ) {
+            setAxisLimits([x0, x1], [y0, y1]);
           }
         }}
         data={[
@@ -100,9 +116,6 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
             colorscale: 'Viridis',
             hoverinfo: "skip",
             contours: {
-              x: { highlight: false },
-              y: { highlight: false },
-              z: { highlight: false },
               coloring: "heatmap",
               showlines: false,
             }
@@ -118,9 +131,9 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
             hoverinfo: "skip",
           },
           {
-            x: [trajX.at(-1)],
-            y: [trajY.at(-1)],
-            z: [trajZ.at(-1)],
+            x: trajX.length > 0 ? [trajX.at(-1)!] : [],
+            y: trajY.length > 0 ? [trajY.at(-1)!] : [],
+            z: trajZ.length > 0 ? [trajZ.at(-1)!] : [],
             type: 'scatter',
             mode: 'markers',
             marker: { color: 'red', size: 12 },

frontend/src/Sidebar.tsx

@@ -53,8 +53,8 @@ export default function Sidebar({
   onReset,
   onNextStep,
   onPrevStep,
-  onPlay,
-  onPause,
+  // onPlay,
+  // onPause,
 }: SidebarProps) {
   const tabs = ["Settings", "Optimize"] as const;
   const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>("Settings");