Merge pull request #81 from a-lie101/main

fix: auto-scale Y-axis, increase chart window to 200 points, add test…

Author: MaddieWright

.DS_Store

@@ -0,0 +1,70 @@
+'use client';
+import { useState, useMemo } from 'react';
+import SignalGraphView from '@/components/nodes/signal-graph-node/signal-graph-full';
+import { GlobalProvider } from '@/context/GlobalContext';
+
+const WINDOW_SIZE = 200; // how many points visible at once
+
+export default function TestChartPage() {
+  const [allData, setAllData] = useState<any[]>([]);
+  const [windowStart, setWindowStart] = useState(0);
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const text = event.target?.result as string;
+      const lines = text.trim().split('\n');
+      const parsed = lines.slice(1).map(line => {
+        const values = line.split(',');
+        const timeOnly = values[0].trim().split(' ')[1]?.slice(0, 12) ?? values[0];
+        return {
+          time: timeOnly,
+          signal1: Number(values[1]),
+          signal2: Number(values[2]),
+          signal3: Number(values[3]),
+          signal4: Number(values[4]),
+        };
+      });
+      setAllData(parsed);
+      setWindowStart(0);
+    };
+    reader.readAsText(file);
+  };
+
+  // only the visible slice
+  const visibleData = useMemo(
+    () => allData.slice(windowStart, windowStart + WINDOW_SIZE),
+    [allData, windowStart]
+  );
+
+  const maxStart = Math.max(0, allData.length - WINDOW_SIZE);
+
+  return (
+    <GlobalProvider>
+      <div className="w-screen h-screen p-8" style={{ backgroundColor: '#EAF1F0' }}>
+        
+        <input type="file" accept=".csv" onChange={handleFile} className="mb-4" />
+        
+        {allData.length > 0 && (
+          <div className="mb-4 flex items-center gap-4">
+            <span className="text-sm text-gray-500">
+              {allData.length} rows — showing {windowStart + 1}–{Math.min(windowStart + WINDOW_SIZE, allData.length)}
+            </span>
+            <input
+              type="range"
+              min={0}
+              max={maxStart}
+              value={windowStart}
+              onChange={(e) => setWindowStart(Number(e.target.value))}
+              className="w-full"
+            />
+          </div>
+        )}
+
+        {allData.length > 0 && <SignalGraphView data={visibleData} />}
+      </div>
+    </GlobalProvider>
+  );
+}

frontend/210.png

@@ -64,11 +64,11 @@ export default function SignalGraphView({ data }: SignalGraphViewProps) {
                <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={data} syncId="SignalChart">
                        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
-                       <XAxis dataKey="time" />
+                       <XAxis dataKey="time" interval={Math.floor(data.length / 10)} />
                        <YAxis
                            type="number"
-                           domain={[0, 100]}
-                           ticks={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
+                           domain={['auto', 'auto']}
+
                        />
                        {signals.map((s) => (
                            <Line
@@ -120,7 +120,7 @@ export default function SignalGraphView({ data }: SignalGraphViewProps) {
 
            {/* ---- BOTTOM HALF: TABLE ---- */}
            <div className="bg-white border shadow-lg rounded-2xl p-4 overflow-auto">
-               <DataTable data={data} />
+                <DataTable data={data} rowCount={50} />
            </div>
 
 

frontend/app/test-chart/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+ "use client"
 
 import { cn } from "@/lib/utils"
 import * as ProgressPrimitive from "@radix-ui/react-progress"