# DICOM Viewer Component

## Overview
The DICOM Viewer component is a React Native component that uses WebView to display DICOM medical imaging files. It integrates with Cornerstone.js and Cornerstone WADO Image Loader for robust DICOM file handling.

## Features
- ✅ WebView-based DICOM rendering
- ✅ Cornerstone.js integration for medical imaging
- ✅ Support for remote DICOM URLs
- ✅ Loading states and error handling
- ✅ Real-time communication with React Native
- ✅ Responsive design for mobile devices

## Components

### 1. DicomViewer
The main DICOM viewer component.

**Props:**
```typescript
interface DicomViewerProps {
  dicomUrl: string;           // URL to the DICOM file
  onError?: (error: string) => void;  // Error callback
  onLoad?: () => void;        // Load success callback
}
```

**Usage:**
```typescript
import { DicomViewer } from '../shared/components';

<DicomViewer
  dicomUrl="https://example.com/sample.dcm"
  onError={(error) => console.error('DICOM Error:', error)}
  onLoad={() => console.log('DICOM loaded successfully')}
/>
```

### 2. DicomViewerTest
A test component for testing different DICOM URLs and debugging issues.

**Usage:**
```typescript
import { DicomViewerTest } from '../shared/components';

<DicomViewerTest />
```

## How It Works

### 1. WebView Setup
- Loads a local HTML file (`dicom-viewer.html`)
- Enables JavaScript and DOM storage
- Allows file access and universal access from file URLs

### 2. Library Loading
- Dynamically loads Cornerstone.js from CDN
- Loads Cornerstone WADO Image Loader
- Initializes the viewer when libraries are ready

### 3. DICOM Processing
- Receives DICOM URL from React Native via postMessage
- Uses Cornerstone to load and display the DICOM image
- Handles errors and success states

### 4. Communication
- Sends status messages back to React Native
- Reports loading, success, and error states
- Enables debugging and user feedback

## Troubleshooting

### Black Screen Issues

#### 1. Check Console Logs
Open the React Native debugger and check for:
- WebView loading errors
- JavaScript execution errors
- Network request failures

#### 2. Verify DICOM URL
- Ensure the URL is accessible from the device
- Check if the URL returns a valid DICOM file
- Verify CORS settings if loading from a different domain

#### 3. Library Loading Issues
- Check internet connectivity (libraries load from CDN)
- Verify the HTML file path is correct
- Check WebView permissions and settings

#### 4. Platform-Specific Issues

**Android:**
- Ensure `allowFileAccess` is enabled
- Check if the HTML file is in the correct assets folder
- Verify WebView permissions in AndroidManifest.xml

**iOS:**
- Check WebView configuration in Info.plist
- Ensure JavaScript is enabled
- Verify file access permissions

### Common Error Messages

#### "Failed to load DICOM viewer libraries"
- Check internet connectivity
- Verify CDN URLs are accessible
- Check WebView JavaScript settings

#### "Failed to load DICOM image"
- Verify DICOM URL is accessible
- Check if the file is a valid DICOM format
- Ensure the server supports CORS

#### "Invalid message received from app"
- Check the message format being sent
- Verify the postMessage implementation
- Check WebView message handling

## Testing

### 1. Use Sample URLs
The test component includes sample DICOM URLs that are known to work:
- Sample DICOM 1-3 from OHIF examples

### 2. Test Custom URLs
- Enter your own DICOM URLs
- Test with different file formats
- Verify error handling

### 3. Debug Mode
- Check console logs in React Native debugger
- Monitor WebView messages
- Use the test component for isolated testing

## Performance Tips

### 1. Image Optimization
- Use compressed DICOM files when possible
- Consider implementing progressive loading
- Cache frequently accessed images

### 2. Memory Management
- Dispose of WebView when not in use
- Monitor memory usage with large DICOM files
- Implement proper cleanup in useEffect

### 3. Network Optimization
- Use CDN for DICOM files when possible
- Implement retry logic for failed requests
- Consider offline caching for critical images

## Security Considerations

### 1. URL Validation
- Validate DICOM URLs before loading
- Implement URL whitelisting if needed
- Sanitize user input for custom URLs

### 2. WebView Security
- Limit WebView permissions to minimum required
- Implement proper origin whitelisting
- Monitor for malicious content

### 3. Data Privacy
- Ensure DICOM files don't contain PHI
- Implement proper data handling protocols
- Follow HIPAA compliance guidelines

## Future Enhancements

### 1. Offline Support
- Bundle Cornerstone libraries locally
- Implement offline DICOM caching
- Support for local DICOM files

### 2. Advanced Features
- Multi-planar reconstruction (MPR)
- Measurement tools
- Annotation capabilities
- 3D rendering support

### 3. Performance Improvements
- WebAssembly integration
- GPU acceleration
- Progressive image loading
- Background processing

## Support

For issues and questions:
1. Check this README for common solutions
2. Review console logs and error messages
3. Test with sample URLs first
4. Verify WebView configuration
5. Check platform-specific requirements

## Dependencies

- `react-native-webview`: WebView component
- `cornerstone-core`: Medical imaging library
- `cornerstone-wado-image-loader`: DICOM file loader

## License

Design & Developed by Tech4Biz Solutions
Copyright (c) Spurrin Innovations. All rights reserved.