filter anotations by symbol

ANNOTATE/web/app.py

@@ -1167,7 +1167,9 @@ class AnnotationDashboard:
                     ]
                 
                 # Load test cases from disk (they were auto-generated when annotations were saved)
-                all_test_cases = self.annotation_manager.get_all_test_cases()
+                # CRITICAL: Filter by current symbol to avoid cross-symbol training
+                current_symbol = data.get('symbol', 'ETH/USDT')
+                all_test_cases = self.annotation_manager.get_all_test_cases(symbol=current_symbol)
                 
                 # Filter to selected annotations
                 test_cases = [

ANNOTATE/web/static/js/chart_manager.js

@@ -9,9 +9,107 @@ class ChartManager {
         this.charts = {};
         this.annotations = {};
         this.syncedTime = null;
+        this.updateTimers = {};  // Track auto-update timers
+        this.autoUpdateEnabled = false;  // Auto-update state
 
         console.log('ChartManager initialized with timeframes:', timeframes);
     }
+    
+    /**
+     * Start auto-updating charts
+     */
+    startAutoUpdate() {
+        if (this.autoUpdateEnabled) {
+            console.log('Auto-update already enabled');
+            return;
+        }
+        
+        this.autoUpdateEnabled = true;
+        console.log('Starting chart auto-update...');
+        
+        // Update 1s chart every 20 seconds
+        if (this.timeframes.includes('1s')) {
+            this.updateTimers['1s'] = setInterval(() => {
+                this.updateChart('1s');
+            }, 20000);  // 20 seconds
+        }
+        
+        // Update 1m chart - sync to whole minutes + every 20s
+        if (this.timeframes.includes('1m')) {
+            // Calculate ms until next whole minute
+            const now = new Date();
+            const msUntilNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
+            
+            // Update on next whole minute
+            setTimeout(() => {
+                this.updateChart('1m');
+                
+                // Then update every 20s
+                this.updateTimers['1m'] = setInterval(() => {
+                    this.updateChart('1m');
+                }, 20000);  // 20 seconds
+            }, msUntilNextMinute);
+        }
+        
+        console.log('Auto-update enabled for:', Object.keys(this.updateTimers));
+    }
+    
+    /**
+     * Stop auto-updating charts
+     */
+    stopAutoUpdate() {
+        if (!this.autoUpdateEnabled) {
+            return;
+        }
+        
+        this.autoUpdateEnabled = false;
+        
+        // Clear all timers
+        Object.values(this.updateTimers).forEach(timer => clearInterval(timer));
+        this.updateTimers = {};
+        
+        console.log('Auto-update stopped');
+    }
+    
+    /**
+     * Update a single chart with fresh data
+     */
+    async updateChart(timeframe) {
+        try {
+            const response = await fetch(`/api/chart-data?timeframe=${timeframe}&limit=1000`);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success && data.data && data.data[timeframe]) {
+                const chartData = data.data[timeframe];
+                const plotId = `plot-${timeframe}`;
+                
+                // Update chart using Plotly.react (efficient update)
+                const candlestickUpdate = {
+                    x: [chartData.timestamps],
+                    open: [chartData.open],
+                    high: [chartData.high],
+                    low: [chartData.low],
+                    close: [chartData.close]
+                };
+                
+                const volumeUpdate = {
+                    x: [chartData.timestamps],
+                    y: [chartData.volume]
+                };
+                
+                Plotly.restyle(plotId, candlestickUpdate, [0]);
+                Plotly.restyle(plotId, volumeUpdate, [1]);
+                
+                console.log(`Updated ${timeframe} chart at ${new Date().toLocaleTimeString()}`);
+            }
+        } catch (error) {
+            console.error(`Error updating ${timeframe} chart:`, error);
+        }
+    }
 
     /**
      * Initialize charts for all timeframes with pivot bounds