Fix plot aspect ratios and implement gallery delete functionality

- Fixed interactive plot horizontal stretching issues
- Made static and interactive plots pixel-wise for visual consistency
- Resolved data orientation mirroring with latitude coordinate handling
- Adjusted plot proportions to match between static and interactive
- Added comprehensive gallery functionality with delete buttons
- Enhanced error handling and user feedback
- Removed unused README_HF.md file

README_HF.md

@@ -1,27 +0,0 @@
-# CAMS Air Pollution Dashboard
-
-A comprehensive web application for visualizing atmospheric composition data from the Copernicus Atmosphere Monitoring Service (CAMS).
-
-## Features
-
-- 🌍 Interactive air pollution maps for India
-- 📊 Multiple pollutant visualization (PM2.5, PM10, NO2, O3, CO, etc.)
-- 🎨 Various color themes for data visualization
-- 📁 Support for NetCDF file uploads
-- 🌐 Direct CAMS data download integration
-- 📈 Statistical analysis and hover information
-
-## Usage
-
-1. Upload your own NetCDF files or download CAMS data for specific dates
-2. Select variables, pressure levels, and time points
-3. Generate static or interactive pollution maps
-4. Explore air quality data with detailed statistics
-
-## Data Source
-
-This application uses data from the Copernicus Atmosphere Monitoring Service (CAMS), which provides global atmospheric composition forecasts and analyses.
-
-## License
-
-This project is open source and available under the MIT License.

app.py

@@ -497,6 +497,161 @@ def serve_plot(filename):
         return redirect(url_for('index'))
 
 
