refactor: replace batch result modal with full results page navigation

- Change row click to navigate to /batch/{job_id}/sequence/{index}
- Remove unused modal HTML from batch_result.html
- Remove modal-related JS functions (showDetail, closeDetailModal, interpretPsi, createForcePlot)
- Update cache-busting version to v=3

webapp/static/js/batch-result.js

@@ -20,12 +20,6 @@ const jobTitleEl = document.getElementById('job-title');
 const resultsTableBody = document.getElementById('results-table-body');
 const searchInput = document.getElementById('search-results');
 
-// Stats elements
-const statTotal = document.getElementById('stat-total');
-const statSuccess = document.getElementById('stat-success');
-const statInvalid = document.getElementById('stat-invalid');
-const statAvgPsi = document.getElementById('stat-avg-psi');
-
 // Pagination elements
 const pageStart = document.getElementById('page-start');
 const pageEnd = document.getElementById('page-end');
@@ -148,9 +142,6 @@ async function loadResults() {
 
         const data = await response.json();
 
-        // Update stats
-        updateStats(data);
-
         // Update table
         totalResults = data.total;
         totalPages = data.total_pages;
@@ -167,21 +158,6 @@ async function loadResults() {
     }
 }
 
-/**
- * Update stats display
- */
-function updateStats(data) {
-    statTotal.textContent = data.total_sequences || 0;
-    statSuccess.textContent = data.successful_count || 0;
-    statInvalid.textContent = data.invalid_count || 0;
-
-    if (data.average_psi !== null && data.average_psi !== undefined) {
-        statAvgPsi.textContent = data.average_psi.toFixed(3);
-    } else {
-        statAvgPsi.textContent = '-';
-    }
-}
-
 /**
  * Render results table
  */
