dicom-microscopy-viewer

DICOM Microscopy Viewer

Vanilla JS library for web-based visualization of DICOM VL Whole Slide Microscopy Image datasets. The library relies on Openlayers for rendering pyramid images and retrieves pyramid tiles (image frames) using DICOMweb WADO-RS.

Installation

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

npm install dicom-microscopy-viewer

Building and testing

Build and test code locally:

git clone https://github.com/dcmjs-org/dicom-microscopy-viewer ~/dicom-microscopy-viewer
cd ~/dicom-microscopy-viewer
npm install
npm run build
npm test

We use rollup for bundling and mochify for testing (based on mocha and chai).

Usage

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

• Create an instance of the VLWholeSlideMicroscopyImageViewer. The constructor requires an instance of DICOMwebClient for retrieving frames from the archive as well as the metadata for each DICOM image instance formatted according to the DICOM JSON Model.

• Call the render() method, passing it the HTML element or the name of the element, which shall contain the viewport.

const url = 'http://localhost:8080/dicomweb';
const client = new DICOMwebClient.api.DICOMwebClient({url});
const studyInstanceUID = '1.2.3.4';
const seriesInstanceUID = '1.2.3.5';
const searchInstanceOptions = {
  studyInstanceUID,
  seriesInstanceUID
};
client.searchForInstances(searchInstanceOptions).then((instances) => {
  const promises = []
  for (let i = 0; i < instances.length; i++) {
    const sopInstanceUID = instances[i]["00080018"]["Value"][0];
    const retrieveInstanceOptions = {
      studyInstanceUID,
      seriesInstanceUID,
      sopInstanceUID,
    };
    const promise = client.retrieveInstanceMetadata(retrieveInstanceOptions).then(metadata => {
      const imageType = metadata[0]["00080008"]["Value"];
      if (imageType[2] === "VOLUME") {
        return(metadata[0]);
      }
    });
    promises.push(promise);
  }
  return(Promise.all(promises));
}).then(metadata => {
  metadata = metadata.filter(m => m);
  const viewer = new DICOMMicroscopyViewer.api.VLWholeSlideMicroscopyImageViewer({
    client,
    metadata
  });
  viewer.render({container: 'viewport'});
});

Status

This is work-in-progress and should not be used in clinical practice.

The viewer allows visualization of VL Whole Slide Microscopy Image datasets stored in a DICOMweb compatible archive. It leverages the dicomweb-client JavaScript library to retrieve data from the archive.

Limitations

Currently, the viewer only supports

• baseline JPEG compressed data (transfer syntax "1.2.840.10008.1.2.4.50")
• brightfield illumination (no fluorescence)
• 2D images (no z-stacks)

Support

The developers gratefully acknowledge their reseach support:

• Open Health Imaging Foundation (OHIF)
• Quantitative Image Informatics for Cancer Research (QIICR)
• Radiomics
• The Neuroimage Analysis Center
• The National Center for Image Guided Therapy
• The MGH & BWH Center for Clinical Data Science