+@app.route('/gallery')
+def gallery():
+    """Display gallery of all saved plots"""
+    try:
+        plots_dir = Path('plots')
+        plots_dir.mkdir(exist_ok=True)
+        
+        # Get all plot files
+        plot_files = []
+        
+        # Static plots (PNG/JPG)
+        for ext in ['*.png', '*.jpg', '*.jpeg']:
+            for plot_file in plots_dir.glob(ext):
+                if plot_file.is_file():
+                    # Parse filename to extract metadata
+                    filename = plot_file.name
+                    file_info = {
+                        'filename': filename,
+                        'path': str(plot_file),
+                        'type': 'static',
+                        'size': plot_file.stat().st_size,
+                        'created': datetime.fromtimestamp(plot_file.stat().st_mtime),
+                        'extension': plot_file.suffix.lower()
+                    }
+                    
+                    # Try to parse metadata from filename
+                    try:
+                        # Example: PM2_5_India_viridis_20200824_1200.png
+                        name_parts = filename.replace(plot_file.suffix, '').split('_')
+                        if len(name_parts) >= 3:
+                            file_info['variable'] = name_parts[0].replace('_', '.')
+                            file_info['region'] = name_parts[1] if len(name_parts) > 1 else 'Unknown'
+                            file_info['theme'] = name_parts[-2] if len(name_parts) > 2 else 'Unknown'
+                    except:
+                        file_info['variable'] = 'Unknown'
+                        file_info['region'] = 'Unknown'
+                        file_info['theme'] = 'Unknown'
+                    
+                    plot_files.append(file_info)
+        
+        # Interactive plots (HTML)
+        for plot_file in plots_dir.glob('*.html'):
+            if plot_file.is_file():
+                filename = plot_file.name
+                file_info = {
+                    'filename': filename,
+                    'path': str(plot_file),
+                    'type': 'interactive',
+                    'size': plot_file.stat().st_size,
+                    'created': datetime.fromtimestamp(plot_file.stat().st_mtime),
+                    'extension': '.html'
+                }
+                
+                # Try to parse metadata from filename
+                try:
+                    name_parts = filename.replace('.html', '').split('_')
+                    if len(name_parts) >= 3:
+                        file_info['variable'] = name_parts[0].replace('_', '.')
+                        file_info['region'] = name_parts[1] if len(name_parts) > 1 else 'Unknown'
+                        file_info['theme'] = name_parts[-2] if len(name_parts) > 2 else 'Unknown'
+                except:
+                    file_info['variable'] = 'Unknown'
+                    file_info['region'] = 'Unknown'
+                    file_info['theme'] = 'Unknown'
+                
+                plot_files.append(file_info)
+        
+        # Sort by creation time (newest first)
+        plot_files.sort(key=lambda x: x['created'], reverse=True)
+        
+        # Group by type for display
+        static_plots = [p for p in plot_files if p['type'] == 'static']
+        interactive_plots = [p for p in plot_files if p['type'] == 'interactive']
+        
+        return render_template('gallery.html',
+                             static_plots=static_plots,
+                             interactive_plots=interactive_plots,
+                             total_plots=len(plot_files))
+        
+    except Exception as e:
+        flash(f'Error loading gallery: {str(e)}', 'error')
+        return redirect(url_for('index'))
+
+
+@app.route('/view_interactive/<filename>')
+def view_interactive_plot(filename):
+    """View an interactive plot from the gallery"""
+    try:
+        plot_path = Path('plots') / filename
+        if not plot_path.exists() or not filename.endswith('.html'):
+            flash('Interactive plot not found', 'error')
+            return redirect(url_for('gallery'))
+        
+        # Read the HTML content
+        with open(plot_path, 'r', encoding='utf-8') as f:
+            html_content = f.read()
+        
+        # Create plot info from filename
+        plot_info = {
+            'variable': 'Unknown',
+            'generated_time': datetime.fromtimestamp(plot_path.stat().st_mtime).strftime('%Y-%m-%d %H:%M:%S'),
+            'is_interactive': True,
+            'filename': filename
+        }
+        
+        return render_template('view_interactive.html',
+                             plot_html=html_content,
+                             plot_info=plot_info)
+        
+    except Exception as e:
+        flash(f'Error viewing plot: {str(e)}', 'error')
+        return redirect(url_for('gallery'))
+
+
+@app.route('/delete_plot/<filename>', methods=['DELETE'])
+def delete_plot(filename):
+    """Delete a specific plot file"""
+    print(f"🗑️  DELETE request received for: {filename}")  # Debug logging
+    try:
+        # Security check: ensure filename is safe
+        if not filename or '..' in filename or '/' in filename:
+            print(f"❌ Invalid filename: {filename}")
+            return jsonify({'success': False, 'error': 'Invalid filename'}), 400
+        
+        plot_path = Path('plots') / filename
+        print(f"🔍 Looking for file at: {plot_path}")
+        
+        # Check if file exists
+        if not plot_path.exists():
+            print(f"❌ File not found: {plot_path}")
+            return jsonify({'success': False, 'error': 'File not found'}), 404
+        
+        # Check if it's a valid plot file
+        allowed_extensions = ['.png', '.jpg', '.jpeg', '.html']
+        if plot_path.suffix.lower() not in allowed_extensions:
+            print(f"❌ Invalid file type: {filename}")
+            return jsonify({'success': False, 'error': 'Invalid file type'}), 400
+        
+        # Delete the file
+        plot_path.unlink()
+        print(f"✅ Successfully deleted: {filename}")
+        
+        return jsonify({
+            'success': True, 
+            'message': f'Plot {filename} deleted successfully'
+        })
+        
+    except Exception as e:
+        print(f"💥 Error deleting file {filename}: {str(e)}")
+        return jsonify({
+            'success': False, 
+            'error': f'Failed to delete plot: {str(e)}'
+        }), 500
+
+
 @app.route('/cleanup')
 def cleanup():
     """Clean up old files"""

data_processor.py

@@ -307,9 +307,12 @@ class NetCDFProcessor:
         lats = dataset[coords['lat']].values
         lons = dataset[coords['lon']].values
         
+        # Crop data to India region for better performance
+        data_values, lats, lons = self._crop_to_india(data_array.values, lats, lons)
+        
         # Convert units if necessary
         original_units = getattr(dataset[variable_name], 'units', '')
