Update src/streamlit_app.py

src/streamlit_app.py

@@ -63,31 +63,22 @@ st.markdown("""
 def main():
     st.markdown('<div class="main-header">🚀 Physics Tutorial: Kinematics</div>', unsafe_allow_html=True)
     
-    # Sidebar for navigation
+    # Use selectbox instead of radio (forces full page refresh)
     st.sidebar.title("📚 Select Tutorial")
-    tutorial_type = st.sidebar.radio(
+    tutorial_type = st.sidebar.selectbox(
         "Choose a physics concept:",
         ["1D Motion", "2D Projectile Motion", "Compare Motions"]
     )
     
-    # Clear session state and cache when switching tabs
-    if 'current_tutorial' not in st.session_state:
-        st.session_state.current_tutorial = tutorial_type
-    elif st.session_state.current_tutorial != tutorial_type:
-        # Clear ALL cached data when switching tabs
-        st.cache_data.clear()
-        st.session_state.current_tutorial = tutorial_type
-        # Also clear any session state variables that might persist
-        keys_to_clear = [k for k in st.session_state.keys() if k.startswith(('comp_', '1d_', '2d_'))]
-        for key in keys_to_clear:
-            del st.session_state[key]
-        st.rerun()
-    
+    # Force complete refresh when changing tutorials
     if tutorial_type == "1D Motion":
+        st.cache_data.clear()  # Clear all caches
         show_1d_motion()
     elif tutorial_type == "2D Projectile Motion":
+        st.cache_data.clear()  # Clear all caches
         show_2d_motion()
     elif tutorial_type == "Compare Motions":
+        st.cache_data.clear()  # Clear all caches
         show_motion_comparison()
 
 def create_1d_motion_plot(motion: Motion1D, duration: float, title: str):
@@ -686,106 +677,134 @@ def show_motion_comparison():
     
     st.markdown("**Compare up to 3 different projectile motions side by side**")
     
-    # Use columns for parameters
-    col1, col2, col3 = st.columns(3)
-    
-    with col1:
-        st.subheader("🚀 Trajectory 1")
-        speed1 = st.slider("Speed 1", 5.0, 50.0, 20.0, key="comp_speed1")
-        angle1 = st.slider("Angle 1", 0.0, 90.0, 30.0, key="comp_angle1") 
-        height1 = st.slider("Height 1", 0.0, 30.0, 0.0, key="comp_height1")
-    
-    with col2:
-        st.subheader("🎯 Trajectory 2")
-        speed2 = st.slider("Speed 2", 5.0, 50.0, 25.0, key="comp_speed2")
-        angle2 = st.slider("Angle 2", 0.0, 90.0, 45.0, key="comp_angle2")
-        height2 = st.slider("Height 2", 0.0, 30.0, 0.0, key="comp_height2")
-    
-    with col3:
-        st.subheader("⚽ Trajectory 3")
-        speed3 = st.slider("Speed 3", 5.0, 50.0, 30.0, key="comp_speed3")
-        angle3 = st.slider("Angle 3", 0.0, 90.0, 60.0, key="comp_height3")
-        height3 = st.slider("Height 3", 0.0, 30.0, 5.0, key="comp_height3")
+    # Use container with unique identification for comparison section
+    with st.container(key="comparison_container"):
+        # Use columns instead of tabs to avoid tab-related flickering
+        col1, col2, col3 = st.columns(3)
+        
+        with col1:
+            st.subheader("🚀 Trajectory 1")
+            speed1 = st.slider("Speed 1", 5.0, 50.0, 20.0, key="comp_speed1")
+            angle1 = st.slider("Angle 1", 0.0, 90.0, 30.0, key="comp_angle1") 
+            height1 = st.slider("Height 1", 0.0, 30.0, 0.0, key="comp_height1")
+        
+        with col2:
+            st.subheader("🎯 Trajectory 2")
+            speed2 = st.slider("Speed 2", 5.0, 50.0, 25.0, key="comp_speed2")
+            angle2 = st.slider("Angle 2", 0.0, 90.0, 45.0, key="comp_angle2")
+            height2 = st.slider("Height 2", 0.0, 30.0, 0.0, key="comp_height2")
+        
+        with col3:
+            st.subheader("⚽ Trajectory 3")
+            speed3 = st.slider("Speed 3", 5.0, 50.0, 30.0, key="comp_speed3")
+            angle3 = st.slider("Angle 3", 0.0, 90.0, 60.0, key="comp_angle3")
+            height3 = st.slider("Height 3", 0.0, 30.0, 5.0, key="comp_height3")
     
+    # Single plot and table section
     st.markdown("---")
     
-    # NO CACHING - Direct plot creation every time
-    trajectories_data = [
-        ("Trajectory 1", Motion2D(launch_speed=speed1, launch_angle=angle1, launch_height=height1), "blue"),
-        ("Trajectory 2", Motion2D(launch_speed=speed2, launch_angle=angle2, launch_height=height2), "red"),
-        ("Trajectory 3", Motion2D(launch_speed=speed3, launch_angle=angle3, launch_height=height3), "green")
-    ]
-    
-    # Create fresh plot every time
-    fig = go.Figure()
-    
-    for name, motion, color in trajectories_data:
-        data = motion.trajectory_data(motion.calculate_flight_time())
-        
-        # Add trajectory line
-        fig.add_trace(go.Scatter(
-            x=data['x'], 
-            y=data['y'],
-            mode='lines',
-            name=name,
-            line=dict(color=color, width=3),
-            hovertemplate=f'<b>{name}</b><br>X: %{{x:.1f}} m<br>Y: %{{y:.1f}} m<extra></extra>'
-        ))
+    # Create UNIQUE comparison plot function that can't conflict with 2D motion
+    @st.cache_data(show_spinner=False)
+    def create_trajectory_comparison_plot_unique(tab_id, speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3):
+        """UNIQUE comparison plot function - completely separate from 2D motion"""
+        trajectories_data = [
+            ("Trajectory 1", Motion2D(launch_speed=speed1, launch_angle=angle1, launch_height=height1), "blue"),
+            ("Trajectory 2", Motion2D(launch_speed=speed2, launch_angle=angle2, launch_height=height2), "red"),
+            ("Trajectory 3", Motion2D(launch_speed=speed3, launch_angle=angle3, launch_height=height3), "green")
+        ]
         
-        # Add launch point
-        fig.add_trace(go.Scatter(
-            x=[motion.launch_x],
-            y=[motion.launch_height],
-            mode='markers',
-            name=f'{name} Launch',
-            marker=dict(color=color, size=10, symbol='circle'),
-            showlegend=False,
-            hovertemplate=f'<b>{name} Launch</b><br>X: %{{x:.1f}} m<br>Y: %{{y:.1f}} m<extra></extra>'
-        ))
+        fig = go.Figure()
         
-        # Add landing point
-        if len(data['x']) > 0:
+        for name, motion, color in trajectories_data:
+            data = motion.trajectory_data(motion.calculate_flight_time())
+            
+            # Add trajectory line
+            fig.add_trace(go.Scatter(
+                x=data['x'], 
+                y=data['y'],
+                mode='lines',
+                name=name,
+                line=dict(color=color, width=3),
+                hovertemplate=f'<b>{name}</b><br>X: %{{x:.1f}} m<br>Y: %{{y:.1f}} m<extra></extra>'
+            ))
+            
+            # Add launch point
             fig.add_trace(go.Scatter(
-                x=[data['x'][-1]],
-                y=[data['y'][-1]],
+                x=[motion.launch_x],
+                y=[motion.launch_height],
                 mode='markers',
-                name=f'{name} Landing',
-                marker=dict(color=color, size=10, symbol='square'),
+                name=f'{name} Launch',
+                marker=dict(color=color, size=10, symbol='circle'),
                 showlegend=False,
-                hovertemplate=f'<b>{name} Landing</b><br>X: %{{x:.1f}} m<br>Y: %{{y:.1f}} m<extra></extra>'
+                hovertemplate=f'<b>{name} Launch</b><br>X: %{{x:.1f}} m<br>Y: %{{y:.1f}} m<extra></extra>'
             ))
+            
+            # Add landing point
+            if len(data['x']) > 0:
+                fig.add_trace(go.Scatter(
+                    x=[data['x'][-1]],
+                    y=[data['y'][-1]],
+                    mode='markers',
+                    name=f'{name} Landing',
+                    marker=dict(color=color, size=10, symbol='square'),
+                    showlegend=False,
+                    hovertemplate=f'<b>{name} Landing</b><br>X: %{{x:.1f}} m<br>Y: %{{y:.1f}} m<extra></extra>'
+                ))
+        
+        # Update layout
+        fig.update_layout(
+            title=dict(text="Multi-Trajectory Comparison", font=dict(size=18, color="black")),
+            xaxis_title="Horizontal Position (m)",
+            yaxis_title="Vertical Position (m)",
+            showlegend=True,
+            hovermode='closest',
+            template='plotly_white',
+            height=600,
+            margin=dict(l=50, r=50, t=80, b=50)
+        )
+        
+        # Set axis ranges
+        fig.update_xaxes(range=[0, None])
+        fig.update_yaxes(range=[0, None])
+        
+        # Add grid
+        fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+        fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+        
+        return fig
+    
+    # Create cached comparison data with unique function name
+    @st.cache_data(show_spinner=False)
+    def create_trajectory_comparison_data_unique(tab_id, speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3):
+        """UNIQUE comparison data function"""
+        trajectories_data = [
+            ("Trajectory 1", Motion2D(launch_speed=speed1, launch_angle=angle1, launch_height=height1)),
+            ("Trajectory 2", Motion2D(launch_speed=speed2, launch_angle=angle2, launch_height=height2)),
+            ("Trajectory 3", Motion2D(launch_speed=speed3, launch_angle=angle3, launch_height=height3))
+        ]
+        
+        comparison_data = []
+        for name, motion in trajectories_data:
+            info = motion.get_launch_info()
+            comparison_data.append({
+                "Trajectory": name,
+                "Speed (m/s)": f"{info['launch_speed']:.1f}",
+                "Angle (°)": f"{info['launch_angle']:.1f}",
+                "Height (m)": f"{info['launch_height']:.1f}",
+                "Flight Time (s)": f"{info['flight_time']:.2f}",
+                "Range (m)": f"{info['range']:.1f}",
+                "Max Height (m)": f"{info['max_height']:.1f}"
+            })
+        
+        return comparison_data
     
-    # Update layout
-    fig.update_layout(
-        title=dict(text="Trajectory Comparison", font=dict(size=18)),
-        xaxis_title="Horizontal Position (m)",
-        yaxis_title="Vertical Position (m)",
-        showlegend=True,
-        template='plotly_white',
-        height=600
-    )
-    
-    fig.update_xaxes(range=[0, None], showgrid=True, gridcolor='rgba(128,128,128,0.3)')
-    fig.update_yaxes(range=[0, None], showgrid=True, gridcolor='rgba(128,128,128,0.3)')
-    
-    # Display with unique key
-    st.plotly_chart(fig, use_container_width=True, key="simple_comparison_plot")
+    # Display Plotly chart with completely unique identifiers
+    fig = create_trajectory_comparison_plot_unique("comparison_tab", speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3)
+    st.plotly_chart(fig, use_container_width=True, key="trajectory_comparison_plot_unique")
     
-    # Create comparison table (no caching)
+    # Display comparison table
     st.markdown("### 📋 Trajectory Comparison Table")
-    comparison_data = []
-    for name, motion in [(name, motion) for name, motion, _ in trajectories_data]:
-        info = motion.get_launch_info()
-        comparison_data.append({
-            "Trajectory": name,
-            "Speed (m/s)": f"{info['launch_speed']:.1f}",
-            "Angle (°)": f"{info['launch_angle']:.1f}",
-            "Height (m)": f"{info['launch_height']:.1f}",
-            "Flight Time (s)": f"{info['flight_time']:.2f}",
-            "Range (m)": f"{info['range']:.1f}",
-            "Max Height (m)": f"{info['max_height']:.1f}"
-        })
-    
+    comparison_data = create_trajectory_comparison_data_unique("comparison_tab", speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3)
     st.table(comparison_data)
 
 if __name__ == "__main__":