# OHIF Viewer

## Summary


Doctors and other medical professionals use software to view, analyse and annotate images of patients. These images could be X-rays, ultrasound/CT/PET/MRI scans, ECG/EEG waves and more. There are both commercial as well as open source viewers for this purpose. Among the open source viewers is OHIF Viewer. It's development is guided by the Open Health Imaging Foundation (OHIF). 

The OHIF Viewer is configurable and extensible. It's a web application that can be used without additional software installation. It can load images from various sources or interfaces including DICOMweb. Images can be rendered in 2D, 3D or restructured representations. For authentication it supports OpenID Connect. The app is built in React using reusable UI components.

## Discussion

### Could you give an overview of OHIF Viewer?

Let's consider a radiology workflow as an example. Via CT or MRI scans of patients, images are acquired. These images are in DICOM (Digital Imaging and Communications in Medicine) format. They're sent to a DICOM router that checks the integrity of these images. From here the images are sent to Picture Archiving and Communication System (PACS) and Vendor-Neutral Archive (VNA). An example of PACS is Orthanc, a DICOM server with REST API and a web UI.  

Radiologists access the images in PACS from their workstations or other devices for visualization, post-processing or analysis. Non-radiologists can access images from VNA via patient Electronic Medical Record (EMR). The figure above shows a case where this traditional workflow is being augmented with AI capabilities. 

Traditional medical imaging software were often desktop applications that needed to be installed and maintained by IT staff. When problems arose, such applications were hard to debug remotely. It's in this context that web-based applications enabled by cloud computing became attractive. The OHIF Viewer is one such viewer. 


### What are the main features of OHIF Viewer?

The viewer includes two essential features: visualization and annotation. For **visualization**, multi-modal image fusion, maximum intensity projection, multi-planar reformatting, axial/sagittal/coronal views, CINE view, and many more are supported. For **annotation**, there are many easy-to-use tools for measurement and annotation. Touch-specific tools such as pinch-to-zoom become handy on touchscreen devices.  

In terms of software architecture and design, the viewer is built using **reusable** React UI components. This enables developers to compose more sophisticated components and custom workflows without needing to code them from scratch. Since code is open source, these components can be studied and customized as needed. The viewer is really a web application that runs within a web browser. Hence, no additional software needs to be installed to use it. 

For **performance**, GPU acceleration is used for image rendering. Multi-threading enables quick image decoding. 

The viewer is **standards-compliant**: DICOMweb for image data access, OpenID Connect for authorized access to data. The viewer can connect other sources as well. 

For **deployment**, the viewer can be a standalone web application. Alternatively, it can be embedded via a `<script>` tag into another application but this got deprecated in version 3. 


### What's the architecture of OHIF Viewer?

The OHIF Viewer adopts a modular architecture. The main platform has the following components: 

    + **core**: Core libraries that implement medical imaging functions (aka business logic) for the web.
    + **i18n**: Internationalization support.
    + **viewer**: This brings together the all components. To register extensions, compose modes and route requests are its main functions.
    + **ui**: React component library.
    + **extensions**: Libraries that implement essential functionalities such as rendering, measurement tracking, etc. These are the building blocks. They're consumed by modes.
    + **modes**: A configuration to compose extensions and routes to make an application.OHIF Viewer makes use of other projects such as Cornerstone. It's a set of JavaScript libraries specific to the medical domain. Cornerstone also include libraries to load DICOM objects over the web, called WADO (Web Access to DICOM Objects). There's support for the older WADO-URI interface and the more modern WADO-RS aka DICOMweb (RESTful API). The loader uses web workers for CPU intensive image processing tasks.  It uses OpenJPEG library. Library *dcmjs* does DICOM manipulation in JavaScript. 


### What are modes in OHIF Viewer?

The OHIF Viewer contains many extensions but often not all of them are needed for a specific workflow. For example, 3D segmentation has different requirements compared to tracking measurements over time. Other specific workflows are ECG viewer and total metabolic tumor volume. These different workflows are enabled via **modes**. In one sense, modes enable many mini-apps or workflows within a single app. 

Modes use extensions. Modes register workflows with the viewer with certain routes. The mode will get invoked once user accesses the viewer on a registered route. Modes essentially offer a lot of flexibility to create new workflows while reusing existing extensions. Modes were introduced in version 3. In version 2 of the viewer, we had to build new UI and extensions to create new workflows. 

The figure shows the composition of "AI Organ Segmentation" mode. It configures the applicable routes and extensions. It uses the applicable layout templates and data sources. Mode-specific props are passed to the templates. For each study, the viewer will show available modes. A study can have multiple modes.  


### Could you do a code walkthrough of OHIF Viewer?

