Fix: Improve anomaly visualization graph - Handle numpy arrays properly - Use index-based x-axis for clarity - Add proper y-axis ranges and labels - Enhance hover tooltips

app.py

@@ -76,56 +76,86 @@ def run_diagnostic(vehicle_id, n_readings):
 def create_anomaly_visualization(anomaly_result):
     """Create visualization of anomaly detection results"""
     try:
+        import numpy as np
+        
         timestamps = anomaly_result.get('timestamps', [])
         predictions = anomaly_result.get('anomaly_predictions', [])
         scores = anomaly_result.get('anomaly_scores', [])
         
-        if len(timestamps) == 0:
+        # Convert numpy arrays to lists if needed
+        if isinstance(timestamps, np.ndarray):
+            timestamps = timestamps.tolist()
+        if isinstance(predictions, np.ndarray):
+            predictions = predictions.tolist()
+        if isinstance(scores, np.ndarray):
+            scores = scores.tolist()
+        
+        if len(timestamps) == 0 or len(predictions) == 0:
             return None
         
+        # Create index-based x-axis for better visualization
+        x_values = list(range(len(predictions)))
+        
         # Create figure with secondary y-axis
         fig = go.Figure()
         
-        # Add anomaly predictions
+        # Add anomaly predictions as filled area
         fig.add_trace(go.Scatter(
-            x=timestamps,
+            x=x_values,
             y=predictions,
             mode='lines',
             name='Anomaly Detected',
             line=dict(color='red', width=2),
             fill='tozeroy',
-            fillcolor='rgba(255, 0, 0, 0.2)'
+            fillcolor='rgba(255, 0, 0, 0.3)',
+            hovertemplate='Reading: %{x}<br>Anomaly: %{y}<extra></extra>'
         ))
         
         # Add anomaly scores
         fig.add_trace(go.Scatter(
-            x=timestamps,
+            x=x_values,
             y=scores,
             mode='lines',
             name='Anomaly Score',
-            line=dict(color='orange', width=1, dash='dot'),
-            yaxis='y2'
+            line=dict(color='orange', width=2, dash='dot'),
+            yaxis='y2',
+            hovertemplate='Reading: %{x}<br>Score: %{y:.3f}<extra></extra>'
         ))
         
         # Update layout
         fig.update_layout(
             title='Anomaly Detection Over Time',
-            xaxis_title='Timestamp',
+            xaxis_title='Reading Index',
             yaxis_title='Anomaly Detected (0/1)',
+            yaxis=dict(
+                range=[-0.1, 1.1],
+                tickvals=[0, 1],
+                ticktext=['Normal', 'Anomaly']
+            ),
             yaxis2=dict(
                 title='Anomaly Score',
                 overlaying='y',
-                side='right'
+                side='right',
+                range=[0, 1]
             ),
             hovermode='x unified',
             template='plotly_white',
-            height=400
+            height=450,
+            showlegend=True,
+            legend=dict(
+                yanchor="top",
+                y=0.99,
+                xanchor="left",
+                x=0.01
+            )
         )
         
         return fig
         
     except Exception as e:
         print(f"Visualization error: {e}")
+        import traceback
+        traceback.print_exc()
         return None