7.1.1 • Published 5 months ago

@lunit/insight-viewer v7.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
5 months ago

insight-viewer

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.

Installation

The insight viewer library is registered on NPM, so you can install and use it.

Getting started with INSIGHT Viewer

Here is an examples of Dicom Viewer, Interaction, Annotation Drawing

Dicom Viewer

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} />
}

Interaction

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} />
    </>
  )
}

Annotation Drawing

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>
    </>
  )
}

Docs

You can see what features are supported and example code to use them.

Project structure

  • libs - Importable libraries.
  • apps - Applications that use libraries

Packages

You can check out the library code deployed on NPM.

Testing Docs

You can view documents created with the INSIGHT Viewer library.

Development

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
7.1.1

5 months ago

7.1.0

5 months ago

7.0.1

9 months ago

7.0.0

9 months ago

6.1.2

1 year ago

6.1.3

1 year ago

6.2.1

1 year ago

6.2.0

1 year ago

6.1.0

1 year ago

6.1.1

1 year ago

5.9.2

2 years ago

6.0.0

1 year ago

5.10.0

1 year ago

5.8.3

2 years ago

5.8.2

2 years ago

5.8.1

2 years ago

5.8.0

2 years ago

5.9.1

2 years ago

5.9.0

2 years ago

5.6.2

2 years ago

5.6.1

2 years ago

5.6.0

2 years ago

5.7.0

2 years ago

5.4.2

2 years ago

5.4.1

2 years ago

5.5.2

2 years ago

5.5.1

2 years ago

5.5.0

2 years ago

5.3.0

2 years ago

5.3.0-alpha.1

2 years ago

5.1.0-alpha.10

2 years ago

5.2.0-alpha.0

2 years ago

5.1.0-alpha.9

2 years ago

5.1.0-alpha.7

2 years ago

5.1.0-alpha.8

2 years ago

5.1.0-alpha.5

2 years ago

5.1.0-alpha.6

2 years ago

5.1.0-alpha.3

2 years ago

5.1.0-alpha.4

2 years ago

5.1.0-alpha.2

2 years ago

5.1.0-alpha.0

2 years ago

5.0.1-alpha.2

3 years ago

5.0.1-alpha.1

3 years ago

4.5.0

3 years ago

4.4.1

3 years ago

4.4.0

4 years ago

5.0.0-alpha.4

4 years ago

5.0.0-alpha.3

4 years ago

5.0.0-alpha.2

4 years ago

5.0.0-alpha.1

4 years ago

4.3.2

4 years ago

4.3.1

4 years ago

4.3.0

4 years ago

4.2.0

4 years ago

4.2.0-alpha.2

4 years ago

4.2.0-alpha.1

4 years ago

4.1.0

4 years ago

4.0.0

4 years ago

4.0.0-alpha.12

4 years ago

4.0.0-alpha.11

4 years ago

4.0.0-alpha.8

4 years ago

4.0.0-alpha.5

4 years ago

4.0.0-alpha.2

4 years ago

4.0.0-alpha.1

4 years ago

3.6.0-alpha.1

4 years ago

3.5.1

4 years ago

3.5.0

4 years ago

3.4.5

4 years ago

3.4.4

4 years ago

3.4.3

4 years ago

3.4.2

4 years ago

3.4.1

4 years ago

3.4.0

4 years ago

3.3.0

4 years ago

3.2.0

4 years ago

3.1.0

4 years ago

3.0.0

4 years ago

3.0.0-alpha.7

4 years ago

3.0.0-alpha.6

4 years ago

3.0.0-alpha.2

4 years ago

3.0.0-alpha.1

4 years ago

2.6.1

4 years ago

2.6.0

4 years ago

2.5.0

4 years ago

2.4.1

4 years ago

2.4.0

4 years ago

2.3.0

5 years ago

2.2.0

5 years ago

2.1.10

5 years ago

2.1.9

5 years ago

2.1.8

5 years ago

2.1.7

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.4

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

2.0.0-alpha

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.8

5 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago