Skip to content

Interoperable web-based slide microscopy viewer and annotation tool

License

Notifications You must be signed in to change notification settings

GitanjaliChhetri/slim

 
 

Repository files navigation

Slim: interoperable web viewer and annotation tool for computational pathology

Slim is a single-page application for interactive visualization and annotation of digital whole slide microscopy images and derived image analysis results in standard DICOM format. The application is based on the dicom-microscopy-viewer JavaScript library and runs fully client side without any custom server components. It relies on DICOMweb RESTful services to search for, retrieve, and store imaging data and can thereby simply be placed in front of any DICOMweb-conformant Image Management System (IMS), Picture Archiving and Communication (PACS), or Vendor Neutral Archive (VNA).

Explore

National Cancer Institute's Imaging Data Commons

Slim serves as the slide microscopy viewer of the National Cancer Institute's Imaging Data Commons (IDC).

IDC CPTAC C3L-00965-26

Explore public IDC cancer imaging data collections by visiting the IDC web portal: portal.imaging.datacommons.cancer.gov.

The IDC viewer uses the Google Cloud Healthcare API as DICOMweb server.

Demo

Explore additional slide microscopy imaging data sets and advanced viewer features at herrmannlab.github.io/slim.

IDC HTAN HTA9_1_32

The demo viewer uses an instance of the open-source DCM4CHEE Archive as DICOMweb server. It includes brightfield and fluorescence microscopy images that were collected for different research projects, including The Cancer Genome Atlas (TCGA), the Clinical Proteomic Tumor Analysis Consortium (CPTAC), the Human Tumor Atlas Network (HTAN)). These images were originally stored in SVS-TIFF or OME-TIFF format and were subsequently converted into DICOM format for ingestion into the IDC. In addition, the demo includes images that were collected for interoperability demonstrations at DICOM WG-26 Pathology Connectathons or Hackathons. These images were directly stored in DICOM format and did not require conversion.

Features

Display of images

Slim enables interactive visualization of DICOM VL Whole Slide Microscopy Image instances in a vendor-neutral and device-independent manner.

Interoperability with various image acquisition and management systems was successfully demonstrated at the DICOM WG-26 Connectathon at Path Visions 2020 and the DICOM WG-26 Hackathon at Path Visions 2021. Shown below are screenshots of examples images that are publicly available on the NEMA FTP server at medical.nema.org.

Vendor Illumination Stain
NEMA Roche Brightfield Roche Tissue Diagnostics Brightfield Trichrome
NEMA 3DHISTECH Brightfield 3DHISTECH Brightfield H&E
NEMA 3DHISTECH Flourescence 3DHISTECH Fluorescence DAPI, FITC, Rhodamine
NEMA SamanTree Flourescence SamanTree Medical Fluorescence Histolog

Display of image annotations and analysis results

Slime further allows for interative visualization of image annotations and analysis results. The viewer currently supports the following types of DICOM instances:

Vector graphics:

Raster graphics:

DICOM IOD
IDC CPTAC Segmentation Segmentation
IDC CPTAC Parametric Map Parametric Map
IDC CPTAC Comprehensive 3D SR Comprehensive 3D SR
IDC TCGA Segmentation Segmentation
IDC TCGA Segmentation Microscopy Bulk Simple Annotations

Annotation of images

In addition to display, Slim provides annotation tools that allow users to create graphical image region of interest (ROI) annotations and store them as DICOM Comprehensive 3D SR instances using SR template TID 1500 "Measurement Report". ROIs are stored as 3D spatial coordinates (SCOORD3D) in millimeter unit according to SR template TID 1410 "Planar ROI Measurements and Qualitative Evaluations" together with measurements and qualitative evaluations (labels). Specifically, Image Region is used to store the vector graphic data and Finding is used to describe what has been annotated using a standard medical terminology such as SNOMED CT. The terms that can be chosen by a user can be configured (see AppConfig.d.ts).

Autentication and authorization

Users can authenticate and authorize the application to access data via OpenID Connect (OIDC) based on the OAuth 2.0 protocol using either the authorization code grant type (with Proof Key for Code Exchange (PKCE) extension) or the legacy implicit grant type.

Configuration

The app can be configured via a public/config/{name}.js JavaScript configuration file (see for example the default public/config/local.js). Please refer to the AppConfig.d.ts file for configuration options.

The configuration can be changed at build-time using the REACT_APP_CONFIG environment variable.

Deployment

Download the latest release from github.com/herrmannlab/slim/releases and then run the following commands to install build dependencies and build the app:

