Frontend Integration

software/tracksight/frontend/.gitignore

@@ -1,4 +1,4 @@
 node_modules/**
 .env
 !.prettierrc
-!.prettierignore
+!.prettierignore

software/tracksight/frontend/app/historic/page.tsx

@@ -0,0 +1,17 @@
+import { Calendar } from "lucide-react";
+
+export default function Historic() {
+	return (
+		<div>
+			{/** TODO(evan): Make this dynamic and a selector **/}
+			{/** TODO(evan): Add the universal timeline here */}
+			<div className="hover:bg-gray-300 flex items-center gap-4 rounded-lg px-4 py-4 transition-colors hover:cursor-pointer">
+				<Calendar className="stroke-current" size={24} />
+				<div className="flex flex-col items-start">
+					<span className="text font-semibold">September 28th 2025</span>
+					<span className="text-sm opacity-50">Session 1</span>
+				</div>
+			</div>
+		</div>
+	);
+}

software/tracksight/frontend/app/live/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+// import AlertBoard from "@/components/shared/AlertBoard/AlertBoard";
+// import ConnectionStatus from "@/components/pages/live-data/ConnectionStatus";
+import { DisplayControlProvider } from "@/components/PausePlayControl";
+import SyncedGraphContainer from "@/components/SyncedGraphContainer";
+import { SignalProvider } from "@/lib/contexts/SignalContext";
+import { WidgetAdder } from "@/components/WidgetAdder";
+import { Widget } from "@/components/widgets/Widget";
+import useWidgetManager from "@/components/widgets/useWidgetManager";
+
+export default function LiveDataPage() {
+  const {
+    widgets,
+    setEnumSignal,
+    appendNumSignal,
+    removeNumSignal,
+    removeWidget,
+    updateWidget,
+    appendWidget
+  } = useWidgetManager();
+
+  return (
+    <DisplayControlProvider> {/* not so sure actually (OLD) */}
+      <SignalProvider> {/* provides signal data (OLD) */}
+        <SyncedGraphContainer>
+          {/** TODO(evan): Add pause / play button here */}
+          {/** TODO(evan): Add the universal timeline here */}
+          {/* TODO rework alerts */}
+          {/* <h2 className="text-xl font-bold mb-2">Alerts</h2> */}
+          {/* <AlertBoard /> */}
+          {/* <h2 className="text-xl font-bold mb-2">Connection Status</h2> */}
+          {/* <ConnectionStatus /> */}
+          {widgets.map(widgetData => <Widget
+            widgetData={widgetData}
+            setEnumSignal={setEnumSignal}
+            appendNumSignal={appendNumSignal}
+            removeNumSignal={removeNumSignal}
+            removeWidget={removeWidget}
+            updateWidget={updateWidget}
+            key={widgetData.id} />
+          )}
+          <WidgetAdder onAddWidget={appendWidget} />
+          {/* <DynamicRowManager /> */}
+        </SyncedGraphContainer>
+      </SignalProvider >
+    </DisplayControlProvider >
+  );
+}

software/tracksight/frontend/components/shared/DropdownSearch.tsx → software/tracksight/frontend/components/DropdownSearch.tsx

@@ -2,7 +2,7 @@
 
 import { X } from "lucide-react";
 import React, { useMemo, useState, useEffect, useRef, useCallback } from "react";
-import { PlusButton } from "./PlusButton";
+import { PlusButton } from "@/components/PlusButton";
 import { DEBUG, BACKEND_URL, SignalMeta } from "@/lib/SignalConfig";
 
 // Internal extension with pre-lowercased fields to avoid per-keystroke toLowerCase allocations
@@ -102,7 +102,6 @@ const RowEditorInner: React.FC<RowEditorProps> = ({
       fetchSignals();
     }
     return () => abortRef.current?.abort();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [row.isOpen, hasFetched]);
 
   // Filter signals based on debounced search term

software/tracksight/frontend/components/shared/InsertionBar.tsx → software/tracksight/frontend/components/InsertionBar.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { PlusButton } from "./PlusButton";
 import { SignalType } from "@/lib/SignalConfig";
-import { MockGraphConfig } from "../pages/live-data/MockGraph";
+import { MockGraphConfig } from "./widgets/MockGraph";
 
 interface InsertionBarProps {
   onInsert: () => void;

software/tracksight/frontend/components/Navbar.tsx

@@ -1,22 +1,13 @@
-import { Calendar } from "lucide-react";
+import Link from "next/link";
 
 function Navbar() {
   return (
-    <nav className="border-primary-300 bg-primary-100 fixed top-0 left-0 z-50 flex h-min w-screen flex-col">
-      <div className="flex flex-row items-center justify-between border-b-2 border-inherit px-10 py-5 select-none">
-        {/** TODO(evan): Make this dynamic and a selector **/}
-        <div className="hover:text-primary-900 flex items-center gap-4 rounded-md px-2 py-1 transition-colors hover:cursor-pointer">
-          <Calendar className="stroke-current" size={24} />
-          <div className="flex flex-col items-start">
-            <span className="text font-semibold">September 28th 2025</span>
-            <span className="text-sm opacity-50">Session 1</span>
-          </div>
-        </div>
-
-        {/** TODO(evan): Add pause / play button here */}
+    <nav className="fixed top-0 left-0 z-50 h-min w-screen">
+      <div className="flex flex-row items-center gap-6 select-none px-8 py-4">
+        <Link href="/">Home</Link>
+        <Link href="/live">Live Data</Link>
+        <Link href="/historical">Historical Data</Link>
       </div>
-
-      {/** TODO(evan): Add the universal timeline here */}
     </nav>
   );
 }