# Testing Guide: DICOM Viewer Sequential Loading Fix

**Date**: 2025-01-12
**Fix Applied**: Sequential script loading to resolve SUPPORT_POINTER_EVENTS error

---

## Quick Test Steps

### 1. Reload Extension

1. Open Chrome and go to `chrome://extensions`
2. Find "Filevine Document Viewer" extension
3. Click the **reload icon** (circular arrow) to reload the extension
4. Verify no errors appear in the extension card

---

### 2. Test DICOM Viewer

#### Method A: Via Sidebar (Recommended)

1. Navigate to a Filevine page (e.g., `https://*.filevineapp.com`)
2. Click the extension icon to open the sidebar
3. Select a project with DICOM files
4. Click "Download" on a DICOM file (.dcm extension)
5. Wait for download to complete
6. Viewer should automatically open in a new tab

#### Method B: Direct Test (Quick)

1. Open a new Chrome tab
2. Paste this URL (replace with actual extension ID):
   ```
   chrome-extension://YOUR_EXTENSION_ID/src/viewers/dicom/viewer.html
   ```
3. The viewer should load (will show "no file" placeholder, but libraries should load)

---

### 3. Check Console Logs

**Open Browser Console**: `F12` or `Right-click → Inspect → Console`

#### Expected Log Sequence (Successful):

```
[DICOM Viewer] Starting sequential library loading...
[DICOM Viewer] Loading 1/5: dicomParser.min.js...
[DICOM Viewer] ✓ Loaded: dicomParser.min.js
[DICOM Viewer] Loading 2/5: cornerstone.min.js...
[DICOM Viewer] ✓ Loaded: cornerstone.min.js
[DICOM Viewer] Loading 3/5: cornerstoneMath.min.js...
[DICOM Viewer] ✓ Loaded: cornerstoneMath.min.js
[DICOM Viewer] Loading 4/5: cornerstoneTools.min.js...
[DICOM Viewer] ✓ Loaded: cornerstoneTools.min.js
[DICOM Viewer] Loading 5/5: cornerstoneWADOImageLoader.min.js...
[DICOM Viewer] ✓ Loaded: cornerstoneWADOImageLoader.min.js
[DICOM Viewer] ✓ All libraries loaded successfully
[DICOM Viewer] ✓ All required globals verified
[DICOM Viewer] Loading viewer.js...
[DICOM Viewer] ✓ Viewer.js loaded
[DICOM Viewer] Initializing Cornerstone...
[DICOM Viewer] ✓ All libraries verified as loaded
[DICOM Viewer] Configuring WADO Image Loader...
[DICOM Viewer] Worker path: chrome-extension://YOUR_ID/src/viewers/dicom/lib/cornerstoneWADOImageLoaderWebWorker.js
[DICOM Viewer] ✓ WADO Image Loader configured
[DICOM Viewer] Configuring cornerstoneTools external dependencies...
[DICOM Viewer] ✓ External dependencies configured
[DICOM Viewer] Initializing cornerstoneTools...
[DICOM Viewer] ✓ cornerstoneTools.init() completed
[DICOM Viewer] ✓ cornerstoneTools ready
```

#### ✅ Success Indicators:
- All libraries load in order (1/5 → 2/5 → 3/5 → 4/5 → 5/5)
- All steps show ✓ checkmarks
- No red error messages
- No `SUPPORT_POINTER_EVENTS` errors

#### ❌ Failure Indicators:
- Red error messages in console
- `SUPPORT_POINTER_EVENTS` error
- "Failed to load" messages
- Libraries loading out of order
- Missing ✓ checkmarks

---

### 4. Test Image Display (With DICOM File)

Once a DICOM file opens:

1. **Image displays** - You see the medical image, not just a black screen
2. **Metadata shows** - Top-left info panel displays patient name, study date, etc.
3. **Status bar updates** - Bottom bar shows zoom level, window/level values

Expected Console Logs:
```
[DICOM Viewer] Loading DICOM image...
[DICOM Viewer] Image ID: wadouri:...
[DICOM Viewer] Image loaded successfully: 512 x 512
[DICOM Viewer] Adding interactive tools...
[DICOM Viewer] ✓ Tools added successfully
[DICOM Viewer] Enabling element...
[DICOM Viewer] ✓ Element enabled successfully
[DICOM Viewer] Image displayed successfully
```

---

### 5. Test Interactive Controls

With a DICOM image loaded, test:

#### Toolbar Buttons:
- [ ] **Zoom In** (+) - Image gets larger
- [ ] **Zoom Out** (-) - Image gets smaller
- [ ] **Fit to Screen** (⛶) - Image fits window
- [ ] **Rotate Left** (↺) - Image rotates counter-clockwise
- [ ] **Rotate Right** (↻) - Image rotates clockwise
- [ ] **Invert** (◐) - Colors invert (black ↔ white)
- [ ] **Reset** (⟲) - Returns to original view

