Update app.py

app.py

@@ -1,22 +1,21 @@
 #!/usr/bin/env python3
 """
-Fixed Plotly + Pyodide Integration - No Syntax Errors
+Plotly + Pyodide - Fixed Data Display Issue
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Create a working Pyodide + Plotly interface with proper string escaping"""
+    """Create interface with fixed Plotly data handling"""
     
-    # Use proper string escaping to avoid syntax errors
     pyodide_html = '''
     <div id="pyodide-container" style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 10px 0;">
         <div id="status" style="font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 3px;">
-            🔄 Initializing Pyodide + Plotly...
+            🔄 Loading Pyodide + Plotly...
         </div>
         <div id="output" style="display:none; margin-top: 10px;">
             <h4>Results:</h4>
-            <pre id="text-output" style="background: #f8f8f8; padding: 10px; border-radius: 3px; max-height: 200px; overflow-y: auto;"></pre>
+            <pre id="text-output" style="background: #f8f8f8; padding: 10px; border-radius: 3px; max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
             <div id="plots" style="margin-top: 15px;"></div>
         </div>
     </div>
@@ -38,49 +37,68 @@ def create_pyodide_interface():
             console.log('Status:', msg);
         }
         
-        // Function to render Plotly from Python
-        window.renderPlot = function(plotData, plotLayout) {
+        // Enhanced plot renderer with data debugging
+        window.renderPlotWithDebug = function(figureJson) {
             try {
+                console.log('Received figure JSON:', figureJson.substring(0, 200) + '...');
+                
                 plotId++;
                 const containerId = 'plot-' + plotId;
                 const plotsDiv = document.getElementById('plots');
                 
-                if (!plotsDiv) return false;
+                if (!plotsDiv) {
+                    console.error('Plots container not found');
+                    return false;
+                }
+                
+                // Parse the figure
+                const figDict = JSON.parse(figureJson);
+                console.log('Parsed figure keys:', Object.keys(figDict));
+                console.log('Data array length:', figDict.data ? figDict.data.length : 'No data');
+                
+                if (figDict.data && figDict.data.length > 0) {
+                    console.log('First trace:', figDict.data[0]);
+                    console.log('First trace x:', figDict.data[0].x);
+                    console.log('First trace y:', figDict.data[0].y);
+                }
                 
                 // Create plot container
-                const plotDiv = document.createElement('div');
-                plotDiv.innerHTML = `
-                    <h5>📈 Plot ${plotId}</h5>
-                    <div id="${containerId}" style="width: 100%; height: 500px; border: 1px solid #ccc; margin: 10px 0;"></div>
+                const plotWrapper = document.createElement('div');
+                plotWrapper.innerHTML = `
+                    <div style="margin: 15px 0;">
+                        <h5 style="margin: 10px 0;">📈 Plot ${plotId}</h5>
+                        <div id="${containerId}" style="width: 100%; height: 500px; border: 1px solid #ccc; border-radius: 5px;"></div>
+                    </div>
                 `;
-                plotsDiv.appendChild(plotDiv);
+                plotsDiv.appendChild(plotWrapper);
                 
-                // Parse JSON if needed
-                if (typeof plotData === 'string') plotData = JSON.parse(plotData);
-                if (typeof plotLayout === 'string') plotLayout = JSON.parse(plotLayout);
+                // Enhanced layout with better defaults
+                const layout = figDict.layout || {};
+                layout.margin = layout.margin || {l: 50, r: 50, t: 50, b: 50};
+                layout.autosize = true;
                 
-                // Render with Plotly
-                Plotly.newPlot(containerId, plotData, plotLayout, {responsive: true});
+                // Create plot with config
+                const config = {
+                    responsive: true,
+                    displayModeBar: true,
+                    displaylogo: false
+                };
                 
-                console.log('Plot rendered:', containerId);
+                Plotly.newPlot(containerId, figDict.data, layout, config);
+                
+                console.log('Plot created successfully with ID:', containerId);
                 return true;
                 
             } catch (error) {
-                console.error('Plot render error:', error);
+                console.error('Plot rendering error:', error);
+                console.error('Error details:', error.message);
                 return false;
             }
         };
         
         async function initPyodide() {
             try {
-                if (typeof loadPyodide === 'undefined') {
-                    throw new Error('Pyodide CDN failed to load');
-                }
-                if (typeof Plotly === 'undefined') {
-                    throw new Error('Plotly CDN failed to load');
-                }
-                
-                updateStatus('🔄 Loading Pyodide core...', 'blue');
+                updateStatus('🔄 Loading Pyodide...', 'blue');
                 pyodide = await loadPyodide();
                 
                 updateStatus('📦 Installing packages...', 'blue');
@@ -92,128 +110,145 @@ def create_pyodide_interface():
                     await micropip.install('plotly')
                 `);
                 
-                updateStatus('🔧 Setting up Plotly integration...', 'blue');
+                updateStatus('🔧 Setting up integration...', 'blue');
                 
-                // Setup Python environment with PROPER string escaping
+                // Python setup with enhanced debugging
                 pyodide.runPython(`
 import json
-from js import renderPlot
-
-# Global plot counter
-plot_count = 0
+from js import renderPlotWithDebug
 
-def show_plot(fig):
-    global plot_count
+def show_plot_debug(fig):
     try:
-        # Convert figure to dict
+        print("=== PLOT DEBUG INFO ===")
+        
+        # Convert to dict and inspect
         fig_dict = fig.to_dict()
+        print(f"Figure has {len(fig_dict.get('data', []))} traces")
+        
+        # Debug each trace
+        for i, trace in enumerate(fig_dict.get('data', [])):
+            print(f"Trace {i}: type={trace.get('type', 'unknown')}")
+            print(f"  x data: {trace.get('x', 'missing')}")
+            print(f"  y data: {trace.get('y', 'missing')}")
+            print(f"  mode: {trace.get('mode', 'default')}")
         
-        # Extract data and layout
-        data = fig_dict.get('data', [])
-        layout = fig_dict.get('layout', {})
+        # Convert to JSON for JavaScript
+        fig_json = json.dumps(fig_dict)
+        print(f"JSON length: {len(fig_json)} characters")
         
-        # Call JavaScript render function
-        success = renderPlot(json.dumps(data), json.dumps(layout))
+        # Send to JavaScript
+        success = renderPlotWithDebug(fig_json)
         
         if success:
-            plot_count += 1
-            print(f"Plot {plot_count} displayed successfully!")
-            return True
+            print("✅ Plot rendered successfully!")
         else:
-            print("Plot rendering failed")
-            return False
-            
+            print("❌ Plot rendering failed")
+        
+        print("=== END DEBUG INFO ===")
+        return success
+        
     except Exception as e:
-        print(f"Plot error: {e}")
+        print(f"❌ Plot error: {e}")
+        import traceback
+        traceback.print_exc()
         return False
 
-# Patch Plotly
+# Setup Plotly with debugging
 try:
     import plotly.graph_objects as go
     import plotly.express as px
+    import numpy as np
     
-    # Replace show method
+    # Test data creation
+    print("Testing data creation...")
+    test_x = [1, 2, 3, 4, 5]
+    test_y = [1, 4, 9, 16, 25]
+    print(f"Test data - x: {test_x}, y: {test_y}")
+    
+    # Patch show method
     original_show = go.Figure.show
-    go.Figure.show = lambda self, *args, **kwargs: show_plot(self)
+    go.Figure.show = lambda self, *args, **kwargs: show_plot_debug(self)
     
-    print("Plotly patched successfully!")
+    print("✅ Plotly setup complete with debugging!")
     
-except ImportError as e:
-    print(f"Plotly import failed: {e}")
+except Exception as e:
+    print(f"❌ Plotly setup failed: {e}")
+    import traceback
+    traceback.print_exc()
 
-print("Environment setup complete!")
+print("🎉 Environment ready for testing!")
                 `);
                 
                 ready = true;
-                updateStatus('✅ Plotly + Pyodide ready!', 'green');
+                updateStatus('✅ Ready with debug mode!', 'green');
                 
                 document.getElementById('output').style.display = 'block';
-                document.getElementById('text-output').textContent = 'Ready! Try executing some Plotly code.';
+                document.getElementById('text-output').textContent = 'System ready! The debug info will help identify data issues.';
                 
             } catch (error) {
-                console.error('Initialization failed:', error);
+                console.error('Init error:', error);
                 updateStatus('❌ Failed: ' + error.message, 'red');
             }
         }
         
         async function executeUserCode(code) {
             if (!ready) {
-                return 'System not ready. Please wait for green status.';
+                return 'Not ready. Wait for green status.';
             }
             
             try {
-                updateStatus('▶️ Running...', 'blue');
+                updateStatus('▶️ Executing with debug...', 'blue');
+                
+                // Clear previous plots
+                document.getElementById('plots').innerHTML = '';
                 
-                // Capture stdout
+                // Capture output
                 pyodide.runPython(`
 import sys
 from io import StringIO
 old_stdout = sys.stdout
-sys.stdout = output_capture = StringIO()
+sys.stdout = capture = StringIO()
                 `);
                 
-                // Execute user code
+                // Execute code
                 let result = pyodide.runPython(code);
                 
-                // Get captured output
-                let stdout = pyodide.runPython(`
+                // Get output
+                let output = pyodide.runPython(`
 sys.stdout = old_stdout
-output_capture.getvalue()
+capture.getvalue()
                 `);
                 
-                // Display output
-                document.getElementById('text-output').textContent = stdout || 'Code executed successfully';
+                // Display
+                document.getElementById('text-output').textContent = output || 'Executed successfully';
                 updateStatus('✅ Complete!', 'green');
                 
-                return stdout || 'Success';
+                return output || 'Success';
                 
             } catch (error) {
                 const errorMsg = 'Error: ' + error.toString();
                 document.getElementById('text-output').textContent = errorMsg;
-                updateStatus('❌ Error occurred', 'red');
+                updateStatus('❌ Error', 'red');
                 return errorMsg;
             }
         }
         
-        // Initialize when both CDNs are loaded
-        function checkAndInit() {
+        // Wait for CDNs and init
+        function waitForCDNs() {
             if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
-                console.log('Both CDNs loaded, starting initialization');
+                console.log('CDNs loaded, initializing...');
                 initPyodide();
             } else {
-                console.log('Waiting for CDNs...');
-                setTimeout(checkAndInit, 1000);
+                setTimeout(waitForCDNs, 1000);
             }
         }
         
-        // Start when DOM is ready
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', checkAndInit);
+            document.addEventListener('DOMContentLoaded', waitForCDNs);
         } else {
-            checkAndInit();
+            waitForCDNs();
         }
         
-        // Make functions globally available
         window.executeUserCode = executeUserCode;
         window.checkReady = () => ready;
         
@@ -222,116 +257,122 @@ output_capture.getvalue()
     
     return pyodide_html
 
-# Create Gradio app
-with gr.Blocks(title="Fixed Plotly Pyodide") as demo:
-    gr.Markdown("# 🐍📈 Fixed Plotly + Pyodide")
-    gr.Markdown("**No more syntax errors!** Interactive Plotly charts in browser.")
+# Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("# 🔍 Plotly Debug Version")
+    gr.Markdown("**Diagnose why data points aren't showing**")
     
-    # Pyodide interface
     pyodide_interface = gr.HTML(create_pyodide_interface())
     
     with gr.Row():
-        with gr.Column(scale=2):
+        with gr.Column():
             code_input = gr.Textbox(
-                value="""# Working Plotly Example
+                value="""# Debug Test - Simple Data
 import plotly.graph_objects as go
 import numpy as np
 
-print("Creating Plotly chart...")
+print("Creating simple test plot...")
+
+# Explicit simple data
+x_data = [1, 2, 3, 4, 5]
+y_data = [2, 4, 6, 8, 10]
 
-# Simple data
-x = np.array([1, 2, 3, 4, 5])
-y = x ** 2
+print(f"X data: {x_data}")
+print(f"Y data: {y_data}")
 
-# Create figure
+# Create figure step by step
 fig = go.Figure()
+
+# Add trace with explicit parameters
 fig.add_trace(go.Scatter(
-    x=x, 
-    y=y, 
-    mode='lines+markers',
-    name='x²',
-    line=dict(color='blue', width=3),
-    marker=dict(size=8, color='red')
+    x=x_data,
+    y=y_data,
+    mode='markers+lines',
+    name='Test Data',
+    marker=dict(
+        size=12,
+        color='red',
+        symbol='circle'
+    ),
+    line=dict(
+        color='blue',
+        width=3
+    )
 ))
 
+# Explicit layout
 fig.update_layout(
-    title='Interactive Quadratic Function',
-    xaxis_title='X values',
-    yaxis_title='Y values',
-    template='plotly_white'
+    title='Debug Test Plot',
+    xaxis=dict(title='X Values', range=[0, 6]),
+    yaxis=dict(title='Y Values', range=[0, 12]),
+    width=700,
+    height=500,
+    showlegend=True
 )
 
-fig.show()
-print("Chart should appear above! ✅")""",
-                lines=18,
-                label="Python Code"
+print("Calling fig.show()...")
+fig.show()""",
+                lines=20,
+                label="Debug Test Code"
             )
             
-            execute_btn = gr.Button("🚀 Execute Code", variant="primary", size="lg")
+            execute_btn = gr.Button("🔍 Execute Debug", variant="primary")
             
-        with gr.Column(scale=1):
+        with gr.Column():
             status_display = gr.Textbox(
-                label="Execution Status",
+                label="Status",
                 interactive=False,
-                lines=3
+                lines=4
             )
             
-            check_btn = gr.Button("📊 Check Status")
-            
-            gr.Markdown("""
-            ### 📋 Quick Tests:
-            1. **Wait for green status**
-            2. **Run the default example**
-            3. **Look for interactive chart**
-            4. **Check browser console** if issues
-            """)
+            check_btn = gr.Button("📊 Check")
+    
+    # Simple test examples
+    gr.Markdown("""
+    ### 🧪 Progressive Tests:
+    
+    **Test 1 - Minimal:**
+    ```python
+    import plotly.graph_objects as go
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=[1,2,3], y=[1,2,3]))
+    fig.show()
+    ```
+    
+    **Test 2 - With NumPy:**
+    ```python
+    import plotly.graph_objects as go
+    import numpy as np
+    x = np.array([1,2,3,4,5])
+    y = np.array([1,4,9,16,25])
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=x, y=y, mode='markers'))
+    fig.show()
+    ```
+    
+    **Test 3 - Express:**
+    ```python
+    import plotly.express as px
+    import pandas as pd
+    df = pd.DataFrame({'x': [1,2,3], 'y': [1,4,9]})
+    fig = px.scatter(df, x='x', y='y')
+    fig.show()
+    ```
+    """)
     
-    # Button handlers with simple JS
     execute_btn.click(
         fn=None,
         inputs=[code_input],
         outputs=[status_display],
-        js="""
-        function(code) {
-            try {
-                if (window.executeUserCode) {
-                    return window.executeUserCode(code);
-                } else {
-                    return 'Execute function not available';
-                }
-            } catch (error) {
-                return 'JS Error: ' + error.message;
-            }
-        }
-        """
+        js="(code) => window.executeUserCode ? window.executeUserCode(code) : 'Not ready'"
     )
     
     check_btn.click(
         fn=None,
         inputs=[],
         outputs=[status_display],
-        js="""
-        function() {
-            try {
-                if (window.checkReady) {
-                    return window.checkReady() ? '✅ System Ready' : '⏳ Still Loading';
-                } else {
-                    return '❌ Check function not available';
-                }
-            } catch (error) {
-                return 'Status Error: ' + error.message;
-            }
-        }
-        """
+        js="() => window.checkReady ? (window.checkReady() ? '✅ Ready' : '⏳ Loading') : '❌ Error'"
     )
 
 if __name__ == "__main__":
-    print("🚀 Starting Fixed Plotly + Pyodide Server...")
-    print("📍 Access at: http://localhost:7860")
-    
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        debug=True
-    )
+    demo.launch(server_name="0.0.0.0", server_port=7860, share=False)