* feat(ViewportActionBar): OHIF issue #3123 (#3186) * feat(ViewportActionBar): OHIF issue #3123 - Renamed previous viewport action bar to be LegacyViewportActionBar - Components LegacyViewportActionBar depends on also renamed: LegacyCinePlayer and LegacyPatientInfo - New Viewport coded to specs in issue - added React hook useResizeObserver - added some tailwind classes * Updated tailwind to 3.2.7. Put external imports like React at the top of the import list. * feat(CinePlayer and ViewportActionBar) (#3198) * feat(CinePlayer and ViewportActionBar) - OHIF issue 3123 - new look cine control implemented - new custom blue color in tailwind config for various hover backgrounds in the cine control - new icons added for cine - Tooltip component now can be placed top (center) on hover - Tooltip component border colour now consistent with specs - fixed NPE in ViewportActionBar - upgraded tailwind to 3.2.7 in platform/ui - fixed issues in various button components brought by tailwind 3.2.7 where classes now need important flag - fixed issue with InputRange component so that the tracked value property can change externally - InputRange component can now optionally show its label - added new measurement tracking state service to hydrate SR without prompting - segmentation can also now be hydrated without prompting * PR feedback: - cine centralized to OHIFCornerstoneViewport - introduced a type for the CinePlayer properties * Addressed PR comments and concerns... The DOM ref for the root component of the ViewportActionBar is now added to state so that the various callbacks and ResizeObserver are updated with it. The CinePlayer FPS slider tooltip was moved up so that its arrow does not intersect the FPS text. The hover area for the CinePlayer slider tooltip is now the FPS < > buttons and text. The tracked measurements are now filtered to only include those of the active viewport series when the tracked measurement navigation arrows are used. * Addressed PR comments... The update to tailwind 3.2.7 caused several look-and-feel, UI regressions, so we are rolling back to 3.2.4. |
||
|---|---|---|
| .circleci | ||
| .docker | ||
| .github | ||
| .netlify | ||
| .scripts | ||
| .vscode | ||
| .webpack | ||
| extensions | ||
| modes | ||
| platform | ||
| testdata@1bca96aa2a | ||
| .browserslistrc | ||
| .codecov.yml | ||
| .dockerignore | ||
| .env.example | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitattributes | ||
| .gitignore | ||
| .gitmodules | ||
| .node-version | ||
| .prettierignore | ||
| .prettierrc | ||
| aliases.config.js | ||
| babel.config.js | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| Dockerfile | ||
| eslintAliasesResolver.js | ||
| jest.config.base.js | ||
| jest.config.js | ||
| lerna.json | ||
| LICENSE | ||
| netlify-lerna-cache.sh | ||
| netlify-lerna-restore.sh | ||
| package.json | ||
| postcss.config.js | ||
| preinstall.js | ||
| README.md | ||
| runtime.txt | ||
| tsconfig.json | ||
| yarn.lock | ||
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.
About
The OHIF Medical Imaging Viewer is for viewing medical images. It 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 5-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 it's 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
- 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
We offer support through GitHub Issues. You can:
For commercial support, academic collaborations, and answers to common questions; please read our documented FAQ.
Quick Start Deployment
This is only one of many ways to configure and deploy the OHIF Viewer. To learn more about your options, and how to choose the best one for your requirements, check out our deployment recipes and documentation.
The fastest and easiest way to get started is to include the OHIF Viewer with a script tag. In practice, this is as simple as:
- Including the following dependencies with script tags:
- Have an element with an ID of
rooton the page - Configure the OHIF Viewer at
window.config:
window.config = {
routerBasename: '/',
servers: {
dicomWeb: [
{
name: 'DCM4CHEE',
qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
qidoSupportsIncludeField: true,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
},
],
},
};
- Install the viewer:
window.OHIFStandaloneViewer.installViewer(window.config);
This exact setup is demonstrated in this CodeSandbox and in our Embedding The Viewer deployment recipe.
Developing
Requirements
- Yarn 1.17.3+
- Node 10+
- Yarn Workspaces should be enabled on your machine:
yarn config set workspaces-experimental true
Getting Started
- Fork this repository
- Clone your forked repository
git clone https://github.com/YOUR-USERNAME/Viewers.git
- Navigate to the cloned project's directory
- Add this repo as a
remotenamedupstreamgit remote add upstream https://github.com/OHIF/Viewers.git
yarn installto restore dependencies and link projects
To Develop
From this repository's root directory:
# Enable Yarn Workspaces
yarn config set workspaces-experimental true
# Restore dependencies
yarn install
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 project.json files.
| Yarn Commands | Description |
|---|---|
| Develop | |
dev or start |
Default development experience for Viewer |
dev:project <package-name> |
Replace with core, ui, i18n, cornerstone, vtk, etc. |
test:unit |
Jest multi-project test runner; overall coverage |
| Deploy | |
build* |
Builds production output for our PWA Viewer |
* - For more information on our different builds, check out our Deploy Docs
Projects
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 #
│ ├── cornerstone # image rendering and tools w/ Cornerstone
│ ├── cornerstone- dicom-sr #
│ └── measurement-tracking #
│
├── modes #
│ ├── _example # Skeleton of example mode
│ ├── basic-dev-mode # Basic development mode
│ └── longitudinal # Longitudinal mode (measurement tracking)
│
├── platform #
│ ├── core # Business Logic
│ ├── i18n # Internationalization Support
│ ├── ui # React component library
│ └── viewer # Connects platform and extension projects
│
├── ... # misc. shared configuration
├── lerna.json # MonoRepo (Lerna) settings
├── package.json # Shared devDependencies and commands
└── README.md # This file
Want to better understand why and how we've structured this repository? Read more about it in our Architecture Documentation.
Platform
These projects comprise the
| Name | Description | Links |
|---|---|---|
| @ohif/core | Business logic and classes that model the data, services, and extensions that are framework agnostic | NPM |
| @ohif/i18n | Language files and small API for wrapping component/ui text for translations | NPM |
| @ohif/viewer | The OHIF Viewer. Where we consume and configure all platform library's and extensions | NPM |
| @ohif/ui | Reusable React components we consume and compose to build our Viewer's UI | NPM |
Extensions
This is a list of Extensions maintained by the OHIF Core team. It is possible to customize and configure these extensions, and you can even create your own. You can read more about extensions here.
| Name | Description | Links |
|---|---|---|
| @ohif/extension-cornerstone | 2D image viewing, annotation, and segementation tools | NPM |
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).
This project is tested with BrowserStack. Thank you for supporting open source
License
MIT © OHIF