Merge pull request #657 from qitechgmbh/634-store-graphs-timeframe-globally

added global timeframe store

electron/src/components/graph/useGraphSync.ts

@@ -1,14 +1,13 @@
 import { useState, useCallback, useRef } from "react";
 import { PropGraphSync } from "./types";
 import { GraphExportData, exportGraphsToExcel } from "./excelExport";
+import { useGraphSettingsStore } from "@/stores/graphSettingsStore";
+
+export function useGraphSync(exportGroupId?: string) {
+  const store = useGraphSettingsStore();
+  // not reactive but works :)
+  const timeWindow = store.getTimeframe();
 
-export function useGraphSync(
-  defaultTimeWindow: number | "all" = 30 * 60 * 1000,
-  exportGroupId?: string,
-) {
-  const [timeWindow, setTimeWindow] = useState<number | "all">(
-    defaultTimeWindow,
-  );
   const [viewMode, setViewMode] = useState<"default" | "all" | "manual">(
     "default",
   );
@@ -86,7 +85,8 @@ export function useGraphSync(
         }
 
         // Batch all state updates together
-        if (updates.timeWindow !== undefined) setTimeWindow(updates.timeWindow);
+        if (updates.timeWindow !== undefined)
+          store.setTimeframe(updates.timeWindow);
         if (updates.viewMode !== undefined) setViewMode(updates.viewMode);
         if (updates.isLiveMode !== undefined) setIsLiveMode(updates.isLiveMode);
         if (updates.xRange !== undefined) setXRange(updates.xRange);

electron/src/machines/extruder/extruder2/Extruder2Graph.tsx

@@ -26,7 +26,7 @@ export function Extruder2GraphsPage() {
     combinedPower,
   } = useExtruder2();
 
-  const syncHook = useGraphSync(30 * 60 * 1000, "extruder-graphs");
+  const syncHook = useGraphSync("extruder-graphs");
 
   // Base config
   const baseConfig: GraphConfig = {

electron/src/machines/laser/laser1/Laser1Graph.tsx

@@ -12,7 +12,7 @@ import { useLaser1 } from "./useLaser1";
 export function Laser1GraphsPage() {
   const { diameter, state } = useLaser1();
 
-  const syncHook = useGraphSync(30 * 60 * 1000, "diameter-group");
+  const syncHook = useGraphSync("diameter-group");
   const targetDiameter = state?.laser_state?.target_diameter ?? 0;
   const lowerTolerance = state?.laser_state?.lower_tolerance ?? 0;
   const higherTolerance = state?.laser_state?.higher_tolerance ?? 0;

electron/src/machines/mock/mock1/Mock1Graph.tsx

@@ -12,7 +12,7 @@ import { TimeSeriesValue, type Series, TimeSeries } from "@/lib/timeseries";
 export function Mock1GraphPage() {
   const { sineWaveSum } = useMock1();
 
-  const syncHook = useGraphSync(30 * 60 * 1000, "mock-graphs");
+  const syncHook = useGraphSync("mock-graphs");
 
   const config: GraphConfig = {
     title: "Sine Wave",

electron/src/machines/winder/winder2/Winder2Graphs.tsx

@@ -23,7 +23,7 @@ export function Winder2GraphsPage() {
     spoolProgress,
   } = useWinder2();
 
-  const syncHook = useGraphSync(30 * 60 * 1000, "winder2-group");
+  const syncHook = useGraphSync("winder2-group");
 
   return (
     <Page className="pb-27">

electron/src/stores/graphSettingsStore.ts

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import { produce } from "immer";
+
+export type MachineName = string; // e.g., "mock1", "winder2", "extruder2"
+
+export type TimeFrame = number | "all";
+
+interface GraphSettingsState {
+  timeframe: TimeFrame;
+  setTimeframe: (graphTimeFrame: TimeFrame) => void;
+  getTimeframe: () => TimeFrame;
+}
+
+export const useGraphSettingsStore = create<GraphSettingsState>((set, get) => ({
+  timeframe: 30 * 1000 * 60,
+  setTimeframe: (graphTimeFrame) =>
+    set(
+      produce((state: GraphSettingsState) => {
+        state.timeframe = graphTimeFrame;
+      }),
+    ),
+
+  getTimeframe: () => {
+    const state = get();
+    return state.timeframe;
+  },
+}));