We describe the codebase with respect to commit beb451745 (December 2022). Paths to the components are configured in `tsconfig.json`. For example, the viewer component is at `platform/viewer/src`. At this path we find `index.js` where the application object is created. This object is inserted into the DOM at the element with ID "root". The HTML template for this is at `platform/viewer/public/html_templates/index.html`. 

For interfacing to a DICOMweb server, the configuration files are at `platform/viewer/public/config` folder. Data is requested via the extension `extensions/cornerstone/src/utils/dicomLoaderServer.js`. Web workers are initialized in `extensions/cornerstone/src/initWADOImageLoader.js`. 

The default mode is configured in `modes/basic-dev-mode/src/index.js`. Modes are set up for the app in `platform/viewer/src/appInit.js`. 

Reusable React components are in `platform/ui/src/components`. As an example, we note that `ToolbarButton` is built from three other components, `Tooltip`, `IconButton` and `Icon`. Some extensions make use of `ToolbarButton` to compose a complete toolbar. 


### What developer resources are available to work with OHIF Viewer?

The project's main website has links to documentation, examples, and more. Beginners may want to explore a demo of the software first.

The source code is available on GitHub. We can clone this code repository and build a Docker image of the viewer. Alternatively, we can use the viewer's Docker image from Docker Hub.

An easier way to use OHIF Viewer is as a cloud-based managed service. SpringML's One-Click DICOM Viewer is an example that's easily deployed on the Google Cloud. It uses Google Kubernetes Engine. 

Perhaps the easiest method is to embed the viewer via a script tag into your own custom application. 

OHIF Viewer is capable of invoking DICOMweb REST APIs. A cheatsheet of DICOMweb is a useful reference. 

OHIF Viewer uses Cornerstone. It's a set of JavaScript libraries to display medical images, or develop tools and applications for medical imaging.  

## Milestones

Sep  
2015

Dr. Gordon Harris at the Massachusetts General Hospital receives **funding** for the project from a National Cancer Institute U24 grant. This funding continues till August 2020. Version 1 of the software starts life in 2015 and is active till 2019. It's uses Meteor full-stack framework. Version 1 is actually **three separate apps**: LesionTracker, OHIF Viewer, and OHIF Standalone Viewer. 

2018

XNAT integrates OHIF Viewer within its environment. XNAT is a platform for quantitative imaging studies. This evolves as new versions of the viewer are released in later years: XNAT-OHIF 2.0 (2019) and XNAT-OHIF 3.2.0 (2021).  This is just one example of other projects adopting OHIF Viewer. 

2019

**OHIF Viewer v2** is released. It's a single React app. It deprecates the Meteor backend. Version 2 remains in active development till 2021. The viewer's extension architecture is one of the features in this version. Others include 3D multiplanar reformatting (MPR), DICOM segmentation, and PDF visualization. 

Apr  
2019

Release v0.0.19 of OHIF Viewer occurs via it's code repository on GitHub. This is the first release via GitHub. **Semantic versioning** of the project starts here. In May, v0.1.0 is released. From August, each package is released separately since this is a monorepo. For example, `@ohif/core@0.11.1-alpha.8` and `@ohif/extension-cornerstone@0.0.39-alpha.8` are released in August, each with its own release numbering. 

Nov  
2020

**The Chan Zuckerberg Initiative** selects both OHIF and Cornerstone projects for funding. The funds would go towards better documentation, software maintenance and community outreach. Funding begins in 2021. In August 2021, the Chan Zuckerberg Initiative partners with hack.diversity to develop new training material, and provide guidance and mentorship to contributors working on these projects. This funding is renewed in 2022. 

Sep  
2021

**OHIF Viewer v3 Public Beta** is released. This is a departure from the Meteor-based v1 and current React-based version v2. The app is still in React but has a new UI component library that uses Tailwind CSS. Via a major re-architecture, **modes** are introduced. Extensions in v2 were hard to maintain. Modes assemble extensions via a more modular approach. 

Aug  
2022

At a OHIF Viewer demo and presentation, it's reported that the software will evolve to support advanced features. These include hanging protocols, volume rendering, rendering of arbitrary stack of images, rendering of colour images, videos, ECG viewer, pathology viewer, etc. 

Nov  
2022

**OHIF Viewer v3.3** is released. Among the new features are DICOM segmentation, multiplanar reformatting (MPR), synchronized scrolling, and reference lines. DICOM segments, rendered in 3D, are for display only and can't be edited. MPR feature uses Cornerstone3D VolumeViewports feature. Project will continue to look at bug fixes on `v2-stable` branch but will focus on `v3-stable` branch for the long term.  This release also deprecates the Embedded Viewer.