Add compare tab tree sidebar, fix geo coordinates, and sync local folders to library.

DEPLOYMENT.md

@@ -163,8 +163,9 @@ library_sources/
 ```
 
 - **API:** `GET /api/dda/tree`, `POST /api/dda/tree/nodes`, upload via `POST /api/dda/tree/nodes/{id}/images/upload`
-- **UI:** Recursive tree sidebar, **Manage** (admin) for create/rename/move/delete
+- **UI:** Recursive tree sidebar on Library and Change Detection tabs; **Manage** (admin) for create/rename/move/delete
 - **Storage:** Slug-based disk paths; display names in `node_path`
+- **Local folders:** Create folders under `library_sources/{zone}/{area}/…/` and drop files into `Images/`; click **Refresh** (or restart app) to sync disk → DB via `POST /api/dda/local/rescan`
 - **Legacy:** Flat `library_sources/YEAR/` files auto-migrate to `Unassigned/Legacy/{year}/Images/` on startup
 
 ---
@@ -175,7 +176,7 @@ Run before promoting any DDA feature to production:
 
 1. **Health** — `GET /health` returns `status: ok`, `appMode: dda`, `dda.libraryImages` ≥ 0
 2. **Tree library** — Create zone → area → year nodes (admin); upload GeoTIFF to node; tree + grid show breadcrumb
-3. **Compare** — Select T1/T2 from tree library; Run Detection completes
+3. **Compare** — Tree sidebar filters image grid; T1/T2 dropdowns list all images; Run Detection completes with plausible lat/lng on georeferenced TIFFs
 4. **Viewer** — Slider / T1 / T2 / Overlay modes; click region to locate
 5. **Review** — Confirm and False Positive; Export confirmed CSV; Submit confirmed
 6. **Reports** — PDF download; `/dda/reports/{id}` page; email link (if SMTP configured)

app/dda/bootstrap.py

@@ -63,6 +63,9 @@ def init_dda_database():
         from .tree.migration import run_tree_migration
         mig = run_tree_migration(db)
         logger.info("Tree migration: %s", mig)
+        from .tree.sync_service import sync_from_filesystem
+        sync_stats = sync_from_filesystem(db)
+        logger.info("Filesystem sync at startup: %s", sync_stats)
         from .job_runner import reconcile_stale_jobs
         reconcile_stale_jobs(db)
     finally:

app/dda/detect_service.py

@@ -15,7 +15,7 @@ from sqlalchemy.orm import Session
 from ..auth import get_or_create_guest_user
 from ..database import DATA_DIR
 from ..models import DetectionRun
-from .geo_regions import bounds_from_image_path, enrich_regions_geo
+from .geo_regions import enrich_regions_geo, resolve_geo_context
 
 logger = logging.getLogger(__name__)
 
@@ -28,7 +28,7 @@ def _serialize_regions(change_regions) -> list:
         {
             "id": int(r["id"]),
             "area": int(r["area"]),
-            "center": {"x": int(r["center"][0]), "y": int(r["center"][1])},
+            "center": {"x": round(float(r["center"][0])), "y": round(float(r["center"][1]))},
             "bbox": {
                 "x": int(r["bbox"][0]),
                 "y": int(r["bbox"][1]),
@@ -79,6 +79,7 @@ def run_detection_and_save(
     notify_email: Optional[str] = None,
     max_size: Optional[int] = None,
     geo_bounds_path: Optional[Path] = None,
+    base_path: str = "",
     user_id: Optional[int] = None,
     job_id: Optional[int] = None,
 ) -> dict:
@@ -158,13 +159,30 @@ def run_detection_and_save(
         logger.warning("Failed to save thumbnails: %s", exc)
 
     regions_serializable = _serialize_regions(change_regions)
-    img_w, img_h = before_for_slider.size
-    bounds = bounds_from_image_path(geo_bounds_path) if geo_bounds_path else None
+    det_w = int(stats.get("image_width") or 0)
+    det_h = int(stats.get("image_height") or 0)
+    if det_w <= 0 or det_h <= 0:
+        det_w, det_h = before_for_slider.size
+
+    geo_ctx = None
+    bounds = None
+    if geo_bounds_path:
+        rel_path = (base_path or "").replace("\\", "/").strip().lstrip("/")
+        if not rel_path:
+            try:
+                from .config import get_storage_root
+                rel_path = geo_bounds_path.resolve().relative_to(get_storage_root().resolve()).as_posix()
+            except Exception:
+                rel_path = geo_bounds_path.name
+        geo_ctx = resolve_geo_context(db, rel_path, geo_bounds_path)
+        bounds = geo_ctx.bounds
+
     regions_serializable = enrich_regions_geo(
         regions_serializable,
-        img_width=img_w,
-        img_height=img_h,
+        img_width=det_w,
+        img_height=det_h,
         bounds=bounds,
+        geo=geo_ctx,
     )
     total_px = int(stats["total_pixels"])
     changed_px = int(stats["changed_pixels"])

app/dda/geo_regions.py

@@ -3,17 +3,28 @@ from __future__ import annotations
 
 import json
 import logging
+from dataclasses import dataclass
 from pathlib import Path
 from typing import Any, Dict, List, Optional, Tuple
 
+from sqlalchemy.orm import Session
+
 from .change_type_map import enrich_region_for_dda
-from .geotiff_io import inspect_image
+from .geotiff_io import GeorefInfo, inspect_image, pixel_to_geo_wgs84, read_georef
 
 logger = logging.getLogger(__name__)
 
 BoundsWGS84 = Tuple[float, float, float, float]  # west, south, east, north
 
 
+@dataclass
+class GeoContext:
+    bounds: Optional[BoundsWGS84]
+    georef: Optional[GeorefInfo]
+    georef_width: int
+    georef_height: int
+
+
 def parse_bounds(bounds: Any) -> Optional[BoundsWGS84]:
     if bounds is None:
         return None
@@ -49,18 +60,75 @@ def bounds_from_image_path(path: Path) -> Optional[BoundsWGS84]:
         return None
 
 
+def resolve_geo_context(
+    db: Session,
+    base_path: str,
+    base_file: Path,
+) -> GeoContext:
+    """Resolve bounds and affine georef for detection geo enrichment."""
+    georef = read_georef(base_file)
+    bounds = georef.bounds_wgs84 if georef else None
+    georef_width = georef.width if georef else 0
+    georef_height = georef.height if georef else 0
+
+    if not bounds:
+        from .tree.image_service import get_image_by_file_path
+
+        rel = base_path.replace("\\", "/").strip().lstrip("/")
+        img = get_image_by_file_path(db, rel)
+        if img and img.bounds_json:
+            bounds = parse_bounds(img.bounds_json)
+
+    if not bounds:
+        bounds = bounds_from_image_path(base_file)
+
+    if georef is None and bounds:
+        meta = inspect_image(base_file)
+        georef_width = meta.width or georef_width
+        georef_height = meta.height or georef_height
+
+    return GeoContext(
+        bounds=bounds,
+        georef=georef,
+        georef_width=georef_width or 0,
+        georef_height=georef_height or 0,
+    )
+
+
 def pixel_to_lat_lng(
     x: float,
     y: float,
     img_width: int,
     img_height: int,
     bounds: BoundsWGS84,
+    *,
+    geo: Optional[GeoContext] = None,
 ) -> Optional[Dict[str, float]]:
-    if img_width <= 0 or img_height <= 0 or not bounds:
+    if img_width <= 0 or img_height <= 0:
+        return None
+
+    if geo and geo.georef:
+        coords = pixel_to_geo_wgs84(
+            x, y, geo.georef,
+            detection_width=img_width,
+            detection_height=img_height,
+        )
+        if coords:
+            lng, lat = coords
+            return {"lat": round(lat, 6), "lng": round(lng, 6)}
+
+    if not bounds:
         return None
+
     west, south, east, north = bounds
-    lng = west + (float(x) / img_width) * (east - west)
-    lat = north - (float(y) / img_height) * (north - south)
+    ref_w = geo.georef_width if geo and geo.georef_width > 0 else img_width
+    ref_h = geo.georef_height if geo and geo.georef_height > 0 else img_height
+    scale_x = ref_w / float(img_width)
+    scale_y = ref_h / float(img_height)
+    px = float(x) * scale_x
+    py = float(y) * scale_y
+    lng = west + (px / ref_w) * (east - west)
+    lat = north - (py / ref_h) * (north - south)
     return {"lat": round(lat, 6), "lng": round(lng, 6)}
 
 
@@ -69,20 +137,25 @@ def bbox_area_sq_m(
     img_width: int,
     img_height: int,
     bounds: BoundsWGS84,
+    *,
+    geo: Optional[GeoContext] = None,
 ) -> Optional[float]:
     """Approximate region area in square metres using geographic bounds."""
     if img_width <= 0 or img_height <= 0 or not bounds:
         return None
     west, south, east, north = bounds
-    m_per_px_x = abs(east - west) / img_width
-    m_per_px_y = abs(north - south) / img_height
-    # Rough conversion: 1 degree ≈ 111_320 m at equator; scale lng by cos(lat)
+    ref_w = geo.georef_width if geo and geo.georef_width > 0 else img_width
+    ref_h = geo.georef_height if geo and geo.georef_height > 0 else img_height
+    scale_x = ref_w / float(img_width)
+    scale_y = ref_h / float(img_height)
+    m_per_px_x = abs(east - west) / ref_w
+    m_per_px_y = abs(north - south) / ref_h
     import math
     mid_lat = (north + south) / 2.0
     lat_scale = 111_320.0
     lng_scale = 111_320.0 * math.cos(math.radians(mid_lat))
-    w_m = bbox.get("w", 0) * m_per_px_x * lng_scale
-    h_m = bbox.get("h", 0) * m_per_px_y * lat_scale
+    w_m = bbox.get("w", 0) * scale_x * m_per_px_x * lng_scale
+    h_m = bbox.get("h", 0) * scale_y * m_per_px_y * lat_scale
     return round(w_m * h_m, 1)
 
 
@@ -92,22 +165,30 @@ def enrich_regions_geo(
     img_width: int,
     img_height: int,
     bounds: Optional[BoundsWGS84],
+    geo: Optional[GeoContext] = None,
 ) -> List[dict]:
     """Add latLng, areaSqM, and DDA change type to each region."""
+    effective_bounds = bounds or (geo.bounds if geo else None)
     out = []
     for region in regions:
         enriched = enrich_region_for_dda(region)
         center = region.get("center") or {}
         cx = center.get("x", 0)
         cy = center.get("y", 0)
-        if bounds:
-            lat_lng = pixel_to_lat_lng(cx, cy, img_width, img_height, bounds)
+        if effective_bounds or (geo and geo.georef):
+            lat_lng = pixel_to_lat_lng(
+                cx, cy, img_width, img_height, effective_bounds or (0, 0, 0, 0),
+                geo=geo,
+            )
             if lat_lng:
                 enriched["latLng"] = lat_lng
             bbox = region.get("bbox") or {}
-            area_sq_m = bbox_area_sq_m(bbox, img_width, img_height, bounds)
-            if area_sq_m is not None:
-                enriched["areaSqM"] = area_sq_m
+            if effective_bounds:
+                area_sq_m = bbox_area_sq_m(
+                    bbox, img_width, img_height, effective_bounds, geo=geo,
+                )
+                if area_sq_m is not None:
+                    enriched["areaSqM"] = area_sq_m
         else:
             enriched["latLng"] = None
         out.append(enriched)
@@ -125,4 +206,3 @@ def region_lat_lng(region: dict) -> tuple[Optional[float], Optional[float]]:
         return float(lat), float(lng)
     except (TypeError, ValueError):
         return None, None
-

app/dda/geotiff_io.py

@@ -5,7 +5,7 @@ import json
 import logging
 from dataclasses import dataclass
 from pathlib import Path
-from typing import Optional, Tuple
+from typing import Any, Optional, Tuple
 
 from PIL import Image
 
@@ -165,6 +165,76 @@ def raster_to_preview_png(src_path: Path, dest_path: Path, max_side: int = 512)
         write_placeholder_png(dest_path, src_path.name, max_side)
 
 
+@dataclass
+class GeorefInfo:
+    transform: Any
+    crs: Any
+    width: int
+    height: int
+    bounds_wgs84: Optional[Tuple[float, float, float, float]]
+
+
+def read_georef(path: Path) -> Optional[GeorefInfo]:
+    """Read raster affine transform and WGS84 bounds when rasterio is available."""
+    ext = path.suffix.lower()
+    if ext not in (".tif", ".tiff"):
+        return None
+    try:
+        import rasterio
+        from rasterio.warp import transform_bounds
+
+        with rasterio.open(path) as src:
+            if src.crs is None:
+                return None
+            bounds = None
+            try:
+                w, s, e, n = transform_bounds(src.crs, "EPSG:4326", *src.bounds)
+                bounds = (float(w), float(s), float(e), float(n))
+            except Exception as exc:
+                logger.warning("Could not transform bounds to WGS84 for %s: %s", path.name, exc)
+            return GeorefInfo(
+                transform=src.transform,
+                crs=src.crs,
+                width=int(src.width),
+                height=int(src.height),
+                bounds_wgs84=bounds,
+            )
+    except ImportError:
+        return None
+    except Exception as exc:
+        logger.warning("read_georef failed for %s: %s", path.name, exc)
+        return None
+
+
+def pixel_to_geo_wgs84(
+    x: float,
+    y: float,
+    georef: GeorefInfo,
+    *,
+    detection_width: int,
+    detection_height: int,
+) -> Optional[Tuple[float, float]]:
+    """Map detection pixel (x=col, y=row) to WGS84 (lng, lat)."""
+    if detection_width <= 0 or detection_height <= 0:
+        return None
+    try:
+        from rasterio.transform import xy as transform_xy
+        from rasterio.warp import transform as warp_transform
+
+        scale_x = georef.width / float(detection_width)
+        scale_y = georef.height / float(detection_height)
+        col = float(x) * scale_x
+        row = float(y) * scale_y
+        geo_x, geo_y = transform_xy(georef.transform, row, col, offset="center")
+        if georef.crs and str(georef.crs) != "EPSG:4326":
+            lngs, lats = warp_transform(georef.crs, "EPSG:4326", [geo_x], [geo_y])
+            return float(lngs[0]), float(lats[0])
+        return float(geo_x), float(geo_y)
+    except Exception as exc:
+        logger.warning("pixel_to_geo_wgs84 failed: %s", exc)
+        return None
+
+
 def bounds_to_json(bounds: Optional[Tuple[float, float, float, float]]) -> str:
     if not bounds:
         return ""

app/dda/job_runner.py

@@ -88,6 +88,7 @@ def _run_job_sync(job_id: int) -> None:
             notify_email=job.notify_email or params.get("notify_email"),
             max_size=get_detection_max_side(),
             geo_bounds_path=base_file,
+            base_path=base_path,
             user_id=job.created_by,
             job_id=job_id,
         )

app/dda/local_routes.py

@@ -106,6 +106,9 @@ def local_thumb(path: str = Query(...)):
 @router.post("/local/rescan")
 def local_rescan(db: Session = Depends(get_db)):
     _require_dda()
+    from .tree.sync_service import sync_from_filesystem
+
+    sync_stats = sync_from_filesystem(db)
     tree = build_tree(db)
     images = list_all_images(db)
     return {
@@ -113,6 +116,7 @@ def local_rescan(db: Session = Depends(get_db)):
         "tree": tree,
         "totalImages": len(images),
         "storageRoot": str(get_storage_root()),
+        "sync": sync_stats,
     }
 
 
@@ -180,6 +184,7 @@ async def detect_from_library(
             notify_email=notify_email,
             max_size=get_detection_max_side(),
             geo_bounds_path=base_file,
+            base_path=base_norm,
             user_id=user.id,
         )
     except Exception as exc:

app/dda/tree/image_service.py

@@ -132,6 +132,13 @@ def list_images_for_node(db: Session, node_id: int) -> List[dict]:
     return [image_to_dict(r, node) for r in rows]
 
 
+def get_image_by_file_path(db: Session, relative_path: str) -> Optional[ImageLibrary]:
+    rel = (relative_path or "").replace("\\", "/").strip().lstrip("/")
+    if not rel:
+        return None
+    return db.query(ImageLibrary).filter(ImageLibrary.file_path == rel).first()
+
+
 def list_all_images(db: Session, *, node_id: Optional[int] = None, query: Optional[str] = None) -> List[dict]:
     q = db.query(ImageLibrary, TreeNode).join(TreeNode, ImageLibrary.node_id == TreeNode.id).filter(TreeNode.is_active == True)  # noqa: E712
     if node_id:

app/dda/tree/sync_service.py

@@ -0,0 +1,203 @@
+"""Filesystem → DB sync for tree library folders and images."""
+from __future__ import annotations
+
+import hashlib
+import logging
+from pathlib import Path
+from typing import Optional
+
+from sqlalchemy.orm import Session
+
+from ..config import ALLOWED_EXTENSIONS
+from ..geotiff_io import bounds_to_json, inspect_image
+from .audit_service import log_action
+from .models import ImageLibrary, TreeNode
+from .path_service import ensure_node_directory, storage_root
+from .path_slugs import RESERVED
+
+logger = logging.getLogger(__name__)
+
+_NODE_TYPES = ("Zone", "Area", "Year", "Folder")
+_SKIP_DIRS = frozenset({".git", ".thumbs", "__pycache__", "cache", "thumbs"})
+
+
+def _infer_node_type(depth: int) -> str:
+    return _NODE_TYPES[min(depth, len(_NODE_TYPES) - 1)]
+
+
+def _display_name(folder_slug: str) -> str:
+    name = folder_slug.replace("_", " ").replace("-", " ").strip()
+    return name or folder_slug
+
+
+def _find_node_by_physical_path(db: Session, physical_path: str) -> Optional[TreeNode]:
+    rel = (physical_path or "").strip("/")
+    if not rel:
+        return None
+    return (
+        db.query(TreeNode)
+        .filter(TreeNode.physical_path == rel, TreeNode.is_active == True)  # noqa: E712
+        .first()
+    )
+
+
+def ensure_node_from_disk(db: Session, physical_path: str, *, created_by: str = "filesystem-sync") -> TreeNode:
+    """Ensure a TreeNode exists for a disk folder path (slug segments)."""
+    rel = (physical_path or "").strip("/")
+    if not rel:
+        raise ValueError("physical_path is required")
+
+    existing = _find_node_by_physical_path(db, rel)
+    if existing:
+        ensure_node_directory(rel)
+        return existing
+
+    parts = rel.split("/")
+    parent_id = None
+    parent_display = ""
+    if len(parts) > 1:
+        parent = ensure_node_from_disk(db, "/".join(parts[:-1]), created_by=created_by)
+        parent_id = parent.id
+        parent_display = parent.node_path or parent.node_name
+
+    folder_slug = parts[-1]
+    if folder_slug.lower() in RESERVED or folder_slug.lower() == "images":
+        raise ValueError(f"Reserved folder name: {folder_slug}")
+
+    sibling = (
+        db.query(TreeNode)
+        .filter(
+            TreeNode.parent_id == parent_id,
+            TreeNode.slug == folder_slug,
+            TreeNode.is_active == True,  # noqa: E712
+        )
+        .first()
+    )
+    if sibling:
+        ensure_node_directory(sibling.physical_path)
+        return sibling
+
+    node_name = _display_name(folder_slug)
+    node_path = f"{parent_display}/{node_name}".strip("/") if parent_display else node_name
+    node = TreeNode(
+        parent_id=parent_id,
+        node_name=node_name,
+        node_type=_infer_node_type(len(parts) - 1),
+        node_level=max(0, len(parts) - 1),
+        node_path=node_path,
+        slug=folder_slug,
+        physical_path=rel,
+        created_by=created_by,
+    )
+    db.add(node)
+    db.flush()
+    ensure_node_directory(rel)
+    log_action(
+        db,
+        "sync_create",
+        node_id=node.id,
+        new_value={"name": node_name, "path": node_path, "physical": rel},
+        action_by=created_by,
+    )
+    db.commit()
+    db.refresh(node)
+    logger.info("Synced tree node from disk: %s", rel)
+    return node
+
+
+def _index_image_file(db: Session, node: TreeNode, file_path: Path, rel_file: str) -> bool:
+    existing = db.query(ImageLibrary).filter(ImageLibrary.file_path == rel_file).first()
+    stat = file_path.stat()
+    if existing:
+        changed = (
+            existing.file_size_bytes != stat.st_size
+            or existing.node_id != node.id
+        )
+        if changed:
+            meta = inspect_image(file_path)
+            existing.node_id = node.id
+            existing.file_size_bytes = stat.st_size
+            existing.width = meta.width
+            existing.height = meta.height
+            existing.has_georef = meta.has_georef
+            existing.bounds_json = bounds_to_json(meta.bounds_wgs84) or existing.bounds_json
+            existing.format = meta.format
+            db.commit()
+        return False
+
+    meta = inspect_image(file_path)
+    img = ImageLibrary(
+        node_id=node.id,
+        image_name=file_path.name,
+        image_type="GeoTIFF" if file_path.suffix.lower() in (".tif", ".tiff") else "Raster",
+        file_path=rel_file,
+        uploaded_by="filesystem-sync",
+        file_size_bytes=stat.st_size,
+        thumb_cache_key=hashlib.sha256(rel_file.encode()).hexdigest()[:32],
+        width=meta.width,
+        height=meta.height,
+        has_georef=meta.has_georef,
+        bounds_json=bounds_to_json(meta.bounds_wgs84) or "",
+        format=meta.format,
+    )
+    db.add(img)
+    db.commit()
+    logger.info("Indexed image from disk: %s", rel_file)
+    return True
+
+
+def _sync_directory(db: Session, abs_dir: Path, rel_path: str, stats: dict) -> None:
+    """Recursively sync nodes and images under rel_path."""
+    if not abs_dir.is_dir():
+        return
+
+    for child in sorted(abs_dir.iterdir()):
+        if not child.is_dir() or child.name.startswith(".") or child.name in _SKIP_DIRS:
+            continue
+
+        child_rel = f"{rel_path}/{child.name}".strip("/") if rel_path else child.name
+
+        if child.name.lower() == "images":
+            if rel_path:
+                node = _find_node_by_physical_path(db, rel_path)
+                if not node:
+                    node = ensure_node_from_disk(db, rel_path)
+                for f in sorted(child.iterdir()):
+                    if not f.is_file() or f.suffix.lower() not in ALLOWED_EXTENSIONS:
+                        continue
+                    rel_file = f.relative_to(storage_root()).as_posix()
+                    if _index_image_file(db, node, f, rel_file):
+                        stats["imagesIndexed"] += 1
+                    else:
+                        stats["imagesUpdated"] += 1
+            continue
+
+        before = _find_node_by_physical_path(db, child_rel)
+        ensure_node_from_disk(db, child_rel)
+        if not before:
+            stats["nodesCreated"] += 1
+        _sync_directory(db, child, child_rel, stats)
+
+
+def sync_from_filesystem(db: Session) -> dict:
+    """Import disk folders/images into tree_nodes and image_library."""
+    root = storage_root()
+    stats = {
+        "nodesCreated": 0,
+        "imagesIndexed": 0,
+        "imagesUpdated": 0,
+        "orphansFlagged": 0,
+    }
+    if not root.exists():
+        return stats
+
+    _sync_directory(db, root, "", stats)
+
+    # Flag DB images whose files are missing on disk
+    for img in db.query(ImageLibrary).all():
+        full = storage_root() / img.file_path.replace("\\", "/")
+        if not full.exists():
+            stats["orphansFlagged"] += 1
+
+    logger.info("Filesystem sync complete: %s", stats)
+    return stats

static/js/dda/app.js

@@ -84,9 +84,11 @@ document.querySelectorAll('.dda-tab').forEach((btn) => {
 
 async function rescanLibrary() {
   const data = await ddaApi('POST', '/api/dda/local/rescan');
-  if (typeof renderTree === 'function') renderTree({ tree: data.tree }, []);
+  if (typeof renderAllTrees === 'function') renderAllTrees({ tree: data.tree }, []);
+  else if (typeof renderTree === 'function') renderTree({ tree: data.tree }, []);
   if (typeof populateManageNodeSelect === 'function') populateManageNodeSelect();
   await loadLibraryImages();
+  if (typeof loadCompareLibraryGrid === 'function') await loadCompareLibraryGrid();
   return data;
 }
 
@@ -203,7 +205,11 @@ document.getElementById('btn-refresh-lib')?.addEventListener('click', async () =
   btn.disabled = true;
   try {
     const data = await rescanLibrary();
-    showDdaSuccess(`Library refreshed — ${data.totalImages || 0} image(s).`);
+    const sync = data.sync || {};
+    const parts = [`${data.totalImages || 0} image(s)`];
+    if (sync.nodesCreated) parts.push(`${sync.nodesCreated} folder(s) imported`);
+    if (sync.imagesIndexed) parts.push(`${sync.imagesIndexed} image(s) indexed`);
+    showDdaSuccess(`Library synced — ${parts.join(', ')}.`);
   } catch (err) {
     showDdaError(err.message);
   } finally {

static/js/dda/compare.js

@@ -1,6 +1,6 @@
 /** Change Detection tab — pick library images and run comparison. */
 
-const compareState = { t1: null, t2: null, pickingSlot: null };
+const compareState = { t1: null, t2: null, pickingSlot: null, selectedNode: null, allLibraryItems: [] };
 
 function compareFormatBytes(n) {
   if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(1) + ' GB';
@@ -92,6 +92,9 @@ function setSlot(slotKey, img) {
 
 function findLibraryItem(path) {
   const norm = decodePath(path);
+  const all = compareState.allLibraryItems || [];
+  const fromAll = all.find((i) => i.path === norm);
+  if (fromAll) return fromAll;
   const items = ensureDdaState().libraryItems || [];
   return items.find((i) => i.path === norm) || {
     path: norm,
@@ -101,6 +104,55 @@ function findLibraryItem(path) {
   };
 }
 
+function compareSelectionTitle() {
+  return compareState.selectedNode?.path || 'All images';
+}
+
+function updateCompareFolderPath() {
+  const el = document.getElementById('compare-folder-path');
+  if (el) el.textContent = compareSelectionTitle();
+}
+
+function renderCompareGrid(items) {
+  const grid = document.getElementById('compare-lib-grid');
+  if (!grid) return;
+
+  if (!items.length) {
+    grid.innerHTML = `<p class="dim">No images in <strong>${escapeHtml(compareSelectionTitle())}</strong>. Select another folder or click Refresh to sync from disk.</p>`;
+    return;
+  }
+
+  grid.innerHTML = items.map((img) => {
+    const thumb = img.thumbUrl || thumbUrlFor(img.path);
+    const enc = encodePath(img.path);
+    const t1Sel = compareState.t1?.path === img.path ? ' selected-t1' : '';
+    const t2Sel = compareState.t2?.path === img.path ? ' selected-t2' : '';
+    const safeName = img.filename.replace(/</g, '&lt;');
+    return `
+      <div class="dda-compare-card dda-card-img${t1Sel}${t2Sel}" data-image-path="${enc}" draggable="true">
+        ${thumb ? `<img src="${thumb}" alt="" loading="lazy" draggable="false" />` : '<div class="meta">No preview</div>'}
+        <div class="meta">
+          <span class="dim">${escapeHtml(img.breadcrumb || img.nodePath || '')}</span><br/>
+          ${safeName}<br/>
+          <span class="dim">${compareFormatBytes(img.fileSizeBytes)}</span>
+        </div>
+        <div class="dda-compare-assign">
+          <button type="button" class="btn btn-secondary btn-sm" data-assign="t1" data-path="${enc}">T1</button>
+          <button type="button" class="btn btn-secondary btn-sm" data-assign="t2" data-path="${enc}">T2</button>
+        </div>
+      </div>`;
+  }).join('');
+
+  grid.querySelectorAll('.dda-compare-card').forEach((card) => {
+    card.addEventListener('dragstart', (e) => {
+      const path = decodePath(card.dataset.imagePath);
+      e.dataTransfer.setData('application/x-dda-image-path', path);
+      e.dataTransfer.setData('text/plain', path);
+    });
+  });
+  refreshCompareLibrarySelection();
+}
+
 function refreshCompareLibrarySelection() {
   const grid = document.getElementById('compare-lib-grid');
   if (!grid) return;
@@ -113,47 +165,26 @@ function refreshCompareLibrarySelection() {
 
 async function loadCompareLibraryGrid() {
   const grid = document.getElementById('compare-lib-grid');
+  const title = document.getElementById('compare-grid-title');
   if (!grid) return;
 
   grid.innerHTML = '<p class="dim">Loading library images…</p>';
-  try {
-    const items = await ddaApi('GET', '/api/dda/local/images');
-    ensureDdaState().libraryItems = items;
-    populateSelects(items);
+  if (title) title.textContent = `Pick from library — ${compareSelectionTitle()}`;
+  updateCompareFolderPath();
 
-    if (!items.length) {
-      grid.innerHTML = '<p class="dim">No images found. Copy .tif files into <code>library_sources/YEAR/</code> in your project folder, then click <strong>Refresh list</strong>.</p>';
-      return;
-    }
-
-    grid.innerHTML = items.map((img) => {
-      const thumb = img.thumbUrl || thumbUrlFor(img.path);
-      const enc = encodePath(img.path);
-      const t1Sel = compareState.t1?.path === img.path ? ' selected-t1' : '';
-      const t2Sel = compareState.t2?.path === img.path ? ' selected-t2' : '';
-      const safeName = img.filename.replace(/</g, '&lt;');
-      return `
-        <div class="dda-compare-card dda-card-img${t1Sel}${t2Sel}" data-image-path="${enc}" draggable="true">
-          ${thumb ? `<img src="${thumb}" alt="" loading="lazy" draggable="false" />` : '<div class="meta">No preview</div>'}
-          <div class="meta">
-            <span class="dim">${escapeHtml(img.breadcrumb || img.nodePath || '')}</span><br/>
-            ${safeName}<br/>
-            <span class="dim">${compareFormatBytes(img.fileSizeBytes)}</span>
-          </div>
-          <div class="dda-compare-assign">
-            <button type="button" class="btn btn-secondary btn-sm" data-assign="t1" data-path="${enc}">T1</button>
-            <button type="button" class="btn btn-secondary btn-sm" data-assign="t2" data-path="${enc}">T2</button>
-          </div>
-        </div>`;
-    }).join('');
-
-    grid.querySelectorAll('.dda-compare-card').forEach((card) => {
-      card.addEventListener('dragstart', (e) => {
-        const path = decodePath(card.dataset.imagePath);
-        e.dataTransfer.setData('application/x-dda-image-path', path);
-        e.dataTransfer.setData('text/plain', path);
-      });
-    });
+  try {
+    const allItems = await ddaApi('GET', '/api/dda/local/images');
+    compareState.allLibraryItems = allItems;
+    populateSelects(allItems);
+
+    const params = new URLSearchParams();
+    if (compareState.selectedNode?.id) params.set('node_id', String(compareState.selectedNode.id));
+    const gridItems = compareState.selectedNode?.id
+      ? await ddaApi('GET', '/api/dda/local/images?' + params.toString())
+      : allItems;
+
+    ensureDdaState().libraryItems = gridItems;
+    renderCompareGrid(gridItems);
   } catch (err) {
     grid.innerHTML = `<p class="dim">Could not load images: ${err.message}</p>`;
     if (typeof showDdaError === 'function') showDdaError(err.message);
@@ -175,9 +206,19 @@ async function openPicker(slotKey) {
 
   let items = ensureDdaState().libraryItems || [];
   try {
-    items = await ddaApi('GET', '/api/dda/local/images');
-    ensureDdaState().libraryItems = items;
-    populateSelects(items);
+    if (compareState.selectedNode?.id) {
+      const params = new URLSearchParams();
+      params.set('node_id', String(compareState.selectedNode.id));
+      items = await ddaApi('GET', '/api/dda/local/images?' + params.toString());
+    } else {
+      items = compareState.allLibraryItems.length
+        ? compareState.allLibraryItems
+        : await ddaApi('GET', '/api/dda/local/images');
+      compareState.allLibraryItems = items;
+    }
+    populateSelects(compareState.allLibraryItems.length
+      ? compareState.allLibraryItems
+      : items);
   } catch (err) {
     list.innerHTML = `<p class="dim">Could not load images: ${err.message}</p>`;
     return;
@@ -272,7 +313,23 @@ function setupCompareInteractions() {
     });
   });
 
-  document.getElementById('btn-compare-refresh')?.addEventListener('click', () => loadCompareLibraryGrid());
+  document.getElementById('btn-compare-refresh')?.addEventListener('click', async () => {
+    const btn = document.getElementById('btn-compare-refresh');
+    btn.disabled = true;
+    try {
+      const data = await window.ddaState.rescan();
+      const sync = data.sync || {};
+      const parts = [`${data.totalImages || 0} image(s)`];
+      if (sync.nodesCreated) parts.push(`${sync.nodesCreated} folder(s) imported`);
+      if (sync.imagesIndexed) parts.push(`${sync.imagesIndexed} image(s) indexed`);
+      if (typeof showDdaSuccess === 'function') showDdaSuccess(`Library synced — ${parts.join(', ')}.`);
+      await loadCompareLibraryGrid();
+    } catch (err) {
+      if (typeof showDdaError === 'function') showDdaError(err.message);
+    } finally {
+      btn.disabled = false;
+    }
+  });
   document.getElementById('dda-picker-close')?.addEventListener('click', closePicker);
   document.getElementById('dda-picker-modal')?.addEventListener('click', (e) => {
     if (e.target.id === 'dda-picker-modal') closePicker();
@@ -423,11 +480,31 @@ let compareInitialized = false;
 
 function initCompareTab() {
   if (!compareInitialized) {
+    if (typeof registerCompareTreeSidebar === 'function') {
+      registerCompareTreeSidebar({
+        containerId: 'compare-tree',
+        searchId: 'compare-tree-search',
+        allBtnId: 'btn-compare-tree-all',
+        getSelectedNode: () => compareState.selectedNode,
+        onNodeSelect: (node) => {
+          compareState.selectedNode = node;
+          loadCompareLibraryGrid();
+        },
+        onClearNode: () => {
+          compareState.selectedNode = null;
+          loadCompareLibraryGrid();
+        },
+      });
+    }
     setupCompareInteractions();
     compareInitialized = true;
   }
   updateRunButton();
-  loadCompareLibraryGrid();
+  if (typeof loadTree === 'function') {
+    loadTree().then(() => loadCompareLibraryGrid()).catch(() => loadCompareLibraryGrid());
+  } else {
+    loadCompareLibraryGrid();
+  }
 }
 
 window.loadCompareLibraryGrid = loadCompareLibraryGrid;

static/js/dda/tree.js

@@ -3,14 +3,39 @@
 let treeData = null;
 let imageTypes = [];
 
+const librarySidebar = {
+  containerId: 'lib-tree',
+  searchId: 'lib-tree-search',
+  allBtnId: 'btn-tree-all',
+  getSelectedNode: () => window.ddaState?.selectedNode,
+  onNodeSelect: (node) => {
+    window.ddaState.setNode(node);
+    window.ddaState.refreshImages();
+    syncUploadNodeSelect();
+  },
+  onClearNode: () => {
+    window.ddaState.clearNode();
+    window.ddaState.refreshImages();
+    syncUploadNodeSelect();
+  },
+};
+
+let compareSidebar = null;
+
 function isAdmin() {
   return window.ddaState?.userRole === 'admin';
 }
 
-function renderTreeNodes(nodes, depth = 0) {
+function getSidebars() {
+  const list = [librarySidebar];
+  if (compareSidebar) list.push(compareSidebar);
+  return list;
+}
+
+function renderTreeNodes(nodes, sidebar, depth = 0) {
   if (!nodes || !nodes.length) return '';
-  const filter = (document.getElementById('lib-tree-search')?.value || '').toLowerCase();
-  const sel = window.ddaState?.selectedNode;
+  const filter = (document.getElementById(sidebar.searchId)?.value || '').toLowerCase();
+  const sel = sidebar.getSelectedNode?.();
 
   return nodes.map((node) => {
     const name = node.name || node.nodeName;
@@ -29,12 +54,12 @@ function renderTreeNodes(nodes, depth = 0) {
 
     if (hasKids) {
       return `
