Insight Viewer is a library that Cornerstone.js medical image viewer component for React.
Dicom Viewer: Allows you to represent dicom image files in React.
Dicom Viewport handling: You can control the Dicom viewport declaratively.
Drawing Annotation: Supports the ability to draw annotations on Dicom images.
This allows you to visually represent the location of a lesion.
The insight viewer library is registered on NPM, so you can install and use it.
Here is an examples of Dicom Viewer, Interaction, Annotation Drawing
If your purpose is to show a Dicom Image, you can use it as shown below.
import InsightViewer, { useImage } from '@lunit/insight-viewer'
const MOCK_IMAGE = 'wadouri:https://static.lunit.io/fixtures/dcm-files/series/CT000002.dcm'
export default function App() {
const { image } = useImage({ wadouri: MOCK_IMAGE })
return <InsightViewer image={image} />
}
If you want to manipulate the pan and adjustment of a Dicom Image through mouse events, you can use it as shown below.
import { useRef } from 'react'
import InsightViewer, { useImage, useInteraction } from '@lunit/insight-viewer'
import { useViewport } from '@lunit/insight-viewer/viewport'
type Controllers = {
pan: () => void
reset: () => void
adjust: () => void
}
const MOCK_IMAGE = 'wadouri:https://static.lunit.io/fixtures/dcm-files/series/CT000002.dcm'
export default function App() {
const viewerRef = useRef<HTMLDivElement | null>(null)
const { image } = useImage({ wadouri: MOCK_IMAGE })
const { interaction, setInteraction } = useInteraction({
mouseWheel: 'scale', // Dicom Image scale is changed by mouse wheel events.
primaryDrag: 'pan', // The Dicom Image is moved by the left mouse drag.
})
const { viewport, setViewport, resetViewport } = useViewport({ image, viewerRef })
const controllers: Controllers = {
pan: () => {
setInteraction((prev) => ({ ...prev, primaryDrag: 'pan' }))
},
reset: resetViewport, // Set to the initial viewport of the Dicom Image.
adjust: () => {
setInteraction((prev) => ({ ...prev, primaryDrag: 'adjust' }))
},
}
const viewerProps = {
image,
viewerRef,
viewport,
interaction,
onViewportChange: setViewport,
}
return (
<>
<button style={{ marginRight: '8px' }} onClick={controllers['pan']}>
pan
</button>
<button style={{ marginRight: '8px' }} onClick={controllers['adjust']}>
adjust
</button>
<button onClick={controllers['reset']}>reset</button>
<InsightViewer {...viewerProps} />
</>
)
}
If you want to draw annotations such as polygon, ruler, and area on a Dicom image, you can use the code below.
import { useState } from 'react'
import InsightViewer, { useImage } from '@lunit/insight-viewer'
import { AnnotationOverlay } from '@lunit/insight-viewer/annotation'
import type { Annotation, AnnotationMode } from '@lunit/insight-viewer/annotation'
const MOCK_IMAGE = 'wadouri:https://static.lunit.io/fixtures/dcm-files/series/CT000002.dcm'
export default function App() {
const [annotationMode, setAnnotationMode] = useState<AnnotationMode>('polygon')
const [annotations, setAnnotation] = useState<Annotation[]>([])
const { image } = useImage({ wadouri: MOCK_IMAGE })
return (
<>
<button style={{ marginRight: '8px' }} onClick={() => setAnnotationMode('polygon')}>
polygon
</button>
<button style={{ marginRight: '8px' }} onClick={() => setAnnotationMode('ruler')}>
ruler
</button>
<button onClick={() => setAnnotationMode('area')}>area</button>
<InsightViewer image={image}>
<AnnotationOverlay
isDrawing
mode={annotationMode}
annotations={annotations}
onChange={(annotations) => setAnnotation(annotations)}
/>
</InsightViewer>
</>
)
}
You can see what features are supported and example code to use them.
You can check out the library code deployed on NPM.
libs/insight-viewer
- Cornerstone.js medical image viewer component for React.You can view documents created with the INSIGHT Viewer library.
apps/insight-viewer-dev
- Documentation site for @lunit/insight-viewer.Clone this repository locally $ git clone git@github.com:lunit-io/insight-viewer.git
$ npm i
$ npm install -g nx
$ npm start // serve docs on http://localhost:4200