History table view, zoom, severity markers, row hover highlight, before/after thumbnails

app/detection_engine.py

@@ -418,11 +418,42 @@ def _clean_mask(mask, sensitivity=0.5):
 
 
 # ---------------------------------------------------------------------------
-# 9. Improved visualization
+# 9. Severity classification and improved visualization
 # ---------------------------------------------------------------------------
 
-def visualize_changes(img1, img2, change_mask, regions=None):
-    """Overlay change mask on 'after' image in RED."""
+def _severity_from_region(region, total_pixels):
+    """
+    Classify change severity from area and confidence.
+    Green = minor, Yellow = moderate, Red = major.
+    Used for color-coded bounding boxes and table summary.
+    """
+    area = region.get("area", 0)
+    confidence = region.get("confidence", 0.0)
+    if total_pixels <= 0:
+        return "minor"
+    area_ratio = area / total_pixels
+    # Combined score: larger area and higher confidence -> more severe
+    score = area_ratio * 500 + confidence * 2
+    if score < 0.5:
+        return "minor"
+    if score < 1.2:
+        return "moderate"
+    return "major"
+
+
+# BGR colors for severity (OpenCV uses BGR)
+_SEVERITY_COLORS = {
+    "minor": (0, 200, 0),      # Green
+    "moderate": (0, 255, 255), # Yellow
+    "major": (0, 0, 255),      # Red
+}
+
+
+def visualize_changes(img1, img2, change_mask, regions=None, total_pixels=None):
+    """
+    Overlay change mask on 'after' image; draw color-coded bounding boxes
+    by severity (green=minor, yellow=moderate, red=major) and numbered labels.
+    """
     if img1.shape != img2.shape:
         img2 = cv2.resize(img2, (img1.shape[1], img1.shape[0]))
     if change_mask.shape[:2] != img2.shape[:2]:
@@ -432,44 +463,35 @@ def visualize_changes(img1, img2, change_mask, regions=None):
     mask_bool = change_mask > 127
     mask_float = mask_bool.astype(np.float32)
 
-    # Red overlay for all detected changes
+    # Red overlay for all detected change pixels
     red_layer = np.zeros_like(img2, dtype=np.float32)
-    red_layer[:, :, 0] = 255  # pure red
+    red_layer[:, :, 0] = 255
     alpha = 0.50
     for c in range(3):
         overlay[:, :, c] = overlay[:, :, c] * (1 - mask_float * alpha) + red_layer[:, :, c] * mask_float * alpha
 
-    # Draw outlines and labels for each region
+    total_px = total_pixels if total_pixels is not None else (img2.shape[0] * img2.shape[1])
+
     if regions:
         overlay_uint8 = np.clip(overlay, 0, 255).astype(np.uint8)
         for r in regions:
             x, y, w, h = r["bbox"]
-            cv2.rectangle(overlay_uint8, (x, y), (x + w, y + h), (255, 255, 255), 1)
-
-            # Build annotation label from sub-type and 3D info
-            parts = []
-            sub = r.get("sub_type")
-            if sub:
-                parts.append(sub)
-            stories = r.get("estimated_stories")
-            stage = r.get("construction_stage")
-            if stories is not None:
-                parts.append(f"{stories}F")
-            if stage and stage != "Unknown":
-                parts.append(stage)
-
-            if parts:
-                label = " | ".join(parts)
-                font = cv2.FONT_HERSHEY_SIMPLEX
-                font_scale = max(0.30, min(0.50, w / 220))
-                thickness = 1
-                (tw, th), _ = cv2.getTextSize(label, font, font_scale, thickness)
-                lx = x
-                ly = max(th + 4, y - 6)
-                cv2.rectangle(overlay_uint8, (lx, ly - th - 4), (lx + tw + 6, ly + 2),
-                              (0, 0, 0), cv2.FILLED)
-                cv2.putText(overlay_uint8, label, (lx + 3, ly - 2), font,
-                            font_scale, (255, 255, 255), thickness, cv2.LINE_AA)
+            severity = r.get("severity") or _severity_from_region(r, total_px)
+            color = _SEVERITY_COLORS.get(severity, (255, 255, 255))
+
+            # Color-coded bounding box (thicker for visibility)
+            cv2.rectangle(overlay_uint8, (x, y), (x + w, y + h), color, 2)
+
+            # Numbered label matching summary table (region ID)
+            rid = r.get("id", 0)
+            label = str(rid)
+            font = cv2.FONT_HERSHEY_SIMPLEX
+            font_scale = max(0.4, min(0.7, w / 150))
+            thickness = 2
+            (tw, th), _ = cv2.getTextSize(label, font, font_scale, thickness)
+            lx, ly = x, max(th + 4, y - 4)
+            cv2.rectangle(overlay_uint8, (lx, ly - th - 4), (lx + tw + 8, ly + 2), (0, 0, 0), cv2.FILLED)
+            cv2.putText(overlay_uint8, label, (lx + 4, ly - 2), font, font_scale, (255, 255, 255), thickness, cv2.LINE_AA)
         return overlay_uint8
 
     return np.clip(overlay, 0, 255).astype(np.uint8)
