Our custom OHIF Viewer.
Go to file
Bill Wallace f1cc2ee13a
feat: Update to use pnpm (#6031)
* Initial pnpm change

* Install/update in pnpm sort of works

* Attempt to fix install

* fix pnpm

* Refactor build process to use RSPack instead of Webpack across multiple extensions and modes. Update package.json scripts for development and production builds, and adjust webpack configuration files to accommodate new plugin imports and settings.

* Update RSPack dependencies to version 2.0.0 across the project, enhancing compatibility and performance. Refactor webpack configuration in multiple extensions and modes to utilize the new library structure for UMD output. Adjust package.json scripts and settings for improved build processes.

* Implement migration guide for OHIF 3.13, detailing the transition from Webpack to Rspack v2, the shift to pnpm workspaces, and the increase in minimum Node.js version to 24. Include new build commands, plugin replacements, and updates to package configurations across the monorepo.

* Fix some dev:fast bugs

* Move netlify to top level and remove webpack builds

* Update version script to deal with lerna missing

* chore(tests): Update multiple screenshot test images for various specs

* feat(screenshot-reviewer): Add screenshot review tool and update package.json scripts

* fix(DICOMSRDisplayTool): Improve actor presence check in viewport

* chore(tests): Update multiple screenshot assets for various specs

* chore(tests): Integrate waitForPaintToSettle and waitForViewportsRendered in multiple specs for improved rendering stability

* chore(tests): Update screenshot assets for SEGHydration and SEGNoHydration specs

* test: update progressive loading screenshots

* jest 30 test fixes for compatibility with pnpm cs3d

* Use correct setDisplaySets instead of setDataId

* fix: Naming change for LegacyVolumeViewport3D

* Update to allow tolerance for contour tests

* update

* fix

* refactor: Replace instanceof checks with utility functions for viewport type validation

* fix: Update createSegmentationForViewport to handle undefined displaySetInstanceUID gracefully

* bun lock

* chore(pnpm): align workspace setup to cornerstone3D and address PR review

- .npmrc / pnpm-workspace.yaml: mirror cs3d (node-linker hoisted,
  strict-peer-dependencies=false, link/prefer workspace packages,
  minimumReleaseAge, frozenLockfile); sync axios 1.17.0 + tmp override
- root: packageManager pnpm@11.4.0, engines pnpm >=11, wire preinstall.js
- restore preinstall.js (token/private-repo + CLAUDE->AGENTS symlink)
- playwright.yml: keep base CS3D-integration workflow, switch only the
  package manager (bun/yarn -> pnpm) and node 20 -> 24
- webpack.base.js: revert prod devtool to source-map (drop hidden-source-map)
- remove @percy/cypress; .netlify + cli templates engines pnpm >=11
- Dockerfile pin pnpm@11; document tests/globalSetup.ts warmup
- drop dicom-sr -> measurement-tracking edge (breaks pnpm cyclic dep)

* chore(pnpm): regenerate lockfile and restore cs3d:* dev scripts

- Regenerate pnpm-lock.yaml against the resolved workspace (cycle removed,
  cs3d 4.22.10, workspace:* internal deps).
- Restore cs3d:checkout/check/build/watch/install/link/unlink helper scripts
  (dropped when taking the PR's root scripts), converted yarn -> pnpm since
  the local cornerstone3D checkout is now pnpm too.

* Merge base branch issues

* Link ohif app

* ci: pin pnpm to 11.4.0 in action-setup (was version: latest)

version: latest floats across runs and breaks reproducibility. Pin to the repo's packageManager version (pnpm@11.4.0) in both playwright and build-docs workflows.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: Accidental commit of .npmrc config

* Fix build issues

* build fix

* Dependency fixes

* fix: Dependency bug in app on extensions/modes

* Fix output configuration

* Replace percy screenshots with native cypress

* Remove percy screenshot entirely

* fix: Build issues

* force click to prevent canvas cover issues

* Enable swiftshader

* Update launch of electron

* fix: Broken size calculation

* Empty change to force a re-build

* fix(cypress): generate ui-next tailwind classes; drop unsupported electron arg

Tailwind only scanned @ohif/ui-next via ../../node_modules/@ohif/ui-next, which no longer resolves under the pnpm layout, so ui-next-unique classes (e.g. toolbar split-button sizing) were never generated. Those buttons' hit-boxes collapsed, producing Cypress 'covered by element' failures on toolbar interactions. Scan ui-next by direct filesystem path like ui/extensions/modes.

Also stop pushing --enable-unsafe-swiftshader into Electron's launchOptions.args (Electron ignores it and warns); it is supplied via ELECTRON_EXTRA_LAUNCH_ARGS in CI. The arg is still pushed for non-electron chromium (local chrome).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(e2e): disable dev-server overlay during coverage runs

The rspack dev-server client overlay injects an iframe (id=rspack-dev-server-client-overlay) that intercepts pointer events, causing Playwright/Cypress clicks on toolbar buttons to time out (e.g. MicroscopyPanel). Disable the overlay when COVERAGE=true (e2e/Playwright webServer) while keeping it for normal local dev.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(microscopy): provide dicom-microscopy-viewer runtime assets

The microscopy viewer is loaded at runtime via peerImport('dicom-microscopy-viewer'), which fetches the copied asset served at /dicom-microscopy-viewer/. Two issues prevented those assets from reaching dist, so the viewer never initialized and drawing produced no measurement row:

1) dicom-microscopy-viewer was declared in no workspace package.json (only under libs/@cornerstonejs), so it was not installed at root node_modules and the pluginConfig copy source did not exist. Declare it (0.48.6, matching libs) in the microscopy extension.

2) createCopyPluginToDist appended the public/dist folder name to entries that specify an explicit directory, breaking the dicom-microscopy-viewer public entry (looked for .../dynamic-import/public). Use an explicit directory as-is; only append the folder name for package-derived entries.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Update to pnpm 11.5.2 and cs3d 5.0.2

