Viewer

The viewer component provides a full-featured medical imaging viewer embedded into React applications.

You can use this component to display DICOM viewer with study list, study panel and imaging tools.

Basic Usage

The viewer is embedded as a React component with this method.

1. Add viewer configuration into window.config object, as described in "Viewer Configuration" section

Viewer configuration should be defined before importing the viewer package

  1. Import the viewer component
import { Viewer } from '@medken/viewer';
  1. Render the viewer component
render() {
return (
<Viewer />
);
}

Advanced Usage

The viewer is embedded into an HTML element by id with this method.

1. Add viewer configuration into window.config object, as described in "Viewer Configuration" section

Viewer configuration should be defined before importing the viewer package

  1. Import the function to install the viewer in an HTML element by id
import { installViewer } from '@medken/viewer';
  1. Render the component in the HTML element
export default class MedkenViewer extends Component {
constructor(props) {
super(props);
this.viewerContainerId = 'root';
this.viewerConfig = window.config;
}
componentRenderedOrUpdatedCallback() {
console.log('Viewer rendered or updated');
}
componentDidMount() {
installViewer(
this.viewerConfig,
this.viewerContainerId,
this.componentRenderedOrUpdatedCallback
);
}
render () {
return (
<div id={this.viewerContainerId} />
);
}
}

FAQ

  1. I get "Javascript heap out of memory" error when starting and building my application with the viewer. What can I do?

    - If you are getting this error when running `npm run start` or `npm run build` in your application, you can run
    those commands with `TOOL_NODE_FLAGS=--max-old-space-size=4096` such as
    `TOOL_NODE_FLAGS=--max-old-space-size=4096 npm run start`
  2. The viewer's styles conflict with my application's styles. How can I separate them?

    • The viewer's stylesheets and scripts are added globally, so this may cause conflicts in an existing application. In this case, you can embed the viewer into an iframe element as a quick workaround.