yarn install
PUBLIC_URL=/ yarn build

Once the app has been built, the content of the build folder can be directly served by a static web server at the location specified by PUBLIC_URL (in this case at /). The PUBLIC_URL must be either a full URL or a relative path to the location at which the viewer application will get deployed (e.g., PUBLIC_URL=https://herrmannlab.github.io/slim or PUBLIC_URL='/slim').

Local

The repository provides a Docker compose file to deploy a static web server and a dcm4chee-arc-light DICOMweb server on localhost for local app development and testing:

docker-compose up -d

The local deployment serves the app via an NGINX web server at http://localhost:8008 and exposes the DICOMweb services at http://localhost:8008/dcm4chee-arc/aets/DCM4CHEE/rs. Once the serives are up, one can store DICOM objects in the archive using the Store transaction of the DICOMweb Studies Service.

The command line interface of the dicomweb-client Python package makes storing DICOM files in the archive straight forward:

dicomweb_client -vv --url http://localhost:8008/dcm4chee-arc/aets/DCM4CHEE/rs store instances -h

The local deployment uses the default configuration file public/config/local.js:

window.config = {
  path: "/",
  servers: [
    {
      id: "local",
      url: "http://localhost:8008/dcm4chee-arc/aets/DCM4CHEE/rs",
      write: true
    }
  ],
  annotations: [
    {
      finding: {
        value: '85756007',
        schemeDesignator: 'SCT',
        meaning: 'Tissue'
      },
      style: {
        stroke: {
          color: [251, 134, 4, 1],
          width: 2
        },
        fill: {
          color: [255, 255, 255, 0.2]
        }
      }
    }
  ]
};

Customize the configuration according to your needs at either build-time or run-time.

Google Cloud Platform

Slim can be readily configured to connect to a secured DICOMweb endpoint of the Google Cloud Healthcare API with OIDC authentication:

const gcpProject = ""
const gcpLocation = ""
const gcpDataset = ""
const gcpStore = ""
const gcpClientID = ""

window.config = {
  path: "/",
  servers: [
    {
      id: "gcp",
      url: `https://healthcare.googleapis.com/v1/projects/${gcpProject}/locations/${gcpLocation}/datasets/${gcpDataset}/dicomStores/${gcpStore}/dicomWeb`,
      write: true
    }
  ],
  oidc: {
    authority: "https://accounts.google.com",
    clientId: gcpClientID,
    scope: "email profile openid https://www.googleapis.com/auth/cloud-healthcare",
    grantType: "implicit",
    endSessionEndpoint: "https://www.google.com/accounts/Logout"
  },
  annotations: [
    {
      finding: {
        value: '108369006',
        schemeDesignator: 'SCT',
        meaning: 'Neoplasm'
      },
      style: {
        stroke: {
          color: [251, 134, 4, 1],
          width: 2
        },
        fill: {
          color: [255, 255, 255, 0.2]
        }
      }
    },
    {
      finding: {
        value: '85756007',
        schemeDesignator: 'SCT',
        meaning: 'Tissue'
      },
      style: {
        stroke: {
          color: [255, 255, 0, 1],
          width: 2
        },
        fill: {
          color: [255, 255, 255, 0.2]
        }
      }
    }
  ]
};

OAuth 2.0 configuration

Create an OIDC client ID for web application.

Note that Google's OIDC implementation does currently not yet support the authorization code grant type with PKCE challenge for private clients. For the time being, the legacy implicit grand type has to be used.

Development

To install requirements and run the app for local development, run the following commands:

yarn install
yarn start

This will serve the app via a development server at http://localhost:3000 using the default local configuration.

The configuration can be specified using the REACT_APP_CONFIG environment variable, which can be set either in the .env file or directly in the command line:

REACT_APP_CONFIG=local yarn start

Citation

For more information about the motivation, design, and capabilities of Slim, please see the following article:

Slim: interoperable web viewer and annotation tool for quantitative microscopy tissue imaging C. Gorman, D. Punzo, I. Octaviano, S. Pieper, W.J.R. Longabaugh, D.A. Clunie, R. Kikinis, A.Y. Fedorov, M.D. Herrmann

If you use Slim in your research, please cite the above article.

About

Interoperable web-based slide microscopy viewer and annotation tool

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.2%
  • JavaScript 2.2%
  • HTML 1.3%
  • Dockerfile 0.8%
  • Less 0.3%
  • CSS 0.1%
  • Shell 0.1%