# viewer.html Changes for Multi-Viewport Support

**File**: `src/viewers/dicom/viewer.html`

## Summary

To enable multi-viewport functionality, we need to:
1. Add new CSS for viewport grid layouts
2. Add layout controls to toolbar
3. Replace single canvas with viewport grid container
4. Load new viewport classes before viewer.js

---

## 1. CSS Changes (Add to `<style>` section)

### Add after `.divider` style (around line 104):

```css
/* Layout Controls */
.layout-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.layout-label {
  font-size: 11px;
  color: #888;
  margin-right: 4px;
}

.layout-btn {
  background: #2d2d2d;
  border: 1px solid #444;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 42px;
  text-align: center;
}

.layout-btn:hover {
  background: #3d3d3d;
  border-color: #0066cc;
}

.layout-btn.active {
  background: #0066cc;
  border-color: #0066cc;
}

/* Viewport Controls */
.viewport-controls {
  display: flex;
  gap: 6px;
}

#link-viewports-btn.active {
  background: #0066cc;
  border-color: #0066cc;
}
```

### Replace `.viewer-container` and `#dicom-canvas` styles (around line 627-648):

```css
/* Viewer Container - Updated for Grid */
.viewer-container {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  background: #000;
  transition: margin-left 0.3s ease, margin-right 0.3s ease;
}

/* Viewport Grid Container */
.viewport-grid-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.viewport-grid {
  display: grid;
  gap: 2px;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
}

/* Grid Layouts */
.viewport-grid.layout-1x1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.viewport-grid.layout-2x2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.viewport-grid.layout-3x3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

/* Viewport Cell */
.viewport-cell {
  position: relative;
  background: #1a1a1a;
  border: 2px solid #333;
  overflow: hidden;
  cursor: crosshair;
  transition: border-color 0.2s ease;
}

.viewport-cell.active {
  border-color: #0066cc;
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
}

.viewport-cell canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Viewport Overlay */
.viewport-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  pointer-events: none;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.viewport-label {
  font-weight: 600;
  margin-bottom: 4px;
}

.viewport-series-info,
.viewport-image-info {
  font-size: 10px;
  color: #ccc;
}

/* Empty State */
.viewport-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
  pointer-events: none;
}

.viewport-empty-state.hidden {
  display: none;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.empty-text {
  font-size: 12px;
}
```

---

## 2. Toolbar Changes (Update toolbar HTML)

### Find the toolbar section (around line 775-835) and update it:

**Current**:
```html
<div class="toolbar">
  <!-- Existing tool buttons -->
  <button class="tool-btn" id="zoom-in" title="Zoom In">🔍+</button>
  <button class="tool-btn" id="zoom-out" title="Zoom Out">🔍-</button>
  <!-- ... more buttons ... -->
</div>
```

**Add AFTER the existing tool buttons, BEFORE the `#series-controls` div**:

```html
<!-- Layout Controls -->
<div class="divider"></div>
<div class="layout-controls">
  <div class="layout-label">Layout:</div>
  <button class="layout-btn active" data-layout="1x1" title="Single viewport">1×1</button>
  <button class="layout-btn" data-layout="2x2" title="2×2 grid">2×2</button>
  <button class="layout-btn" data-layout="3x3" title="3×3 grid">3×3</button>
</div>

<!-- Viewport Controls -->
<div class="divider"></div>
<div class="viewport-controls">
  <button class="tool-btn" id="link-viewports-btn" title="Link viewports (synchronized scrolling)">🔗</button>
  <button class="tool-btn" id="clear-viewport-btn" title="Clear active viewport">✕</button>
</div>
```

---

## 3. Viewer Container Changes

### Find the `.viewer-container` div (around line 941) and REPLACE:

