prediction display controls

ANNOTATE/web/static/js/chart_manager.js

@@ -21,6 +21,14 @@ class ChartManager {
         this.predictionHistory = [];  // Store last 20 predictions with fading
         this.maxPredictions = 20;  // Maximum number of predictions to display
         
+        // Prediction display toggles (all enabled by default)
+        this.displayToggles = {
+            ghostCandles: true,
+            trendLines: true,
+            actions: true,
+            pivots: true
+        };
+        
         // Helper to ensure all timestamps are in UTC
         this.normalizeTimestamp = (timestamp) => {
             if (!timestamp) return null;
@@ -32,6 +40,121 @@ class ChartManager {
         console.log('ChartManager initialized with timeframes:', timeframes);
     }
     
+    // Toggle methods for prediction display - NON-DESTRUCTIVE
+    // These methods only update visibility without redrawing or resetting view
+    toggleGhostCandles(enabled) {
+        this.displayToggles.ghostCandles = enabled;
+        console.log('Ghost candles display:', enabled);
+        
+        // Update visibility of ghost candle traces without redrawing
+        this.timeframes.forEach(tf => {
+            const plotElement = document.getElementById(`plot-${tf}`);
+            if (plotElement && plotElement.data) {
+                // Find ghost candle traces (they have name 'Ghost Prediction')
+                const updates = {};
+                plotElement.data.forEach((trace, idx) => {
+                    if (trace.name === 'Ghost Prediction') {
+                        if (!updates.visible) updates.visible = [];
+                        updates.visible[idx] = enabled;
+                    }
+                });
+                
+                if (Object.keys(updates).length > 0) {
+                    // Update trace visibility without resetting view
+                    const indices = Object.keys(updates.visible).map(Number);
+                    Plotly.restyle(plotElement, { visible: enabled }, indices);
+                }
+            }
+        });
+    }
+    
+    toggleTrendLines(enabled) {
+        this.displayToggles.trendLines = enabled;
+        console.log('Trend lines display:', enabled);
+        
+        // Update visibility of trend line shapes without redrawing
+        this.timeframes.forEach(tf => {
+            const plotElement = document.getElementById(`plot-${tf}`);
+            if (plotElement && plotElement.layout && plotElement.layout.shapes) {
+                // Filter shapes to show/hide trend lines (yellow dotted lines)
+                const updatedShapes = plotElement.layout.shapes.map(shape => {
+                    // Trend lines are yellow dotted lines
+                    if (shape.line && shape.line.dash === 'dot' && 
+                        shape.line.color && shape.line.color.includes('255, 255, 0')) {
+                        return { ...shape, visible: enabled };
+                    }
+                    return shape;
+                });
+                
+                // Update layout without resetting view
+                Plotly.relayout(plotElement, { shapes: updatedShapes });
+            }
+        });
+    }
+    
+    toggleActions(enabled) {
+        this.displayToggles.actions = enabled;
+        console.log('Action predictions display:', enabled);
+        
+        // Update visibility of action annotations without redrawing
+        this.timeframes.forEach(tf => {
+            const plotElement = document.getElementById(`plot-${tf}`);
+            if (plotElement && plotElement.layout && plotElement.layout.annotations) {
+                // Filter annotations to show/hide action predictions
+                const updatedAnnotations = plotElement.layout.annotations.map(ann => {
+                    // Action annotations have specific text patterns (BUY, SELL, HOLD)
+                    if (ann.text && (ann.text.includes('BUY') || ann.text.includes('SELL') || ann.text.includes('HOLD'))) {
+                        return { ...ann, visible: enabled };
+                    }
+                    return ann;
+                });
+                
+                // Update layout without resetting view
+                Plotly.relayout(plotElement, { annotations: updatedAnnotations });
+            }
+        });
+    }
+    
+    togglePivots(enabled) {
+        this.displayToggles.pivots = enabled;
+        console.log('Pivot points display:', enabled);
+        
+        // Update visibility of pivot shapes and annotations without redrawing
+        this.timeframes.forEach(tf => {
+            const plotElement = document.getElementById(`plot-${tf}`);
+            if (plotElement && plotElement.layout) {
+                const updates = {};
+                
+                // Hide/show pivot shapes (horizontal lines)
+                if (plotElement.layout.shapes) {
+                    updates.shapes = plotElement.layout.shapes.map(shape => {
+                        // Pivot lines are horizontal lines with specific colors
+                        if (shape.type === 'line' && shape.y0 === shape.y1) {
+                            return { ...shape, visible: enabled };
+                        }
+                        return shape;
+                    });
+                }
+                
+                // Hide/show pivot annotations (L1, L2, etc.)
+                if (plotElement.layout.annotations) {
+                    updates.annotations = plotElement.layout.annotations.map(ann => {
+                        // Pivot annotations have text like 'L1H', 'L2L', etc.
+                        if (ann.text && /L\d+[HL]/.test(ann.text)) {
+                            return { ...ann, visible: enabled };
+                        }
+                        return ann;
+                    });
+                }
+                
+                // Update layout without resetting view
+                if (Object.keys(updates).length > 0) {
+                    Plotly.relayout(plotElement, updates);
+                }
+            }
+        });
+    }
+    
     /**
      * Start auto-updating charts
      */
@@ -2847,7 +2970,7 @@ class ChartManager {
                 this._addTransformerPrediction(fadedPred, predictionShapes, predictionAnnotations);
                 
                 // Add trend vector visualization (shorter projection to avoid zoom issues)
-                if (pred.trend_vector) {
+                if (pred.trend_vector && this.displayToggles.trendLines) {
                     this._addTrendPrediction(pred.trend_vector, predictionShapes, predictionAnnotations);
                 }
                 
@@ -2933,8 +3056,10 @@ class ChartManager {
                     }
                     
                     // 4. Add all ghost candles from history to traces (with accuracy if validated)
-                    for (const ghost of this.ghostCandleHistory[timeframe]) {
-                        this._addGhostCandlePrediction(ghost.candle, timeframe, predictionTraces, ghost.targetTime, ghost.accuracy);
+                    if (this.displayToggles.ghostCandles) {
+                        for (const ghost of this.ghostCandleHistory[timeframe]) {
+                            this._addGhostCandlePrediction(ghost.candle, timeframe, predictionTraces, ghost.targetTime, ghost.accuracy);
+                        }
                     }
                     
                     // 5. Store as "Last Prediction" for shadow rendering