REFACTOR external service and improve websocket training

frontend/src/components/domain/forecasting/DemandChart.tsx

@@ -131,6 +131,7 @@ const DemandChart: React.FC<DemandChartProps> = ({
   // Update zoomed data when filtered data changes
   useEffect(() => {
     console.log('🔍 Setting zoomed data from filtered data:', filteredData);
+    // Always update zoomed data when filtered data changes, even if empty
     setZoomedData(filteredData);
   }, [filteredData]);
 
@@ -236,11 +237,19 @@ const DemandChart: React.FC<DemandChartProps> = ({
     );
   }
 
-  // Use filteredData if zoomedData is empty but we have data
-  const displayData = zoomedData.length > 0 ? zoomedData : filteredData;
+  // Robust fallback logic for display data
+  const displayData = zoomedData.length > 0 ? zoomedData : (filteredData.length > 0 ? filteredData : chartData);
+
+  console.log('📊 Final display data:', {
+    chartDataLength: chartData.length,
+    filteredDataLength: filteredData.length,
+    zoomedDataLength: zoomedData.length,
+    displayDataLength: displayData.length,
+    displayData: displayData
+  });
 
   // Empty state - only show if we truly have no data
-  if (displayData.length === 0 && chartData.length === 0) {
+  if (displayData.length === 0) {
     return (
       <Card className={className}>
         <CardHeader>

frontend/src/components/domain/onboarding/steps/MLTrainingStep.tsx

@@ -95,21 +95,24 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
     }
   );
 
-  // Handle training status updates from HTTP polling (fallback only)
+  // Handle training status updates from React Query cache (updated by WebSocket or HTTP fallback)
   useEffect(() => {
     if (!jobStatus || !jobId || trainingProgress?.stage === 'completed') {
       return;
     }
 
-    console.log('📊 HTTP fallback status update:', jobStatus);
+    console.log('📊 Training status update from cache:', jobStatus,
+                `(source: ${isConnected ? 'WebSocket' : 'HTTP polling'})`);
 
-    // Check if training completed via HTTP polling fallback
+    // Check if training completed
     if (jobStatus.status === 'completed' && trainingProgress?.stage !== 'completed') {
-      console.log('✅ Training completion detected via HTTP fallback');
+      console.log(`✅ Training completion detected (source: ${isConnected ? 'WebSocket' : 'HTTP polling'})`);
       setTrainingProgress({
         stage: 'completed',
         progress: 100,
-        message: 'Entrenamiento completado exitosamente (detectado por verificación HTTP)'
+        message: isConnected
+          ? 'Entrenamiento completado exitosamente'
+          : 'Entrenamiento completado exitosamente (detectado por verificación HTTP)'
       });
       setIsTraining(false);
 
@@ -122,15 +125,15 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
         });
       }, 2000);
     } else if (jobStatus.status === 'failed') {
-      console.log('❌ Training failure detected via HTTP fallback');
+      console.log(`❌ Training failure detected (source: ${isConnected ? 'WebSocket' : 'HTTP polling'})`);
       setError('Error detectado durante el entrenamiento (verificación de estado)');
       setIsTraining(false);
       setTrainingProgress(null);
     } else if (jobStatus.status === 'running' && jobStatus.progress !== undefined) {
-      // Update progress if we have newer information from HTTP polling fallback
+      // Update progress if we have newer information
       const currentProgress = trainingProgress?.progress || 0;
       if (jobStatus.progress > currentProgress) {
-        console.log(`📈 Progress update via HTTP fallback: ${jobStatus.progress}%`);
+        console.log(`📈 Progress update (source: ${isConnected ? 'WebSocket' : 'HTTP polling'}): ${jobStatus.progress}%`);
         setTrainingProgress(prev => ({
           ...prev,
           stage: 'training',
@@ -140,7 +143,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
         }) as TrainingProgress);
       }
     }
-  }, [jobStatus, jobId, trainingProgress?.stage, onComplete]);
+  }, [jobStatus, jobId, trainingProgress?.stage, onComplete, isConnected]);
 
   // Auto-trigger training when component mounts
   useEffect(() => {