@@ -1413,6 +1435,12 @@ def analyze_change_regions(change_mask, image, min_area=200, use_ensemble=True,
         change_regions.append(region)
 
     change_regions.sort(key=lambda r: r["area"], reverse=True)
+
+    # Assign severity for color-coded display and table summary
+    total_px = change_mask.shape[0] * change_mask.shape[1]
+    for r in change_regions:
+        r["severity"] = _severity_from_region(r, total_px)
+
     return change_regions
 
 
@@ -1444,9 +1472,11 @@ def run_detection(before_pil, after_pil, method="AI-Based Deep Learning",
         change_mask, after_array, min_area=200, before_img=before_array
     )
 
-    result_image = visualize_changes(before_array, after_array, change_mask, regions=change_regions)
-
     total_pixels = int(change_mask.shape[0] * change_mask.shape[1])
+    result_image = visualize_changes(
+        before_array, after_array, change_mask,
+        regions=change_regions, total_pixels=total_pixels
+    )
     changed_pixels = int(np.sum(change_mask > 127))
     change_pct = (changed_pixels / total_pixels * 100.0) if total_pixels else 0.0
 

app/main.py

@@ -33,8 +33,12 @@ Base.metadata.create_all(bind=engine, checkfirst=True)
 
 # Lightweight migration: add columns introduced after initial schema
 with engine.connect() as conn:
-    for col, col_type in [("zone", "VARCHAR(128) DEFAULT ''"),
-                          ("village", "VARCHAR(128) DEFAULT ''")]:
+    for col, col_type in [
+        ("zone", "VARCHAR(128) DEFAULT ''"),
+        ("village", "VARCHAR(128) DEFAULT ''"),
+        ("before_thumb_path", "VARCHAR(512) DEFAULT ''"),
+        ("after_thumb_path", "VARCHAR(512) DEFAULT ''"),
+    ]:
         try:
             conn.execute(sa_text(
                 f"ALTER TABLE detection_runs ADD COLUMN {col} {col_type}"))
@@ -49,6 +53,7 @@ STATIC_DIR = Path(__file__).resolve().parent.parent / "static"
 TEMPLATES_DIR = Path(__file__).resolve().parent.parent / "templates"
 OVERLAYS_DIR = DATA_DIR / "overlays"
 OVERLAYS_DIR.mkdir(parents=True, exist_ok=True)
+THUMB_MAX_SIZE = 200  # max width or height for history thumbnails
 
 if STATIC_DIR.exists():
     app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
@@ -208,11 +213,25 @@ async def detect(
     change_mask, result_image, stats, change_regions = run_detection(
         before_pil, after_pil, method=method, enable_registration=enable_registration, enable_normalization=enable_normalization
     )
-    # Save overlay to disk and store path (optional)
-    overlay_filename = f"{user.id}_{uuid.uuid4().hex}.png"
+    # Save overlay and thumbnails for history table view
+    base_name = f"{user.id}_{uuid.uuid4().hex}"
+    overlay_filename = base_name + ".png"
     overlay_path = OVERLAYS_DIR / overlay_filename
     Image.fromarray(result_image).save(overlay_path)
     relative_overlay = f"overlays/{overlay_filename}"
+
+    # Save before/after thumbnails for history table (efficient small images)
+    before_thumb_file = OVERLAYS_DIR / f"{base_name}_before_thumb.png"
+    after_thumb_file = OVERLAYS_DIR / f"{base_name}_after_thumb.png"
+    before_thumb_pil = before_pil.copy()
+    before_thumb_pil.thumbnail((THUMB_MAX_SIZE, THUMB_MAX_SIZE), Image.Resampling.LANCZOS)
+    before_thumb_pil.save(before_thumb_file)
+    after_thumb_pil = after_pil.copy()
+    after_thumb_pil.thumbnail((THUMB_MAX_SIZE, THUMB_MAX_SIZE), Image.Resampling.LANCZOS)
+    after_thumb_pil.save(after_thumb_file)
+    relative_before_thumb = f"overlays/{base_name}_before_thumb.png"
+    relative_after_thumb = f"overlays/{base_name}_after_thumb.png"
+
     regions_serializable = [
         {
             "id": int(r["id"]),
@@ -221,6 +240,7 @@ async def detect(
             "bbox": {"x": int(r["bbox"][0]), "y": int(r["bbox"][1]), "w": int(r["bbox"][2]), "h": int(r["bbox"][3])},
             "objectType": str(r["object_type"]),
             "confidence": float(r["confidence"]),
+            "severity": r.get("severity", "minor"),
             "subType": r.get("sub_type"),
             "subTypeConfidence": float(r["sub_type_confidence"]) if r.get("sub_type_confidence") is not None else None,
             "estimatedStories": r.get("estimated_stories"),
@@ -244,6 +264,8 @@ async def detect(
         change_percentage=change_pct,
         regions_count=len(change_regions),
         overlay_path=relative_overlay,
+        before_thumb_path=relative_before_thumb,
+        after_thumb_path=relative_after_thumb,
         regions_json=json.dumps(regions_serializable),
     )
     db.add(run)
@@ -285,6 +307,8 @@ async def detect(
         "regions": regions_serializable,
         "overlayBase64Png": overlay_b64,
         "overlayUrl": f"/api/overlay/{relative_overlay}",
+        "beforeThumbUrl": f"/api/overlay/{relative_before_thumb}",
+        "afterThumbUrl": f"/api/overlay/{relative_after_thumb}",
         "notificationSent": notification_sent,
         "createdAt": run.created_at.isoformat(),
     }
@@ -322,13 +346,50 @@ def history(
             "village": r.village or "",
             "changePercentage": r.change_percentage,
             "regionsCount": r.regions_count,
+            "totalPixels": r.total_pixels,
+            "changedPixels": r.changed_pixels,
             "overlayUrl": f"/api/overlay/{r.overlay_path}" if r.overlay_path else None,
+            "beforeThumbUrl": f"/api/overlay/{r.before_thumb_path}" if (getattr(r, "before_thumb_path", None) or "").strip() else None,
+            "afterThumbUrl": f"/api/overlay/{r.after_thumb_path}" if (getattr(r, "after_thumb_path", None) or "").strip() else None,
             "createdAt": r.created_at.isoformat(),
         }
         for r in runs
     ]
 
 
+@app.get("/api/history/{run_id}")
+def get_run(
+    run_id: int,
+    user: Optional[User] = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    """Fetch a single run by id for opening from history (result view with slider, table, zoom)."""
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    run = db.query(DetectionRun).filter(DetectionRun.id == run_id, DetectionRun.user_id == user.id).first()
+    if not run:
+        raise HTTPException(status_code=404, detail="Run not found")
+    regions = json.loads(run.regions_json) if run.regions_json else []
+    return {
+        "id": run.id,
+        "title": run.title,
+        "method": run.method,
+        "zone": run.zone or "",
+        "village": run.village or "",
+        "statistics": {
+            "totalPixels": run.total_pixels,
+            "changedPixels": run.changed_pixels,
+            "unchangedPixels": run.total_pixels - run.changed_pixels,
+            "changePercentage": run.change_percentage,
+        },
+        "regions": regions,
+        "overlayUrl": f"/api/overlay/{run.overlay_path}" if run.overlay_path else None,
+        "beforeThumbUrl": f"/api/overlay/{run.before_thumb_path}" if (getattr(run, "before_thumb_path", None) or "").strip() else None,
+        "afterThumbUrl": f"/api/overlay/{run.after_thumb_path}" if (getattr(run, "after_thumb_path", None) or "").strip() else None,
+        "createdAt": run.created_at.isoformat(),
+    }
+
+
 # --- Delete history run ---
 @app.delete("/api/history/{run_id}")
 def delete_run(
@@ -341,11 +402,13 @@ def delete_run(
     run = db.query(DetectionRun).filter(DetectionRun.id == run_id, DetectionRun.user_id == user.id).first()
     if not run:
         raise HTTPException(status_code=404, detail="Run not found")
-    # Delete overlay file if it exists
-    if run.overlay_path:
-        overlay_file = OVERLAYS_DIR.parent / run.overlay_path
-        if overlay_file.exists():
-            overlay_file.unlink(missing_ok=True)
+    # Delete overlay and thumbnail files if they exist
+    for path_attr in ("overlay_path", "before_thumb_path", "after_thumb_path"):
+        path_val = getattr(run, path_attr, None)
+        if path_val:
+            f = OVERLAYS_DIR.parent / path_val
+            if f.exists():
+                f.unlink(missing_ok=True)
     db.delete(run)
     db.commit()
     return {"ok": True, "deleted_id": run_id}

app/models.py

@@ -28,7 +28,9 @@ class DetectionRun(Base):
     changed_pixels = Column(Integer, nullable=False)
     change_percentage = Column(Float, nullable=False)
     regions_count = Column(Integer, default=0)
-    overlay_path = Column(String(512), default="")  # optional: path to saved overlay image
+    overlay_path = Column(String(512), default="")
+    before_thumb_path = Column(String(512), default="")
+    after_thumb_path = Column(String(512), default="")
     zone = Column(String(128), default="")
     village = Column(String(128), default="")
     regions_json = Column(Text, default="[]")  # JSON list of regions

static/css/style.css

@@ -594,6 +594,61 @@ input:focus, select:focus, textarea:focus {
   .stat-box-wide { grid-column: span 1; }
 }
 
+/* ---- Zoom + compare slider ---- */
+.zoom-slider-section { margin-bottom: 1rem; }
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.btn-zoom {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text);
+  transition: all var(--transition);
+}
+.btn-zoom:hover {
+  border-color: var(--grad-start);
+  color: var(--grad-start);
+  background: var(--bg-hover);
+}
+.zoom-level {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  min-width: 3.5rem;
+  text-align: center;
+}
+.zoom-wrapper {
+  overflow: auto;
+  max-height: 70vh;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  margin-top: 0.75rem;
+}
+.zoom-wrapper .compare-slider { min-height: 280px; margin-top: 0; }
+.region-highlight-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  pointer-events: none;
+  z-index: 5;
+}
+.region-highlight-overlay .highlight-box {
+  position: absolute;
+  border: 3px solid rgba(255,255,0,0.9);
+  background: rgba(255,255,0,0.15);
+  box-shadow: 0 0 12px rgba(255,255,0,0.5);
+  border-radius: 2px;
+  transition: opacity 0.15s ease;
+}
+
 /* ---- Compare slider ---- */
 .compare-slider {
   position: relative;
@@ -711,10 +766,63 @@ input:focus, select:focus, textarea:focus {
 }
 .regions-table td { color: var(--text-muted); }
 .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; }
+.severity-badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.severity-badge.minor { background: rgba(0, 200, 0, 0.2); color: #0a6b0a; }
+.severity-badge.moderate { background: rgba(255, 200, 0, 0.25); color: #8b6914; }
+.severity-badge.major { background: rgba(255, 0, 0, 0.2); color: #b91c1c; }
 
-/* ---- History ---- */
-.history-list { display: flex; flex-direction: column; gap: 0.5rem; }
+/* ---- History table ---- */
+.history-table-wrap { overflow-x: auto; margin-top: 0.5rem; }
+.history-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+.history-table th, .history-table td {
+  padding: 0.5rem 0.6rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+.history-table th {
+  color: var(--text-dim);
+  font-weight: 600;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--bg-elevated);
+  text-align: left;
+}
+.history-table tbody tr {
+  cursor: pointer;
+  transition: background var(--transition);
+}
+.history-table tbody tr:hover {
+  background: var(--bg-hover);
+}
+.history-table .thumb-cell {
+  width: 64px;
+  padding: 0.35rem;
+}
+.history-table .thumb-cell img {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border);
+  display: block;
+}
+.history-table .stats-cell { white-space: nowrap; color: var(--text-muted); font-size: 0.8rem; }
+.history-table .actions-cell { white-space: nowrap; }
+.history-table .actions-cell button { margin-left: 0.25rem; }
 .history-empty {
   text-align: center;
   color: var(--text-dim);

static/js/app.js

@@ -371,11 +371,16 @@ function formatCompact(n) {
   return n.toLocaleString();
 }
 
+// Store current result for zoom and region hover (bbox in % for overlay)
+let currentResultData = null;
+
 function showResult(data) {
   const card = document.getElementById('result-card');
   const statsEl = document.getElementById('result-stats');
   const tbody = document.getElementById('regions-tbody');
 
+  currentResultData = data;
+
   const locParts = [data.village, data.zone].filter(Boolean);
   const locLabel = locParts.length ? locParts.join(', ') : '—';
 
@@ -389,40 +394,90 @@ function showResult(data) {
 
   const beforeImg = document.getElementById('compare-before-img');
   const afterImg = document.getElementById('compare-after-img');
-  const beforeFile = document.getElementById('file-before').files?.[0];
-  if (beforeFile) readFileAsDataURL(beforeFile).then((url) => { beforeImg.src = url; });
-
-  afterImg.src = data.overlayBase64Png
-    ? 'data:image/png;base64,' + data.overlayBase64Png
-    : (data.overlayUrl || '');
+  if (data.overlayBase64Png) {
+    afterImg.src = 'data:image/png;base64,' + data.overlayBase64Png;
+    const beforeFile = document.getElementById('file-before').files?.[0];
+    if (beforeFile) readFileAsDataURL(beforeFile).then((url) => { beforeImg.src = url; });
+  } else {
+    afterImg.src = data.overlayUrl || '';
+    beforeImg.src = data.beforeThumbUrl || data.overlayUrl || '';
+  }
 
   resetCompareSlider();
+  resetZoom();
 
   tbody.innerHTML = '';
-  (data.regions || []).slice(0, 50).forEach((r) => {
+  const regions = (data.regions || []).slice(0, 50);
+  regions.forEach((r) => {
     const tr = document.createElement('tr');
+    tr.dataset.regionId = r.id;
     const subType = r.subType || '—';
+    const severity = (r.severity || 'minor').toLowerCase();
     const stories = r.estimatedStories != null ? r.estimatedStories : '—';
     const height = r.estimatedHeightM != null ? r.estimatedHeightM + ' m' : '—';
     const stage = r.constructionStage && r.constructionStage !== 'Unknown' ? r.constructionStage : '—';
+    const coords = `(${r.center.x}, ${r.center.y})`;
     tr.innerHTML = `
       <td>${r.id}</td>
       <td>${r.objectType}</td>
       <td>${subType}</td>
+      <td><span class="severity-badge ${severity}">${severity}</span></td>
       <td>${(r.confidence * 100).toFixed(1)}%</td>
       <td>${r.area.toLocaleString()}</td>
+      <td>${coords}</td>
       <td>${stories}</td>
       <td>${height}</td>
       <td>${stage}</td>
-      <td>(${r.center.x}, ${r.center.y})</td>
     `;
     tbody.appendChild(tr);
   });
 
+  setupRegionHover(tbody, regions);
   card.classList.remove('hidden');
   card.scrollIntoView({ behavior: 'smooth' });
 }
 
+function setupRegionHover(tbody, regions) {
+  const overlay = document.getElementById('region-highlight-overlay');
+  if (!overlay) return;
+  overlay.innerHTML = '';
+  tbody.querySelectorAll('tr[data-region-id]').forEach((tr) => {
+    tr.addEventListener('mouseenter', () => {
+      const id = parseInt(tr.dataset.regionId, 10);
+      const r = regions.find((x) => x.id === id);
+      if (!r || !r.bbox) return;
+      tbody.querySelectorAll('tr').forEach((row) => row.classList.remove('region-hover'));
+      tr.classList.add('region-hover');
+      const box = document.createElement('div');
+      box.className = 'highlight-box';
+      const imgEl = document.getElementById('compare-after-img');
+      if (!imgEl || !imgEl.offsetWidth) return;
+      const slider = document.getElementById('compare-slider');
+      if (!slider) return;
+      const rw = slider.offsetWidth;
+      const rh = slider.offsetHeight;
+      const imgW = imgEl.naturalWidth || 1;
+      const imgH = imgEl.naturalHeight || 1;
+      const scaleX = rw / imgW;
+      const scaleY = rh / imgH;
+      const scale = Math.min(scaleX, scaleY);
+      const drawW = imgW * scale;
+      const drawH = imgH * scale;
+      const offsetX = (rw - drawW) / 2;
+      const offsetY = (rh - drawH) / 2;
+      box.style.left = (offsetX + r.bbox.x * scale) + 'px';
+      box.style.top = (offsetY + r.bbox.y * scale) + 'px';
+      box.style.width = (r.bbox.w * scale) + 'px';
+      box.style.height = (r.bbox.h * scale) + 'px';
+      overlay.appendChild(box);
+    });
+    tr.addEventListener('mouseleave', () => {
+      tr.classList.remove('region-hover');
+      overlay.innerHTML = '';
+    });
+  });
+}
+
 // ---- Compare slider ----
 function initCompareSlider() {
   const slider = document.getElementById('compare-slider');
@@ -452,40 +507,107 @@ function resetCompareSlider() {
   if (h) h.style.left = '50%';
 }
 
+// ---- Zoom (result and history view) ----
+let currentZoom = 1;
+const ZOOM_MIN = 0.5;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.25;
+
+function applyZoom() {
+  const slider = document.getElementById('compare-slider');
+  const levelEl = document.getElementById('zoom-level');
+  if (!slider) return;
+  slider.style.transform = `scale(${currentZoom})`;
+  slider.style.transformOrigin = 'center top';
+  if (levelEl) levelEl.textContent = Math.round(currentZoom * 100) + '%';
+}
+
+function resetZoom() {
+  currentZoom = 1;
+  applyZoom();
+}
+
+function initZoom() {
+  const zoomIn = document.getElementById('zoom-in');
+  const zoomOut = document.getElementById('zoom-out');
+  const wrapper = document.getElementById('zoom-wrapper');
+  if (zoomIn) zoomIn.addEventListener('click', () => {
+    currentZoom = Math.min(ZOOM_MAX, currentZoom + ZOOM_STEP);
+    applyZoom();
+  });
+  if (zoomOut) zoomOut.addEventListener('click', () => {
+    currentZoom = Math.max(ZOOM_MIN, currentZoom - ZOOM_STEP);
+    applyZoom();
+  });
+  if (wrapper) {
+    wrapper.addEventListener('wheel', (e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      if (e.deltaY < 0) currentZoom = Math.min(ZOOM_MAX, currentZoom + ZOOM_STEP);
+      else currentZoom = Math.max(ZOOM_MIN, currentZoom - ZOOM_STEP);
+      applyZoom();
+    }, { passive: false });
+  }
+}
+initZoom();
+
 initCompareSlider();
 
-// ---- History with delete ----
+// ---- History table: load and row click to open result ----
 async function loadHistory() {
-  const list = document.getElementById('history-list');
-  if (!list) return;
+  const tbody = document.getElementById('history-tbody');
+  const emptyEl = document.getElementById('history-empty');
+  const tableWrap = document.querySelector('.history-table-wrap');
+  if (!tbody) return;
   try {
     const items = await api('GET', '/api/history');
     if (!items || items.length === 0) {
-      list.innerHTML = '<div class="history-empty">No detection runs yet. Upload images above to get started.</div>';
+      if (tableWrap) tableWrap.classList.add('hidden');
+      if (emptyEl) { emptyEl.classList.remove('hidden'); emptyEl.textContent = 'No detection runs yet. Upload images above to get started.'; }
       return;
     }
-    list.innerHTML = items.map((r) => {
-      const loc = [r.village, r.zone].filter(Boolean).join(', ');
+    if (tableWrap) tableWrap.classList.remove('hidden');
+    if (emptyEl) emptyEl.classList.add('hidden');
+    tbody.innerHTML = items.map((r) => {
+      const beforeThumb = r.beforeThumbUrl ? `<img src="${r.beforeThumbUrl}" alt="Before" loading="lazy" />` : '<span class="dim">—</span>';
+      const afterThumb = r.afterThumbUrl ? `<img src="${r.afterThumbUrl}" alt="After" loading="lazy" />` : '<span class="dim">—</span>';
+      const resultThumb = r.overlayUrl ? `<img src="${r.overlayUrl}" alt="Result" loading="lazy" />` : '<span class="dim">—</span>';
       return `
-      <div class="history-item" data-id="${r.id}">
-        <div class="history-info">
-          <div class="history-title">${escapeHtml(r.title)}</div>
-          <div class="history-meta">
-            <span class="tag">${r.method}</span>
-            ${loc ? `<span class="tag tag-loc">${escapeHtml(loc)}</span>` : ''}
-            ${r.changePercentage.toFixed(2)}% changed &middot; ${r.regionsCount} regions &middot; ${formatDate(r.createdAt)}
-          </div>
-        </div>
-        <div class="history-actions">
-          ${r.overlayUrl ? `<a href="${r.overlayUrl}" target="_blank" class="btn btn-secondary btn-sm">View</a>` : ''}
-          <button class="btn-icon" title="Delete this run" onclick="confirmDelete(${r.id})">
+      <tr data-run-id="${r.id}">
+        <td class="timestamp-cell">${formatDate(r.createdAt)}</td>
+        <td class="thumb-cell">${beforeThumb}</td>
+        <td class="thumb-cell">${afterThumb}</td>
+        <td class="thumb-cell">${resultThumb}</td>
+        <td class="stats-cell">${r.regionsCount} regions</td>
+        <td class="stats-cell">${r.changePercentage.toFixed(2)}%</td>
+        <td class="actions-cell">
+          ${r.overlayUrl ? `<a href="${r.overlayUrl}" target="_blank" class="btn btn-secondary btn-sm" onclick="event.stopPropagation()">View</a>` : ''}
+          <button type="button" class="btn-icon" title="Delete" onclick="event.stopPropagation(); confirmDelete(${r.id})">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
           </button>
-        </div>
-      </div>`;
+        </td>
+      </tr>`;
     }).join('');
+
+    tbody.querySelectorAll('tr[data-run-id]').forEach((tr) => {
+      tr.addEventListener('click', (e) => {
+        if (e.target.closest('.actions-cell')) return;
+        const id = parseInt(tr.dataset.runId, 10);
+        openRunFromHistory(id);
+      });
+    });
   } catch (_) {
-    list.innerHTML = '<div class="history-empty">Could not load history.</div>';
+    if (tableWrap) tableWrap.classList.add('hidden');
+    if (emptyEl) { emptyEl.classList.remove('hidden'); emptyEl.textContent = 'Could not load history.'; }
+  }
+}
+
+async function openRunFromHistory(runId) {
+  try {
+    const data = await api('GET', '/api/history/' + runId);
+    showResult(data);
+  } catch (err) {
+    showError('dashboard-error', err.message || 'Failed to load run.');
   }
 }
 
@@ -515,13 +637,11 @@ document.getElementById('modal-confirm')?.addEventListener('click', async () =>
   pendingDeleteId = null;
   try {
     await api('DELETE', `/api/history/${id}`);
-    // Animate removal
-    const item = document.querySelector(`.history-item[data-id="${id}"]`);
-    if (item) {
-      item.style.transition = 'all 0.3s ease';
-      item.style.opacity = '0';
-      item.style.transform = 'translateX(20px)';
-      setTimeout(() => { item.remove(); loadHistory(); }, 300);
+    const row = document.querySelector(`tr[data-run-id="${id}"]`);
+    if (row) {
+      row.style.transition = 'all 0.3s ease';
+      row.style.opacity = '0';
+      setTimeout(() => loadHistory(), 300);
     } else {
       loadHistory();
     }

templates/index.html

@@ -151,11 +151,11 @@
       <div id="dashboard-error" class="alert alert-error hidden"></div>
       <div id="dashboard-success" class="alert alert-success hidden"></div>
 
-      <!-- New run card -->
-      <div class="card">
+      <!-- Section 1: Upload / Detection -->
+      <div class="card section-upload">
         <div class="card-header">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--grad-start)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-          <h3>New Detection Run</h3>
+          <h3>Upload / Detection</h3>
         </div>
         <form id="form-detect">
           <div class="location-row">
@@ -241,33 +241,45 @@
         </form>
       </div>
 
-      <!-- Result card (shown after a run) -->
+      <!-- Section 2: Result View -->
       <div class="card hidden" id="result-card">
         <div class="card-header">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--grad-start)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-          <h3>Detection Result</h3>
+          <h3>Result View</h3>
         </div>
         <div class="result-stats" id="result-stats"></div>
 
-        <!-- Before / After comparison slider -->
-        <div class="compare-slider" id="compare-slider">
-          <div class="compare-before">
-            <img id="compare-before-img" alt="Before" draggable="false" />
-            <span class="compare-label compare-label-left">Before</span>
+        <!-- Zoom controls + Before/After slider -->
+        <div class="zoom-slider-section">
+          <div class="zoom-controls">
+            <button type="button" class="btn btn-zoom" id="zoom-out" title="Zoom out" aria-label="Zoom out">−</button>
+            <span class="zoom-level" id="zoom-level">100%</span>
+            <button type="button" class="btn btn-zoom" id="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
           </div>
-          <div class="compare-after" id="compare-after-clip">
-            <img id="compare-after-img" alt="Changes detected" draggable="false" />
-            <span class="compare-label compare-label-right">Changes</span>
-          </div>
-          <div class="compare-handle" id="compare-handle">
-            <div class="compare-handle-line"></div>
-            <div class="compare-handle-knob">
-              <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 10l4-5v10z" fill="currentColor"/><path d="M14 10l-4-5v10z" fill="currentColor"/></svg>
+          <div class="zoom-wrapper" id="zoom-wrapper">
+            <div class="compare-slider compare-slider-zoomed" id="compare-slider">
+              <div class="compare-before">
+                <img id="compare-before-img" alt="Before" draggable="false" />
+                <span class="compare-label compare-label-left">Before</span>
+              </div>
+              <div class="compare-after" id="compare-after-clip">
+                <img id="compare-after-img" alt="Changes detected" draggable="false" />
+                <span class="compare-label compare-label-right">Changes</span>
+              </div>
+              <div class="compare-handle" id="compare-handle">
+                <div class="compare-handle-line"></div>
+                <div class="compare-handle-knob">
+                  <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 10l4-5v10z" fill="currentColor"/><path d="M14 10l-4-5v10z" fill="currentColor"/></svg>
+                </div>
+                <div class="compare-handle-line"></div>
+              </div>
+              <!-- Overlay for highlighting region on table row hover -->
+              <div class="region-highlight-overlay" id="region-highlight-overlay"></div>
             </div>
-            <div class="compare-handle-line"></div>
           </div>
         </div>
 
+        <!-- Tabular change summary: hover row highlights box on image -->
         <div class="regions-table-wrap">
           <table class="regions-table" id="regions-table">
             <thead>
@@ -275,12 +287,13 @@
                 <th>#</th>
                 <th>Change Type</th>
                 <th>Sub-Type</th>
+                <th>Severity</th>
                 <th>Confidence</th>
                 <th>Area (px)</th>
+                <th>Coordinates</th>
                 <th>Stories</th>
                 <th>Height</th>
                 <th>Stage</th>
-                <th>Center</th>
               </tr>
             </thead>
             <tbody id="regions-tbody"></tbody>
@@ -288,13 +301,29 @@
         </div>
       </div>
 
-      <!-- History -->
-      <div class="card mt-2">
+      <!-- Section 3: History View (tabular, click row to open result) -->
+      <div class="card mt-2 section-history">
         <div class="card-header">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--grad-start)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-          <h3>History</h3>
+          <h3>History View</h3>
+        </div>
+        <div class="history-table-wrap">
+          <table class="history-table" id="history-table">
+            <thead>
+              <tr>
+                <th>Timestamp</th>
+                <th>Before</th>
+                <th>After</th>
+                <th>Result</th>
+                <th>Regions</th>
+                <th>% Change</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody id="history-tbody"></tbody>
+          </table>
         </div>
-        <div id="history-list" class="history-list"></div>
+        <div id="history-empty" class="history-empty hidden">No detection runs yet. Upload images above to get started.</div>
       </div>
 
     </section>
@@ -312,6 +341,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=15"></script>
+  <script src="/static/js/app.js?v=16"></script>
 </body>
 </html>