OHIF Viewer Documentation

The customizationService provides a framework for configuring and overriding viewer components, UI elements, and behaviors across different deployment scenarios or modes.

Key Concepts:

• Slots/Modules: Extensions define customizable features (slots) via a getCustomizationModule() function.
• Mechanism: The service does not implement the actual UI changes; it provides a mechanism to register, configure, and retrieve prototypes (components, data, etc.). The actual implementation is handled by the component consuming the customization.
• Retrieval: Components use getCustomization(id) to fetch the most current version of a value (whether it is the default or an override).

The OHIF Viewer is a zero-footprint, configurable, and extensible progressive web application for medical imaging. It provides out-of-the-box support for image archives that use the DICOMweb standard.

Key capabilities include:

• Retrieving and loading images from various sources and formats.
• Rendering sets in 2D, 3D, and reconstructed representations.
• Manipulation, annotation, and serialization of observations.
• Support for internationalization, OpenID Connect, offline use, and hotkeys.
• Extensibility via a dedicated Extension System to customize workflows and add new functionality.

The OHIF Viewer is an open-source, web-based medical imaging platform designed as a core framework for building complex imaging applications.

Key Capabilities:

• High Performance: Designed to load large radiology studies quickly by retrieving metadata ahead of time and streaming pixel data as needed.
• Rendering Engine: Leverages Cornerstone3D for decoding, rendering, and annotating medical images.
• DICOMWeb Support: Works out-of-the-box with Image Archives supporting DICOMWeb. It also provides a Data Source API to communicate with archives using proprietary API formats.
• Extensibility: Features a plugin framework for creating task-based workflow modes and a reusable UI component library built with React.js and Tailwind CSS.

OHIF's user interface is built on ui-next, a component library designed for medical imaging workflows. The system consists of:

• Component Library: A tiered system of Simple (atomic), Compound (complex interactions), and OHIF-specific components (e.g., CinePlayer, ToolButton).
• Theming: A token-based system using CSS custom properties (HSL values) and Tailwind CSS. It supports theme presets applied via CSS classes on document.body.
• Iconography: SVG-based icons registered via addIcon() and rendered via the Icons component.
• UI Services: Runtime managers for modals, notifications, and viewport layouts, accessed via the servicesManager.
• Customization Service: A mechanism to override or extend UI components and behaviors without modifying core code.

OHIF uses a system of Managers to handle critical application infrastructure. These managers facilitate dependency injection, service registration, and the coordination of functionality across the platform by aggregating and exposing extension features.

Key managers include:

• Extension Manager: Aggregates and exposes modules and features throughout the application.
• Services Manager: Acts as the single point of registration for all internal and external services.
• Commands Manager: Handles the registration of commands within specific contexts and manages their execution.
• Hotkeys Manager: Manages the assignment of keyboard keys to specific commands.

OHIF uses a services architecture to provide modular, concern-specific code components that manage state and operations across the application. Services are made available throughout the app via the ServicesManager and are designed to address cross-cutting concerns.

Key characteristics of an OHIF service:

• Self-contained: Operates independently.
• Resilient: Able to fail or be removed without breaking the entire application.
• Interchangeable: Can be replaced by another module that implements the same interface.

Services are categorized into two main types:

1. Data Services: Manage data-related operations and state (e.g., DICOM metadata, display sets).
2. UI Services: Manage user interface concerns and often follow a pub/sub pattern to reduce coupling between different layers of the application.

The @ohif/core library provides pre-packaged solutions for common web-based medical imaging viewer features, including:

• Hotkeys
• DICOM Web
• Hanging Protocols
• Managing a study's measurements
• Managing a study's DICOM metadata
• A flexible pattern for extensions

The library is decoupled from specific view libraries or rendering logic, making it compatible with React, Vue, or Vanilla JS.

The Basic Viewer mode provides a longitudinal viewing experience and consists of four main UI components:

• Left Panel (study panel): Displays thumbnails of the available series along with their specific series details.
• Viewport: The central area used to render medical images and display annotations.
• Right Panel (measurements): Displays detailed information regarding the active annotations.
• Toolbar: Contains the application logo and various tools for interacting with the viewer.