Implement climate charts workspace and detached chart windows

src/app/App.tsx

@@ -7,7 +7,7 @@ import { MeteoPage } from "../features/meteo/pages/MeteoPage";
 import { ClimateChartsPage } from "../features/climate/pages/ClimateChartsPage";
 import { ConsolePage } from "../features/console/pages/ConsolePage";
 import { MainChartsPage } from "../features/maincharts/pages/MainChartsPage";
-import { ChartWindowPage } from "../features/maincharts/pages/ChartWindowPage";
+import { ChartWindowPage } from "../features/chartworkspace/pages/ChartWindowPage";
 import { SettingsPage } from "../features/settings/pages/SettingsPage";
 
 export type AppPage =

src/features/chartworkspace/pages/ChartWindowPage.tsx

@@ -43,6 +43,15 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
     const parts = window.location.pathname.split("/").filter(Boolean);
     const chartId = parts[parts.length - 1] ?? "";
 
+    const params = new URLSearchParams(window.location.search);
+
+    const scope =
+        (params.get("scope") as "GLOBAL" | "CLIMATE") ?? "GLOBAL";
+
+    const channel =
+        (params.get("channel") as "maincharts" | "climatecharts") ??
+        "maincharts";
+
     const { chartableVariables, connected } = useTelemetryCatalog();
 
     const [charts, setCharts] = useState<ChartWorkspaceItem[]>([]);
@@ -64,7 +73,7 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
         : "grid h-9 w-11 place-items-center text-slate-500 transition hover:bg-red-500 hover:text-white";
 
     useChartWorkspacePersistence({
-        scope: "GLOBAL",
+        scope,
         layoutMode: "fourGrid",
         charts,
         onLoaded: (workspace) => {
@@ -76,28 +85,31 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
         },
     });
 