-        data_values = self._convert_units(data_array.values, original_units, var_info['units'])
+        data_values = self._convert_units(data_values, original_units, var_info['units'])
 
         metadata = {
             'variable_name': variable_name,
@@ -356,6 +359,64 @@ class NetCDFProcessor:
         
         return data_converted
     
+    def _crop_to_india(self, data_values, lats, lons):
+        """
+        Crop data to India region to improve performance and focus visualization
+        
+        Parameters:
+        data_values (np.ndarray): 2D data array (lat, lon)
+        lats (np.ndarray): Latitude values
+        lons (np.ndarray): Longitude values
+        
+        Returns:
+        tuple: (cropped_data, cropped_lats, cropped_lons)
+        """
+        from constants import INDIA_BOUNDS
+        
+        # Define extended India bounds with some buffer
+        lat_min = INDIA_BOUNDS['lat_min'] - 2  # 6-2 = 4°N
+        lat_max = INDIA_BOUNDS['lat_max'] + 2  # 38+2 = 40°N  
+        lon_min = INDIA_BOUNDS['lon_min'] - 2  # 68-2 = 66°E
+        lon_max = INDIA_BOUNDS['lon_max'] + 2  # 97+2 = 99°E
+        
+        print(f"Original data shape: {data_values.shape}")
+        print(f"Original lat range: {lats.min():.2f} to {lats.max():.2f}")
+        print(f"Original lon range: {lons.min():.2f} to {lons.max():.2f}")
+        
+        # Find indices within India bounds
+        lat_mask = (lats >= lat_min) & (lats <= lat_max)
+        lon_mask = (lons >= lon_min) & (lons <= lon_max)
+        
+        # Get the indices
+        lat_indices = np.where(lat_mask)[0]
+        lon_indices = np.where(lon_mask)[0]
+        
+        if len(lat_indices) == 0 or len(lon_indices) == 0:
+            print("Warning: No data found in India region, using full dataset")
+            return data_values, lats, lons
+        
+        # Get the min and max indices to define the crop region
+        lat_start, lat_end = lat_indices[0], lat_indices[-1] + 1
+        lon_start, lon_end = lon_indices[0], lon_indices[-1] + 1
+        
+        # Crop the data
+        if len(data_values.shape) == 2:  # (lat, lon)
+            cropped_data = data_values[lat_start:lat_end, lon_start:lon_end]
+        else:
+            print(f"Warning: Unexpected data shape {data_values.shape}, cropping first two dimensions")
+            cropped_data = data_values[lat_start:lat_end, lon_start:lon_end]
+        
+        # Crop coordinates
+        cropped_lats = lats[lat_start:lat_end]
+        cropped_lons = lons[lon_start:lon_end]
+        
+        print(f"Cropped data shape: {cropped_data.shape}")
+        print(f"Cropped lat range: {cropped_lats.min():.2f} to {cropped_lats.max():.2f}")
+        print(f"Cropped lon range: {cropped_lons.min():.2f} to {cropped_lons.max():.2f}")
+        print(f"Data reduction: {(1 - cropped_data.size / data_values.size) * 100:.1f}%")
+        
+        return cropped_data, cropped_lats, cropped_lons
+    
     def get_available_times(self, variable_name):
         """Get available time steps for a variable"""
         if variable_name not in self.detected_variables:

interactive_plot_generator.py

@@ -179,10 +179,12 @@ class InteractiveIndiaMapPlotter:
                     range=lat_range,
                     showgrid=True,
                     gridcolor='rgba(128, 128, 128, 0.3)',
-                    zeroline=False
+                    zeroline=False,
+                    scaleanchor="x",
+                    scaleratio=1  # Simplified to match static plot aspect ratio
                 ),
-                width=1200,
-                height=800,
+                width=1400,
+                height=1000,
                 plot_bgcolor='white',
                 # Enable zoom, pan and other interactive features
                 dragmode='zoom',
@@ -253,8 +255,8 @@ class InteractiveIndiaMapPlotter:
                 'toImageButtonOptions': {
                     'format': 'png',
                     'filename': f'india_pollution_map_{datetime.now().strftime("%Y%m%d_%H%M%S")}',
-                    'height': 800,
-                    'width': 1200,
+                    'height': 1000,
+                    'width': 1400,
                     'scale': 2
                 },
                 'responsive': True
@@ -393,7 +395,7 @@ class InteractiveIndiaMapPlotter:
         
         try:
             # Save as static PNG with high quality
