working docs v2 before versioning
This commit is contained in:
Alireza
parent
4971937171
commit
ae18a92ee5
@ -1,3 +1,8 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
title: Architecture
|
||||
---
|
||||
|
||||
# Architecture
|
||||
|
||||
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
|
||||
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
|
||||
[`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
|
||||
and functionality.
|
||||
|
||||
|
||||
|
||||
<center><i>architecture diagram</i></center>
|
||||
|
||||
<!-- <center><i>architecture diagram</i></center> -->
|
||||
|
||||
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
|
||||
- Managing a study's measurements
|
||||
- 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
|
||||
|
||||
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
|
||||
- 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
|
||||
[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
|
||||
accomplish it with an extension today, create a GitHub issue! We're actively
|
||||
looking for ways to improve our extensibility ^\_^
|
||||
|
||||
[Click here to read more about extensions!](../extensions/index.md)
|
||||
[Click here to read more about extensions!](./extensions/index.md)
|
||||
|
||||
## Common Questions
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
id: OHIF Documentation
|
||||
id: Introduction
|
||||
slug: /
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
<div class='row'>
|
||||
|
||||
<!-- <div class='row'>
|
||||
<div class='column' style='text-align: right; padding: 0 20px'>
|
||||
<strong>Looking for a Live Demo?</strong>
|
||||
<a href="http://viewer.ohif.org/">Preview The OHIF Viewer</a>
|
||||
@ -14,15 +15,31 @@ sidebar_position: 1
|
||||
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<strong>Looking for a Live Demo?</strong>
|
||||
</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
|
||||
> 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.
|
||||
|
||||
# Introduction
|
||||
|
||||
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
|
||||
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).
|
||||
|
||||
|
||||
|
||||
<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
|
||||
DICOM Viewer which can be easily extended for specific uses. If you find
|
||||
|
||||
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": 4
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
# Data Source
|
||||
|
||||
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.
|
||||
|
||||
The `APP_CONFIG` value tells our app which file to load on to `window.config`.
|
||||
By default, our app uses the file at
|
||||
`<project-root>/platform/viewer/public/config/default.js`. Here is what that
|
||||
Here is what that
|
||||
configuration looks like:
|
||||
|
||||
```js
|
||||
```js title="<project-root>/platform/viewer/public/config/default.js"
|
||||
window.config = {
|
||||
routerBasename: '/',
|
||||
servers: {
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
> 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
|
||||
> 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
|
||||
|
||||
@ -45,9 +44,8 @@ alternative data source (or even specify different default hotkeys).
|
||||
|
||||
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 = {
|
||||
routerBasename: '/',
|
||||
servers: {
|
||||
|
||||
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": 8
|
||||
}
|
||||
@ -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,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: Overview
|
||||
---
|
||||
# Deployment
|
||||
|
||||
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
|
||||
your Viewer will display).
|
||||
|
||||
## Overview
|
||||
|
||||
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
|
||||
@ -26,7 +29,8 @@ include tags.
|
||||
- Read more about it here: [Embedded Viewer](./recipes/embedded-viewer.md)
|
||||
- And check out our [live demo on CodeSandbox][code-sandbox]
|
||||
|
||||
{% include "./_embedded-viewer-diagram.md" %}
|
||||
|
||||
|
||||
|
||||
### Stand-alone Viewer
|
||||
|
||||
@ -144,7 +148,7 @@ The returned JSON object must contain a single root object with a 'studies' arra
|
||||
|
||||
|
||||
*Sample JSON format:*
|
||||
```JSON
|
||||
```json
|
||||
{
|
||||
"studies": [
|
||||
{
|
||||
|
||||
4
platform/docs/docs/deployment/recipes/_category_.json
Normal file
4
platform/docs/docs/deployment/recipes/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Recipes",
|
||||
"position": 2
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
# Build for Production
|
||||
|
||||
> If you've already followed the
|
||||
@ -33,7 +36,7 @@ _From .zip:_
|
||||
Open your terminal, and navigate to the directory containing the source files.
|
||||
Next run these commands:
|
||||
|
||||
```js
|
||||
```bash
|
||||
// If you haven't already, enable yarn workspaces
|
||||
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
|
||||
directory:
|
||||
|
||||
```js
|
||||
```bash
|
||||
// Install http-server as a globally available package
|
||||
yarn global add http-server
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
# Embedded Viewer
|
||||
|
||||
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?
|
||||
|
||||
If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows:
|
||||
```
|
||||
```jsx
|
||||
import { installViewer } from '@ohif/viewer'
|
||||
|
||||
const ohifViewerConfig = window.config // or set it here
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Google Cloud Healthcare
|
||||
|
||||
> The [Google Cloud Healthcare API](https://cloud.google.com/healthcare/) is a
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
# Nginx + Image Archive
|
||||
|
||||
> 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:
|
||||
|
||||
{% include "./../_nginx-image-archive-diagram.md" %}
|
||||
<!-- {% include "./../_nginx-image-archive-diagram.md" %} -->
|
||||
|
||||
|
||||
|
||||
- All web requests are routed through `nginx` on our `OpenResty` image
|
||||
- `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
sidebar_label: Assets
|
||||
---
|
||||
# Deploy Static Assets
|
||||
|
||||
> WARNING! All of these solutions stand-up a publicly accessible web viewer. Do
|
||||
@ -25,9 +29,16 @@ _Easy_
|
||||
|
||||
_Advanced_
|
||||
|
||||
- [AWS S3 + Cloudfront](#aws-s3--cloudfront)
|
||||
- [GCP + Cloudflare](#gcp--cloudflare)
|
||||
- [Azure](#azure)
|
||||
- [Deploy Static Assets](#deploy-static-assets)
|
||||
- [Drag-n-drop](#drag-n-drop)
|
||||
- [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
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
# User Account Control
|
||||
|
||||
> 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:
|
||||
|
||||
{% include "./../_user-account-control-flow-diagram.md" %}
|
||||
|
||||
|
||||
|
||||
|
||||
- All web requests are routed through `nginx` on our `OpenResty` image
|
||||
- `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints
|
||||
|
||||
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": 3
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
title: Continous Integration
|
||||
---
|
||||
# Continous Integration (CI)
|
||||
|
||||
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
|
||||
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">
|
||||
<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>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
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">
|
||||
<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>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> 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,
|
||||
@ -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
|
||||
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">
|
||||
<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>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
| Environment | Description | URL |
|
||||
| ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------- |
|
||||
@ -82,12 +95,15 @@ GitHub hosts the `gh-pages` branch with GitHub Pages.
|
||||
- Extension Packages: https://github.com/ohif/viewers/#extensions
|
||||
- Documentation: https://docs.ohif.org/
|
||||
|
||||
<div style="text-align: center;">
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
### HOTFIX
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
title: Contributing
|
||||
---
|
||||
# Contributing
|
||||
|
||||
## 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
|
||||
minimum, you may want to read the following documentation:
|
||||
|
||||
- [Getting Started](/development/getting-started.md)
|
||||
- [Architecture](/architecture/index.md)
|
||||
- [Getting Started](./getting-started.md)
|
||||
- [Architecture](../architecture/index.md)
|
||||
|
||||
Pull requests that are:
|
||||
|
||||
@ -34,8 +38,7 @@ dependencies:
|
||||
|
||||
On your local file system:
|
||||
|
||||
```bash
|
||||
# code/my-projects/
|
||||
```bash title="/my-projects/"
|
||||
.
|
||||
├── cornerstonejs/cornerstone-tools
|
||||
└── 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
|
||||
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
|
||||
`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:
|
||||
|
||||
```bash
|
||||
# code/my-projects/
|
||||
```bash title="/my-projects/"
|
||||
.
|
||||
├── ohif/react-vtkjs-viewport
|
||||
└── ohif/viewers
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
title: Getting Started
|
||||
---
|
||||
# Getting Started
|
||||
|
||||
## 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&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 (v2)"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
||||
<i>Our app, hosted by the development server</i>
|
||||
</center>
|
||||
|
||||
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||
<iframe src="https://player.vimeo.com/video/547952862?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
|
||||
|
||||
|
||||
@ -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
|
||||
> philosiphy. 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": 6
|
||||
}
|
||||
@ -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>
|
||||
@ -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.
|
||||
Extensions provide functionality, ui components, and new behaviors. Ideally,
|
||||
they're built in a way that allows them to extend entirely different
|
||||
implementations of the `@ohif/viewer` project.
|
||||
|
||||
<div style="text-align: center;">
|
||||
<!-- <div style="text-align: center;">
|
||||
<a href="/assets/img/extensions-diagram.png">
|
||||
<img src="/assets/img/extensions-diagram.png" alt="Extensions Diagram" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>Diagram showing how extensions are configured and accessed.</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
The `@ohif/viewer`'s application level configuration gives us the ability to add
|
||||
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 |
|
||||
| [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
|
||||
|
||||
@ -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
|
||||
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
|
||||
|
||||
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": 2
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: Pre Registration
|
||||
---
|
||||
# Lifecylce Hook: preRegistration
|
||||
|
||||
If an extension defines the `preRegistration` lifecycle hook, it is called
|
||||
|
||||
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,11 +1,9 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: Commands
|
||||
---
|
||||
# Module: Commands
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Command Definitions](#command-definitions)
|
||||
- [Commands Manager](#commands-manager)
|
||||
- [Instantiating](#instatiating)
|
||||
- [Public API](#public-api)
|
||||
- [Contexts](#contexts)
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
sidebar_label: Panel
|
||||
---
|
||||
# Module: Panel
|
||||
|
||||
An extension can register a Panel Module by defining a `getPanelModule` method.
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
sidebar_label: SOP Class Handler
|
||||
---
|
||||
# Module: SOP Class Handler
|
||||
|
||||
An extension can register a [SOP Class][sop-class-link] Handler Module by
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
sidebar_label: Toolbar
|
||||
---
|
||||
# Module: Toolbar
|
||||
|
||||
An extension can register a Toolbar Module by defining a `getToolbarModule`
|
||||
method. This module is commonly used to define:
|
||||
|
||||
- [Toolbar buttons](#button-definitions)
|
||||
- [Nested toolbar menus](#nested-toolbar-menus)
|
||||
- [Custom components](#custom-components)
|
||||
- [Module: Toolbar](#module-toolbar)
|
||||
- [Example Toolbar Module](#example-toolbar-module)
|
||||
- [Button Definitions](#button-definitions)
|
||||
- [Nested Toolbar Menus](#nested-toolbar-menus)
|
||||
- [Custom Components](#custom-components)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
sidebar_label: Viewport
|
||||
---
|
||||
# Module: Viewport
|
||||
|
||||
An extension can register a Viewport Module by defining a `getViewportModule`
|
||||
|
||||
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": 10
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
# Browser Support
|
||||
|
||||
The browsers that we support are specified in the `.browserlistrc` file located
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: Overview
|
||||
|
||||
---
|
||||
# Frequently Asked Questions
|
||||
|
||||
## Index
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
# PWA vs Packaged
|
||||
|
||||
It's important to know that the OHIF Viewer project provides two different build
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
# Scope of Project
|
||||
|
||||
The OHIF Viewer is a web based medical imaging viewer. This allows it to be used
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
title: Our process
|
||||
---
|
||||
# Our Process
|
||||
|
||||
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
|
||||
- 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
|
||||
|
||||
[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": 7
|
||||
}
|
||||
@ -1,19 +1,26 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
sidebar_label: Default Services
|
||||
---
|
||||
# Services (default)
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Example](#example)
|
||||
- [Services (default)](#services-default)
|
||||
- [Overview](#overview)
|
||||
- [Example](#example)
|
||||
|
||||
## Overview
|
||||
|
||||
Services are a work in progress. As we are still in the progress of creating a
|
||||
non-ui maintained service, this usage may change.
|
||||
|
||||
<div style="text-align: center;">
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
# Service: Measurements
|
||||
|
||||
...
|
||||
|
||||
## Usage
|
||||
|
||||
## How to define a Measurement tool
|
||||
|
||||
## How to validate Measurements
|
||||
|
||||
## Data exchange concepts
|
||||
|
||||
## Longitudinal Measurements
|
||||
|
||||
## Timepoints
|
||||
@ -1,11 +1,9 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: Overview
|
||||
---
|
||||
# Services Overview
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Kinds of Services](#kinds-of-services)
|
||||
- [Services (default)](#services-default)
|
||||
- [UI Services](#ui-services)
|
||||
- [Related Patterns](#related-patterns)
|
||||
|
||||
## Overview
|
||||
|
||||
Services are a beefier version of [commands][commands]. They provide a set of
|
||||
|
||||
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,22 +1,24 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: Overview
|
||||
---
|
||||
# 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
|
||||
modals, notifications, dialogs, etc. A UI service makes it possible to leverage
|
||||
these components from an extension.
|
||||
|
||||
<div style="text-align: center;">
|
||||
<!-- <div style="text-align: center;">
|
||||
<a href="/assets/img/ui-services.png">
|
||||
<img src="/assets/img/ui-services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>Diagram showing relationship between React Context and UI Service</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- <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
|
||||
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">
|
||||
<img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>GIF showing successful call of UINotificationService from an extension.</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<span style={{"textAlign": 'center', 'fontStyle': 'italic'}}>GIF showing successful call of UINotificationService from an extension.</span>
|
||||
|
||||
## Tips & Tricks
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
# UI Dialog Service
|
||||
|
||||
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
|
||||
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">
|
||||
<img src="/assets/img/dialog-example.gif" alt="UI Dialog Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>GIF showing successful call of UIDialogService from an extension.</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
## Interface
|
||||
|
||||
For a more detailed look on the options and return values each of these methods
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
# UI Modal Service
|
||||
|
||||
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
|
||||
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">
|
||||
<img src="/assets/img/modal-example.gif" alt="UI Modal Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>GIF showing successful call of UIModalService from an extension.</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
## Interface
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
# UI Notification Service
|
||||
|
||||
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
|
||||
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">
|
||||
<img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||
</a>
|
||||
<div><i>GIF showing successful call of UINotificationService from an extension.</i></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
## Interface
|
||||
|
||||
For a more detailed look on the options and return values each of these methods
|
||||
|
||||
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": 5
|
||||
}
|
||||
@ -1,5 +1,17 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: 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
|
||||
[`<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
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
sidebar_label: Environment Variables
|
||||
---
|
||||
# Environment Variables
|
||||
|
||||
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,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
|
||||
@ -1,18 +1,27 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
sidebar_label: Internationalization
|
||||
---
|
||||
# Viewer: Internationalization
|
||||
|
||||
OHIF supports internationalization using [i18next](https://www.i18next.com/)
|
||||
through the npm package [@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n),
|
||||
where is the main instance of i18n containing several languages and tools.
|
||||
|
||||
<div class='row'>
|
||||
<!-- <div class='row'>
|
||||
<div class='column'>
|
||||
<p>Our translation management is powered by <a href="https://locize.com/" target="_blank" rel="noopener noreferrer">Locize</a> through their generous support of open source.</p>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<a href="https://locize.com/" target="_blank" rel="noopener noreferrer" style='padding: 20px'>
|
||||
<img src="../assets/img/locizeSponsor.svg" alt="Locize Translation Management Logo">
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Installing
|
||||
@ -192,21 +201,21 @@ languages tool.
|
||||
You will need to export all Json files in your `index.js` file, mounting an
|
||||
object like this:
|
||||
|
||||
```js
|
||||
{
|
||||
en: {
|
||||
NameSpace: {
|
||||
keyWord1: 'keyWord1Translation',
|
||||
keyWord2: 'keyWord2Translation',
|
||||
keyWord3: 'keyWord3Translation',
|
||||
}
|
||||
},
|
||||
'en-UK': {
|
||||
NameSpace: {
|
||||
keyWord1: 'keyWord1DifferentTranslation',
|
||||
}
|
||||
}
|
||||
}
|
||||
```json
|
||||
{
|
||||
en: {
|
||||
NameSpace: {
|
||||
keyWord1: 'keyWord1Translation',
|
||||
keyWord2: 'keyWord2Translation',
|
||||
keyWord3: 'keyWord3Translation',
|
||||
}
|
||||
},
|
||||
'en-UK': {
|
||||
NameSpace: {
|
||||
keyWord1: 'keyWord1DifferentTranslation',
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Please check the `index.js` files inside locales folder for an example of this
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
sidebar_label: Themeing
|
||||
---
|
||||
# Viewer: Themeing
|
||||
|
||||
Themeing is currently accomplished with color variables that are defined within
|
||||
|
||||
@ -41,7 +41,7 @@ const isBootstrapPreset = process.env.DOCUSAURUS_PRESET === 'bootstrap';
|
||||
// https://docusaurus-i18n-staging.netlify.app/
|
||||
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} */
|
||||
(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!
|
||||
// Otherwise we risk losing the update on the next release.
|
||||
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,
|
||||
showLastUpdateTime: true,
|
||||
// remarkPlugins: [
|
||||
// [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
|
||||
// ],
|
||||
disableVersioning: isVersioningDisabled,
|
||||
lastVersion: isDev ? 'current' : undefined,
|
||||
onlyIncludeVersions:
|
||||
!isVersioningDisabled && (isDev || isDeployPreview)
|
||||
? ['current', ...versions.slice(0, 2)]
|
||||
: undefined,
|
||||
versions: {
|
||||
current: {
|
||||
// label: `${getNextBetaVersionName()} 🚧`,
|
||||
// label: `2.0 🎉`,
|
||||
label: `2.0`,
|
||||
path: `2.0`,
|
||||
},
|
||||
},
|
||||
// disableVersioning: isVersioningDisabled,
|
||||
// lastVersion: 'current',
|
||||
// onlyIncludeVersions:
|
||||
// !isVersioningDisabled && (isDev || isDeployPreview)
|
||||
// ? ['current', ...versions.slice(0, 2)]
|
||||
// : undefined,
|
||||
// versions: {
|
||||
// current: {
|
||||
// // label: `${getNextBetaVersionName()} 🚧`,
|
||||
// // label: `2.0 🎉`,
|
||||
// label: `2.0`,
|
||||
// // path: `2.0`,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
theme: {
|
||||
customCss: [require.resolve('./src/css/custom.css')],
|
||||
@ -239,7 +239,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
|
||||
announcementBar: {
|
||||
id: 'supportus',
|
||||
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: {
|
||||
@ -268,7 +268,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
|
||||
{
|
||||
type: 'doc',
|
||||
position: 'left',
|
||||
docId: 'OHIF Documentation',
|
||||
docId: 'Introduction',
|
||||
label: 'Docs',
|
||||
},
|
||||
// {to: 'blog', label: 'Blog', position: 'left'},
|
||||
@ -284,13 +284,13 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
|
||||
position: 'right',
|
||||
dropdownItemsAfter: [
|
||||
{
|
||||
to: 'https://github.com/facebook/docusaurus/issues/3526',
|
||||
to: 'https://github.com/OHIF/Viewers/issues/3526',
|
||||
label: 'Help Us Translate',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/facebook/docusaurus',
|
||||
href: 'https://github.com/OHIF/Viewers',
|
||||
position: 'right',
|
||||
className: 'header-github-link',
|
||||
'aria-label': 'GitHub repository',
|
||||
@ -347,7 +347,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
|
||||
// },
|
||||
// {
|
||||
// label: 'GitHub',
|
||||
// href: 'https://github.com/facebook/docusaurus',
|
||||
// href: 'https://github.com/OHIF/Viewers',
|
||||
// },
|
||||
// {
|
||||
// label: 'Twitter',
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
id: OHIF Documentation
|
||||
id: Introduction
|
||||
slug: /
|
||||
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.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user