DOCSEARCHbyAlgolia
Submit Docs

Open Health Imaging Foundation (OHIF) Viewer Documentation

website·Indexed 34 days ago

https://docs.ohif.org/

Documentation for the OHIF Viewer, an open-source, web-based, zero-footprint DICOM viewer platform. Includes guides on configuration, deployment, authorization strategies, development and debugging for Android and iOS, and a migration guide from version 3.7 to 3.8.

Tokens
105.5K
Snippets
474
Records
665
Agent score
68%

What's inside OHIF

  1. Overview of OHIF-Maintained Extensions

    OHIF maintains several core extensions located in the extensions/ directory of the OHIF/Viewers repository. Key extensions include:

    • default: Provides default viewer layout, study/series browser, and a DICOMWeb compliant datasource. Includes modules for commands, context, data source, hanging protocol, layout templates, panels, SOP class handling, and toolbar.
    • cornerstone: Provides 2D and 3D rendering functionalities via Viewport, Commands, and Utility modules.
    • dicom-pdf: Renders PDFs for specific SopClassUIDs using Viewport and SopClassHandler modules.
    • dicom-video: Renders DICOM Video files using Viewport and SopClassHandler modules.
    • cornerstone-dicom-sr: Visualizes DICOM Structured Reports using Viewport, Commands, and SOPClassHandler modules.
    • measurement-tracking: Tracks measurements in the measurement panel via Context, Panel, Viewport, and Commands modules.

  2. Overview of the OHIF Viewer platform

    The OHIF (Open Health Imaging Foundation) Viewer is an open-source, web-based, zero-footprint DICOM viewer platform designed for medical imaging. It serves as a configurable and extensible framework for building diagnostic-quality medical imaging applications, supporting various imaging formats (primarily DICOM), advanced visualization tools, customizable workflows, and integration with multiple data sources.

  3. Overview of ToolbarService

    The ToolbarService is used to add, configure, and organize buttons and sections within the toolbar. It is primarily responsible for executing commands when buttons are clicked. Logic and state management for buttons have been moved to the ToolBarModule and evaluators.

  4. Overview of OHIF UI Services

    UI Services allow extensions to trigger common UI elements (modals, notifications, dialogs) without needing direct access to React context. They achieve this by using a service implementation that is set by a React Context Provider.

    Available UI Services include:

    • UI Notification Service
    • UI Modal Service
    • UI Dialog Service
    • UI Viewport Dialog Service
    • CINE Service
    • Viewport Grid Service

  5. Overview of the OHIF Viewer platform

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

    Key technical features include:

    • Performance: Optimized for loading large radiology studies by retrieving metadata first and streaming pixel data as needed.
    • Rendering Engine: Uses Cornerstone3D for decoding, rendering, and annotating medical images.
    • Connectivity: Works out-of-the-box with DICOMWeb-compliant Image Archives and provides a Data Source API for 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.

  6. Overview of OHIF v3 Services Architecture

    Services in OHIF v3 are concern-specific code modules managed by the ServicesManager. They are designed to be self-contained, interchangeable, and capable of failing or being removed without breaking the entire application. They are primarily used to handle cross-cutting concerns across different layers of the app.

  7. Overview of the Hanging Protocol Service

    The Hanging Protocol Service manages the arrangement of images in viewports by matching available DisplaySets against registered protocols. Each protocol is assigned a score; the protocol with the highest score is applied, and its settings are used to arrange the viewports.

  8. Overview of OHIF UI components and theming

    OHIF's UI is built on the ui-next component library, which uses a token-based theming system (CSS custom properties with HSL values) and Tailwind CSS.

    Components are categorized into three tiers:

    • Simple components: Atomic blocks (Button, Checkbox, Input, etc.).
    • Compound components: Complex interactions (Select, Dialog, Tabs, etc.).
    • OHIF-specific components: Medical imaging specialized tools (CinePlayer, ToolButton, etc.).

    Theme presets are defined as JSON files and applied via CSS classes to document.body.

  9. Understand OHIF v3 Architecture

    OHIF v3 is organized as a monorepo with a modular architecture designed for extensibility. The core components include:

    • @ohif/app: The framework controlling extension registration, mode composition, and routing.
    • @ohif/core: Reusable medical imaging functionality for the web.
    • @ohif/ui: A React component library for OHIF-styled applications.
    • Extensions: Building blocks that provide essential functionalities (e.g., rendering, study browsers). In v3, extensions are no longer automatic plugins but are registered to be consumed by modes.
    • Modes: Configuration objects that define how to compose extensions to build specific application workflows on different routes.
    ├── extensions        # Building blocks (e.g., cornerstone, dicom-pdf)
├── modes              # Workflow configurations (e.g., longitudinal)
├── platform
│   ├── core           # Business Logic
│   ├── i18n           # Internationalization
│   ├── ui             # React component library
│   └── app            # Framework connecting platform and extensions

  10. Create a custom Data Service

    OHIF v3 replaces the Redux store with a service-based architecture using a pub/sub pattern. A data service is defined by a factory function that returns an object containing a name and a create method to instantiate the service class.
    // extensions/customExtension/src/services/backEndService/index.js
import backEndService from './backEndService';

export default function WrappedBackEndService(servicesManager) {
  return {
    name: 'myService',
    create: ({ configuration = {} }) => {
      return new backEndService(servicesManager);
    },
  };
}

  11. Migrate from OHIF v2 to v3

    Migrating from OHIF v2 to v3 involves a major re-architecture to improve modularity. Key changes include:

    • Package Rename: @ohif/viewer is now @ohif/app to align versioning with the product.
    • State Management: Redux store has been removed and replaced by the React Context API.
    • Rendering Engine: cornerstone-core and cornerstone-tools are replaced by Cornerstone3D, enabling better 3D rendering and volume streaming.
    • UI Framework: The UI has been rewritten using Tailwind CSS. Custom UI components from v2 must be migrated to Tailwind CSS.
    • Hardware Requirements: Cornerstone3D requires WebGL. Ensure target hardware supports WebGL and ideally has a GPU tier 1 or above.

  12. Scope extension functionality using Contexts

    The @ohif/app tracks active contexts (e.g., ROUTE:VIEWER, ACTIVE_VIEWPORT:CORNERSTONE) that extensions use to scope functionality. This allows modules to conditionally show UI elements (like Toolbar buttons) or execute specific command implementations based on the current active viewport or route.