-    const chart = charts.find((item) => item.id === chartId) ?? null;
+    const chart = useMemo(
+        () => charts.find((item) => item.id === chartId) ?? null,
+        [charts, chartId],
+    );
 
     useEffect(() => {
         latestChartRef.current = chart;
     }, [chart]);
 
     const emitMainUpdate = async (patch: Partial<ChartWorkspaceItem>) => {
-        await emit("maincharts://update-chart", {
+        await emit(`${channel}://update-chart`, {
             chartId,
             patch,
         });
     };
 
     const emitMainHidden = async () => {
-        await emit("maincharts://hide-chart", {
+        await emit(`${channel}://hide-chart`, {
             chartId,
             chart: latestChartRef.current,
         });
     };
 
     const emitMainAttached = async () => {
-        await emit("maincharts://attach-chart", {
+        await emit(`${channel}://attach-chart`, {
             chartId,
             chart: latestChartRef.current,
         });
@@ -194,6 +206,10 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
         await currentWindow.destroy();
     };
 
+    if (!chart && charts.length === 0) {
+        return null;
+    }
+
     if (!chart) {
         return (
             <div
@@ -315,7 +331,7 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
                             ...updatedChart,
                         };
 
-                        await emit("maincharts://replace-chart", {
+                        await emit(`${channel}://replace-chart`, {
                             chart: updatedChart,
                         }).catch((error) => {
                             console.error("Failed to replace chart in main window", error);

src/features/chartworkspace/utils/openChartWindow.ts

@@ -4,8 +4,10 @@ export async function openChartWindow(
     chartId: string,
     theme: "dark" | "light",
     title: string,
+    scope: "GLOBAL" | "CLIMATE" = "GLOBAL",
+    channel: "maincharts" | "climatecharts" = "maincharts",
 ) {
-    const label = `chart-${chartId}`;
+    const label = `${channel}-${chartId}`;
 
     const existing = await WebviewWindow.getByLabel(label);
 
@@ -16,13 +18,12 @@ export async function openChartWindow(
     }
 
     const chartWindow = new WebviewWindow(label, {
-        url: `/chart-window/${chartId}?theme=${theme}`,
+        url: `/chart-window/${chartId}?theme=${theme}&scope=${scope}&channel=${channel}`,
 
         title,
 
         width: 920,
         height: 680,
-
         minWidth: 720,
         minHeight: 480,
 

src/features/climate/hooks/useClimateChartCatalog.ts

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import type { ChartVariable } from "../../telemetry/types/telemetryCatalog";
+import { useClimateHistory } from "./useClimateHistory";
+
+export function useClimateChartCatalog() {
+    const climate = useClimateHistory();
+
+    const chartableVariables = useMemo<ChartVariable[]>(
+        () =>
+            climate.sensors.map((sensor) => ({
+                sensorId: sensor.sensorId,
+                key: sensor.key,
+                label: sensor.name,
+                value:
+                    typeof sensor.value === "number" ||
+                        typeof sensor.value === "string" ||
+                        typeof sensor.value === "boolean" ||
+                        sensor.value === null
+                        ? sensor.value
+                        : null,
+                unit: sensor.unit ?? "",
+                timestamp: sensor.timestamp,
+                category: "Clima",
+                group: "Climate",
+                chartable: true,
+            })),
+        [climate.sensors],
+    );
+
+    return {
+        chartableVariables,
+        connected: climate.connected,
+        loading: !climate.module,
+        sensorCount: climate.sensorCount,
+        lastTimestamp: climate.lastTimestamp,
+    };
+}

src/features/climate/hooks/useClimateChartSeries.ts

@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useState } from "react";
+import type {
+    WorkspaceChartInterval,
+    WorkspaceChartPoint,
+    WorkspaceChartTimeRange,
+} from "../../../components/charts/WorkspaceChart";
+
+const BACKEND_URL = "http://localhost:18450";
+
+type HistorianPoint = {
+    timestamp: string;
+    numericValue: number | null;
+    booleanValue: boolean | null;
+    textValue: string | null;
+};
+
+export function useClimateChartSeries(
+    sensorKeys: string[],
+    timeRange: WorkspaceChartTimeRange,
+    interval: WorkspaceChartInterval,
+) {
+    const [seriesByKey, setSeriesByKey] = useState<Record<string, WorkspaceChartPoint[]>>({});
+    const [loading, setLoading] = useState(true);
+    const [initialized, setInitialized] = useState(false);
+
+    const keySignature = useMemo(
+        () => sensorKeys.slice().sort().join(","),
+        [sensorKeys],
+    );
+
+    useEffect(() => {
+        if (sensorKeys.length === 0) {
+            setSeriesByKey({});
+            setLoading(false);
+            return;
+        }
+
+        const controller = new AbortController();
+
+        async function loadHistory() {
+            try {
+                const to = new Date();
+                const from = new Date(to.getTime() - rangeToMs(timeRange));
+
+                if (!initialized) {
+                    setLoading(true);
+                }
+
+                const entries = await Promise.all(
+                    sensorKeys.map(async (key) => {
+                        const params = new URLSearchParams({
+                            key,
+                            from: from.toISOString(),
+                            to: to.toISOString(),
+                        });
+
+                        const response = await fetch(
+                            `${BACKEND_URL}/api/historian/series?${params.toString()}`,
+                            { signal: controller.signal },
+                        );
+
+                        if (!response.ok) {
+                            throw new Error(`Failed to load climate history for ${key}`);
+                        }
+
+                        const payload = (await response.json()) as HistorianPoint[];
+
+                        const points = payload
+                            .filter(
+                                (point) =>
+                                    point.numericValue !== null &&
+                                    Number.isFinite(point.numericValue),
+                            )
+                            .map((point) => ({
+                                timestamp: point.timestamp,
+                                value: point.numericValue as number,
+                            }));
+
+                        return [key, aggregatePoints(points, interval)] as const;
+                    }),
+                );
+
+                setSeriesByKey(Object.fromEntries(entries));
+                setInitialized(true);
+            } catch (error) {
+                if (controller.signal.aborted) return;
+
+                console.error("Failed to load climate chart history", error);
+
+                if (!initialized) {
+                    setSeriesByKey({});
+                }
+            } finally {
+                if (!controller.signal.aborted) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        void loadHistory();
+
+        const intervalId = window.setInterval(() => {
+            void loadHistory();
+        }, 10000);
+
+        return () => {
+            controller.abort();
+            window.clearInterval(intervalId);
+        };
+    }, [keySignature, timeRange, interval, initialized]);
+
+    return {
+        seriesByKey,
+        loading,
+    };
+}
+
+function rangeToMs(range: WorkspaceChartTimeRange) {
+    switch (range) {
+        case "15m":
+            return 15 * 60 * 1000;
+        case "1h":
+            return 60 * 60 * 1000;
+        case "6h":
+            return 6 * 60 * 60 * 1000;
+        case "24h":
+            return 24 * 60 * 60 * 1000;
+        case "7d":
+            return 7 * 24 * 60 * 60 * 1000;
+        case "30d":
+            return 30 * 24 * 60 * 60 * 1000;
+    }
+}
+
+function intervalToMs(interval: WorkspaceChartInterval) {
+    switch (interval) {
+        case "1m":
+            return 60 * 1000;
+        case "5m":
+            return 5 * 60 * 1000;
+        case "15m":
+            return 15 * 60 * 1000;
+        case "1h":
+            return 60 * 60 * 1000;
+    }
+}
+
+function aggregatePoints(
+    points: WorkspaceChartPoint[],
+    interval: WorkspaceChartInterval,
+): WorkspaceChartPoint[] {
+    const bucketMs = intervalToMs(interval);
+
+    if (bucketMs === 0) {
+        return points;
+    }
+
+    const buckets = new Map<number, number[]>();
+
+    for (const point of points) {
+        const time = new Date(point.timestamp).getTime();
+
+        if (!Number.isFinite(time)) {
+            continue;
+        }
+
+        const bucketTime = Math.floor(time / bucketMs) * bucketMs;
+
+        const values = buckets.get(bucketTime) ?? [];
+
+        if (point.value !== null && Number.isFinite(point.value)) {
+            values.push(point.value);
+        }
+
+        buckets.set(bucketTime, values);
+    }
+
+    return Array.from(buckets.entries())
+        .sort(([a], [b]) => a - b)
+        .map(([bucketTime, values]) => ({
+            timestamp: new Date(bucketTime).toISOString(),
+            value: average(values),
+        }));
+}
+
+function average(values: number[]) {
+    return values.reduce((sum, value) => sum + value, 0) / values.length;
+}

src/features/climate/hooks/useClimateHistory.ts

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useState } from "react";
+
+import {
+    useClimateModuleStream,
+    type ClimateModuleResponse,
+} from "./useClimateModuleStream";
+
+export type ClimateHistoryPoint = {
+    timestamp: string;
+    value: number;
+};
+
+export type ClimateHistoryByKey = Record<string, ClimateHistoryPoint[]>;
+
+const MAX_POINTS_PER_SENSOR = 2000;
+
+export function useClimateHistory() {
+    const climate = useClimateModuleStream();
+
+    const [historyByKey, setHistoryByKey] = useState<ClimateHistoryByKey>({});
+
+    useEffect(() => {
+        const module = climate.module;
+
+        if (!module) return;
+
+        setHistoryByKey((current) =>
+            appendClimateSnapshot(current, module),
+        );
+    }, [climate.module]);
+
+    const numericSensors = useMemo(
+        () =>
+            climate.sensors.filter(
+                (sensor) =>
+                    typeof sensor.value === "number" &&
+                    Number.isFinite(sensor.value),
+            ),
+        [climate.sensors],
+    );
+
+    return {
+        ...climate,
+        sensors: numericSensors,
+        historyByKey,
+    };
+}
+
+function appendClimateSnapshot(
+    current: ClimateHistoryByKey,
+    snapshot: ClimateModuleResponse,
+): ClimateHistoryByKey {
+    const timestamp = snapshot.timestamp ?? new Date().toISOString();
+    const next: ClimateHistoryByKey = { ...current };
+
+    for (const sensor of snapshot.sensors) {
+        if (typeof sensor.value !== "number" || !Number.isFinite(sensor.value)) {
+            continue;
+        }
+
+        const key = sensor.key;
+        const currentSeries = next[key] ?? [];
+
+        const lastPoint = currentSeries[currentSeries.length - 1];
+
+        if (lastPoint?.timestamp === timestamp) {
+            continue;
+        }
+
+        next[key] = [
+            ...currentSeries,
+            {
+                timestamp,
+                value: sensor.value,
+            },
+        ].slice(-MAX_POINTS_PER_SENSOR);
+    }
+
+    return next;
+}

src/features/climate/hooks/useClimateModuleStream.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { Client } from "@stomp/stompjs";
+
+import type { ModuleSensorResponse } from "../../../types/meteo";
+
+export type ClimateModuleResponse = {
+    timestamp: string;
+    sensors: ModuleSensorResponse[];
+};
+
+const WS_URL = "ws://localhost:18450/ws";
+const TOPIC = "/topic/modules/climate/latest";
+
+export function useClimateModuleStream() {
+    const [module, setModule] = useState<ClimateModuleResponse | null>(null);
+    const [connected, setConnected] = useState(false);
+    const [lastTimestamp, setLastTimestamp] = useState<string | null>(null);
+
+    useEffect(() => {
+        const client = new Client({
+            brokerURL: WS_URL,
+            reconnectDelay: 3000,
+
+            onConnect: () => {
+                setConnected(true);
+
+                client.subscribe(TOPIC, (message) => {
+                    const payload = JSON.parse(message.body) as ClimateModuleResponse;
+
+                    setModule(payload);
+                    setLastTimestamp(payload.timestamp);
+                });
+            },
+
+            onWebSocketClose: () => {
+                setConnected(false);
+            },
+
+            onStompError: (frame) => {
+                console.error("Climate module STOMP error", frame);
+                setConnected(false);
+            },
+        });
+
+        client.activate();
+
+        return () => {
+            client.deactivate();
+        };
+    }, []);
+
+    return {
+        module,
+        sensors: module?.sensors ?? [],
+        sensorCount: module?.sensors.length ?? 0,
+        connected,
+        lastTimestamp,
+    };
+}

src/features/maincharts/pages/MainChartsPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { listen } from "@tauri-apps/api/event";
-import { ChartConfigModal } from "../components/ChartConfigModal";
+import { ChartConfigModal } from "../../chartworkspace/components/ChartConfigModal";
-import { openChartWindow } from "../utils/openChartWindow";
+import { openChartWindow } from "../../chartworkspace/utils/openChartWindow";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import {
     Cog,
@@ -38,7 +38,7 @@ import {
     useChartWorkspacePersistence,
     type PersistedChartWorkspaceItem,
     type ChartLayoutMode,
-} from "../hooks/useChartWorkspacePersistence";
+} from "../../chartworkspace/hooks/useChartWorkspacePersistence";
 
 type MainChartsPageProps = {
     theme: "dark" | "light";