* Lock file

* fix: Update to newer versions of actions to try to fix hang

* Remove unnecessary version

* fix: Tests that are flaky

* PR comments

* Incorrect run name

* docs: Explain pluginConfig tooling

* Updated notes on pluginConfig and PR comments

* fix: resolve plugins in rsbuild build and fix directory-based asset copy

rsbuild.config.ts: merge getPluginResolveAliases() and an @ohif/app$ alias into resolve.alias, and add resolve.modules (root, platform/app, platform/ui node_modules) so extensions resolve their shared @ohif/* imports. Brings the rsbuild (dev:fast) path to parity with webpack.pwa.js / webpack.base.js.

writePluginImportsFile.js: treat a 'directory' on an extension/mode entry as the package root and copy its public/ and dist/ subdirs instead of the whole directory; public-section entries keep copying their directory verbatim via a new literalDirectory flag.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor: share resolve alias/modules between webpack and rsbuild configs

Extract the resolve.alias (@ohif/app, @, @components, ...) and the node_modules search paths into .webpack/resolveConfig.js, the single source of truth consumed by both webpack.base.js (and every per-package webpack.prod/.dev.js that merges it) and rsbuild.config.ts. getModules(srcDir) appends the building package's own source root, preserving the previous per-package behavior. Ends the drift where the rsbuild path kept missing aliases/module paths that webpack.base.js already had.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Add a timeout on git fetch and avoid all the unnecessary mirrros

* PR comments and tests

* Remove cache to prevent corrupting the cache key/setup.

* Fix stale/corrupted pnpm installer

---------

Co-authored-by: Alireza <ar.sedghi@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-12 16:04:56 -04:00
.circleci feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.docker fix: routerBasename setting (#4891) 2025-03-27 16:47:16 -04:00
.github feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.netlify feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.scripts feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.vscode fix(segmentation): Added support for unhydrated RTSTRUCT in MPR. Added support for overlaying segmentations over display sets the segmentations do not reference. (#5168) 2025-07-02 08:38:22 -04:00
.webpack feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
extensions feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
modes feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
platform feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
scripts fix: ohif tests to run with cornerstone 3d 5.0 (#6043) 2026-06-09 20:25:14 -04:00
testdata@3f85fe843c fix: ohif tests to run with cornerstone 3d 5.0 (#6043) 2026-06-09 20:25:14 -04:00
tests feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.browserslistrc fix: measurementsAPI issue caused by production build (#842) 2019-09-04 13:53:13 -04:00
.codespellrc docs(spelling): Add codespell config + github action, run and fix a good number of typos (#3645) 2023-09-12 07:40:38 -04:00
.dockerignore fix: Docker build time was very slow on a tiny change (#4559) 2025-01-02 14:46:53 -05:00
.eslintignore feat(cli): Ohif cli for modes and extensions modification (#2696) 2022-04-06 13:28:42 -04:00
.eslintrc.json feat(customization): new customization service api (#4688) 2025-01-23 14:24:13 -05:00
.gitattributes feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015) 2022-11-16 14:19:52 -05:00
.gitignore feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.gitmodules fix: Integration test instability (#3597) 2023-08-15 07:20:45 -04:00
.node-version feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.npmrc feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
.nycrc.json chore: add test coverage (#4960) 2025-04-16 15:56:52 -04:00
.prettierignore feat(cli): Ohif cli for modes and extensions modification (#2696) 2022-04-06 13:28:42 -04:00
.prettierrc chore(prettier): fix end-of-line warnings (#3642) 2023-09-11 10:31:40 -04:00
AGENTS.md feat(llm): add instructions md file for claude and other LLM tools (#6017) 2026-05-13 13:11:55 -04:00
aliases.config.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
babel.config.js fix: ohif tests to run with cornerstone 3d 5.0 (#6043) 2026-06-09 20:25:14 -04:00
CHANGELOG.md chore(version): Update package versions to 3.13.0-beta.89 [skip ci] 2026-06-10 00:29:36 +00:00
CODE_OF_CONDUCT.md docs: code of conduct 2019-12-09 22:00:17 -05:00
commit.txt chore(version): Update package versions to 3.13.0-beta.89 [skip ci] 2026-06-10 00:29:36 +00:00
CONTRIBUTING.md docs: contributing guidelines 2019-12-09 22:02:29 -05:00
DATACITATION.md OHIF with Cornerstone3D 2.0 (#4347) 2024-11-06 07:15:27 -05:00
Dockerfile feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
eslintAliasesResolver.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
jest.config.base.js Update to use beta 5.0 of CS3D (#5904) 2026-05-19 21:41:37 -04:00
jest.config.js chore(prettier): full repo linting and code reformatting once and for all (#3627) 2023-09-01 16:19:39 -04:00
LICENSE Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
netlify.toml feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
package.json feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
playwright.config.ts feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
pnpm-lock.yaml feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
pnpm-workspace.yaml feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
postcss.config.js chore(prettier): full repo linting and code reformatting once and for all (#3627) 2023-09-01 16:19:39 -04:00
preinstall.js feat(llm): add instructions md file for claude and other LLM tools (#6017) 2026-05-13 13:11:55 -04:00
publish-package.mjs feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
publish-version.mjs feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
README.md feat: Add combined build (#5895) 2026-03-17 07:52:17 -04:00
rsbuild.config.ts feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
runtime.txt feat: enhanced error handling ui (#3021) 2022-11-16 20:27:24 -05:00
tsconfig.json fix(build): BUILD_PACKAGES_QUICK PR check (#5160) 2025-06-25 18:07:52 -04:00
version.json chore(version): Update package versions to 3.13.0-beta.89 [skip ci] 2026-06-10 00:29:36 +00:00
version.mjs feat: Update to use pnpm (#6031) 2026-06-12 16:04:56 -04:00
version.txt chore(version): Update package versions to 3.13.0-beta.89 [skip ci] 2026-06-10 00:29:36 +00:00

OHIF Medical Imaging Viewer

The OHIF Viewer is a zero-footprint medical image viewer provided by the Open Health Imaging Foundation (OHIF). It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support DICOMweb.


NPM version MIT License This project is using Percy.io for visual regression testing.

Measurement tracking Measurement Tracking Demo
Segmentations Labelmap Segmentations Demo
Hanging Protocols Fusion and Custom Hanging protocols Demo
Volume Rendering Volume Rendering Demo
PDF PDF Demo
RTSTRUCT RT STRUCT Demo
4D 4D Demo
VIDEO Video Demo
microscopy Slide Microscopy Demo
ECG ECG Waveform Demo

About

The OHIF Viewer can retrieve and load images from most sources and formats, render sets in 2D, 3D, and reconstructed representations; allows for the manipulation, annotation, and serialization of observations; supports internationalization, OpenID Connect, offline use, hotkeys, and many more features.

Almost everything offers some degree of customization and configuration. If it doesn't support something you need, we accept pull requests and have an ever improving Extension System.

Why Choose Us

Community & Experience

The OHIF Viewer is a collaborative effort that has served as the basis for many active, production, and FDA Cleared medical imaging viewers. It benefits from our extensive community's collective experience, and from the sponsored contributions of individuals, research groups, and commercial organizations.

Built to Adapt

After more than 8-years of integrating with many companies and organizations, The OHIF Viewer has been rebuilt from the ground up to better address the varying workflow and configuration needs of its many users. All of the Viewer's core features are built using its own extension system. The same extensibility that allows us to offer:

  • 2D and 3D medical image viewing
  • Multiplanar Reconstruction (MPR)
  • Maximum Intensity Project (MIP)
  • Whole slide microscopy viewing
  • PDF and Dicom Structured Report rendering
  • Segmentation rendering as labelmaps and contours
  • User Access Control (UAC)
  • Context specific toolbar and side panel content
  • and many others

Can be leveraged by you to customize the viewer for your workflow, and to add any new functionality you may need (and wish to maintain privately without forking).

Support

For commercial support, academic collaborations, and answers to common questions; please use Get Support to contact us.

Developing

Branches

master branch - The latest dev (beta) release

  • master - The latest dev release

This is typically where the latest development happens. Code that is in the master branch has passed code reviews and automated tests, but it may not be deemed ready for production. This branch usually contains the most recent changes and features being worked on by the development team. It's often the starting point for creating feature branches (where new features are developed) and hotfix branches (for urgent fixes).

Each package is tagged with beta version numbers, and published to npm such as @ohif/ui@3.6.0-beta.1

release/* branches - The latest stable releases

Once the master branch code reaches a stable, release-ready state, we conduct a comprehensive code review and QA testing. Upon approval, we create a new release branch from master. These branches represent the latest stable version considered ready for production.

For example, release/3.5 is the branch for version 3.5.0, and release/3.6 is for version 3.6.0. After each release, we wait a few days to ensure no critical bugs. If any are found, we fix them in the release branch and create a new release with a minor version bump, e.g., 3.5.1 in the release/3.5 branch.

Each package is tagged with version numbers and published to npm, such as @ohif/ui@3.5.0. Note that master is always ahead of the release branch. We publish docker builds for both beta and stable releases.

Here is a schematic representation of our development workflow:

alt text

Requirements

  • Yarn 1.20.0+
  • Node 18+
  • Yarn Workspaces should be enabled on your machine:
    • yarn config set workspaces-experimental true

Getting Started

  1. Fork this repository
  2. Clone your forked repository
    • git clone https://github.com/YOUR-USERNAME/Viewers.git
  3. Navigate to the cloned project's directory
  4. Add this repo as a remote named upstream
    • git remote add upstream https://github.com/OHIF/Viewers.git
  5. yarn install --frozen-lockfile to restore dependencies and link projects

:::danger In general run yarn install with the --frozen-lockfile flag to help avoid supply chain attacks by enforcing reproducible dependencies. That is, if the yarn.lock file is clean and does NOT reference compromised packages, then no compromised packages should land on your machine by using this flag. :::

To Develop

From this repository's root directory:

# Enable Yarn Workspaces
yarn config set workspaces-experimental true

# Restore dependencies
yarn install --frozen-lockfile

Cornerstone3D Integration Testing

OHIF's Playwright end-to-end tests can run against a CS3D branch or a published CS3D version, allowing changes that span both repositories to be validated together before merging.

Setting up an integration build

  1. Add the ohif-integration label to your OHIF pull request.
  2. In the PR body, add a line specifying the CS3D ref:
    CS3D_REF: feat/my-feature
    
    • Version ref (e.g. 4.19+, 4.18.2) — the workflow resolves it to an exact published version and swaps the CS3D dependency via npm.
    • Branch ref (e.g. main, cornerstonejs:feat/foo) — the workflow clones the branch, builds CS3D from source with bun run build:esm, and symlinks the built packages into OHIF's node_modules.
    • For forks, use the <owner>:<branch> format (e.g. myGithubUser:feat/foo).
    • If no CS3D_REF is specified, the default is 4.19+.
  3. The workflow can also be triggered manually via workflow_dispatch with a cs3d_ref input.

What happens in CI

The Playwright workflow runs two jobs:

Job Purpose
Playwright Tests Builds OHIF (with CS3D linked or version-swapped), runs the full Playwright suite, uploads test results and coverage, and deploys a Netlify preview when ohif-integration is active.
CS3D Branch Merge Guard A lightweight check that fails when the ohif-integration label is present and CS3D_REF points to a branch (not a version). This prevents merging while still letting the Playwright tests show green so you can see whether the code actually works.

Testing changes that span both repos

If a feature requires changes in both Cornerstone3D and OHIF:

  1. Create your feature branch in CS3D and push it.
  2. Create a matching branch in OHIF.
  3. Add the ohif-integration label to the OHIF pull request.
  4. In the PR body, add: CS3D_REF: <your-cs3d-branch>.
  5. Playwright tests will build CS3D from source, link it, and run the full suite. The merge guard will block merge until you switch to a published version — but you can see the test results and the preview deploy while iterating.
  6. Once the CS3D side is merged and published, update the PR body to reference the published version (e.g. CS3D_REF: 4.19+). The tests will run against the registry version and the merge guard will pass.

Preview deploys

When ohif-integration is active, the Playwright workflow also builds the OHIF viewer and deploys it to Netlify as a preview. This gives you a live URL to manually test the combined CS3D + OHIF changes without running anything locally.

For details on linking CS3D locally for development, see the Cornerstone3D README.

Commands

These commands are available from the root directory. Each project directory also supports a number of commands that can be found in their respective README.md and package.json files.

Yarn Commands Description
Develop
dev Default development experience for Viewer
dev:fast Our experimental fast dev mode that uses rsbuild instead of webpack
test:unit Jest multi-project test runner; overall coverage
Deploy
build* Builds production output for our PWA Viewer

* - For more information on different builds, check out our Deploy Docs

Project

The OHIF Medical Image Viewing Platform is maintained as a monorepo. This means that this repository, instead of containing a single project, contains many projects. If you explore our project structure, you'll see the following:

.
├── extensions               #
│   ├── _example             # Skeleton of example extension
│   ├── default              # basic set of useful functionalities (datasources, panels, etc)
│   ├── cornerstone       # image rendering and tools w/ Cornerstone3D
│   ├── cornerstone-dicom-sr # DICOM Structured Report rendering and export
│   ├── cornerstone-dicom-sr # DICOM Structured Report rendering and export
│   ├── cornerstone-dicom-seg # DICOM Segmentation rendering and export
│   ├── cornerstone-dicom-rt # DICOM RTSTRUCT rendering
│   ├── cornerstone-microscopy # Whole Slide Microscopy rendering
│   ├── dicom-pdf # PDF rendering
│   ├── dicom-video # DICOM RESTful Services
│   ├── measurement-tracking # Longitudinal measurement tracking
│   ├── tmtv # Total Metabolic Tumor Volume (TMTV) calculation
|

│
├── modes                    #
│   ├── _example             # Skeleton of example mode
│   ├── basic-dev-mode       # Basic development mode
│   ├── longitudinal         # Longitudinal mode (measurement tracking)
│   ├── tmtv       # Total Metabolic Tumor Volume (TMTV) calculation mode
│   └── microscopy          # Whole Slide Microscopy mode
│
├── platform                 #
│   ├── core                 # Business Logic
│   ├── i18n                 # Internationalization Support
│   ├── ui                   # React component library
│   ├── docs                 # Documentation
│   └── viewer               # Connects platform and extension projects
│
├── ...                      # misc. shared configuration
├── lerna.json               # MonoRepo (Lerna) settings
├── package.json             # Shared devDependencies and commands
└── README.md                # This file

Acknowledgments

To acknowledge the OHIF Viewer in an academic publication, please cite

Open Health Imaging Foundation Viewer: An Extensible Open-Source Framework for Building Web-Based Imaging Applications to Support Cancer Research

Erik Ziegler, Trinity Urban, Danny Brown, James Petts, Steve D. Pieper, Rob Lewis, Chris Hafey, and Gordon J. Harris

JCO Clinical Cancer Informatics, no. 4 (2020), 336-345, DOI: 10.1200/CCI.19.00131

Open-Access on Pubmed Central: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7259879/

or, for v1, please cite:

LesionTracker: Extensible Open-Source Zero-Footprint Web Viewer for Cancer Imaging Research and Clinical Trials

Trinity Urban, Erik Ziegler, Rob Lewis, Chris Hafey, Cheryl Sadow, Annick D. Van den Abbeele and Gordon J. Harris

Cancer Research, November 1 2017 (77) (21) e119-e122 DOI: 10.1158/0008-5472.CAN-17-0334

Note: If you use or find this repository helpful, please take the time to star this repository on GitHub. This is an easy way for us to assess adoption and it can help us obtain future funding for the project.

This work is supported primarily by the National Institutes of Health, National Cancer Institute, Informatics Technology for Cancer Research (ITCR) program, under a grant to Dr. Gordon Harris at Massachusetts General Hospital (U24 CA199460).

NCI Imaging Data Commons (IDC) project supported the development of new features and bug fixes marked with "IDC:priority", "IDC:candidate" or "IDC:collaboration". NCI Imaging Data Commons is supported by contract number 19X037Q from Leidos Biomedical Research under Task Order HHSN26100071 from NCI. IDC Viewer is a customized version of the OHIF Viewer.

This project is tested with BrowserStack. Thank you for supporting open-source!

License

MIT © OHIF

FOSSA Status