diff --git a/platform/docs/docs/architecture/index.md b/platform/docs/docs/Architecture.md similarity index 90% rename from platform/docs/docs/architecture/index.md rename to platform/docs/docs/Architecture.md index 1491faea5..211b09cc0 100644 --- a/platform/docs/docs/architecture/index.md +++ b/platform/docs/docs/Architecture.md @@ -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. -![Architecture Diagram](../assets/img/architecture-diagram.png) - -
architecture diagram
+![Architecture Diagram](./assets/img/architecture-diagram.png) + 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 diff --git a/platform/docs/docs/README.md b/platform/docs/docs/README.md index 2d55313e9..9cb513ec2 100644 --- a/platform/docs/docs/README.md +++ b/platform/docs/docs/README.md @@ -1,10 +1,11 @@ --- -id: OHIF Documentation +id: Introduction slug: / sidebar_position: 1 --- -
+ + + +
+ Looking for a Live Demo?
+ + + +
+Preview The OHIF Viewer + + +
+ + + + > 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). ![OHIF Viewer Screenshot](./assets/img/viewer.png) -
The OHIF Viewer: A general purpose DICOM Viewer (Live Demo)
+
The OHIF Viewer: A general purpose DICOM Viewer (Live Demo)
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 diff --git a/platform/docs/docs/configuring/_category_.json b/platform/docs/docs/configuring/_category_.json new file mode 100644 index 000000000..eef358871 --- /dev/null +++ b/platform/docs/docs/configuring/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Configuring", + "position": 4 +} diff --git a/platform/docs/docs/configuring/data-source.md b/platform/docs/docs/configuring/data-source.md index 1f9cbbb5b..cc932255f 100644 --- a/platform/docs/docs/configuring/data-source.md +++ b/platform/docs/docs/configuring/data-source.md @@ -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 -`/platform/viewer/public/config/default.js`. Here is what that +Here is what that configuration looks like: -```js +```js title="/platform/viewer/public/config/default.js" window.config = { routerBasename: '/', servers: { diff --git a/platform/docs/docs/configuring/index.md b/platform/docs/docs/configuring/index.md index 73b65e4a8..3d602fa40 100644 --- a/platform/docs/docs/configuring/index.md +++ b/platform/docs/docs/configuring/index.md @@ -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: { diff --git a/platform/docs/docs/deployment/_category_.json b/platform/docs/docs/deployment/_category_.json new file mode 100644 index 000000000..88be8d879 --- /dev/null +++ b/platform/docs/docs/deployment/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Deployment", + "position": 8 +} diff --git a/platform/docs/docs/deployment/_embedded-viewer-diagram.md b/platform/docs/docs/deployment/_embedded-viewer-diagram.md deleted file mode 100644 index 6af9e0a30..000000000 --- a/platform/docs/docs/deployment/_embedded-viewer-diagram.md +++ /dev/null @@ -1,4 +0,0 @@ -
- Embedded Viewer Diagram -
embedded viewer diagram
-
diff --git a/platform/docs/docs/deployment/_nginx-image-archive-diagram.md b/platform/docs/docs/deployment/_nginx-image-archive-diagram.md deleted file mode 100644 index 780e4f766..000000000 --- a/platform/docs/docs/deployment/_nginx-image-archive-diagram.md +++ /dev/null @@ -1,4 +0,0 @@ -
- request flow example -
simplified request flow diagram
-
diff --git a/platform/docs/docs/deployment/_user-account-control-flow-diagram.md b/platform/docs/docs/deployment/_user-account-control-flow-diagram.md deleted file mode 100644 index b6937cd6b..000000000 --- a/platform/docs/docs/deployment/_user-account-control-flow-diagram.md +++ /dev/null @@ -1,4 +0,0 @@ -
- request flow example -
simplified request flow diagram
-
diff --git a/platform/docs/docs/deployment/index.md b/platform/docs/docs/deployment/index.md index 8959fac7d..995a48077 100644 --- a/platform/docs/docs/deployment/index.md +++ b/platform/docs/docs/deployment/index.md @@ -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" %} +![embeddedViewer](../assets/img/embedded-viewer-diagram.png) + ### 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": [ { diff --git a/platform/docs/docs/deployment/recipes/_category_.json b/platform/docs/docs/deployment/recipes/_category_.json new file mode 100644 index 000000000..5b36cc15d --- /dev/null +++ b/platform/docs/docs/deployment/recipes/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Recipes", + "position": 2 +} diff --git a/platform/docs/docs/deployment/recipes/build-for-production.md b/platform/docs/docs/deployment/recipes/build-for-production.md index 5328a7963..7ba3bb64b 100644 --- a/platform/docs/docs/deployment/recipes/build-for-production.md +++ b/platform/docs/docs/deployment/recipes/build-for-production.md @@ -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 diff --git a/platform/docs/docs/deployment/recipes/embedded-viewer.md b/platform/docs/docs/deployment/recipes/embedded-viewer.md index 86aea531b..07dc7502e 100644 --- a/platform/docs/docs/deployment/recipes/embedded-viewer.md +++ b/platform/docs/docs/deployment/recipes/embedded-viewer.md @@ -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 diff --git a/platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md b/platform/docs/docs/deployment/recipes/google-cloud-healthcare.md similarity index 99% rename from platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md rename to platform/docs/docs/deployment/recipes/google-cloud-healthcare.md index 6fce2746b..a7055881c 100644 --- a/platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md +++ b/platform/docs/docs/deployment/recipes/google-cloud-healthcare.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 6 +--- + # Google Cloud Healthcare > The [Google Cloud Healthcare API](https://cloud.google.com/healthcare/) is a diff --git a/platform/docs/docs/deployment/recipes/nginx--image-archive.md b/platform/docs/docs/deployment/recipes/nginx--image-archive.md index e445607cf..9931687c3 100644 --- a/platform/docs/docs/deployment/recipes/nginx--image-archive.md +++ b/platform/docs/docs/deployment/recipes/nginx--image-archive.md @@ -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" %} + +![nginX](../../assets/img/nginx-image-archive.png) + - All web requests are routed through `nginx` on our `OpenResty` image - `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints diff --git a/platform/docs/docs/deployment/recipes/static-assets.md b/platform/docs/docs/deployment/recipes/static-assets.md index 4e5712f78..de217f4c0 100644 --- a/platform/docs/docs/deployment/recipes/static-assets.md +++ b/platform/docs/docs/deployment/recipes/static-assets.md @@ -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 diff --git a/platform/docs/docs/deployment/recipes/user-account-control.md b/platform/docs/docs/deployment/recipes/user-account-control.md index f6f0b0a16..c8cefe955 100644 --- a/platform/docs/docs/deployment/recipes/user-account-control.md +++ b/platform/docs/docs/deployment/recipes/user-account-control.md @@ -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" %} +![userControlFlow](../../assets/img/user-access-control-request-flow.png) + + - All web requests are routed through `nginx` on our `OpenResty` image - `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints diff --git a/platform/docs/docs/development/_category_.json b/platform/docs/docs/development/_category_.json new file mode 100644 index 000000000..3f6ccc7e8 --- /dev/null +++ b/platform/docs/docs/development/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Development", + "position": 3 +} diff --git a/platform/docs/docs/development/continous-integration.md b/platform/docs/docs/development/continous-integration.md index cfc9a09a0..fd3bbb45e 100644 --- a/platform/docs/docs/development/continous-integration.md +++ b/platform/docs/docs/development/continous-integration.md @@ -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. -
+ + + +![PR_CHECKS](../assets/img/WORKFLOW_PR_CHECKS.png) ### 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`. -
+ + +![publish](../assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png) + + > 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. -
+ + +![deploy](../assets/img/WORKFLOW_DEPLOY.png) | 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/ -
+ + + +![release](../assets/img/WORKFLOW_RELEASE.png) ### HOTFIX diff --git a/platform/docs/docs/development/contributing.md b/platform/docs/docs/development/contributing.md index 6e7128501..cc64fd317 100644 --- a/platform/docs/docs/development/contributing.md +++ b/platform/docs/docs/development/contributing.md @@ -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: -
- - Example of linked cornerstone-tools package - -
example of linked cornerstone-tools package
-
+ +![example of linked cornerstone-tools package](../assets/img/cornerstone-tools-link.gif) + + 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 diff --git a/platform/docs/docs/development/getting-started.md b/platform/docs/docs/development/getting-started.md index 1015281f3..0474ef1f0 100644 --- a/platform/docs/docs/development/getting-started.md +++ b/platform/docs/docs/development/getting-started.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 1 +title: Getting Started +--- # Getting Started ## Setup @@ -69,10 +73,12 @@ You should see the following output: -
-
- Our app, hosted by the development server -
+ +
+ +
+ + ### Building for Production diff --git a/platform/docs/docs/development/testing.md b/platform/docs/docs/development/testing.md index 396a10104..4ca92dcbd 100644 --- a/platform/docs/docs/development/testing.md +++ b/platform/docs/docs/development/testing.md @@ -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 diff --git a/platform/docs/docs/extensions/_category_.json b/platform/docs/docs/extensions/_category_.json new file mode 100644 index 000000000..51dd48da0 --- /dev/null +++ b/platform/docs/docs/extensions/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Extensions", + "position": 6 +} diff --git a/platform/docs/docs/extensions/_maintained-extensions-table.md b/platform/docs/docs/extensions/_maintained-extensions-table.md deleted file mode 100644 index f986f47b5..000000000 --- a/platform/docs/docs/extensions/_maintained-extensions-table.md +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ExtensionDescriptionModules
- - Cornerstone - - - A viewport powered by cornerstone.js. Adds support for 2D DICOM rendering and manipulation, as well as support for the tools features in cornerstone-tools. Also adds "CINE Dialog" to the Toolbar. - Viewport, Toolbar
- - VTK.js - - - A viewport powered by vtk.js. Adds support for volume renderings and advanced features like MPR. Also adds "3D Rotate" to the Toolbar. - Viewport, Toolbar
- DICOM HTML - - Renders text and HTML content for specific SopClassUIDs. - Viewport, SopClassHandler
- DICOM PDF - - Renders PDFs for a specific SopClassUID. - Viewport, SopClassHandler
- DICOM Microscopy - - Renders Microscopy images for a specific SopClassUID. - Viewport, SopClassHandler
- DICOM Segmentation - - Renders segmentation images for a specific SopClassUID. - Panel, Toolbar
diff --git a/platform/docs/docs/extensions/index.md b/platform/docs/docs/extensions/index.md index de0659b36..0f4c12221 100644 --- a/platform/docs/docs/extensions/index.md +++ b/platform/docs/docs/extensions/index.md @@ -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. -
+ + +![extensions](../assets/img/extensions-diagram.png) + 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" | ``, `` | -
Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.
+Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page. ### 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" %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExtensionDescriptionModules
+ + Cornerstone + + + A viewport powered by cornerstone.js. Adds support for 2D DICOM rendering and manipulation, as well as support for the tools features in cornerstone-tools. Also adds "CINE Dialog" to the Toolbar. + Viewport, Toolbar
+ + VTK.js + + + A viewport powered by vtk.js. Adds support for volume renderings and advanced features like MPR. Also adds "3D Rotate" to the Toolbar. + Viewport, Toolbar
+ DICOM HTML + + Renders text and HTML content for specific SopClassUIDs. + Viewport, SopClassHandler
+ DICOM PDF + + Renders PDFs for a specific SopClassUID. + Viewport, SopClassHandler
+ DICOM Microscopy + + Renders Microscopy images for a specific SopClassUID. + Viewport, SopClassHandler
+ DICOM Segmentation + + Renders segmentation images for a specific SopClassUID. + Panel, Toolbar
+ +![contextAndUI](..//assets/img/services.png) ## Example diff --git a/platform/docs/docs/services/default/measurements.md b/platform/docs/docs/services/default/measurements.md deleted file mode 100644 index 19b05395f..000000000 --- a/platform/docs/docs/services/default/measurements.md +++ /dev/null @@ -1,15 +0,0 @@ -# Service: Measurements - -... - -## Usage - -## How to define a Measurement tool - -## How to validate Measurements - -## Data exchange concepts - -## Longitudinal Measurements - -## Timepoints diff --git a/platform/docs/docs/services/index.md b/platform/docs/docs/services/index.md index aeda69c85..c26a8165c 100644 --- a/platform/docs/docs/services/index.md +++ b/platform/docs/docs/services/index.md @@ -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 diff --git a/platform/docs/docs/services/ui/_category_.json b/platform/docs/docs/services/ui/_category_.json new file mode 100644 index 000000000..9c012134e --- /dev/null +++ b/platform/docs/docs/services/ui/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "UI Services", + "position": 3 +} diff --git a/platform/docs/docs/services/ui/index.md b/platform/docs/docs/services/ui/index.md index 3de1aa4e1..84e34d3d8 100644 --- a/platform/docs/docs/services/ui/index.md +++ b/platform/docs/docs/services/ui/index.md @@ -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. -
+ + +![reactUI](../../assets/img/ui-services.png) + + + 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) { } ``` -
+ + +![UINotificationService](../../assets/img/notification-example.gif) +GIF showing successful call of UINotificationService from an extension. ## Tips & Tricks diff --git a/platform/docs/docs/services/ui/ui-dialog-service.md b/platform/docs/docs/services/ui/ui-dialog-service.md index 441845ce5..f25d69b41 100644 --- a/platform/docs/docs/services/ui/ui-dialog-service.md +++ b/platform/docs/docs/services/ui/ui-dialog-service.md @@ -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] -
+ +![UIDialogService](../../assets/img/dialog-example.gif) ## Interface For a more detailed look on the options and return values each of these methods diff --git a/platform/docs/docs/services/ui/ui-modal-service.md b/platform/docs/docs/services/ui/ui-modal-service.md index 89819da81..8c6dd05b9 100644 --- a/platform/docs/docs/services/ui/ui-modal-service.md +++ b/platform/docs/docs/services/ui/ui-modal-service.md @@ -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] -
+ + +![UIModalService](../../assets/img/modal-example.gif) ## Interface diff --git a/platform/docs/docs/services/ui/ui-notification-service.md b/platform/docs/docs/services/ui/ui-notification-service.md index bc49f5bef..8b1f00d82 100644 --- a/platform/docs/docs/services/ui/ui-notification-service.md +++ b/platform/docs/docs/services/ui/ui-notification-service.md @@ -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] -
+ +![UINotificationService](../../assets/img/notification-example.gif) ## Interface For a more detailed look on the options and return values each of these methods diff --git a/platform/docs/docs/viewer/_category_.json b/platform/docs/docs/viewer/_category_.json new file mode 100644 index 000000000..d08a9f53b --- /dev/null +++ b/platform/docs/docs/viewer/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Viewer", + "position": 5 +} diff --git a/platform/docs/docs/viewer/configuration.md b/platform/docs/docs/viewer/configuration.md index 838e5f5a4..ce8a9b0c7 100644 --- a/platform/docs/docs/viewer/configuration.md +++ b/platform/docs/docs/viewer/configuration.md @@ -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 [`/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 diff --git a/platform/docs/docs/viewer/environment-variables.md b/platform/docs/docs/viewer/environment-variables.md index ce18f9849..4fd2691a4 100644 --- a/platform/docs/docs/viewer/environment-variables.md +++ b/platform/docs/docs/viewer/environment-variables.md @@ -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. diff --git a/platform/docs/docs/viewer/hotkeys.md b/platform/docs/docs/viewer/hotkeys.md deleted file mode 100644 index 95a90d7d6..000000000 --- a/platform/docs/docs/viewer/hotkeys.md +++ /dev/null @@ -1,3 +0,0 @@ -# Hotkeys - -... diff --git a/platform/docs/docs/viewer/index.md b/platform/docs/docs/viewer/index.md deleted file mode 100644 index 1a484583e..000000000 --- a/platform/docs/docs/viewer/index.md +++ /dev/null @@ -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 diff --git a/platform/docs/docs/viewer/internationalization.md b/platform/docs/docs/viewer/internationalization.md index 8b75ac9fd..6087b0557 100644 --- a/platform/docs/docs/viewer/internationalization.md +++ b/platform/docs/docs/viewer/internationalization.md @@ -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. -
+ + +
+

Our translation management is powered by + Locize + through their generous support of open source.

+ + Locize Translation Management Logo -
## 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 diff --git a/platform/docs/docs/viewer/themeing.md b/platform/docs/docs/viewer/themeing.md index 03518ec7d..420ebbf7e 100644 --- a/platform/docs/docs/viewer/themeing.md +++ b/platform/docs/docs/viewer/themeing.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 2 +sidebar_label: Themeing +--- # Viewer: Themeing Themeing is currently accomplished with color variables that are defined within diff --git a/platform/docs/docusaurus.config.js b/platform/docs/docusaurus.config.js index ad1d302ff..d8a610f7f 100644 --- a/platform/docs/docusaurus.config.js +++ b/platform/docs/docusaurus.config.js @@ -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 GitHub! ⭐️', + '⭐️ If you like Docusaurus, give it a star on GitHub! ⭐️', }, */ 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', diff --git a/platform/docs/versioned_docs/version-1.0/README.md b/platform/docs/versioned_docs/version-1.0/README.md index 9f1e39507..5f1b77c65 100644 --- a/platform/docs/versioned_docs/version-1.0/README.md +++ b/platform/docs/versioned_docs/version-1.0/README.md @@ -1,12 +1,11 @@ --- -id: OHIF Documentation +id: Introduction slug: / sidebar_position: 1 --- -##### Looking for your Deploy Preview? - Deploy Preview for Viewer +##### Looking for your Deploy Preview? - Deploy Preview for Viewer -# 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.