Merge branch 'react' into react-documentation

2019-04-26 11:52:21 -04:00
commit 3279ab37c1
@@ -0,0 +1,46 @@
+# How To: Documentation Step-by-Step
+
+We use [GitBook](https://www.gitbook.com/) to create our documentation. It primarily uses markdown, html, css, js, misc. plugins, and configuration to generate high quality, easy to read, and easy to maintain documentation.
+
+## Getting Started
+
+_Requirements:_
+
+Make sure you have the [`gitbook-cli`](https://www.npmjs.com/package/gitbook-cli) installed globally:
+
+> `npm install -g gitbook-cli`
+
+### Editing and Previewing Changes
+
+Currently, you can only edit and preview a single "book" at a time. We maintain one "book" per API major version. You can find each version's book at:
+
+_Past Versions:_
+
+- Template:
+  - `<project-root>/docs/v<versionNumber>`
+- Examples:
+  - `/docs/v1`
+  - `/docs/v2`
+
+_Latest Version:_
+
+The latest version will always be located in `/docs/latest`
+
+_Live Preview:_
+
+In your terminal / command prompt:
+
+```bash
+cd /docs/latest
+gitbook install
+gitbook serve
+```
+
+Which should generate output like:
+
+> starting server...
+> serving book on http://localhost:4000
+
+Navigating to the the provided URL will show a preview of what the generated book should look like. Any edits you make to the book's markdown files should automatically update in your browser.
+
+### Publishing
@@ -2,8 +2,27 @@

 - Essentials
  - [Getting Started](essentials/getting-started.md)
+  - [Configuration](essentials/configuration.md)
  - [Troubleshooting](essentials/troubleshooting.md)
 - [Architecture](architecture/index.md)
+  - Overview
+- Deployment
+
+---
+- [Advanced](advanced/index.md)
+- [Architecture](advanced/architecture.md)
+  - [Overview](advanced/architecture.md#overview)
+  - [Business Logic](advanced/architecture.md#business-logic)
+  - [Component Library](advanced/architecture.md#react-component-library)
+  - [Extensions](advanced/architecture.md#misc-extensions)
+  - [Diagram](advanced/architecture.md#diagram)
+  - [Common Questions](advanced/architecture.md#common-questions)
+- [Extensions](advanced/extensions.md)
+  - [Overview](advanced/extensions.md#overview)
+  - [Modules](advanced/extensions.md#modules)
+  - [Registering](advanced/extensions.md#registering-extensions)
+  - [OHIF Maintained](advanced/extensions.md#ohif-maintained-extensions)
+
 - Connecting to Image Archives
  - [DICOM Web](connecting-to-image-archives/dicomweb.md)

@@ -0,0 +1,62 @@
+<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-cornerstone-extension">
+                    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-vtk-extension">
+                    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="">HTML</a>
+            </td>
+            <td>
+                Renders text and HTML content for <a href="https://github.com/OHIF/Viewers/blob/react/extensions/ohif-dicom-html-extension/src/OHIFDicomHtmlSopClassHandler.js#L7-L15">specific SopClassUIDs</a>.
+            </td>
+            <td>Viewport, SopClassHandler</td>
+        </tr>
+        <tr>
+            <td>
+                <a href="https://www.npmjs.com/package/ohif-dicom-pdf-extension">PDF</a>
+            </td>
+            <td>
+                Renders PDFs for a <a href="https://github.com/OHIF/Viewers/blob/react/extensions/ohif-dicom-pdf-extension/src/OHIFDicomPDFSopClassHandler.js#L8">specific SopClassUID</a>.
+            </td>
+            <td>Viewport, SopClassHandler</td>
+        </tr>
+        <tr>
+            <td>
+                <a href="https://www.npmjs.com/package/ohif-dicom-microscopy-extension">Microscopy</a>
+            </td>
+            <td>
+                Renders Microscopy images for a <a href="https://github.com/OHIF/Viewers/blob/react/extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopySopClassHandler.js#L6">specific SopClassUID</a>.
+            </td>
+            <td>Viewport, SopClassHandler</td>
+        </tr>
+    </tbody>
+</table>
@@ -0,0 +1,65 @@
+# Architecture
+
+Looking to extend your instance of the OHIF Viewer? Want learn how to reuse _a portion_ of the Viewer in your own application? Or maybe you want to get involved and draft or suggest a new feature? Regardless, you're in the right place!
+
+The OHIF Viewer aims to be decoupled, configurable, and extensible; while this allows our code to be used in more ways, it also increases complexity. Below, we aim to demistify that complexity by providing insight into how our Viewer is architected, and the role each of it's dependent libraries plays.
+
+## Overview
+
+The [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react) repository contains the source code for the OHIF Medical Imaging Viewer. It is effectively a React [progressive web app](https://developers.google.com/web/progressive-web-apps/) (PWA) that combines the business logic housed in [`OHIF/ohif-core`](https://github.com/OHIF/ohif-core) and the components in our React Component library [`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase). It provides customization for common use cases through [configuration](../essentials/configuration.md) and for adding functionality via [extensions](./extensions.md).
+
+
+### Business Logic
+
+Our goal is to maintain the majority of our business logic in [`OHIF/ohif-core`](https://github.com/OHIF/ohif-core). `ohif-core` offers pre-packaged solutions for features common to Web-based medical imaging viewers. For example:
+
+- Hotkeys
+- DICOM Web
+- Hanging Protocols
+- Managing a study's measurements
+- Managing a study's DICOM metadata
+- A flexible pattern for extensions
+- [And many others](https://github.com/OHIF/ohif-core/blob/master/src/index.js#L49-L69)
+
+It does this while remaining decoupled from any particular view library or
+rendering logic. While we use it to power our React Viewer, it can be used with Vue, React, Vanilla JS, or any number of other frameworks.
+
+
+### React Component Library
+
+[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase) is a React Component library that contains the reusable components that power the OHIF Viewer. It allows us to build, compose, and test components in isolation; easing the development process by reducing the need to stand-up a local PACS with test case data.
+
+[Check out our component library!](https://react.ohif.org/)
+
+
+### Misc. Extensions
+
+Want to add custom logic or UI Components to the OHIF Viewer, but don't want to maintain a fork? We expose common integration points via [extensions](./extensions.md) to make that possible. For a list of extensions maintained by OHIF, [check out this helpful table](./extensions.html#ohif-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.md)
+
+### Diagram
+
+This diagram is a conceptual illustration of how the Viewer is architected. 
+
+0. (optional) `extensions` can be registered with `ohif-core`'s extension manager
+1. `ohif-core` provides bussiness logic and a way for `viewer` to access registered extensions
+2. The `viewer` composes and provides data to components from our component library (`react-viewerbase`)
+3. The `viewer` can be built and served as a stand-alone PWA, or as an embeddable package ([`ohif-viewer`](https://www.npmjs.com/package/ohif-viewer))
+
+![Architecture Diagram](../assets/img/architecture-diagram.png)
+
+<center><i>architecture diagram</i></center>
+
+## Common Questions
+
+> When should I use the packaged source `ohif-viewer` versus building a PWA from the source?
+
+...
+
+> Can I create my own Viewer using Vue.js or Angular.js?
+
+You can, but you will not be able to leverage as much of the existing code and components. `ohif-core` could still be used for business logic, and to provide a model for extensions. `react-viewerbase` would then become a guide for the components you would need to recreate.
@@ -0,0 +1,111 @@
+# Extensions
+
+Extensions add new functionality to the viewer by registering one or more modules. They go one step further than configuration in that they allow us to inject custom React components, so long as they adhere to the module's interface. This can be something as simple as adding a new button to the toolbar, or as complex as a new viewport capable of rendering volumes in 3D.
+
+## Overview
+
+At a glance, an extension is a class or object that has a `getExtensionId()` method, and one or more "module" methods. You can find an abbreviated extension below, or [view the source](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js#L32-L65) of our `cornerstone` viewport extension.
+
+```js
+class myCustomExtension {
+
+    /** Required */
+    getExtensionId: () => 'my-extension-id';
+
+    /** React component that receives props from ConnectLayoutManager
+     *  If more than one viewport module is registered, SopClassHandler
+     *  is used to help determine which component is used */
+    getViewportModule: () => reactViewportComponent;
+
+    /** React component that adds buttons/behavior to the viewer Toolbar */ 
+    getToolbarModule: () => reactToolbarComponent;
+
+    /** Provides a whitelist of SOPClassUIDs the viewport is capable of rendering.
+     *  Can modify default behavior for methods like `getDisplaySetFromSeries` */
+    getSopClassHandler: () => {
+        id: 'some-other-unique-id',
+        type: PLUGIN_TYPES.SOP_CLASS_HANDLER,
+        sopClassUids: ['string'],
+        getDisplaySetFromSeries: (series, study, dicomWebClient, authorizationHeaders) => ...
+    };
+
+    // Not yet used
+    getPanelModule: () => null;
+}
+```
+
+### Modules
+
+There are a few different kinds of modules. Each kind of module allows us to extend the viewer in a different way, and provides a consistent API for us to do so. You can find a full list of the [different types of modules `in ohif-core`](https://github.com/OHIF/ohif-core/blob/43c08a29eff3fb646a0e83a03a236ddd84f4a6e8/src/plugins.js#L1-L6). Information on each type of module, it's API, and how we determine when/where it should be used is included below:
+
+#### Viewport
+
+An extension can register a Viewport Module by providing a `getViewportModule()` method that returns a React Component. The React component will receive the following props:
+
+```js
+children: PropTypes.arrayOf(PropTypes.element)
+studies: PropTypes.object,
+displaySet: PropTypes.object,
+viewportData: PropTypes.object, // { studies, displaySet }
+viewportIndex: PropTypes.number,
+children: PropTypes.node,
+customProps: PropTypes.object
+```
+
+Viewport components are managed by the `LayoutManager`. Which Viewport component is used depends on:
+
+- The Layout Configuration
+- Registered SopClassHandlers
+- The SopClassUID for visible/selected datasets
+
+![Cornerstone Viewport](../assets/img/extensions-viewport.png)
+<center><i>An example of three Viewports</i></center>
+
+For a complete example implementation, [check out the OHIFCornerstoneViewport](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneViewport.js).
+
+#### Toolbar
+
+An extension can register a Toolbar Module by providing a `getToolbarModule()` method that returns a React Component. The component does not receive any props. If you want to modify or react to state, you will need to connect to the redux store.
+
+![Toolbar Extension](../assets/img/extensions-toolbar.gif)
+<center><i>A toolbar extension example</i></center>
+
+Toolbar components are rendered in the `ToolbarRow` component.
+
+For a complete example implementation, [check out the OHIFCornerstoneViewport's Toolbar Module](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/ToolbarModule.js).
+
+#### SopClassHandler
+
+...
+
+#### Panel
+
+> The panel module is not yet in use.
+
+### Registering Extensions
+
+Extensions are registered for the application at startup. The `ExtensionManager`, exposed by `ohif-core`, registers a list of extensions with our application's store. Each module provided by the extension becomes available via `state.plugins.availablePlugins`, and consists of three parts: id, type ([PLUGIN_TYPE](https://github.com/OHIF/ohif-core/blob/43c08a29eff3fb646a0e83a03a236ddd84f4a6e8/src/plugins.js#L1-L6)), and the return value of the module method.
+
+In a future version, we will likely expose a way to provide the extensions you would like included at startup.
+
+_app.js_
+
+```js
+import { createStore, combineReducers } from 'redux';
+import OHIF from 'ohif-core';
+import OHIFCornerstoneExtension from 'ohif-cornerstone-extension';
+
+const combined = combineReducers(OHIF.redux.reducers);
+const store = createStore(combined);
+const extensions = [ new OHIFCornerstoneExtension() ];
+
+// Dispatches the `addPlugin` action to the store
+// Adding extension modules to `state.plugins.availablePlugins`
+ExtensionManager.registerExtensions(store, extensions);
+```
+
+## OHIF Maintained Extensions
+
+A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory. 
+
+{% include "./_maintained-extensions-table.md" %}
@@ -0,0 +1,3 @@
+# Advanced
+
+Advanced topics go beyond basic configuration and deployment. Their goal is to provide insight into this project's architecture and guidance on leveraging extensions.
@@ -1 +0,0 @@
-# Architecture
@@ -0,0 +1 @@
+# Configuration