docs(architecture): monorepo changes

This commit is contained in:
dannyrb 2019-09-05 20:54:56 -04:00
parent 27869a9cf6
commit f3d0a4de3c

View File

@ -12,28 +12,48 @@ architected, and the role each of it's dependent libraries plays.
## Overview ## Overview
The [`OHIF/Viewers`][viewers-project] project contains the source code for the The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a
OHIF Medical Imaging Viewer. It is effectively a React [progressive web [`monorepo`][monorepo]. This means that this repository, instead of containing a
app][pwa] (PWA) that combines the business logic housed in single project, contains many projects. If you explore our project structure,
[`OHIF/ohif-core`][core] and the components in our React Component library you'll see the following:
[`OHIF/react-viewerbase`][component-library]. It provides customization for
common use cases through [configuration][configuration] and for adding ```bash
functionality via [extensions][extensions]. .
├── extensions
│ ├── _example # Skeleton of example extension
│ ├── cornerstone # 2D images w/ Cornerstone.js
│ ├── dicom-html # Structured Reports as HTML in viewport
│ ├── dicom-microscopy # Whole slide microscopy viewing
│ ├── dicom-pdf # View DICOM wrapped PDFs in viewport
│ └── vtk # MPR and Volume support w/ VTK.js
├── 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
```
Continue reading to see how these libraries work together to create the OHIF
Viewer.
### Business Logic ### Business Logic
Our goal is to maintain the majority of our business logic in The [`@ohif/core`][core-github] project offers pre-packaged solutions for
[`OHIF/ohif-core`](https://github.com/OHIF/ohif-core). `ohif-core` offers features common to Web-based medical imaging viewers. For example:
pre-packaged solutions for features common to Web-based medical imaging viewers.
For example:
- Hotkeys - Hotkeys
- DICOM Web - DICOM Web requests
- Hanging Protocols - Hanging Protocols
- Managing a study's measurements - Managing a study's measurements
- Managing a study's DICOM metadata - Managing a study's DICOM metadata
- A flexible pattern for extensions - A flexible pattern for extensions
- [And many others](https://github.com/OHIF/ohif-core/blob/master/src/index.js#L49-L69) - And many others
It does this while remaining decoupled from any particular view library or 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 rendering logic. While we use it to power our React Viewer, it can be used with
@ -41,20 +61,42 @@ Vue, React, Vanilla JS, or any number of other frameworks.
### React Component Library ### React Component Library
[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase) is a React [`@ohif/ui`][ui-github] is a React Component library that contains the reusable
Component library that contains the reusable components that power the OHIF components that power the OHIF Viewer. It allows us to build, compose, and test
Viewer. It allows us to build, compose, and test components in isolation; easing components in isolation; easing the development process by reducing the need to
the development process by reducing the need to stand-up a local PACS with test stand-up a local PACS with test case data.
case data.
Extension authors can also use these same components when building their
extension's UI; allowing for a consistent look and feel with the rest of the
application.
[Check out our component library!](https://react.ohif.org/) [Check out our component library!](https://react.ohif.org/)
### Misc. Extensions ### Internationalization (i18n)
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 ### The Viewer
maintained by OHIF,
...
### Extensions & Configuration
While OHIF maintains several high value and commonly requested features in its
own extensions, there are many instances where one may wish to further extend
the viewer. Some common use cases include:
- Adding AI/ML tools and insights
- Custom workflows for guided diagnosis
- Collecting specific annotations for training data or reports
- Authentication and granular permissions
- Teleconsultation workflow, image comments, and tracking
- Adding surgical templating tools and reports
- and many others
We expose common integration points via [extensions](./extensions.md) to make
this possible. The viewer and many of our own extensions also offer
[configuration][configuration]. For a list of extensions maintained by OHIF,
[check out this helpful table](./extensions.html#ohif-maintained-extensions). [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 If you find yourself thinking "I wish the Viewer could do X", and you can't
@ -67,15 +109,14 @@ looking for ways to improve our extensibility ^\_^
This diagram is a conceptual illustration of how the Viewer is architected. This diagram is a conceptual illustration of how the Viewer is architected.
1. (optional) `extensions` can be registered with `ohif-core`'s extension 1. (optional) `extensions` can be registered with `@ohif/core`'s extension
manager manager
2. `ohif-core` provides bussiness logic and a way for `viewer` to access 2. `@ohif/core` provides bussiness logic and a way for `@ohif/viewer` to access
registered extensions registered extensions
3. The `viewer` composes and provides data to components from our component 3. The `@ohif/viewer` composes and provides data to components from our
library (`react-viewerbase`) component library (`@ohif/ui`)
4. The `viewer` can be built and served as a stand-alone PWA, or as an 4. The `@ohif/viewer` can be built and served as a stand-alone PWA, or as an
embeddable package embeddable package ([`@ohif/viewer`][viewer-npm])
([`ohif-viewer`](https://www.npmjs.com/package/ohif-viewer))
![Architecture Diagram](../assets/img/architecture-diagram.png) ![Architecture Diagram](../assets/img/architecture-diagram.png)
@ -83,17 +124,17 @@ This diagram is a conceptual illustration of how the Viewer is architected.
## Common Questions ## Common Questions
> When should I use the packaged source `ohif-viewer` versus building a PWA from > When should I use the packaged source `@ohif/viewer` versus building a PWA
> the source? > from the source?
... ...
> Can I create my own Viewer using Vue.js or Angular.js? > 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 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 components. `@ohif/core` could still be used for business logic, and to provide
model for extensions. `react-viewerbase` would then become a guide for the a model for extensions. `@ohif/ui` would then become a guide for the components
components you would need to recreate. you would need to recreate.
<!-- <!--
Links Links
@ -101,9 +142,10 @@ components you would need to recreate.
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
[viewers-project]: https://github.com/OHIF/Viewers [viewers-project]: https://github.com/OHIF/Viewers
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
[pwa]: https://developers.google.com/web/progressive-web-apps/ [pwa]: https://developers.google.com/web/progressive-web-apps/
[core]: https://github.com/OHIF/ohif-core
[component-library]: https://github.com/OHIF/react-viewerbase
[configuration]: ../essentials/configuration.md [configuration]: ../essentials/configuration.md
[extensions]: ./extensions.m [extensions]: ./extensions.md
[core-github]: https://github.com/OHIF/viewers/platform/core
[ui-github]: https://github.com/OHIF/Viewers/platform/ui
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->