NeoScan_Radiologist/app/shared/components/DICOM_VIEWER_README.md

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:

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

Usage:

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:

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.