Update ui/components.py

ui/components.py

@@ -1,5 +1,6 @@
 """
 UI components for the 5-tab demo - COMPLETE FIXED VERSION
+ALL TABS WORKING - Tab 1 now updates dynamically
 """
 
 import gradio as gr
@@ -69,7 +70,7 @@ def create_status_bar() -> gr.HTML:
 
 
 def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Miss Storm") -> Tuple:
-    """Create Tab 1: Live Incident Demo - FIXED WORKING VERSION"""
+    """Create Tab 1: Live Incident Demo - COMPLETE FIXED VERSION WITH DYNAMIC UPDATES"""
     with gr.Row():
         # Left Panel
         with gr.Column(scale=1):
@@ -82,6 +83,7 @@ def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Mi
                 interactive=True
             )
             
+            # Initialize with default scenario data
             scenario_description = gr.Markdown(
                 value=scenarios[default_scenario]["description"]
             )
@@ -147,6 +149,160 @@ def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Mi
                     gr.Markdown("### 🎯 Enterprise Results")
                     enterprise_results_display = gr.JSON(label="", value={})
     
+    # Define function to update scenario details when dropdown changes
+    def update_scenario_details(scenario_name):
+        """Update all scenario details when dropdown changes"""
+        # Get the selected scenario, fallback to default if not found
+        scenario = scenarios.get(scenario_name, scenarios[default_scenario])
+        
+        # Update the timeline visualization based on scenario
+        timeline_fig = create_scenario_timeline(scenario_name)
+        
+        return (
+            scenario.get("description", "No description available"),
+            scenario.get("metrics", {}),
+            scenario.get("business_impact", {}),
+            timeline_fig
+        )
+    
+    # Helper function to create timeline visualization
+    def create_scenario_timeline(scenario_name):
+        """Create a timeline visualization for the selected scenario"""
+        fig = go.Figure()
+        
+        # Different timeline events for different scenarios
+        scenario_timelines = {
+            "Cache Miss Storm": [
+                {"time": "T-5m", "event": "📉 Cache hit rate drops below 20%", "type": "problem"},
+                {"time": "T-4m", "event": "⚠️ Database load exceeds 90%", "type": "alert"},
+                {"time": "T-3m", "event": "🤖 ARF detects cache pattern", "type": "detection"},
+                {"time": "T-2m", "event": "🧠 Cache analysis complete", "type": "analysis"},
+                {"time": "T-1m", "event": "⚡ Redis cluster scaled", "type": "action"},
+                {"time": "T-0m", "event": "✅ Cache performance restored", "type": "recovery"}
+            ],
+            "Database Connection Pool Exhaustion": [
+                {"time": "T-5m", "event": "📉 Connection pool reaches 95%", "type": "problem"},
+                {"time": "T-4m", "event": "⚠️ API latency spikes to 2s+", "type": "alert"},
+                {"time": "T-3m", "event": "🤖 ARF detects connection pattern", "type": "detection"},
+                {"time": "T-2m", "event": "🧠 Pool analysis complete", "type": "analysis"},
+                {"time": "T-1m", "event": "⚡ Connection pool increased", "type": "action"},
+                {"time": "T-0m", "event": "✅ Database connections stable", "type": "recovery"}
+            ],
+            "Kubernetes Memory Leak": [
+                {"time": "T-5m", "event": "📉 Memory usage hits 95%", "type": "problem"},
+                {"time": "T-4m", "event": "⚠️ Pod restarts every 5 minutes", "type": "alert"},
+                {"time": "T-3m", "event": "🤖 ARF detects memory pattern", "type": "detection"},
+                {"time": "T-2m", "event": "🧠 Heap analysis complete", "type": "analysis"},
+                {"time": "T-1m", "event": "⚡ Memory limits adjusted", "type": "action"},
+                {"time": "T-0m", "event": "✅ JVM memory stabilized", "type": "recovery"}
+            ],
+            "API Rate Limit Storm": [
+                {"time": "T-5m", "event": "📉 429 errors exceed 40%", "type": "problem"},
+                {"time": "T-4m", "event": "⚠️ Partner API calls failing", "type": "alert"},
+                {"time": "T-3m", "event": "🤖 ARF detects rate limit pattern", "type": "detection"},
+                {"time": "T-2m", "event": "🧠 Backoff strategy analyzed", "type": "analysis"},
+                {"time": "T-1m", "event": "⚡ Circuit breaker implemented", "type": "action"},
+                {"time": "T-0m", "event": "✅ API calls normalized", "type": "recovery"}
+            ],
+            "Network Partition": [
+                {"time": "T-5m", "event": "📉 Network partition detected", "type": "problem"},
+                {"time": "T-4m", "event": "⚠️ Database split-brain risk", "type": "alert"},
+                {"time": "T-3m", "event": "🤖 ARF detects partition pattern", "type": "detection"},
+                {"time": "T-2m", "event": "🧠 Consensus analysis complete", "type": "analysis"},
+                {"time": "T-1m", "event": "⚡ Quorum restored", "type": "action"},
+                {"time": "T-0m", "event": "✅ Cluster consistency restored", "type": "recovery"}
+            ],
+            "Storage I/O Saturation": [
+                {"time": "T-5m", "event": "📉 I/O utilization hits 98%", "type": "problem"},
+                {"time": "T-4m", "event": "⚠️ Application timeouts increasing", "type": "alert"},
+                {"time": "T-3m", "event": "🤖 ARF detects storage pattern", "type": "detection"},
+                {"time": "T-2m", "event": "🧠 I/O analysis complete", "type": "analysis"},
+                {"time": "T-1m", "event": "⚡ Storage optimized", "type": "action"},
+                {"time": "T-0m", "event": "✅ I/O performance restored", "type": "recovery"}
+            ]
+        }
+        
+        # Get timeline for this scenario, default to Cache Miss Storm
+        events = scenario_timelines.get(scenario_name, scenario_timelines["Cache Miss Storm"])
+        
+        # Color mapping
+        color_map = {
+            "problem": "#FF6B6B",
+            "alert": "#FFE66D",
+            "detection": "#45B7D1",
+            "analysis": "#9B59B6",
+            "action": "#4ECDC4",
+            "recovery": "#2ECC71"
+        }
+        
+        # Add events
+        for event in events:
+            fig.add_trace(go.Scatter(
+                x=[event["time"]],
+                y=[1],
+                mode='markers+text',
+                marker=dict(
+                    size=20,
+                    color=color_map[event["type"]],
+                    symbol='circle',
+                    line=dict(width=2, color='white')
+                ),
+                text=[event["event"]],
+                textposition="top center",
+                hoverinfo='text',
+                name=event["type"].capitalize(),
+                hovertemplate="<b>%{text}</b><br>Click for details<extra></extra>"
+            ))
+        
+        # Add connecting line
+        fig.add_trace(go.Scatter(
+            x=[e["time"] for e in events],
+            y=[1] * len(events),
+            mode='lines',
+            line=dict(color='gray', width=2, dash='dash'),
+            hoverinfo='none',
+            showlegend=False
+        ))
+        
+        fig.update_layout(
+            title=f"<b>Incident Timeline: {scenario_name}</b>",
+            height=450,
+            paper_bgcolor="rgba(0,0,0,0)",
+            plot_bgcolor="rgba(0,0,0,0)",
+            hovermode='closest',
+            clickmode='event+select',
+            yaxis=dict(
+                showticklabels=False,
+                range=[0.5, 1.5],
+                gridcolor="rgba(200,200,200,0.1)"
+            ),
+            xaxis=dict(
+                gridcolor="rgba(200,200,200,0.1)"
+            ),
+            showlegend=True,
+            legend=dict(
+                yanchor="top",
+                y=0.99,
+                xanchor="left",
+                x=0.01
+            )
+        )
+        
+        return fig
+    
+    # Create initial timeline
+    initial_timeline = create_scenario_timeline(default_scenario)
+    
+    # Connect the dropdown change event to update all components
+    scenario_dropdown.change(
+        fn=update_scenario_details,
+        inputs=[scenario_dropdown],
+        outputs=[scenario_description, metrics_display, impact_display, timeline_output]
+    )
+    
+    # Initialize timeline output with the default scenario timeline
+    timeline_output.value = initial_timeline
+    
     return (scenario_dropdown, scenario_description, metrics_display, impact_display,
             timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
             approval_display, oss_results_display, enterprise_results_display)