Our custom OHIF Viewer.
Go to file
Joe Boccanfuso 9b0d542526
fix: rework inconsistencies in split button implementation(#3086)
* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.
The primary button will always be the layout grid selector and the MPR toggle is in the drop down menu.
This is the first step to later adding other (e.g. 3D) layout HPs to the menu.

Summary of changes/fixes:
- SplitButton now allows for its primary button to be any button component specified by a UI type.
- SplitButton passes a className to its primary button component to dictate how it should be rendered
based on its active/toggle status, hovering, menu visibility etc.
- The default menu item renderer for the SplitButton, renders acitve toggle items correctly.
- Items/buttons in the toolbar are now all the correct and same size.
- Added ToolbarService.getButtonComponentForUIType to fetch a button component for a given UI type.
- Spacing between toolbar items is now done at the Toolbar level to avoid double spacing and to ensure
uniform spacing.
- The drop down menu closes when clicking the primary button.
- Show a mouse down click effect when clicking the primary button.

Items to investigate still:
The following are all slightly contrary to the design specs of the UI:
- Is the click effect on the primary button satisfactory because with the hover border effect, the
button appears slightly smaller during the mouse down/up operation? (MEDIUM)
- On hover over the drop down button, the right-hand-side corners of the primary button appear
rounded and NOT square. Also the hover over the drop down button border effects make the primary
button appear smaller. (MEDIUM)
- Should there be hover effects when hovering over either tooltip of the SplitButton? (LOW)

* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.

Fixed broken e2e tests.
data-cy and data-tool properties now passed down to primary button component.

* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.

On drop down button hover, the primary button now stretches all the way right with no right border
and with square corners in the top and bottom right as per the toolbar spec.

The mouse down effect gives a full button look (i.e. no borders) with rounded corners all around and black text icon.

* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.

Documented that the primary button of a split button can specify a UI type.

* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.

Feedback from PR review to fix prettier formatting issue.

* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.

Added TODOs as per Bill's request in the PR.

* feat: Combine the layout grid selector tool with the toggle MPR button into a split button.

Feedback from Alireza: reverted the layout selector and MPR tools to be separate toolbar items.

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>
2023-01-06 15:00:23 -05:00
.circleci feat: new Total Metabolic Tumor Volume tmtv (#2866) 2022-08-17 15:13:59 -04:00
.docker fix: Docker build and run were not working (#3081) 2022-12-15 16:10:30 -05:00
.github update stale.yml to not close IDC related issues (#1573) 2020-03-29 16:10:11 -04:00
.netlify feat(cli): Ohif cli for modes and extensions modification (#2696) 2022-04-06 13:28:42 -04:00
.scripts fix(Studies): Qidosupportsincludefield should be true by default (#801) 2019-08-26 09:46:25 -04:00
.vscode feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04:00
.webpack feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04:00
extensions fix: rework inconsistencies in split button implementation(#3086) 2023-01-06 15:00:23 -05:00
modes fix: rework inconsistencies in split button implementation(#3086) 2023-01-06 15:00:23 -05:00
platform fix: rework inconsistencies in split button implementation(#3086) 2023-01-06 15:00:23 -05:00
testdata@1bca96aa2a Updating testdata, no functional change 2022-03-04 14:25:27 -05:00
.browserslistrc fix: measurementsAPI issue caused by production build (#842) 2019-09-04 13:53:13 -04:00
.codecov.yml ci: Try to fix codecov threshold (#976) 2019-09-30 12:24:14 +02:00
.dockerignore Add modified dockerfile from previous version 2019-09-25 23:16:00 -04:00
.env.example test: percy visual testing (#1053) 2019-10-15 14:52:23 -04:00
.eslintignore feat(cli): Ohif cli for modes and extensions modification (#2696) 2022-04-06 13:28:42 -04:00
.eslintrc.json feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04: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: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015) 2022-11-16 14:19:52 -05:00
.gitmodules feat(OHIFv3):Add static e2e data (#2665) 2022-01-31 14:29:20 -05:00
.node-version feat: new Total Metabolic Tumor Volume tmtv (#2866) 2022-08-17 15:13:59 -04:00
.prettierignore feat(cli): Ohif cli for modes and extensions modification (#2696) 2022-04-06 13:28:42 -04:00
.prettierrc feat: new Total Metabolic Tumor Volume tmtv (#2866) 2022-08-17 15:13:59 -04:00
aliases.config.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
babel.config.js fix: storybook with typescript (#2926) 2022-09-13 08:57:22 -04:00
CODE_OF_CONDUCT.md docs: code of conduct 2019-12-09 22:00:17 -05:00
CONTRIBUTING.md docs: contributing guidelines 2019-12-09 22:02:29 -05:00
Dockerfile fix: Docker build and run were not working (#3081) 2022-12-15 16:10:30 -05:00
eslintAliasesResolver.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
jest.config.base.js feat: make hanging protocol work on displaySets instead of series (#2837) 2022-09-07 11:59:11 -04:00
jest.config.js chore: Clean up unused files, imports, and work on getting end-to-end tests and unit tests running (#2272) 2021-03-01 16:52:54 +01:00
lerna.json add modes 2020-05-15 13:00:05 +01:00
LICENSE Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
netlify-lerna-cache.sh fix: Use same config for branch deploys as for deploy previews (#1893) 2020-07-22 19:41:10 +02:00
netlify-lerna-restore.sh fix: Use same config for branch deploys as for deploy previews (#1893) 2020-07-22 19:41:10 +02:00
package.json feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015) 2022-11-16 14:19:52 -05:00
postcss.config.js fix: measurementsAPI issue caused by production build (#842) 2019-09-04 13:53:13 -04:00
preinstall.js feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04:00
README.md feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04:00
runtime.txt feat: enhanced error handling ui (#3021) 2022-11-16 20:27:24 -05:00
tsconfig.json feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04:00
yarn.lock fix: various bugs with v33 re cine and colors (#3052) 2022-12-05 09:53:59 -05: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 NPM downloads Pulls MIT License FOSSA Status

Netlify Status CircleCI codecov This project is using Percy.io for visual regression testing. All Contributors

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 root on 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

  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 to 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's 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).

License

MIT © OHIF

FOSSA Status