-            fig.write_image(str(plot_path), format='png', width=1200, height=800, scale=2)
+            fig.write_image(str(plot_path), format='png', width=1400, height=1000, scale=2)
             print(f"Static PNG plot saved: {plot_path}")
             return str(plot_path)
         except Exception as e:

plot_generator.py

@@ -63,8 +63,8 @@ class IndiaMapPlotter:
                 print(f"Warning: Color theme '{color_theme}' not found, using 'viridis'")
                 color_theme = 'viridis'
             
-            # Create figure and axes
-            fig = plt.figure(figsize=(14, 10))
+            # Create figure and axes - match interactive plot proportions (1400x1000 = 1.4:1 ratio)
+            fig = plt.figure(figsize=(16, 10))  # Wider to match interactive plot
             ax = fig.add_subplot(1, 1, 1)
             
             # Set map extent
@@ -73,7 +73,7 @@ class IndiaMapPlotter:
             
             # --- KEY CHANGE: PLOT ORDER & ZORDER ---
             
-            # 1. Plot the pollution data in the background (lower zorder)
+            # 1. Plot the pollution data in the background (lower zorder) - pixel-wise like interactive plots
             if lons.ndim == 1 and lats.ndim == 1:
                 lon_grid, lat_grid = np.meshgrid(lons, lats)
             else:
@@ -90,10 +90,23 @@ class IndiaMapPlotter:
             if vmax <= vmin:
                 vmax = vmin + 1.0
             
-            levels = np.linspace(vmin, vmax, 25)
-            contour = ax.contourf(lon_grid, lat_grid, data_values, 
-                                levels=levels, cmap=color_theme, extend='max', 
-                                zorder=1) 
+            # Use imshow for pixel-wise display - matches interactive plot orientation
+            extent = [lons.min(), lons.max(), lats.min(), lats.max()]
+            
+            # Handle latitude order for proper orientation
+            # NetCDF files often have descending latitudes, but imshow with origin='lower' expects ascending
+            lat_ascending = lats[0] < lats[-1] if len(lats) > 1 else True
+            
+            if lat_ascending:
+                # Lats are ascending (good for origin='lower')
+                plot_data = data_values
+            else:
+                # Lats are descending, flip to match origin='lower'
+                plot_data = np.flipud(data_values)
+            
+            im = ax.imshow(plot_data, cmap=color_theme, vmin=vmin, vmax=vmax,
+                          extent=extent, origin='lower', aspect='auto',  # Changed to 'auto' to match interactive plot
+                          interpolation='nearest', zorder=1) 
 
             # Auto-adjust bounds if INDIA_BOUNDS is too small or wrong
             xmin, ymin, xmax, ymax = self.india_map.total_bounds
@@ -107,7 +120,7 @@ class IndiaMapPlotter:
                                 linewidth=0.8, zorder=2) # <-- CHANGED: Set zorder=2 (foreground)
             
             # Add colorbar
-            cbar = plt.colorbar(contour, ax=ax, shrink=0.6, pad=0.02, aspect=30)
+            cbar = plt.colorbar(im, ax=ax, shrink=0.6, pad=0.02, aspect=30)
             cbar_label = f"{display_name}" + (f" ({units})" if units else "")
             cbar.set_label(cbar_label, fontsize=12, labelpad=15)
             

templates/gallery.html

