Add pagination to regions table in result modal (10 rows per page)

static/css/style.css

@@ -768,6 +768,49 @@ input:focus, select:focus, textarea:focus {
 .regions-table tr:hover td { background: rgba(46, 51, 197, 0.04); }
 .regions-table tr.region-hover td { background: rgba(255, 255, 0, 0.12); }
 .regions-table td:nth-child(2) { color: var(--text); font-weight: 500; }
+
+/* ---- Pagination ---- */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.75rem 0 0.25rem;
+  flex-wrap: wrap;
+}
+.pagination button {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-card);
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.pagination button:hover:not(:disabled) {
+  background: rgba(46, 51, 197, 0.08);
+  border-color: rgba(46, 51, 197, 0.3);
+  color: var(--text);
+}
+.pagination button.active {
+  background: linear-gradient(135deg, #2e33c5, #cf2040);
+  color: #fff;
+  border-color: transparent;
+  font-weight: 600;
+}
+.pagination button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.pagination .page-info {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin: 0 0.5rem;
+}
+
 .severity-badge {
   display: inline-block;
   padding: 0.15rem 0.5rem;

static/js/app.js

@@ -374,6 +374,10 @@ function formatCompact(n) {
 
 // Store current result for zoom and region hover (bbox in % for overlay)
 let currentResultData = null;
+let _regionRows = [];       // all region <tr> elements for pagination
+let _regionList = [];        // matching data objects
+const REGIONS_PER_PAGE = 10;
+let _regionPage = 0;
 
 function showResult(data) {
   const modal = document.getElementById('result-modal');
@@ -428,9 +432,9 @@ function showResult(data) {
   beforeImg.onload = onReady;
   setTimeout(() => { resetCompareSlider(); resetZoom(); }, 500);
 
-  tbody.innerHTML = '';
-  const regions = (data.regions || []).slice(0, 50);
-  regions.forEach((r) => {
+  const regions = (data.regions || []).slice(0, 60);
+  _regionList = regions;
+  _regionRows = regions.map((r) => {
     const tr = document.createElement('tr');
     tr.dataset.regionId = r.id;
     const subType = r.subType || '—';
@@ -451,13 +455,65 @@ function showResult(data) {
       <td>${height}</td>
       <td>${stage}</td>
     `;
-    tbody.appendChild(tr);
+    return tr;
   });
 
-  setupRegionHover(tbody, regions);
+  _regionPage = 0;
+  renderRegionPage();
   openResultModal();
 }
 
+function renderRegionPage() {
+  const tbody = document.getElementById('regions-tbody');
+  const pag = document.getElementById('regions-pagination');
+  if (!tbody) return;
+
+  const totalPages = Math.max(1, Math.ceil(_regionRows.length / REGIONS_PER_PAGE));
+  _regionPage = Math.max(0, Math.min(_regionPage, totalPages - 1));
+  const start = _regionPage * REGIONS_PER_PAGE;
+  const pageRows = _regionRows.slice(start, start + REGIONS_PER_PAGE);
+  const pageData = _regionList.slice(start, start + REGIONS_PER_PAGE);
+
+  tbody.innerHTML = '';
+  pageRows.forEach((tr) => tbody.appendChild(tr));
+  setupRegionHover(tbody, pageData);
+
+  if (pag) {
+    pag.innerHTML = '';
+    if (totalPages <= 1) return;
+
+    const prev = document.createElement('button');
+    prev.textContent = '‹';
+    prev.disabled = _regionPage === 0;
+    prev.addEventListener('click', () => { _regionPage--; renderRegionPage(); });
+    pag.appendChild(prev);
+
+    const maxButtons = 7;
+    let rangeStart = Math.max(0, _regionPage - Math.floor(maxButtons / 2));
+    let rangeEnd = Math.min(totalPages, rangeStart + maxButtons);
+    if (rangeEnd - rangeStart < maxButtons) rangeStart = Math.max(0, rangeEnd - maxButtons);
+
+    for (let i = rangeStart; i < rangeEnd; i++) {
+      const btn = document.createElement('button');
+      btn.textContent = i + 1;
+      if (i === _regionPage) btn.classList.add('active');
+      btn.addEventListener('click', () => { _regionPage = i; renderRegionPage(); });
+      pag.appendChild(btn);
+    }
+
+    const next = document.createElement('button');
+    next.textContent = '›';
+    next.disabled = _regionPage >= totalPages - 1;
+    next.addEventListener('click', () => { _regionPage++; renderRegionPage(); });
+    pag.appendChild(next);
+
+    const info = document.createElement('span');
+    info.className = 'page-info';
+    info.textContent = `${start + 1}–${Math.min(start + REGIONS_PER_PAGE, _regionRows.length)} of ${_regionRows.length}`;
+    pag.appendChild(info);
+  }
+}
+
 function openResultModal() {
   const modal = document.getElementById('result-modal');
   if (!modal) return;

templates/index.html

@@ -329,6 +329,7 @@
           </thead>
           <tbody id="regions-tbody"></tbody>
         </table>
+        <div class="pagination" id="regions-pagination"></div>
       </div>
     </div>
   </div>
@@ -345,6 +346,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=21"></script>
+  <script src="/static/js/app.js?v=22"></script>
 </body>
 </html>