@@ -191,7 +167,9 @@ function renderResults(results) {
     for (const result of results) {
         const row = document.createElement('tr');
         row.className = 'hover:bg-gray-50 cursor-pointer';
-        row.onclick = () => showDetail(result.index);
+        row.onclick = () => {
+            window.location.href = `/batch/${jobId}/sequence/${result.index}`;
+        };
 
         const statusBadge = getStatusBadge(result.status);
         const psiDisplay = result.status === 'success' && result.psi !== null
@@ -320,228 +298,6 @@ function renderPagination() {
     pageButtons.appendChild(nextBtn);
 }
 
-/**
- * Show sequence detail modal
- */
-async function showDetail(index) {
-    const modal = document.getElementById('detail-modal');
-    const detailTitle = document.getElementById('detail-title');
-    const detailContent = document.getElementById('detail-content');
-    const detailLoading = document.getElementById('detail-loading');
-
-    // Show modal with loading
-    modal.classList.remove('hidden');
-    detailLoading.classList.remove('hidden');
-    detailContent.innerHTML = '';
-    detailContent.appendChild(detailLoading);
-
-    try {
-        const response = await fetch(`/api/batch/${jobId}/sequence/${index}`, {
-            cache: 'no-store'
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.detail || 'Failed to load sequence details');
-        }
-
-        const data = await response.json();
-        detailLoading.classList.add('hidden');
-
-        // Update title
-        detailTitle.textContent = data.name || `Sequence ${index + 1}`;
-
-        // Build detail content
-        let html = '';
-
-        if (data.status === 'invalid') {
-            // Show invalid sequence info
-            html = `
-                <div class="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
-                    <svg class="h-12 w-12 text-red-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <h4 class="mt-4 text-lg font-medium text-red-800">Invalid Sequence</h4>
-                    <p class="mt-2 text-red-700">${escapeHtml(data.validation_error || 'Sequence validation failed')}</p>
-                </div>
-                <div class="bg-gray-50 rounded-lg p-4">
-                    <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Sequence</h4>
-                    <p class="font-mono text-sm text-gray-900 break-all">${escapeHtml(data.sequence)}</p>
-                </div>
-            `;
-        } else {
-            // Show successful prediction details
-            const psi = data.psi;
-            const interp = interpretPsi(psi);
-
-            html = `
-                <!-- PSI Value -->
-                <div class="rounded-lg p-6 text-center ${interp.colorClass}">
-                    <p class="text-sm font-medium text-gray-500 uppercase tracking-wide">Predicted PSI</p>
-                    <p class="mt-2 text-4xl font-bold ${interp.textClass}">${psi.toFixed(3)}</p>
-                    <p class="mt-2 text-sm ${interp.textClass}">${interp.text}: ${interp.description}</p>
-                </div>
-
-                <!-- Info Grid -->
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div class="bg-gray-50 rounded-lg p-4">
-                        <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">RNA Secondary Structure</h4>
-                        <p class="font-mono text-sm text-gray-900 break-all">${escapeHtml(data.structure || 'N/A')}</p>
-                    </div>
-                    <div class="bg-gray-50 rounded-lg p-4">
-                        <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Minimum Free Energy</h4>
-                        <p class="text-2xl font-bold text-gray-900">${data.mfe ? data.mfe.toFixed(2) : 'N/A'} <span class="text-base font-normal text-gray-500">kcal/mol</span></p>
-                    </div>
-                </div>
-
-                <!-- Sequence -->
-                <div class="bg-gray-50 rounded-lg p-4">
-                    <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Sequence</h4>
-                    <p class="font-mono text-sm text-gray-900 break-all">${escapeHtml(data.sequence)}</p>
-                </div>
-
-                <!-- Force Plot -->
-                <div class="bg-white rounded-lg border border-gray-200 p-4">
-                    <h4 class="text-sm font-medium text-gray-500 uppercase mb-4">
-                        Position-wise Contribution to PSI
-                        <span class="ml-2 text-gray-400 font-normal normal-case">
-                            (green = promotes inclusion, red = promotes skipping)
-                        </span>
-                    </h4>
-                    <div id="detail-force-plot" class="w-full" style="height: 350px;"></div>
-                </div>
-            `;
-        }
-
-        detailContent.innerHTML = html;
-
-        // Create force plot if we have data
-        if (data.status === 'success' && data.force_plot_data && data.force_plot_data.length > 0) {
-            setTimeout(() => createForcePlot('detail-force-plot', data.force_plot_data), 100);
-        }
-
-    } catch (error) {
-        console.error('Error loading detail:', error);
-        detailLoading.classList.add('hidden');
-        detailContent.innerHTML = `
-            <div class="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
-                <p class="text-red-700">${escapeHtml(error.message)}</p>
-            </div>
-        `;
-    }
-}
-
-/**
- * Close detail modal
- */
-function closeDetailModal() {
-    document.getElementById('detail-modal').classList.add('hidden');
-}
-
-// Close modal on escape key
-document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-        closeDetailModal();
-    }
-});
-
-// Close modal on backdrop click
-document.getElementById('detail-modal').addEventListener('click', (e) => {
-    if (e.target === e.currentTarget) {
-        closeDetailModal();
-    }
-});
-
-/**
- * Interpret PSI value
- */
-function interpretPsi(psi) {
-    if (psi >= 0.8) {
-        return {
-            text: 'High Inclusion',
-            description: 'This exon is predicted to be included in most transcripts.',
-            colorClass: 'bg-green-50 border border-green-200',
-            textClass: 'text-green-600'
-        };
-    } else if (psi >= 0.3) {
-        return {
-            text: 'Variable/Regulated',
-            description: 'This exon shows intermediate inclusion, suggesting regulation.',
-            colorClass: 'bg-yellow-50 border border-yellow-200',
-            textClass: 'text-yellow-600'
-        };
-    } else {
-        return {
-            text: 'High Skipping',
-            description: 'This exon is predicted to be skipped in most transcripts.',
-            colorClass: 'bg-red-50 border border-red-200',
-            textClass: 'text-red-600'
-        };
-    }
-}
-
-/**
- * Create force plot using Plotly
- */
-function createForcePlot(elementId, forceData) {
-    const element = document.getElementById(elementId);
-    if (!element) return;
-
-    const positions = Array.from({ length: forceData.length }, (_, i) => i + 1);
-    const colors = forceData.map(v => v >= 0 ? 'rgba(34, 197, 94, 0.8)' : 'rgba(239, 68, 68, 0.8)');
-
-    const trace = {
-        x: positions,
-        y: forceData,
-        type: 'bar',
-        marker: { color: colors },
-        hovertemplate: 'Position %{x}<br>Contribution: %{y:.4f}<extra></extra>'
-    };
-
-    const layout = {
-        margin: { t: 20, r: 20, b: 50, l: 50 },
-        xaxis: {
-            title: { text: 'Position', font: { size: 11 } },
-            tickmode: 'linear',
-            dtick: 10,
-            range: [0, 91]
-        },
-        yaxis: {
-            title: { text: 'Contribution to PSI', font: { size: 11 } },
-            zeroline: true,
-            zerolinecolor: '#888',
-            zerolinewidth: 1
-        },
-        shapes: [{
-            type: 'rect',
-            xref: 'x',
-            yref: 'paper',
-            x0: 10.5,
-            x1: 80.5,
-            y0: 0,
-            y1: 1,
-            fillcolor: 'rgba(59, 130, 246, 0.05)',
-            line: { width: 0 }
-        }],
-        annotations: [
-            { x: 5, y: 1.05, xref: 'x', yref: 'paper', text: "5' flank", showarrow: false, font: { size: 9, color: '#888' } },
-            { x: 45, y: 1.05, xref: 'x', yref: 'paper', text: 'Exon', showarrow: false, font: { size: 9, color: '#3b82f6' } },
-            { x: 85, y: 1.05, xref: 'x', yref: 'paper', text: "3' flank", showarrow: false, font: { size: 9, color: '#888' } }
-        ],
-        paper_bgcolor: 'rgba(0,0,0,0)',
-        plot_bgcolor: 'rgba(0,0,0,0)',
-        font: { family: 'system-ui, -apple-system, sans-serif' }
-    };
-
-    const config = {
-        responsive: true,
-        displayModeBar: true,
-        modeBarButtonsToRemove: ['lasso2d', 'select2d'],
-        displaylogo: false
-    };
-
-    Plotly.newPlot(element, [trace], layout, config);
-}
 
 /**
  * Show error state
@@ -673,8 +429,6 @@ function restoreNameDisplay(parent, index, name) {
 
 // Make functions available globally
 window.copyLink = copyLink;
-window.closeDetailModal = closeDetailModal;
-window.showDetail = showDetail;
 window.startEditName = startEditName;
 window.handleEditKeydown = handleEditKeydown;
 window.handleEditBlur = handleEditBlur;

webapp/templates/batch_result.html

@@ -48,26 +48,6 @@
 
     <!-- Results Container (hidden initially) -->
     <div id="results-container" class="hidden space-y-6">
-        <!-- Summary Stats -->
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
-                <p class="text-sm font-medium text-gray-500">Total Sequences</p>
-                <p id="stat-total" class="mt-1 text-2xl font-bold text-gray-900">0</p>
-            </div>
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
-                <p class="text-sm font-medium text-gray-500">Successful</p>
-                <p id="stat-success" class="mt-1 text-2xl font-bold text-green-600">0</p>
-            </div>
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
-                <p class="text-sm font-medium text-gray-500">Invalid</p>
-                <p id="stat-invalid" class="mt-1 text-2xl font-bold text-red-600">0</p>
-            </div>
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
-                <p class="text-sm font-medium text-gray-500">Average PSI</p>
-                <p id="stat-avg-psi" class="mt-1 text-2xl font-bold text-primary-600">-</p>
-            </div>
-        </div>
-
         <!-- Search and Export -->
         <div class="flex flex-wrap gap-4 items-center justify-between">
             <div class="flex-1 min-w-[200px] max-w-md">
@@ -139,34 +119,11 @@
     </div>
 </div>
 
-<!-- Detail Modal -->
-<div id="detail-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-    <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
-        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
-            <h3 id="detail-title" class="text-lg font-medium text-gray-900">Sequence Details</h3>
-            <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-500">
-                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-            </button>
-        </div>
-        <div id="detail-content" class="p-6 space-y-6">
-            <!-- Loading spinner for detail -->
-            <div id="detail-loading" class="text-center py-8">
-                <svg class="animate-spin h-8 w-8 text-primary-600 mx-auto" 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>
-            </div>
-            <!-- Detail will be populated here -->
-        </div>
-    </div>
-</div>
 {% endblock %}
 
 {% block scripts %}
 <script>
     const jobId = "{{ job_id }}";
 </script>
-<script src="/static/js/batch-result.js"></script>
+<script src="/static/js/batch-result.js?v=3"></script>
 {% endblock %}