dicom-microscopy-viewer

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Home</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Home</h1> <h3> </h3> <section> <article><p><a href="https://github.com/herrmannlab/dicom-microscopy-viewer/actions"><img src="https://github.com/herrmannlab/dicom-microscopy-viewer/actions/workflows/run_unit_tests.yml/badge.svg" alt="Build Status"></a> <a href="http://badge.fury.io/js/dicom-microscopy-viewer"><img src="https://badge.fury.io/js/dicom-microscopy-viewer.svg" alt="NPM version"></a> <img src="https://img.shields.io/npm/dm/dicom-microscopy-viewer?color=blue" alt="NPM downloads per month"></p> <h1>DICOM Microscopy Viewer</h1> <p>Vanilla JS library for web-based visualization of <a href="http://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.32.8.html">DICOM VL Whole Slide Microscopy Image</a> datasets and derived information.</p> <p>The viewer allows visualization of slide microscopy images stored in a <a href="https://www.dicomstandard.org/dicomweb/">DICOMweb</a> compatible archive. It leverages the <a href="https://github.com/dcmjs-org/dicomweb-client">dicomweb-client</a> JavaScript library to retrieve data from the archive.</p> <h2>Features</h2> <ul> <li>Display of different image types: <code>VOLUME</code>/<code>THUMBNAIL</code>, <code>OVERVIEW</code>, <code>LABEL</code></li> <li>Annotation of regions of interest (ROI) as vector graphics based on 3-dimensional spatial coordinates (SCOORD3D): <code>POINT</code>, <code>MULTIPOINT</code>, <code>POLYLINE</code>, <code>POLYGON</code>, <code>ELLIPSE</code>, <code>ELLIPSOID</code></li> <li>Assembly of concatenations</li> <li>Decoding of compressed pixel data, supporting baseline JPEG, JPEG 2000, and JPEG-LS codecs</li> <li>Correction of color images using ICC profiles</li> <li>Additive blending and coloring of monochromatic images of multiple optical paths (channels), supporting highly-multiplexed immunofluorescence imaging</li> <li>Overlay of image analysis results in the form of <a href="https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.51.html">DICOM Segmentation</a>, <a href="https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.75.html">Parametric Map</a>, <a href="https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.35.13.html">Comprehensive 3D SR</a>, or <a href="https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_A.87.html">Microscopy Bulk Simple Annotations</a></li> </ul> <h2>Documentation</h2> <p>Documentation of the JavaScript Application Programming Interface (API) is available online at <a href="https://herrmannlab.github.io/dicom-microscopy-viewer/">herrmannlab.github.io/dicom-microscopy-viewer</a>.</p> <h2>Getting started</h2> <p>Note that the <em>dicom-microscopy-viewer</em> package is <strong>not</strong> a viewer application, it is a library to build viewer applications.</p> <p>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 <a href="https://github.com/herrmannlab/slim">Slim</a> viewer.</p> <h3>Basic usage</h3> <p>The viewer can be embedded in any website, one only needs to</p> <ul> <li> <p>Create an instance of <a href="https://herrmannlab.github.io/dicom-microscopy-viewer/viewer.VolumeImageViewer.html">VolumeImageViewer</a>. The constructor requires an instance of <code>DICOMwebClient</code> for retrieving frames from the archive as well as the metadata for each DICOM image as an instance of <a href="https://herrmannlab.github.io/dicom-microscopy-viewer/metadata.VLWholeSlideMicroscopyImage.html">VLWholeSlideMicroscopyImage</a>.</p> </li> <li> <p>Call the <code>render()</code> method, passing it the HTML element (or the name of the element), which shall contain the viewport.</p> </li> </ul> <pre class="prettyprint source lang-js"><code>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' }); }); </code></pre> <h2>Citation</h2> <p>Please cite the following article when using the viewer for scientific studies: <a href="http://www.jpathinformatics.org/article.asp?issn=2153-3539;year=2018;volume=9;issue=1;spage=37;epage=37;aulast=Herrmann">Herrmann et al. J Path Inform. 2018</a>:</p> <pre class="prettyprint source lang-None"><code>@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} } </code></pre> <h2>Installation</h2> <p>Install the <a href="https://www.npmjs.com/package/dicom-microscopy-viewer">dicom-microscopy-viewer</a> package using the <code>npm</code> package manager:</p> <pre class="prettyprint source lang-None"><code>npm install dicom-microscopy-viewer </code></pre> <h2>Development & Testing</h2> <p>We use <a href="https://babeljs.io/">Babel</a> to compile (transpile), <a href="https://webpack.js.org/">webpack</a> to bundle, and <a href="https://github.com/facebook/jest">Jest</a> to test JavaScript code.</p> <p>Get the source code by cloning the git repository:</p> <pre class="prettyprint source lang-None"><code>git clone https://github.com/herrmannlab/dicom-microscopy-viewer cd dicom-microscopy-viewer </code></pre> <p>Install dependencies and build the package:</p> <pre class="prettyprint source lang-None"><code>npm install npm run build </code></pre> <p>Run tests:</p> <pre class="prettyprint source lang-None"><code>npm run test </code></pre> <p>Build the API documentation:</p> <pre class="prettyprint source lang-None"><code>npm run generateDocs </code></pre> <h2>Support</h2> <p>The developers gratefully acknowledge their reseach support:</p> <ul> <li><a href="http://ohif.org">Open Health Imaging Foundation (OHIF)</a></li> <li><a href="http://qiicr.org">Quantitative Image Informatics for Cancer Research (QIICR)</a></li> <li><a href="http://radiomics.io">Radiomics</a></li> <li><a href="https://datacommons.cancer.gov/repository/imaging-data-commons">Imaging Data Commons (IDC)</a></li> <li><a href="http://nac.spl.harvard.edu">Neuroimage Analysis Center</a></li> <li><a href="http://ncigt.org">National Center for Image Guided Therapy</a></li> <li><a href="https://www.ccds.io/">MGH & BWH Center for Clinical Data Science (CCDS)</a></li> </ul></article> </section> </div> <nav> <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="annotation.html">annotation</a></li><li><a href="api.html">api</a></li><li><a href="color.html">color</a></li><li><a href="events.html">events</a></li><li><a href="mapping.html">mapping</a></li><li><a href="metadata.html">metadata</a></li><li><a href="opticalPath.html">opticalPath</a></li><li><a href="roi.html">roi</a></li><li><a href="scoord3d.html">scoord3d</a></li><li><a href="segment.html">segment</a></li><li><a href="utils.html">utils</a></li><li><a href="viewer.html">viewer</a></li></ul><h3>Classes</h3><ul><li><a href="annotation.AnnotationGroup.html">AnnotationGroup</a></li><li><a href="color.PaletteColorLookupTable.html">PaletteColorLookupTable</a></li><li><a href="mapping.ParameterMapping.html">ParameterMapping</a></li><li><a href="mapping.Transformation.html">Transformation</a></li><li><a href="metadata.Comprehensive3DSR.html">Comprehensive3DSR</a></li><li><a href="metadata.MicroscopyBulkSimpleAnnotations.html">MicroscopyBulkSimpleAnnotations</a></li><li><a href="metadata.ParametricMap.html">ParametricMap</a></li><li><a href="metadata.Segmentation.html">Segmentation</a></li><li><a href="metadata.SOPClass.html">SOPClass</a></li><li><a href="metadata.VLWholeSlideMicroscopyImage.html">VLWholeSlideMicroscopyImage</a></li><li><a href="module.exports_module.exports.html">exports</a></li><li><a href="opticalPath.OpticalPath.html">OpticalPath</a></li><li><a href="roi.ROI.html">ROI</a></li><li><a href="scoord3d.Ellipse.html">Ellipse</a></li><li><a href="scoord3d.Ellipsoid.html">Ellipsoid</a></li><li><a href="scoord3d.Multipoint.html">Multipoint</a></li><li><a href="scoord3d.Point.html">Point</a></li><li><a href="scoord3d.Polygon.html">Polygon</a></li><li><a href="scoord3d.Polyline.html">Polyline</a></li><li><a href="scoord3d.Scoord3D.html">Scoord3D</a></li><li><a href="segment.Segment.html">Segment</a></li><li><a href="viewer.LabelImageViewer.html">LabelImageViewer</a></li><li><a href="viewer.OverviewImageViewer.html">OverviewImageViewer</a></li><li><a href="viewer.VolumeImageViewer.html">VolumeImageViewer</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addTask">addTask</a></li><li><a href="global.html#cancelTask">cancelTask</a></li><li><a href="global.html#decode">decode</a></li><li><a href="global.html#getStatistics">getStatistics</a></li><li><a href="global.html#handleMessageFromWorker">handleMessageFromWorker</a></li><li><a href="global.html#initialize">initialize</a></li><li><a href="global.html#loadWebWorkerTask">loadWebWorkerTask</a></li><li><a href="global.html#setTaskPriority">setTaskPriority</a></li><li><a href="global.html#spawnWebWorker">spawnWebWorker</a></li><li><a href="global.html#startTaskOnWebWorker">startTaskOnWebWorker</a></li><li><a href="global.html#terminateAllWebWorkers">terminateAllWebWorkers</a></li><li><a href="global.html#transform">transform</a></li></ul> </nav> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.10</a> on Thu Sep 29 2022 16:54:54 GMT-0400 (Eastern Daylight Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"> </script> </body> </html>