From 771cf6cba602ec5e1c0f20d09aafe8cd0ed5730a Mon Sep 17 00:00:00 2001
From: Miguel <miguel.vera.csa@gmail.com>
Date: Wed, 13 Aug 2025 00:24:58 +0200
Subject: [PATCH] =?UTF-8?q?Implementaci=C3=B3n=20de=20la=20gesti=C3=B3n=20?=
 =?UTF-8?q?de=20configuraci=C3=B3n=20en=20ChartjsPlot,=20permitiendo=20la?=
 =?UTF-8?q?=20carga=20de=20configuraciones=20desde=20la=20sesi=C3=B3n=20o?=
 =?UTF-8?q?=20desde=20el=20backend.=20Se=20a=C3=B1adi=C3=B3=20un=20nuevo?=
 =?UTF-8?q?=20estado=20para=20manejar=20la=20configuraci=C3=B3n=20resuelta?=
 =?UTF-8?q?=20y=20se=20optimiz=C3=B3=20la=20inicializaci=C3=B3n=20del=20gr?=
 =?UTF-8?q?=C3=A1fico.=20Adem=C3=A1s,=20se=20mejor=C3=B3=20el=20manejo=20d?=
 =?UTF-8?q?e=20errores=20durante=20la=20carga=20de=20la=20configuraci?=
 =?UTF-8?q?=C3=B3n,=20asegurando=20una=20experiencia=20m=C3=A1s=20robusta?=
 =?UTF-8?q?=20y=20fluida=20para=20el=20usuario.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChartjsPlot.jsx | 57 ++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ChartjsPlot.jsx b/frontend/src/components/ChartjsPlot.jsx
index b492b67..168050a 100644
--- a/frontend/src/components/ChartjsPlot.jsx
+++ b/frontend/src/components/ChartjsPlot.jsx
@@ -19,6 +19,7 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const [dataPointsCount, setDataPointsCount] = useState(0);
+    const [resolvedConfig, setResolvedConfig] = useState(null);
 
     const bgColor = useColorModeValue('white', 'gray.800');
     const textColor = useColorModeValue('gray.600', 'gray.300');
@@ -81,7 +82,8 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
     }, [getColor]);
 
     const createStreamingChart = useCallback(async () => {
-        if (!canvasRef.current || !session?.config) return;
+        const cfg = resolvedConfig || session?.config;
+        if (!canvasRef.current || !cfg) return;
 
         try {
             // Ensure Chart.js and plugins are loaded
@@ -108,7 +110,7 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
                 chartRef.current = null;
             }
 
-            const config = session.config;
+            const config = cfg;
             const enabledVariables = getEnabledVariables(config.variables);
 
             const datasets = enabledVariables.map((variableInfo, index) => {
@@ -265,7 +267,7 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
             setError(error.message);
             setIsLoading(false);
         }
-    }, [session, getEnabledVariables, getColor]);
+    }, [session, resolvedConfig, getEnabledVariables, getColor]);
 
     const onStreamingRefresh = useCallback(async (chart) => {
         if (!session?.session_id) return;
@@ -483,12 +485,53 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
         }
     }, [session?.is_active, session?.is_paused, pauseStreaming, resumeStreaming]);
 
-    // Initialize chart
+    // Resolve config: use provided session.config or fetch from backend
     useEffect(() => {
-        if (session?.config) {
-            createStreamingChart();
+        let cancelled = false;
+        async function resolveConfig() {
+            try {
+                setIsLoading(true);
+                setError(null);
+                // If config already present in session, use it
+                if (session?.config) {
+                    if (!cancelled) {
+                        setResolvedConfig(session.config);
+                        setIsLoading(false);
+                    }
+                    return;
+                }
+                // Otherwise fetch it from backend
+                if (session?.session_id) {
+                    const resp = await fetch(`/api/plots/${session.session_id}/config`);
+                    if (!resp.ok) {
+                        const txt = await resp.text().catch(() => resp.statusText);
+                        throw new Error(`HTTP ${resp.status}: ${txt || resp.statusText}`);
+                    }
+                    const data = await resp.json();
+                    if (data?.success && data?.config) {
+                        if (!cancelled) setResolvedConfig(data.config);
+                    } else {
+                        throw new Error('Plot config not available');
+                    }
+                } else {
+                    throw new Error('Invalid session (missing session_id)');
+                }
+            } catch (e) {
+                if (!cancelled) setError(e.message || 'Error loading plot config');
+            } finally {
+                if (!cancelled) setIsLoading(false);
+            }
         }
 
+        resolveConfig();
+        return () => { cancelled = true; };
+    }, [session?.session_id, session?.config]);
+
+    // Initialize chart when config is resolved
+    useEffect(() => {
+        if (resolvedConfig) {
+            createStreamingChart();
+        }
         return () => {
             if (chartRef.current) {
                 chartRef.current.destroy();
@@ -498,7 +541,7 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
                 clearInterval(sessionDataRef.current.manualInterval);
             }
         };
-    }, [createStreamingChart]);
+    }, [resolvedConfig, createStreamingChart]);
 
     if (isLoading) {
         return (