TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working docs v2 before versioning

Browse Source
This commit is contained in:
Alireza committed 2021-06-15 19:11:09 -04:00
1 parent 4971937171
commit ae18a92ee5
58 files changed
+434 -312
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/docs/docs/architecture/index.md → platform/docs/docs/Architecture.md
+11 -13
View File
@@ -1,3 +1,8 @@
---
sidebar_position: 5
title: Architecture
---
# Architecture # Architecture
Looking to extend your instance of the OHIF Viewer? Want learn how to reuse _a Looking to extend your instance of the OHIF Viewer? Want learn how to reuse _a
@@ -10,13 +15,7 @@ allows our code to be used in more ways, it also increases complexity. Below, we
aim to demistify that complexity by providing insight into how our Viewer is aim to demistify that complexity by providing insight into how our Viewer is
architected, and the role each of it's dependent libraries plays. architected, and the role each of it's dependent libraries plays.
- [Overview](#overview)
- [Business Logic](#business-logic)
- [Component Library](#react-component-library)
- [Extensions & Configuration](#extensions--configuration)
- [Common Questions](#common-questions)
## Overview
The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a
[`monorepo`][monorepo]. This means that this repository, instead of containing a [`monorepo`][monorepo]. This means that this repository, instead of containing a
@@ -53,9 +52,8 @@ The `extensions` directory contains many packages that can be registered with
`@ohif/core`'s `ExtensionManager` to expand an application's supported features `@ohif/core`'s `ExtensionManager` to expand an application's supported features
and functionality. and functionality.
![Architecture Diagram](../assets/img/architecture-diagram.png) ![Architecture Diagram](./assets/img/architecture-diagram.png)
<!-- <center><i>architecture diagram</i></center> -->
<center><i>architecture diagram</i></center>
This diagram is a conceptual illustration of how the Viewer is architected. This diagram is a conceptual illustration of how the Viewer is architected.
@@ -78,7 +76,7 @@ features common to Web-based medical imaging viewers. For example:
- Hanging Protocols - Hanging Protocols
- Managing a study's measurements - Managing a study's measurements
- Managing a study's DICOM metadata - Managing a study's DICOM metadata
- [A flexible pattern for extensions](../extensions/index.md) - [A flexible pattern for extensions](./extensions/index.md)
- And many others - And many others
It does this while remaining decoupled from any particular view library or It does this while remaining decoupled from any particular view library or
@@ -112,16 +110,16 @@ the viewer. Some common use cases include:
- Adding surgical templating tools and reports - Adding surgical templating tools and reports
- and many others - and many others
We expose common integration points via [extensions](../extensions/index.md) to We expose common integration points via [extensions](./extensions/index.md) to
make this possible. The viewer and many of our own extensions also offer make this possible. The viewer and many of our own extensions also offer
[configuration][configuration]. For a list of extensions maintained by OHIF, [configuration][configuration]. 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).
If you find yourself thinking "I wish the Viewer could do X", and you can't If you find yourself thinking "I wish the Viewer could do X", and you can't
accomplish it with an extension today, create a GitHub issue! We're actively accomplish it with an extension today, create a GitHub issue! We're actively
looking for ways to improve our extensibility ^\_^ looking for ways to improve our extensibility ^\_^
[Click here to read more about extensions!](../extensions/index.md) [Click here to read more about extensions!](./extensions/index.md)
## Common Questions ## Common Questions
platform/docs/docs/README.md
+23 -6
View File
@@ -1,10 +1,11 @@
--- ---
id: OHIF Documentation id: Introduction
slug: / slug: /
sidebar_position: 1 sidebar_position: 1
--- ---
<div class='row'>
<!-- <div class='row'>
<div class='column' style='text-align: right; padding: 0 20px'> <div class='column' style='text-align: right; padding: 0 20px'>
<strong>Looking for a Live Demo?</strong> <strong>Looking for a Live Demo?</strong>
<a href="http://viewer.ohif.org/">Preview The OHIF Viewer</a> <a href="http://viewer.ohif.org/">Preview The OHIF Viewer</a>
@@ -14,15 +15,31 @@ sidebar_position: 1
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/> <img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a> </a>
</div> </div>
</div> -->
<div>
<strong>Looking for a Live Demo?</strong>
</div> </div>
<!-- <a href="https://www.netlify.com"> -->
<div className="text--center">
<a style={{marginRight:'10px'}} href="http://viewer.ohif.org/">Preview The OHIF Viewer</a>
<a href="https://www.netlify.com"/>
<img style={{width:'70px'}} src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" />
</div>
<!--
<img className={{width:'50px'}} src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a> -->
> ATTENTION! You are looking at the docs for the `React` version of the OHIF > ATTENTION! You are looking at the docs for the `React` version of the OHIF
> Viewer. If you're looking for the `Meteor` version's documentation (now > Viewer. If you're looking for the `Meteor` version's documentation (now
> deprecated), select it's version from the dropdown box in the top left corner > deprecated), select it's version from the dropdown box in the top right 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
Archives that support [DicomWeb][dicom-web], and offers support for mapping to Archives that support [DicomWeb][dicom-web], and offers support for mapping to
@@ -31,7 +48,7 @@ annotating, and reporting on DICOM images in 2D (slices) and 3D (volumes).
![OHIF Viewer Screenshot](./assets/img/viewer.png) ![OHIF Viewer Screenshot](./assets/img/viewer.png)
<center><i>The <strong>OHIF Viewer</strong>: A general purpose DICOM Viewer (<a href="http://viewer.ohif.org/">Live Demo</a>)</center> <center>The <strong>OHIF Viewer</strong>: A general purpose DICOM Viewer (<a href="http://viewer.ohif.org/">Live Demo</a>)</center>
The Open Health Imaging Foundation intends to provide a simple general purpose The Open Health Imaging Foundation intends to provide a simple general purpose
DICOM Viewer which can be easily extended for specific uses. If you find DICOM Viewer which can be easily extended for specific uses. If you find
platform/docs/docs/configuring/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Configuring",
"position": 4
}
platform/docs/docs/configuring/data-source.md
+5 -3
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 2
---
# Data Source # Data Source
After following the steps outlined in After following the steps outlined in
@@ -107,11 +110,10 @@ to `Orthanc`. This allows us to bypass CORS issues that normally occur when
requesting resources that live at a different domain. requesting resources that live at a different domain.
The `APP_CONFIG` value tells our app which file to load on to `window.config`. The `APP_CONFIG` value tells our app which file to load on to `window.config`.
By default, our app uses the file at Here is what that
`<project-root>/platform/viewer/public/config/default.js`. Here is what that
configuration looks like: configuration looks like:
```js ```js title="<project-root>/platform/viewer/public/config/default.js"
window.config = { window.config = {
routerBasename: '/', routerBasename: '/',
servers: { servers: {
platform/docs/docs/configuring/index.md
+5 -7
View File
@@ -1,15 +1,14 @@
---
sidebar_position: 1
---
# Configuration # Configuration
> This step assumes you have an imaging archive. If you need assistance setting > This step assumes you have an imaging archive. If you need assistance setting
> one up, check out the [`Data Source` Guide](./data-source.md) or a deployment > one up, check out the [`Data Source` Guide](./data-source.md) or a deployment
> recipe that contains an open Image Archive > recipe that contains an open Image Archive
- [Overview](#overview)
- [Configuration Files](#configuration-files)
- [Environment Variables](#environment-variables)
- [How do I configure my project?](#how-do-i-configure-my-project)
## Overview
### Configuration Files ### Configuration Files
@@ -45,9 +44,8 @@ alternative data source (or even specify different default hotkeys).
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: '/',
servers: { servers: {
platform/docs/docs/deployment/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Deployment",
"position": 8
}
platform/docs/docs/deployment/_embedded-viewer-diagram.md
-4
View File
@@ -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>
platform/docs/docs/deployment/_nginx-image-archive-diagram.md
-4
View File
@@ -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>
platform/docs/docs/deployment/_user-account-control-flow-diagram.md
-4
View File
@@ -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>
platform/docs/docs/deployment/index.md
+7 -3
View File
@@ -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
@@ -7,7 +11,6 @@ either case, you will need to configure your instance of the Viewer so that it
can connect to your data source (the database or PACS that provides the data can connect to your data source (the database or PACS that provides the data
your Viewer will display). your Viewer will display).
## Overview
Our goal is to make deployment as simple and painless as possible; however, Our goal is to make deployment as simple and painless as possible; however,
there is an inherent amount of complexity in configuring and deploying web there is an inherent amount of complexity in configuring and deploying web
@@ -26,7 +29,8 @@ include tags.
- Read more about it here: [Embedded Viewer](./recipes/embedded-viewer.md) - Read more about it here: [Embedded Viewer](./recipes/embedded-viewer.md)
- And check out our [live demo on CodeSandbox][code-sandbox] - And check out our [live demo on CodeSandbox][code-sandbox]
{% include "./_embedded-viewer-diagram.md" %} ![embeddedViewer](../assets/img/embedded-viewer-diagram.png)
### Stand-alone Viewer ### Stand-alone Viewer
@@ -144,7 +148,7 @@ The returned JSON object must contain a single root object with a 'studies' arra
*Sample JSON format:* *Sample JSON format:*
```JSON ```json
{ {
"studies": [ "studies": [
{ {
platform/docs/docs/deployment/recipes/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Recipes",
"position": 2
}
platform/docs/docs/deployment/recipes/build-for-production.md
+5 -2
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 2
---
# Build for Production # Build for Production
> If you've already followed the > If you've already followed the
@@ -33,7 +36,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
@@ -100,7 +103,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
platform/docs/docs/deployment/recipes/embedded-viewer.md
+4 -1
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 1
---
# Embedded Viewer # Embedded Viewer
The quickest and easiest way to get the OHIF Viewer up and running is to embed The quickest and easiest way to get the OHIF Viewer up and running is to embed
@@ -127,7 +130,7 @@ globally defined styles/scripts.
> react-dom and react conflicts. What can we do? > react-dom and react conflicts. What can we do?
If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows: If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows:
``` ```jsx
import { installViewer } from '@ohif/viewer' import { installViewer } from '@ohif/viewer'
const ohifViewerConfig = window.config // or set it here const ohifViewerConfig = window.config // or set it here
platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md → platform/docs/docs/deployment/recipes/google-cloud-healthcare.md
+4
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 6
---
# Google Cloud Healthcare # Google Cloud Healthcare
> The [Google Cloud Healthcare API](https://cloud.google.com/healthcare/) is a > The [Google Cloud Healthcare API](https://cloud.google.com/healthcare/) is a
platform/docs/docs/deployment/recipes/nginx--image-archive.md
+6 -1
View File
@@ -1,3 +1,6 @@
---
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
@@ -58,7 +61,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" %} <!-- {% include "./../_nginx-image-archive-diagram.md" %} -->
![nginX](../../assets/img/nginx-image-archive.png)
- 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
platform/docs/docs/deployment/recipes/static-assets.md
+14 -3
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 3
sidebar_label: Assets
---
# 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
@@ -25,9 +29,16 @@ _Easy_
_Advanced_ _Advanced_
- [AWS S3 + Cloudfront](#aws-s3--cloudfront) - [Deploy Static Assets](#deploy-static-assets)
- [GCP + Cloudflare](#gcp--cloudflare) - [Drag-n-drop](#drag-n-drop)
- [Azure](#azure) - [Netlify: Drop](#netlify-drop)
- [Easy](#easy)
- [Surge.sh](#surgesh)
- [GitHub Pages](#github-pages)
- [Advanced](#advanced)
- [AWS S3 + Cloudfront](#aws-s3--cloudfront)
- [GCP + Cloudflare](#gcp--cloudflare)
- [Azure](#azure)
## Drag-n-drop ## Drag-n-drop
platform/docs/docs/deployment/recipes/user-account-control.md
+6 -1
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 5
---
# User Account Control # User Account Control
> 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
@@ -32,7 +35,9 @@ applications and services with little to no code. We improve upon our
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 "./../_user-account-control-flow-diagram.md" %} ![userControlFlow](../../assets/img/user-access-control-request-flow.png)
- 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
platform/docs/docs/development/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Development",
"position": 3
}
platform/docs/docs/development/continous-integration.md
+24 -8
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 3
title: 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,15 @@ 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;"> <!-- <div style="text-align: center;">
<a href="/assets/img/WORKFLOW_PR_CHECKS.png"> <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;" /> <img src="/assets/img/WORKFLOW_PR_CHECKS.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Workflow diagram for PR_CHECKS</i></div> <div><i>Workflow diagram for PR_CHECKS</i></div>
</div> </div> -->
![PR_CHECKS](../assets/img/WORKFLOW_PR_CHECKS.png)
### Workflow: PR_OPTIONAL_DOCKER_PUBLISH ### Workflow: PR_OPTIONAL_DOCKER_PUBLISH
@@ -38,12 +45,16 @@ 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;"> <!-- <div style="text-align: center;">
<a href="/assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png"> <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;" /> <img src="/assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Workflow diagram for PR_WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH</i></div> <div><i>Workflow diagram for PR_WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH</i></div>
</div> </div> -->
![publish](../assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png)
> 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 +67,14 @@ 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;"> <!-- <div style="text-align: center;">
<a href="/assets/img/WORKFLOW_DEPLOY.png"> <a href="/assets/img/WORKFLOW_DEPLOY.png">
<img src="/assets/img/WORKFLOW_DEPLOY.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/WORKFLOW_DEPLOY.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Workflow diagram for WORKFLOW_DEPLOY</i></div> <div><i>Workflow diagram for WORKFLOW_DEPLOY</i></div>
</div> </div> -->
![deploy](../assets/img/WORKFLOW_DEPLOY.png)
| Environment | Description | URL | | Environment | Description | URL |
| ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------- | | ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------- |
@@ -82,12 +95,15 @@ 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;"> <!-- <div style="text-align: center;">
<a href="/assets/img/WORKFLOW_RELEASE.png"> <a href="/assets/img/WORKFLOW_RELEASE.png">
<img src="/assets/img/WORKFLOW_RELEASE.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/WORKFLOW_RELEASE.png" alt="workflow diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Workflow diagram for WORKFLOW_RELEASE</i></div> <div><i>Workflow diagram for WORKFLOW_RELEASE</i></div>
</div> </div> -->
![release](../assets/img/WORKFLOW_RELEASE.png)
### HOTFIX ### HOTFIX
platform/docs/docs/development/contributing.md
+12 -12
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 2
title: Contributing
---
# Contributing # Contributing
## How can I help? ## How can I help?
@@ -7,8 +11,8 @@ like to discuss the changes you intend to make to clarify where or how they
should be implemented, please don't hesitate to create a new issue. At a should be implemented, please don't hesitate to create a new issue. At a
minimum, you may want to read the following documentation: minimum, you may want to read the following documentation:
- [Getting Started](/development/getting-started.md) - [Getting Started](./getting-started.md)
- [Architecture](/architecture/index.md) - [Architecture](../architecture/index.md)
Pull requests that are: Pull requests that are:
@@ -34,8 +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
@@ -55,12 +58,10 @@ 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"> ![example of linked cornerstone-tools package](../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:
@@ -72,8 +73,7 @@ If you wish to stop using your local package, run the following commands in the
On your local file system: On your local file system:
```bash ```bash title="/my-projects/"
# code/my-projects/
. .
├── ohif/react-vtkjs-viewport ├── ohif/react-vtkjs-viewport
└── ohif/viewers └── ohif/viewers
platform/docs/docs/development/getting-started.md
+10 -4
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 1
title: Getting Started
---
# Getting Started # Getting Started
## Setup ## Setup
@@ -69,10 +73,12 @@ You should see the following output:
<center>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/547952862?badge=0&amp;autopause=0&amp;player_id=0&amp;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 (v2)"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
<i>Our app, hosted by the development server</i> <iframe src="https://player.vimeo.com/video/547952862?badge=0&amp;autopause=0&amp;player_id=0&amp;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>
</center> </div>
### Building for Production ### Building for Production
platform/docs/docs/development/testing.md
+5 -1
View File
@@ -1,4 +1,8 @@
# Contributing: Tests ---
sidebar_position: 4
title: Testing
---
# Tests
> 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
> philosiphy. See something you want to discuss or think should be changed? Open > philosiphy. See something you want to discuss or think should be changed? Open
platform/docs/docs/extensions/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Extensions",
"position": 6
}
platform/docs/docs/extensions/_maintained-extensions-table.md
-75
View File
@@ -1,75 +0,0 @@
<table>
<thead>
<tr>
<th>Extension</th>
<th>Description</th>
<th>Modules</th>
</tr>
</thead>
<tbody>
<!-- CORNERSTONE.js -->
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-cornerstone">
Cornerstone
</a>
</td>
<td>
A viewport powered by <code>cornerstone.js</code>. Adds support for 2D DICOM rendering and manipulation, as well as support for the tools features in <a href="https://tools.cornerstonejs.org/examples/"><code>cornerstone-tools</code></a>. Also adds "CINE Dialog" to the Toolbar.
</td>
<td>Viewport, Toolbar</td>
</tr>
<!-- VTK.js -->
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-vtk">
VTK.js
</a>
</td>
<td>
A viewport powered by <code>vtk.js</code>. Adds support for volume renderings and advanced features like MPR. Also adds "3D Rotate" to the Toolbar.
</td>
<td>Viewport, Toolbar</td>
</tr>
<!-- dicom-html -->
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-html">DICOM HTML</a>
</td>
<td>
Renders text and HTML content for <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js#L4-L12">specific SopClassUIDs</a>.
</td>
<td>Viewport, SopClassHandler</td>
</tr>
<!-- dicom-pdf -->
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
</td>
<td>
Renders PDFs for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js#L4-L6">specific SopClassUID</a>.
</td>
<td>Viewport, SopClassHandler</td>
</tr>
<!-- dicom-microscopy -->
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-microscopy">DICOM Microscopy</a>
</td>
<td>
Renders Microscopy images for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-microscopy/src/DicomMicroscopySopClassHandler.js#L5-L7">specific SopClassUID</a>.
</td>
<td>Viewport, SopClassHandler</td>
</tr>
<!-- dicom-segmentation -->
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-segmentation">DICOM Segmentation</a>
</td>
<td>
Renders segmentation images for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-segmentation/src/OHIFDicomSegSopClassHandler.js#L5-L7">specific SopClassUID</a>.
</td>
<td>Panel, Toolbar</td>
</tr>
</tbody>
</table>
platform/docs/docs/extensions/index.md
+80 -16
View File
@@ -1,29 +1,25 @@
# Extensions ---
sidebar_position: 1
sidebar_label: Overview
---
# Overview
- [Overview](#overview)
- [Concepts](#concepts)
- [Extension Skeleton](#extension-skeleton)
- [Registering an Extension](#registering-an-extension)
- [Lifecylce Hooks](#lifecycle-hooks)
- [Modules](#modules)
- [Contexts](#contexts)
- [Consuming Extensions](#consuming-extensions)
- [Extension Manager](#extensionmanager)
- [Maintained Extensions](#maintained-extensions)
## Overview
We use extensions to help us isolate and package groups of related features. We use extensions to help us isolate and package groups of related features.
Extensions provide functionality, ui components, and new behaviors. Ideally, Extensions provide functionality, ui components, and new behaviors. Ideally,
they're built in a way that allows them to extend entirely different they're built in a way that allows them to extend entirely different
implementations of the `@ohif/viewer` project. implementations of the `@ohif/viewer` project.
<div style="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/extensions-diagram.png"> <a href="/assets/img/extensions-diagram.png">
<img src="/assets/img/extensions-diagram.png" alt="Extensions Diagram" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/extensions-diagram.png" alt="Extensions Diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Diagram showing how extensions are configured and accessed.</i></div> <div><i>Diagram showing how extensions are configured and accessed.</i></div>
</div> </div> -->
![extensions](../assets/img/extensions-diagram.png)
The `@ohif/viewer`'s application level configuration gives us the ability to add The `@ohif/viewer`'s application level configuration gives us the ability to add
and configure extensions. When the application starts, extensions are registered and configure extensions. When the application starts, extensions are registered
@@ -144,7 +140,7 @@ differently.
| [Toolbar](./modules/toolbar.md) | Adds buttons or custom components to the toolbar | Toolbar button, nested buttons, custom | | [Toolbar](./modules/toolbar.md) | Adds buttons or custom components to the toolbar | Toolbar button, nested buttons, custom |
| [Viewport](./modules/viewport.md) | Adds a component responsible for rendering a "DisplaySet" | `<CornerstoneViewport />`, `<DicomPdfViewport />` | | [Viewport](./modules/viewport.md) | Adds a component responsible for rendering a "DisplaySet" | `<CornerstoneViewport />`, `<DicomPdfViewport />` |
<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>
### Contexts ### Contexts
@@ -227,7 +223,75 @@ 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.
{% include "./_maintained-extensions-table.md" %} <table>
<thead>
<tr>
<th>Extension</th>
<th>Description</th>
<th>Modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-cornerstone">
Cornerstone
</a>
</td>
<td>
A viewport powered by <code>cornerstone.js</code>. Adds support for 2D DICOM rendering and manipulation, as well as support for the tools features in <a href="https://tools.cornerstonejs.org/examples/"><code>cornerstone-tools</code></a>. Also adds "CINE Dialog" to the Toolbar.
</td>
<td>Viewport, Toolbar</td>
</tr>
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-vtk">
VTK.js
</a>
</td>
<td>
A viewport powered by <code>vtk.js</code>. Adds support for volume renderings and advanced features like MPR. Also adds "3D Rotate" to the Toolbar.
</td>
<td>Viewport, Toolbar</td>
</tr>
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-html">DICOM HTML</a>
</td>
<td>
Renders text and HTML content for <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js#L4-L12">specific SopClassUIDs</a>.
</td>
<td>Viewport, SopClassHandler</td>
</tr>
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
</td>
<td>
Renders PDFs for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js#L4-L6">specific SopClassUID</a>.
</td>
<td>Viewport, SopClassHandler</td>
</tr>
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-microscopy">DICOM Microscopy</a>
</td>
<td>
Renders Microscopy images for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-microscopy/src/DicomMicroscopySopClassHandler.js#L5-L7">specific SopClassUID</a>.
</td>
<td>Viewport, SopClassHandler</td>
</tr>
<tr>
<td>
<a href="https://www.npmjs.com/package/@ohif/extension-dicom-segmentation">DICOM Segmentation</a>
</td>
<td>
Renders segmentation images for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-segmentation/src/OHIFDicomSegSopClassHandler.js#L5-L7">specific SopClassUID</a>.
</td>
<td>Panel, Toolbar</td>
</tr>
</tbody>
</table>
<!-- <!--
LINKS LINKS
platform/docs/docs/extensions/lifecycle/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "LifeCycle",
"position": 2
}
platform/docs/docs/extensions/lifecycle/pre-registration.md
+4
View File
@@ -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
platform/docs/docs/extensions/modules/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Modules",
"position": 3
}
platform/docs/docs/extensions/modules/commands.md
+4 -6
View File
@@ -1,11 +1,9 @@
---
sidebar_position: 1
sidebar_label: Commands
---
# Module: Commands # Module: Commands
- [Overview](#overview)
- [Command Definitions](#command-definitions)
- [Commands Manager](#commands-manager)
- [Instantiating](#instatiating)
- [Public API](#public-api)
- [Contexts](#contexts)
## Overview ## Overview
platform/docs/docs/extensions/modules/panel.md
+4
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 2
sidebar_label: Panel
---
# Module: Panel # Module: Panel
An extension can register a Panel Module by defining a `getPanelModule` method. An extension can register a Panel Module by defining a `getPanelModule` method.
platform/docs/docs/extensions/modules/sop-class-handler.md
+4
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 3
sidebar_label: SOP Class Handler
---
# Module: SOP Class Handler # Module: SOP Class Handler
An extension can register a [SOP Class][sop-class-link] Handler Module by An extension can register a [SOP Class][sop-class-link] Handler Module by
platform/docs/docs/extensions/modules/toolbar.md
+9 -3
View File
@@ -1,11 +1,17 @@
---
sidebar_position: 4
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. This module is commonly used to define: method. This module is commonly used to define:
- [Toolbar buttons](#button-definitions) - [Module: Toolbar](#module-toolbar)
- [Nested toolbar menus](#nested-toolbar-menus) - [Example Toolbar Module](#example-toolbar-module)
- [Custom components](#custom-components) - [Button Definitions](#button-definitions)
- [Nested Toolbar Menus](#nested-toolbar-menus)
- [Custom Components](#custom-components)
![Toolbar Extension](../../assets/img/extensions-toolbar.gif) ![Toolbar Extension](../../assets/img/extensions-toolbar.gif)
platform/docs/docs/extensions/modules/viewport.md
+4
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 5
sidebar_label: Viewport
---
# Module: Viewport # Module: Viewport
An extension can register a Viewport Module by defining a `getViewportModule` An extension can register a Viewport Module by defining a `getViewportModule`
platform/docs/docs/faq/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "FAQ",
"position": 10
}
platform/docs/docs/faq/browser-support.md
+3
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 3
---
# 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
platform/docs/docs/faq/index.md
+5
View File
@@ -1,3 +1,8 @@
---
sidebar_position: 1
sidebar_label: Overview
---
# Frequently Asked Questions # Frequently Asked Questions
## Index ## Index
platform/docs/docs/faq/pwa-vs-packaged.md
+3
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 4
---
# 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
platform/docs/docs/faq/scope-of-project.md
+3
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 2
---
# 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
platform/docs/docs/our-process.md
+4 -9
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 2
title: Our process
---
# 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,15 +12,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)
_Include issue lifecycle diagram_
## 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,
platform/docs/docs/quick-start.md
-28
View File
@@ -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
platform/docs/docs/services/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Services",
"position": 7
}
platform/docs/docs/services/default/index.md → platform/docs/docs/services/default.md
+11 -4
View File
@@ -1,19 +1,26 @@
---
sidebar_position: 2
sidebar_label: Default Services
---
# Services (default) # Services (default)
- [Overview](#overview) - [Services (default)](#services-default)
- [Example](#example) - [Overview](#overview)
- [Example](#example)
## Overview ## Overview
Services are a work in progress. As we are still in the progress of creating a Services are a work in progress. As we are still in the progress of creating a
non-ui maintained service, this usage may change. non-ui maintained service, this usage may change.
<div style="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/services.png"> <a href="/assets/img/services.png">
<img src="/assets/img/services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Diagram showing relationship between React Context and UI Service</i></div> <div><i>Diagram showing relationship between React Context and UI Service</i></div>
</div> </div> -->
![contextAndUI](..//assets/img/services.png)
## Example ## Example
platform/docs/docs/services/default/measurements.md
-15
View File
@@ -1,15 +0,0 @@
# Service: Measurements
...
## Usage
## How to define a Measurement tool
## How to validate Measurements
## Data exchange concepts
## Longitudinal Measurements
## Timepoints
platform/docs/docs/services/index.md
+4 -6
View File
@@ -1,11 +1,9 @@
---
sidebar_position: 1
sidebar_label: Overview
---
# Services Overview # Services Overview
- [Overview](#overview)
- [Kinds of Services](#kinds-of-services)
- [Services (default)](#services-default)
- [UI Services](#ui-services)
- [Related Patterns](#related-patterns)
## Overview ## Overview
Services are a beefier version of [commands][commands]. They provide a set of Services are a beefier version of [commands][commands]. They provide a set of
platform/docs/docs/services/ui/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "UI Services",
"position": 3
}
platform/docs/docs/services/ui/index.md
+16 -11
View File
@@ -1,22 +1,24 @@
---
sidebar_position: 1
sidebar_label: Overview
---
# UI Services # UI Services
- [Overview](#overview)
- [Example](#example)
- [Tips & Tricks](#tips--tricks)
- [Maintained Services](#maintained-services)
## Overview
A typical web application will have components and state for common UI like A typical web application will have components and state for common UI like
modals, notifications, dialogs, etc. A UI service makes it possible to leverage modals, notifications, dialogs, etc. A UI service makes it possible to leverage
these components from an extension. these components from an extension.
<div style="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/ui-services.png"> <a href="/assets/img/ui-services.png">
<img src="/assets/img/ui-services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/ui-services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>Diagram showing relationship between React Context and UI Service</i></div> <div><i>Diagram showing relationship between React Context and UI Service</i></div>
</div> </div> -->
![reactUI](../../assets/img/ui-services.png)
<!-- <span style={{"textAlign": 'center', 'fontStyle': 'italic', 'paddingBottom':'10px'}}>Diagram showing relationship between React Context and UI Service</span> -->
In `@ohif/core`, we have a collection of service factories. We select one we In `@ohif/core`, we have a collection of service factories. We select one we
would like our application to support, create an instance of it, and pass that would like our application to support, create an instance of it, and pass that
@@ -63,12 +65,15 @@ if (UINotificationService) {
} }
``` ```
<div style="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/notification-example.gif"> <a href="/assets/img/notification-example.gif">
<img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>GIF showing successful call of UINotificationService from an extension.</i></div> <div><i>GIF showing successful call of UINotificationService from an extension.</i></div>
</div> </div> -->
![UINotificationService](../../assets/img/notification-example.gif)
<span style={{"textAlign": 'center', 'fontStyle': 'italic'}}>GIF showing successful call of UINotificationService from an extension.</span>
## Tips & Tricks ## Tips & Tricks
platform/docs/docs/services/ui/ui-dialog-service.md
+6 -2
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 2
---
# 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
@@ -10,13 +13,14 @@ streamlined focus. They can be helpful 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="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/dialog-example.gif"> <a href="/assets/img/dialog-example.gif">
<img src="/assets/img/dialog-example.gif" alt="UI Dialog Service Example" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/dialog-example.gif" alt="UI Dialog Service Example" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>GIF showing successful call of UIDialogService from an extension.</i></div> <div><i>GIF showing successful call of UIDialogService from an extension.</i></div>
</div> </div> -->
![UIDialogService](../../assets/img/dialog-example.gif)
## 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
platform/docs/docs/services/ui/ui-modal-service.md
+7 -2
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 3
---
# 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,12 +14,14 @@ 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="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/modal-example.gif"> <a href="/assets/img/modal-example.gif">
<img src="/assets/img/modal-example.gif" alt="UI Modal Service Example" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/modal-example.gif" alt="UI Modal Service Example" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>GIF showing successful call of UIModalService from an extension.</i></div> <div><i>GIF showing successful call of UIModalService from an extension.</i></div>
</div> </div> -->
![UIModalService](../../assets/img/modal-example.gif)
## Interface ## Interface
platform/docs/docs/services/ui/ui-notification-service.md
+6 -2
View File
@@ -1,3 +1,6 @@
---
sidebar_position: 4
---
# 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,13 +15,14 @@ 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="text-align: center;"> <!-- <div style="text-align: center;">
<a href="/assets/img/notification-example.gif"> <a href="/assets/img/notification-example.gif">
<img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" /> <img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" />
</a> </a>
<div><i>GIF showing successful call of UINotificationService from an extension.</i></div> <div><i>GIF showing successful call of UINotificationService from an extension.</i></div>
</div> </div> -->
![UINotificationService](../../assets/img/notification-example.gif)
## 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
platform/docs/docs/viewer/_category_.json
+4
View File
@@ -0,0 +1,4 @@
{
"label": "Viewer",
"position": 5
}
platform/docs/docs/viewer/configuration.md
+12
View File
@@ -1,5 +1,17 @@
---
sidebar_position: 1
sidebar_label: Configuration
---
# 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 incentivises 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]. How these values are [`<root>/platform/viewer/public/configs`][config-dir]. How these values are
passed to the viewer depend on how it's deployed, but the two most common paths passed to the viewer depend on how it's deployed, but the two most common paths
platform/docs/docs/viewer/environment-variables.md
+4
View File
@@ -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.
platform/docs/docs/viewer/hotkeys.md
-3
View File
@@ -1,3 +0,0 @@
# Hotkeys
...
platform/docs/docs/viewer/index.md
-9
View File
@@ -1,9 +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 incentivises contributions back to the platform. The `@ohif/viewer` project
of the platform is the lynchpin that combines everything to create our
application.
- When configuration and themeing aren't enough
platform/docs/docs/viewer/internationalization.md
+29 -20
View File
@@ -1,18 +1,27 @@
---
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/)
through the npm package [@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), through the npm package [@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n),
where is the main instance of i18n containing several languages and tools. where is the main instance of i18n containing several languages and tools.
<div class='row'> <!-- <div class='row'>
<div class='column'> <div class='column'>
<p>Our translation management is powered by <a href="https://locize.com/" target="_blank" rel="noopener noreferrer">Locize</a> through their generous support of open source.</p>
</div> </div>
<div class='column'> <div class='column'>
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer" style='padding: 20px'> </div>
<img src="../assets/img/locizeSponsor.svg" alt="Locize Translation Management Logo"> </div> -->
<div className="text--center">
<p>Our translation management is powered by
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer"> Locize </a>
through their generous support of open source.</p>
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer" style={{padding: '20px'}}>
<img style={{width:'70px'}} src="https://pbs.twimg.com/profile_images/909709940910120961/oyB0mX2L.jpg" alt="Locize Translation Management Logo"/>
</a> </a>
</div>
</div> </div>
## Installing ## Installing
@@ -192,21 +201,21 @@ languages tool.
You will need to export all Json files in your `index.js` file, mounting an You will need to export all Json files in your `index.js` file, mounting an
object like this: object like this:
```js ```json
{ {
en: { en: {
NameSpace: { NameSpace: {
keyWord1: 'keyWord1Translation', keyWord1: 'keyWord1Translation',
keyWord2: 'keyWord2Translation', keyWord2: 'keyWord2Translation',
keyWord3: 'keyWord3Translation', keyWord3: 'keyWord3Translation',
} }
}, },
'en-UK': { 'en-UK': {
NameSpace: { NameSpace: {
keyWord1: 'keyWord1DifferentTranslation', keyWord1: 'keyWord1DifferentTranslation',
} }
} }
} }
``` ```
Please check the `index.js` files inside locales folder for an example of this Please check the `index.js` files inside locales folder for an example of this
platform/docs/docs/viewer/themeing.md
+4
View File
@@ -1,3 +1,7 @@
---
sidebar_position: 2
sidebar_label: Themeing
---
# Viewer: Themeing # Viewer: Themeing
Themeing is currently accomplished with color variables that are defined within Themeing is currently accomplished with color variables that are defined within
platform/docs/docusaurus.config.js
+21 -21
View File
@@ -41,7 +41,7 @@ const isBootstrapPreset = process.env.DOCUSAURUS_PRESET === 'bootstrap';
// https://docusaurus-i18n-staging.netlify.app/ // https://docusaurus-i18n-staging.netlify.app/
const isI18nStaging = process.env.I18N_STAGING === 'true'; const isI18nStaging = process.env.I18N_STAGING === 'true';
const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging; // const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
/** @type {import('@docusaurus/types').DocusaurusConfig} */ /** @type {import('@docusaurus/types').DocusaurusConfig} */
(module.exports = { (module.exports = {
@@ -192,27 +192,27 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
// We want users to submit doc updates to the upstream/next version! // We want users to submit doc updates to the upstream/next version!
// Otherwise we risk losing the update on the next release. // Otherwise we risk losing the update on the next release.
const nextVersionDocsDirPath = 'docs'; const nextVersionDocsDirPath = 'docs';
return `https://github.com/facebook/docusaurus/edit/master/website/${nextVersionDocsDirPath}/${docPath}`; return `https://github.com/OHIF/Viewers/edit/master/website/${nextVersionDocsDirPath}/${docPath}`;
}, },
showLastUpdateAuthor: true, showLastUpdateAuthor: true,
showLastUpdateTime: true, showLastUpdateTime: true,
// remarkPlugins: [ // remarkPlugins: [
// [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }], // [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
// ], // ],
disableVersioning: isVersioningDisabled, // disableVersioning: isVersioningDisabled,
lastVersion: isDev ? 'current' : undefined, // lastVersion: 'current',
onlyIncludeVersions: // onlyIncludeVersions:
!isVersioningDisabled && (isDev || isDeployPreview) // !isVersioningDisabled && (isDev || isDeployPreview)
? ['current', ...versions.slice(0, 2)] // ? ['current', ...versions.slice(0, 2)]
: undefined, // : undefined,
versions: { // versions: {
current: { // current: {
// label: `${getNextBetaVersionName()} 🚧`, // // label: `${getNextBetaVersionName()} 🚧`,
// label: `2.0 🎉`, // // label: `2.0 🎉`,
label: `2.0`, // label: `2.0`,
path: `2.0`, // // path: `2.0`,
}, // },
}, // },
}, },
theme: { theme: {
customCss: [require.resolve('./src/css/custom.css')], customCss: [require.resolve('./src/css/custom.css')],
@@ -239,7 +239,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
announcementBar: { announcementBar: {
id: 'supportus', id: 'supportus',
content: content:
'⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a>! ⭐️', '⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/OHIF/Viewers">GitHub</a>! ⭐️',
}, },
*/ */
prism: { prism: {
@@ -268,7 +268,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
{ {
type: 'doc', type: 'doc',
position: 'left', position: 'left',
docId: 'OHIF Documentation', docId: 'Introduction',
label: 'Docs', label: 'Docs',
}, },
// {to: 'blog', label: 'Blog', position: 'left'}, // {to: 'blog', label: 'Blog', position: 'left'},
@@ -284,13 +284,13 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
position: 'right', position: 'right',
dropdownItemsAfter: [ dropdownItemsAfter: [
{ {
to: 'https://github.com/facebook/docusaurus/issues/3526', to: 'https://github.com/OHIF/Viewers/issues/3526',
label: 'Help Us Translate', label: 'Help Us Translate',
}, },
], ],
}, },
{ {
href: 'https://github.com/facebook/docusaurus', href: 'https://github.com/OHIF/Viewers',
position: 'right', position: 'right',
className: 'header-github-link', className: 'header-github-link',
'aria-label': 'GitHub repository', 'aria-label': 'GitHub repository',
@@ -347,7 +347,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
// }, // },
// { // {
// label: 'GitHub', // label: 'GitHub',
// href: 'https://github.com/facebook/docusaurus', // href: 'https://github.com/OHIF/Viewers',
// }, // },
// { // {
// label: 'Twitter', // label: 'Twitter',
platform/docs/versioned_docs/version-1.0/README.md
+2 -3
View File
@@ -1,12 +1,11 @@
--- ---
id: OHIF Documentation id: Introduction
slug: / slug: /
sidebar_position: 1 sidebar_position: 1
--- ---
##### Looking for your Deploy Preview? - <a onclick="function redirect() { window.location.href='/demo/'; } redirect();">Deploy Preview for Viewer</a> ##### Looking for your Deploy Preview? - <a onClick="function redirect() { window.location.href='/demo/'; } redirect();">Deploy Preview for Viewer</a>
# Introduction
The [Open Health Imaging Foundation](https://www.ohif.org) is developing an open source framework for constructing web-based medical imaging applications. The application framework is built using modern HTML / CSS / JavaScript and uses [Cornerstone](https://cornerstonejs.org/) at its core to display and manipulate medical images. It is built with Meteor, a Node.js-based full-stack JavaScript platform. The [Open Health Imaging Foundation](https://www.ohif.org) is developing an open source framework for constructing web-based medical imaging applications. The application framework is built using modern HTML / CSS / JavaScript and uses [Cornerstone](https://cornerstonejs.org/) at its core to display and manipulate medical images. It is built with Meteor, a Node.js-based full-stack JavaScript platform.