Home

Awesome

Build Status NPM version NPM downloads per month

DICOM Microscopy Viewer

Vanilla JS library for web-based visualization of DICOM VL Whole Slide Microscopy Image datasets and derived information.

The viewer allows visualization of slide microscopy images stored in a DICOMweb compatible archive. It leverages the dicomweb-client JavaScript library to retrieve data from the archive.

Features

Documentation

Documentation of the JavaScript Application Programming Interface (API) is available online at imagingdatacommons.github.io/dicom-microscopy-viewer.

Getting started

Note that the dicom-microscopy-viewer package is not a viewer application, it is a library to build viewer applications.

Below is an example for the most basic usage: a web page that displays a collection of DICOM VL Whole Slide Microscopy Image instances of a digital slide. For more advanced usage, take a look at the Slim viewer.

Basic usage

The viewer can be embedded in any website, one only needs to

import * as DICOMMicroscopyViewer from 'dicom-microscopy-viewer';
import * as DICOMwebClient from 'dicomweb-client';

// Construct client instance
const client = new DICOMwebClient.api.DICOMwebClient({
  url: 'http://localhost:8080/dicomweb'
});

// Retrieve metadata of a series of DICOM VL Whole Slide Microscopy Image instances
const retrieveOptions = {
  studyInstanceUID: '1.2.3.4',
  seriesInstanceUID: '1.2.3.5'
};
client.retrieveSeriesMetadata(retrieveOptions).then((metadata) => {
  // Parse, format, and filter metadata
  const volumeImages = []
  metadata.forEach(m => {
    const image = new DICOMMicroscopyViewer.metadata.VLWholeSlideMicroscopyImage({
      metadata: m
    })
    const imageFlavor = image.ImageType[2]
    if (imageFlavor === 'VOLUME' || imageFlavor === 'THUMBNAIL') {
      volumeImages.push(image)
    }
  })

  // Construct viewer instance
  const viewer = new DICOMMicroscopyViewer.viewer.VolumeViewer({
    client,
    metadata: volumeImages
  });

  // Render viewer instance in the "viewport" HTML element
  viewer.render({ container: 'viewport' });
});

Citation

Please cite the following article when using the viewer for scientific studies: Herrmann et al. J Path Inform. 2018:

@article{jpathinform-2018-9-37,
    Author={
        Herrmann, M. D. and Clunie, D. A. and Fedorov A. and Doyle, S. W. and Pieper, S. and
        Klepeis, V. and Le, L. P. and Mutter, G. L. and Milstone, D. S. and Schultz, T. J. and
        Kikinis, R. and Kotecha, G. K. and Hwang, D. H. and Andriole, K, P. and Iafrate, A. J. and
        Brink, J. A. and Boland, G. W. and Dreyer, K. J. and Michalski, M. and
        Golden, J. A. and Louis, D. N. and Lennerz, J. K.
    },
    Title={Implementing the {DICOM} standard for digital pathology},
    Journal={Journal of Pathology Informatics},
    Year={2018},
    Number={1},
    Volume={9},
    Number={37}
}

Installation

Install the dicom-microscopy-viewer package using the npm package manager:

npm install dicom-microscopy-viewer

Development & Testing

We use Babel to compile (transpile), webpack to bundle, and Jest to test JavaScript code.

Get the source code by cloning the git repository:

git clone https://github.com/imagingdatacommons/dicom-microscopy-viewer
cd dicom-microscopy-viewer

Install dependencies and build the package:

npm install
npm run build

Run tests:

npm run test

Build the API documentation:

npm run generateDocs

Support

The developers gratefully acknowledge their reseach support: