ohif-viewer/platform/viewer
Joe Boccanfuso 35d0787211
feat(ViewportActionBar and CinePlayer): Add new design for action bar and cine player (#3204)
* 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.
2023-02-28 15:57:19 -05:00
..
.recipes feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015) 2022-11-16 14:19:52 -05:00
.webpack feat: add more e2e tests for MPR and add test mode and extension (#3180) 2023-02-17 15:04:07 -05:00
assets Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
cypress feat: add more e2e tests for MPR and add test mode and extension (#3180) 2023-02-17 15:04:07 -05:00
public feat: add more e2e tests for MPR and add test mode and extension (#3180) 2023-02-17 15:04:07 -05:00
src fix(translation): errors in StudyList and StudyBrowser for es (#3170) 2023-02-24 13:07:16 -05:00
.all-contributorsrc Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
.browserslistrc fix: measurementsAPI issue caused by production build (#842) 2019-09-04 13:53:13 -04:00
.dockerignore Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
.env feat: New @ohif/viewer project structure + routes (#1674) 2020-05-15 12:57:23 +01:00
.env.example feat: New @ohif/viewer project structure + routes (#1674) 2020-05-15 12:57:23 +01:00
.eslintignore Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
babel.config.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
CHANGELOG.md chore(release): publish [skip ci] 2020-05-14 14:24:17 +00:00
cypress.config.ts feat: add more e2e tests for MPR and add test mode and extension (#3180) 2023-02-17 15:04:07 -05:00
jest.config.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
jestBabelTransform.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
LICENSE Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
netlify.toml fix(Segmentation): bump packages to fix segmentation rendering (#3138) 2023-02-03 09:33:28 -05:00
package.json feat(SR): Measurement adapter mappings and save to same series (#3140) 2023-02-17 16:44:21 -05:00
pluginConfig.json feat: DicomTagBrowser tool (#2975) 2022-11-16 22:16:12 -05:00
postcss.config.js Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
preinstall.js feat: cornerstone3D stack and volume viewports (#2787) 2022-07-27 12:39:04 -04:00
README.md Docs reorganization 2021-07-15 09:54:01 +02:00
tailwind.config.js feat(ViewportActionBar and CinePlayer): Add new design for action bar and cine player (#3204) 2023-02-28 15:57:19 -05:00
tailwind.css fix(tailwind): Ensure tailwind properly purges unused utility classes (#2485) 2021-07-26 13:22:25 +02:00

@ohif/viewer

@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 All Contributors MIT License

ATTENTION: If you are looking for Version 1 (the Meteor Version) of this repository, it lives on the v1.x branch

Why?

Building a web based medical imaging viewer from scratch is time intensive, hard to get right, and expensive. Instead of re-inventing the wheel, you can use the OHIF Viewer as a rock solid platform to build on top of. The Viewer is a React Progressive Web Application that can be embedded in existing applications via it's packaged source (ohif-viewer) or hosted stand-alone. The Viewer exposes configuration and extensions to support workflow customization and advanced functionality at common integration points.

If you're interested in using the OHIF Viewer, but you're not sure it supports your use case check out our docs. Still not sure, or you would like to propose new features? Don't hesitate to create an issue or open a pull request.

Getting Started

This readme is specific to testing and developing locally. If you're more interested in production deployment strategies, you can check out our documentation on publishing.

Want to play around before you dig in? Check out our LIVE Demo

Setup

Requirements:

Steps:

  1. Fork this repository
  2. Clone your forked repository (your origin)
  • git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git
  1. Add OHIF/Viewers as a remote repository (the upstream)
  • git remote add upstream git@github.com:OHIF/Viewers.git

Developing Locally

In your cloned repository's root folder, run:

// Restore dependencies
yarn install

// Stands up local server to host Viewer.
// Viewer connects to our public cloud PACS by default
yarn start

For more advanced local development scenarios, like using your own locally hosted PACS and test data, check out our Essential: Getting Started guide.

E2E Tests

Using Cypress to create End-to-End tests and check whether the application flow is performing correctly, ensuring that the integrated components are working as expected.

Why Cypress?

Cypress is a next generation front end testing tool built for the modern web. With Cypress is easy to set up, write, run and debug tests

It allow us to write different types of tests:

  • End-to-End tests
  • Integration tests
  • Unit tets

All tests must be in ./cypress/integration folder.

Commands to run the tests:

// Open Cypress Dashboard that provides insight into what happened when your tests ran
yarn run cy

// Run all tests using Electron browser headless
yarn run cy:run

// Run all tests in CI mode
yarn run cy:run:ci

Contributing

Large portions of the Viewer's functionality are maintained in other repositories. To get a better understanding of the Viewer's architecture and "where things live", read our docs on the Viewer's architecture

It is notoriously difficult to setup multiple dependent repositories for end-to-end testing and development. That's why we recommend writing and running unit tests when adding and modifying features. This allows us to program in isolation without a complex setup, and has the added benefit of producing well-tested business logic.

  1. Clone this repository
  2. Navigate to the project directory, and yarn install
  3. To begin making changes, yarn run dev
  4. To commit changes, run yarn run cm

When creating tests, place the test file "next to" the file you're testing. For example:

// File
index.js;

// Test for file
index.test.js;

As you add and modify code, jest will watch for uncommitted changes and run your tests, reporting the results to your terminal. Make a pull request with your changes to master, and a core team member will review your work. If you have any questions, please don't hesitate to reach out via a GitHub issue.

Contributors

Thanks goes to these wonderful people (emoji key):

Erik Ziegler
Erik Ziegler

💻 🚇
Evren Ozkan
Evren Ozkan

💻
Gustavo André Lelis
Gustavo André Lelis

💻
Danny Brown
Danny Brown

💻 🚇
allcontributors[bot]
allcontributors[bot]

📖
Esref Durna
Esref Durna

💬
diego0020
diego0020

💻
David Wire
David Wire

💻
João Felipe de Medeiros Moreira
João Felipe de Medeiros Moreira

⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © OHIF