**Current**:
```html
<div class="viewer-container" id="viewer-container">
  <!-- Loading state -->
  <div class="loading" id="loading">
    <div class="spinner"></div>
    <p>Loading DICOM image...</p>
  </div>

  <!-- Canvas for rendering -->
  <div id="dicom-canvas"></div>

  <!-- Error state -->
  <div class="error" id="error" style="display: none;">
    <h2>Failed to load DICOM</h2>
    <p id="error-message"></p>
  </div>

  <!-- Placeholder -->
  <div class="placeholder" id="placeholder" style="display: none;">
    ...
  </div>

  <!-- Info panel -->
  <div class="info-panel" id="info-panel" style="display: none;">
    ...
  </div>
</div>
```

**Replace with**:
```html
<div class="viewer-container" id="viewer-container">
  <!-- Viewport Grid Container -->
  <div class="viewport-grid-container">
    <div class="viewport-grid layout-1x1" id="viewport-grid" data-layout="1x1">
      <!-- Viewports will be created dynamically by ViewportManager -->
    </div>
  </div>

  <!-- Loading state (for initial load) -->
  <div class="loading" id="loading" style="display: none;">
    <div class="spinner"></div>
    <p>Loading DICOM viewer...</p>
  </div>

  <!-- Error state (for initialization errors) -->
  <div class="error" id="error" style="display: none;">
    <h2>Failed to initialize viewer</h2>
    <p id="error-message"></p>
  </div>

  <!-- Placeholder (for development/testing) -->
  <div class="placeholder" id="placeholder" style="display: none;">
    <h2>DICOM Viewer</h2>
    <p>No DICOM file loaded. Use the folder browser to select a series.</p>
  </div>
</div>
```

**Note**: The `info-panel` is removed as it will be replaced by per-viewport overlays.

---

## 4. Script Loading Changes

### Find the script loading section in `<head>` (around line 10-15):

**Current**:
```html
<script src="lib-loader.js"></script>

<!-- DICOM Radiology Analysis Modules -->
<script type="module" src="dicom-processor.js"></script>
<script type="module" src="claude-radiology-api.js"></script>
<script type="module" src="radiology-analyzer.js"></script>
```

**Add AFTER lib-loader.js loads (will be loaded by lib-loader.js)**:

The lib-loader.js needs to be updated to load viewport.js and viewport-manager.js BEFORE viewer.js.

---

## 5. lib-loader.js Changes

**File**: `src/viewers/dicom/lib-loader.js`

### Find where viewer.js is loaded and UPDATE:

**Current**:
```javascript
// Load viewer.js last
await loadScript('viewer.js');
```

**Replace with**:
```javascript
// Load viewport classes before viewer
await loadScript('viewport.js');
await loadScript('viewport-manager.js');
await loadScript('viewer.js');
```

---

## Summary of Changes

| Section | Action | Lines | Description |
|---------|--------|-------|-------------|
| CSS | Add | After line 104 | Layout controls styling |
| CSS | Replace | Lines 627-648 | Viewport grid styling |
| Toolbar HTML | Add | ~line 810 | Layout controls buttons |
| Toolbar HTML | Add | ~line 815 | Viewport controls buttons |
| Viewer HTML | Replace | ~line 941 | Grid container instead of single canvas |
| lib-loader.js | Update | N/A | Load viewport classes before viewer.js |

---

## Testing After Changes

1. **Reload viewer**: Open viewer.html in browser
2. **Check console**: Should see viewport classes loading
3. **Check UI**: Should see layout buttons (1×1, 2×2, 3×3) in toolbar
4. **Check grid**: Should see single viewport by default (1×1)
5. **Click 2×2**: Should create 4 viewports in grid
6. **Load series**: Click folder in folder browser, should load into active viewport
7. **Click viewport**: Should activate viewport (blue border)
8. **Click link button**: Should enable synchronized scrolling

---

## Next Steps After HTML Changes

1. Update lib-loader.js to load viewport classes
2. Refactor viewer.js to use ViewportManager
3. Update loadFolder() to use viewport manager
4. Test all functionality

---

## File Locations

- Main file: `src/viewers/dicom/viewer.html`
- Script loader: `src/viewers/dicom/lib-loader.js`
- New classes: `src/viewers/dicom/viewport.js`, `src/viewers/dicom/viewport-manager.js`
- Main viewer: `src/viewers/dicom/viewer.js`
