Restructure result page with 4-tab layout and auto variant analysis

- Add 4 tabs: Exon View, Feature View, Variant Analysis, Download
- Exon View: collapsible panels for Silhouette and Heat Map
- Feature View: dropdown to filter by individual features
- Variant Analysis: auto-runs for single predictions, on-demand for batch
- Download tab: PNG export via postMessage to iframes

Backend changes:
- /api/predict now auto-runs mutagenesis (210 mutations) for single sequences
- Add GET/POST /api/result/{job_id}/mutagenesis endpoints for on-demand analysis
- Fix heatmap batch hiding bug, enable eager loading of heatmap iframe

Frontend changes:
- Add collapsible panel styles and variant analysis UI components
- Implement postMessage-based PNG download from PyShiny iframes
- Update polling timeout to 2 minutes for longer mutagenesis runs

webapp/app/api/routes.py

@@ -107,6 +107,7 @@ async def submit_prediction(
     Submit a single sequence for PSI prediction.
 
     The sequence must be exactly 70 nucleotides long and contain only A, C, G, T.
+    Automatically runs variant analysis (mutagenesis) for single predictions.
     """
     job_id = str(uuid.uuid4())
 
@@ -137,8 +138,7 @@ async def submit_prediction(
         # Get force plot data
         force_plot_data = predictor.get_force_plot_data(request.sequence)
 
-        # Update job with results
-        job.status = "finished"
+        # Update job with PSI results
         job.psi = result["psi"]
         job.structure = result["structure"]
         job.mfe = result["mfe"]
@@ -148,6 +148,41 @@ async def submit_prediction(
             job.warnings = json.dumps(result["warnings"])
         db.commit()
 
+        # Automatically run variant analysis (mutagenesis) for single predictions
+        reference_psi = result["psi"]
+        mutations = generate_all_mutations(request.sequence)
+
+        mutation_results = []
+        for mutation in mutations:
+            try:
+                mut_result = predictor.predict_single(mutation["mutant_sequence"])
+                mutation_psi = mut_result["psi"]
+                delta_psi = calculate_delta_psi(reference_psi, mutation_psi)
+
+                mutation_results.append({
+                    "position": mutation["position"],
+                    "original": mutation["original"],
+                    "mutant": mutation["mutant"],
+                    "mutation_label": mutation["mutation_label"],
+                    "psi": mutation_psi,
+                    "delta_psi": delta_psi,
+                })
+            except Exception as e:
+                mutation_results.append({
+                    "position": mutation["position"],
+                    "original": mutation["original"],
+                    "mutant": mutation["mutant"],
+                    "mutation_label": mutation["mutation_label"],
+                    "psi": None,
+                    "delta_psi": None,
+                    "error": str(e),
+                })
+
+        # Store mutagenesis results
+        job.set_mutagenesis_results(mutation_results)
+        job.status = "finished"
+        db.commit()
+
     except Exception as e:
         job.status = "failed"
         job.error_message = str(e)
@@ -382,6 +417,229 @@ async def get_job_result(
         )
 
 
+@router.post("/result/{job_id}/mutagenesis", tags=["results"])
+async def run_mutagenesis_for_result(
+    job_id: str,
+    batch_index: Optional[int] = Query(None, description="Index of sequence in batch job (0-based)"),
+    db: Session = Depends(get_db),
+):
+    """
+    Run mutagenesis analysis on-demand for a specific result.
+
+    For single predictions, returns existing mutagenesis results if available.
+    For batch items, runs mutagenesis on the specified sequence.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if job.status != "finished":
+        raise HTTPException(status_code=400, detail="Job not yet complete")
+
+    # Determine which sequence to analyze
+    if job.is_batch:
+        if batch_index is None:
+            raise HTTPException(status_code=400, detail="batch_index required for batch jobs")
+
+        results = job.get_batch_results()
+        if batch_index >= len(results):
+            raise HTTPException(status_code=404, detail=f"Batch index {batch_index} not found")
+
+        seq_result = results[batch_index]
+        if seq_result.get("status") != "success":
+            raise HTTPException(status_code=400, detail="Cannot run mutagenesis on invalid sequence")
+
+        sequence = seq_result.get("sequence", "")
+        reference_psi = seq_result.get("psi")
+
+        # Check if mutagenesis already exists for this batch sequence
+        existing_mutagenesis = seq_result.get("mutagenesis_results")
+        if existing_mutagenesis:
+            heatmap_data = organize_mutations_for_heatmap(existing_mutagenesis)
+            top_positive, top_negative = get_top_mutations(existing_mutagenesis, n=10)
+            return {
+                "job_id": job_id,
+                "batch_index": batch_index,
+                "status": "finished",
+                "reference_sequence": sequence,
+                "reference_psi": reference_psi,
+                "total_mutations": 210,
+                "completed_mutations": len([m for m in existing_mutagenesis if m.get("psi") is not None]),
+                "mutations": existing_mutagenesis,
+                "heatmap_data": heatmap_data,
+                "top_positive": top_positive[:10],
+                "top_negative": top_negative[:10],
+            }
+    else:
+        # Single prediction - check for existing mutagenesis results
+        sequence = job.sequence
+        reference_psi = job.psi
+
+        existing_results = job.get_mutagenesis_results()
+        if existing_results:
+            heatmap_data = organize_mutations_for_heatmap(existing_results)
+            top_positive, top_negative = get_top_mutations(existing_results, n=10)
+            return {
+                "job_id": job_id,
+                "status": "finished",
+                "reference_sequence": sequence,
+                "reference_psi": reference_psi,
+                "total_mutations": 210,
+                "completed_mutations": len([m for m in existing_results if m.get("psi") is not None]),
+                "mutations": existing_results,
+                "heatmap_data": heatmap_data,
+                "top_positive": top_positive[:10],
+                "top_negative": top_negative[:10],
+            }
+
+    # Run mutagenesis analysis
+    try:
+        predictor = get_predictor()
+        mutations = generate_all_mutations(sequence)
+
+        mutation_results = []
+        for mutation in mutations:
+            try:
+                result = predictor.predict_single(mutation["mutant_sequence"])
+                mutation_psi = result["psi"]
+                delta_psi = calculate_delta_psi(reference_psi, mutation_psi)
+
+                mutation_results.append({
+                    "position": mutation["position"],
+                    "original": mutation["original"],
+                    "mutant": mutation["mutant"],
+                    "mutation_label": mutation["mutation_label"],
+                    "psi": mutation_psi,
+                    "delta_psi": delta_psi,
+                })
+            except Exception as e:
+                mutation_results.append({
+                    "position": mutation["position"],
+                    "original": mutation["original"],
+                    "mutant": mutation["mutant"],
+                    "mutation_label": mutation["mutation_label"],
+                    "psi": None,
+                    "delta_psi": None,
+                    "error": str(e),
+                })
+
+        # Store results
+        if job.is_batch:
+            # Store in batch results
+            results = job.get_batch_results()
+            results[batch_index]["mutagenesis_results"] = mutation_results
+            job.set_batch_results(results)
+        else:
+            job.set_mutagenesis_results(mutation_results)
+        db.commit()
+
+        heatmap_data = organize_mutations_for_heatmap(mutation_results)
+        top_positive, top_negative = get_top_mutations(mutation_results, n=10)
+
+        response = {
+            "job_id": job_id,
+            "status": "finished",
+            "reference_sequence": sequence,
+            "reference_psi": reference_psi,
+            "total_mutations": 210,
+            "completed_mutations": len([m for m in mutation_results if m.get("psi") is not None]),
+            "mutations": mutation_results,
+            "heatmap_data": heatmap_data,
+            "top_positive": top_positive[:10],
+            "top_negative": top_negative[:10],
+        }
+        if job.is_batch:
+            response["batch_index"] = batch_index
+
+        return response
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Mutagenesis analysis failed: {str(e)}")
+
+
+@router.get("/result/{job_id}/mutagenesis", tags=["results"])
+async def get_mutagenesis_for_result(
+    job_id: str,
+    batch_index: Optional[int] = Query(None, description="Index of sequence in batch job (0-based)"),
+    db: Session = Depends(get_db),
+):
+    """
+    Get existing mutagenesis results for a job.
+
+    Returns null/empty if mutagenesis hasn't been run yet.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if job.status != "finished":
+        raise HTTPException(status_code=400, detail="Job not yet complete")
+
+    if job.is_batch:
+        if batch_index is None:
+            raise HTTPException(status_code=400, detail="batch_index required for batch jobs")
+
+        results = job.get_batch_results()
+        if batch_index >= len(results):
+            raise HTTPException(status_code=404, detail=f"Batch index {batch_index} not found")
+
+        seq_result = results[batch_index]
+        existing_mutagenesis = seq_result.get("mutagenesis_results")
+
+        if not existing_mutagenesis:
+            return {
+                "job_id": job_id,
+                "batch_index": batch_index,
+                "status": "not_run",
+                "reference_sequence": seq_result.get("sequence", ""),
+                "reference_psi": seq_result.get("psi"),
+                "mutations": None,
+            }
+
+        heatmap_data = organize_mutations_for_heatmap(existing_mutagenesis)
+        top_positive, top_negative = get_top_mutations(existing_mutagenesis, n=10)
+        return {
+            "job_id": job_id,
+            "batch_index": batch_index,
+            "status": "finished",
+            "reference_sequence": seq_result.get("sequence", ""),
+            "reference_psi": seq_result.get("psi"),
+            "total_mutations": 210,
+            "completed_mutations": len([m for m in existing_mutagenesis if m.get("psi") is not None]),
+            "mutations": existing_mutagenesis,
+            "heatmap_data": heatmap_data,
+            "top_positive": top_positive[:10],
+            "top_negative": top_negative[:10],
+        }
+    else:
+        # Single prediction
+        existing_results = job.get_mutagenesis_results()
+
+        if not existing_results:
+            return {
+                "job_id": job_id,
+                "status": "not_run",
+                "reference_sequence": job.sequence,
+                "reference_psi": job.psi,
+                "mutations": None,
+            }
+
+        heatmap_data = organize_mutations_for_heatmap(existing_results)
+        top_positive, top_negative = get_top_mutations(existing_results, n=10)
+        return {
+            "job_id": job_id,
+            "status": "finished",
+            "reference_sequence": job.sequence,
+            "reference_psi": job.psi,
+            "total_mutations": 210,
+            "completed_mutations": len([m for m in existing_results if m.get("psi") is not None]),
+            "mutations": existing_results,
+            "heatmap_data": heatmap_data,
+            "top_positive": top_positive[:10],
+            "top_negative": top_negative[:10],
+        }
+
+
 @router.get("/heatmap/{job_id}", tags=["visualization"])
 async def get_heatmap_data(
     job_id: str,

webapp/app/shiny_apps/heatmap_app.py

@@ -98,6 +98,34 @@ def create_app(api_base_url: str = "http://localhost:8000"):
                             });
                         }
                     }
+                    // Handle download request from parent
+                    if (event.data && event.data.type === 'downloadRequest') {
+                        console.log('[Heatmap] Download requested');
+                        var plotDiv = document.querySelector('.js-plotly-plot');
+                        if (plotDiv) {
+                            Plotly.toImage(plotDiv, {format: 'png', width: 1200, height: 700, scale: 2})
+                                .then(function(dataUrl) {
+                                    window.parent.postMessage({
+                                        type: 'downloadResponse',
+                                        source: 'heatmap',
+                                        dataUrl: dataUrl
+                                    }, '*');
+                                })
+                                .catch(function(err) {
+                                    window.parent.postMessage({
+                                        type: 'downloadResponse',
+                                        source: 'heatmap',
+                                        error: err.toString()
+                                    }, '*');
+                                });
+                        } else {
+                            window.parent.postMessage({
+                                type: 'downloadResponse',
+                                source: 'heatmap',
+                                error: 'Plot not ready'
+                            }, '*');
+                        }
+                    }
                 });
                 // Request params from parent when Shiny is ready
                 document.addEventListener('shiny:connected', function() {
@@ -438,11 +466,22 @@ def create_app(api_base_url: str = "http://localhost:8000"):
                 ),
             )
 
-            # Convert to HTML
+            # Convert to HTML with download button enabled
             html_content = fig.to_html(
                 full_html=False,
                 include_plotlyjs="cdn",
-                config={"responsive": True},
+                config={
+                    "responsive": True,
+                    "toImageButtonOptions": {
+                        "format": "png",
+                        "filename": "heatmap_view",
+                        "height": 700,
+                        "width": 1200,
+                        "scale": 2
+                    },
+                    "displayModeBar": True,
+                    "modeBarButtonsToAdd": ["toImage"],
+                },
             )
 
             return ui.HTML(html_content)

webapp/app/shiny_apps/silhouette_app.py

@@ -106,6 +106,24 @@ def create_app(api_base_url: str = "http://localhost:8000"):
                             });
                         }
                     }
+                    // Handle download request from parent
+                    if (event.data && event.data.type === 'downloadRequest') {
+                        console.log('[Silhouette] Download requested');
+                        var img = document.querySelector('.plot-container img');
+                        if (img && img.src) {
+                            window.parent.postMessage({
+                                type: 'downloadResponse',
+                                source: 'silhouette',
+                                dataUrl: img.src
+                            }, '*');
+                        } else {
+                            window.parent.postMessage({
+                                type: 'downloadResponse',
+                                source: 'silhouette',
+                                error: 'Image not ready'
+                            }, '*');
+                        }
+                    }
                 });
                 // Request params from parent when Shiny is ready
                 document.addEventListener('shiny:connected', function() {
@@ -407,11 +425,11 @@ def create_app(api_base_url: str = "http://localhost:8000"):
 
             plt.tight_layout()
 
-            # Convert to HTML
+            # Convert to PNG
             import io
             import base64
             buf = io.BytesIO()
-            fig.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+            fig.savefig(buf, format='png', dpi=150, bbox_inches='tight')
             buf.seek(0)
             img_base64 = base64.b64encode(buf.read()).decode('utf-8')
             plt.close(fig)

webapp/static/css/custom.css

@@ -230,3 +230,124 @@ a:focus:not(:focus-visible) {
 #filter-chevron.rotate-180 {
     transform: rotate(180deg);
 }
+
+/* Collapsible panel styles */
+.collapsible-panel {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    overflow: hidden;
+}
+
+.collapsible-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background-color: #f9fafb;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease;
+}
+
+.collapsible-header:hover {
+    background-color: #f3f4f6;
+}
+
+.collapsible-header h3 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+}
+
+.collapsible-chevron {
+    transition: transform 0.2s ease;
+    color: #6b7280;
+}
+
+.collapsible-header.expanded .collapsible-chevron {
+    transform: rotate(180deg);
+}
+
+.collapsible-content {
+    display: none;
+    padding: 16px;
+    border-top: 1px solid #e5e7eb;
+}
+
+.collapsible-content.expanded {
+    display: block;
+}
+
+/* Variant analysis styles */
+.mutation-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.mutation-table th,
+.mutation-table td {
+    padding: 8px 12px;
+    text-align: left;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.mutation-table th {
+    background-color: #f9fafb;
+    font-weight: 600;
+    color: #374151;
+}
+
+.mutation-table tr:hover {
+    background-color: #f9fafb;
+}
+
+.delta-positive {
+    color: #059669;
+    font-weight: 500;
+}
+
+.delta-negative {
+    color: #dc2626;
+    font-weight: 500;
+}
+
+/* Download tab styles */
+.download-checkbox-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    background-color: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.download-checkbox-group label:hover {
+    background-color: #f3f4f6;
+    border-color: #d1d5db;
+}
+
+.download-checkbox-group input[type="checkbox"]:checked + span {
+    color: #2563eb;
+}
+
+/* Loading spinner for variant analysis */
+.variant-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    color: #6b7280;
+}
+
+.variant-loading svg {
+    animation: spin 1s linear infinite;
+    margin-bottom: 12px;
+}

webapp/static/js/result.js

@@ -20,7 +20,7 @@ const forcePlotEl = document.getElementById('force-plot');
 
 // Polling configuration
 const POLL_INTERVAL = 1000; // 1 second
-const MAX_POLLS = 60; // 1 minute max
+const MAX_POLLS = 120; // 2 minutes max (mutagenesis takes ~45 seconds)
 let pollCount = 0;
 
 /**
@@ -59,14 +59,8 @@ function displayResults(data) {
     loadingState.classList.add('hidden');
     resultsContainer.classList.remove('hidden');
 
-    // For batch sequences, hide elements that don't support batch sequence detail
+    // For batch sequences, hide CSV download link (not available for individual batch sequences)
     if (typeof batchIndex !== 'undefined' && batchIndex !== null) {
-        // Hide heatmap tab (shiny app doesn't support batch sequence detail)
-        const heatmapTab = document.getElementById('tab-heatmap');
-        if (heatmapTab) {
-            heatmapTab.classList.add('hidden');
-        }
-        // Hide CSV download link (not available for individual batch sequences)
         const csvLink = document.querySelector('a[href*="/api/export/"]');
         if (csvLink) {
             csvLink.classList.add('hidden');
@@ -251,13 +245,17 @@ async function fetchResult() {
 
         const data = await response.json();
 
-        if (data.status === 'completed') {
+        if (data.status === 'completed' || data.status === 'finished') {
             displayResults(data);
         } else if (data.status === 'failed') {
-            showError(data.error || 'Prediction failed');
-        } else if (data.status === 'pending' || data.status === 'processing') {
-            // Update loading text
-            loadingText.textContent = `Processing... (${pollCount + 1}s)`;
+            showError(data.error || data.error_message || 'Prediction failed');
+        } else if (data.status === 'pending' || data.status === 'processing' || data.status === 'queued' || data.status === 'running') {
+            // Update loading text with progress indication
+            let statusText = 'Processing';
+            if (data.status === 'running') {
+                statusText = pollCount < 5 ? 'Running prediction' : 'Running variant analysis';
+            }
+            loadingText.textContent = `${statusText}... (${pollCount + 1}s)`;
 
             // Continue polling
             pollCount++;

webapp/templates/landing.html

@@ -28,23 +28,18 @@
             </p>
         </a>
 
-        <!-- Mutagenesis - Coming Soon -->
-        <div class="block bg-gray-50 rounded-lg border border-gray-200 p-6 opacity-75 cursor-not-allowed">
-            <div class="flex items-center justify-between mb-4">
-                <div class="flex items-center justify-center w-12 h-12 bg-gray-200 rounded-lg">
-                    <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-                    </svg>
-                </div>
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
-                    Coming Soon
-                </span>
+        <!-- Mutagenesis - Active -->
+        <a href="/mutagenesis" class="block bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-primary-300 transition-all">
+            <div class="flex items-center justify-center w-12 h-12 bg-primary-100 rounded-lg mb-4">
+                <svg class="w-6 h-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                </svg>
             </div>
-            <h3 class="text-lg font-semibold text-gray-500 mb-2">Mutagenesis Prediction</h3>
-            <p class="text-sm text-gray-400">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Mutagenesis Analysis</h3>
+            <p class="text-sm text-gray-600">
                 Analyze how single nucleotide mutations affect splicing outcomes across your sequence.
             </p>
-        </div>
+        </a>
 
         <!-- Exon Comparison - Coming Soon -->
         <div class="block bg-gray-50 rounded-lg border border-gray-200 p-6 opacity-75 cursor-not-allowed">

webapp/templates/result.html

@@ -74,59 +74,251 @@
         <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
             <!-- Tab Navigation -->
             <div class="border-b border-gray-200">
-                <nav class="flex" role="tablist" aria-label="Visualization tabs">
+                <nav class="flex flex-wrap" role="tablist" aria-label="Visualization tabs">
                     <button type="button"
-                            id="tab-silhouette"
+                            id="tab-exon-view"
                             role="tab"
                             aria-selected="true"
-                            aria-controls="panel-silhouette"
+                            aria-controls="panel-exon-view"
                             class="px-6 py-3 text-sm font-medium border-b-2 border-primary-500 text-primary-600 focus:outline-none"
-                            onclick="switchTab('silhouette')">
-                        Silhouette View
+                            onclick="switchTab('exon-view')">
+                        Exon View
                     </button>
                     <button type="button"
-                            id="tab-heatmap"
+                            id="tab-feature-view"
                             role="tab"
                             aria-selected="false"
-                            aria-controls="panel-heatmap"
+                            aria-controls="panel-feature-view"
                             class="px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none"
-                            onclick="switchTab('heatmap')">
-                        Filter Heatmap
+                            onclick="switchTab('feature-view')">
+                        Feature View
+                    </button>
+                    <button type="button"
+                            id="tab-variant-analysis"
+                            role="tab"
+                            aria-selected="false"
+                            aria-controls="panel-variant-analysis"
+                            class="px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none"
+                            onclick="switchTab('variant-analysis')">
+                        Variant Analysis
+                    </button>
+                    <button type="button"
+                            id="tab-download"
+                            role="tab"
+                            aria-selected="false"
+                            aria-controls="panel-download"
+                            class="px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none"
+                            onclick="switchTab('download')">
+                        Download
                     </button>
                 </nav>
             </div>
 
-            <!-- Silhouette Panel -->
-            <div id="panel-silhouette" role="tabpanel" aria-labelledby="tab-silhouette" class="p-6">
+            <!-- Exon View Panel -->
+            <div id="panel-exon-view" role="tabpanel" aria-labelledby="tab-exon-view" class="p-6">
                 <p class="text-sm text-gray-500 mb-4">
-                    Blue = inclusion strength, red = skipping strength per position
+                    Click on a panel to expand it. Use the "Download" tab to export visualizations as PNG.
                 </p>
-                <div id="silhouette-container" class="w-full" style="min-height: 488px;">
-                    <iframe
-                        id="silhouette-iframe"
-                        src="/shiny/silhouette/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
-                        class="w-full border-0"
-                        style="height: 488px; min-height: 450px;"
-                        title="Silhouette View"
-                    ></iframe>
+
+                <!-- Silhouette Collapsible -->
+                <div class="collapsible-panel">
+                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
+                        <h3>Silhouette View</h3>
+                        <svg class="collapsible-chevron w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </div>
+                    <div class="collapsible-content">
+                        <p class="text-sm text-gray-500 mb-4">
+                            Blue = inclusion strength, red = skipping strength per position.
+                        </p>
+                        <div id="silhouette-container" class="w-full" style="min-height: 488px;">
+                            <iframe
+                                id="silhouette-iframe"
+                                src="/shiny/silhouette/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
+                                class="w-full border-0"
+                                style="height: 488px; min-height: 450px;"
+                                title="Silhouette View"
+                            ></iframe>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Heatmap Collapsible -->
+                <div class="collapsible-panel">
+                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
+                        <h3>Heat Map</h3>
+                        <svg class="collapsible-chevron w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </div>
+                    <div class="collapsible-content">
+                        <p class="text-sm text-gray-500 mb-4">
+                            Blue = inclusion, red = skipping, with filter icons.
+                        </p>
+                        <div id="heatmap-container" class="w-full" style="min-height: 675px;">
+                            <iframe
+                                id="heatmap-iframe"
+                                src="/shiny/heatmap/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
+                                class="w-full border-0"
+                                style="height: 675px; min-height: 638px;"
+                                title="Filter Activation Heatmap"
+                            ></iframe>
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <!-- Heatmap Panel (hidden by default) -->
-            <div id="panel-heatmap" role="tabpanel" aria-labelledby="tab-heatmap" class="p-6 hidden">
+            <!-- Feature View Panel -->
+            <div id="panel-feature-view" role="tabpanel" aria-labelledby="tab-feature-view" class="p-6 hidden">
+                <div class="mb-4">
+                    <label for="feature-selector" class="block text-sm font-medium text-gray-700 mb-2">Select Feature Filter</label>
+                    <select id="feature-selector" class="w-full max-w-md px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
+                        <option value="">Loading filters...</option>
+                    </select>
+                </div>
                 <p class="text-sm text-gray-500 mb-4">
-                    Blue = inclusion, red = skipping, with filter icons
+                    Select a feature to view its individual contribution across all positions
                 </p>
-                <div id="heatmap-container" class="w-full" style="min-height: 675px;">
+                <div id="feature-silhouette-container" class="w-full" style="min-height: 488px;">
                     <iframe
-                        id="heatmap-iframe"
-                        data-src="/shiny/heatmap/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
+                        id="feature-silhouette-iframe"
+                        src="/shiny/silhouette/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
                         class="w-full border-0"
-                        style="height: 675px; min-height: 638px;"
-                        title="Filter Activation Heatmap"
+                        style="height: 488px; min-height: 450px;"
+                        title="Feature Silhouette View"
                     ></iframe>
                 </div>
             </div>
+
+            <!-- Variant Analysis Panel -->
+            <div id="panel-variant-analysis" role="tabpanel" aria-labelledby="tab-variant-analysis" class="p-6 hidden">
+                <div id="variant-loading" class="variant-loading">
+                    <svg class="h-10 w-10 text-primary-600" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <p>Loading variant analysis...</p>
+                </div>
+
+                <div id="variant-not-run" class="hidden text-center py-8">
+                    <svg class="h-12 w-12 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                    </svg>
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Variant Analysis Not Run</h3>
+                    <p class="text-gray-500 mb-4">Run variant analysis to see how single-point mutations affect PSI prediction.</p>
+                    <button onclick="runVariantAnalysis()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">
+                        <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                        Run Variant Analysis
+                    </button>
+                    <p class="text-xs text-gray-400 mt-2">This will analyze 210 mutations and may take ~45 seconds</p>
+                </div>
+
+                <div id="variant-content" class="hidden">
+                    <!-- Summary Cards -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                        <div class="bg-gray-50 rounded-lg p-4">
+                            <p class="text-sm text-gray-500">Reference PSI</p>
+                            <p id="variant-ref-psi" class="text-2xl font-bold text-gray-900">-</p>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-4">
+                            <p class="text-sm text-gray-500">Total Mutations</p>
+                            <p id="variant-total-mutations" class="text-2xl font-bold text-gray-900">210</p>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-4">
+                            <p class="text-sm text-gray-500">Max |ΔPSI|</p>
+                            <p id="variant-max-delta" class="text-2xl font-bold text-gray-900">-</p>
+                        </div>
+                    </div>
+
+                    <!-- Top Mutations -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                        <div>
+                            <h4 class="text-sm font-semibold text-green-700 mb-3">Top Inclusion-Promoting Mutations</h4>
+                            <div id="top-positive-mutations" class="space-y-2"></div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-red-700 mb-3">Top Skipping-Promoting Mutations</h4>
+                            <div id="top-negative-mutations" class="space-y-2"></div>
+                        </div>
+                    </div>
+
+                    <!-- Variant Heatmap -->
+                    <div class="mb-6">
+                        <h4 class="text-sm font-semibold text-gray-700 mb-3">Variant Effect Heatmap</h4>
+                        <p class="text-xs text-gray-500 mb-3">Shows ΔPSI for each possible single-nucleotide mutation. Gray cells indicate the reference nucleotide.</p>
+                        <div id="variant-heatmap" style="min-height: 200px;"></div>
+                    </div>
+
+                    <!-- Mutations Table -->
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <h4 class="text-sm font-semibold text-gray-700">All Mutations</h4>
+                            <input type="text" id="mutation-search" placeholder="Search mutations..." class="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500">
+                        </div>
+                        <div class="overflow-x-auto max-h-96 overflow-y-auto">
+                            <table class="mutation-table">
+                                <thead class="sticky top-0">
+                                    <tr>
+                                        <th class="cursor-pointer" onclick="sortMutationTable('position')">Position</th>
+                                        <th class="cursor-pointer" onclick="sortMutationTable('mutation_label')">Mutation</th>
+                                        <th class="cursor-pointer" onclick="sortMutationTable('psi')">PSI</th>
+                                        <th class="cursor-pointer" onclick="sortMutationTable('delta_psi')">ΔPSI</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="mutations-table-body">
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Download Panel -->
+            <div id="panel-download" role="tabpanel" aria-labelledby="tab-download" class="p-6 hidden">
+                <h3 class="text-lg font-medium text-gray-900 mb-4">Export Visualizations</h3>
+                <p class="text-sm text-gray-500 mb-6">Select the visualizations you want to download as PNG images.</p>
+
+                <div class="download-checkbox-group mb-6">
+                    <label>
+                        <input type="checkbox" id="download-silhouette" value="silhouette" checked>
+                        <span>Silhouette View</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" id="download-heatmap" value="heatmap" checked>
+                        <span>Filter Heat Map</span>
+                    </label>
+                    <label id="download-variant-option" class="hidden">
+                        <input type="checkbox" id="download-variant" value="variant">
+                        <span>Variant Effect Heatmap</span>
+                    </label>
+                </div>
+
+                <div class="flex gap-3">
+                    <button id="download-btn" onclick="downloadSelectedVisualizations()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">
+                        <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                        </svg>
+                        Download Selected (PNG)
+                    </button>
+                </div>
+
+                <p id="download-status" class="text-sm text-gray-500 mt-4 hidden"></p>
+
+                <!-- CSV Export -->
+                <div class="mt-6 pt-6 border-t border-gray-200">
+                    <h4 class="text-sm font-semibold text-gray-700 mb-3">Data Export</h4>
+                    <p class="text-sm text-gray-500 mb-3">Download prediction results as CSV:</p>
+                    <a href="/api/export/{{ job_id }}/csv" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                        <svg class="mr-2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                        </svg>
+                        Download CSV
+                    </a>
+                </div>
+            </div>
         </div>
 
         <!-- Actions -->
@@ -169,30 +361,39 @@
 {% endblock %}
 
 {% block scripts %}
+<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
 <script>
     const jobId = "{{ job_id }}";
     const batchIndex = {{ batch_index if batch_index is defined and batch_index is not none else 'null' }};
 
     // Tab state
-    let activeTab = 'silhouette';
-    let loadedTabs = new Set(['silhouette']);
+    let activeTab = 'exon-view';
+    let variantDataLoaded = false;
+    let variantData = null;
+    let mutationSortColumn = 'position';
+    let mutationSortAsc = true;
+
+    // Available filters for feature view
+    const availableFilters = [
+        'incl_AG1', 'incl_AG2', 'incl_AG3', 'incl_M1', 'incl_M2', 'incl_M3',
+        'skip_AG', 'skip_M1', 'skip_M2', 'skip_M3', 'skip_M4',
+        'incl_struct', 'skip_struct_ALL'
+    ];
 
     function switchTab(tabName) {
         if (tabName === activeTab) return;
 
-        const tabs = ['silhouette', 'heatmap'];
+        const tabs = ['exon-view', 'feature-view', 'variant-analysis', 'download'];
         tabs.forEach(tab => {
             const button = document.getElementById(`tab-${tab}`);
             const panel = document.getElementById(`panel-${tab}`);
 
             if (tab === tabName) {
-                // Activate
                 button.classList.remove('border-transparent', 'text-gray-500');
                 button.classList.add('border-primary-500', 'text-primary-600');
                 button.setAttribute('aria-selected', 'true');
                 panel.classList.remove('hidden');
             } else {
-                // Deactivate
                 button.classList.add('border-transparent', 'text-gray-500');
                 button.classList.remove('border-primary-500', 'text-primary-600');
                 button.setAttribute('aria-selected', 'false');
@@ -202,33 +403,28 @@
 
         activeTab = tabName;
 
-        // Lazy load iframe if not yet loaded
-        if (!loadedTabs.has(tabName)) {
-            const iframe = document.getElementById(`${tabName}-iframe`);
-            console.log(`[Result] Lazy loading ${tabName} iframe:`, iframe);
-            if (iframe && iframe.dataset.src) {
-                console.log(`[Result] Setting ${tabName} iframe src to:`, iframe.dataset.src);
-                iframe.src = iframe.dataset.src;
-                iframe.onload = function() {
-                    console.log(`[Result] ${tabName} iframe loaded, sending params...`);
-                    setTimeout(function() { sendParamsToIframe(iframe); }, 500);
-                };
-                iframe.onerror = function(e) {
-                    console.error(`[Result] ${tabName} iframe error:`, e);
-                };
-            }
-            loadedTabs.add(tabName);
+        // Load variant analysis data when tab is first opened
+        if (tabName === 'variant-analysis' && !variantDataLoaded) {
+            loadVariantAnalysis();
         }
     }
 
+    // Collapsible panel toggle
+    function toggleCollapsible(header) {
+        header.classList.toggle('expanded');
+        const content = header.nextElementSibling;
+        content.classList.toggle('expanded');
+    }
+
     // Send params to PyShiny iframes via postMessage
-    function sendParamsToIframe(iframe) {
+    function sendParamsToIframe(iframe, filter = null) {
         if (iframe && iframe.contentWindow) {
-            console.log('[Result] Sending params to iframe:', jobId, batchIndex);
+            console.log('[Result] Sending params to iframe:', jobId, batchIndex, filter);
             iframe.contentWindow.postMessage({
                 type: 'setParams',
                 job_id: jobId,
-                batch_index: batchIndex
+                batch_index: batchIndex,
+                filter: filter
             }, '*');
         }
     }
@@ -237,7 +433,6 @@
     window.addEventListener('message', function(event) {
         if (event.data && event.data.type === 'ready') {
             console.log('[Result] Received ready from:', event.data.source);
-            // Send params back to the iframe that signaled ready
             if (event.source) {
                 event.source.postMessage({
                     type: 'setParams',
@@ -248,17 +443,440 @@
         }
     });
 
-    // Also send on iframe load (backup) - only for silhouette initially
-    // Heatmap iframe will be set up when its tab is clicked (lazy loading)
+    // Initialize feature selector
+    function initFeatureSelector() {
+        const selector = document.getElementById('feature-selector');
+        selector.innerHTML = '<option value="">All Filters</option>';
+        availableFilters.forEach(filter => {
+            const option = document.createElement('option');
+            option.value = filter;
+            option.textContent = filter.replace(/_/g, ' ');
+            selector.appendChild(option);
+        });
+
+        selector.addEventListener('change', function() {
+            const featureIframe = document.getElementById('feature-silhouette-iframe');
+            sendParamsToIframe(featureIframe, this.value || null);
+        });
+    }
+
+    // Load variant analysis data
+    async function loadVariantAnalysis() {
+        const loading = document.getElementById('variant-loading');
+        const notRun = document.getElementById('variant-not-run');
+        const content = document.getElementById('variant-content');
+
+        loading.classList.remove('hidden');
+        notRun.classList.add('hidden');
+        content.classList.add('hidden');
+
+        try {
+            const url = batchIndex !== null
+                ? `/api/result/${jobId}/mutagenesis?batch_index=${batchIndex}`
+                : `/api/result/${jobId}/mutagenesis`;
+
+            const response = await fetch(url);
+            const data = await response.json();
+
+            if (data.status === 'not_run') {
+                loading.classList.add('hidden');
+                notRun.classList.remove('hidden');
+                return;
+            }
+
+            variantData = data;
+            variantDataLoaded = true;
+            displayVariantAnalysis(data);
+
+            loading.classList.add('hidden');
+            content.classList.remove('hidden');
+
+            // Show variant download option in Download tab
+            document.getElementById('download-variant-option').classList.remove('hidden');
+
+        } catch (error) {
+            console.error('Error loading variant analysis:', error);
+            loading.classList.add('hidden');
+            notRun.classList.remove('hidden');
+        }
+    }
+
+    // Run variant analysis on demand
+    async function runVariantAnalysis() {
+        const loading = document.getElementById('variant-loading');
+        const notRun = document.getElementById('variant-not-run');
+        const content = document.getElementById('variant-content');
+
+        loading.classList.remove('hidden');
+        notRun.classList.add('hidden');
+        loading.querySelector('p').textContent = 'Running variant analysis (this may take ~45 seconds)...';
+
+        try {
+            const url = batchIndex !== null
+                ? `/api/result/${jobId}/mutagenesis?batch_index=${batchIndex}`
+                : `/api/result/${jobId}/mutagenesis`;
+
+            const response = await fetch(url, { method: 'POST' });
+            const data = await response.json();
+
+            variantData = data;
+            variantDataLoaded = true;
+            displayVariantAnalysis(data);
+
+            loading.classList.add('hidden');
+            content.classList.remove('hidden');
+
+            // Show variant download option in Download tab
+            document.getElementById('download-variant-option').classList.remove('hidden');
+
+        } catch (error) {
+            console.error('Error running variant analysis:', error);
+            loading.classList.add('hidden');
+            notRun.classList.remove('hidden');
+            alert('Failed to run variant analysis. Please try again.');
+        }
+    }
+
+    // Display variant analysis results
+    function displayVariantAnalysis(data) {
+        // Summary
+        document.getElementById('variant-ref-psi').textContent = data.reference_psi?.toFixed(3) || '-';
+        document.getElementById('variant-total-mutations').textContent = data.total_mutations || 210;
+
+        // Calculate max delta
+        const maxDelta = data.mutations?.reduce((max, m) => {
+            const delta = Math.abs(m.delta_psi || 0);
+            return delta > max ? delta : max;
+        }, 0) || 0;
+        document.getElementById('variant-max-delta').textContent = maxDelta.toFixed(3);
+
+        // Top positive mutations
+        const topPositive = document.getElementById('top-positive-mutations');
+        topPositive.innerHTML = (data.top_positive || []).slice(0, 5).map(m => `
+            <div class="flex justify-between items-center p-2 bg-green-50 rounded text-sm">
+                <span class="font-mono">${m.mutation_label}</span>
+                <span class="delta-positive">+${m.delta_psi?.toFixed(3) || '0.000'}</span>
+            </div>
+        `).join('');
+
+        // Top negative mutations
+        const topNegative = document.getElementById('top-negative-mutations');
+        topNegative.innerHTML = (data.top_negative || []).slice(0, 5).map(m => `
+            <div class="flex justify-between items-center p-2 bg-red-50 rounded text-sm">
+                <span class="font-mono">${m.mutation_label}</span>
+                <span class="delta-negative">${m.delta_psi?.toFixed(3) || '0.000'}</span>
+            </div>
+        `).join('');
+
+        // Render heatmap
+        renderVariantHeatmap(data.heatmap_data);
+
+        // Populate mutations table
+        populateMutationsTable(data.mutations || []);
+
+        // Set up search
+        document.getElementById('mutation-search').addEventListener('input', function() {
+            filterMutationsTable(this.value);
+        });
+    }
+
+    // Download state
+    let pendingDownloads = {};
+    let downloadResults = {};
+
+    // Listen for download responses from iframes
+    window.addEventListener('message', function(event) {
+        if (event.data && event.data.type === 'downloadResponse') {
+            const source = event.data.source;
+            console.log('[Download] Received response from:', source);
+            downloadResults[source] = event.data;
+
+            // Check if all pending downloads are complete
+            checkDownloadsComplete();
+        }
+    });
+
+    // Request download from an iframe
+    function requestIframeDownload(iframeId, source) {
+        const iframe = document.getElementById(iframeId);
+        if (iframe && iframe.contentWindow) {
+            pendingDownloads[source] = true;
+            iframe.contentWindow.postMessage({ type: 'downloadRequest' }, '*');
+        }
+    }
+
+    // Check if all downloads are complete and trigger save
+    function checkDownloadsComplete() {
+        const pendingKeys = Object.keys(pendingDownloads);
+        const completedKeys = Object.keys(downloadResults);
+
+        if (pendingKeys.every(key => completedKeys.includes(key))) {
+            // All downloads complete
+            saveDownloadedFiles();
+        }
+    }
+
+    // Save downloaded files
+    function saveDownloadedFiles() {
+        const files = [];
+
+        for (const [source, result] of Object.entries(downloadResults)) {
+            if (result.dataUrl && !result.error) {
+                files.push({
+                    name: `${source}_${jobId}.png`,
+                    dataUrl: result.dataUrl
+                });
+            }
+        }
+
+        // Reset state
+        pendingDownloads = {};
+        downloadResults = {};
+
+        // Update UI
+        const btn = document.getElementById('download-btn');
+        const status = document.getElementById('download-status');
+        btn.disabled = false;
+        btn.innerHTML = `<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>Download Selected (PNG)`;
+
+        if (files.length === 0) {
+            status.textContent = 'No visualizations could be downloaded. Make sure the visualizations have loaded.';
+            status.classList.remove('hidden');
+            return;
+        }
+
+        // Download files
+        files.forEach((file, index) => {
+            setTimeout(() => {
+                const link = document.createElement('a');
+                link.href = file.dataUrl;
+                link.download = file.name;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }, index * 500); // Stagger downloads
+        });
+
+        status.textContent = `Downloaded ${files.length} file(s).`;
+        status.classList.remove('hidden');
+        setTimeout(() => status.classList.add('hidden'), 3000);
+    }
+
+    // Download selected visualizations
+    function downloadSelectedVisualizations() {
+        const checkboxes = document.querySelectorAll('.download-checkbox-group input[type="checkbox"]:checked');
+        const selected = Array.from(checkboxes).map(cb => cb.value);
+
+        if (selected.length === 0) {
+            alert('Please select at least one visualization to download.');
+            return;
+        }
+
+        // Reset state
+        pendingDownloads = {};
+        downloadResults = {};
+
+        // Update UI
+        const btn = document.getElementById('download-btn');
+        const status = document.getElementById('download-status');
+        btn.disabled = true;
+        btn.innerHTML = `<svg class="animate-spin mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>Preparing...`;
+        status.classList.add('hidden');
+
+        // Request downloads
+        if (selected.includes('silhouette')) {
+            requestIframeDownload('silhouette-iframe', 'silhouette');
+        }
+        if (selected.includes('heatmap')) {
+            requestIframeDownload('heatmap-iframe', 'heatmap');
+        }
+        if (selected.includes('variant')) {
+            // Variant heatmap is on the same page, capture directly
+            const plotDiv = document.getElementById('variant-heatmap');
+            if (plotDiv && plotDiv.data) {
+                Plotly.toImage(plotDiv, { format: 'png', width: 1400, height: 300, scale: 2 })
+                    .then(dataUrl => {
+                        downloadResults['variant'] = { dataUrl: dataUrl };
+                        pendingDownloads['variant'] = true;
+                        checkDownloadsComplete();
+                    });
+                pendingDownloads['variant'] = true;
+            }
+        }
+
+        // Timeout after 10 seconds
+        setTimeout(() => {
+            if (Object.keys(pendingDownloads).length > Object.keys(downloadResults).length) {
+                saveDownloadedFiles(); // Save what we have
+            }
+        }, 10000);
+    }
+
+    // Download variant heatmap as PNG (standalone)
+    function downloadVariantHeatmap() {
+        const plotDiv = document.getElementById('variant-heatmap');
+        if (plotDiv && plotDiv.data) {
+            Plotly.downloadImage(plotDiv, {
+                format: 'png',
+                width: 1400,
+                height: 300,
+                filename: `variant_heatmap_${jobId}`
+            });
+        } else {
+            alert('Variant heatmap not available. Please run variant analysis first.');
+        }
+    }
+
+    // Render variant effect heatmap using Plotly
+    function renderVariantHeatmap(heatmapData) {
+        if (!heatmapData) return;
+
+        const nucleotides = ['T', 'G', 'C', 'A'];
+        const positions = heatmapData.positions || Array.from({length: 70}, (_, i) => i + 1);
+
+        // Build z-values matrix (4 rows for A, C, G, T mutations TO)
+        const zValues = nucleotides.map(nt => heatmapData.delta_matrix[nt] || []);
+
+        // Custom text for hover
+        const hoverText = nucleotides.map((toNt, rowIdx) =>
+            positions.map((pos, colIdx) => {
+                const delta = zValues[rowIdx][colIdx];
+                if (delta === null) return `Pos ${pos}: Reference (${toNt})`;
+                return `Pos ${pos}: →${toNt}<br>ΔPSI: ${delta?.toFixed(3) || 'N/A'}`;
+            })
+        );
+
+        // Find max absolute value for symmetric color scale
+        const allValues = zValues.flat().filter(v => v !== null);
+        const maxAbs = Math.max(...allValues.map(Math.abs), 0.01);
+
+        const trace = {
+            z: zValues,
+            x: positions,
+            y: nucleotides,
+            type: 'heatmap',
+            colorscale: [
+                [0, '#dc2626'],
+                [0.5, '#ffffff'],
+                [1, '#2563eb']
+            ],
+            zmin: -maxAbs,
+            zmax: maxAbs,
+            text: hoverText,
+            hovertemplate: '%{text}<extra></extra>',
+            colorbar: {
+                title: 'ΔPSI',
+                titleside: 'right'
+            }
+        };
+
+        const layout = {
+            margin: { t: 40, r: 60, b: 40, l: 40 },
+            xaxis: {
+                title: 'Position',
+                tickmode: 'linear',
+                dtick: 5
+            },
+            yaxis: {
+                title: 'Mutation To',
+                tickfont: { family: 'monospace' }
+            },
+            height: 200
+        };
+
+        Plotly.newPlot('variant-heatmap', [trace], layout, { responsive: true });
+    }
+
+    // Populate mutations table
+    function populateMutationsTable(mutations) {
+        const tbody = document.getElementById('mutations-table-body');
+        tbody.innerHTML = mutations.map(m => `
+            <tr data-position="${m.position}" data-label="${m.mutation_label}" data-psi="${m.psi || 0}" data-delta="${m.delta_psi || 0}">
+                <td>${m.position}</td>
+                <td class="font-mono">${m.mutation_label}</td>
+                <td>${m.psi?.toFixed(3) || '-'}</td>
+                <td class="${(m.delta_psi || 0) > 0 ? 'delta-positive' : (m.delta_psi || 0) < 0 ? 'delta-negative' : ''}">${m.delta_psi?.toFixed(3) || '-'}</td>
+            </tr>
+        `).join('');
+    }
+
+    // Sort mutations table
+    function sortMutationTable(column) {
+        if (mutationSortColumn === column) {
+            mutationSortAsc = !mutationSortAsc;
+        } else {
+            mutationSortColumn = column;
+            mutationSortAsc = true;
+        }
+
+        const tbody = document.getElementById('mutations-table-body');
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+
+        rows.sort((a, b) => {
+            let aVal, bVal;
+            if (column === 'position') {
+                aVal = parseInt(a.dataset.position);
+                bVal = parseInt(b.dataset.position);
+            } else if (column === 'mutation_label') {
+                aVal = a.dataset.label;
+                bVal = b.dataset.label;
+            } else if (column === 'psi') {
+                aVal = parseFloat(a.dataset.psi);
+                bVal = parseFloat(b.dataset.psi);
+            } else if (column === 'delta_psi') {
+                aVal = parseFloat(a.dataset.delta);
+                bVal = parseFloat(b.dataset.delta);
+            }
+
+            if (typeof aVal === 'string') {
+                return mutationSortAsc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+            }
+            return mutationSortAsc ? aVal - bVal : bVal - aVal;
+        });
+
+        rows.forEach(row => tbody.appendChild(row));
+    }
+
+    // Filter mutations table
+    function filterMutationsTable(search) {
+        const tbody = document.getElementById('mutations-table-body');
+        const rows = tbody.querySelectorAll('tr');
+        const searchLower = search.toLowerCase();
+
+        rows.forEach(row => {
+            const label = row.dataset.label.toLowerCase();
+            const position = row.dataset.position;
+            const visible = label.includes(searchLower) || position.includes(searchLower);
+            row.style.display = visible ? '' : 'none';
+        });
+    }
+
+    // Set up iframe onload handlers
     document.addEventListener('DOMContentLoaded', function() {
         const silhouetteIframe = document.getElementById('silhouette-iframe');
+        const heatmapIframe = document.getElementById('heatmap-iframe');
+        const featureIframe = document.getElementById('feature-silhouette-iframe');
 
         if (silhouetteIframe) {
             silhouetteIframe.onload = function() {
-                // Small delay to ensure Shiny is ready
                 setTimeout(function() { sendParamsToIframe(silhouetteIframe); }, 500);
             };
         }
+
+        if (heatmapIframe) {
+            heatmapIframe.onload = function() {
+                setTimeout(function() { sendParamsToIframe(heatmapIframe); }, 500);
+            };
+        }
+
+        if (featureIframe) {
+            featureIframe.onload = function() {
+                setTimeout(function() { sendParamsToIframe(featureIframe); }, 500);
+            };
+        }
+
+        // Initialize feature selector
+        initFeatureSelector();
     });
 </script>
 <script src="/static/js/result.js"></script>