Deploy Pathora Viewer: tile server, viewer components, and root app.py

backend/tile_server/README.md

@@ -0,0 +1,16 @@
+Tile Server (OpenSlide + FastAPI)
+
+Run:
+  pip install -r requirements.txt
+  uvicorn app.main:app --reload --port 8001
+
+Endpoints:
+  POST /slides/{slide_id}/load
+    Body: {"path": "C:/path/to/slide.svs"}
+
+  POST /slides/{slide_id}/upload
+    Form-data: file=<your slide.svs>
+
+  GET /slides/{slide_id}/metadata
+
+  GET /tiles/{slide_id}/{level}/{x}/{y}.jpg?tile_size=256

backend/tile_server/app/api/routes.py

@@ -0,0 +1,143 @@
+import os
+import shutil
+from pathlib import Path
+
+from fastapi import APIRouter, HTTPException, Query, UploadFile, File
+from fastapi.responses import Response
+import openslide
+
+from app.models.schemas import SlideLoadRequest, SlideMetadata
+from app.services.slide_cache import get_slide, load_slide
+from app.services.tile_service import get_tile_jpeg, get_thumbnail_jpeg
+
+router = APIRouter()
+
+UPLOAD_DIR = Path(
+    os.getenv(
+        "TILE_SERVER_UPLOAD_DIR",
+        Path(__file__).resolve().parents[2] / "data" / "uploads",
+    )
+)
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+
+@router.post("/slides/{slide_id}/load")
+def load(slide_id: str, payload: SlideLoadRequest):
+    try:
+        load_slide(slide_id, payload.path)
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+    return {"status": "loaded", "slide_id": slide_id}
+
+
+@router.post("/slides/{slide_id}/upload")
+def upload(slide_id: str, file: UploadFile = File(...)):
+    if not slide_id:
+        raise HTTPException(status_code=400, detail="Slide id is required")
+
+    filename = Path(file.filename or "")
+    suffix = filename.suffix.lower()
+    if suffix not in {".svs", ".tif", ".tiff"}:
+        suffix = ".svs"
+
+    dest_path = UPLOAD_DIR / f"{slide_id}{suffix}"
+
+    try:
+        with dest_path.open("wb") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Upload failed: {exc}")
+    finally:
+        try:
+            file.file.close()
+        except Exception:
+            pass
+
+    try:
+        load_slide(slide_id, str(dest_path))
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return {"status": "uploaded", "slide_id": slide_id}
+
+
+@router.post("/slides/{slide_id}/reload")
+def reload_uploaded(slide_id: str):
+    if not slide_id:
+        raise HTTPException(status_code=400, detail="Slide id is required")
+
+    matches = list(UPLOAD_DIR.glob(f"{slide_id}.*"))
+    if not matches:
+        raise HTTPException(status_code=404, detail="Uploaded slide not found")
+
+    try:
+        load_slide(slide_id, str(matches[0]))
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return {"status": "reloaded", "slide_id": slide_id}
+
+
+@router.get("/slides/{slide_id}/metadata", response_model=SlideMetadata)
+def metadata(slide_id: str):
+    slide = get_slide(slide_id)
+    if slide is None:
+        raise HTTPException(status_code=404, detail="Slide not loaded")
+
+    mpp_x = slide.properties.get(openslide.PROPERTY_NAME_MPP_X)
+    mpp_y = slide.properties.get(openslide.PROPERTY_NAME_MPP_Y)
+
+    def _to_float(value):
+        try:
+            return float(value)
+        except (TypeError, ValueError):
+            return None
+
+    return SlideMetadata(
+        width=slide.dimensions[0],
+        height=slide.dimensions[1],
+        level_count=slide.level_count,
+        level_dimensions=[[int(w), int(h)] for w, h in slide.level_dimensions],
+        level_downsamples=[float(d) for d in slide.level_downsamples],
+        mpp_x=_to_float(mpp_x),
+        mpp_y=_to_float(mpp_y),
+    )
+
+
+@router.get("/tiles/{slide_id}/{level}/{x}/{y}.jpg")
+def tile(
+    slide_id: str,
+    level: int,
+    x: int,
+    y: int,
+    tile_size: int = Query(256, ge=64, le=2048),
+    channel: str = Query("original"),
+):
+    slide = get_slide(slide_id)
+    if slide is None:
+        raise HTTPException(status_code=404, detail="Slide not loaded")
+
+    try:
+        jpeg_bytes = get_tile_jpeg(slide, level, x, y, tile_size, channel)
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return Response(content=jpeg_bytes, media_type="image/jpeg")
+
+
+@router.get("/slides/{slide_id}/thumbnail")
+def thumbnail(
+    slide_id: str,
+    size: int = Query(256, ge=64, le=1024),
+    channel: str = Query("original"),
+):
+    slide = get_slide(slide_id)
+    if slide is None:
+        raise HTTPException(status_code=404, detail="Slide not loaded")
+
+    try:
+        jpeg_bytes = get_thumbnail_jpeg(slide, size, channel)
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return Response(content=jpeg_bytes, media_type="image/jpeg")

backend/tile_server/app/main.py

@@ -0,0 +1,16 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+from app.api.routes import router
+
+app = FastAPI(title="Pathora Tile Server")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(router)

backend/tile_server/app/models/schemas.py

@@ -0,0 +1,16 @@
+from typing import List, Optional
+from pydantic import BaseModel
+
+
+class SlideLoadRequest(BaseModel):
+    path: str
+
+
+class SlideMetadata(BaseModel):
+    width: int
+    height: int
+    level_count: int
+    level_dimensions: List[List[int]]
+    level_downsamples: List[float]
+    mpp_x: Optional[float] = None
+    mpp_y: Optional[float] = None

backend/tile_server/app/services/slide_cache.py

@@ -0,0 +1,50 @@
+from collections import OrderedDict
+from threading import Lock
+from typing import Dict, Optional
+
+import openslide
+
+
+class SlideCache:
+    def __init__(self, max_items: int = 8) -> None:
+        self._max_items = max_items
+        self._slides: Dict[str, openslide.OpenSlide] = OrderedDict()
+        self._lock = Lock()
+
+    def get(self, slide_id: str) -> Optional[openslide.OpenSlide]:
+        with self._lock:
+            slide = self._slides.get(slide_id)
+            if slide is None:
+                return None
+            self._slides.move_to_end(slide_id)
+            return slide
+
+    def put(self, slide_id: str, path: str) -> openslide.OpenSlide:
+        with self._lock:
+            if slide_id in self._slides:
+                self._slides.move_to_end(slide_id)
+                return self._slides[slide_id]
+
+            slide = openslide.OpenSlide(path)
+            self._slides[slide_id] = slide
+            self._slides.move_to_end(slide_id)
+
+            while len(self._slides) > self._max_items:
+                _, oldest = self._slides.popitem(last=False)
+                try:
+                    oldest.close()
+                except Exception:
+                    pass
+
+            return slide
+
+
+cache = SlideCache()
+
+
+def load_slide(slide_id: str, path: str) -> openslide.OpenSlide:
+    return cache.put(slide_id, path)
+
+
+def get_slide(slide_id: str) -> Optional[openslide.OpenSlide]:
+    return cache.get(slide_id)

backend/tile_server/app/services/tile_service.py

@@ -0,0 +1,112 @@
+from io import BytesIO
+from typing import Tuple
+
+import numpy as np
+from PIL import Image
+import openslide
+from skimage import color
+
+
+def _level_downsample(slide: openslide.OpenSlide, level: int) -> float:
+    return float(slide.level_downsamples[level])
+
+
+def _level_dims(slide: openslide.OpenSlide, level: int) -> Tuple[int, int]:
+    return slide.level_dimensions[level]
+
+
+def _blank_tile(tile_size: int) -> bytes:
+    img = Image.new("RGB", (tile_size, tile_size), (255, 255, 255))
+    buf = BytesIO()
+    img.save(buf, format="JPEG", quality=85)
+    return buf.getvalue()
+
+
+def _channel_from_rgb(rgb: Image.Image, channel: str) -> Image.Image:
+    if channel == "original":
+        return rgb
+
+    arr = np.asarray(rgb).astype(np.float32) / 255.0
+    hed = color.rgb2hed(arr)
+
+    if channel == "hematoxylin":
+        hed_only = np.zeros_like(hed)
+        hed_only[..., 0] = hed[..., 0]
+    elif channel == "eosin":
+        hed_only = np.zeros_like(hed)
+        hed_only[..., 1] = hed[..., 1]
+    else:
+        return rgb
+
+    rgb_stain = color.hed2rgb(hed_only)
+    rgb_stain = np.clip(rgb_stain, 0.0, 1.0)
+
+    # Normalize for better contrast
+    min_val = rgb_stain.min(axis=(0, 1), keepdims=True)
+    max_val = rgb_stain.max(axis=(0, 1), keepdims=True)
+    denom = np.maximum(max_val - min_val, 1e-6)
+    rgb_stain = (rgb_stain - min_val) / denom
+
+    out = (rgb_stain * 255.0).clip(0, 255).astype(np.uint8)
+    return Image.fromarray(out, mode="RGB")
+
+
+def get_tile_jpeg(
+    slide: openslide.OpenSlide,
+    level: int,
+    x: int,
+    y: int,
+    tile_size: int,
+    channel: str = "original",
+) -> bytes:
+    if level < 0 or level >= slide.level_count:
+        raise ValueError("Invalid level")
+
+    level_w, level_h = _level_dims(slide, level)
+
+    px = x * tile_size
+    py = y * tile_size
+
+    if px >= level_w or py >= level_h:
+        return _blank_tile(tile_size)
+
+    downsample = _level_downsample(slide, level)
+    x0 = int(px * downsample)
+    y0 = int(py * downsample)
+
+    region = slide.read_region((x0, y0), level, (tile_size, tile_size))
+    rgb = region.convert("RGB")
+    rgb = _channel_from_rgb(rgb, channel)
+
+    buf = BytesIO()
+    rgb.save(buf, format="JPEG", quality=85)
+    return buf.getvalue()
+
+
+def get_thumbnail_jpeg(
+    slide: openslide.OpenSlide,
+    size: int = 256,
+    channel: str = "original",
+) -> bytes:
+    level = max(slide.level_count - 1, 0)
+    level_w, level_h = _level_dims(slide, level)
+
+    # Read the full lowest-resolution level, then downscale to a fixed thumbnail.
+    region = slide.read_region((0, 0), level, (level_w, level_h))
+    rgb = region.convert("RGB")
+    rgb = _channel_from_rgb(rgb, channel)
+    # Preserve aspect ratio and pad to square so the whole slide is visible.
+    scale = min(size / max(level_w, 1), size / max(level_h, 1))
+    new_w = max(int(level_w * scale), 1)
+    new_h = max(int(level_h * scale), 1)
+    rgb = rgb.resize((new_w, new_h), resample=Image.BILINEAR)
+
+    canvas = Image.new("RGB", (size, size), (255, 255, 255))
+    offset_x = (size - new_w) // 2
+    offset_y = (size - new_h) // 2
+    canvas.paste(rgb, (offset_x, offset_y))
+    rgb = canvas
+
+    buf = BytesIO()
+    rgb.save(buf, format="JPEG", quality=85)
+    return buf.getvalue()

