docs(architecture): monorepo changes
This commit is contained in:
parent
27869a9cf6
commit
f3d0a4de3c
@ -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))
|
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
@ -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 -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user