Removed Graph's tab, added movable windows instead

gcs/electron/main.ts

@@ -40,6 +40,9 @@ import registerVibeStatusIPC, {
 } from "./modules/vibeStatusWindow"
 import registerVideoIPC, { destroyVideoWindow } from "./modules/videoWindow"
 import { readParamsFile } from "./utils/paramsFile"
+import registerGraphWindowIPC, {
+  destroyAllGraphWindows,
+} from "./modules/graphWindow"
 
 // Check if required data files exist
 function checkRequiredDataFiles(): {
@@ -277,6 +280,7 @@ function createWindow() {
   registerFFmpegBinaryIPC()
   registerRTSPStreamIPC(win)
   registerFlaParamsIPC()
+  registerGraphWindowIPC()
 
   // Open links in browser, not within the electron window.
   // Note, links must have target="_blank"
@@ -465,6 +469,7 @@ function closeWindows() {
   destroyVibeStatusWindow()
   cleanupAllRTSPStreams()
   destroyFlaParamsWindow()
+  destroyAllGraphWindows()
 }
 
 // Quit when all windows are closed, except on macOS. There, it's common

gcs/electron/modules/graphWindow.ts

@@ -0,0 +1,161 @@
+import { BrowserWindow, ipcMain } from "electron"
+import path from "path"
+
+const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"]
+
+type GraphKey = "graph_a" | "graph_b" | "graph_c" | "graph_d"
+
+type GraphWindowMeta = {
+  id: string
+  msg: string
+  field: string
+  title: string
+  description?: string
+  label?: string
+}
+
+type OpenArgs = {
+  graphKey: GraphKey
+  meta: GraphWindowMeta
+}
+
+type CloseArgs = {
+  graphKey: GraphKey
+}
+
+type GraphPoint = {
+  graphKey: GraphKey
+  data: { x: number; y: number }
+}
+
+const graphWins: Partial<Record<GraphKey, BrowserWindow>> = {}
+
+/** Get a window if it's still usable; auto-clean if destroyed. */
+function getGraphWin(graphKey: GraphKey): BrowserWindow | null {
+  const win = graphWins[graphKey]
+  if (!win) return null
+
+  if (win.isDestroyed()) {
+    graphWins[graphKey] = undefined
+    return null
+  }
+
+  if (win.webContents.isDestroyed()) {
+    graphWins[graphKey] = undefined
+    return null
+  }
+
+  return win
+}
+
+export function openGraphWindow({ graphKey, meta }: OpenArgs) {
+  console.log("openGraphWindow called", graphKey)
+
+  // Reuse existing window if it's alive
+  let win = getGraphWin(graphKey)
+
+  if (!win) {
+    win = new BrowserWindow({
+      width: 700,
+      height: 350,
+      frame: true,
+      icon: path.join(process.env.VITE_PUBLIC!, "app_icon.ico"),
+      show: false,
+      title: meta?.title ?? "Graph",
+      webPreferences: {
+        preload: path.join(__dirname, "preload.js"),
+        contextIsolation: true,
+      },
+      fullscreen: false,
+      fullscreenable: false,
+      alwaysOnTop: true,
+    })
+
+    graphWins[graphKey] = win
+    win.setMenuBarVisibility(false)
+
+    // IMPORTANT: clean up reference when user closes window
+    win.on("closed", () => {
+      graphWins[graphKey] = undefined
+    })
+
+    // Load content only on first creation
+    if (VITE_DEV_SERVER_URL) {
+      win.loadURL(VITE_DEV_SERVER_URL + "graphWindow.html")
+    } else {
+      win.loadFile(path.join(process.env.DIST!, "graphWindow.html"))
+    }
+
+    // When page finishes loading, send init
+    win.webContents.once("did-finish-load", () => {
+      // Guard again just in case it got closed mid-load
+      const alive = getGraphWin(graphKey)
+      if (!alive) return
+      alive.webContents.send("app:graph-window:init", { graphKey, meta })
+    })
+  } else {
+    // Window already exists: just update title + init payload
+    try {
+      win.setTitle(meta?.title ?? "Graph")
+      win.webContents.send("app:graph-window:init", { graphKey, meta })
+    } catch (e) {
+      // If it threw, treat it as dead and try again once
+      graphWins[graphKey] = undefined
+      return openGraphWindow({ graphKey, meta })
+    }
+  }
+
+  // Show/focus safely
+  if (!win.isDestroyed()) {
+    win.show()
+    win.focus()
+  }
+}
+
+export function closeGraphWindow({ graphKey }: CloseArgs) {
+  const win = getGraphWin(graphKey)
+  if (!win) return
+
+  // Do NOT set undefined here — let the 'closed' event clean up.
+  win.close()
+}
+
+export function destroyAllGraphWindows() {
+  ;(Object.keys(graphWins) as GraphKey[]).forEach((k) => {
+    const win = getGraphWin(k)
+    win?.close()
+  })
+}
+
+export default function registerGraphWindowIPC() {
+  ipcMain.removeHandler("app:open-graph-window")
+  ipcMain.removeHandler("app:close-graph-window")
+  ipcMain.removeHandler("app:update-graph-windows")
+
+  ipcMain.handle("app:open-graph-window", (_event, args: OpenArgs) => {
+    openGraphWindow(args)
+  })
+
+  ipcMain.handle("app:close-graph-window", (_event, args: CloseArgs) => {
+    closeGraphWindow(args)
+  })
+
+  ipcMain.handle(
+    "app:update-graph-windows",
+    (_event, graphResults: GraphPoint[] | false) => {
+      if (!graphResults) return
+
+      for (const result of graphResults) {
+        const win = getGraphWin(result.graphKey)
+        if (!win) continue
+
+        try {
+          win.webContents.send("app:send-graph-point", result)
+        } catch {
+          // If it errors during close, drop it
+          graphWins[result.graphKey] = undefined
+        }
+      }
+    },
+  )
+}

gcs/electron/preload.js

@@ -16,6 +16,11 @@ const ALLOWED_INVOKE_CHANNELS = [
   "settings:save-settings",
   "app:open-video-window",
   "app:close-video-window",
+  "app:open-graph-window",
+  "app:close-graph-window",
+  "app:open-graph-window",
+  "app:close-graph-window",
+  "app:update-graph-windows",
   "app:start-rtsp-stream",
   "app:stop-rtsp-stream",
   "app:get-current-stream-url",
@@ -54,6 +59,7 @@ const ALLOWED_SEND_CHANNELS = [
   "window:update-title",
   // drone state updates (connectedToDrone, isArmed, isFlying)
   "app:drone-state",
+  "app:graph-window:ready",
 ]
 
 const ALLOWED_ON_CHANNELS = [
@@ -67,6 +73,8 @@ const ALLOWED_ON_CHANNELS = [
   "settings:open",
   "mavlink-forwarding:open",
   "app:send-fla-params",
+  "app:graph-window:init",
+  "app:send-graph-point",
 ]
 
 contextBridge.exposeInMainWorld("ipcRenderer", {
@@ -94,6 +102,13 @@ contextBridge.exposeInMainWorld("ipcRenderer", {
     throw new Error(`IPC on channel '${channel}' is not allowed`)
   },
 
+  removeListener: (channel, callback) => {
+    if (ALLOWED_ON_CHANNELS.includes(channel)) {
+      return ipcRenderer.removeListener(channel, callback)
+    }
+    throw new Error(`IPC removeListener channel '${channel}' is not allowed`)
+  },
+
   // Secure removeAllListeners - only for whitelisted channels
   removeAllListeners: (channel) => {
     if (ALLOWED_ON_CHANNELS.includes(channel)) {

gcs/graphWindow.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo_dark_icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/graphWindow.jsx"></script>
+  </body>
+</html>

gcs/src/components/dashboard/resizableInfoBox.jsx

@@ -1,6 +1,6 @@
 /*
   Resizable information box. This is the left hand side if the screen that moves and will contain
-  both the telemetry information and actions, which are both separate components. These 
+  both the telemetry information and actions, which are both separate components. These
   components are passed in via the props.children which in this case is from dashboard.jsx
 */
 

gcs/src/components/graphWindow/graphWindow.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react"
+
+export default function GraphWindow() {
+  const [meta, setMeta] = useState(null)
+
+  useEffect(() => {
+    window.ipcRenderer.on("app:graph-window:init", (_event, data) => {
+      setMeta(data)
+    })
+  }, [])
+
+  return (
+    <div className="w-full h-full bg-falcongrey-800 p-4">
+      <div className="text-lg">{meta?.title ?? "Graph"}</div>
+      <div className="text-sm text-falcongray-90 opacity-70">
+        {meta?.id ?? ""}
+      </div>
+      <div className="text-sm text-falcongray-90 opacity-70 mt-1">
+        {meta?.description ?? ""}
+      </div>
+      <div className="mt-6 opacity-70">Graph goes here later.</div>
+    </div>
+  )
+}