working docs v3
This commit is contained in:
Alireza
parent
9d49bf4348
commit
d501335143
@ -17,8 +17,7 @@ sidebar_position: 1
|
|||||||
> 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
|
> 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.
|
> of this page.
|
||||||
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
The [Open Health Imaging Foundation][ohif-org] (OHIF) Viewer is an open source,
|
The [Open Health Imaging Foundation][ohif-org] (OHIF) Viewer is an open source,
|
||||||
web-based, medical imaging viewer. It can be configured to connect to Image
|
web-based, medical imaging viewer. It can be configured to connect to Image
|
||||||
@ -100,13 +99,13 @@ Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="left">Internationalization</td>
|
<td align="left">Internationalization</td>
|
||||||
<td align="center">🔜</td>
|
<td align="center">✅</td>
|
||||||
<td align="center">Not Started</td>
|
<td align="center"></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="left">Drag/drop DICOM data into the viewer (see https://viewer.ohif.org/local)</td>
|
<td align="left">Drag/drop DICOM data into the viewer (see https://viewer.ohif.org/local)</td>
|
||||||
<td align="center">🔜</td>
|
<td align="center">✅</td>
|
||||||
<td align="center">Not Started</td>
|
<td align="center"></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="left">IHE Invoke Image Display - Standard-compliant launching of the viewer (e.g. from PACS or RIS)</td>
|
<td align="left">IHE Invoke Image Display - Standard-compliant launching of the viewer (e.g. from PACS or RIS)</td>
|
||||||
@ -121,7 +120,7 @@ Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
|
|||||||
<tr>
|
<tr>
|
||||||
<td align="left">DICOM Whole-slide imaging viewport</td>
|
<td align="left">DICOM Whole-slide imaging viewport</td>
|
||||||
<td align="center">🔜</td>
|
<td align="center">🔜</td>
|
||||||
<td align="center">Not Started</td>
|
<td align="center">In Progress</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="left">Displaying non-renderable DICOM as HTML</td>
|
<td align="left">Displaying non-renderable DICOM as HTML</td>
|
||||||
@ -140,8 +139,8 @@ Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="left">White-labelling: Easily replace the OHIF Logo with your logo</td>
|
<td align="left">White-labelling: Easily replace the OHIF Logo with your logo</td>
|
||||||
<td align="center">🔜</td>
|
<td align="center">✅</td>
|
||||||
<td align="center">Not Started</td>
|
<td align="center"></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="left">DICOM upload to PACS</td>
|
<td align="left">DICOM upload to PACS</td>
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 7
|
||||||
|
sidebar_label: Architecture
|
||||||
|
---
|
||||||
|
|
||||||
# Architecture
|
# Architecture
|
||||||
|
|
||||||
|
|
||||||
@ -9,17 +14,6 @@ In order to achieve a platform that can support various workflows and be extensi
|
|||||||
Below, we aim to demystify that complexity by providing insight into how `OHIF Platform` is
|
Below, we aim to demystify that complexity by providing insight into how `OHIF Platform` is
|
||||||
architected, and the role each of it's dependent libraries plays.
|
architected, and the role each of it's dependent libraries plays.
|
||||||
|
|
||||||
- [Architecture](#architecture)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Extensions](#extensions)
|
|
||||||
- [Modes](#modes)
|
|
||||||
- [Platform](#platform)
|
|
||||||
- [`@ohif/viewer`](#ohifviewer)
|
|
||||||
- [`@ohif/core`](#ohifcore)
|
|
||||||
- [`@ohif/ui`](#ohifui)
|
|
||||||
- [Overview of the architecture](#overview-of-the-architecture)
|
|
||||||
- [Common Questions](#common-questions)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -30,7 +24,6 @@ single project, contains many projects. If you explore our project structure,
|
|||||||
you'll see the following:
|
you'll see the following:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
.
|
|
||||||
│
|
│
|
||||||
├── extensions
|
├── extensions
|
||||||
│ ├── _example # Skeleton of example extension
|
│ ├── _example # Skeleton of example extension
|
||||||
@ -80,12 +73,12 @@ in `OHIF-v3` and their api is expanded. In summary:
|
|||||||
|
|
||||||
OHIF team maintains several high value and commonly used functionalities in its
|
OHIF team maintains several high value and commonly used functionalities in its
|
||||||
own extensions. For a list of extensions maintained by OHIF,
|
own extensions. For a list of extensions maintained by OHIF,
|
||||||
[check out this helpful table](../extensions/index.md#maintained-extensions).
|
[check out this helpful table](./extensions/index.md#maintained-extensions).
|
||||||
As an example `default` extension provides a default viewer layout,
|
As an example `default` extension provides a default viewer layout,
|
||||||
a study/series browser and a datasource that maps to a DICOMWeb compliant backend.
|
a study/series browser and a datasource that maps to a DICOMWeb compliant backend.
|
||||||
|
|
||||||
|
|
||||||
[Click here to read more about extensions!](../extensions/index.md)
|
[Click here to read more about extensions!](./extensions/index.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -131,7 +124,7 @@ To summarize the difference between extensions and modes in `OHIF-v3` and extens
|
|||||||
> - In v2 extensions are “plugins” that add functionality to a core viewer.
|
> - In v2 extensions are “plugins” that add functionality to a core viewer.
|
||||||
> - In v3 extensions are building blocks that a mode uses to build an entire viewer layout.
|
> - In v3 extensions are building blocks that a mode uses to build an entire viewer layout.
|
||||||
|
|
||||||
[Click here to read more about modes!](../modes/index.md)
|
[Click here to read more about modes!](./modes/index.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -169,7 +162,7 @@ These components are presentational only, so you can reuse them with whatever lo
|
|||||||
OHIF-v3 architecture can be seen in the following figure. We will explore each
|
OHIF-v3 architecture can be seen in the following figure. We will explore each
|
||||||
piece in more detail.
|
piece in more detail.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -206,7 +199,7 @@ your functionality in one of the modules of your new extension, and let the mod
|
|||||||
[viewers-project]: https://github.com/OHIF/Viewers
|
[viewers-project]: https://github.com/OHIF/Viewers
|
||||||
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
|
[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/
|
||||||
[configuration]: ../configuring/index.md
|
[configuration]: ./configuring/index.md
|
||||||
[extensions]: ../extensions/index.md
|
[extensions]: ../extensions/index.md
|
||||||
[core-github]: https://github.com/OHIF/viewers/platform/core
|
[core-github]: https://github.com/OHIF/viewers/platform/core
|
||||||
[ui-github]: https://github.com/OHIF/Viewers/tree/master/platform/ui
|
[ui-github]: https://github.com/OHIF/Viewers/tree/master/platform/ui
|
||||||
4
platform/docs/docs/configuring/_category_.json
Normal file
4
platform/docs/docs/configuring/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Configuring",
|
||||||
|
"position": 5
|
||||||
|
}
|
||||||
@ -1,13 +1,11 @@
|
|||||||
## Set up a local DICOM server
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Data Source
|
||||||
|
---
|
||||||
|
|
||||||
- [Set up a local DICOM server](#set-up-a-local-dicom-server)
|
# Data Source
|
||||||
- [Requirements](#requirements)
|
|
||||||
- [Open Source DICOM Image Archives](#open-source-dicom-image-archives)
|
## Set up a local DICOM server
|
||||||
- [Running Orthanc](#running-orthanc)
|
|
||||||
- [Orthanc: Learn More](#orthanc-learn-more)
|
|
||||||
- [Connecting to Orthanc](#connecting-to-orthanc)
|
|
||||||
- [Configuration: Learn More](#configuration-learn-more)
|
|
||||||
- [Running DCM4CHEE](#running-dcm4chee)
|
|
||||||
|
|
||||||
|
|
||||||
ATTENTION! Already have a remote or local server? Skip to the
|
ATTENTION! Already have a remote or local server? Skip to the
|
||||||
@ -176,7 +174,10 @@ DCM4chee installation is out of scope for these tutorials and can be found [here
|
|||||||
|
|
||||||
An overview of steps for running OHIF Viewer using a local DCM4CHEE is shown below:
|
An overview of steps for running OHIF Viewer using a local DCM4CHEE is shown below:
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/557570043?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Local dcm4chee"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/557570043?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,14 +1,9 @@
|
|||||||
# Configuring Data Source
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Overview
|
||||||
|
---
|
||||||
|
|
||||||
|
# Overview
|
||||||
|
|
||||||
- [Configuring Data Source](#configuring-data-source)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Configuration Files](#configuration-files)
|
|
||||||
- [Environment Variables](#environment-variables)
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
After following the steps outlined in
|
After following the steps outlined in
|
||||||
[Getting Started](./../development/getting-started.md), you'll notice that the
|
[Getting Started](./../development/getting-started.md), you'll notice that the
|
||||||
@ -31,9 +26,8 @@ and registered extension's features, are configured using this file.
|
|||||||
|
|
||||||
The simplest way is to update the existing default config:
|
The simplest way is to update the existing default config:
|
||||||
|
|
||||||
> _/platform/viewer/public/config/default.js_
|
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/public/config/default.js"
|
||||||
window.config = {
|
window.config = {
|
||||||
routerBasename: '/',
|
routerBasename: '/',
|
||||||
extensions: [],
|
extensions: [],
|
||||||
|
|||||||
4
platform/docs/docs/deployment/_category_.json
Normal file
4
platform/docs/docs/deployment/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Deployment",
|
||||||
|
"position": 13
|
||||||
|
}
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<div style="text-align: center;">
|
|
||||||
<img src="/assets/img/embedded-viewer-diagram.png" alt="Embedded Viewer Diagram" style="margin: 0 auto;" />
|
|
||||||
<div><i>embedded viewer diagram</i></div>
|
|
||||||
</div>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<div style="text-align: center;">
|
|
||||||
<img src="/assets/img/nginx-image-archive.png" alt="request flow example" style="margin: 0 auto;" />
|
|
||||||
<div><i>simplified request flow diagram</i></div>
|
|
||||||
</div>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<div style="text-align: center;">
|
|
||||||
<img src="/assets/img/user-access-control-request-flow.png" alt="request flow example" style="margin: 0 auto;" />
|
|
||||||
<div><i>simplified request flow diagram</i></div>
|
|
||||||
</div>
|
|
||||||
@ -1,10 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
---
|
||||||
|
|
||||||
# Build for Production
|
# Build for Production
|
||||||
|
|
||||||
> If you've already followed the
|
|
||||||
> ["Getting Started" Guide](/development/getting-started.md), you can skip ahead
|
|
||||||
> to [Configuration](#configuration)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
### Build Machine Requirements
|
### Build Machine Requirements
|
||||||
|
|
||||||
@ -33,7 +32,7 @@ _From .zip:_
|
|||||||
Open your terminal, and navigate to the directory containing the source files.
|
Open your terminal, and navigate to the directory containing the source files.
|
||||||
Next run these commands:
|
Next run these commands:
|
||||||
|
|
||||||
```js
|
```bash
|
||||||
// If you haven't already, enable yarn workspaces
|
// If you haven't already, enable yarn workspaces
|
||||||
yarn config set workspaces-experimental true
|
yarn config set workspaces-experimental true
|
||||||
|
|
||||||
@ -47,8 +46,7 @@ yarn run build
|
|||||||
If everything worked as expected, you should have a new `dist/` directory in the
|
If everything worked as expected, you should have a new `dist/` directory in the
|
||||||
project's folder. It should roughly resemble the following:
|
project's folder. It should roughly resemble the following:
|
||||||
|
|
||||||
```bash
|
```bash title="<root>platform/viewer/dist/"
|
||||||
<root>platform/viewer/dist/
|
|
||||||
├── app-config.js
|
├── app-config.js
|
||||||
├── app.bundle.js
|
├── app.bundle.js
|
||||||
├── app.css
|
├── app.css
|
||||||
@ -73,7 +71,7 @@ and registered extension's features, are configured using this file.
|
|||||||
|
|
||||||
The easiest way to apply your own configuration is to modify the `default.js`
|
The easiest way to apply your own configuration is to modify the `default.js`
|
||||||
file. For more advanced cofiguration options, check out our
|
file. For more advanced cofiguration options, check out our
|
||||||
[configuration essentials guide](/configuring/index.md).
|
[configuration essentials guide](../configuring/index.md).
|
||||||
|
|
||||||
## Next Steps
|
## Next Steps
|
||||||
|
|
||||||
@ -81,18 +79,18 @@ file. For more advanced cofiguration options, check out our
|
|||||||
|
|
||||||
_Drag-n-drop_
|
_Drag-n-drop_
|
||||||
|
|
||||||
- [Netlify: Drop](/deployment/recipes/static-assets.md#netlify-drop)
|
- [Netlify: Drop](./static-assets#netlify-drop)
|
||||||
|
|
||||||
_Easy_
|
_Easy_
|
||||||
|
|
||||||
- [Surge.sh](/deployment/recipes/static-assets.md#surgesh)
|
- [Surge.sh](./static-assets#surgesh)
|
||||||
- [GitHub Pages](/deployment/recipes/static-assets.md#github-pages)
|
- [GitHub Pages](./static-assets#github-pages)
|
||||||
|
|
||||||
_Advanced_
|
_Advanced_
|
||||||
|
|
||||||
- [AWS S3 + Cloudfront](/deployment/recipes/static-assets.md#aws-s3--cloudfront)
|
- [AWS S3 + Cloudfront](./static-assets#aws-s3--cloudfront)
|
||||||
- [GCP + Cloudflare](/deployment/recipes/static-assets.md#gcp--cloudflare)
|
- [GCP + Cloudflare](./static-assets#gcp--cloudflare)
|
||||||
- [Azure](/deployment/recipes/static-assets.md#azure)
|
- [Azure](./static-assets#azure)
|
||||||
|
|
||||||
### Testing Build Output Locally
|
### Testing Build Output Locally
|
||||||
|
|
||||||
@ -100,7 +98,7 @@ A quick way to test your build output locally is to spin up a small webserver.
|
|||||||
You can do this by running the following commands in the `dist/` output
|
You can do this by running the following commands in the `dist/` output
|
||||||
directory:
|
directory:
|
||||||
|
|
||||||
```js
|
```bash
|
||||||
// Install http-server as a globally available package
|
// Install http-server as a globally available package
|
||||||
yarn global add http-server
|
yarn global add http-server
|
||||||
|
|
||||||
@ -111,7 +109,10 @@ yarn global add http-server
|
|||||||
npx http-server ./dist
|
npx http-server ./dist
|
||||||
```
|
```
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/551957266?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="HTTP Server Deploy"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/551957266?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Automating Builds and Deployments
|
### Automating Builds and Deployments
|
||||||
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 6
|
||||||
|
---
|
||||||
|
|
||||||
# Google Cloud Healthcare
|
# Google Cloud Healthcare
|
||||||
|
|
||||||
> Coming soon - We are working on bringing Google Cloud Healthcare to OHIF-v3
|
> Coming soon - We are working on bringing Google Cloud Healthcare to OHIF-v3
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Overview
|
||||||
|
---
|
||||||
# Deployment
|
# Deployment
|
||||||
|
|
||||||
The OHIF Viewer can be embedded in other web applications via it's [packaged
|
The OHIF Viewer can be embedded in other web applications via it's [packaged
|
||||||
@ -139,7 +143,7 @@ The returned JSON object must contain a single root object with a 'studies' arra
|
|||||||
You can read more about using different data sources for mode's routes [here](../modes/routes.md#route-path)
|
You can read more about using different data sources for mode's routes [here](../modes/routes.md#route-path)
|
||||||
|
|
||||||
*Sample JSON format:*
|
*Sample JSON format:*
|
||||||
```JSON
|
```json
|
||||||
{
|
{
|
||||||
"studies": [
|
"studies": [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
---
|
||||||
|
|
||||||
# Nginx + Image Archive
|
# Nginx + Image Archive
|
||||||
|
|
||||||
> DISCLAIMER! We make no claims or guarantees of this approach's security. If in
|
> DISCLAIMER! We make no claims or guarantees of this approach's security. If in
|
||||||
@ -11,7 +15,7 @@ control.
|
|||||||
Do not use this recipe to host sensitive medical data on the open web. Depending
|
Do not use this recipe to host sensitive medical data on the open web. Depending
|
||||||
on your company's policies, this may be an appropriate setup on an internal
|
on your company's policies, this may be an appropriate setup on an internal
|
||||||
network when protected with a server's basic authentication. For a more robust
|
network when protected with a server's basic authentication. For a more robust
|
||||||
setup, check out our [user account control recipe](./user-account-control.md)
|
setup, check out our [user account control recipe](./user-account-control)
|
||||||
that builds on the lessons learned here.
|
that builds on the lessons learned here.
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -58,7 +62,9 @@ CORS][understanding-cors]
|
|||||||
|
|
||||||
This setup allows us to create a setup similar to the one pictured below:
|
This setup allows us to create a setup similar to the one pictured below:
|
||||||
|
|
||||||
{% include "./../_nginx-image-archive-diagram.md" %}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- All web requests are routed through `nginx` on our `OpenResty` image
|
- All web requests are routed through `nginx` on our `OpenResty` image
|
||||||
- `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints
|
- `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints
|
||||||
@ -89,7 +95,10 @@ in command prompt or terminal_
|
|||||||
You can see the overview of the mentioned steps:
|
You can see the overview of the mentioned steps:
|
||||||
|
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/554726410?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="NginX Deployment"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/554726410?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ### Setup
|
<!-- ### Setup
|
||||||
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
---
|
||||||
|
|
||||||
# Deploy Static Assets
|
# Deploy Static Assets
|
||||||
|
|
||||||
> WARNING! All of these solutions stand-up a publicly accessible web viewer. Do
|
> WARNING! All of these solutions stand-up a publicly accessible web viewer. Do
|
||||||
@ -27,7 +31,7 @@ _Advanced_
|
|||||||
|
|
||||||
- [Deploy Static Assets](#deploy-static-assets)
|
- [Deploy Static Assets](#deploy-static-assets)
|
||||||
- [Drag-n-drop](#drag-n-drop)
|
- [Drag-n-drop](#drag-n-drop)
|
||||||
- [Netlify: Drop](#netlify-drop)
|
- [Netlify Drop](#netlify-drop)
|
||||||
- [Easy](#easy)
|
- [Easy](#easy)
|
||||||
- [Surge.sh](#surgesh)
|
- [Surge.sh](#surgesh)
|
||||||
- [GitHub Pages](#github-pages)
|
- [GitHub Pages](#github-pages)
|
||||||
@ -38,9 +42,12 @@ _Advanced_
|
|||||||
|
|
||||||
## Drag-n-drop
|
## Drag-n-drop
|
||||||
|
|
||||||
### Netlify: Drop
|
### Netlify Drop
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/551957463?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Netlify Drop"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/551957463?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
_GIF demonstrating deployment with Netlify Drop_
|
_GIF demonstrating deployment with Netlify Drop_
|
||||||
@ -70,7 +77,7 @@ Learn more about [Netlify on their website](https://www.netlify.com/)
|
|||||||
> publishing. Publish HTML, CSS, and JS for free, without leaving the command
|
> publishing. Publish HTML, CSS, and JS for free, without leaving the command
|
||||||
> line.
|
> line.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
_GIF demonstrating deployment with surge_
|
_GIF demonstrating deployment with surge_
|
||||||
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
---
|
||||||
|
|
||||||
# User Account Control
|
# User Account Control
|
||||||
|
|
||||||
> Coming soon - We are working on bringing the User Account Control to OHIF-v3
|
> Coming soon - We are working on bringing the User Account Control to OHIF-v3
|
||||||
4
platform/docs/docs/development/_category_.json
Normal file
4
platform/docs/docs/development/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Development",
|
||||||
|
"position": 4
|
||||||
|
}
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: Continous Integration
|
||||||
|
---
|
||||||
# Continous Integration (CI)
|
# Continous Integration (CI)
|
||||||
|
|
||||||
This repository uses `CircleCI` and `Netlify` for continous integration.
|
This repository uses `CircleCI` and `Netlify` for continous integration.
|
||||||
@ -25,12 +29,8 @@ The PR_CHECKS workflow (Pull Request Checks) runs our automated unit and
|
|||||||
end-to-end tests for every code check-in. These tests must all pass before code
|
end-to-end tests for every code check-in. These tests must all pass before code
|
||||||
can be merged to our `master` branch.
|
can be merged to our `master` branch.
|
||||||
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<a href="/assets/img/WORKFLOW_PR_CHECKS.png">
|
|
||||||
<img src="/assets/img/WORKFLOW_PR_CHECKS.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
|
|
||||||
</a>
|
|
||||||
<div><i>Workflow diagram for PR_CHECKS</i></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### Workflow: PR_OPTIONAL_DOCKER_PUBLISH
|
### Workflow: PR_OPTIONAL_DOCKER_PUBLISH
|
||||||
|
|
||||||
@ -38,12 +38,9 @@ The PR_OPTIONAL_DOCKER_PUBLISH workflow allows for "manual approval" to publish
|
|||||||
the pull request as a tagged docker image. This is helpful when changes need to
|
the pull request as a tagged docker image. This is helpful when changes need to
|
||||||
be tested with the Google Adapter before merging to `master`.
|
be tested with the Google Adapter before merging to `master`.
|
||||||
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<a href="/assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png">
|
|
||||||
<img src="/assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
|
|
||||||
</a>
|
|
||||||
<div><i>Workflow diagram for PR_WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH</i></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
> NOTE: This workflow will fail unless it's for a branch on our `upstream`
|
> NOTE: This workflow will fail unless it's for a branch on our `upstream`
|
||||||
> repository. If you need this functionality, but the branch is from a fork,
|
> repository. If you need this functionality, but the branch is from a fork,
|
||||||
@ -56,12 +53,9 @@ It uses the Netlify CLI to deploy assets created as part of the repository's PWA
|
|||||||
Build process (`yarn run build`). The workflow allows for "Manual Approval" to
|
Build process (`yarn run build`). The workflow allows for "Manual Approval" to
|
||||||
promote the build to `STAGING` and `PRODUCTION` environments.
|
promote the build to `STAGING` and `PRODUCTION` environments.
|
||||||
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<a href="/assets/img/WORKFLOW_DEPLOY.png">
|
|
||||||
<img src="/assets/img/WORKFLOW_DEPLOY.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
|
|
||||||
</a>
|
|
||||||
<div><i>Workflow diagram for WORKFLOW_DEPLOY</i></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
| Environment | Description | URL |
|
| Environment | Description | URL |
|
||||||
| ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------- |
|
| ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------- |
|
||||||
@ -82,16 +76,11 @@ GitHub hosts the `gh-pages` branch with GitHub Pages.
|
|||||||
- Extension Packages: https://github.com/ohif/viewers/#extensions
|
- Extension Packages: https://github.com/ohif/viewers/#extensions
|
||||||
- Documentation: https://docs.ohif.org/
|
- Documentation: https://docs.ohif.org/
|
||||||
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<a href="/assets/img/WORKFLOW_RELEASE.png">
|
|
||||||
<img src="/assets/img/WORKFLOW_RELEASE.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
|
|
||||||
</a>
|
|
||||||
<div><i>Workflow diagram for WORKFLOW_RELEASE</i></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### HOTFIX
|
|
||||||
|
|
||||||
_Not yet implemented_
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
LINKS
|
LINKS
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Contributing
|
||||||
|
---
|
||||||
# Contributing
|
# Contributing
|
||||||
|
|
||||||
## How can I help?
|
## How can I help?
|
||||||
@ -34,9 +38,7 @@ dependencies:
|
|||||||
|
|
||||||
On your local file system:
|
On your local file system:
|
||||||
|
|
||||||
```bash
|
```bash title="/my-projects/"
|
||||||
# code/my-projects/
|
|
||||||
.
|
|
||||||
├── cornerstonejs/cornerstone-tools
|
├── cornerstonejs/cornerstone-tools
|
||||||
└── ohif/viewers
|
└── ohif/viewers
|
||||||
```
|
```
|
||||||
@ -57,12 +59,11 @@ On your local file system:
|
|||||||
As you make changed to `cornerstone-tools`, and it's output is rebuilt, you
|
As you make changed to `cornerstone-tools`, and it's output is rebuilt, you
|
||||||
should see the following behavior:
|
should see the following behavior:
|
||||||
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<a href="/assets/img/cornerstone-tools-link.gif">
|
|
||||||
<img src="/assets/img/cornerstone-tools-link.gif" alt="Example of linked cornerstone-tools package" style="margin: 0 auto; max-width: 500px;" />
|
|
||||||
</a>
|
|
||||||
<div><i>example of linked cornerstone-tools package</i></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
If you wish to stop using your local package, run the following commands in the
|
If you wish to stop using your local package, run the following commands in the
|
||||||
`ohif/viewers` repository root:
|
`ohif/viewers` repository root:
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Getting Started
|
||||||
|
---
|
||||||
# Getting Started
|
# Getting Started
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
@ -70,7 +74,11 @@ You should see the following output:
|
|||||||
|
|
||||||
### 🎉 Celebrate 🎉
|
### 🎉 Celebrate 🎉
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545988245?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="getting-started"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/545988245?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
### Building for Production
|
### Building for Production
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Testing
|
||||||
|
---
|
||||||
# Running Tests for OHIF
|
# Running Tests for OHIF
|
||||||
|
|
||||||
We introduce here various test types that is available
|
We introduce here various test types that is available
|
||||||
@ -7,7 +11,7 @@ part of this page.
|
|||||||
|
|
||||||
## Unit test
|
## Unit test
|
||||||
To run the unit test:
|
To run the unit test:
|
||||||
```
|
```bash
|
||||||
yarn run test:unit:ci
|
yarn run test:unit:ci
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -23,7 +27,7 @@ For running the OHIF e2e test you need to run the following steps:
|
|||||||
- Create a mini-pacs for OHIF to access the images for testing. We download
|
- Create a mini-pacs for OHIF to access the images for testing. We download
|
||||||
and run our lightweight implementation which provides a collection of DICOM studies ([source code][mini-pacs]).
|
and run our lightweight implementation which provides a collection of DICOM studies ([source code][mini-pacs]).
|
||||||
|
|
||||||
```
|
```bash
|
||||||
docker run -p 5985:5985 -p 5984:5984 -e USE_POUCHDB=true -e DB_SERVER=http://0.0.0.0 ohif/viewer-testdata:0.1-test
|
docker run -p 5985:5985 -p 5984:5984 -e USE_POUCHDB=true -e DB_SERVER=http://0.0.0.0 ohif/viewer-testdata:0.1-test
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -33,7 +37,7 @@ and run our lightweight implementation which provides a collection of DICOM stud
|
|||||||
|
|
||||||
- Open a new terminal, navigate to the OHIF project, and run OHIF with the dicom-server config
|
- Open a new terminal, navigate to the OHIF project, and run OHIF with the dicom-server config
|
||||||
|
|
||||||
```
|
```bash
|
||||||
APP_CONFIG=config/dicomweb-server.js yarn start
|
APP_CONFIG=config/dicomweb-server.js yarn start
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -43,7 +47,7 @@ and run our lightweight implementation which provides a collection of DICOM stud
|
|||||||
|
|
||||||
- Open a new terminal inside the OIHF project, and run the e2e cypress test
|
- Open a new terminal inside the OIHF project, and run the e2e cypress test
|
||||||
|
|
||||||
```
|
```bash
|
||||||
yarn run test:e2e
|
yarn run test:e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -63,7 +67,7 @@ and run our lightweight implementation which provides a collection of DICOM stud
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Testing Philosiphy
|
## Testing Philosiphy
|
||||||
|
|
||||||
> Testing is an opinionated topic. Here is a rough overview of our testing
|
> Testing is an opinionated topic. Here is a rough overview of our testing
|
||||||
> philosophy. See something you want to discuss or think should be changed? Open
|
> philosophy. See something you want to discuss or think should be changed? Open
|
||||||
|
|||||||
4
platform/docs/docs/extensions/_category_.json
Normal file
4
platform/docs/docs/extensions/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Extensions",
|
||||||
|
"position": 9
|
||||||
|
}
|
||||||
@ -1,94 +0,0 @@
|
|||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th align="left" width="30%">
|
|
||||||
Types
|
|
||||||
</th>
|
|
||||||
<th align="left">Description</th>
|
|
||||||
<th align="left">Examples</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/layout-template.md">
|
|
||||||
LayoutTemplate (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Control Layout of a route</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/data-source.md">
|
|
||||||
DataSource (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Control the mapping from DICOM metadata to OHIF-metadata</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/sop-class-handler.md">
|
|
||||||
SOPClassHandler
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Determines how retrieved study data is split into "DisplaySets"</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/panel.md">
|
|
||||||
Panel
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Adds left or right hand side panels</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/viewport.md">
|
|
||||||
Viewport
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Adds a component responsible for rendering a "DisplaySet"</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/commands.md">
|
|
||||||
Commands
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Adds named commands, scoped to a context, to the CommandsManager</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/toolbar.md">
|
|
||||||
Toolbar
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Adds buttons or custom components to the toolbar</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/context.md">
|
|
||||||
Context
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Shared state for a workflow or set of extension module definitions</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./modules/hpModule.md">
|
|
||||||
HangingProtocol
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Adds hanging protocol rules</td>
|
|
||||||
<td align="left"></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
55
platform/docs/docs/extensions/extension.md
Normal file
55
platform/docs/docs/extensions/extension.md
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Extension Manager
|
||||||
|
---
|
||||||
|
|
||||||
|
# Extension Manager
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
The `ExtensionManager` is a class made available to us via the `@ohif/core`
|
||||||
|
project (platform/core). Our application instantiates a single instance of it,
|
||||||
|
and provides a `ServicesManager` and `CommandsManager` along with the
|
||||||
|
application's configuration through the appConfig key (optional).
|
||||||
|
|
||||||
|
```js
|
||||||
|
const commandsManager = new CommandsManager();
|
||||||
|
const servicesManager = new ServicesManager();
|
||||||
|
const extensionManager = new ExtensionManager({
|
||||||
|
commandsManager,
|
||||||
|
servicesManager,
|
||||||
|
appConfig,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
The `ExtensionManager` only has a few public members:
|
||||||
|
|
||||||
|
- `setActiveDataSource` - Sets the active data source for the application
|
||||||
|
- `getDataSources` - Returns the registered data sources
|
||||||
|
- `getActiveDataSource` - Returns the currently active data source
|
||||||
|
- `getModuleEntry` - Returns the module entry by the give id.
|
||||||
|
|
||||||
|
|
||||||
|
## Accessing Modules
|
||||||
|
|
||||||
|
We use `getModuleEntry` in our `ViewerLayout` logic to find the panels based on the
|
||||||
|
provided IDs in the mode's configuration.
|
||||||
|
|
||||||
|
|
||||||
|
For instance: `extensionManager.getModuleEntry("org.ohif.measurement-tracking.panelModule.seriesList")`
|
||||||
|
accesses the `seriesList` panel from `panelModule` of the `org.ohif.measurement-tracking` extension.
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
const getPanelData = id => {
|
||||||
|
const entry = extensionManager.getModuleEntry(id);
|
||||||
|
const content = entry.component;
|
||||||
|
|
||||||
|
return {
|
||||||
|
iconName: entry.iconName,
|
||||||
|
iconLabel: entry.iconLabel,
|
||||||
|
label: entry.label,
|
||||||
|
name: entry.name,
|
||||||
|
content,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
@ -1,7 +1,9 @@
|
|||||||
# Extensions
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Introduction
|
||||||
|
---
|
||||||
|
|
||||||
|
# Introduction
|
||||||
## Overview
|
|
||||||
We have re-designed the architecture of the `OHIF-v3` to enable building applications
|
We have re-designed the architecture of the `OHIF-v3` to enable building applications
|
||||||
that are easily extensible to various use cases (modes) that behind the scene would utilize desired functionalities (extensions) to reach the goal of the use case.
|
that are easily extensible to various use cases (modes) that behind the scene would utilize desired functionalities (extensions) to reach the goal of the use case.
|
||||||
|
|
||||||
@ -70,7 +72,8 @@ 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
|
OHIF. They're co-located in the [`OHIF/Viewers`][viewers-repo] repository, in
|
||||||
the top level [`extensions/`][ext-source] directory.
|
the top level [`extensions/`][ext-source] directory.
|
||||||
|
|
||||||
<!-- <table>
|
|
||||||
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Extension</th>
|
<th>Extension</th>
|
||||||
@ -102,6 +105,7 @@ the top level [`extensions/`][ext-source] directory.
|
|||||||
</td>
|
</td>
|
||||||
<td>ViewportModule, CommandsModule</td>
|
<td>ViewportModule, CommandsModule</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
|
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
|
||||||
</td>
|
</td>
|
||||||
@ -129,8 +133,7 @@ the top level [`extensions/`][ext-source] directory.
|
|||||||
<td> ContextModule,PanelModule,ViewportModule,CommandsModule</td>
|
<td> ContextModule,PanelModule,ViewportModule,CommandsModule</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table> -->
|
</table>
|
||||||
|
|
||||||
|
|
||||||
## Registering an Extension
|
## Registering an Extension
|
||||||
|
|
||||||
@ -158,7 +161,6 @@ import MySecondExtension from '@ohif/extension-second'
|
|||||||
|
|
||||||
const extensionConfig = {/* extension configuration */}
|
const extensionConfig = {/* extension configuration */}
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
const config = {
|
const config = {
|
||||||
routerBasename: '/',
|
routerBasename: '/',
|
||||||
extensions: [
|
extensions: [
|
||||||
@ -193,9 +195,9 @@ You can update the list of bundled extensions by:
|
|||||||
|
|
||||||
1. Having your `@ohif/viewer` project depend on the extension
|
1. Having your `@ohif/viewer` project depend on the extension
|
||||||
2. Importing and adding it to the list of extensions in the
|
2. Importing and adding it to the list of extensions in the
|
||||||
`<repo-root>/platform/src/index.js` entrypoint:
|
entrypoint:
|
||||||
|
|
||||||
```js
|
```js title="<repo-root>/platform/src/index.js"
|
||||||
import OHIFDefaultExtension from '@ohif/extension-default';
|
import OHIFDefaultExtension from '@ohif/extension-default';
|
||||||
import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
|
import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
|
||||||
import OHIFMeasurementTrackingExtension from '@ohif/extension-measurement-tracking';
|
import OHIFMeasurementTrackingExtension from '@ohif/extension-measurement-tracking';
|
||||||
@ -242,10 +244,94 @@ Each module type has a special purpose, and is consumed by our viewer
|
|||||||
differently.
|
differently.
|
||||||
|
|
||||||
|
|
||||||
{% include "./_modules.md" %}
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th align="left" width="30%">
|
||||||
|
Types
|
||||||
|
</th>
|
||||||
|
<th align="left">Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/layout-template.md">
|
||||||
|
LayoutTemplate (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Control Layout of a route</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/data-source.md">
|
||||||
|
DataSource (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Control the mapping from DICOM metadata to OHIF-metadata</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/sop-class-handler.md">
|
||||||
|
SOPClassHandler
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Determines how retrieved study data is split into "DisplaySets"</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/panel.md">
|
||||||
|
Panel
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Adds left or right hand side panels</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/viewport.md">
|
||||||
|
Viewport
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Adds a component responsible for rendering a "DisplaySet"</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/commands.md">
|
||||||
|
Commands
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Adds named commands, scoped to a context, to the CommandsManager</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/toolbar.md">
|
||||||
|
Toolbar
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Adds buttons or custom components to the toolbar</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/context.md">
|
||||||
|
Context
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Shared state for a workflow or set of extension module definitions</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./modules/hpModule.md">
|
||||||
|
HangingProtocol
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Adds hanging protocol rules</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<figure style="text-align: center; font-style: italic;">Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.</figure>
|
<span style={{"textAlign": 'center', 'fontStyle': 'italic'}}>Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.</span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
4
platform/docs/docs/extensions/lifecycle/_category_.json
Normal file
4
platform/docs/docs/extensions/lifecycle/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "LifeCycle",
|
||||||
|
"position": 1
|
||||||
|
}
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Mode Enter
|
||||||
|
---
|
||||||
# Lifecycle Hook: onModeEnter
|
# Lifecycle Hook: onModeEnter
|
||||||
|
|
||||||
If an extension defines the `onModeEnter` lifecycle hook, it is called
|
If an extension defines the `onModeEnter` lifecycle hook, it is called
|
||||||
|
|||||||
@ -1,4 +1,8 @@
|
|||||||
# Lifecylce Hook: onModeExit
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: Mode Exit
|
||||||
|
---
|
||||||
|
# Lifecycle Hook: onModeExit
|
||||||
|
|
||||||
If an extension defines the `onModeExit` lifecycle hook, it is called when navigating
|
If an extension defines the `onModeExit` lifecycle hook, it is called when navigating
|
||||||
away from a mode. This hook can be used to clean up data tasks such as unregistering services,
|
away from a mode. This hook can be used to clean up data tasks such as unregistering services,
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Pre Registration
|
||||||
|
---
|
||||||
# Lifecylce Hook: preRegistration
|
# Lifecylce Hook: preRegistration
|
||||||
|
|
||||||
If an extension defines the `preRegistration` lifecycle hook, it is called
|
If an extension defines the `preRegistration` lifecycle hook, it is called
|
||||||
@ -18,7 +22,6 @@ available in the app. We will talk more in details for creating a new service fo
|
|||||||
`OHIF-v3`.
|
`OHIF-v3`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|
||||||
// new service inside new extension
|
// new service inside new extension
|
||||||
import MyNewService from './MyNewService';
|
import MyNewService from './MyNewService';
|
||||||
|
|
||||||
|
|||||||
4
platform/docs/docs/extensions/modules/_category_.json
Normal file
4
platform/docs/docs/extensions/modules/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Modules",
|
||||||
|
"position": 3
|
||||||
|
}
|
||||||
@ -1,14 +1,10 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Commands
|
||||||
|
---
|
||||||
# Module: Commands
|
# Module: Commands
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- [Module: Commands](#module-commands)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Command Definitions](#command-definitions)
|
|
||||||
- [Command Behavior](#command-behavior)
|
|
||||||
- [`CommandsManager` Public API](#commandsmanager-public-api)
|
|
||||||
- [Contexts](#contexts)
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
`CommandsModule` includes list of arbitrary functions. These may activate tools, communicate with a server, open a modal, etc.
|
`CommandsModule` includes list of arbitrary functions. These may activate tools, communicate with a server, open a modal, etc.
|
||||||
The significant difference between `OHIF-v3` and `OHIF-v2` is that in `v3` a `mode` defines
|
The significant difference between `OHIF-v3` and `OHIF-v2` is that in `v3` a `mode` defines
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 9
|
||||||
|
sidebar_label: Context
|
||||||
|
---
|
||||||
# Module: Context
|
# Module: Context
|
||||||
|
|
||||||
- [Module: Context](#module-context)
|
|
||||||
- [Overview](#overview)
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
This new module type allows you to connect components via a shared context. You can create a context that two components, e.g. a viewport and a panel can use to synchronize and communicate. An extensive example of this can be seen in the longitudinal mode’s custom extensions.
|
This new module type allows you to connect components via a shared context. You can create a context that two components, e.g. a viewport and a panel can use to synchronize and communicate. An extensive example of this can be seen in the longitudinal mode’s custom extensions.
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,10 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: Data Source
|
||||||
|
---
|
||||||
# Module: Data Source
|
# Module: Data Source
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
The internal data structure of OHIF’s metadata follows naturalized DICOM JSON, A format pioneered by `dcmjs`. In short DICOM metadata headers with DICOM Keywords instead of tags and sequences as arrays, for easy development and clear code.
|
The internal data structure of OHIF’s metadata follows naturalized DICOM JSON, A format pioneered by `dcmjs`. In short DICOM metadata headers with DICOM Keywords instead of tags and sequences as arrays, for easy development and clear code.
|
||||||
|
|
||||||
@ -57,9 +60,7 @@ You need to make sure, you implement the following functions for the data source
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="platform/core/src/DataSources/IWebApiDataSource.js"
|
||||||
// platform/core/src/DataSources/IWebApiDataSource.js
|
|
||||||
|
|
||||||
function create({
|
function create({
|
||||||
query,
|
query,
|
||||||
retrieve,
|
retrieve,
|
||||||
|
|||||||
@ -1,10 +1,16 @@
|
|||||||
Module: Hanging Protocol
|
---
|
||||||
|
sidebar_position: 8
|
||||||
|
sidebar_label: Hanging Protocol
|
||||||
|
---
|
||||||
|
# Module: Hanging Protocol
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
`hangingProtocolModule` provides the protocols for hanging the displaySets in the viewer.
|
`hangingProtocolModule` provides the protocols for hanging the displaySets in the viewer.
|
||||||
This module can be as simple as loading a list of pre-defined protocols, or it can be more complex
|
This module can be as simple as loading a list of pre-defined protocols, or it can be more complex
|
||||||
and `fetch` the protocols from a server.
|
and `fetch` the protocols from a server.
|
||||||
|
|
||||||
|
You can read more about hanging protocols in HangingProtocolService.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const deafultProtocol = {
|
const deafultProtocol = {
|
||||||
id: 'defaultProtocol',
|
id: 'defaultProtocol',
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 7
|
||||||
|
sidebar_label: Layout Template
|
||||||
|
---
|
||||||
# Module: Layout Template
|
# Module: Layout Template
|
||||||
|
|
||||||
- [Module: Layout Template](#module-layout-template)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Overview Video](#overview-video)
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
`LayoutTemplates` are a new concept in v3 that modes use to control the layout of a route.
|
`LayoutTemplates` are a new concept in v3 that modes use to control the layout of a route.
|
||||||
A layout template is a React component that is given a set of managers that define apis to access toolbar state, commands, and hotkeys, as well as props defined by the layout template.
|
A layout template is a React component that is given a set of managers that define apis to access toolbar state, commands, and hotkeys, as well as props defined by the layout template.
|
||||||
@ -34,8 +33,7 @@ LayoutTemplate leverages extensionManager to grab typed extension module entries
|
|||||||
|
|
||||||
A simplified code for `Default extention`'s layout template is:
|
A simplified code for `Default extention`'s layout template is:
|
||||||
|
|
||||||
```jsx
|
```jsx title="extensions/default/src/ViewerLayout/index.jsx"
|
||||||
// extensions/default/src/ViewerLayout/index.jsx
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { SidePanel } from '@ohif/ui'
|
import { SidePanel } from '@ohif/ui'
|
||||||
|
|
||||||
@ -133,4 +131,6 @@ function ViewerLayout({
|
|||||||
|
|
||||||
## Overview Video
|
## Overview Video
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545993263?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Viewer-layout"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/545993263?badge=0&autopause=0&player_id=0&app_id=58479" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,11 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 6
|
||||||
|
sidebar_label: Panel
|
||||||
|
---
|
||||||
# Module: Panel
|
# Module: Panel
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
UI that is intended to be displayed within a panel. The default LayoutTemplate has panels on the left and right sides, however one could make a template with panels at the top or bottom and make extensions with panels intended for such slots.
|
The default LayoutTemplate has panels on the left and right sides, however one could make a template with panels at the top or bottom and make extensions with panels intended for such slots.
|
||||||
|
|
||||||
|
|
||||||
An extension can register a Panel Module by defining a `getPanelModule` method.
|
An extension can register a Panel Module by defining a `getPanelModule` method.
|
||||||
@ -10,18 +14,19 @@ that can be used by the consuming application. `components` are React Components
|
|||||||
that can be displayed in the consuming application's "Panel" Component.
|
that can be displayed in the consuming application's "Panel" Component.
|
||||||
|
|
||||||
|
|
||||||
<!-- <center><i>A panel extension example</i></center> -->
|
|
||||||
|
|
||||||
The `menuOptions`'s `target` key points to a registered `components`'s `id`. A
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The `menuOptions`'s `target` key, points to a registered `components`'s `id`. A
|
||||||
`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
|
`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
|
||||||
optional provide it's own `context` value.
|
optionally provide it's own `context` value.
|
||||||
|
|
||||||
The `getPanelModule` receives an object containing the `ExtensionManager`'s
|
The `getPanelModule` receives an object containing the `ExtensionManager`'s
|
||||||
associated `ServicesManager` and `CommandsManager`.
|
associated `ServicesManager` and `CommandsManager`.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
|
||||||
```js
|
|
||||||
import PanelMeasurementTable from './PanelMeasurementTable.js';
|
import PanelMeasurementTable from './PanelMeasurementTable.js';
|
||||||
|
|
||||||
|
|
||||||
@ -96,6 +101,4 @@ export default function mode({ modeConfiguration }) {
|
|||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: SOP Class Handler
|
||||||
|
---
|
||||||
# Module: SOP Class Handler
|
# Module: SOP Class Handler
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
This module defines how a specific DICOM SOP class should be processed to make a displaySet, something that can be hung in a viewport. An extension can register a [SOP Class][sop-class-link] Handler Module by defining a `getSopClassHandlerModule` method. The [SOP Class][sop-class-link].
|
This module defines how a specific DICOM SOP class should be processed to make a displaySet, something that can be hung in a viewport. An extension can register a [SOP Class][sop-class-link] Handler Module by defining a `getSopClassHandlerModule` method. The [SOP Class][sop-class-link].
|
||||||
|
|
||||||
|
|||||||
@ -1,17 +1,12 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Toolbar
|
||||||
|
---
|
||||||
# Module: Toolbar
|
# Module: Toolbar
|
||||||
|
|
||||||
An extension can register a Toolbar Module by defining a `getToolbarModule`
|
An extension can register a Toolbar Module by defining a `getToolbarModule`
|
||||||
method. `OHIF-v3`'s `default` extension (`"ohif.org.default"`) provides 5 main toolbar button types:
|
method. `OHIF-v3`'s `default` extension (`"ohif.org.default"`) provides 5 main toolbar button types:
|
||||||
|
|
||||||
- [Module: Toolbar](#module-toolbar)
|
|
||||||
- [Example Toolbar Module](#example-toolbar-module)
|
|
||||||
- [Toolbar buttons consumed in modes](#toolbar-buttons-consumed-in-modes)
|
|
||||||
- [Button Definitions](#button-definitions)
|
|
||||||
- [Nested Buttons](#nested-buttons)
|
|
||||||
- [Layout Template](#layout-template)
|
|
||||||
- [Custom Button](#custom-button)
|
|
||||||
- [Custom tool](#custom-tool)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -150,9 +145,7 @@ You can see below how `longitudinal` mode is using the available toolbarModule t
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="modes/longitudinal/src/toolbarButtons.js"
|
||||||
// modes/longitudinal/src/toolbarButtons.js
|
|
||||||
|
|
||||||
{
|
{
|
||||||
id: 'MeasurementTools',
|
id: 'MeasurementTools',
|
||||||
type: 'ohif.splitButton',
|
type: 'ohif.splitButton',
|
||||||
@ -210,7 +203,13 @@ You can see below how `longitudinal` mode is using the available toolbarModule t
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<div style="padding:62.5% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/547957214?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Toolbar"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/547957214?badge=0&autopause=0&player_id=0&app_id=58479" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Layout Template
|
## Layout Template
|
||||||
Layout selector button and logic is also provided by the OHIF-v3 `default` extension.
|
Layout selector button and logic is also provided by the OHIF-v3 `default` extension.
|
||||||
@ -224,8 +223,9 @@ To use it, you can just add the following definition to the list of `toolDefinit
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545993263?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Viewer-layout"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/545993263?badge=0&autopause=0&player_id=0&app_id=58479" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
## Custom Button
|
## Custom Button
|
||||||
You can also create your own extension, and add your new custom tool appearance (e.g., split horizantlly instead of vertically for split tool).
|
You can also create your own extension, and add your new custom tool appearance (e.g., split horizantlly instead of vertically for split tool).
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
sidebar_label: Viewport
|
||||||
|
---
|
||||||
# Module: Viewport
|
# Module: Viewport
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Viewports consume a displaySet and display/allow the user to interact with data. An extension can register a Viewport Module by defining a `getViewportModule`
|
Viewports consume a displaySet and display/allow the user to interact with data. An extension can register a Viewport Module by defining a `getViewportModule`
|
||||||
method that returns a React component. Currently, we use viewport components to
|
method that returns a React component. Currently, we use viewport components to
|
||||||
@ -18,7 +21,7 @@ add support for:
|
|||||||
The general pattern is that a mode can define which `Viewport` to use for which specific
|
The general pattern is that a mode can define which `Viewport` to use for which specific
|
||||||
`SOPClassHandlerUID`, so if you want to fork just a single Viewport component for a specialized mode, this is possible.
|
`SOPClassHandlerUID`, so if you want to fork just a single Viewport component for a specialized mode, this is possible.
|
||||||
|
|
||||||
```JSX
|
```jsx
|
||||||
// displaySet, viewportIndex, dataSource
|
// displaySet, viewportIndex, dataSource
|
||||||
const getViewportModule = () => {
|
const getViewportModule = () => {
|
||||||
const wrappedViewport = props => {
|
const wrappedViewport = props => {
|
||||||
@ -44,7 +47,7 @@ a cornerstone viewport and and action bar on top of it.
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
```JSX
|
```jsx
|
||||||
function TrackedCornerstoneViewport({
|
function TrackedCornerstoneViewport({
|
||||||
children,
|
children,
|
||||||
dataSource,
|
dataSource,
|
||||||
|
|||||||
4
platform/docs/docs/faq/_category_.json
Normal file
4
platform/docs/docs/faq/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "FAQ",
|
||||||
|
"position": 14
|
||||||
|
}
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
---
|
||||||
# Browser Support
|
# Browser Support
|
||||||
|
|
||||||
The browsers that we support are specified in the `.browserlistrc` file located
|
The browsers that we support are specified in the `.browserlistrc` file located
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
---
|
||||||
|
|
||||||
# Frequently Asked Questions
|
# Frequently Asked Questions
|
||||||
|
|
||||||
## Index
|
## Index
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
---
|
||||||
|
|
||||||
# PWA vs Packaged
|
# PWA vs Packaged
|
||||||
|
|
||||||
It's important to know that the OHIF Viewer project provides two different build
|
It's important to know that the OHIF Viewer project provides two different build
|
||||||
@ -26,7 +30,7 @@ that subsequent requests are from the local file system instead of over the
|
|||||||
network.
|
network.
|
||||||
|
|
||||||
You can read more about this particular strategy in our
|
You can read more about this particular strategy in our
|
||||||
[Build for Production Deployment Guide](./../deployment/recipes/build-for-production.md)
|
[Build for Production Deployment Guide](./../deployment/build-for-production.md)
|
||||||
|
|
||||||
## Commonjs Bundle (Packaged Script)
|
## Commonjs Bundle (Packaged Script)
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
---
|
||||||
# Scope of Project
|
# Scope of Project
|
||||||
|
|
||||||
The OHIF Viewer is a web based medical imaging viewer. This allows it to be used
|
The OHIF Viewer is a web based medical imaging viewer. This allows it to be used
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 15
|
||||||
|
---
|
||||||
# Help
|
# Help
|
||||||
|
|
||||||
We all need a little help sometimes. Don't let a few roadblocks stand in the way
|
We all need a little help sometimes. Don't let a few roadblocks stand in the way
|
||||||
|
|||||||
4
platform/docs/docs/managers/_category_.json
Normal file
4
platform/docs/docs/managers/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Managers",
|
||||||
|
"position": 11
|
||||||
|
}
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Manager</th>
|
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./extension.md">
|
|
||||||
Extension Manager
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Aggregating and exposing modules and features through out the app
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./service.md">
|
|
||||||
Services Manager
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Single point of registration for all internal and external services
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./commands.md">
|
|
||||||
Commands Manager
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Register commands with specific context and run commands in the app
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./hotkeys.md">
|
|
||||||
Hotkeys Manager
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
For keyboard keys assignment to commands
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Commands Manager
|
||||||
|
---
|
||||||
# Commands Manager
|
# Commands Manager
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -70,9 +74,7 @@ These methods are used internally to help determine which commands are currently
|
|||||||
valid, and how to provide them with any state they may need at the time they are
|
valid, and how to provide them with any state they may need at the time they are
|
||||||
called.
|
called.
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/appInit.js"
|
||||||
// platform/viewer/src/appInit.js
|
|
||||||
|
|
||||||
const commandsManagerConfig = {
|
const commandsManagerConfig = {
|
||||||
getAppState: () => {},
|
getAppState: () => {},
|
||||||
/** Used by commands to determine active context */
|
/** Used by commands to determine active context */
|
||||||
@ -167,7 +169,6 @@ use `runCommand(commandName, options = {}, contextName)`.
|
|||||||
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|
||||||
// Run a command, it will run all the `speak` commands in all contexts
|
// Run a command, it will run all the `speak` commands in all contexts
|
||||||
commandsManager.runCommand('speak', { command: 'hello' });
|
commandsManager.runCommand('speak', { command: 'hello' });
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Extension Manager
|
||||||
|
---
|
||||||
# Extension Manager
|
# Extension Manager
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
sidebar_label: Hotkeys Manager
|
||||||
|
---
|
||||||
# Hotkeys Managers
|
# Hotkeys Managers
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Introduction
|
||||||
|
---
|
||||||
# Managers
|
# Managers
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -7,7 +11,56 @@
|
|||||||
|
|
||||||
`OHIF-v3` provides the following managers which we will discuss in depth.
|
`OHIF-v3` provides the following managers which we will discuss in depth.
|
||||||
|
|
||||||
{% include "./_managers.md" %}
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Manager</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./extension.md">
|
||||||
|
Extension Manager
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Aggregating and exposing modules and features through out the app
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./service.md">
|
||||||
|
Services Manager
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Single point of registration for all internal and external services
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./commands.md">
|
||||||
|
Commands Manager
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Register commands with specific context and run commands in the app
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./hotkeys.md">
|
||||||
|
Hotkeys Manager
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
For keyboard keys assignment to commands
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: Service Manager
|
||||||
|
---
|
||||||
# Services Manager
|
# Services Manager
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -39,9 +43,7 @@ export default class ServicesManager {
|
|||||||
## Default Registered Services
|
## Default Registered Services
|
||||||
By default, `OHIF-v3` registers the following services in the `appInit`.
|
By default, `OHIF-v3` registers the following services in the `appInit`.
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/appInit.js"
|
||||||
// platform/viewer/src/appInit.js
|
|
||||||
|
|
||||||
servicesManager.registerServices([
|
servicesManager.registerServices([
|
||||||
UINotificationService,
|
UINotificationService,
|
||||||
UIModalService,
|
UIModalService,
|
||||||
@ -64,9 +66,7 @@ find out that services need to be exported as an object with `name` and `create`
|
|||||||
|
|
||||||
For instance, `ToolbarService` is exported as:
|
For instance, `ToolbarService` is exported as:
|
||||||
|
|
||||||
```js
|
```js title="platform/core/src/services/ToolBarService/index.js"
|
||||||
// platform/core/src/services/ToolBarService/index.js
|
|
||||||
|
|
||||||
import ToolBarService from './ToolBarService';
|
import ToolBarService from './ToolBarService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -112,9 +112,7 @@ function PanelMeasurementTableTracking({ servicesManager }) {
|
|||||||
## Registering Custom Services
|
## Registering Custom Services
|
||||||
You might need to write you own custom service in an extension. `preRegistration` hook inside your extension is the place for registering your custom service.
|
You might need to write you own custom service in an extension. `preRegistration` hook inside your extension is the place for registering your custom service.
|
||||||
|
|
||||||
```js
|
```js title="extensions/customExtension/src/index.js"
|
||||||
// extensions/customExtension/src/index.js
|
|
||||||
|
|
||||||
import WrappedBackEndService from './services/backEndService'
|
import WrappedBackEndService from './services/backEndService'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -129,8 +127,7 @@ export default {
|
|||||||
and the logic for your service shall be
|
and the logic for your service shall be
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="extensions/customExtension/src/services/backEndService/index.js"
|
||||||
// extensions/customExtension/src/services/backEndService/index.js
|
|
||||||
import backEndService from './backEndService';
|
import backEndService from './backEndService';
|
||||||
|
|
||||||
export default function WrappedBackEndService(serviceManager) {
|
export default function WrappedBackEndService(serviceManager) {
|
||||||
|
|||||||
@ -1,95 +0,0 @@
|
|||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th align="left">Property</th>
|
|
||||||
<th align="left">Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
id
|
|
||||||
</td>
|
|
||||||
<td align="left">unique mode id used to refer to the mode</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
displayName
|
|
||||||
</td>
|
|
||||||
<td align="left">actual name of the mode being displayed for each study in the study summary panel</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./lifeCycle.md#onModeEnter">
|
|
||||||
onModeEnter
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">hook is called when the mode is entered by the specified route</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./lifeCycle.md#onModeExit">
|
|
||||||
onModeExit
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">hook is called when the mode exited</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="">
|
|
||||||
validationTags
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">validationTags</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="">
|
|
||||||
isValidMode
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">Checks if the mode is valid for a study</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="">
|
|
||||||
routes
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">route config which defines the route address, and the layout for it</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="./index.md#consuming-extensions">
|
|
||||||
extensions
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">extensions needed by the mode</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="">
|
|
||||||
hanging protocol
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">list of hanging protocols that the mode should have access to</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="">
|
|
||||||
sopClassHandlers
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">list of SOPClass modules needed by the mode </td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="left">
|
|
||||||
<a href="">
|
|
||||||
hotkeys
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td align="left">hotkeys</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
4
platform/docs/docs/modes/_category_.json
Normal file
4
platform/docs/docs/modes/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Modes",
|
||||||
|
"position": 10
|
||||||
|
}
|
||||||
@ -1,15 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Introduction
|
||||||
|
---
|
||||||
# Modes
|
# Modes
|
||||||
|
|
||||||
- [Modes](#modes)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Anatomy](#anatomy)
|
|
||||||
- [Consuming Extensions](#consuming-extensions)
|
|
||||||
- [routes](#routes)
|
|
||||||
- [extensions](#extensions)
|
|
||||||
- [hangingProtocols](#hangingprotocols)
|
|
||||||
- [sopClassHandlers](#sopclasshandlers)
|
|
||||||
- [hotkeys](#hotkeys)
|
|
||||||
- [Registration](#registration)
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
A mode can be thought of as a viewer app configured to perform a specific task,
|
A mode can be thought of as a viewer app configured to perform a specific task,
|
||||||
@ -55,9 +49,7 @@ Mode's config is actually a function that return a config object with certain pr
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="modes/example/src/index.js"
|
||||||
// modes/example/src/index.js
|
|
||||||
|
|
||||||
export default function mode() {
|
export default function mode() {
|
||||||
return {
|
return {
|
||||||
id: '',
|
id: '',
|
||||||
@ -81,7 +73,101 @@ export default function mode() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
{% include "./_anatomy.md" %}
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th align="left">Property</th>
|
||||||
|
<th align="left">Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
id
|
||||||
|
</td>
|
||||||
|
<td align="left">unique mode id used to refer to the mode</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
displayName
|
||||||
|
</td>
|
||||||
|
<td align="left">actual name of the mode being displayed for each study in the study summary panel</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./lifeCycle.md#onModeEnter">
|
||||||
|
onModeEnter
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">hook is called when the mode is entered by the specified route</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./lifeCycle.md#onModeExit">
|
||||||
|
onModeExit
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">hook is called when the mode exited</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="">
|
||||||
|
validationTags
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">validationTags</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="">
|
||||||
|
isValidMode
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">Checks if the mode is valid for a study</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="">
|
||||||
|
routes
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">route config which defines the route address, and the layout for it</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="./index.md#consuming-extensions">
|
||||||
|
extensions
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">extensions needed by the mode</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="">
|
||||||
|
hanging protocol
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">list of hanging protocols that the mode should have access to</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="">
|
||||||
|
sopClassHandlers
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">list of SOPClass modules needed by the mode </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="left">
|
||||||
|
<a href="">
|
||||||
|
hotkeys
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="left">hotkeys</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -96,9 +182,7 @@ For instance, if a mode requires the left panel with name of `AIPanel` that is a
|
|||||||
In the background `OHIF` will handle grabbing the correct panel via `ExtensionManager`.
|
In the background `OHIF` will handle grabbing the correct panel via `ExtensionManager`.
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="extensions/myAIExtension/getPanelModule.js"
|
||||||
// extensions/myAIExtension/getPanelModule.js
|
|
||||||
|
|
||||||
import PanelAI from './PanelAI.js';
|
import PanelAI from './PanelAI.js';
|
||||||
|
|
||||||
|
|
||||||
@ -127,7 +211,6 @@ function getPanelModule({
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
@ -194,15 +277,13 @@ export default function mode({ modeConfiguration }) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### routes
|
### Routes
|
||||||
routes config is an array of route settings, and the overall look and behavior of the viewer at the designated route is defined by the `layoutTemplate` and `init` functions for the route. We will learn more about each of the above properties inside the [route documentation](./routes.md)
|
routes config is an array of route settings, and the overall look and behavior of the viewer at the designated route is defined by the `layoutTemplate` and `init` functions for the route. We will learn more about each of the above properties inside the [route documentation](./routes.md)
|
||||||
|
|
||||||
### extensions
|
### Extensions
|
||||||
Currently `extensions` property in the mode config is used to add *contextModule* of the mentioned extensions to the list of contexts and provide them through out the app. Since extensions are registered by the ExtensionManager, modes have access to the them even if they have not been referred in the mode config file inside *extensions* property. [Read more about extension registration](../extensions/index.md#registering-an-extension)
|
Currently `extensions` property in the mode config is used to add *contextModule* of the mentioned extensions to the list of contexts and provide them through out the app. Since extensions are registered by the ExtensionManager, modes have access to the them even if they have not been referred in the mode config file inside *extensions* property. [Read more about extension registration](../extensions/index.md#registering-an-extension)
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
|
||||||
// platform/viewer/src/routes/Mode/Mode.jsx
|
|
||||||
|
|
||||||
const { extensions } = mode;
|
const { extensions } = mode;
|
||||||
|
|
||||||
extensions.forEach(extensionId => {
|
extensions.forEach(extensionId => {
|
||||||
@ -216,13 +297,11 @@ extensions.forEach(extensionId => {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### hangingProtocols
|
### HangingProtocols
|
||||||
Currently, you can pass your defined hanging protocols inside the `hangingProtocols` property of
|
Currently, you can pass your defined hanging protocols inside the `hangingProtocols` property of
|
||||||
the mode's config. This will get used inside the `Mode.jsx` to configure the `HangingProtocolService`.
|
the mode's config. This will get used inside the `Mode.jsx` to configure the `HangingProtocolService`.
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
|
||||||
// platform/viewer/src/routes/Mode/Mode.jsx
|
|
||||||
|
|
||||||
const { hangingProtocols } = mode;
|
const { hangingProtocols } = mode;
|
||||||
|
|
||||||
hangingProtocols.forEach(extentionProtocols => {
|
hangingProtocols.forEach(extentionProtocols => {
|
||||||
@ -231,20 +310,18 @@ hangingProtocols.forEach(extentionProtocols => {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### sopClassHandlers
|
### SopClassHandlers
|
||||||
Mode's configuration also accepts the `sopClassHandler` modules that have been added by the extensions.
|
Mode's configuration also accepts the `sopClassHandler` modules that have been added by the extensions.
|
||||||
This information will get used inside the `Mode.jsx` to initialize the `DisplaySetService` with the provided
|
This information will get used inside the `Mode.jsx` to initialize the `DisplaySetService` with the provided
|
||||||
SOPClass modules which handles creation of the displaySets.
|
SOPClass modules which handles creation of the displaySets.
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
|
||||||
// platform/viewer/src/routes/Mode/Mode.jsx
|
|
||||||
|
|
||||||
const { sopClassHandlers } = mode;
|
const { sopClassHandlers } = mode;
|
||||||
|
|
||||||
DisplaySetService.init(extensionManager, sopClassHandlers);
|
DisplaySetService.init(extensionManager, sopClassHandlers);
|
||||||
```
|
```
|
||||||
|
|
||||||
### hotkeys
|
### Hotkeys
|
||||||
`hotkeys` is another property in the configuration of a mode that can be defined to add the specific hotkeys to the viewer at all routes.
|
`hotkeys` is another property in the configuration of a mode that can be defined to add the specific hotkeys to the viewer at all routes.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@ -281,9 +358,7 @@ export default function mode() {
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
|
||||||
// platform/viewer/src/routes/Mode/Mode.jsx
|
|
||||||
|
|
||||||
hotkeysManager.setDefaultHotKeys(hotkeys);
|
hotkeysManager.setDefaultHotKeys(hotkeys);
|
||||||
hotkeysManager.setHotkeys(hotkeys);
|
hotkeysManager.setHotkeys(hotkeys);
|
||||||
```
|
```
|
||||||
@ -299,9 +374,7 @@ hotkeysManager.setHotkeys(hotkeys);
|
|||||||
Upon release modes will also be plugged into the app via configuration, but this is still an area which is under development/discussion, and they are currently pulled from the `window` in beta.
|
Upon release modes will also be plugged into the app via configuration, but this is still an area which is under development/discussion, and they are currently pulled from the `window` in beta.
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="modes/longitudinal/src/index.js"
|
||||||
// modes/longitudinal/src/index.js
|
|
||||||
|
|
||||||
export default function mode() {
|
export default function mode() {
|
||||||
return {
|
return {
|
||||||
id: 'viewer',
|
id: 'viewer',
|
||||||
@ -325,14 +398,11 @@ export default function mode() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.longitudinalMode = mode({});
|
window.longitudinalMode = mode({});
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
and inside `@ohif/viwer` we have:
|
and inside `@ohif/viwer` we have:
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/appInit.js"
|
||||||
// platform/viewer/src/appInit.js
|
|
||||||
|
|
||||||
if (!appConfig.modes.length) {
|
if (!appConfig.modes.length) {
|
||||||
appConfig.modes.push(window.longitudinalMode);
|
appConfig.modes.push(window.longitudinalMode);
|
||||||
// appConfig.modes.push(window.segmentationMode);
|
// appConfig.modes.push(window.segmentationMode);
|
||||||
|
|||||||
@ -1,11 +1,10 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Life Cycle
|
||||||
|
---
|
||||||
# Mode: LifeCycle
|
# Mode: LifeCycle
|
||||||
|
|
||||||
|
|
||||||
- [Mode: LifeCycle](#mode-lifecycle)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [onModeEnter](#onmodeenter)
|
|
||||||
- [onModeExit](#onmodeexit)
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Currently there are two hooks that are called for modes.
|
Currently there are two hooks that are called for modes.
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: Routes
|
||||||
|
---
|
||||||
# Mode: Routes
|
# Mode: Routes
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Validity
|
||||||
|
---
|
||||||
# Mode: Validity
|
# Mode: Validity
|
||||||
|
|
||||||
- [Mode: Validity](#mode-validity)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [isValidMode](#isvalidmode)
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
There are two mechanism for checking the validity of a mode for a study.
|
There are two mechanism for checking the validity of a mode for a study.
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
---
|
||||||
# Our Process
|
# Our Process
|
||||||
|
|
||||||
Our process is a living, breathing thing. We strive to have regular
|
Our process is a living, breathing thing. We strive to have regular
|
||||||
@ -8,14 +11,6 @@ that process in an effort to:
|
|||||||
- Strengthen community member involvement and understanding
|
- Strengthen community member involvement and understanding
|
||||||
- Welcome feedback and helpful suggestions
|
- Welcome feedback and helpful suggestions
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
- [Issue Triage](#issue-triage)
|
|
||||||
- [Issue Curation ("backlog grooming")](#issue-curation-backlog-grooming)
|
|
||||||
- [Contributions (Pull Requests)](#contributions-pull-requests)
|
|
||||||
- [Releases](#releases)
|
|
||||||
|
|
||||||
|
|
||||||
## Issue Triage
|
## Issue Triage
|
||||||
|
|
||||||
[GitHub issues][gh-issues] are the best way to provide feedback, ask questions,
|
[GitHub issues][gh-issues] are the best way to provide feedback, ask questions,
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
# Quick Start
|
|
||||||
|
|
||||||
This page details how to get an instance of the OHIF Viewer up and running as
|
|
||||||
fast as possible. It shows how to grab a pre-built version of the application,
|
|
||||||
point it at your data source (PACS), and plop it on a web server.
|
|
||||||
|
|
||||||
## Options
|
|
||||||
|
|
||||||
### 1. Pre-built PWA
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
### 2. Script-Tag
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
### 3. Docker
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
## Security Concerns
|
|
||||||
|
|
||||||
- Secure your data
|
|
||||||
|
|
||||||
## Common Issues
|
|
||||||
|
|
||||||
- Missing server rewrite rules
|
|
||||||
- CORS issues when requesting data from PACS
|
|
||||||
4
platform/docs/docs/services/_category_.json
Normal file
4
platform/docs/docs/services/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Services",
|
||||||
|
"position": 12
|
||||||
|
}
|
||||||
@ -1,132 +0,0 @@
|
|||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Service</th>
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./data/DicomMetadataStore.md">
|
|
||||||
DicomMetadataStore (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>Data Service</td>
|
|
||||||
<td>
|
|
||||||
DicomMetadataStore
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./data/DisplaySetService.md">
|
|
||||||
DisplaySetService (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>Data Service</td>
|
|
||||||
<td>
|
|
||||||
DisplaySetService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./data/HangingProtocolService.md">
|
|
||||||
HangingProtocolService (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>Data Service</td>
|
|
||||||
<td>
|
|
||||||
HangingProtocolService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./data/MeasurementService.md">
|
|
||||||
MeasurementService (MODIFIED)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>Data Service</td>
|
|
||||||
<td>
|
|
||||||
MeasurementService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./data/ToolbarService.md">
|
|
||||||
ToolBarService (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>Data Service</td>
|
|
||||||
<td>
|
|
||||||
ToolBarService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./ui/ViewportGridService.md">
|
|
||||||
ViewportGridService (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>UI Service</td>
|
|
||||||
<td>
|
|
||||||
ViewportGridService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./ui/cine.md">
|
|
||||||
Cine Service (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>UI Service</td>
|
|
||||||
<td>
|
|
||||||
cine
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./ui/ui-dialog-service.md">
|
|
||||||
UIDialogService
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>UI Service</td>
|
|
||||||
<td>
|
|
||||||
UIDialogService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./ui/ui-modal-service.md">
|
|
||||||
UIModalService
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>UI Service</td>
|
|
||||||
<td>
|
|
||||||
UIModalService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./ui/ui-notification-service.md">
|
|
||||||
UINotificationService
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>UI Service</td>
|
|
||||||
<td>
|
|
||||||
UINotificationService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="./ui/ui-viewport-dialog-service.md">
|
|
||||||
UIViewportDialogService (NEW)
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>UI Service</td>
|
|
||||||
<td>
|
|
||||||
UIViewportDialogService
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: DICOM Metadata Store
|
||||||
|
---
|
||||||
# DICOM Metadata Store
|
# DICOM Metadata Store
|
||||||
|
|
||||||
|
|
||||||
@ -62,9 +66,7 @@ stored and in what format and hierarchy. `_model` is a private variable in the s
|
|||||||
which holds all the metadata for all studies, series, and instances, and it looks like:
|
which holds all the metadata for all studies, series, and instances, and it looks like:
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js"
|
||||||
// platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js
|
|
||||||
|
|
||||||
const _model = {
|
const _model = {
|
||||||
studies: [
|
studies: [
|
||||||
{
|
{
|
||||||
@ -107,5 +109,4 @@ const _model = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: DisplaySet Service
|
||||||
|
---
|
||||||
# DisplaySet Service
|
# DisplaySet Service
|
||||||
|
|
||||||
|
|
||||||
@ -7,9 +11,7 @@
|
|||||||
> Based on the instanceMetadata's `SOPClassHandlerId`, the correct module from the registered extensions is found by `OHIF` and its `getDisplaySetsFromSeries` runs to create a DisplaySet for the Series.
|
> Based on the instanceMetadata's `SOPClassHandlerId`, the correct module from the registered extensions is found by `OHIF` and its `getDisplaySetsFromSeries` runs to create a DisplaySet for the Series.
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="platform/core/src/services/DisplaySetService/DisplaySetService.js"
|
||||||
// platform/core/src/services/DisplaySetService/DisplaySetService.js
|
|
||||||
|
|
||||||
init(extensionManager, SOPClassHandlerIds) {
|
init(extensionManager, SOPClassHandlerIds) {
|
||||||
this.extensionManager = extensionManager;
|
this.extensionManager = extensionManager;
|
||||||
this.SOPClassHandlerIds = SOPClassHandlerIds;
|
this.SOPClassHandlerIds = SOPClassHandlerIds;
|
||||||
@ -19,9 +21,7 @@ init(extensionManager, SOPClassHandlerIds) {
|
|||||||
|
|
||||||
in `Mode.jsx`
|
in `Mode.jsx`
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
|
||||||
// platform/viewer/src/routes/Mode/Mode.jsx
|
|
||||||
|
|
||||||
export default function ModeRoute(/** ... **/) {
|
export default function ModeRoute(/** ... **/) {
|
||||||
/** ... **/
|
/** ... **/
|
||||||
const { DisplaySetService } = servicesManager.services
|
const { DisplaySetService } = servicesManager.services
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Hanging Protocol Service
|
||||||
|
---
|
||||||
# Hanging Protocol Service
|
# Hanging Protocol Service
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 6
|
||||||
|
sidebar_label: Measurement Service
|
||||||
|
---
|
||||||
# Measurement Service
|
# Measurement Service
|
||||||
|
|
||||||
|
|
||||||
@ -75,9 +79,7 @@ provide three mappers:
|
|||||||
- `toMeasurement`: a function that converts the tool data to OHIF internal representation of measurement data.
|
- `toMeasurement`: a function that converts the tool data to OHIF internal representation of measurement data.
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="extensions/cornerstone/src/utils/measurementServiceMappings/Length.js"
|
||||||
// extensions/cornerstone/src/utils/measurementServiceMappings/Length.js
|
|
||||||
|
|
||||||
function toMeasurement(
|
function toMeasurement(
|
||||||
csToolsAnnotation,
|
csToolsAnnotation,
|
||||||
DisplaySetService,
|
DisplaySetService,
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
sidebar_label: Toolbar Service
|
||||||
|
---
|
||||||
# Toolbar Service
|
# Toolbar Service
|
||||||
|
|
||||||
|
|
||||||
@ -6,9 +10,12 @@
|
|||||||
the user.
|
the user.
|
||||||
|
|
||||||
|
|
||||||
<div style="padding:62.5% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/547957214?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Toolbar"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/547957214?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
|
|
||||||
@ -158,9 +165,7 @@ You can see below how `longitudinal` mode is using the available toolbarModule t
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="modes/longitudinal/src/toolbarButtons.js"
|
||||||
// modes/longitudinal/src/toolbarButtons.js
|
|
||||||
|
|
||||||
{
|
{
|
||||||
id: 'MeasurementTools',
|
id: 'MeasurementTools',
|
||||||
type: 'ohif.splitButton',
|
type: 'ohif.splitButton',
|
||||||
|
|||||||
4
platform/docs/docs/services/data/_category_.json
Normal file
4
platform/docs/docs/services/data/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Data Services",
|
||||||
|
"position": 2
|
||||||
|
}
|
||||||
@ -1,65 +0,0 @@
|
|||||||
# 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,8 +1,11 @@
|
|||||||
# Services (default)
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Overview
|
||||||
|
---
|
||||||
|
# Overview
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
Data services are the first category of services which deal with handling non-ui related state
|
Data services are the first category of services which deal with handling non-ui related state
|
||||||
Each services have their own internal state which they handle.
|
Each services have their own internal state which they handle.
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
# Services And Managers
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Introduction
|
||||||
|
---
|
||||||
|
# Services
|
||||||
|
|
||||||
- [Services And Managers](#services-and-managers)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Services](#services)
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Services are "concern-specific" code modules that can be consumed across layers. Services provide
|
Services are "concern-specific" code modules that can be consumed across layers. Services provide
|
||||||
@ -25,7 +26,138 @@ Each service should be:
|
|||||||
## Services
|
## Services
|
||||||
The following services is available in the `OHIF-v3`.
|
The following services is available in the `OHIF-v3`.
|
||||||
|
|
||||||
{% include "./_services.md" %}
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Service</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./data/DicomMetadataStore.md">
|
||||||
|
DicomMetadataStore (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>Data Service</td>
|
||||||
|
<td>
|
||||||
|
DicomMetadataStore
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./data/DisplaySetService.md">
|
||||||
|
DisplaySetService (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>Data Service</td>
|
||||||
|
<td>
|
||||||
|
DisplaySetService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./data/HangingProtocolService.md">
|
||||||
|
HangingProtocolService (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>Data Service</td>
|
||||||
|
<td>
|
||||||
|
HangingProtocolService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./data/MeasurementService.md">
|
||||||
|
MeasurementService (MODIFIED)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>Data Service</td>
|
||||||
|
<td>
|
||||||
|
MeasurementService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./data/ToolbarService.md">
|
||||||
|
ToolBarService (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>Data Service</td>
|
||||||
|
<td>
|
||||||
|
ToolBarService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./ui/ViewportGridService.md">
|
||||||
|
ViewportGridService (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>UI Service</td>
|
||||||
|
<td>
|
||||||
|
ViewportGridService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./ui/cine.md">
|
||||||
|
Cine Service (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>UI Service</td>
|
||||||
|
<td>
|
||||||
|
cine
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./ui/ui-dialog-service.md">
|
||||||
|
UIDialogService
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>UI Service</td>
|
||||||
|
<td>
|
||||||
|
UIDialogService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./ui/ui-modal-service.md">
|
||||||
|
UIModalService
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>UI Service</td>
|
||||||
|
<td>
|
||||||
|
UIModalService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./ui/ui-notification-service.md">
|
||||||
|
UINotificationService
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>UI Service</td>
|
||||||
|
<td>
|
||||||
|
UINotificationService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="./ui/ui-viewport-dialog-service.md">
|
||||||
|
UIViewportDialogService (NEW)
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>UI Service</td>
|
||||||
|
<td>
|
||||||
|
UIViewportDialogService
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Pub Sub
|
||||||
|
---
|
||||||
# Pub sub
|
# Pub sub
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -64,8 +68,7 @@ You need to be careful if you are adding custom subscriptions to the app. Each s
|
|||||||
|
|
||||||
Below, we can see `simplified` `Mode.jsx` and the corresponding `useEffect` where the unsubscription functions are executed upon destruction.
|
Below, we can see `simplified` `Mode.jsx` and the corresponding `useEffect` where the unsubscription functions are executed upon destruction.
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
|
||||||
// platform/viewer/src/routes/Mode/Mode.jsx
|
|
||||||
export default function ModeRoute(/**..**/) {
|
export default function ModeRoute(/**..**/) {
|
||||||
/**...**/
|
/**...**/
|
||||||
useEffect(
|
useEffect(
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 6
|
||||||
|
sidebar_label: Viewport Grid Service
|
||||||
|
---
|
||||||
# Viewport Grid Service
|
# Viewport Grid Service
|
||||||
|
|
||||||
|
|
||||||
@ -6,8 +10,6 @@ This is a new UI service, that handles the grid layout of the viewer.
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/549261939?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Viewport Modal"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
## Interface
|
## Interface
|
||||||
|
|
||||||
|
|||||||
4
platform/docs/docs/services/ui/_category_.json
Normal file
4
platform/docs/docs/services/ui/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "UI Services",
|
||||||
|
"position": 3
|
||||||
|
}
|
||||||
@ -1,7 +1,10 @@
|
|||||||
# UI Services
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Overview
|
||||||
|
---
|
||||||
|
# Overview
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
|
|
||||||
<!-- - Consistent look & feel
|
<!-- - Consistent look & feel
|
||||||
@ -61,9 +64,7 @@ The `ServicesManager` is:
|
|||||||
**There are several context providers that wraps the application routes. This
|
**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.**
|
makes the context values exposed in the app, and service's `setImplementation` can get run to override the implementation of the service.**
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/App.jsx"
|
||||||
// platform/viewer/src/App.jsx
|
|
||||||
|
|
||||||
function App({ config, defaultExtensions }) {
|
function App({ config, defaultExtensions }) {
|
||||||
/**...**/
|
/**...**/
|
||||||
/**...**/
|
/**...**/
|
||||||
@ -91,9 +92,7 @@ function App({ config, defaultExtensions }) {
|
|||||||
|
|
||||||
For instance `UIModalService` has the following Public API:
|
For instance `UIModalService` has the following Public API:
|
||||||
|
|
||||||
```js
|
```js title="platform/core/src/services/UIModalService/index.js"
|
||||||
// platform/core/src/services/UIModalService/index.js
|
|
||||||
|
|
||||||
const publicAPI = {
|
const publicAPI = {
|
||||||
name,
|
name,
|
||||||
hide: _hide,
|
hide: _hide,
|
||||||
@ -121,9 +120,7 @@ export default {
|
|||||||
|
|
||||||
`UIModalService` implementation can be set (override) in its context provider. For instance in `ModalProvider` we have:
|
`UIModalService` implementation can be set (override) in its context provider. For instance in `ModalProvider` we have:
|
||||||
|
|
||||||
```js
|
```js title="platform/ui/src/contextProviders/ModalProvider.jsx"
|
||||||
// platform/ui/src/contextProviders/ModalProvider.jsx
|
|
||||||
|
|
||||||
import { Modal } from '@ohif/ui'
|
import { Modal } from '@ohif/ui'
|
||||||
|
|
||||||
const ModalContext = createContext(null)
|
const ModalContext = createContext(null)
|
||||||
@ -194,9 +191,7 @@ Therefore, anywhere in the app that we have access to react context we can use i
|
|||||||
A `simplified` code for our worklist is:
|
A `simplified` code for our worklist is:
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="platform/viewer/src/routes/WorkList/WorkList.jsx"
|
||||||
// platform/viewer/src/routes/WorkList/WorkList.jsx
|
|
||||||
|
|
||||||
import { useModal, Header } from '@ohif/ui'
|
import { useModal, Header } from '@ohif/ui'
|
||||||
|
|
||||||
function WorkList({
|
function WorkList({
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: UI Dialog Service
|
||||||
|
---
|
||||||
# UI Dialog Service
|
# UI Dialog Service
|
||||||
|
|
||||||
Dialogs have similar characteristics to that of Modals, but often with a
|
Dialogs have similar characteristics to that of Modals, but often with a
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: UI Modal Service
|
||||||
|
---
|
||||||
# UI Modal Service
|
# UI Modal Service
|
||||||
|
|
||||||
Modals have similar characteristics to that of Dialogs, but are often larger,
|
Modals have similar characteristics to that of Dialogs, but are often larger,
|
||||||
@ -11,7 +15,10 @@ be centered, and not draggable. They're commonly used when:
|
|||||||
If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
|
If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
|
||||||
article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
|
article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/549261451?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Viewer Modal"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/549261451?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
## Interface
|
## Interface
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: UI Notification Service
|
||||||
|
---
|
||||||
# UI Notification Service
|
# UI Notification Service
|
||||||
|
|
||||||
Notifications can be annoying and disruptive. They can also deliver timely
|
Notifications can be annoying and disruptive. They can also deliver timely
|
||||||
@ -12,7 +16,13 @@ guidance on when and how to use them:
|
|||||||
If you're curious about the DOs and DON'Ts of notifications, check out this
|
If you're curious about the DOs and DON'Ts of notifications, check out this
|
||||||
article: ["How To Design Notifications For Better UX"][ux-article]
|
article: ["How To Design Notifications For Better UX"][ux-article]
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/549260975?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="notification"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/549260975?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
## Interface
|
## Interface
|
||||||
|
|
||||||
For a more detailed look on the options and return values each of these methods
|
For a more detailed look on the options and return values each of these methods
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
sidebar_label: UI Viewport Dialog Service
|
||||||
|
---
|
||||||
|
|
||||||
# UI Viewport Dialog Service
|
# UI Viewport Dialog Service
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
@ -15,8 +20,9 @@ article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/549261939?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Viewport Modal"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/549261939?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
## Interface
|
## Interface
|
||||||
|
|
||||||
|
|||||||
4
platform/docs/docs/userManuals/_category_.json
Normal file
4
platform/docs/docs/userManuals/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "User Manuals",
|
||||||
|
"position": 3
|
||||||
|
}
|
||||||
@ -1,19 +1,70 @@
|
|||||||
# Overview
|
---
|
||||||
Our documentations in this section is tailored toward the end-user. Developers
|
sidebar_position: 2
|
||||||
can skip this section and visit the development section.
|
sidebar_label: Study list
|
||||||
In this section, we explore various core functionalities and use cases that `OHIF viewer`
|
---
|
||||||
provides. In order to follow the guides below, you need to have a running instance
|
|
||||||
of the viewer.
|
# Study list
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
The first page you will see when the viewer is loaded is called `Study List`.
|
||||||
|
In this page you can explore all the studies that are stored on the configured
|
||||||
|
server for the `OIHF Viewer`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
At the end of the page you can navigate to the next/previous page or change the
|
||||||
|
default number of studies that are shown
|
||||||
|
|
||||||
|
|
||||||
|
## Filters
|
||||||
|
There are certain filters that can be used to limit the study list to the desired
|
||||||
|
criteria.
|
||||||
|
|
||||||
|
- Patient Name: Searches between patients names
|
||||||
|
- MRN: Searches between patients Medical Record Number
|
||||||
|
- Study Data: Filters the date of the acquisition
|
||||||
|
- Description: Searches between study descriptions
|
||||||
|
- Modality: Filters the modalities
|
||||||
|
- Accession: Searches between patients accession number
|
||||||
|
|
||||||
|
|
||||||
- [Study List](./studyList/index.md)
|
An example of using study list filter is shown below:
|
||||||
- [Filters](./studyList/index.md#filters)
|
|
||||||
- [Study Summary](./studyList/index.md#study-summary)
|
|
||||||
- [Study-specific modes](./studyList/index.md#study-specific-modes)
|
|
||||||
- [Viewer (Basic Viewer)](./viewer/index.md)
|
## Study Summary
|
||||||
- [Overview](./viewer/index.md#overview)
|
If you you click on one of the studies, the panel for displaying the summary
|
||||||
- [Study Panel](./viewer/studyPanel/study-panel.md#overview)
|
of the study will shows up.
|
||||||
- [Measurement Panel](./viewer/measurementPanel/measurement-panel.md#overview)
|
|
||||||
- [Viewport](./viewer/viewport/viewport.md#overview)
|
|
||||||
- [Toolbar](./viewer/toolbar/toolbar.md#overview)
|
|
||||||
- [HotKeys](./viewer/hotkeys/hotkeys.md#overview)
|
As you can see, a summary of series available in the study is shown, which contains
|
||||||
|
the series description, series number, modality of the series, and instances in the series.
|
||||||
|
|
||||||
|
Next, We will discuss the modes, and their enabled/disabled states.
|
||||||
|
|
||||||
|
|
||||||
|
## Study Specific Modes
|
||||||
|
As seen for each study, all the available modes will get shown. What is a mode?
|
||||||
|
Modes define the higher-level functionalities and appearance for the viewer.
|
||||||
|
For instance, as seen, there are two modes shown for the selected study
|
||||||
|
|
||||||
|
- Basic Viewer: Default mode that enables rendering and measurement tracking
|
||||||
|
|
||||||
|
- PET/CT Fusion: Mode for visualizing the PET CT study in a 3x3 format.
|
||||||
|
|
||||||
|
However, based on the mode configurations (e.g., available modalities), they can be
|
||||||
|
enabled or disabled.
|
||||||
|
|
||||||
|
Below, you can see two studies, In Study 1, Basic Viewer mode is enabled and
|
||||||
|
ready to be used; however, the PET/CT fusion is disabled by the viewer since
|
||||||
|
only PET images are found in the study.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## View Study
|
||||||
|
You can click on the `Basic Viewer` to open the viewer for the selected study.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,70 +0,0 @@
|
|||||||
# Study list
|
|
||||||
- [Study List](./index.md)
|
|
||||||
- [Filters](./index.md#filters)
|
|
||||||
- [Study Summary](./index.md#study-summary)
|
|
||||||
- [Study-specific modes](./index.md#study-specific-modes)
|
|
||||||
- [View Study](./index.md#view-study)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
The first page you will see when the viewer is loaded is called `Study List`.
|
|
||||||
In this page you can explore all the studies that are stored on the configured
|
|
||||||
server for the `OIHF Viewer`.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
At the end of the page you can navigate to the next/previous page or change the
|
|
||||||
default number of studies that are shown
|
|
||||||
|
|
||||||
|
|
||||||
## Filters
|
|
||||||
There are certain filters that can be used to limit the study list to the desired
|
|
||||||
criteria.
|
|
||||||
|
|
||||||
- Patient Name: Searches between patients names
|
|
||||||
- MRN: Searches between patients Medical Record Number
|
|
||||||
- Study Data: Filters the date of the acquisition
|
|
||||||
- Description: Searches between study descriptions
|
|
||||||
- Modality: Filters the modalities
|
|
||||||
- Accession: Searches between patients accession number
|
|
||||||
|
|
||||||
|
|
||||||
An example of using study list filter is shown below:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Study Summary
|
|
||||||
If you you click on one of the studies, the panel for displaying the summary
|
|
||||||
of the study will shows up.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
As you can see, a summary of series available in the study is shown, which contains
|
|
||||||
the series description, series number, modality of the series, and instances in the series.
|
|
||||||
|
|
||||||
Next, We will discuss the modes, and their enabled/disabled states.
|
|
||||||
|
|
||||||
|
|
||||||
## Study Specific Modes
|
|
||||||
As seen for each study, all the available modes will get shown. What is a mode?
|
|
||||||
Modes define the higher-level functionalities and appearance for the viewer.
|
|
||||||
For instance, as seen, there are two modes shown for the selected study
|
|
||||||
|
|
||||||
- Basic Viewer: Default mode that enables rendering and measurement tracking
|
|
||||||
|
|
||||||
- PET/CT Fusion: Mode for visualizing the PET CT study in a 3x3 format.
|
|
||||||
|
|
||||||
However, based on the mode configurations (e.g., available modalities), they can be
|
|
||||||
enabled or disabled.
|
|
||||||
|
|
||||||
Below, you can see two studies, In Study 1, Basic Viewer mode is enabled and
|
|
||||||
ready to be used; however, the PET/CT fusion is disabled by the viewer since
|
|
||||||
only PET images are found in the study.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## View Study
|
|
||||||
You can click on the `Basic Viewer` to open the viewer for the selected study.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
22
platform/docs/docs/userManuals/viewer/Language.md
Normal file
22
platform/docs/docs/userManuals/viewer/Language.md
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 7
|
||||||
|
---
|
||||||
|
|
||||||
|
# Language
|
||||||
|
|
||||||
|
OHIF supports internationalization capabilities and setting the general language
|
||||||
|
of the Viewer.
|
||||||
|
|
||||||
|
It should be noted that we don't have complete translations for all the components
|
||||||
|
and all the languages; however, you can easily add the key value translation pairs
|
||||||
|
following developer guides.
|
||||||
|
|
||||||
|
Summary of language changing usage can be seen below:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Overview Video
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/559038442?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
@ -1,12 +0,0 @@
|
|||||||
# Language
|
|
||||||
|
|
||||||
OHIF supports internationalization capabilities and setting the general language
|
|
||||||
of the Viewer.
|
|
||||||
|
|
||||||
It should be noted that we don't have complete translations for all the components
|
|
||||||
and all the languages; however, you can easily add the key value translation pairs
|
|
||||||
following developer guides.
|
|
||||||
|
|
||||||
Summary of language changing usage can be seen below:
|
|
||||||
|
|
||||||
**Upload**
|
|
||||||
4
platform/docs/docs/userManuals/viewer/_category_.json
Normal file
4
platform/docs/docs/userManuals/viewer/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Viewer",
|
||||||
|
"position": 2
|
||||||
|
}
|
||||||
@ -1,10 +1,14 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 6
|
||||||
|
---
|
||||||
|
|
||||||
# Hotkeys
|
# Hotkeys
|
||||||
|
|
||||||
To open the hotkey assignment panel, you can click on the Preferences gear on the
|
To open the hotkey assignment panel, you can click on the Preferences gear on the
|
||||||
top right side of the viewer.
|
top right side of the viewer.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Below, you can see the default hotkeys key bindings:
|
Below, you can see the default hotkeys key bindings:
|
||||||
|
|
||||||
|
|
||||||
@ -1,10 +1,7 @@
|
|||||||
# Viewer
|
---
|
||||||
- [Viewer](./index.md)
|
sidebar_position: 1
|
||||||
- [Overview](./index.md#overview)
|
sidebar_label: Overview
|
||||||
- [Study Panel](./studyPanel/study-panel.md)
|
---
|
||||||
- [Measurement Panel](./measurementPanel/measurement-panel.md)
|
|
||||||
- [Toolbar](./toolbar/toolbar.md)
|
|
||||||
- [HotKeys](./hotkeys/hotkeys.md)
|
|
||||||
|
|
||||||
|
|
||||||
# Overview
|
# Overview
|
||||||
|
|||||||
@ -1,49 +1,54 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
---
|
||||||
|
|
||||||
# Measurement panel
|
# Measurement panel
|
||||||
|
|
||||||
|
## Introduction
|
||||||
In `Basic Viewer` mode, right panel is the `Measurement Panel`. When you use an annotation tool, a pop up will show up and asks the user if they want to track measurements for the
|
In `Basic Viewer` mode, right panel is the `Measurement Panel`. When you use an annotation tool, a pop up will show up and asks the user if they want to track measurements for the
|
||||||
series on which the annotation was drawn.
|
series on which the annotation was drawn.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
If you select `yes`, the series becomes a `tracked series`, and the current drawn measurement and next measurements will get shown up on the measurement panel on the right.
|
If you select `yes`, the series becomes a `tracked series`, and the current drawn measurement and next measurements will get shown up on the measurement panel on the right.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Renaming Measurements
|
## Renaming Measurements
|
||||||
You can edit the measurement name by hovering over the measurement and selecting the edit icon.
|
You can edit the measurement name by hovering over the measurement and selecting the edit icon.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Result:
|
Result:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Deleting a Measurement
|
## Deleting a Measurement
|
||||||
A measurement can be deleting by dragging it outside the image in the viewport. You can
|
A measurement can be deleting by dragging it outside the image in the viewport. You can
|
||||||
take a look at the overview video to see this behavior.
|
take a look at the overview video to see this behavior.
|
||||||
|
|
||||||
|
|
||||||
# Jumping to a Measurement
|
## Jumping to a Measurement
|
||||||
Measurements that appear on the measurement panel are linked directly to their original
|
Measurements that appear on the measurement panel are linked directly to their original
|
||||||
tool on the viewport. This enables the user to click on a measurement and the viewport will jump to the slice that the measurement has been drawn. You can
|
tool on the viewport. This enables the user to click on a measurement and the viewport will jump to the slice that the measurement has been drawn. You can
|
||||||
take a look at the overview video to see this behavior.
|
take a look at the overview video to see this behavior.
|
||||||
|
|
||||||
# Prev/Next Measurement
|
## Prev/Next Measurement
|
||||||
Measurement navigation inside the top viewport can be used to move to previous and next measurement.
|
Measurement navigation inside the top viewport can be used to move to previous and next measurement.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Export Measurements
|
## Export Measurements
|
||||||
You can export the measurements by clicking on the `Export`. A CSV file will get downloaded to your local computer containing the drawn measurements.
|
You can export the measurements by clicking on the `Export`. A CSV file will get downloaded to your local computer containing the drawn measurements.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
If you have set up your DICOM server to be able to store instances from the viewer, then you are able to create a report by clicking on the `Create Report`.
|
If you have set up your DICOM server to be able to store instances from the viewer, then you are able to create a report by clicking on the `Create Report`.
|
||||||
@ -52,11 +57,17 @@ to the server.
|
|||||||
|
|
||||||
For instance, running the Viewer on a local DCM4CHEE:
|
For instance, running the Viewer on a local DCM4CHEE:
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/557569965?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="DICOM SR Export"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/557569965?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
# Overview video
|
## Overview Video
|
||||||
An overview of measurement drawing and exporting can be seen below:
|
An overview of measurement drawing and exporting can be seen below:
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545986384?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="measurement-report"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/545986384?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
@ -1,4 +1,8 @@
|
|||||||
# Study panel
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
# Study Panel
|
||||||
|
|
||||||
In `Basic Viewer` mode, the left panel includes Studies related to the current patient.
|
In `Basic Viewer` mode, the left panel includes Studies related to the current patient.
|
||||||
You can see three main type of studies below
|
You can see three main type of studies below
|
||||||
@ -7,10 +11,10 @@ You can see three main type of studies below
|
|||||||
- Recent: Other studies for this patient
|
- Recent: Other studies for this patient
|
||||||
- All: Includes both primary and recent studies
|
- All: Includes both primary and recent studies
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
This is a new feature that we have added to `OHIF-v3`, that shows all the studies that the patient with the specific MRN had and are available from the data storage.
|
This is a new feature that we have added to `OHIF-v3`, that shows all the studies that the patient with the specific MRN had and are available from the data storage.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
As you can see the first picture, the dashed circle on the left side of each series demonstrates whether the series is being tracked for measurement or not.
|
As you can see the first picture, the dashed circle on the left side of each series demonstrates whether the series is being tracked for measurement or not.
|
||||||
@ -1,19 +1,21 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
# Toolbar
|
# Toolbar
|
||||||
|
|
||||||
The four main components of the toolbar are:
|
The four main components of the toolbar are:
|
||||||
|
|
||||||
- Navigation back to the [Study List](../../studyList/index.md)
|
- Navigation back to the [Study List](../index.md)
|
||||||
- Logo and white labelling
|
- Logo and white labelling
|
||||||
- [Tools](#tools)
|
- [Tools](#tools)
|
||||||
- [Preferences](#preferences)
|
- [Preferences](#preferences)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Tools
|
## Tools
|
||||||
This section displays all the available tools inside the mode.
|
This section displays all the available tools inside the mode.
|
||||||
|
|
||||||
## Measurement tools
|
## Measurement tools
|
||||||
@ -28,7 +30,7 @@ via:
|
|||||||
- Probe: To read the intensity value at a location
|
- Probe: To read the intensity value at a location
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
To draw a measurement you can select it from the toolbar and click and drag mouse
|
To draw a measurement you can select it from the toolbar and click and drag mouse
|
||||||
to reach the desired shape, size and direction.
|
to reach the desired shape, size and direction.
|
||||||
@ -36,35 +38,39 @@ to reach the desired shape, size and direction.
|
|||||||
A sample tool drawing is shown below
|
A sample tool drawing is shown below
|
||||||
|
|
||||||
|
|
||||||
# Presets
|
## Presets
|
||||||
Preset tool enables manipulating the window level and window width of the rendered
|
Preset tool enables manipulating the window level and window width of the rendered
|
||||||
image, which basically modifies the contrast and brightness.
|
image, which basically modifies the contrast and brightness.
|
||||||
|
|
||||||
You can also choose from the list of pre-defined presets by clicking on the triangle.
|
You can also choose from the list of pre-defined presets by clicking on the triangle.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Download High Quality Image
|
## Download High Quality Image
|
||||||
By clicking on the Camera icon you can open the window for downloading the image as
|
By clicking on the Camera icon you can open the window for downloading the image as
|
||||||
common image formats (png, jpg)
|
common image formats (png, jpg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
In the opened modal, you can set the filename, image's width and height, and filetype and press download for downloading the image to your local computer.
|
In the opened modal, you can set the filename, image's width and height, and filetype and press download for downloading the image to your local computer.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Extra tools
|
## Extra tools
|
||||||
Lots of other tools are also available in the last tool icon drawer. If you
|
Lots of other tools are also available in the last tool icon drawer. If you
|
||||||
click on the triangle they will get appeared.
|
click on the triangle they will get appeared.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Overview
|
## Overview Video
|
||||||
An overview of tool usage can been seen below:
|
An overview of tool usage can been seen below:
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545989422?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Toolbar-annotation"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/545989422?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
@ -1,9 +1,14 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
---
|
||||||
|
|
||||||
# Viewport
|
# Viewport
|
||||||
|
|
||||||
|
## Introduction
|
||||||
Image visualization happens at the viewport which contains canvas or canvases that
|
Image visualization happens at the viewport which contains canvas or canvases that
|
||||||
renders series.
|
renders series.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
By default you can modify:
|
By default you can modify:
|
||||||
@ -14,21 +19,24 @@ By default you can modify:
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Changing Series for display
|
## Changing Series for display
|
||||||
To change the displayed series, you can drag and drop the desired series from the left panel. Start, by dragging the thumbnail of the series, and drop it on the viewport.
|
To change the displayed series, you can drag and drop the desired series from the left panel. Start, by dragging the thumbnail of the series, and drop it on the viewport.
|
||||||
|
|
||||||
|
|
||||||
# Changing Layout
|
## Changing Layout
|
||||||
If you click on the layout icon on the toolbar, you can use the layout selector UI. After changing the layout, you can select studies for each new viewport by dragging and dropping in to the viewport.
|
If you click on the layout icon on the toolbar, you can use the layout selector UI. After changing the layout, you can select studies for each new viewport by dragging and dropping in to the viewport.
|
||||||
|
|
||||||
After changing the layout from 1x1, you will see each viewport gets tagged by a letter,
|
After changing the layout from 1x1, you will see each viewport gets tagged by a letter,
|
||||||
which matches its series section in the study list.
|
which matches its series section in the study list.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Overview video
|
## Overview Video
|
||||||
An overview of viewport layout change, and manipulation can be seen below:
|
An overview of viewport layout change, and manipulation can be seen below:
|
||||||
|
|
||||||
|
|
||||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545995881?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="viewer-layout-2"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
||||||
|
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||||
|
<iframe src="https://player.vimeo.com/video/545995881?badge=0&autopause=0&player_id=0&app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
|
||||||
|
</div>
|
||||||
4
platform/docs/docs/viewer/_category_.json
Normal file
4
platform/docs/docs/viewer/_category_.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"label": "Viewer",
|
||||||
|
"position": 8
|
||||||
|
}
|
||||||
@ -1,12 +1,23 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
sidebar_label: Config
|
||||||
|
---
|
||||||
# Viewer: Configuration
|
# Viewer: Configuration
|
||||||
|
|
||||||
|
The OHIF Viewing Platform strives to be highly configurable and extensible. This
|
||||||
|
makes it easier for our community members to keep their "secret sauce" private,
|
||||||
|
and incentives contributions back to the platform. The `@ohif/viewer` project
|
||||||
|
of the platform is the lynchpin that combines everything to create our
|
||||||
|
application.
|
||||||
|
|
||||||
|
|
||||||
We maintain a number of common viewer application configurations at
|
We maintain a number of common viewer application configurations at
|
||||||
[`<root>/platform/viewer/public/configs`][config-dir].
|
[`<root>/platform/viewer/public/configs`][config-dir].
|
||||||
|
|
||||||
You can take a look at how to use different configs in the [Environment Variables](../configuring/index.md#environment-variables)
|
You can take a look at how to use different configs in the [Environment Variables](../configuring/index.md#environment-variables)
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js title="<root>/platform/viewer/public/configs"
|
||||||
window.config = {
|
window.config = {
|
||||||
routerBasename: '/',
|
routerBasename: '/',
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
sidebar_label: Environment Variables
|
||||||
|
---
|
||||||
# Environment Variables
|
# Environment Variables
|
||||||
|
|
||||||
There are a number of environment variables we use at build time to influence the output application's behavior.
|
There are a number of environment variables we use at build time to influence the output application's behavior.
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
# Hotkeys
|
|
||||||
|
|
||||||
...
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
# Viewer
|
|
||||||
|
|
||||||
The OHIF Viewing Platform strives to be highly configurable and extensible. This
|
|
||||||
makes it easier for our community members to keep their "secret sauce" private,
|
|
||||||
and incentives contributions back to the platform. The `@ohif/viewer` project
|
|
||||||
of the platform is the lynchpin that combines everything to create our
|
|
||||||
application.
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 4
|
||||||
|
sidebar_label: Internationalization
|
||||||
|
---
|
||||||
# Viewer: Internationalization
|
# Viewer: Internationalization
|
||||||
|
|
||||||
OHIF supports internationalization using [i18next](https://www.i18next.com/)
|
OHIF supports internationalization using [i18next](https://www.i18next.com/)
|
||||||
@ -102,7 +106,7 @@ all.
|
|||||||
But, if you need to use it completely outside of OHIF viewer, you can set the
|
But, if you need to use it completely outside of OHIF viewer, you can set the
|
||||||
I18nextProvider this way:
|
I18nextProvider this way:
|
||||||
|
|
||||||
```js
|
```jsx
|
||||||
import i18n from '@ohif/i18n';
|
import i18n from '@ohif/i18n';
|
||||||
import { I18nextProvider } from 'react-i18next';
|
import { I18nextProvider } from 'react-i18next';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
@ -132,7 +136,7 @@ console.log(T('$t(Common:Play) my translated text'));
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Main Concepts While Translating
|
## Main Concepts While Translating
|
||||||
|
|
||||||
## Namespaces
|
## Namespaces
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 2
|
||||||
|
sidebar_label: Theming
|
||||||
|
---
|
||||||
# Viewer: Theming
|
# Viewer: Theming
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -45,13 +45,13 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
|||||||
|
|
||||||
/** @type {import('@docusaurus/types').DocusaurusConfig} */
|
/** @type {import('@docusaurus/types').DocusaurusConfig} */
|
||||||
(module.exports = {
|
(module.exports = {
|
||||||
title: 'Docusaurus',
|
title: 'OHIF',
|
||||||
tagline: 'Build optimized websites quickly, focus on your content',
|
tagline: 'Build optimized websites quickly, focus on your content',
|
||||||
organizationName: 'facebook',
|
organizationName: 'facebook',
|
||||||
projectName: 'docusaurus',
|
projectName: 'OHIF',
|
||||||
baseUrl,
|
baseUrl,
|
||||||
baseUrlIssueBanner: true,
|
baseUrlIssueBanner: true,
|
||||||
url: 'https://docusaurus.io',
|
url: 'https://ohif.org',
|
||||||
i18n: {
|
i18n: {
|
||||||
defaultLocale: 'en',
|
defaultLocale: 'en',
|
||||||
locales: isDeployPreview
|
locales: isDeployPreview
|
||||||
|
|||||||
@ -8,7 +8,12 @@ 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
|
add a powerful medical imaging viewer to an existing web page using only a few
|
||||||
include tags. Here's how it works:
|
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
|
1. Create a new web page or template that includes the following external
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|||||||
@ -61,7 +61,6 @@ CORS][understanding-cors]
|
|||||||
|
|
||||||
This setup allows us to create a setup similar to the one pictured below:
|
This setup allows us to create a setup similar to the one pictured below:
|
||||||
|
|
||||||
<!-- {% include "./../_nginx-image-archive-diagram.md" %} -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user