#### Keyboard Shortcuts:
- [ ] `+` or `=` - Zoom in
- [ ] `-` - Zoom out
- [ ] `0` - Fit to screen
- [ ] `R` - Reset
- [ ] `I` - Invert
- [ ] `←` - Rotate left
- [ ] `→` - Rotate right
- [ ] `Esc` - Close viewer

#### Mouse Controls (If element enabled):
- [ ] **Left-click drag** - Pan image
- [ ] **Right-click drag** - Adjust window/level (brightness/contrast)
- [ ] **Mouse wheel** - Zoom in/out

---

## Debugging Failed Tests

### Issue: Libraries Don't Load

**Check**:
1. Open `chrome://extensions`
2. Find the extension
3. Click "Errors" button (if visible)
4. Check for CSP violations or script loading errors

**Solution**:
- Verify `manifest.json` has `web_accessible_resources` for `src/viewers/dicom/lib/*`
- Check that library files exist in `src/viewers/dicom/lib/`

---

### Issue: SUPPORT_POINTER_EVENTS Still Appears

**Check Console For**:
```
[DICOM Viewer] cornerstoneTools.external.cornerstone: [object Object]
[DICOM Viewer] cornerstoneTools.external.cornerstoneMath: [object Object]
```

If these show `undefined`, the external dependencies aren't being set properly.

**Possible Causes**:
1. Scripts loaded in wrong order (check sequential loading logs)
2. cornerstoneTools initialized before dependencies set
3. Library version incompatibility

**Solution**:
- Verify all ✓ checkmarks appear in sequential order
- Check that external dependencies are set BEFORE `cornerstoneTools.init()`

---

### Issue: Image Doesn't Display

**Check**:
1. Did the file download successfully?
2. Is the file actually a DICOM file?
3. Are there errors in console about file loading?

**Expected Errors to Ignore** (known issues):
- ⚠️ "Interactive tools may not work" - This is expected if element enable fails
- The image should still display even if this warning appears

**Errors That Indicate Real Problems**:
- ❌ "Failed to load DICOM file"
- ❌ "Failed to display image"
- ❌ "Missing required libraries"

---

## Performance Check

### Load Time Expectations

**Sequential Loading** (after fix):
- Library loading: ~400-500ms
- First image display: ~1-2 seconds
- Subsequent images: ~500ms-1s

**This is normal.** Sequential loading is slightly slower but much more reliable.

---

## Compare Before/After

### Before Fix (Parallel Loading)
```
❌ Libraries load in random order
❌ SUPPORT_POINTER_EVENTS error appears
❌ Viewer fails to enable element
❌ Interactive tools don't work
❌ Inconsistent behavior (sometimes works, sometimes doesn't)
```

### After Fix (Sequential Loading)
```
✅ Libraries load in strict order
✅ No SUPPORT_POINTER_EVENTS errors
✅ Element enables successfully
✅ Interactive tools work reliably
✅ Consistent behavior every time
```

---

## Known Limitations (Still Present)

These are **not** related to the sequential loading fix:

1. **Large files (>10MB)** - May not auto-open in viewer (downloads instead)
2. **Multi-frame DICOM** - Only displays first frame
3. **Some DICOM encodings** - May require additional codecs

---

## Getting Help

### If Test Fails

1. **Capture Console Logs**:
   - Open console (`F12`)
   - Right-click in console → "Save as..."
   - Save console logs to file

2. **Check Network Tab**:
   - Open DevTools → Network tab
   - Reload viewer page
   - Check if all scripts loaded (should be 200 status)

3. **Check Extension Service Worker**:
   - Go to `chrome://extensions`
   - Find extension
   - Click "service worker" link
   - Check for background script errors

### Report Issues With:
- Console logs (copy all text)
- Network tab screenshot showing script loading
- Description of what you expected vs what happened
- Browser version (`chrome://version`)

---

## Success Criteria

✅ **Test passes if**:
1. All 5 libraries load sequentially with ✓ checkmarks
2. No red errors in console
3. cornerstoneTools initializes successfully
4. Image displays when DICOM file is opened
5. At least toolbar buttons work (even if mouse tools don't)

---

## Next Steps After Successful Test

If all tests pass:
1. ✅ Mark fix as verified
2. 🚀 Test with real DICOM files from Filevine
3. 📝 Update project documentation
4. 🎉 Celebrate fixing the race condition!

If tests fail:
1. 📋 Collect debugging info (see "Getting Help" above)
2. 🔍 Review console logs for specific errors
3. 💬 Share findings with development team