-        <details class="dda-tree-node-wrap" open${indent ? '' : ''}>
+        <details class="dda-tree-node-wrap" open>
           <summary class="dda-tree-node-summary ${active ? 'active' : ''}" data-node-id="${node.id}">
             <button type="button" class="dda-tree-node-btn ${active ? 'active' : ''}" data-node-id="${node.id}"
               data-node-path="${escapeHtml(node.nodePath || name)}">${escapeHtml(name)}${count}</button>
           </summary>
-          <div class="dda-tree-children">${renderTreeNodes(children, depth + 1)}</div>
+          <div class="dda-tree-children">${renderTreeNodes(children, sidebar, depth + 1)}</div>
         </details>`;
     }
     return `
@@ -43,49 +68,64 @@ function renderTreeNodes(nodes, depth = 0) {
   }).join('');
 }
 
-function renderTree(tree, types) {
-  const el = document.getElementById('lib-tree');
+function renderTreeSidebar(sidebar, tree, types) {
+  const el = document.getElementById(sidebar.containerId);
   if (!el) return;
-  treeData = tree;
   if (types) imageTypes = types;
 
   const nodes = tree?.tree || tree || [];
-  const allActive = !window.ddaState?.selectedNode?.id;
-  let html = `<button type="button" class="dda-tree-all ${allActive ? 'active' : ''}" id="btn-tree-all">All images</button>`;
-  html += renderTreeNodes(nodes);
+  const sel = sidebar.getSelectedNode?.();
+  const allActive = !sel?.id;
+  const allBtnId = sidebar.allBtnId || `btn-tree-all-${sidebar.containerId}`;
+  let html = `<button type="button" class="dda-tree-all ${allActive ? 'active' : ''}" id="${allBtnId}">All images</button>`;
+  html += renderTreeNodes(nodes, sidebar);
   if (!nodes.length) {
-    html += '<p class="dim">No nodes yet. Admins can use Manage to add zones.</p>';
+    html += '<p class="dim">No nodes yet. Create folders on disk or use Manage to add zones.</p>';
   }
   el.innerHTML = html;
 
-  document.getElementById('btn-tree-all')?.addEventListener('click', () => {
-    window.ddaState.clearNode();
-    window.ddaState.refreshImages();
-    renderTree(treeData, imageTypes);
-    syncUploadNodeSelect();
+  document.getElementById(allBtnId)?.addEventListener('click', () => {
+    sidebar.onClearNode?.();
+    renderAllTrees(treeData, imageTypes);
   });
 
   el.querySelectorAll('.dda-tree-node-btn').forEach((btn) => {
     btn.addEventListener('click', (e) => {
       e.stopPropagation();
-      window.ddaState.setNode({
+      sidebar.onNodeSelect?.({
         id: parseInt(btn.dataset.nodeId, 10),
         path: btn.dataset.nodePath,
       });
-      window.ddaState.refreshImages();
-      renderTree(treeData, imageTypes);
-      syncUploadNodeSelect();
+      renderAllTrees(treeData, imageTypes);
     });
   });
 }
 
+function renderAllTrees(tree, types) {
+  if (tree) treeData = tree;
+  getSidebars().forEach((sidebar) => renderTreeSidebar(sidebar, treeData, types));
+}
+
+function renderTree(tree, types) {
+  renderAllTrees(tree, types);
+}
+
+function registerCompareTreeSidebar(config) {
+  compareSidebar = config;
+  if (treeData) renderAllTrees(treeData, imageTypes);
+}
+
 document.getElementById('lib-tree-search')?.addEventListener('input', () => {
-  if (treeData) renderTree(treeData, imageTypes);
+  if (treeData) renderAllTrees(treeData, imageTypes);
+});
+
+document.getElementById('compare-tree-search')?.addEventListener('input', () => {
+  if (treeData) renderAllTrees(treeData, imageTypes);
 });
 
 async function loadTree() {
   const data = await ddaApi('GET', '/api/dda/tree');
-  renderTree(data, data.imageTypes);
+  renderAllTrees(data, data.imageTypes);
   populateNodeSelects(data.tree);
   if (typeof populateManageNodeSelect === 'function') populateManageNodeSelect();
   return data;
@@ -93,6 +133,8 @@ async function loadTree() {
 
 window.loadTree = loadTree;
 window.renderTree = renderTree;
+window.renderAllTrees = renderAllTrees;
+window.registerCompareTreeSidebar = registerCompareTreeSidebar;
 
 function flattenNodes(nodes, out = []) {
   (nodes || []).forEach((n) => {

templates/index_dda.html

@@ -103,66 +103,78 @@
 
     <!-- Tab: Change Detection -->
     <section id="tab-detect" class="dda-panel" role="tabpanel">
-      <div class="card">
-        <div class="card-header"><h3>Compare Images</h3></div>
-        <p class="sub">Select <strong>Base (T1)</strong> and <strong>Comparison (T2)</strong> from the library, then run detection.</p>
-        <div class="dda-compare-slots">
-          <div class="dda-slot" id="slot-t1" data-slot="t1">
-            <span class="dda-slot-label">Base Image (T1)</span>
-            <div id="slot-t1-preview" class="dda-slot-preview-wrap"></div>
-            <select id="select-t1" class="dda-image-select" aria-label="Select base image">
-              <option value="">— Choose base image —</option>
-            </select>
-            <button type="button" class="btn btn-secondary btn-sm dda-slot-pick" data-pick="t1">Browse library</button>
-          </div>
-          <div class="dda-slot" id="slot-t2" data-slot="t2">
-            <span class="dda-slot-label">Comparison Image (T2)</span>
-            <div id="slot-t2-preview" class="dda-slot-preview-wrap"></div>
-            <select id="select-t2" class="dda-image-select" aria-label="Select comparison image">
-              <option value="">— Choose comparison image —</option>
-            </select>
-            <button type="button" class="btn btn-secondary btn-sm dda-slot-pick" data-pick="t2">Browse library</button>
-          </div>
-        </div>
-        <div class="dda-compare-library card">
+      <div class="dda-layout">
+        <aside class="dda-sidebar card">
           <div class="card-header">
-            <h3>Pick from library</h3>
-            <button type="button" class="btn btn-secondary btn-sm" id="btn-compare-refresh">Refresh list</button>
-          </div>
-          <p class="sub dim">Click <strong>T1</strong> or <strong>T2</strong> on an image, or use the dropdowns above.</p>
-          <div id="compare-lib-grid" class="dda-grid dda-compare-grid">
-            <p class="dim">Loading library images…</p>
+            <h3>Folders</h3>
+            <button type="button" class="btn btn-secondary btn-sm" id="btn-compare-refresh">Refresh</button>
           </div>
-        </div>
-        <div class="dda-detect-options">
-          <div class="form-group">
-            <label for="dda-detect-method">Method</label>
-            <select id="dda-detect-method">
-              <option value="AI-Based Deep Learning">AI-Based Deep Learning</option>
-              <option value="Hybrid AI">Hybrid AI</option>
-              <option value="Hybrid Approach">Hybrid Approach</option>
-              <option value="Image Difference">Image Difference</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="dda-detect-sensitivity">Sensitivity (0–1)</label>
-            <input type="number" id="dda-detect-sensitivity" min="0" max="1" step="0.05" value="0.45" />
-          </div>
-          <div class="form-group">
-            <label for="dda-detect-min-area">Min region area (px)</label>
-            <input type="number" id="dda-detect-min-area" min="50" max="10000" step="10" value="150" />
+          <div id="compare-folder-path" class="dda-folder-path dim">All images</div>
+          <input type="search" id="compare-tree-search" class="dda-search" placeholder="Filter nodes…" />
+          <div id="compare-tree" class="dda-tree"><p class="dim">Loading…</p></div>
+        </aside>
+        <main class="dda-main">
+          <div class="card">
+            <div class="card-header"><h3>Compare Images</h3></div>
+            <p class="sub">Select <strong>Base (T1)</strong> and <strong>Comparison (T2)</strong> from the library, then run detection.</p>
+            <div class="dda-compare-slots">
+              <div class="dda-slot" id="slot-t1" data-slot="t1">
+                <span class="dda-slot-label">Base Image (T1)</span>
+                <div id="slot-t1-preview" class="dda-slot-preview-wrap"></div>
+                <select id="select-t1" class="dda-image-select" aria-label="Select base image">
+                  <option value="">— Choose base image —</option>
+                </select>
+                <button type="button" class="btn btn-secondary btn-sm dda-slot-pick" data-pick="t1">Browse library</button>
+              </div>
+              <div class="dda-slot" id="slot-t2" data-slot="t2">
+                <span class="dda-slot-label">Comparison Image (T2)</span>
+                <div id="slot-t2-preview" class="dda-slot-preview-wrap"></div>
+                <select id="select-t2" class="dda-image-select" aria-label="Select comparison image">
+                  <option value="">— Choose comparison image —</option>
+                </select>
+                <button type="button" class="btn btn-secondary btn-sm dda-slot-pick" data-pick="t2">Browse library</button>
+              </div>
+            </div>
+            <div class="dda-compare-library card">
+              <div class="card-header">
+                <h3 id="compare-grid-title">Pick from library</h3>
+              </div>
+              <p class="sub dim">Click <strong>T1</strong> or <strong>T2</strong> on an image, or use the dropdowns above (all images).</p>
+              <div id="compare-lib-grid" class="dda-grid dda-compare-grid">
+                <p class="dim">Loading library images…</p>
+              </div>
+            </div>
+            <div class="dda-detect-options">
+              <div class="form-group">
+                <label for="dda-detect-method">Method</label>
+                <select id="dda-detect-method">
+                  <option value="AI-Based Deep Learning">AI-Based Deep Learning</option>
+                  <option value="Hybrid AI">Hybrid AI</option>
+                  <option value="Hybrid Approach">Hybrid Approach</option>
+                  <option value="Image Difference">Image Difference</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label for="dda-detect-sensitivity">Sensitivity (0–1)</label>
+                <input type="number" id="dda-detect-sensitivity" min="0" max="1" step="0.05" value="0.45" />
+              </div>
+              <div class="form-group">
+                <label for="dda-detect-min-area">Min region area (px)</label>
+                <input type="number" id="dda-detect-min-area" min="50" max="10000" step="10" value="150" />
+              </div>
+              <label class="dda-check"><input type="checkbox" id="dda-detect-registration" checked /> Image registration</label>
+              <label class="dda-check"><input type="checkbox" id="dda-detect-normalization" checked /> Normalization</label>
+              <label class="dda-check"><input type="checkbox" id="dda-detect-notify" /> Email report when done</label>
+              <input type="email" id="dda-detect-notify-email" class="dda-notify-email hidden" placeholder="recipient@example.com" />
+            </div>
+            <p class="dim" id="dda-detect-res-hint"></p>
+            <button type="button" class="btn btn-primary" id="btn-run-job" disabled>Run Detection</button>
+            <div id="detect-progress" class="dda-upload-progress hidden" style="margin-top:0.75rem">
+              <div class="dda-progress-bar"><div id="detect-progress-fill" class="dda-progress-fill"></div></div>
+              <span id="detect-progress-label" class="dim">Starting detection…</span>
+            </div>
           </div>
-          <label class="dda-check"><input type="checkbox" id="dda-detect-registration" checked /> Image registration</label>
-          <label class="dda-check"><input type="checkbox" id="dda-detect-normalization" checked /> Normalization</label>
-          <label class="dda-check"><input type="checkbox" id="dda-detect-notify" /> Email report when done</label>
-          <input type="email" id="dda-detect-notify-email" class="dda-notify-email hidden" placeholder="recipient@example.com" />
-        </div>
-        <p class="dim" id="dda-detect-res-hint"></p>
-        <button type="button" class="btn btn-primary" id="btn-run-job" disabled>Run Detection</button>
-        <div id="detect-progress" class="dda-upload-progress hidden" style="margin-top:0.75rem">
-          <div class="dda-progress-bar"><div id="detect-progress-fill" class="dda-progress-fill"></div></div>
-          <span id="detect-progress-label" class="dim">Starting detection…</span>
-        </div>
+        </main>
       </div>
     </section>
 
@@ -305,11 +317,11 @@
     </div>
   </div>
 
-  <script src="/static/js/dda/app.js?v=14"></script>
-  <script src="/static/js/dda/tree.js?v=1"></script>
+  <script src="/static/js/dda/app.js?v=15"></script>
+  <script src="/static/js/dda/tree.js?v=2"></script>
   <script src="/static/js/dda/library.js?v=8"></script>
   <script src="/static/js/dda/result.js?v=6"></script>
-  <script src="/static/js/dda/compare.js?v=10"></script>
+  <script src="/static/js/dda/compare.js?v=11"></script>
   <script src="/static/js/dda/reports.js?v=4"></script>
   <script src="/static/js/dda/notifications.js?v=1"></script>
 </body>