Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,6 +1,8 @@
 import streamlit as st
 import numpy as np
 import matplotlib.pyplot as plt
+import plotly.graph_objects as go
+import plotly.express as px
 from kinematics_visualizer import Motion1D, Motion2D, KinematicsVisualizer
 
 # Configure Streamlit page
@@ -475,14 +477,15 @@ def show_2d_motion():
             st.pyplot(fig_comp)
             plt.close()
 
+# Add this import at the top
+import plotly.graph_objects as go
+import plotly.express as px
+
 def show_motion_comparison():
     st.markdown('<div class="section-header">📊 Compare Different Trajectories</div>', unsafe_allow_html=True)
     
     st.markdown("**Compare up to 3 different projectile motions side by side**")
     
-    # Clear any existing matplotlib figures to prevent cross-tab contamination
-    plt.close('all')
-    
     # Use container to isolate this section
     with st.container():
         # Use columns instead of tabs to avoid tab-related flickering
@@ -506,47 +509,76 @@ def show_motion_comparison():
             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 with proper isolation
+    # Single plot and table section
     st.markdown("---")
     
-    # Create comparison plot with hash exclusion for Motion2D objects
-    @st.cache_data(hash_funcs={Motion2D: lambda x: str(x.__dict__)})
-    def create_comparison_plot(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3):
-        # Clear any existing figures first
-        plt.close('all')
-        
-        # Recreate trajectories inside cached function
-        trajectories_cached = [
-            ("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 Plotly comparison plot
+    @st.cache_data
+    def create_plotly_comparison(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3):
+        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")
         ]
         
-        fig, ax = plt.subplots(figsize=(12, 8))
+        fig = go.Figure()
         
-        max_range = 0
-        for name, motion, color in trajectories_cached:
+        for name, motion, color in trajectories_data:
             data = motion.trajectory_data(motion.calculate_flight_time())
-            ax.plot(data['x'], data['y'], linewidth=3, label=name, color=color)
             
-            # Mark launch and landing points
-            ax.plot(motion.launch_x, motion.launch_height, 'o', markersize=8, color=color, alpha=0.7)
+            # 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=[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>'
+            ))
+            
+            # Add landing point
             if len(data['x']) > 0:
-                ax.plot(data['x'][-1], data['y'][-1], 's', markersize=8, color=color, alpha=0.7)
-                max_range = max(max_range, data['x'][-1])
-        
-        ax.set_xlabel('Horizontal Position (m)', fontsize=12)
-        ax.set_ylabel('Vertical Position (m)', fontsize=12)
-        ax.set_title('Trajectory Comparison', fontsize=16, fontweight='bold')
-        ax.grid(True, alpha=0.3)
-        ax.legend(fontsize=12)
-        ax.set_ylim(bottom=0)
-        ax.set_xlim(0, max_range * 1.1 if max_range > 0 else 10)
-        
-        return fig
+                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="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])
+        
+        return fig, trajectories_data
     
     # Create cached comparison data
-    @st.cache_data
+    @st.cache_data 
     def create_comparison_data(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3):
         trajectories_data = [
             ("Trajectory 1", Motion2D(launch_speed=speed1, launch_angle=angle1, launch_height=height1)),
@@ -569,23 +601,14 @@ def show_motion_comparison():
         
         return comparison_data
     
-    # Use containers to isolate the display elements
-    with st.container():
-        # Display cached plot
-        try:
-            fig = create_comparison_plot(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3)
-            st.pyplot(fig, clear_figure=True)
-            plt.close(fig)  # Immediately close after display
-        except Exception as e:
-            st.error(f"Error creating plot: {e}")
-        
-        # Display cached comparison table
-        st.markdown("### 📋 Trajectory Comparison Table")
-        try:
-            comparison_data = create_comparison_data(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3)
-            st.table(comparison_data)
-        except Exception as e:
-            st.error(f"Error creating table: {e}")
+    # Display Plotly chart (no flickering, no memory issues)
+    fig, _ = create_plotly_comparison(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3)
+    st.plotly_chart(fig, use_container_width=True)
+    
+    # Display comparison table
+    st.markdown("### 📋 Trajectory Comparison Table")
+    comparison_data = create_comparison_data(speed1, angle1, height1, speed2, angle2, height2, speed3, angle3, height3)
+    st.table(comparison_data)
 
 if __name__ == "__main__":
     main()