backend/tile_server/requirements.txt

@@ -0,0 +1,6 @@
+fastapi
+uvicorn
+openslide-python
+pillow
+numpy
+scikit-image

frontend/src/components/viewer/AnnotationCanvas.tsx

@@ -0,0 +1,676 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import OpenSeadragon from "openseadragon";
+
+export interface Annotation {
+  id: string;
+  type: "rectangle" | "polygon" | "ellipse" | "brush";
+  points: Array<{ x: number; y: number }>;
+  color: string;
+  label: string;
+  completed: boolean;
+}
+
+interface AnnotationCanvasProps {
+  viewer: OpenSeadragon.Viewer | null;
+  tool: "rectangle" | "polygon" | "ellipse" | "brush" | "select" | "none";
+  onAnnotationComplete: (annotation: Annotation) => void;
+  activeLabel: string;
+  onAnnotationSelected?: (annotationId: string | null) => void;
+  annotations: Annotation[];
+  selectedAnnotationId?: string | null;
+  showAnnotations: boolean;
+}
+
+export function AnnotationCanvas({
+  viewer,
+  tool,
+  onAnnotationComplete,
+  activeLabel,
+  onAnnotationSelected,
+  annotations,
+  selectedAnnotationId,
+  showAnnotations,
+}: AnnotationCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [currentPoints, setCurrentPoints] = useState<Array<{ x: number; y: number }>>([]);
+  const [hoveredAnnotationId, setHoveredAnnotationId] = useState<string | null>(null);
+  const [drawingTool, setDrawingTool] = useState<"rectangle" | "polygon" | "ellipse" | "brush" | null>(null);
+  const [isPanning, setIsPanning] = useState(false);
+  const [lastPanPoint, setLastPanPoint] = useState<{ x: number; y: number } | null>(null);
+
+  const labelColor = (label: string) => {
+    switch (label) {
+      case "Tumor":
+        return "#EF4444";
+      case "Benign":
+        return "#FACC15";
+      case "Stroma":
+        return "#EC4899";
+      case "Necrosis":
+        return "#22C55E";
+      case "DCIS":
+        return "#3B82F6";
+      case "Invasive":
+        return "#8B5CF6";
+      default:
+        return "#9CA3AF";
+    }
+  };
+
+  const toImagePoint = (point: { x: number; y: number }) => {
+    if (!viewer) return point;
+    const viewportPoint = viewer.viewport.pointFromPixel(
+      new OpenSeadragon.Point(point.x, point.y)
+    );
+    const imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
+    return { x: imagePoint.x, y: imagePoint.y };
+  };
+
+  const toScreenPoint = (point: { x: number; y: number }) => {
+    if (!viewer) return point;
+    const viewportPoint = viewer.viewport.imageToViewportCoordinates(
+      new OpenSeadragon.Point(point.x, point.y)
+    );
+    const pixelPoint = viewer.viewport.pixelFromPoint(viewportPoint, true);
+    return { x: pixelPoint.x, y: pixelPoint.y };
+  };
+
+  // Setup canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !viewer) return;
+
+    const updateCanvasSize = () => {
+      canvas.width = viewer.container.clientWidth;
+      canvas.height = viewer.container.clientHeight;
+      redrawAnnotations();
+    };
+
+    updateCanvasSize();
+    
+    // Update canvas size when viewer resizes
+    const resizeObserver = new ResizeObserver(updateCanvasSize);
+    resizeObserver.observe(viewer.container);
+
+    return () => resizeObserver.disconnect();
+  }, [viewer]);
+
+  // Helper function to check if point is inside annotation
+  const isPointInAnnotation = (point: { x: number; y: number }, annotation: Annotation): boolean => {
+    const tolerance = 10; // pixels
+    const screenPoints = annotation.points.map(toScreenPoint);
+    
+    if (annotation.type === "rectangle" && screenPoints.length === 2) {
+      const [p1, p2] = screenPoints;
+      const minX = Math.min(p1.x, p2.x);
+      const maxX = Math.max(p1.x, p2.x);
+      const minY = Math.min(p1.y, p2.y);
+      const maxY = Math.max(p1.y, p2.y);
+      
+      return point.x >= minX - tolerance && point.x <= maxX + tolerance &&
+             point.y >= minY - tolerance && point.y <= maxY + tolerance;
+    } else if (annotation.type === "ellipse" && screenPoints.length === 2) {
+      const [p1, p2] = screenPoints;
+      const cx = (p1.x + p2.x) / 2;
+      const cy = (p1.y + p2.y) / 2;
+      const rx = Math.max(1, Math.abs(p2.x - p1.x) / 2);
+      const ry = Math.max(1, Math.abs(p2.y - p1.y) / 2);
+      const dx = (point.x - cx) / rx;
+      const dy = (point.y - cy) / ry;
+      const dist = Math.abs(dx * dx + dy * dy - 1);
+      const tol = tolerance / Math.max(rx, ry);
+      return dist <= tol;
+    } else if (annotation.type === "polygon" && screenPoints.length > 2) {
+      // Check if point is near any line segment of the polygon
+      const points = screenPoints;
+      for (let i = 0; i < points.length; i++) {
+        const p1 = points[i];
+        const p2 = points[(i + 1) % points.length];
+        
+        const dist = distanceToLineSegment(point, p1, p2);
+        if (dist < tolerance) return true;
+      }
+      // Also check if near any vertex
+      return screenPoints.some(p => 
+        Math.hypot(p.x - point.x, p.y - point.y) < tolerance
+      );
+    } else if (annotation.type === "brush" && screenPoints.length > 1) {
+      for (let i = 0; i < screenPoints.length - 1; i++) {
+        const dist = distanceToLineSegment(point, screenPoints[i], screenPoints[i + 1]);
+        if (dist < tolerance) return true;
+      }
+    }
+    return false;
+  };
+
+  // Helper function to calculate distance from point to line segment
+  const distanceToLineSegment = (
+    point: { x: number; y: number },
+    p1: { x: number; y: number },
+    p2: { x: number; y: number }
+  ): number => {
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const t = Math.max(0, Math.min(1, ((point.x - p1.x) * dx + (point.y - p1.y) * dy) / (dx * dx + dy * dy)));
+    const closestX = p1.x + t * dx;
+    const closestY = p1.y + t * dy;
+    return Math.hypot(point.x - closestX, point.y - closestY);
+  };
+
+  // Handle mouse events for drawing
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !viewer) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const point = { x, y };
+
+      // Update hover state based on tool
+      if (tool === "select") {
+        const hoveredAnnotation = annotations.find(ann => isPointInAnnotation(point, ann));
+        setHoveredAnnotationId(hoveredAnnotation?.id || null);
+        
+        // Change cursor when hovering over annotation
+        if (hoveredAnnotation) {
+          canvas.style.cursor = "pointer";
+        } else {
+          canvas.style.cursor = "default";
+        }
+      } else {
+        setHoveredAnnotationId(null);
+      }
+
+      // Handle select tool panning
+      if (tool === "select" && isPanning && lastPanPoint && viewer) {
+        const dx = x - lastPanPoint.x;
+        const dy = y - lastPanPoint.y;
+        const delta = viewer.viewport.deltaPointsFromPixels(
+          new OpenSeadragon.Point(-dx, -dy),
+          true
+        );
+        viewer.viewport.panBy(delta);
+        viewer.viewport.applyConstraints();
+        setLastPanPoint({ x, y });
+        return;
+      }
+
+      // Handle drawing preview for rectangle/ellipse tool
+      if (isDrawing && (tool === "rectangle" || tool === "ellipse") && currentPoints.length > 0) {
+        const imagePoint = toImagePoint(point);
+        setCurrentPoints([currentPoints[0], imagePoint]);
+      }
+
+      if (isDrawing && tool === "brush" && currentPoints.length > 0) {
+        const imagePoint = toImagePoint(point);
+        const lastPoint = currentPoints[currentPoints.length - 1];
+        if (Math.hypot(imagePoint.x - lastPoint.x, imagePoint.y - lastPoint.y) > 0.5) {
+          setCurrentPoints([...currentPoints, imagePoint]);
+        }
+      }
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const point = { x, y };
+
+      // Allow selection with Ctrl+Click on any annotation (works with any tool)
+      if (e.ctrlKey || e.metaKey) {
+        const selectedAnnotation = annotations.find(ann => isPointInAnnotation(point, ann));
+        if (onAnnotationSelected) {
+          onAnnotationSelected(selectedAnnotation?.id || null);
+        }
+        return;
+      }
+
+      // Handle select tool - click to select annotation, drag to pan
+      if (tool === "select") {
+        const selectedAnnotation = annotations.find(ann => isPointInAnnotation(point, ann));
+        if (selectedAnnotation) {
+          if (onAnnotationSelected) {
+            onAnnotationSelected(selectedAnnotation.id);
+          }
+          return;
+        }
+
+        if (viewer) {
+          setIsPanning(true);
+          setLastPanPoint({ x, y });
+        }
+        return;
+      }
+
+      // Handle drawing tools
+      if (tool === "rectangle") {
+        setIsDrawing(true);
+        setDrawingTool("rectangle");
+        setCurrentPoints([toImagePoint(point)]);
+      } else if (tool === "ellipse") {
+        setIsDrawing(true);
+        setDrawingTool("ellipse");
+        setCurrentPoints([toImagePoint(point)]);
+      } else if (tool === "polygon") {
+        // For polygon, add point on click
+        const imagePoint = toImagePoint(point);
+        const newPoints = [...currentPoints, imagePoint];
+        setCurrentPoints(newPoints);
+        if (currentPoints.length === 0) {
+          setIsDrawing(true);
+          setDrawingTool("polygon");
+        }
+      } else if (tool === "brush") {
+        setIsDrawing(true);
+        setDrawingTool("brush");
+        setCurrentPoints([toImagePoint(point)]);
+      }
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      if (tool === "select" && isPanning) {
+        setIsPanning(false);
+        setLastPanPoint(null);
+        return;
+      }
+
+      if (!isDrawing || (tool !== "rectangle" && tool !== "ellipse" && tool !== "brush")) return;
+
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const imagePoint = toImagePoint({ x, y });
+      if (tool === "brush") {
+        const newPoints = [...currentPoints, imagePoint];
+        setCurrentPoints(newPoints);
+        completeAnnotation(undefined, newPoints);
+        return;
+      }
+
+      setCurrentPoints([currentPoints[0], imagePoint]);
+      completeAnnotation();
+    };
+
+    const handleDblClick = () => {
+      if (tool === "polygon" && isDrawing && currentPoints.length >= 3) {
+        completeAnnotation();
+      }
+    };
+
+    const handleWheel = (e: WheelEvent) => {
+      if (!viewer) return;
+      e.preventDefault();
+
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const zoomPoint = viewer.viewport.pointFromPixel(
+        new OpenSeadragon.Point(x, y)
+      );
+
+      const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
+      viewer.viewport.zoomBy(zoomFactor, zoomPoint);
+      viewer.viewport.applyConstraints();
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isDrawing) {
+        setIsDrawing(false);
+        setCurrentPoints([]);
+      }
+    };
+
+    canvas.addEventListener("mousemove", handleMouseMove);
+    canvas.addEventListener("mousedown", handleMouseDown);
+    canvas.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("dblclick", handleDblClick);
+    canvas.addEventListener("wheel", handleWheel, { passive: false });
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      canvas.removeEventListener("mousemove", handleMouseMove);
+      canvas.removeEventListener("mousedown", handleMouseDown);
+      canvas.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("dblclick", handleDblClick);
+      canvas.removeEventListener("wheel", handleWheel);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isDrawing, currentPoints, tool, viewer, annotations, selectedAnnotationId, onAnnotationSelected, hoveredAnnotationId, isPanning, lastPanPoint]);
+
+  const completeAnnotation = (
+    forcedTool?: "rectangle" | "polygon" | "ellipse" | "brush",
+    forcedPoints?: Array<{ x: number; y: number }>
+  ) => {
+    const points = forcedPoints ?? currentPoints;
+    if (points.length < 2) {
+      setCurrentPoints([]);
+      setIsDrawing(false);
+      setDrawingTool(null);
+      return;
+    }
+
+    const finalTool = forcedTool ?? drawingTool ?? (tool as "rectangle" | "polygon" | "ellipse" | "brush");
+    const annotation: Annotation = {
+      id: `annotation-${Date.now()}`,
+      type: finalTool,
+      points,
+      color: labelColor(activeLabel),
+      label: activeLabel,
+      completed: true,
+    };
+
+    onAnnotationComplete(annotation);
+    setCurrentPoints([]);
+    setIsDrawing(false);
+    setDrawingTool(null);
+    redrawAnnotations();
+  };
+
+  const redrawAnnotations = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (!showAnnotations) return;
+
+    // Draw completed annotations
+    annotations.forEach((annotation) => {
+      const isSelected = selectedAnnotationId === annotation.id;
+      const isHovered = hoveredAnnotationId === annotation.id;
+      const screenPoints = annotation.points.map(toScreenPoint);
+      
+      if (annotation.type === "rectangle" && screenPoints.length === 2) {
+        const [p1, p2] = screenPoints;
+        const x = Math.min(p1.x, p2.x);
+        const y = Math.min(p1.y, p2.y);
+        const width = Math.abs(p2.x - p1.x);
+        const height = Math.abs(p2.y - p1.y);
+
+        // Draw only outline, no fill
+        if (isSelected) {
+          ctx.strokeStyle = "#FCD34D";
+          ctx.lineWidth = 4;
+        } else if (isHovered) {
+          ctx.strokeStyle = "#60A5FA"; // Light blue for hover
+          ctx.lineWidth = 3;
+        } else {
+          ctx.strokeStyle = annotation.color;
+          ctx.lineWidth = 2;
+        }
+        ctx.strokeRect(x, y, width, height);
+        
+        // Add hover indicator
+        if (isHovered) {
+          // Add hover indicator
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(x, y - 22, 65, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", x + 4, y - 18);
+        }
+      } else if (annotation.type === "ellipse" && screenPoints.length === 2) {
+        const [p1, p2] = screenPoints;
+        const cx = (p1.x + p2.x) / 2;
+        const cy = (p1.y + p2.y) / 2;
+        const rx = Math.abs(p2.x - p1.x) / 2;
+        const ry = Math.abs(p2.y - p1.y) / 2;
+
+        if (isSelected) {
+          ctx.strokeStyle = "#FCD34D";
+          ctx.lineWidth = 4;
+        } else if (isHovered) {
+          ctx.strokeStyle = "#60A5FA";
+          ctx.lineWidth = 3;
+        } else {
+          ctx.strokeStyle = annotation.color;
+          ctx.lineWidth = 2;
+        }
+
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, Math.max(1, rx), Math.max(1, ry), 0, 0, Math.PI * 2);
+        ctx.stroke();
+
+        if (isHovered) {
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(cx - 35, cy - ry - 26, 70, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", cx, cy - ry - 22);
+        }
+      } else if (annotation.type === "polygon" && screenPoints.length > 1) {
+        // Determine colors based on state
+        let strokeColor, pointColor;
+        let lineWidth = 2;
+        
+        if (isSelected) {
+          strokeColor = "#FCD34D";
+          pointColor = "#FCD34D";
+          lineWidth = 4;
+        } else if (isHovered) {
+          strokeColor = "#60A5FA";
+          pointColor = "#60A5FA";
+          lineWidth = 3;
+        } else {
+          strokeColor = annotation.color;
+          pointColor = annotation.color;
+        }
+        
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+
+        // Draw main polygon
+        ctx.strokeStyle = strokeColor;
+        ctx.beginPath();
+        ctx.moveTo(screenPoints[0].x, screenPoints[0].y);
+        screenPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        ctx.closePath();
+        ctx.stroke();
+
+        // Draw points as circles
+        ctx.fillStyle = pointColor;
+        screenPoints.forEach((p, index) => {
+          ctx.beginPath();
+          const radius = isSelected ? 7 : isHovered ? 6 : 5;
+          ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
+          ctx.fill();
+          
+          // Draw point numbers
+          ctx.fillStyle = "#FFFFFF";
+          ctx.font = "bold 11px Arial";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText((index + 1).toString(), p.x, p.y);
+          ctx.fillStyle = pointColor;
+        });
+        
+        // Add hover indicator
+        if (isHovered && screenPoints.length > 0) {
+          const firstPoint = screenPoints[0];
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(firstPoint.x + 10, firstPoint.y - 22, 65, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", firstPoint.x + 14, firstPoint.y - 18);
+        }
+      } else if (annotation.type === "brush" && screenPoints.length > 1) {
+        if (isSelected) {
+          ctx.strokeStyle = "#FCD34D";
+          ctx.lineWidth = 4;
+        } else if (isHovered) {
+          ctx.strokeStyle = "#60A5FA";
+          ctx.lineWidth = 3;
+        } else {
+          ctx.strokeStyle = annotation.color;
+          ctx.lineWidth = 2;
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(screenPoints[0].x, screenPoints[0].y);
+        screenPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        ctx.stroke();
+
+        if (isHovered) {
+          const firstPoint = screenPoints[0];
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(firstPoint.x + 10, firstPoint.y - 22, 65, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", firstPoint.x + 14, firstPoint.y - 18);
+        }
+      }
+    });
+
+    // Draw current drawing (preview)
+    if (isDrawing && currentPoints.length > 0) {
+      const color = tool === "rectangle" ? "#EF4444" : "#3B82F6";
+      const previewPoints = currentPoints.map(toScreenPoint);
+
+      if ((tool === "rectangle" || tool === "ellipse") && previewPoints.length === 2) {
+        const [p1, p2] = previewPoints;
+        const x = Math.min(p1.x, p2.x);
+        const y = Math.min(p1.y, p2.y);
+        const width = Math.abs(p2.x - p1.x);
+        const height = Math.abs(p2.y - p1.y);
+
+        // Draw only outline with dashed style, no fill
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        if (tool === "rectangle") {
+          ctx.strokeRect(x, y, width, height);
+        } else {
+          const cx = x + width / 2;
+          const cy = y + height / 2;
+          ctx.beginPath();
+          ctx.ellipse(cx, cy, Math.max(1, width / 2), Math.max(1, height / 2), 0, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+        ctx.setLineDash([]);
+      } else if (tool === "polygon" && previewPoints.length > 1) {
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+
+        ctx.beginPath();
+        ctx.moveTo(previewPoints[0].x, previewPoints[0].y);
+        previewPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        
+        // Close the path only if we have 3+ points
+        if (previewPoints.length >= 3) {
+          ctx.closePath();
+        }
+        
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        // Draw points as solid circles with numbers
+        ctx.fillStyle = color;
+        previewPoints.forEach((p, index) => {
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+          ctx.fill();
+          
+          // Draw point numbers
+          ctx.fillStyle = "#FFFFFF";
+          ctx.font = "bold 11px Arial";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText((index + 1).toString(), p.x, p.y);
+          ctx.fillStyle = color;
+        });
+      } else if (tool === "brush" && previewPoints.length > 1) {
+        ctx.strokeStyle = "#EF4444";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        ctx.beginPath();
+        ctx.moveTo(previewPoints[0].x, previewPoints[0].y);
+        previewPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+  }, [annotations, currentPoints, hoveredAnnotationId, isDrawing, selectedAnnotationId, showAnnotations, tool, viewer]);
+
+  useEffect(() => {
+    redrawAnnotations();
+  }, [redrawAnnotations]);
+
+  useEffect(() => {
+    if (!isDrawing || !drawingTool) return;
+    if (tool === drawingTool) return;
+
+    if (drawingTool === "polygon" && currentPoints.length >= 3) {
+      completeAnnotation(drawingTool);
+      return;
+    }
+
+    if ((drawingTool === "rectangle" || drawingTool === "ellipse") && currentPoints.length === 2) {
+      completeAnnotation(drawingTool);
+      return;
+    }
+
+    if (drawingTool === "brush" && currentPoints.length >= 2) {
+      completeAnnotation(drawingTool);
+      return;
+    }
+
+    setIsDrawing(false);
+    setCurrentPoints([]);
+    setDrawingTool(null);
+  }, [tool, drawingTool, currentPoints, isDrawing]);
+
+  useEffect(() => {
+    if (!viewer) return;
+    const handleViewportChange = () => redrawAnnotations();
+    viewer.addHandler("zoom", handleViewportChange);
+    viewer.addHandler("pan", handleViewportChange);
+    viewer.addHandler("animation", handleViewportChange);
+    viewer.addHandler("open", handleViewportChange);
+
+    return () => {
+      viewer.removeHandler("zoom", handleViewportChange);
+      viewer.removeHandler("pan", handleViewportChange);
+      viewer.removeHandler("animation", handleViewportChange);
+      viewer.removeHandler("open", handleViewportChange);
+    };
+  }, [redrawAnnotations, viewer]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={`absolute inset-0 z-40 ${
+        tool === "none" ? "pointer-events-none cursor-grab" : ""
+      } ${tool === "select" ? "cursor-default" : ""} ${
+        tool === "rectangle" || tool === "polygon" || tool === "ellipse" || tool === "brush"
+          ? "cursor-crosshair"
+          : ""
+      }`}
+      style={{ width: "100%", height: "100%" }}
+    />
+  );
+}

frontend/src/components/viewer/PathoraViewer.tsx

@@ -0,0 +1,570 @@
+import { useEffect, useRef, useState } from "react";
+import OpenSeadragon from "openseadragon";
+import { ToolsSidebar } from "./ToolsSidebar";
+import { TopToolbar } from "./TopToolbar";
+import { AnnotationCanvas, type Annotation } from "./AnnotationCanvas";
+import { ArrowLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import "./viewer.css";
+
+interface PathoraViewerProps {
+  imageUrl?: string;
+  slideName?: string;
+}
+
+export type Tool = "none" | "select" | "rectangle" | "polygon" | "ellipse" | "brush";
+type UploadedSlide = {
+  id: string;
+  name: string;
+  uploadedAt: string;
+  levelCount: number;
+  levelDimensions: number[][];
+};
+
+export function PathoraViewer({ 
+  imageUrl = "", 
+  slideName = "Pathora Viewer" 
+}: PathoraViewerProps) {
+  console.log("PathoraViewer component rendering with:", { imageUrl, slideName });
+  
+  const viewerRef = useRef<HTMLDivElement>(null);
+  const osdViewerRef = useRef<OpenSeadragon.Viewer | null>(null);
+  const navigate = useNavigate();
+  const [selectedTool, setSelectedTool] = useState<Tool>("none");
+  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [showAnnotations, setShowAnnotations] = useState(true);
+  const [showHeatmap, setShowHeatmap] = useState(false);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [selectedAnnotationId, setSelectedAnnotationId] = useState<string | null>(null);
+  const [activeLabel, setActiveLabel] = useState("Tumor");
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [uploadedSlides, setUploadedSlides] = useState<UploadedSlide[]>([]);
+  const [showOriginal, setShowOriginal] = useState(true);
+  const [showHematoxylin, setShowHematoxylin] = useState(false);
+  const [showEosin, setShowEosin] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [tileServerUrl, setTileServerUrl] = useState("http://localhost:8001");
+  const [slideId, setSlideId] = useState("slide-1");
+  const [tileSize, setTileSize] = useState(256);
+  const [tileMode, setTileMode] = useState<"none" | "image" | "tiles">("none");
+  const [slideFile, setSlideFile] = useState<File | null>(null);
+  const [autoSlideId, setAutoSlideId] = useState(true);
+  const [tileMeta, setTileMeta] = useState<{
+    width: number;
+    height: number;
+    level_count: number;
+    level_dimensions: number[][];
+    level_downsamples: number[];
+    mpp_x?: number | null;
+    mpp_y?: number | null;
+  } | null>(null);
+  const [tileLoadError, setTileLoadError] = useState<string | null>(null);
+  const [isTileLoading, setIsTileLoading] = useState(false);
+  const channelItemsRef = useRef<{
+    original?: OpenSeadragon.TiledImage;
+    hematoxylin?: OpenSeadragon.TiledImage;
+    eosin?: OpenSeadragon.TiledImage;
+  }>({});
+
+  const normalizeBaseUrl = (value: string) => {
+    return value.replace(/\/$/, "");
+  };
+
+  const autoSlideIdLabel = autoSlideId ? "Auto ID enabled" : "Manual ID";
+
+  const generateSlideId = () => {
+    const now = new Date();
+    const stamp = now
+      .toISOString()
+      .replace(/[-:]/g, "")
+      .replace("T", "-")
+      .slice(0, 15);
+    const rand = Math.random().toString(36).slice(2, 6);
+    return `slide-${stamp}-${rand}`;
+  };
+
+  const buildTileSource = (meta: {
+    width: number;
+    height: number;
+    level_count: number;
+    level_downsamples: number[];
+  }, channel: "original" | "hematoxylin" | "eosin" = "original") => {
+    const baseUrl = normalizeBaseUrl(tileServerUrl);
+    const maxLevel = Math.max(0, meta.level_count - 1);
+
+    const tileSource = new OpenSeadragon.TileSource({
+      width: meta.width,
+      height: meta.height,
+      tileSize,
+      minLevel: 0,
+      maxLevel,
+    });
+
+    tileSource.getLevelScale = (level: number) => {
+      const slideLevel = Math.max(0, meta.level_count - 1 - level);
+      const downsample = meta.level_downsamples[slideLevel] || 1;
+      return 1 / downsample;
+    };
+
+    tileSource.getTileUrl = (level: number, x: number, y: number) => {
+      const slideLevel = Math.max(0, meta.level_count - 1 - level);
+      return `${baseUrl}/tiles/${slideId}/${slideLevel}/${x}/${y}.jpg?tile_size=${tileSize}&channel=${channel}`;
+    };
+
+    return tileSource;
+  };
+
+  const addUploadedSlide = (
+    id: string,
+    name: string,
+    levelCount: number,
+    levelDimensions: number[][]
+  ) => {
+    const uploadedAt = new Date().toLocaleString();
+    setUploadedSlides((prev) => {
+      const filtered = prev.filter((slide) => slide.id !== id);
+      return [{ id, name, uploadedAt, levelCount, levelDimensions }, ...filtered].slice(0, 20);
+    });
+  };
+
+  const handleLoadSlide = async () => {
+    if (!slideId.trim()) {
+      setTileLoadError("Slide id is required.");
+      return;
+    }
+
+    if (!slideFile) {
+      setTileLoadError("Please choose a WSI file to upload.");
+      return;
+    }
+
+    const baseUrl = normalizeBaseUrl(tileServerUrl);
+    setIsTileLoading(true);
+    setTileLoadError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", slideFile);
+
+      const uploadRes = await fetch(`${baseUrl}/slides/${slideId}/upload`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!uploadRes.ok) {
+        const text = await uploadRes.text();
+        throw new Error(text || "Failed to upload slide");
+      }
+
+      const metaRes = await fetch(`${baseUrl}/slides/${slideId}/metadata`);
+      if (!metaRes.ok) {
+        const text = await metaRes.text();
+        throw new Error(text || "Failed to read metadata");
+      }
+
+      const meta = await metaRes.json();
+      setTileMeta(meta);
+      setTileMode("tiles");
+      addUploadedSlide(
+        slideId,
+        slideFile?.name || "Untitled slide",
+        meta.level_count || 1,
+        meta.level_dimensions || []
+      );
+    } catch (error: any) {
+      setTileLoadError(error?.message || "Failed to upload slide");
+    } finally {
+      setIsTileLoading(false);
+    }
+  };
+
+  const handleSelectUploadedSlide = async (id: string) => {
+    const baseUrl = normalizeBaseUrl(tileServerUrl);
+    setSlideId(id);
+    setTileLoadError(null);
+    setIsTileLoading(true);
+
+    const fetchMeta = async () => {
+      const metaRes = await fetch(`${baseUrl}/slides/${id}/metadata`);
+      if (!metaRes.ok) {
+        const text = await metaRes.text();
+        const error = new Error(text || "Failed to read metadata") as Error & {
+          status?: number;
+        };
+        error.status = metaRes.status;
+        throw error;
+      }
+      return metaRes.json();
+    };
+
+    try {
+      let meta: any;
+      try {
+        meta = await fetchMeta();
+      } catch (error: any) {
+        if (error?.status === 404) {
+          const reloadRes = await fetch(`${baseUrl}/slides/${id}/reload`, { method: "POST" });
+          if (!reloadRes.ok) {
+            const text = await reloadRes.text();
+            throw new Error(text || "Failed to reload slide");
+          }
+          meta = await fetchMeta();
+        } else {
+          throw error;
+        }
+      }
+
+      setTileMeta(meta);
+      setTileMode("tiles");
+    } catch (error: any) {
+      setTileLoadError(error?.message || "Failed to load slide");
+    } finally {
+      setIsTileLoading(false);
+    }
+  };
+
+  // Initialize OpenSeadragon viewer
+  useEffect(() => {
+    if (!viewerRef.current || osdViewerRef.current) return;
+
+    console.log("Initializing OpenSeadragon with image:", imageUrl);
+    console.log("Viewer ref:", viewerRef.current);
+
+    try {
+      const viewer = OpenSeadragon({
+        element: viewerRef.current,
+        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/images/",
+        crossOriginPolicy: "Anonymous",
+        showNavigator: true,
+        navigatorPosition: "BOTTOM_RIGHT",
+        navigatorSizeRatio: 0.15,
+        showNavigationControl: false,
+        minZoomImageRatio: 0.5,
+        maxZoomPixelRatio: 3,
+        visibilityRatio: 0.5,
+        constrainDuringPan: true,
+        animationTime: 0.5,
+        gestureSettingsMouse: {
+          clickToZoom: false,
+          dblClickToZoom: true,
+        },
+      });
+
+      console.log("OpenSeadragon viewer created:", viewer);
+
+      // Add error handler
+      viewer.addHandler("open-failed", (event: any) => {
+        console.error("Failed to open image:", event);
+        setLoadError("Failed to load image. Please check the image path.");
+        setIsLoading(false);
+      });
+
+      // Add success handler
+      viewer.addHandler("open", () => {
+        console.log("Image loaded successfully");
+        setIsLoading(false);
+        setLoadError(null);
+      });
+
+      // Update zoom level on zoom
+      viewer.addHandler("zoom", () => {
+        const zoom = viewer.viewport.getZoom();
+        setZoomLevel(zoom);
+      });
+
+      osdViewerRef.current = viewer;
+
+      return () => {
+        if (osdViewerRef.current) {
+          osdViewerRef.current.destroy();
+          osdViewerRef.current = null;
+        }
+      };
+    } catch (error) {
+      console.error("Error initializing OpenSeadragon:", error);
+    }
+  }, [imageUrl]);
+
+  useEffect(() => {
+    if (!osdViewerRef.current) return;
+
+    const viewer = osdViewerRef.current;
+
+    if (tileMode === "tiles" && tileMeta) {
+      setIsLoading(true);
+      setLoadError(null);
+      viewer.open(buildTileSource(tileMeta, "original"));
+      return;
+    }
+
+    if (tileMode === "image" && imageUrl) {
+      setIsLoading(true);
+      setLoadError(null);
+      viewer.open({
+        type: "image",
+        url: imageUrl,
+      });
+      return;
+    }
+
+    if (tileMode === "none") {
+      setIsLoading(false);
+      setLoadError(null);
+      viewer.close();
+    }
+  }, [imageUrl, tileMeta, tileMode, tileServerUrl, tileSize, slideId]);
+
+  useEffect(() => {
+    if (!osdViewerRef.current || !tileMeta || tileMode !== "tiles") return;
+    const viewer = osdViewerRef.current;
+
+    const originalItem = viewer.world.getItemAt(0);
+    if (originalItem) {
+      channelItemsRef.current.original = originalItem;
+      originalItem.setOpacity(showOriginal ? 1 : 0);
+    }
+
+    const ensureChannel = (
+      key: "hematoxylin" | "eosin",
+      enabled: boolean,
+      channel: "hematoxylin" | "eosin"
+    ) => {
+      const existing = channelItemsRef.current[key];
+      if (existing) {
+        existing.setOpacity(enabled ? 1 : 0);
+        return;
+      }
+      if (!enabled) return;
+
+      viewer.addTiledImage({
+        tileSource: buildTileSource(tileMeta, channel),
+        opacity: 1,
+        success: (event: any) => {
+          channelItemsRef.current[key] = event.item as OpenSeadragon.TiledImage;
+        },
+      });
+    };
+
+    ensureChannel("hematoxylin", showHematoxylin, "hematoxylin");
+    ensureChannel("eosin", showEosin, "eosin");
+  }, [tileMeta, tileMode, showOriginal, showHematoxylin, showEosin, tileServerUrl, tileSize, slideId]);
+
+  const handleAnnotationComplete = (annotation: Annotation) => {
+    console.log("Annotation completed:", annotation);
+    setAnnotations((prev) => [...prev, annotation]);
+    // Auto-select the newly created annotation
+    setSelectedAnnotationId(annotation.id);
+  };
+
+  const handleAnnotationSelected = (annotationId: string | null) => {
+    setSelectedAnnotationId(annotationId);
+  };
+
+  const handleUndo = () => {
+    if (annotations.length > 0) {
+      const newAnnotations = annotations.slice(0, -1);
+      setAnnotations(newAnnotations);
+      setSelectedAnnotationId(null);
+    }
+  };
+
+  const handleDelete = () => {
+    if (selectedAnnotationId) {
+      const newAnnotations = annotations.filter(
+        (ann) => ann.id !== selectedAnnotationId
+      );
+      setAnnotations(newAnnotations);
+      setSelectedAnnotationId(null);
+    }
+  };
+
+  const handleZoomIn = () => {
+    if (osdViewerRef.current) {
+      const currentZoom = osdViewerRef.current.viewport.getZoom();
+      osdViewerRef.current.viewport.zoomTo(currentZoom * 1.2);
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (osdViewerRef.current) {
+      const currentZoom = osdViewerRef.current.viewport.getZoom();
+      osdViewerRef.current.viewport.zoomTo(currentZoom / 1.2);
+    }
+  };
+
+  const zoomPresets = [1, 5, 10, 20, 40];
+  const micronsPerPixel = tileMeta?.mpp_x ?? tileMeta?.mpp_y ?? null;
+  const imageMeta = {
+    stain: "H&E",
+    width: tileMeta?.width ?? null,
+    height: tileMeta?.height ?? null,
+    levelCount: tileMeta?.level_count ?? null,
+    mpp: micronsPerPixel,
+    slideId,
+  };
+  const isTileLoaded = tileMode === "tiles" && !!tileMeta;
+
+  const handleZoomPreset = (level: number) => {
+    if (osdViewerRef.current) {
+      osdViewerRef.current.viewport.zoomTo(level);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-100">
+      {/* Header with back button */}
+      <header className="h-16 bg-gradient-to-r from-teal-700 to-teal-600 text-white flex items-center px-6 shadow-md">
+        <button
+          onClick={() => navigate("/")}
+          className="flex items-center space-x-2 hover:bg-teal-800/50 px-3 py-2 rounded-lg transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span className="font-medium">Back to Analysis</span>
+        </button>
+        <div className="flex-1 text-center">
+          <h1 className="text-2xl font-bold">Pathora Viewer</h1>
+          <p className="text-xs text-teal-100">Advanced Whole Slide Imaging Platform</p>
+        </div>
+        <div className="w-40"></div> {/* Spacer for centering */}
+      </header>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Tools Sidebar */}
+        <ToolsSidebar
+          selectedTool={selectedTool}
+          onToolChange={setSelectedTool}
+          annotations={annotations}
+          selectedAnnotationId={selectedAnnotationId}
+          onSelectAnnotation={handleAnnotationSelected}
+          uploadedSlides={uploadedSlides}
+          tileServerUrl={tileServerUrl}
+          onTileServerUrlChange={setTileServerUrl}
+          onSlideFileChange={(file) => {
+            setSlideFile(file);
+            if (file && autoSlideId) {
+              setSlideId(generateSlideId());
+            }
+          }}
+          slideFileName={slideFile?.name ?? null}
+          onUploadSlide={handleLoadSlide}
+          isTileLoading={isTileLoading}
+          tileLoadError={tileLoadError}
+          onSelectUploadedSlide={handleSelectUploadedSlide}
+          activeLabel={activeLabel}
+          onLabelChange={setActiveLabel}
+          imageMeta={imageMeta}
+          channelVisibility={{
+            original: showOriginal,
+            hematoxylin: showHematoxylin,
+            eosin: showEosin,
+          }}
+          onChannelToggle={(channel, value) => {
+            if (channel === "original") setShowOriginal(value);
+            if (channel === "hematoxylin") setShowHematoxylin(value);
+            if (channel === "eosin") setShowEosin(value);
+          }}
+          isTileLoaded={isTileLoaded}
+          isCollapsed={isSidebarCollapsed}
+          onToggleCollapsed={() => setIsSidebarCollapsed((prev) => !prev)}
+        />
+
+        {/* Main Viewer Area */}
+        <div className="flex-1 flex flex-col">{/* Top Toolbar */}
+          <TopToolbar
+            slideName={slideName}
+            zoomLevel={zoomLevel}
+            zoomPresets={zoomPresets}
+            onZoomPreset={handleZoomPreset}
+            micronsPerPixel={micronsPerPixel}
+            showAnnotations={showAnnotations}
+            showHeatmap={showHeatmap}
+            onUndo={handleUndo}
+            onDelete={handleDelete}
+            onZoomIn={handleZoomIn}
+            onZoomOut={handleZoomOut}
+            onToggleAnnotations={() => setShowAnnotations(!showAnnotations)}
+            onToggleHeatmap={() => setShowHeatmap(!showHeatmap)}
+            canUndo={annotations.length > 0}
+            canDelete={selectedAnnotationId !== null}
+          />
+
+          <div className="flex-1 flex overflow-hidden">
+            {/* Viewer Container */}
+            <div className="flex-1 relative">
+              <div
+                ref={viewerRef}
+                className="absolute inset-0 bg-black"
+                style={{ width: "100%", height: "100%" }}
+              />
+
+              {/* Loading State */}
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
+                  <div className="text-center">
+                    <div className="inline-block animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-teal-500 mb-4"></div>
+                    <p className="text-white text-lg font-semibold">Loading slide viewer...</p>
+                    <p className="text-gray-300 text-sm mt-2">Initializing OpenSeadragon</p>
+                  </div>
+                </div>
+              )}
+
+              {/* Error State */}
+              {loadError && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
+                  <div className="bg-white rounded-lg p-6 max-w-md text-center">
+                    <div className="text-red-500 text-5xl mb-4">⚠️</div>
+                    <h3 className="text-xl font-bold text-gray-800 mb-2">Failed to Load Image</h3>
+                    <p className="text-gray-600 mb-4">{loadError}</p>
+                    <button
+                      onClick={() => window.location.reload()}
+                      className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
+                    >
+                      Retry
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Annotation Canvas */}
+              <AnnotationCanvas
+                viewer={osdViewerRef.current}
+                tool={selectedTool}
+                onAnnotationComplete={handleAnnotationComplete}
+                activeLabel={activeLabel}
+                onAnnotationSelected={handleAnnotationSelected}
+                annotations={annotations}
+                selectedAnnotationId={selectedAnnotationId}
+                showAnnotations={showAnnotations}
+              />
+            
+
+            {/* Annotations count */}
+            {showAnnotations && annotations.length > 0 && (
+              <div className="absolute bottom-4 left-4 bg-white px-3 py-2 rounded shadow-md text-sm z-40">
+                <span className="font-semibold">Annotations:</span> {annotations.length}
+              </div>
+            )}
+
+            {/* Heatmap overlay placeholder */}
+            {showHeatmap && (
+              <div className="absolute inset-0 pointer-events-none bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-green-500/20" />
+            )}
+
+              {tileMode === "none" && !isLoading && !loadError && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-900/60 z-40">
+                  <div className="rounded-lg px-5 py-4 text-center">
+                    <div className="text-sm font-semibold text-white">Upload a WSI to start</div>
+                    <div className="text-xs text-white/80 mt-1">
+                      Use the uploader in the left Uploads tab to load a slide.
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/viewer/ToolsSidebar.tsx

@@ -0,0 +1,464 @@
+import { useState } from "react";
+import { MousePointer, Square, Pentagon, Circle, Brush, ChevronLeft, ChevronRight } from "lucide-react";
+import { Tool } from "./PathoraViewer";
+import { type Annotation } from "./AnnotationCanvas";
+
+interface ToolsSidebarProps {
+  selectedTool: Tool;
+  onToolChange: (tool: Tool) => void;
+  annotations: Annotation[];
+  selectedAnnotationId: string | null;
+  onSelectAnnotation: (annotationId: string | null) => void;
+  uploadedSlides: Array<{
+    id: string;
+    name: string;
+    uploadedAt: string;
+    levelCount: number;
+    levelDimensions: number[][];
+  }>;
+  tileServerUrl: string;
+  onTileServerUrlChange: (value: string) => void;
+  onSlideFileChange: (file: File | null) => void;
+  slideFileName: string | null;
+  onUploadSlide: () => void;
+  isTileLoading: boolean;
+  tileLoadError: string | null;
+  onSelectUploadedSlide: (slideId: string) => void;
+  activeLabel: string;
+  onLabelChange: (label: string) => void;
+  imageMeta: {
+    stain: string;
+    width: number | null;
+    height: number | null;
+    levelCount: number | null;
+    mpp: number | null;
+    slideId: string;
+  };
+  channelVisibility: {
+    original: boolean;
+    hematoxylin: boolean;
+    eosin: boolean;
+  };
+  onChannelToggle: (channel: "original" | "hematoxylin" | "eosin", value: boolean) => void;
+  isTileLoaded: boolean;
+  isCollapsed: boolean;
+  onToggleCollapsed: () => void;
+}
+
+export function ToolsSidebar({
+  selectedTool,
+  onToolChange,
+  annotations,
+  selectedAnnotationId,
+  onSelectAnnotation,
+  uploadedSlides,
+  tileServerUrl,
+  onTileServerUrlChange,
+  onSlideFileChange,
+  slideFileName,
+  onUploadSlide,
+  isTileLoading,
+  tileLoadError,
+  onSelectUploadedSlide,
+  activeLabel,
+  onLabelChange,
+  imageMeta,
+  channelVisibility,
+  onChannelToggle,
+  isTileLoaded,
+  isCollapsed,
+  onToggleCollapsed,
+}: ToolsSidebarProps) {
+  const [activeTab, setActiveTab] = useState<"tools" | "image" | "images" | "annotations">("tools");
+
+  const tools = [
+    { id: "select" as Tool, label: "Select", icon: MousePointer },
+    { id: "rectangle" as Tool, label: "Rectangle", icon: Square },
+    { id: "polygon" as Tool, label: "Polygon", icon: Pentagon },
+    { id: "ellipse" as Tool, label: "Ellipse", icon: Circle },
+    { id: "brush" as Tool, label: "Brush", icon: Brush },
+  ];
+
+  const annotationLabel = (annotation: Annotation, index: number) => {
+    if (annotation.label && annotation.label.trim().length > 0) {
+      return annotation.label;
+    }
+
+    return annotation.type === "rectangle"
+      ? "Rectangle"
+      : annotation.type === "polygon"
+        ? "Polygon"
+        : annotation.type === "ellipse"
+          ? "Ellipse"
+          : "Brush";
+  };
+
+  const normalizePoints = (points: Array<{ x: number; y: number }>, size = 24) => {
+    if (points.length === 0) return [];
+    const xs = points.map((p) => p.x);
+    const ys = points.map((p) => p.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    const width = Math.max(maxX - minX, 1);
+    const height = Math.max(maxY - minY, 1);
+    const padding = 2;
+    const scale = Math.min((size - padding * 2) / width, (size - padding * 2) / height);
+
+    return points.map((p) => ({
+      x: (p.x - minX) * scale + padding,
+      y: (p.y - minY) * scale + padding,
+    }));
+  };
+
+  const normalizeBaseUrl = (value: string) => value.replace(/\/$/, "");
+  const baseTileUrl = normalizeBaseUrl(tileServerUrl);
+  const thumbnailSize = 192;
+
+  const renderAnnotationPreview = (annotation: Annotation) => {
+    const size = 24;
+    const stroke = annotation.color || "#9CA3AF";
+    const normalized = normalizePoints(annotation.points, size);
+
+    if (annotation.type === "rectangle" && normalized.length >= 2) {
+      const [p1, p2] = normalized;
+      const x = Math.min(p1.x, p2.x);
+      const y = Math.min(p1.y, p2.y);
+      const width = Math.abs(p2.x - p1.x);
+      const height = Math.abs(p2.y - p1.y);
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <rect x={x} y={y} width={width} height={height} fill="none" stroke={stroke} strokeWidth="2" />
+        </svg>
+      );
+    }
+
+    if (annotation.type === "ellipse" && normalized.length >= 2) {
+      const [p1, p2] = normalized;
+      const cx = (p1.x + p2.x) / 2;
+      const cy = (p1.y + p2.y) / 2;
+      const rx = Math.abs(p2.x - p1.x) / 2;
+      const ry = Math.abs(p2.y - p1.y) / 2;
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <ellipse cx={cx} cy={cy} rx={Math.max(1, rx)} ry={Math.max(1, ry)} fill="none" stroke={stroke} strokeWidth="2" />
+        </svg>
+      );
+    }
+
+    if ((annotation.type === "polygon" || annotation.type === "brush") && normalized.length >= 2) {
+      const path = normalized.map((p, idx) => `${idx === 0 ? "M" : "L"}${p.x} ${p.y}`).join(" ");
+      const closed = annotation.type === "polygon" ? " Z" : "";
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <path d={`${path}${closed}`} fill="none" stroke={stroke} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+        </svg>
+      );
+    }
+
+    return (
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <rect x="4" y="4" width="16" height="16" fill="none" stroke={stroke} strokeWidth="2" />
+      </svg>
+    );
+  };
+
+  return (
+    <aside
+      className={`bg-gray-800 border-r border-gray-700 flex flex-col py-4 transition-all duration-300 ${
+        isCollapsed ? "w-20" : "w-72"
+      }`}
+    >
+      <div className={`flex items-center justify-between px-3 ${isCollapsed ? "mb-2" : "mb-3"}`}>
+        <div className="text-white text-xs font-semibold">
+          {isCollapsed ? "" : "PANEL"}
+        </div>
+        <button
+          onClick={onToggleCollapsed}
+          className="p-1 rounded hover:bg-gray-700 text-gray-300"
+          title={isCollapsed ? "Expand panel" : "Collapse panel"}
+        >
+          {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+        </button>
+      </div>
+
+      <div className={`h-px ${isCollapsed ? "mx-3" : "mx-4"} bg-gray-600 mb-3`} />
+
+      {!isCollapsed && (
+        <div className="px-3 mb-3">
+          <div className="flex items-center bg-gray-700 rounded-lg p-1 text-[11px]">
+            {([
+              { id: "tools", label: "Tools" },
+              { id: "images", label: "Uploads" },
+              { id: "image", label: "Image" },
+              { id: "annotations", label: "Annotations" },
+            ] as const).map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex-1 px-2 py-1 rounded-md transition-colors ${
+                  activeTab === tab.id
+                    ? "bg-teal-600 text-white"
+                    : "text-gray-200 hover:bg-gray-600"
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {(isCollapsed || activeTab === "tools") && (
+        <div className="px-3">
+          {!isCollapsed && (
+            <div className="mb-3">
+              <label className="block text-[11px] text-gray-300 mb-1">Annotation label</label>
+              <select
+                value={activeLabel}
+                onChange={(e) => onLabelChange(e.target.value)}
+                className="w-full text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded px-2 py-1"
+              >
+                <option value="Tumor">Tumor</option>
+                <option value="Benign">Benign</option>
+                <option value="Stroma">Stroma</option>
+                <option value="Necrosis">Necrosis</option>
+                <option value="DCIS">DCIS</option>
+                <option value="Invasive">Invasive</option>
+              </select>
+            </div>
+          )}
+
+          <div className={`grid ${isCollapsed ? "grid-cols-1" : "grid-cols-2"} gap-2`}>
+            {tools.map((tool) => {
+              const Icon = tool.icon;
+              const isSelected = selectedTool === tool.id;
+
+              return (
+                <button
+                  key={tool.id}
+                  onClick={() => onToolChange(isSelected ? "none" : tool.id)}
+                  className={`
+                    h-14 flex flex-col items-center justify-center rounded-lg
+                    transition-all duration-200
+                    ${
+                      isSelected
+                        ? "bg-teal-600 text-white shadow-lg"
+                        : "bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white"
+                    }
+                  `}
+                  title={tool.label}
+                >
+                  <Icon className="w-5 h-5" />
+                  {!isCollapsed && (
+                    <span className="text-[10px] mt-1 font-medium">{tool.label}</span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {!isCollapsed && activeTab === "image" && (
+        <div className="mt-2 px-3">
+          <div className="text-xs font-semibold text-gray-200 mb-2">Slide metadata</div>
+          <div className="space-y-2 text-[11px] text-gray-300">
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Stain</span>
+              <span>{imageMeta.stain}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Size</span>
+              <span>
+                {imageMeta.width && imageMeta.height
+                  ? `${imageMeta.width} x ${imageMeta.height}`
+                  : "n/a"}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Levels</span>
+              <span>{imageMeta.levelCount ?? "n/a"}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">MPP</span>
+              <span>{imageMeta.mpp ? `${imageMeta.mpp.toFixed(3)} µm/px` : "n/a"}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Case / Slide</span>
+              <span className="text-right max-w-[130px] truncate">{imageMeta.slideId}</span>
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <div className="text-xs font-semibold text-gray-200 mb-2">Channels</div>
+            <div className="space-y-2 text-[11px] text-gray-300">
+              {([
+                { id: "original", label: "Original", color: "bg-gray-400" },
+                { id: "hematoxylin", label: "Hematoxylin", color: "bg-indigo-500" },
+                { id: "eosin", label: "Eosin", color: "bg-pink-500" },
+              ] as const).map((channel) => (
+                <label
+                  key={channel.id}
+                  className={`flex items-center justify-between rounded px-2 py-1 border border-gray-700 ${
+                    isTileLoaded ? "hover:bg-gray-700/50" : "opacity-50"
+                  }`}
+                >
+                  <span className="flex items-center gap-2">
+                    <span className={`w-3 h-3 rounded-sm ${channel.color}`} />
+                    {channel.label}
+                  </span>
+                  <input
+                    type="radio"
+                    name="channel"
+                    disabled={!isTileLoaded}
+                    checked={channelVisibility[channel.id]}
+                    onChange={() => {
+                      onChannelToggle("original", channel.id === "original");
+                      onChannelToggle("hematoxylin", channel.id === "hematoxylin");
+                      onChannelToggle("eosin", channel.id === "eosin");
+                    }}
+                    className="accent-teal-500"
+                  />
+                </label>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!isCollapsed && activeTab === "images" && (
+        <div className="mt-2 px-3">
+          <div className="text-xs font-semibold text-gray-200 mb-2">Uploaded images</div>
+          <div className="space-y-2 mb-3">
+            <label className="block text-[11px] text-gray-300">Tile server URL</label>
+            <input
+              value={tileServerUrl}
+              onChange={(e) => onTileServerUrlChange(e.target.value)}
+              className="w-full text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded px-2 py-1"
+              placeholder="http://localhost:8001"
+            />
+
+            <label className="block text-[11px] text-gray-300">WSI file (SVS/TIFF)</label>
+            <input
+              type="file"
+              accept=".svs,.tif,.tiff"
+              onChange={(e) => {
+                const file = e.target.files?.[0] ?? null;
+                onSlideFileChange(file);
+              }}
+              className="w-full text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded px-2 py-1"
+            />
+            {slideFileName && (
+              <p className="text-[11px] text-gray-400">Selected: {slideFileName}</p>
+            )}
+
+            <button
+              onClick={onUploadSlide}
+              disabled={isTileLoading}
+              className="w-full bg-teal-600 text-white text-xs font-semibold py-1.5 rounded hover:bg-teal-700 disabled:opacity-60"
+            >
+              {isTileLoading ? "Uploading slide..." : "Load Image"}
+            </button>
+
+            {tileLoadError && (
+              <p className="text-[11px] text-red-400">{tileLoadError}</p>
+            )}
+          </div>
+          <div className="text-[11px] text-gray-400 mb-2">
+            {uploadedSlides.length} total
+          </div>
+          <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-2">
+            {uploadedSlides.length === 0 && (
+              <div className="text-[11px] text-gray-500 bg-gray-700/40 rounded p-2">
+                No uploads yet
+              </div>
+            )}
+            {uploadedSlides.map((slide) => (
+              <button
+                key={slide.id}
+                type="button"
+                onClick={() => onSelectUploadedSlide(slide.id)}
+                className={`w-full rounded border px-2 py-2 text-[11px] transition-colors h-[88px] ${
+                  slide.id === imageMeta.slideId
+                    ? "bg-teal-600/20 border-teal-500 text-teal-100"
+                    : "bg-gray-700/40 border-gray-700 text-gray-200"
+                }`}
+              >
+                <div className="flex items-center gap-3 h-full">
+                  <div className="w-16 h-16 rounded bg-white border border-gray-700 overflow-hidden flex-shrink-0">
+                    <img
+                      src={`${baseTileUrl}/slides/${slide.id}/thumbnail?size=${thumbnailSize}&channel=original`}
+                      alt={`WSI preview ${slide.id}`}
+                      className="w-full h-full object-contain"
+                      loading="lazy"
+                    />
+                  </div>
+                  <div className="min-w-0 text-left">
+                    <div className="text-xs font-semibold truncate text-left">{slide.name}</div>
+                    <div className="text-[10px] text-gray-400 truncate text-left">{slide.uploadedAt}</div>
+                    <div className="text-[10px] text-gray-400 truncate text-left">{slide.id}</div>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!isCollapsed && activeTab === "annotations" && (
+        <div className="mt-4 px-3">
+          <div className="text-xs font-semibold text-gray-200 mb-2">Annotations</div>
+          <div className="text-[11px] text-gray-400 mb-2">
+            {annotations.length} total
+          </div>
+          <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-1">
+            {annotations.length === 0 && (
+              <div className="text-[11px] text-gray-500 bg-gray-700/40 rounded p-2">
+                No annotations yet
+              </div>
+            )}
+            {annotations.map((annotation, index) => {
+              const isActive = annotation.id === selectedAnnotationId;
+              const label = annotationLabel(annotation, index);
+              return (
+                <button
+                  key={annotation.id}
+                  onClick={() => onSelectAnnotation(annotation.id)}
+                  className={`w-full text-left px-2 py-2 rounded border transition-colors ${
+                    isActive
+                      ? "bg-teal-600/20 border-teal-500 text-teal-100"
+                      : "bg-gray-700/40 border-gray-700 text-gray-200 hover:bg-gray-700"
+                  }`}
+                  title={annotation.id}
+                >
+                  <div className="flex items-center gap-2">
+                    <div className="w-7 h-7 flex items-center justify-center rounded bg-gray-800/60 border border-gray-700">
+                      {renderAnnotationPreview(annotation)}
+                    </div>
+                    <span className="text-xs font-semibold truncate text-left flex-1">{label}</span>
+                    <span className="text-[10px] text-gray-400">
+                      {annotation.type === "rectangle"
+                        ? "Rect"
+                        : annotation.type === "polygon"
+                          ? "Poly"
+                          : annotation.type === "ellipse"
+                            ? "Ell"
+                            : "Brush"}
+                    </span>
+                  </div>
+                  <div className="text-[10px] text-gray-400 truncate">
+                    {annotation.id}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1" />
+    </aside>
+  );
+}

frontend/src/components/viewer/TopToolbar.tsx

@@ -0,0 +1,182 @@
+import { Undo2, Trash2, ZoomIn, ZoomOut, Eye, EyeOff, Layers } from "lucide-react";
+
+interface TopToolbarProps {
+  slideName: string;
+  zoomLevel: number;
+  zoomPresets: number[];
+  onZoomPreset: (level: number) => void;
+  micronsPerPixel?: number | null;
+  showAnnotations: boolean;
+  showHeatmap: boolean;
+  onUndo: () => void;
+  onDelete: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onToggleAnnotations: () => void;
+  onToggleHeatmap: () => void;
+  canUndo: boolean;
+  canDelete: boolean;
+}
+
+export function TopToolbar({
+  slideName,
+  zoomLevel,
+  zoomPresets,
+  onZoomPreset,
+  micronsPerPixel,
+  showAnnotations,
+  showHeatmap,
+  onUndo,
+  onDelete,
+  onZoomIn,
+  onZoomOut,
+  onToggleAnnotations,
+  onToggleHeatmap,
+  canUndo,
+  canDelete,
+}: TopToolbarProps) {
+  const scaleBarPixels = 90;
+  const safeZoom = Math.max(zoomLevel, 0.0001);
+  const microns = micronsPerPixel ? (micronsPerPixel * scaleBarPixels) / safeZoom : null;
+  const micronsLabel = microns
+    ? `${microns >= 100 ? Math.round(microns) : microns.toFixed(1)} µm`
+    : "";
+
+  const isActivePreset = (preset: number) => {
+    return Math.abs(zoomLevel - preset) < 0.5;
+  };
+
+  return (
+    <div className="min-h-14 bg-white border-b border-gray-200 flex flex-wrap items-center justify-between gap-3 px-4 py-2 shadow-sm">
+      {/* Left Section: Slide Info */}
+      <div className="flex items-center gap-3">
+        <div>
+          <h2 className="text-base font-semibold text-gray-800">{slideName}</h2>
+          <p className="text-[11px] text-gray-500">
+            Zoom: {zoomLevel.toFixed(2)}x
+          </p>
+        </div>
+      </div>
+
+      {/* Center-Left Section: Annotation Controls */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onUndo}
+          disabled={!canUndo}
+          className={`px-2 py-1 rounded-md flex items-center gap-1.5 transition-all ${
+            canUndo
+              ? "bg-blue-600 text-white hover:bg-blue-700"
+              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+          title="Undo last annotation"
+        >
+          <Undo2 className="w-3.5 h-3.5" />
+          <span className="text-[11px] font-semibold">Undo</span>
+        </button>
+
+        <button
+          onClick={onDelete}
+          disabled={!canDelete}
+          className={`px-2 py-1 rounded-md flex items-center gap-1.5 transition-all ${
+            canDelete
+              ? "bg-red-600 text-white hover:bg-red-700"
+              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+          title="Delete selected annotation"
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+          <span className="text-[11px] font-semibold">Delete</span>
+        </button>
+      </div>
+
+      {/* Center Section: Zoom Controls */}
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
+          {zoomPresets.map((preset) => (
+            <button
+              key={preset}
+              onClick={() => onZoomPreset(preset)}
+              className={`px-2 py-1 rounded-md text-[11px] font-semibold border transition-colors ${
+                isActivePreset(preset)
+                  ? "bg-teal-600 text-white border-teal-600"
+                  : "bg-white text-gray-700 border-gray-300 hover:bg-gray-100"
+              }`}
+              title={`Set zoom to ${preset}x`}
+            >
+              {preset}x
+            </button>
+          ))}
+        </div>
+        <button
+          onClick={onZoomOut}
+          className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+          title="Zoom Out"
+        >
+          <ZoomOut className="w-4.5 h-4.5 text-gray-700" />
+        </button>
+
+        <button
+          onClick={onZoomIn}
+          className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+          title="Zoom In"
+        >
+          <ZoomIn className="w-4.5 h-4.5 text-gray-700" />
+        </button>
+      </div>
+
+      {/* Right Section: Scale + Toggle Buttons */}
+      <div className="flex items-center gap-3">
+        {micronsPerPixel && (
+          <div className="flex items-center gap-2">
+            <div className="text-[11px] text-gray-500">Scale</div>
+            <div className="flex flex-col items-end">
+              <div
+                className="h-1 bg-gray-700 rounded"
+                style={{ width: scaleBarPixels }}
+              />
+              <div className="text-[11px] text-gray-600 mt-1">{micronsLabel}</div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-center gap-2">
+        <button
+          onClick={onToggleAnnotations}
+          className={`
+            px-3 py-1.5 rounded-lg flex items-center gap-2 transition-all
+            ${
+              showAnnotations
+                ? "bg-teal-100 text-teal-700 border border-teal-300"
+                : "bg-gray-100 text-gray-600 border border-gray-300 hover:bg-gray-200"
+            }
+          `}
+          title="Toggle Annotations"
+        >
+          {showAnnotations ? (
+            <Eye className="w-4 h-4" />
+          ) : (
+            <EyeOff className="w-4 h-4" />
+          )}
+          <span className="text-[11px] font-medium">Annotations</span>
+        </button>
+
+        <button
+          onClick={onToggleHeatmap}
+          className={`
+            px-3 py-1.5 rounded-lg flex items-center gap-2 transition-all
+            ${
+              showHeatmap
+                ? "bg-orange-100 text-orange-700 border border-orange-300"
+                : "bg-gray-100 text-gray-600 border border-gray-300 hover:bg-gray-200"
+            }
+          `}
+          title="Toggle Heatmap"
+        >
+          <Layers className="w-4 h-4" />
+          <span className="text-[11px] font-medium">Heatmap</span>
+        </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/viewer/index.ts

@@ -0,0 +1,5 @@
+export { PathoraViewer } from "./PathoraViewer";
+export { ToolsSidebar } from "./ToolsSidebar";
+export { TopToolbar } from "./TopToolbar";
+export { AnnotationCanvas, type Annotation } from "./AnnotationCanvas";
+export type { Tool } from "./PathoraViewer";

frontend/src/components/viewer/viewer.css

@@ -0,0 +1,58 @@
+/* OpenSeadragon Navigator Styling */
+.navigator {
+  border: 2px solid #14b8a6 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* OpenSeadragon Display Region (current view indicator in minimap) */
+.displayregion {
+  border: 2px solid #0d9488 !important;
+  background-color: rgba(20, 184, 166, 0.2) !important;
+}
+
+/* Annotation Canvas Styling */
+canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+/* Crosshair cursor for drawing tools */
+.crosshair {
+  cursor: crosshair !important;
+}
+
+/* Default cursor */
+.viewer-container {
+  cursor: default;
+}
+
+/* Pan cursor */
+.pan-cursor {
+  cursor: grab !important;
+}
+
+.pan-cursor:active {
+  cursor: grabbing !important;
+}
+
+/* Smooth transitions */
+.openseadragon-canvas {
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Annotation overlay z-index stacking */
+.viewer-controls {
+  position: relative;
+  z-index: 30;
+}
+
+.annotation-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 40;
+}
+
+.osd-navigator {
+  z-index: 45;
+}