FIX: Debug interactive plots and add comprehensive loading indicators

🔧 Interactive Plot Fixes:
- Fix HTML generation for proper Plotly rendering
- Add comprehensive debugging and fallback displays
- Install Chromium in Docker for PNG export capability
- Improve HTML template structure and error handling

💫 Loading Indicators:
- Add animated loading spinners to all buttons
- Implement loading states for upload, download, and analysis
- Add progress text updates during processing
- Improve user feedback across all forms

🚀 UX Improvements:
- Better error messages and debugging info
- Responsive loading animations with CSS keyframes
- Form submission state management
- Enhanced visual feedback for long operations

Dockerfile

@@ -19,6 +19,7 @@ RUN apt-get update && apt-get install -y \
     git-lfs \
     curl \
     wget \
+    chromium-browser \
     && rm -rf /var/lib/apt/lists/*
 
 # Set environment variables for GDAL
@@ -26,6 +27,10 @@ ENV CPLUS_INCLUDE_PATH=/usr/include/gdal
 ENV C_INCLUDE_PATH=/usr/include/gdal
 ENV GDAL_DATA=/usr/share/gdal
 
+# Set environment variable for Chromium (needed by Kaleido)
+ENV CHROME_BIN=/usr/bin/chromium-browser
+ENV CHROME_PATH=/usr/bin/chromium-browser
+
 # Copy requirements first for better caching
 COPY requirements.txt .
 

interactive_plot_generator.py

@@ -265,19 +265,31 @@ class InteractiveIndiaMapPlotter:
             
             if save_plot:
                 # Generate HTML content for embedding
-                html_content = pio.to_html(fig, config=config, include_plotlyjs='cdn', div_id='interactive-plot')
+                html_content = pio.to_html(
+                    fig, 
+                    config=config, 
+                    include_plotlyjs='cdn',
+                    div_id='interactive-plot',
+                    full_html=False
+                )
                 result['html_content'] = html_content
                 
                 # Save as HTML file
                 html_path = self._save_html_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp, config)
                 result['html_path'] = html_path
                 
-                # Save as PNG for fallback
+                # Save as PNG for fallback (only if kaleido works)
                 png_path = self._save_png_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp)
                 result['png_path'] = png_path
             else:
                 # Just return HTML content for display
-                html_content = pio.to_html(fig, config=config, include_plotlyjs='cdn')
+                html_content = pio.to_html(
+                    fig, 
+                    config=config, 
+                    include_plotlyjs='cdn',
+                    div_id='interactive-plot',
+                    full_html=False
+                )
                 result['html_content'] = html_content
             
             return result

templates/index.html

@@ -57,13 +57,35 @@
             cursor: pointer;
             font-size: 16px;
             font-weight: 600;
-            transition: background 0.3s;
+            transition: all 0.3s;
+            position: relative;
         }
         .btn:hover { background: #2980b9; }
         .btn:disabled {
             background: #bdc3c7;
             cursor: not-allowed;
         }
+        .btn.loading {
+            background: #34495e;
+            cursor: wait;
+            padding-left: 50px;
+        }
+        .btn.loading::before {
+            content: "";
+            position: absolute;
+            left: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            border: 2px solid #ffffff40;
+            border-top-color: #ffffff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: translateY(-50%) rotate(360deg); }
+        }
         .alert {
             padding: 15px;
             margin-bottom: 20px;
@@ -250,6 +272,59 @@
     </div>
     
     <script>
+        // Loading indicator functionality
+        function addLoadingState(button, originalText) {
+            button.classList.add('loading');
+            button.disabled = true;
+            button.textContent = originalText + ' (Processing...)';
+        }
+
+        function removeLoadingState(button, originalText) {
+            button.classList.remove('loading');
+            button.disabled = false;
+            button.textContent = originalText;
+        }
+
+        // Add loading states to all form submissions
+        document.addEventListener('DOMContentLoaded', function() {
+            // File upload form
+            const uploadForm = document.querySelector('form[action="/upload"]');
+            if (uploadForm) {
+                uploadForm.addEventListener('submit', function(e) {
+                    const submitBtn = this.querySelector('button[type="submit"]');
+                    if (submitBtn) {
+                        addLoadingState(submitBtn, '📁 Upload File');
+                    }
+                });
+            }
+
+            // Download date form
+            const downloadForm = document.querySelector('form[action="/download_date"]');
+            if (downloadForm) {
+                downloadForm.addEventListener('submit', function(e) {
+                    if (!confirm('CAMS data download may take several minutes. Continue?')) {
+                        e.preventDefault();
+                        return;
+                    }
+                    const submitBtn = this.querySelector('button[type="submit"]');
+                    if (submitBtn) {
+                        addLoadingState(submitBtn, '📥 Download CAMS Data');
+                    }
+                });
+            }
+
+            // Cleanup button
+            const cleanupBtn = document.querySelector('a[href="/cleanup"]');
+            if (cleanupBtn) {
+                cleanupBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    this.textContent = '🧹 Cleaning...';
+                    this.style.pointerEvents = 'none';
+                    window.location.href = this.href;
+                });
+            }
+        });
+
         document.getElementById('file').addEventListener('change', function() {
             const file = this.files[0];
             if (file) {
@@ -261,16 +336,17 @@
             }
         });
         
-        document.querySelector('form[action="/download_date"]').addEventListener('submit', function(e) {
-            if (!confirm('CAMS data download may take several minutes. Continue?')) {
-                e.preventDefault();
-            }
-        });
-        
         document.getElementById('recentFileForm').addEventListener('submit', function(e) {
             e.preventDefault();
             const val = document.getElementById('recent_file').value;
             if (!val) return;
+            
+            // Show loading state
+            const submitBtn = this.querySelector('button[type="submit"]');
+            if (submitBtn) {
+                addLoadingState(submitBtn, '🚀 Analyze');
+            }
+            
             const [filename, filetype] = val.split('|');
             // is_download param: true for download, false for upload
             const is_download = (filetype === 'download') ? 'true' : 'false';

templates/interactive_plot.html

@@ -205,7 +205,7 @@
         </div>
 
         <div class="plot-container">
-            <div class="interactive-plot">
+            <div class="interactive-plot" id="plotly-container">
                 {{ plot_html|safe }}
             </div>
         </div>
@@ -269,15 +269,43 @@
     </div>
 
     <script>
-        // Additional interactivity enhancements
+        // Additional interactivity enhancements and debugging
         document.addEventListener('DOMContentLoaded', function() {
+            console.log('Interactive plot page loaded');
+            
+            // Check if Plotly is loaded
+            if (typeof Plotly === 'undefined') {
+                console.error('Plotly is not loaded!');
+                document.getElementById('plotly-container').innerHTML = 
+                    '<div style="padding: 40px; text-align: center; color: red; border: 2px dashed red; margin: 20px;">' +
+                    '<h3>⚠️ Plot Loading Error</h3>' +
+                    '<p>Plotly library failed to load. Please refresh the page or check your internet connection.</p>' +
+                    '</div>';
+                return;
+            }
+            
+            // Look for the plotly div
+            const plotDiv = document.querySelector('[id^="interactive-plot"]') || document.querySelector('.plotly-graph-div');
+            
+            if (!plotDiv) {
+                console.error('No Plotly div found!');
+                document.getElementById('plotly-container').innerHTML = 
+                    '<div style="padding: 40px; text-align: center; color: orange; border: 2px dashed orange; margin: 20px;">' +
+                    '<h3>⚠️ Plot Not Found</h3>' +
+                    '<p>The interactive plot could not be initialized. The data may be processing.</p>' +
+                    '<button onclick="location.reload()" style="padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">🔄 Refresh Page</button>' +
+                    '</div>';
+                return;
+            }
+            
+            console.log('Plotly div found:', plotDiv);
+            
             // Add responsive behavior
-            const plotDiv = document.getElementById('interactive-plot');
-            if (plotDiv) {
-                window.addEventListener('resize', function() {
+            window.addEventListener('resize', function() {
+                if (plotDiv && typeof Plotly !== 'undefined') {
                     Plotly.Plots.resize(plotDiv);
-                });
-            }
+                }
+            });
             
             // Add loading indicator for downloads
             const downloadButtons = document.querySelectorAll('.btn-download');
@@ -293,6 +321,23 @@
                     }, 2000);
                 });
             });
+            
+            // Add a small delay then check if plot rendered correctly
+            setTimeout(function() {
+                const plotlyGraphDiv = document.querySelector('.plotly-graph-div');
+                if (plotlyGraphDiv) {
+                    const svg = plotlyGraphDiv.querySelector('svg');
+                    if (!svg || svg.children.length === 0) {
+                        console.warn('Plot may not have rendered correctly');
+                        // Try to redraw
+                        if (typeof Plotly !== 'undefined' && plotDiv._fullData) {
+                            Plotly.redraw(plotDiv);
+                        }
+                    } else {
+                        console.log('Plot rendered successfully');
+                    }
+                }
+            }, 1000);
         });
     </script>
 </body>

templates/variables.html

@@ -57,15 +57,37 @@
             cursor: pointer;
             font-size: 16px;
             font-weight: 600;
-            transition: background 0.3s;
+            transition: all 0.3s;
             text-decoration: none;
             display: inline-block;
+            position: relative;
         }
         .btn:hover { background: #2980b9; }
         .btn:disabled {
             background: #bdc3c7;
             cursor: not-allowed;
         }
+        .btn.loading {
+            background: #34495e;
+            cursor: wait;
+            padding-left: 50px;
+        }
+        .btn.loading::before {
+            content: "";
+            position: absolute;
+            left: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            border: 2px solid #ffffff40;
+            border-top-color: #ffffff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: translateY(-50%) rotate(360deg); }
+        }
         .btn-secondary {
             background: #6c757d;
         }
@@ -488,10 +510,32 @@
                 return;
             }
             
-            // Show loading message
+            // Determine which button was clicked
+            const submitEvent = e.submitter;
+            let loadingText = '⏳ Generating...';
+            
+            if (submitEvent && submitEvent.formAction) {
+                if (submitEvent.formAction.includes('visualize_interactive')) {
+                    loadingText = '🎯 Creating Interactive Plot...';
+                } else {
+                    loadingText = '📊 Creating Static Plot...';
+                }
+            }
+            
+            // Show loading message and update button states
             document.getElementById('loadingMessage').style.display = 'block';
-            document.getElementById('submitBtn').disabled = true;
-            document.getElementById('submitBtn').textContent = '⏳ Generating...';
+            
+            // Update all buttons to loading state
+            const buttons = this.querySelectorAll('button[type="submit"]');
+            buttons.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.add('loading');
+                if (btn === submitEvent) {
+                    btn.textContent = loadingText;
+                } else {
+                    btn.style.opacity = '0.5';
+                }
+            });
         });
         
         // Auto-select first variable if only one available