101 lines
3.9 KiB
Markdown
101 lines
3.9 KiB
Markdown
# Architecture
|
|
|
|
Looking to extend your instance of the OHIF Viewer? Want learn how to reuse _a
|
|
portion_ of the Viewer in your own application? Or maybe you want to get
|
|
involved and draft or suggest a new feature? Regardless, you're in the right
|
|
place!
|
|
|
|
The OHIF Viewer aims to be decoupled, configurable, and extensible; while this
|
|
allows our code to be used in more ways, it also increases complexity. Below, we
|
|
aim to demistify that complexity by providing insight into how our Viewer is
|
|
architected, and the role each of it's dependent libraries plays.
|
|
|
|
## Overview
|
|
|
|
The [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react) repository
|
|
contains the source code for the OHIF Medical Imaging Viewer. It is effectively
|
|
a React
|
|
[progressive web app](https://developers.google.com/web/progressive-web-apps/)
|
|
(PWA) that combines the business logic housed in
|
|
[`OHIF/ohif-core`](https://github.com/OHIF/ohif-core) and the components in our
|
|
React Component library
|
|
[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase). It provides
|
|
customization for common use cases through
|
|
[configuration](../essentials/configuration.md) and for adding functionality via
|
|
[extensions](./extensions.md).
|
|
|
|
### Business Logic
|
|
|
|
Our goal is to maintain the majority of our business logic in
|
|
[`OHIF/ohif-core`](https://github.com/OHIF/ohif-core). `ohif-core` offers
|
|
pre-packaged solutions for features common to Web-based medical imaging viewers.
|
|
For example:
|
|
|
|
- Hotkeys
|
|
- DICOM Web
|
|
- Hanging Protocols
|
|
- Managing a study's measurements
|
|
- Managing a study's DICOM metadata
|
|
- A flexible pattern for extensions
|
|
- [And many others](https://github.com/OHIF/ohif-core/blob/master/src/index.js#L49-L69)
|
|
|
|
It does this while remaining decoupled from any particular view library or
|
|
rendering logic. While we use it to power our React Viewer, it can be used with
|
|
Vue, React, Vanilla JS, or any number of other frameworks.
|
|
|
|
### React Component Library
|
|
|
|
[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase) is a React
|
|
Component library that contains the reusable components that power the OHIF
|
|
Viewer. It allows us to build, compose, and test components in isolation; easing
|
|
the development process by reducing the need to stand-up a local PACS with test
|
|
case data.
|
|
|
|
[Check out our component library!](https://react.ohif.org/)
|
|
|
|
### Misc. Extensions
|
|
|
|
Want to add custom logic or UI Components to the OHIF Viewer, but don't want to
|
|
maintain a fork? We expose common integration points via
|
|
[extensions](./extensions.md) to make that possible. For a list of extensions
|
|
maintained by OHIF,
|
|
[check out this helpful table](./extensions.html#ohif-maintained-extensions).
|
|
|
|
If you find yourself thinking "I wish the Viewer could do X", and you can't
|
|
accomplish it with an extension today, create a GitHub issue! We're actively
|
|
looking for ways to improve our extensibility ^\_^
|
|
|
|
[Click here to read more about extensions!](./extensions.md)
|
|
|
|
### Diagram
|
|
|
|
This diagram is a conceptual illustration of how the Viewer is architected.
|
|
|
|
0. (optional) `extensions` can be registered with `ohif-core`'s extension
|
|
manager
|
|
1. `ohif-core` provides bussiness logic and a way for `viewer` to access
|
|
registered extensions
|
|
1. The `viewer` composes and provides data to components from our component
|
|
library (`react-viewerbase`)
|
|
1. The `viewer` can be built and served as a stand-alone PWA, or as an
|
|
embeddable package
|
|
([`ohif-viewer`](https://www.npmjs.com/package/ohif-viewer))
|
|
|
|
|
|
|
|
<center><i>architecture diagram</i></center>
|
|
|
|
## Common Questions
|
|
|
|
> When should I use the packaged source `ohif-viewer` versus building a PWA from
|
|
> the source?
|
|
|
|
...
|
|
|
|
> Can I create my own Viewer using Vue.js or Angular.js?
|
|
|
|
You can, but you will not be able to leverage as much of the existing code and
|
|
components. `ohif-core` could still be used for business logic, and to provide a
|
|
model for extensions. `react-viewerbase` would then become a guide for the
|
|
components you would need to recreate.
|