@@ -0,0 +1,464 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plot Gallery - CAMS Air Pollution Dashboard</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .header h1 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            background: linear-gradient(45deg, #3498db, #2980b9);
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 25px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(45deg, #95a5a6, #7f8c8d);
+        }
+
+        .btn-danger {
+            background: linear-gradient(45deg, #e74c3c, #c0392b);
+        }
+
+        .section {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .section h2 {
+            color: #2c3e50;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .plots-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .plot-card {
+            background: white;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+        }
+
+        .plot-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+            border-color: #3498db;
+        }
+
+        .plot-preview {
+            width: 100%;
+            height: 200px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .plot-preview img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+        }
+
+        .plot-preview.interactive {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            font-size: 48px;
+        }
+
+        .plot-info {
+            color: #2c3e50;
+        }
+
+        .plot-info h3 {
+            margin-bottom: 10px;
+            color: #34495e;
+            font-size: 16px;
+        }
+
+        .plot-meta {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+            margin-bottom: 15px;
+            font-size: 12px;
+            color: #7f8c8d;
+        }
+
+        .plot-meta span {
+            background: #ecf0f1;
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        .plot-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: space-between;
+        }
+
+        .btn-small {
+            padding: 6px 12px;
+            font-size: 12px;
+            border-radius: 15px;
+            text-decoration: none;
+            font-weight: 500;
+        }
+
+        .btn-view {
+            background: linear-gradient(45deg, #27ae60, #219a52);
+            color: white;
+        }
+
+        .btn-download {
+            background: linear-gradient(45deg, #f39c12, #e67e22);
+            color: white;
+        }
+
+        .btn-delete {
+            background: linear-gradient(45deg, #e74c3c, #c0392b);
+            color: white;
+        }
+
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .stat-card {
+            background: rgba(52, 152, 219, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            border-left: 4px solid #3498db;
+        }
+
+        .stat-number {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2980b9;
+        }
+
+        .stat-label {
+            color: #7f8c8d;
+            font-size: 12px;
+            margin-top: 5px;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 40px;
+            color: #7f8c8d;
+        }
+
+        .empty-state h3 {
+            margin-bottom: 10px;
+            color: #95a5a6;
+        }
+
+        @media (max-width: 768px) {
+            .plots-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .controls {
+                justify-content: center;
+            }
+            
+            .btn {
+                padding: 10px 20px;
+                font-size: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>📊 Plot Gallery</h1>
+            <p style="text-align: center; color: #7f8c8d; margin-top: 10px;">
+                View and manage all your saved pollution maps
+            </p>
+        </div>
+
+        <div class="controls">
+            <a href="{{ url_for('index') }}" class="btn btn-secondary">← Back to Dashboard</a>
+            <a href="{{ url_for('cleanup') }}" class="btn btn-danger" 
+               onclick="return confirm('This will delete plots older than 24 hours. Continue?')">
+                🧹 Clean Old Plots
+            </a>
+        </div>
+
+        <!-- Statistics -->
+        <div class="section">
+            <div class="stats">
+                <div class="stat-card">
+                    <div class="stat-number">{{ total_plots }}</div>
+                    <div class="stat-label">Total Plots</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">{{ static_plots|length }}</div>
+                    <div class="stat-label">Static Plots</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">{{ interactive_plots|length }}</div>
+                    <div class="stat-label">Interactive Plots</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Interactive Plots Section -->
+        <div class="section">
+            <h2>🎯 Interactive Plots</h2>
+            {% if interactive_plots %}
+                <div class="plots-grid">
+                    {% for plot in interactive_plots %}
+                    <div class="plot-card">
+                        <div class="plot-preview interactive">
+                            🌍
+                        </div>
+                        <div class="plot-info">
+                            <h3>{{ plot.variable|title }} - {{ plot.region|title }}</h3>
+                            <div class="plot-meta">
+                                <span>📅 {{ plot.created.strftime('%Y-%m-%d %H:%M') }}</span>
+                                <span>🎨 {{ plot.theme|title }}</span>
+                                <span>📁 {{ "%.1f"|format(plot.size/1024) }} KB</span>
+                                <span>🌐 Interactive</span>
+                            </div>
+                            <div class="plot-actions">
+                                <a href="{{ url_for('view_interactive_plot', filename=plot.filename) }}" 
+                                   class="btn-small btn-view">👁️ View</a>
+                                <a href="{{ url_for('serve_plot', filename=plot.filename) }}" 
+                                   class="btn-small btn-download" download>💾 Download</a>
+                                <button onclick="deletePlot('{{ plot.filename }}')" 
+                                        class="btn-small btn-delete">🗑️ Delete</button>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="empty-state">
+                    <h3>No Interactive Plots Yet</h3>
+                    <p>Create your first interactive plot from the dashboard!</p>
+                </div>
+            {% endif %}
+        </div>
+
+        <!-- Static Plots Section -->
+        <div class="section">
+            <h2>📊 Static Plots</h2>
+            {% if static_plots %}
+                <div class="plots-grid">
+                    {% for plot in static_plots %}
+                    <div class="plot-card">
+                        <div class="plot-preview">
+                            <img src="{{ url_for('serve_plot', filename=plot.filename) }}" 
+                                 alt="{{ plot.variable }} plot" 
+                                 onerror="this.style.display='none'; this.parentElement.innerHTML='<div style=\'color: #e74c3c; text-align: center;\'>📷<br>Preview unavailable</div>'">
+                        </div>
+                        <div class="plot-info">
+                            <h3>{{ plot.variable|title }} - {{ plot.region|title }}</h3>
+                            <div class="plot-meta">
+                                <span>📅 {{ plot.created.strftime('%Y-%m-%d %H:%M') }}</span>
+                                <span>🎨 {{ plot.theme|title }}</span>
+                                <span>📁 {{ "%.1f"|format(plot.size/1024) }} KB</span>
+                                <span>🖼️ {{ plot.extension.upper() }}</span>
+                            </div>
+                            <div class="plot-actions">
+                                <a href="{{ url_for('serve_plot', filename=plot.filename) }}" 
+                                   class="btn-small btn-view" target="_blank">👁️ View</a>
+                                <a href="{{ url_for('serve_plot', filename=plot.filename) }}" 
+                                   class="btn-small btn-download" download>💾 Download</a>
+                                <button onclick="deletePlot('{{ plot.filename }}')" 
+                                        class="btn-small btn-delete">🗑️ Delete</button>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="empty-state">
+                    <h3>No Static Plots Yet</h3>
+                    <p>Generate your first static plot from the dashboard!</p>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <script>
+        // Add loading indicators for actions
+        document.addEventListener('DOMContentLoaded', function() {
+            const viewButtons = document.querySelectorAll('.btn-view');
+            viewButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const originalText = this.textContent;
+                    this.textContent = '⏳ Loading...';
+                    
+                    // Reset after a delay if still on page
+                    setTimeout(() => {
+                        this.textContent = originalText;
+                    }, 3000);
+                });
+            });
+
+            const downloadButtons = document.querySelectorAll('.btn-download');
+            downloadButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const originalText = this.textContent;
+                    this.textContent = '📥 Downloading...';
+                    
+                    setTimeout(() => {
+                        this.textContent = originalText;
+                    }, 2000);
+                });
+            });
+
+            // Delete plot functionality - fixed to work properly with onclick
+            window.deletePlot = function(filename) {
+                if (confirm(`Are you sure you want to delete "${filename}"? This action cannot be undone.`)) {
+                    // Find the button that was clicked by searching for the button with this filename
+                    const buttons = document.querySelectorAll('.btn-delete');
+                    let button = null;
+                    
+                    buttons.forEach(btn => {
+                        if (btn.getAttribute('onclick').includes(filename)) {
+                            button = btn;
+                        }
+                    });
+                    
+                    if (!button) {
+                        alert('Error: Could not find the delete button');
+                        return;
+                    }
+                    
+                    const originalText = button.textContent;
+                    button.textContent = '🗑️ Deleting...';
+                    button.disabled = true;
+
+                    fetch(`/delete_plot/${filename}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        }
+                    })
+                    .then(response => {
+                        console.log('Delete response status:', response.status);
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        console.log('Delete response data:', data);
+                        if (data.success) {
+                            // Remove the plot card from the DOM
+                            button.closest('.plot-card').remove();
+                            
+                            // Show success message
+                            const successMsg = document.createElement('div');
+                            successMsg.style.cssText = `
+                                position: fixed; top: 20px; right: 20px; z-index: 10000;
+                                background: #27ae60; color: white; padding: 15px 25px;
+                                border-radius: 8px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                            `;
+                            successMsg.textContent = `✅ ${filename} deleted successfully`;
+                            document.body.appendChild(successMsg);
+                            
+                            setTimeout(() => {
+                                successMsg.remove();
+                                // Reload page to update statistics
+                                window.location.reload();
+                            }, 2000);
+                        } else {
+                            alert(`Failed to delete plot: ${data.error}`);
+                            button.textContent = originalText;
+                            button.disabled = false;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert(`An error occurred while deleting the plot: ${error.message}`);
+                        button.textContent = originalText;
+                        button.disabled = false;
+                    });
+                }
+            }
+        });
+    </script>
+</body>
+</html>

templates/index.html

@@ -155,6 +155,12 @@
     <div class="container">
         <h1>🌍 CAMS Air Pollution Visualization</h1>
         
+        <div style="text-align: center; margin-bottom: 20px;">
+            <a href="{{ url_for('gallery') }}" class="btn" style="font-size: 14px; padding: 8px 16px; margin-right: 10px;">
+                📊 View Plot Gallery
+            </a>
+        </div>
+        
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}

templates/view_interactive.html

@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>View Interactive Plot - CAMS Dashboard</title>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            text-align: center;
+        }
+
+        .header h1 {
+            color: #2c3e50;
+            margin-bottom: 10px;
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            background: linear-gradient(45deg, #3498db, #2980b9);
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 25px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(45deg, #95a5a6, #7f8c8d);
+        }
+
+        .btn-download {
+            background: linear-gradient(45deg, #27ae60, #219a52);
+        }
+
+        .plot-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .plot-content {
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .plot-info-section {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+        }
+
+        .info-item {
+            background: rgba(52, 73, 94, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            border-left: 4px solid #3498db;
+        }
+
+        .info-item h3 {
+            color: #2c3e50;
+            margin-bottom: 5px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .info-item p {
+            color: #34495e;
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            
+            .controls {
+                justify-content: center;
+            }
+            
+            .btn {
+                padding: 10px 20px;
+                font-size: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🌍 Interactive Plot Viewer</h1>
+            <p style="color: #7f8c8d; margin-top: 10px;">
+                Viewing saved interactive plot: {{ plot_info.filename }}
+            </p>
+        </div>
+
+        <div class="controls">
+            <a href="{{ url_for('gallery') }}" class="btn btn-secondary">← Back to Gallery</a>
+            <a href="{{ url_for('index') }}" class="btn btn-secondary">🏠 Dashboard</a>
+            <a href="{{ url_for('serve_plot', filename=plot_info.filename) }}" 
+               class="btn btn-download" download>📥 Download HTML</a>
+        </div>
+
+        <div class="plot-container">
+            <div class="plot-content">
+                {{ plot_html|safe }}
+            </div>
+        </div>
+
+        <div class="plot-info-section">
+            <h2 style="color: #2c3e50; margin-bottom: 20px;">📊 Plot Information</h2>
+            
+            <div class="info-grid">
+                <div class="info-item">
+                    <h3>🧪 Variable</h3>
+                    <p>{{ plot_info.variable }}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>⏰ Generated</h3>
+                    <p>{{ plot_info.generated_time }}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>📁 Filename</h3>
+                    <p>{{ plot_info.filename }}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>🎯 Type</h3>
+                    <p>Interactive Plot</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Enhanced interactivity for saved plots
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Viewing saved interactive plot');
+            
+            // Check if Plotly is loaded
+            if (typeof Plotly === 'undefined') {
+                console.error('Plotly is not loaded!');
+                return;
+            }
+            
+            // Find the plotly div
+            const plotDiv = document.querySelector('.plotly-graph-div');
+            
+            if (plotDiv) {
+                console.log('Found Plotly plot');
+                
+                // Add responsive behavior
+                window.addEventListener('resize', function() {
+                    Plotly.Plots.resize(plotDiv);
+                });
+            }
+            
+            // Add loading indicators for download
+            const downloadBtn = document.querySelector('.btn-download');
+            if (downloadBtn) {
+                downloadBtn.addEventListener('click', function() {
+                    const originalText = this.textContent;
+                    this.textContent = '⏳ Preparing download...';
+                    this.style.pointerEvents = 'none';
+                    
+                    setTimeout(() => {
+                        this.textContent = originalText;
+                        this.style.pointerEvents = 'auto';
+                    }, 2000);
+                });
+            }
+        });
+    </script>
+</body>
+</html>