initial v3 docs working
This commit is contained in:
Alireza
parent
188d2c75b4
commit
9d49bf4348
@ -1,151 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
title: Architecture
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a
|
||||
[`monorepo`][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:
|
||||
|
||||
```bash
|
||||
.
|
||||
├── 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
|
||||
```
|
||||
|
||||
The `platform` directory contains the business logic library, component library,
|
||||
and the application library that combines them to create a powerful medical
|
||||
imaging viewer.
|
||||
|
||||
The `extensions` directory contains many packages that can be registered with
|
||||
`@ohif/core`'s `ExtensionManager` to expand an application's supported features
|
||||
and functionality.
|
||||
|
||||
|
||||
<!-- <center><i>architecture diagram</i></center> -->
|
||||
|
||||
This diagram is a conceptual illustration of how the Viewer is architected.
|
||||
|
||||
1. (optional) `extensions` can be registered with `@ohif/core`'s
|
||||
`ExtensionManager`
|
||||
2. `@ohif/core` provides bussiness logic and a way for `@ohif/viewer` to access
|
||||
registered extensions
|
||||
3. The `@ohif/viewer` composes and provides data to components from our
|
||||
component library (`@ohif/ui`)
|
||||
4. The `@ohif/viewer` can be built and served as a stand-alone PWA, or as an
|
||||
embeddable package ([`@ohif/viewer`][viewer-npm])
|
||||
|
||||
## Business Logic
|
||||
|
||||
The [`@ohif/core`][core-github] project offers pre-packaged solutions for
|
||||
features common to Web-based medical imaging viewers. For example:
|
||||
|
||||
- Hotkeys
|
||||
- DICOM Web requests
|
||||
- Hanging Protocols
|
||||
- Managing a study's measurements
|
||||
- Managing a study's DICOM metadata
|
||||
- [A flexible pattern for extensions](./extensions/index.md)
|
||||
- And many others
|
||||
|
||||
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/ui`][ui-github] 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.
|
||||
|
||||
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/)
|
||||
|
||||
## 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/index.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/index.md#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/index.md)
|
||||
|
||||
## 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. `@ohif/ui` would then become a guide for the components
|
||||
you would need to recreate.
|
||||
|
||||
<!--
|
||||
Links
|
||||
-->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
[monorepo]: https://github.com/OHIF/Viewers/issues/768
|
||||
[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/
|
||||
[configuration]: ../configuring/index.md
|
||||
[extensions]: ../extensions/index.md
|
||||
[core-github]: https://github.com/OHIF/viewers/platform/core
|
||||
[ui-github]: https://github.com/OHIF/Viewers/tree/master/platform/ui
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -1,15 +1,19 @@
|
||||
<div class='row'>
|
||||
<div class='column' style='text-align: right; padding: 0 20px'>
|
||||
<strong>Looking for a Live Demo?</strong>
|
||||
<a href="http://viewer.ohif.org/">Preview The OHIF Viewer</a>
|
||||
</div>
|
||||
<div class='column' style='text-align: left; padding: 0 20px'>
|
||||
<a href="https://www.netlify.com">
|
||||
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
---
|
||||
id: Introduction
|
||||
slug: /
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="text--center">
|
||||
<a style={{marginRight:'10px'}} href="http://viewer.ohif.org/">Preview The OHIF Viewer</a>
|
||||
<a href="https://www.netlify.com"/>
|
||||
<img style={{width:'70px'}} src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" />
|
||||
</div>
|
||||
|
||||
|
||||
> ATTENTION! You are looking at the docs for the `OHIF-v3` Viewer (third time is always a charm). If you're looking for the our `OHIF-v2` (React stable version) or OHIF-v1 (deprecated `Meteor` version) select it's version from the dropdown box in the top left corner
|
||||
> of this page.
|
||||
|
||||
@ -26,7 +30,7 @@ annotating, and reporting on DICOM images in 2D (slices) and 3D (volumes).
|
||||
|
||||
|
||||
|
||||
<center><i>The <strong>OHIF Viewer v3</strong>: A general purpose DICOM Viewer (<a href="http://viewer.ohif.org/">Live Demo</a>)</center>
|
||||
<!-- <center><i>The <strong>OHIF Viewer v3</strong>: A general purpose DICOM Viewer (<a href="http://viewer.ohif.org/">Live Demo</a>)</center> -->
|
||||
|
||||
|
||||
|
||||
@ -55,7 +59,114 @@ our medical image web viewers from the start. The summary of changes include:
|
||||
Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
|
||||
|
||||
|
||||
{% include "./_gap_analysis.md" %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" width="50%">OHIF-v2 functionalities</th>
|
||||
<th align="center">OHIF-v3</th>
|
||||
<th align="center">Comment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left">Rendering of 2D images via Cornerstone</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Study List</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Series Browser</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM JSON</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">2D Tools via CornerstoneTools</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">OpenID Connect standard authentication flow for connecting to identity providers</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">In Progress</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Internationalization</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Drag/drop DICOM data into the viewer (see https://viewer.ohif.org/local)</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">IHE Invoke Image Display - Standard-compliant launching of the viewer (e.g. from PACS or RIS)</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM PDF support</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM Whole-slide imaging viewport</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Displaying non-renderable DICOM as HTML</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Segmentation support</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">RT STRUCT support</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">White-labelling: Easily replace the OHIF Logo with your logo</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM upload to PACS</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Google Cloud adapter</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">VTK Extension + MIP / MPR layout</td>
|
||||
<td align="center">❌</td>
|
||||
<td align="center">Other plans</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">UMD Build (Embedded Viewer). </td>
|
||||
<td align="center">❌</td>
|
||||
<td align="center">The problem is that this breaks a bunch of extensions that rely on third party scripts (e.g. VTK) which have their own web worker loaders.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
# OHIF Viewers
|
||||
|
||||
- [Our Process](our-process.md)
|
||||
- User Manuals
|
||||
- [Overview](userManuals/index.md)
|
||||
- [Study List](userManuals/studyList/index.md)
|
||||
- [Viewer](userManuals/viewer/index.md)
|
||||
- [Study Panel](userManuals/viewer/studyPanel/study-panel.md)
|
||||
- [Measurement Panel](userManuals/viewer/measurementPanel/measurement-panel.md)
|
||||
- [Viewport](userManuals/viewer/viewport/viewport.md)
|
||||
- [Toolbar](userManuals/viewer/toolbar/toolbar.md)
|
||||
- [Hot keys](userManuals/viewer/hotkeys/hotkeys.md)
|
||||
- [Language](userManuals/viewer/language/language.md)
|
||||
- Development
|
||||
- [Getting Started](development/getting-started.md)
|
||||
- [Contributing](development/contributing.md)
|
||||
- [Continuous Integration](development/continous-integration.md)
|
||||
- [Testing](development/testing.md)
|
||||
- [Configuring Data Source](configuring/index.md)
|
||||
- [Local DICOM Server](configuring/data-source.md)
|
||||
|
||||
---
|
||||
|
||||
- [Architecture](architecture/index.md)
|
||||
- [Viewer](viewer/index.md)
|
||||
- [Configuration](viewer/configuration.md)
|
||||
- [Theming](viewer/themeing.md)
|
||||
- [Internationalization](viewer/internationalization.md)
|
||||
- [Extensions](extensions/index.md#Overview)
|
||||
- [Registering](extensions/index.md#registering-an-extension)
|
||||
- [OHIF Maintained](extensions/index.md#ohif-maintained-extensions)
|
||||
- [Lifecycle Hooks](extensions/index.md#lifecycle-hooks)
|
||||
- [preRegistration](extensions/lifecycle/pre-registration.md)
|
||||
- [onModeEnter](extensions/lifecycle/on-mode-enter.md)
|
||||
- [onModeExit](extensions/lifecycle/on-mode-exit.md)
|
||||
- [Modules](extensions/index.md#modules)
|
||||
- [Toolbar](extensions/modules/toolbar.md)
|
||||
- [Commands](extensions/modules/commands.md)
|
||||
- [DataSource](extensions/modules/data-source.md)
|
||||
- [SOPClassHandler](extensions/modules/sop-class-handler.md)
|
||||
- [Viewport](extensions/modules/viewport.md)
|
||||
- [Panel](extensions/modules/panel.md)
|
||||
- [LayoutTemplate](extensions/modules/layout-template.md)
|
||||
- [HangingProtocol](extensions/modules/hpModule.md)
|
||||
- [Context](extensions/index.md#contexts)
|
||||
- [ExtensionManager](managers/extension.md)
|
||||
- [Modes](modes/index.md)
|
||||
- [LifeCycle](modes/lifeCycle.md#overview)
|
||||
- [Validity](modes/validity.md#overview)
|
||||
- [Routes](modes/routes.md#overview)
|
||||
- [Managers](managers/index.md)
|
||||
- [Extension Manager](managers/extension.md)
|
||||
- [Service Manager](managers/service.md)
|
||||
- [Commands Manager](managers/commands.md)
|
||||
- [Hotkeys Manager](managers/hotkeys.md)
|
||||
- [Services](services/index.md)
|
||||
- [Data Services](services/data/index.md)
|
||||
- [Dicom Metadata Store](services/data/DicomMetadataStore.md)
|
||||
- [DisplaySet Service](services/data/DisplaySetService.md)
|
||||
- [Hanging Protocol Service](services/data/HangingProtocolService.md)
|
||||
- [Toolbar Service](services/data/ToolbarService.md)
|
||||
- [Measurement Service](services/data/MeasurementService.md)
|
||||
- [UI Services](services/ui/index.md)
|
||||
- [UI Notification Service](services/ui/ui-notification-service.md)
|
||||
- [UI Modal Service](services/ui/ui-modal-service.md)
|
||||
- [UI Dialog Service](services/ui/ui-dialog-service.md)
|
||||
- [UI Viewport Dialog Service](services/ui/ui-viewport-dialog-service.md)
|
||||
- [Viewport Grid Service](services/ui/ViewportGridService.md)
|
||||
- [Pub/Sub Pattern](services/pubsub.md)
|
||||
|
||||
- [Deployment](deployment/index.md)
|
||||
- [Build for Production](deployment/recipes/build-for-production.md)
|
||||
- [Static](deployment/recipes/static-assets.md)
|
||||
- [Nginx + Image Archive](deployment/recipes/nginx--image-archive.md)
|
||||
- [User Account Control](deployment/recipes/user-account-control.md)
|
||||
- [Google Cloud Healthcare](connecting-to-image-archives/google-cloud-healthcare.md)
|
||||
|
||||
|
||||
- [FAQ](faq/index.md)
|
||||
- [Scope of Project](faq/scope-of-project.md)
|
||||
- [Browser Support](faq/browser-support.md)
|
||||
- [PWA vs Packaged](faq/pwa-vs-packaged.md)
|
||||
- [Help](help.md) -->
|
||||
@ -1,110 +0,0 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left" width="50%">OHIF-v2 functionalities</th>
|
||||
<th align="center">OHIF-v3</th>
|
||||
<th align="center">Comment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left">Rendering of 2D images via Cornerstone</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Study List</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Series Browser</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM JSON</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">2D Tools via CornerstoneTools</td>
|
||||
<td align="center">✅</td>
|
||||
<td align="center"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">OpenID Connect standard authentication flow for connecting to identity providers</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">In Progress</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Internationalization</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Drag/drop DICOM data into the viewer (see https://viewer.ohif.org/local)</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">IHE Invoke Image Display - Standard-compliant launching of the viewer (e.g. from PACS or RIS)</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM PDF support</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM Whole-slide imaging viewport</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Displaying non-renderable DICOM as HTML</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Segmentation support</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">RT STRUCT support</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">White-labelling: Easily replace the OHIF Logo with your logo</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">DICOM upload to PACS</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Google Cloud adapter</td>
|
||||
<td align="center">🔜</td>
|
||||
<td align="center">Not Started</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">VTK Extension + MIP / MPR layout</td>
|
||||
<td align="center">❌</td>
|
||||
<td align="center">Other plans</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">UMD Build (Embedded Viewer). </td>
|
||||
<td align="center">❌</td>
|
||||
<td align="center">The problem is that this breaks a bunch of extensions that rely on third party scripts (e.g. VTK) which have their own web worker loaders.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
❌
|
||||
✅
|
||||
🔜
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 355 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 440 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 994 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
@ -1,54 +0,0 @@
|
||||
{
|
||||
"title": "OHIF",
|
||||
"description": "Documentation for the OHIF framework",
|
||||
"gitbook": ">3.0.0",
|
||||
"plugins": [
|
||||
"edit-link",
|
||||
"theme-cornerstone",
|
||||
"-fontsettings",
|
||||
"github",
|
||||
"ga",
|
||||
"sitemap",
|
||||
"anchors",
|
||||
"versions"
|
||||
],
|
||||
"pluginsConfig": {
|
||||
"edit-link": {
|
||||
"base": "https://github.com/OHIF/Viewers/edit/master/docs",
|
||||
"label": "Edit This Page"
|
||||
},
|
||||
"github": {
|
||||
"url": "https://github.com/OHIF/Viewers"
|
||||
},
|
||||
"ga": {
|
||||
"token": "UA-110573590-2"
|
||||
},
|
||||
"sitemap": {
|
||||
"hostname": "https://docs.ohif.org"
|
||||
},
|
||||
"versions": {
|
||||
"gitbookConfigURL": "https://raw.githubusercontent.com/OHIF/Viewers/master/docs/book.json",
|
||||
"options": [
|
||||
{
|
||||
"value": "https://docs.ohif.org/history/v1/",
|
||||
"text": "Version 1.0.0 (Meteor)"
|
||||
},
|
||||
{
|
||||
"value": "https://docs.ohif.org/history/v2/",
|
||||
"text": "Version 2.0.0"
|
||||
},
|
||||
{
|
||||
"value": "https://docs.ohif.org/",
|
||||
"text": "Version 3.0.0",
|
||||
"selected": true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"links": {
|
||||
"sharing": {
|
||||
"facebook": false,
|
||||
"twitter": false
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Configuring",
|
||||
"position": 4
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Deployment",
|
||||
"position": 8
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Recipes",
|
||||
"position": 2
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
# Embedded Viewer
|
||||
|
||||
The quickest and easiest way to get the OHIF Viewer up and running is to embed
|
||||
it into an existing web application. It allows us to forego a "build step", and
|
||||
add a powerful medical imaging viewer to an existing web page using only a few
|
||||
include tags. Here's how it works:
|
||||
|
||||
{% include "./../_embedded-viewer-diagram.md" %}
|
||||
|
||||
1. Create a new web page or template that includes the following external
|
||||
dependencies:
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
|
||||
<code>Google Font: Roboto</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/@ohif/viewer">
|
||||
<code>@ohif/viewer@latest</code>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ol start="2">
|
||||
<li>Create a JS Object or Function to hold the OHIF Viewer's configuration. Here are some
|
||||
example values that would allow the viewer to hit our public PACS:</li>
|
||||
</ol>
|
||||
|
||||
```js
|
||||
// Set before importing `ohif-viewer` (JS Object)
|
||||
window.config = {
|
||||
// default: '/'
|
||||
routerBasename: '/',
|
||||
servers: {
|
||||
dicomWeb: [
|
||||
{
|
||||
name: 'DCM4CHEE',
|
||||
wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
To learn more about how you can configure the OHIF Viewer, check out our
|
||||
[Configuration Guide](../../configuring/index.md).
|
||||
|
||||
<ol start="3"><li>
|
||||
Render the viewer in the web page's target <code>div</code>
|
||||
</li></ol>
|
||||
|
||||
```js
|
||||
// Made available by the `@ohif/viewer` script included in step 1
|
||||
var containerId = 'id-of-div-to-render-component-to';
|
||||
var componentRenderedOrUpdatedCallback = function() {
|
||||
console.log('OHIF Viewer rendered/updated');
|
||||
};
|
||||
window.OHIFViewer.installViewer(
|
||||
window.config,
|
||||
containerId,
|
||||
componentRenderedOrUpdatedCallback
|
||||
);
|
||||
```
|
||||
|
||||
You can see a live example of this recipe in [this CodeSandbox][code-sandbox].
|
||||
|
||||
## Add Extensions
|
||||
|
||||
The UMD build of the OHIF Viewer is a "light weight" build that only contains
|
||||
the core extensions required for basic 2D image viewing. It's possible to add
|
||||
other extensions at runtime.
|
||||
|
||||
This only requires us to include a single script tag, and add it using the
|
||||
`extensions` key to our config. In this practical example, we register our
|
||||
popular whole slide microscopy extension:
|
||||
|
||||
```html
|
||||
<script
|
||||
src="https://unpkg.com/@ohif/extension-dicom-microscopy@0.50.5/dist/index.umd.js"
|
||||
crossorigin
|
||||
></script>
|
||||
|
||||
<!-- --->
|
||||
<script>
|
||||
window.config = {
|
||||
// ...
|
||||
extensions: [OHIFExtDicomMicroscopy],
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
You can see an example of a slide microscopy study in the viewer [with the
|
||||
extension enabled here][whole-slide-ext-demo] ([source code][ext-code-sandbox])
|
||||
and [without it here][whole-slide-base-demo] ([source code][code-sandbox]).
|
||||
|
||||
You can read more about extensions and how to create your own in our
|
||||
[extensions guide](/extensions/index.md).
|
||||
|
||||
#### FAQ
|
||||
|
||||
> I'm having trouble getting this to work. Where can I go for help?
|
||||
|
||||
First, check out this fully functional [CodeSandbox][code-sandbox] example. If
|
||||
you're still having trouble, feel free to search or GitHub issues. Can't find
|
||||
anything related your problem? Create a new one.
|
||||
|
||||
> My application's styles are impacting the OHIF Viewer's look and feel. What
|
||||
> can I do?
|
||||
|
||||
When you include stylesheets and scripts, they are added globally. This has the
|
||||
potential of causing conflicts with other scripts and styles on the page. To
|
||||
prevent this, `embed` the viewer in a new/empty web page. Have that working?
|
||||
Good. Now `embed` that new page using an
|
||||
[`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
|
||||
|
||||
This should produce the expected result while also protecting your page from any
|
||||
globally defined styles/scripts.
|
||||
|
||||
> We're trying to embed the OHIF Viewer into an existing React App, but seeing
|
||||
> react-dom and react conflicts. What can we do?
|
||||
|
||||
If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows:
|
||||
```jsx
|
||||
import { installViewer } from '@ohif/viewer'
|
||||
|
||||
const ohifViewerConfig = window.config // or set it here
|
||||
const containerId = 'ohif'
|
||||
const componentRenderedOrUpdatedCallback = function() {
|
||||
console.log('OHIF Viewer rendered/updated');
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
installViewer(
|
||||
ohifViewerConfig,
|
||||
containerId,
|
||||
componentRenderedOrUpdatedCallback
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
...
|
||||
//you can render in any element you wish
|
||||
<AnyTag id={containerId}/>
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
`installViewer` is a convenience method that pulls in some dependencies that may
|
||||
not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
|
||||
which is a react component that takes the `configuration` outlined above as
|
||||
props. You can use it as a reusable component, and to avoid `react` version
|
||||
conflict issues.
|
||||
|
||||
|
||||
<!--
|
||||
LINKS
|
||||
-->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
[code-sandbox]: https://codesandbox.io/s/viewer-script-tag-tprch
|
||||
[whole-slide-base-demo]: https://tprch.csb.app/viewer/1.2.392.200140.2.1.1.1.2.799008771.2020.1519719354.757
|
||||
[ext-code-sandbox]: https://codesandbox.io/s/viewer-script-tag-microscopy-extension-44unk
|
||||
[whole-slide-ext-demo]: https://44unk.csb.app/viewer/1.2.392.200140.2.1.1.1.2.799008771.2448.1519719572.518
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -1,75 +0,0 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Google Cloud Healthcare
|
||||
|
||||
> The [Google Cloud Healthcare API](https://cloud.google.com/healthcare/) is a
|
||||
> powerful option for storing medical imaging data in the cloud.
|
||||
|
||||
An alternative to deploying your own PACS is to use a software-as-a-service
|
||||
provider such as Google Cloud. The Cloud Healthcare API promises to be a
|
||||
scalable, secure, cost effective image storage solution for those willing to
|
||||
store their data in the cloud. It offers an
|
||||
[almost-entirely complete DICOMWeb API](https://cloud.google.com/healthcare/docs/dicom)
|
||||
which requires tokens generated via the
|
||||
[OAuth 2.0 Sign In flow](https://developers.google.com/identity/sign-in/web/sign-in).
|
||||
Images can even be transcoded on the fly if this is desired.
|
||||
|
||||
## Setup a Google Cloud Healthcare Project
|
||||
|
||||
- Create a Google Cloud account
|
||||
- Create a project in Google Cloud
|
||||
- Enable the [Cloud Healthcare API](https://cloud.google.com/healthcare/) for
|
||||
your project.
|
||||
- (Optional): Create a Dataset and Data Store for storing your DICOM data
|
||||
- Enable the
|
||||
[Cloud Resource Manager API](https://cloud.google.com/resource-manager/) for
|
||||
your project.
|
||||
- _Note:_ If you are having trouble finding the APIs, use the search box at
|
||||
the top of the Cloud console.
|
||||
- Go to APIs & Services > Credentials to create an OAuth Consent screen and fill
|
||||
in your application details.
|
||||
- Under Scopes for Google APIs, click "manually paste scopes".
|
||||
- Add the following scopes:
|
||||
- `https://www.googleapis.com/auth/cloudplatformprojects.readonly`
|
||||
- `https://www.googleapis.com/auth/cloud-healthcare`
|
||||
- Go to APIs & Services > Credentials to create a new set of credentials:
|
||||
|
||||
- Choose the "Web Application" type
|
||||
- Set up an
|
||||
[OAuth 2.0 Client ID](https://support.google.com/cloud/answer/6158849?hl=en)
|
||||
- Add your domain (e.g. `http://localhost:3000`) to Authorized JavaScript
|
||||
origins.
|
||||
- Add your domain, plus `callback` (e.g. `http://localhost:3000/callback`) to
|
||||
Authorized Redirect URIs.
|
||||
- Save your Client ID for later.
|
||||
|
||||
- (Optional): Enable Public Datasets that are being hosted by Google:
|
||||
https://cloud.google.com/healthcare/docs/resources/public-datasets/
|
||||
|
||||
## Run the viewer with your OAuth Client ID
|
||||
|
||||
1. Open the `config/google.js` file and change `YOURCLIENTID` to your Client ID
|
||||
value.
|
||||
1. Run the OHIF Viewer using the config/google.js configuration file
|
||||
|
||||
```bash
|
||||
cd OHIFViewer
|
||||
yarn install
|
||||
APP_CONFIG=config/google.js yarn run dev
|
||||
```
|
||||
|
||||
## Running via Docker
|
||||
|
||||
The OHIF Viewer Docker container can be connected to Google Cloud Healthcare by
|
||||
providing a Client ID at runtime. This is a very simple method to get up and
|
||||
running.
|
||||
|
||||
1. Install Docker (https://www.docker.com/)
|
||||
1. Run the Docker container, providing a Client ID as an environment variable.
|
||||
Client IDs look like `xyz.apps.googleusercontent.com`.
|
||||
|
||||
```bash
|
||||
docker run --env CLIENT_ID=$CLIENT_ID --publish 5000:80 ohif/viewer:latest
|
||||
```
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Development",
|
||||
"position": 3
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Extensions",
|
||||
"position": 6
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Extension</th>
|
||||
<th>Description</th>
|
||||
<th>Modules</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- CORNERSTONE.js -->
|
||||
<tr>
|
||||
<td>
|
||||
<a href="">
|
||||
Default
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
Default extension provides default viewer layout, a study/series
|
||||
browser, and a datasource that maps to a DICOMWeb compliant backend
|
||||
</td>
|
||||
<td>commandsModule, ContextModule, DataSourceModule, HangingProtocolModule, LayoutTemplateModule, PanelModule, SOPClassHandlerModule, ToolbarModule</td>
|
||||
</tr>
|
||||
<!-- CORNERSTONE.js -->
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://www.npmjs.com/package/@ohif/extension-cornerstone">
|
||||
Cornerstone
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
Provides rendering functionalities for 2D images.
|
||||
</td>
|
||||
<td>ViewportModule, CommandsModule</td>
|
||||
</tr>
|
||||
<!-- dicom-pdf -->
|
||||
<!-- <tr>
|
||||
<td>
|
||||
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
|
||||
</td>
|
||||
<td>
|
||||
Renders PDFs for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js#L4-L6">specific SopClassUID</a>.
|
||||
</td>
|
||||
<td>Viewport, SopClassHandler</td>
|
||||
</tr> -->
|
||||
<!-- dicom-sr -->
|
||||
<tr>
|
||||
<td>
|
||||
<a href="">DICOM SR</a>
|
||||
</td>
|
||||
<td>
|
||||
Maintained extensions for cornerstone and visualization of DICOM Structured Reports
|
||||
</td>
|
||||
<td>ViewportModule, CommandsModule, SOPClassHandlerModule</td>
|
||||
</tr>
|
||||
<!-- Measurement-tracking -->
|
||||
<tr>
|
||||
<td>
|
||||
<a href="">Measurement tracking</a>
|
||||
</td>
|
||||
<td>
|
||||
Tracking measurements in the measurement panel
|
||||
</td>
|
||||
<td> ContextModule,PanelModule,ViewportModule,CommandsModule</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
@ -1,15 +1,5 @@
|
||||
# Extensions
|
||||
|
||||
- [Extensions](#extensions)
|
||||
- [Overview](#overview)
|
||||
- [Extension Skeleton](#extension-skeleton)
|
||||
- [OHIF-Maintained Extensions](#ohif-maintained-extensions)
|
||||
- [Registering an Extension](#registering-an-extension)
|
||||
- [Registering at Runtime](#registering-at-runtime)
|
||||
- [Registering at Build Time](#registering-at-build-time)
|
||||
- [Lifecycle Hooks](#lifecycle-hooks)
|
||||
- [Modules](#modules)
|
||||
- [Contexts](#contexts)
|
||||
|
||||
## Overview
|
||||
We have re-designed the architecture of the `OHIF-v3` to enable building applications
|
||||
@ -33,7 +23,8 @@ Practical examples of extensions include:
|
||||
|
||||
|
||||
|
||||
<mark>Diagram showing how extensions are configured and accessed.
|
||||
**Diagram showing how extensions are configured and accessed.**
|
||||
|
||||
<!--
|
||||
<div style="text-align: center;">
|
||||
<a href="/assets/img/extensions-diagram.png">
|
||||
@ -79,7 +70,66 @@ A small number of powerful extensions for popular use cases are maintained by
|
||||
OHIF. They're co-located in the [`OHIF/Viewers`][viewers-repo] repository, in
|
||||
the top level [`extensions/`][ext-source] directory.
|
||||
|
||||
{% include "./_maintained-extensions-table.md" %}
|
||||
<!-- <table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Extension</th>
|
||||
<th>Description</th>
|
||||
<th>Modules</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="">
|
||||
Default
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
Default extension provides default viewer layout, a study/series
|
||||
browser, and a datasource that maps to a DICOMWeb compliant backend
|
||||
</td>
|
||||
<td>commandsModule, ContextModule, DataSourceModule, HangingProtocolModule, LayoutTemplateModule, PanelModule, SOPClassHandlerModule, ToolbarModule</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://www.npmjs.com/package/@ohif/extension-cornerstone">
|
||||
Cornerstone
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
Provides rendering functionalities for 2D images.
|
||||
</td>
|
||||
<td>ViewportModule, CommandsModule</td>
|
||||
</tr>
|
||||
<td>
|
||||
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
|
||||
</td>
|
||||
<td>
|
||||
Renders PDFs for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js#L4-L6">specific SopClassUID</a>.
|
||||
</td>
|
||||
<td>Viewport, SopClassHandler</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="">DICOM SR</a>
|
||||
</td>
|
||||
<td>
|
||||
Maintained extensions for cornerstone and visualization of DICOM Structured Reports
|
||||
</td>
|
||||
<td>ViewportModule, CommandsModule, SOPClassHandlerModule</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="">Measurement tracking</a>
|
||||
</td>
|
||||
<td>
|
||||
Tracking measurements in the measurement panel
|
||||
</td>
|
||||
<td> ContextModule,PanelModule,ViewportModule,CommandsModule</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table> -->
|
||||
|
||||
|
||||
## Registering an Extension
|
||||
@ -218,35 +268,6 @@ to the appropriate context. When the `command` is fired, the "active contexts"
|
||||
are used to determine the appropriate implementation of the rotate behavior.
|
||||
|
||||
|
||||
<!-- <mark>do we want the followings?
|
||||
## Consuming Extensions
|
||||
|
||||
We consume extensions, via the `ExtensionManager`, in our `@ohif/viewer`
|
||||
project.
|
||||
|
||||
```js
|
||||
const extensionManager = new ExtensionManager({
|
||||
commandsManager,
|
||||
servicesManager,
|
||||
hotkeysManager
|
||||
});
|
||||
|
||||
// prettier-ignore
|
||||
extensionManager.registerExtensions([ /** **/ ]);
|
||||
```
|
||||
|
||||
The `@ohif/viewer` project handles data fetching, basic routing, wires up UI
|
||||
services, and is the home to the more bespoke application logic that doesn't
|
||||
make as much sense to make reusable.
|
||||
|
||||
Long-term, replacing the `@ohif/viewer` application and consuming extensions
|
||||
(and the `ExtensionManager`) in your own project is the ideal path for
|
||||
applications requiring a high degree of customization that can't be achieved
|
||||
with current theming, configuration, extension, and services support.
|
||||
|
||||
If you're not sure how to achieve your goals with the extensibility available
|
||||
today, create a GitHub issue! -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "LifeCycle",
|
||||
"position": 2
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Modules",
|
||||
"position": 3
|
||||
}
|
||||
@ -254,4 +254,4 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
|
||||
|
||||
|
||||
## Custom tool
|
||||
<mark> I want to create a new tool
|
||||
**I want to create a new tool**
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "FAQ",
|
||||
"position": 10
|
||||
}
|
||||
@ -46,7 +46,5 @@
|
||||
For keyboard keys assignment to commands
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -1,15 +1,5 @@
|
||||
# Mode: Routes
|
||||
|
||||
- [Mode: Routes](#mode-routes)
|
||||
- [Overview](#overview)
|
||||
- [Route](#route)
|
||||
- [Route: path](#route-path)
|
||||
- [Route: init](#route-init)
|
||||
- [Default init](#default-init)
|
||||
- [Writing a custom init](#writing-a-custom-init)
|
||||
- [Route: layoutTemplate](#route-layouttemplate)
|
||||
- [FAQ](#faq)
|
||||
|
||||
## Overview
|
||||
|
||||
Modes are tied to a specific route in the viewer, and multiple modes/routes can be present within a single application. This makes `routes` config, THE most important part of the mode configuration.
|
||||
@ -108,7 +98,7 @@ retrieving its instances metadata.
|
||||
|
||||
A *simplified* "pseudocode" for the `defaultRouteInit` is:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
async function defaultRouteInit({
|
||||
servicesManager,
|
||||
studyInstanceUIDs,
|
||||
@ -153,12 +143,12 @@ You can add your custom init function to enhance the default initialization for:
|
||||
and lots of other modifications.
|
||||
|
||||
You just need to make sure, the mode `retrieveSeriesMetadata`, `makeDisplaySets` and `run` the
|
||||
HangingProtocols at some point. There are various `events` that you can subscribe to and add your custom logic. <mark>point to events
|
||||
HangingProtocols at some point. There are various `events` that you can subscribe to and add your custom logic. **point to events**
|
||||
|
||||
For instance for jumping to the slice where a measurement is located at the initial render, you need to follow a pattern similar to the following:
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
init: async ({
|
||||
servicesManager,
|
||||
extensionManager,
|
||||
@ -221,7 +211,7 @@ For instance `default extension` provides a layoutTemplate that builds the app u
|
||||
and viewports. Therefore, the `props` include `leftPanels`, `rightPanels` and `viewports` sections. Note that the `layoutTemplate` defines the properties it is expecting. So, if you write a `layoutTemplate-2` that accepts a footer section, its logic should be written in the extension, and any mode that
|
||||
is interested in using `layoutTemplate-2` **should** provide the `id` for the footer component.
|
||||
|
||||
<mark>What module should the footer be registered?
|
||||
**What module should the footer be registered?**
|
||||
|
||||
|
||||
```js
|
||||
@ -270,6 +260,7 @@ layoutTemplate: ({ location, servicesManager }) => {
|
||||
This is where `OHIF-v3` shines! Since the default `layoutTemplate` is written for the viewer part, you can simply add a new `layoutTemplate` and use the component you have written for that route. `Mode` handle showing the correct component for the specified route.
|
||||
|
||||
|
||||
|
||||
```js
|
||||
export default function mode() {
|
||||
return {
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "ohif-viewer-latest-docs",
|
||||
"version": "2.0.0",
|
||||
"description": "Open Health Imaging Foundation Viewers Metarepo for documentation",
|
||||
"main": ".eslintrc.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"scripts": {
|
||||
"docs": "gitbook install && gitbook serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/OHIF/Viewers.git"
|
||||
},
|
||||
"keywords": [
|
||||
"dicom",
|
||||
"cornerstone",
|
||||
"OHIF",
|
||||
"zero",
|
||||
"footprint",
|
||||
"medical",
|
||||
"imaging",
|
||||
"viewer"
|
||||
],
|
||||
"author": "Open Health Imaging Foundation",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/OHIF/Viewers/issues"
|
||||
},
|
||||
"homepage": "https://github.com/OHIF/Viewers#readme",
|
||||
"dependencies": {
|
||||
"gitbook-plugin-anchors": "^0.7.1",
|
||||
"gitbook-plugin-edit-link": "^2.0.2",
|
||||
"gitbook-plugin-ga": "^2.0.0",
|
||||
"gitbook-plugin-github": "^3.0.0",
|
||||
"gitbook-plugin-sitemap": "^1.2.0",
|
||||
"gitbook-plugin-theme-cornerstone": "^1.1.4",
|
||||
"gitbook-plugin-versions": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gitbook-cli": "^2.3.2"
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Services",
|
||||
"position": 7
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
sidebar_label: Default Services
|
||||
---
|
||||
# Services (default)
|
||||
|
||||
- [Services (default)](#services-default)
|
||||
- [Overview](#overview)
|
||||
- [Example](#example)
|
||||
|
||||
## Overview
|
||||
|
||||
Services are a work in progress. As we are still in the progress of creating a
|
||||
non-ui maintained service, this usage may change.
|
||||
|
||||
<!-- <div style="text-align: center;">
|
||||
<a href="/assets/img/services.png">
|
||||
<img src="/assets/img/services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>Diagram showing relationship between React Context and UI Service</i></div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
The simplest service return a new object that has a `name` property, and
|
||||
methods/properties that give the service its functionality. The "Factory
|
||||
Function" that creates the service is provided with the implementation (this is
|
||||
slightly different for UI Services).
|
||||
|
||||
```js
|
||||
const _speak = () => {
|
||||
console.warn('Speak is not implemented');
|
||||
};
|
||||
|
||||
/**
|
||||
* Factory function to create `HelloWorldService`
|
||||
*
|
||||
* @param {object} implementation
|
||||
* @param {function} implementation.speak - Speak's implementation
|
||||
* @returns HelloWorldService
|
||||
*/
|
||||
export default function createHelloWorldService({ speak }) {
|
||||
return {
|
||||
name: 'HelloWorldService',
|
||||
speak: speak || _speak,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
A service, once created, can be registered with the `ServicesManager` to make it
|
||||
accessible to extensions. Similarly, the application code can access named
|
||||
services from the `ServicesManager`.
|
||||
|
||||
```js
|
||||
// In the application
|
||||
const speak = () => {
|
||||
window.alert('HELLO WORLD');
|
||||
};
|
||||
const HelloWorldService = createHelloWorldService({ speak });
|
||||
const servicesManager = new ServicesManager();
|
||||
|
||||
servicesManager.registerService(HelloWorldService);
|
||||
|
||||
// In an extension
|
||||
const { HelloWorldService } = servicesManager.services;
|
||||
|
||||
if (HelloWorldService) {
|
||||
HelloWorldService.speak();
|
||||
}
|
||||
```
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "UI Services",
|
||||
"position": 3
|
||||
}
|
||||
@ -28,12 +28,15 @@ We maintain the following UI Services:
|
||||
|
||||
|
||||
|
||||
<div style="text-align: center;">
|
||||
<!-- <div style="text-align: center;">
|
||||
<a href="/assets/img/ui-services.png">
|
||||
<img src="/assets/img/ui-services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>Diagram showing relationship between React Context and UI Service</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- In `@ohif/core`, we have a collection of service factories. We select one we
|
||||
would like our application to support, create an instance of it, and pass that
|
||||
@ -55,8 +58,8 @@ The `ServicesManager` is:
|
||||
|
||||
|
||||
## Providers for UI services
|
||||
<mark>There are several context providers that wraps the application routes. This
|
||||
makes the context values exposed in the app, and service's `setImplementation` can get run to override the implementation of the service.
|
||||
**There are several context providers that wraps the application routes. This
|
||||
makes the context values exposed in the app, and service's `setImplementation` can get run to override the implementation of the service.**
|
||||
|
||||
```js
|
||||
// platform/viewer/src/App.jsx
|
||||
@ -306,10 +309,3 @@ takeaways worth mentioning:
|
||||
> will help reduce confusion and interoperability with the larger OHIF
|
||||
> community, but they're not silver bullets. Please speak up, create an issue,
|
||||
> if you would like to discuss new services or improvements to this pattern.
|
||||
|
||||
<!-- ## Maintained Services
|
||||
|
||||
Our `@ohif/viewer` project is an example of how to glue together the different
|
||||
parts and pieces of the OHIF Platform to create a polished and powerful product.
|
||||
To accomplish that, we maintain several UI Services that you can use in your own
|
||||
project, or provide alternative implementations for: -->
|
||||
|
||||
@ -9,4 +9,4 @@ following developer guides.
|
||||
|
||||
Summary of language changing usage can be seen below:
|
||||
|
||||
<mark>Upload
|
||||
**Upload**
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Viewer",
|
||||
"position": 5
|
||||
}
|
||||
@ -4,18 +4,15 @@ OHIF supports internationalization using [i18next](https://www.i18next.com/)
|
||||
through the npm package [@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n),
|
||||
where is the main instance of i18n containing several languages and tools.
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Our translation management is powered by <a href="https://locize.com/" target="_blank" rel="noopener noreferrer">Locize</a> through their generous support of open source.</p>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer" style='padding: 20px'>
|
||||
<img src="../assets/img/locizeSponsor.svg" alt="Locize Translation Management Logo">
|
||||
<div className="text--center">
|
||||
<p>Our translation management is powered by
|
||||
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer"> Locize </a>
|
||||
through their generous support of open source.</p>
|
||||
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer" style={{padding: '20px'}}>
|
||||
<img style={{width:'70px'}} src="https://pbs.twimg.com/profile_images/909709940910120961/oyB0mX2L.jpg" alt="Locize Translation Management Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
## How to change language for the viewer?
|
||||
You can take a look into user manuals to see how to change the viewer's language.
|
||||
In summary you can change the language:
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user