chore(release): publish [skip ci]

- @ohif/extension-vtk@0.54.3
 - @ohif/core@1.13.3
 - @ohif/viewer@2.11.5

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -1,23 +1,10 @@
-### Request Checklist
+### PR Checklist
 
-- [] Brief description of changes
-- [] Links to any relevant issues
-- [] Required status checks are passing
-- [] `@mention` a maintainer to request a review
-
-#### Special
-
-> If this PR is not on a branch for this repo, it is "untrusted" and does not
-> have access to env vars. Reviewers can kick off a trusted docker deploy by:
->
-> 1. Verifying there are no malicious changes to CI build
-> 2. Using the [git-push-fork-to-upstream-branch][script] script
-> 3. Executing the manual approval step in the CI workflow
-
-- [] Request docker publish of PR
-
-_Want to improve this process? Consider PR'ing the ability for reviewers to add
-a label to trigger this process._
+- [ ] Brief description of changes
+- [ ] Links to any relevant issues
+- [ ] Required status checks are passing
+- [ ] User cases if changes impact the user's experience
+- [ ] `@mention` a maintainer to request a review
 
 <!--
   Links

docs/latest/SUMMARY.md

@@ -21,11 +21,24 @@
   - [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)
+- [Extensions](extensions/index.md)
+  - [Registering](extensions/index.md#registering-an-extension)
+  - [Lifecycle Hooks](extensions/index.md#lifecycle-hooks)
+    - [preRegistration](extensions/lifecycle/pre-registration.md)
+  - [Modules](extensions/index.md#modules)
+    - [Commands](extensions/modules/commands.md)
+    - [Panel](extensions/modules/panel.md)
+    - [SOP Class Handler](extensions/modules/sop-class-handler.md)
+    - [Toolbar](extensions/modules/toolbar.md)
+    - [Viewport](extensions/modules/viewport.md)
+  - [Contexts](extension/index.md#contexts)
+  - [OHIF Maintained](extension/index.md#maintained-extensions)
+- [Services](services/index.md)
+  - [Default](services/default/index.md)
+  - [UI](services/ui/index.md)
+    - [Dialog Service](services/ui/ui-dialog-service.md)
+    - [Modal Service](services/ui/ui-modal-service.md)
+    - [Notification Service](services/ui/ui-notification-service.md)
 - [Custom Tools](advanced/custom-tools.md)
 
 ---

docs/latest/advanced/architecture.md

@@ -94,16 +94,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.md) to make
-this possible. The viewer and many of our own extensions also offer
+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.html#ohif-maintained-extensions).
+[check out this helpful table](../extensions/index.mdl#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)
+[Click here to read more about extensions!](../extensions/index.md)
 
 ### Diagram
 
@@ -145,7 +145,7 @@ you would need to recreate.
 [viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
 [pwa]: https://developers.google.com/web/progressive-web-apps/
 [configuration]: ../essentials/configuration.md
-[extensions]: ./extensions.md
+[extensions]: ../extensions/index.md
 [core-github]: https://github.com/OHIF/viewers/platform/core
 [ui-github]: https://github.com/OHIF/Viewers/platform/ui
 <!-- prettier-ignore-end -->

docs/latest/advanced/custom-tools.md

@@ -2,7 +2,8 @@
 
 This is not yet exposed in an easy/convenient way. Most tools are currently
 added by creating new Viewport, Toolbar, and SOPInstanceHandler extension
-modules. You can read more about that approach in [extensions](./extensions.md).
+modules. You can read more about that approach in
+[extensions](../extensions/index.md).
 
 In the near future, we intend to improve the extensibility of tools for existing
 Viewports (like our Cornerstone.js and VTK.js viewports).

docs/latest/advanced/extensions.md

@@ -1,263 +0,0 @@
-# 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](#overview)
-- [Modules](#modules)
-  - [Commands](#commands)
-  - [Hotkeys](#hotkeys)
-  - [Toolbar](#toolbar)
-  - [Panel](#panel)
-  - [Viewport](#viewport)
-  - [SOP Class Handler](#sopclasshandler)
-
-## Overview
-
-At a glance, an extension is a javascript object that has an `id` property, and
-one or more "module" methods. You can find an abbreviated extension below, or
-[view the source][example-ext-src] of our example extension.
-
-```js
-export default {
-    /**
-     * Only required property. Should be a unique value across all extensions.
-     */
-    id: 'example-extension',
-
-    /**
-     * Registers one or more named commands scoped to a context. Commands are
-     * the primary means for...
-     */
-    getCommandsModule() {
-        return {
-            defaultContext: 'VIEWER'
-            actions: { ... },
-            definitions: { ... }
-        }
-    },
-
-    /**
-     * Allows you to provide toolbar definitions that will be merged with any
-     * existing application toolbar configuration. Used to determine which
-     * buttons should be visible when, their order, what happens when they're
-     * clicked, etc.
-     */
-    getToolbarModule() {
-        return {
-            definitions: [ ... ],
-            defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE'
-        }
-    }
-
-    /**
-     * Not yet implemented
-     */
-    getPanelModule: () => null,
-
-    /**
-     * Registers a ReactComponent that should be used to render data in a
-     * Viewport. The first registered viewport is our "default viewport". If
-     * more than one viewport is registered, we use `SopClassHandlers` to
-     * determine which viewport should be used.
-    */
-    getViewportModule: () => reactViewportComponent,
-
-    /** 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',
-        sopClassUids: [ ... ],
-        getDisplaySetFromSeries: (series, study, dicomWebClient, authorizationHeaders) => { ... }
-    },
-}
-```
-
-### Modules
-
-There are a few different module types. Each module type 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`][module-types]. Information on each type of module, it's API,
-and how we determine when/where it should be used is included below.
-
-> NOTE: Modifying the extensions/modules registered to the OHIF Viewer currently
-> requires us to import and pass extensions to the ExtensionManager in
-> `src/App.js`, then rebuild the application. Long-term, we intend to make it
-> possible to accomplish this without a build step.
-
-#### Commands
-
-The Commands Module allows us to register one or more commands scoped to
-specific contexts. Commands can be run by [hotkeys][#], [toolbar buttons][#],
-and any registered custom react component (like a [viewport][#] or [panel][#]).
-Here is a simple example commands module:
-
-```js
-{
-    getCommandsModule() {
-        return {
-            actions: {
-                speak: ({ viewports, words }) => {
-                    console.log(viewports, words);
-                },
-            },
-            definitions: {
-                rotateViewportCW: {
-                    commandFn: actions.rotateViewport,
-                    storeContexts: ['viewports'],
-                    options: { rotation: 90 }
-                },
-                rotateViewportCCW: {
-                    commandFn: actions.rotateViewport,
-                    storeContexts: ['viewports'],
-                    options: { rotation: -90 },
-                    context: 'ACTIVE_VIEWER::CORNERSTONE'
-                },
-            },
-            defaultContext: 'VIEWER'
-        }
-    }
-}
-```
-
-#### 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 `ViewportGrid` Component. 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/master/extensions/cornerstone/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. The given toolbar must determine its set of elements and the context of
-them. The set of elements will be listed on toolbar `definitions`.
-
-![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/master/extensions/cornerstone/src/toolbarModule.js).
-
-##### Toolbar Custom Component
-
-Toolbar elements can define its own custom react component to be consumed when
-rendering it. So far, it accepts `Functional` and `Class` Components. For that,
-you just need to expose your `CustomToolbarComponent` as the value of key
-`CustomComponent`. In case the property `CustomComponent` is not present, a
-default toolbar component will be used to render it. See bellow
-
-```js
-definitions: [
-...
-    {
-        id: 'Custom',
-        label: 'Custom',
-        icon: 'custom-icon',
-        CustomComponent: CustomToolbarComponent,
-    }
-...
-]
-
-```
-
-`CustomComponent` components will receive the following props:
-
-- parentContext: parent context. (In most of the cases it will be a ToolbarRow
-  instance)
-- toolbarClickCallback: callback method when clicking on toolbar
-- button: its own definition object
-- key: react key prop
-- activeButtons: list of active elements
-- isActive: if current
-
-#### SopClassHandler
-
-...
-
-#### Panel
-
-> The panel module is not yet in use.
-
-#### Hotkeys
-
-...
-
-### 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) repository, in the top level
-[`extensions/`](https://github.com/OHIF/Viewers/tree/master/extensions)
-directory.
-
-{% include "./_maintained-extensions-table.md" %}
-
-<!--
-    Links
--->
-
-<!-- prettier-ignore-start -->
-[example-ext-src]: https://github.com/OHIF/Viewers/tree/master/extensions/_example/src
-[module-types]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/extensions/MODULE_TYPES.js
-<!-- prettier-ignore-end -->

docs/latest/assets/img/canny-logo-name.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 260.4 82.9" enable-background="new 0 0 260.4 82.9" xml:space="preserve">
-<g>
-	<path fill="#525DF9" d="M31.7,8.9c9.6,0,16.5,4.9,19,13.4l0.1,0.4h9.6l-0.1-0.6C57.6,8.5,46.7,0,31.8,0C13.7,0,0,14.1,0,32.9   s13.7,32.9,31.8,32.9c14.9,0,25.8-8.5,28.6-22.1l0.1-0.6h-9.6l-0.1,0.4c-2.5,8.5-9.5,13.4-19,13.4c-13.1,0-21.9-9.6-21.9-24   C9.8,18.6,18.6,8.9,31.7,8.9z"/>
-	<path fill="#525DF9" d="M110.1,58c-2.3,0-3.5-1.4-3.5-4.2V32.7c0-8.8-7.2-14.7-17.9-14.7c-7.5,0-16.7,3.9-18.3,14.9l-0.1,0.6h8.4   l0.1-0.4c1.4-5.7,5.8-6.9,9.3-6.9c6,0,9.5,2.7,9.5,7.4v2.6l-13.6,1.4c-7.6,0.8-15.7,5-15.7,14.6c0,8.1,6,13.5,14.8,13.5   c6.5,0,11.8-3.4,15-6.8c1.3,4.2,4.5,6.5,9.1,6.5c1.7,0,3.2-0.3,5.2-0.9l0.3-0.1v-7l-0.6,0.2C111.5,57.9,110.9,58,110.1,58z    M97.7,43.5v7.3c-4.6,4.6-8.9,6.7-13.5,6.7c-2,0-6.8-0.6-6.8-5.7c0-3.8,2.8-6.3,7.4-6.9L97.7,43.5z"/>
-	<path fill="#525DF9" d="M146.5,18c-6.5,0-12,3.1-15.2,6.1v-5.2h-8.9v46h8.9V34.3c2.2-3.2,6.7-8.3,13-8.3c5.6,0,8.7,3.1,8.7,8.8   v30.1h8.9V33.3C161.9,23.7,156.1,18,146.5,18z"/>
-	<path fill="#525DF9" d="M195.8,18c-6.5,0-12,3.1-15.2,6.1v-5.2h-8.9v46h8.9V34.3c2.2-3.2,6.7-8.3,13-8.3c5.6,0,8.7,3.1,8.7,8.8   v30.1h8.9V33.3C211.2,23.7,205.4,18,195.8,18z"/>
-	<polygon fill="#525DF9" points="251.3,18.9 238.6,51.8 237.8,47.9 225.6,18.9 216.2,18.9 234.3,62.4 226,82.9 235,82.9 260.4,18.9     "/>
-</g>
-</svg>

docs/latest/assets/img/canny-logo.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 445.9 638" enable-background="new 0 0 445.9 638" xml:space="preserve">
-<g>
-	<g>
-		<path fill="#5F5DF9" d="M224.5,638C101.1,638,0,537.8,0,414.7V223.3C0,100.2,101.1,0,224.5,0c109.6,0,202.8,78.3,220.9,186.1
-			c2.9,17.4-8.6,33.8-26,36.8c-17.4,2.9-33.7-8.8-36.7-26.2c-13-77-78.6-132.9-157-132.9c-88.2,0-159.3,71.6-159.3,159.5v191.4
-			c0,88,71.1,159.5,159.3,159.5c78.3,0,144.2-55.9,157.1-132.9c2.9-17.4,19.3-29.1,36.6-26.2c17.4,2.9,28.6,19.4,25.7,36.7
-			C427.2,559.7,334,638,224.5,638z"/>
-	</g>
-	<g opacity="0.5">
-		<path fill="#5F5DF9" d="M153.6,347.7c-17.6,0-30.7-14.3-30.7-31.9v-92.3c0-56.8,45.8-103,102.8-103c38.9,0,73.9,21.6,91.7,56.4
-			c8,15.7,1.7,34.9-14,42.9c-15.7,8-35,1.8-43-13.9c-6.8-13.4-21-21.7-35.8-21.7c-21.8,0-40.2,17.6-40.2,39.2v92.3
-			C184.3,333.4,171.2,347.7,153.6,347.7z"/>
-	</g>
-</g>
-</svg>

docs/latest/deployment/index.md

@@ -35,8 +35,7 @@ benefits, but comes at the cost of time and complexity. Some benefits include:
 
 _Today:_
 
-- Leverage [extensions](/advanced/extensions.md) to drop-in powerful new
-  features
+- Leverage [extensions](/extensions/index.md) to drop-in powerful new features
 - Add routes and customize the viewer's workflow
 - Finer control over styling and whitelabeling
 

docs/latest/deployment/recipes/embedded-viewer.md

@@ -98,7 +98,7 @@ extension enabled here][whole-slide-ext-demo] ([source code][ext-code-sandbox])
 and [without it here][whole-slide-base-demo] ([source code][code-sandbox]).
 
 You can read more about extensions and how to create your own in our
-[extensions guide](/advanced/extensions.md).
+[extensions guide](/extensions/index.md).
 
 #### FAQ
 

docs/latest/extensions/_maintained-extensions-table.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/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>
+        <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>
+    </tbody>
+</table>

docs/latest/extensions/index.md

@@ -0,0 +1,151 @@
+# Extensions
+
+- [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)
+- [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.
+
+<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>
+
+The `@ohif/viewer`'s application level configuration gives us the ability to add
+and configure extensions. When the application starts, extensions are registered
+with the `ExtensionManager`. Different portions of the `@ohif/viewer` project
+will use registered extensions to influence application behavior.
+
+Extensions allow us to:
+
+- Wrap and integrate functionality of 3rd party dependencies in a reusable way
+- Change how application data is mapped and transformed
+- Display a consistent/cohesive UI
+- Inject custom components to override built-in components
+
+Practical examples of extensions include:
+
+- A set of segmentation tools that build on top of the `cornerstone` viewport
+- Showing ML/AI report summaries for the selected study/series/image
+- Support for parsing DICOM structured reports and displaying them in a user
+  friendly way
+- [See our maintained extensions for more examples of what's possible](#maintained-extensions)
+
+## Concepts
+
+### Extension Skeleton
+
+An extension is a plain JavaScript object has an `id` property, and one or more
+"getModuleFunctions" and/or lifecycle hooks. You can read more about
+[lifecycle hooks](#lifecycle-hooks) and [modules](#modules) further down.
+
+```js
+// prettier-ignore
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'example-extension',
+
+  // Lifecyle
+  preRegistration() { /* */ },
+  // Modules
+  getCommandsModule() { /* */ },
+  getToolbarModule() { /* */ },
+  getPanelModule() { /* */ },
+  getSopClassHandler() { /* */ },
+  getViewportModule() { /* */ },
+}
+```
+
+### Registering an Extension
+
+There are two different ways to register and configure extensions. You can
+leverage one or both strategies. Which one(s) you choose depend on your
+application's requirements. Each [module](#modules) defined by the extension
+becomes available to the core application via the `ExtensionManager`.
+
+```js
+// prettier-ignore
+const config = {
+  extensions: [
+    MyFirstExtension,
+    [
+      MySecondExtension,
+      { /* MySecondExtensions Configuration */ },
+    ],
+  ];
+}
+```
+
+#### Runtime Extensions
+
+The `@ohif/viewer` uses a [configuration file](#) at startup. The schema for
+that file includes an `Extensions` key that supports an array of extensions to
+register.
+
+#### Bundled Extensions
+
+The `@ohif/viewer` works best when built as a "Progressive Web Application"
+(PWA). If you know the extensions your application will need, you can specify
+them at "build time" to leverage some advantaged afforded to us by modern
+tooling:
+
+- Code Splitting
+- Tree Shaking
+- Dependency deduplication
+
+You can update the list of bundled extensions by:
+
+1. Having your `@ohif/viewer` project depend on the extension
+2. Importing and adding it to the list of extensions in the
+   `<repo-root>/platform/src/index.js` entrypoint.
+
+### Lifecycle Hooks
+
+...
+
+### Modules
+
+There are a few different module types. Each module type 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`][module-types]. Information on each type of module, it's API,
+and how we determine when/where it should be used is included below.
+
+### Contexts
+
+...
+
+## Consuming Extensions
+
+...
+
+## Maintained Extensions
+
+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" %}
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[viewers-repo]: https://github.com/OHIF/Viewers
+[ext-source]: https://github.com/OHIF/Viewers/tree/master/extensions
+[module-types]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/extensions/MODULE_TYPES.js
+<!-- prettier-ignore-end -->

docs/latest/extensions/lifecycle/pre-registration.md

@@ -0,0 +1,21 @@
+# Lifecylce Hook: preRegistration
+
+If an extension defines the `preRegistration` lifecycle hook, it is called
+before any modules are registered to the `ExtensionManager`.
+
+```js
+export default {
+  id: 'MyExampleExtension',
+
+  preRegistration({ servicesManager, commandsManager, configuration }) {
+    console.log('Wiring up important stuff.');
+
+    window.importantStuff = () => {
+      console.log(configuration);
+    };
+
+    console.log('Important stuff has been wired.');
+    window.importantStuff();
+  },
+};
+```

docs/latest/extensions/modules/commands.md

@@ -0,0 +1,34 @@
+# Module: Commands
+
+The Commands Module allows us to register one or more commands scoped to
+specific contexts. Commands can be run by [hotkeys][#], [toolbar buttons][#],
+and any registered custom react component (like a [viewport][#] or [panel][#]).
+Here is a simple example commands module:
+
+```js
+{
+    getCommandsModule() {
+        return {
+            actions: {
+                speak: ({ viewports, words }) => {
+                    console.log(viewports, words);
+                },
+            },
+            definitions: {
+                rotateViewportCW: {
+                    commandFn: actions.rotateViewport,
+                    storeContexts: ['viewports'],
+                    options: { rotation: 90 }
+                },
+                rotateViewportCCW: {
+                    commandFn: actions.rotateViewport,
+                    storeContexts: ['viewports'],
+                    options: { rotation: -90 },
+                    context: 'ACTIVE_VIEWER::CORNERSTONE'
+                },
+            },
+            defaultContext: 'VIEWER'
+        }
+    }
+}
+```

docs/latest/extensions/modules/panel.md

@@ -0,0 +1,3 @@
+# Module: Panel
+
+...

docs/latest/extensions/modules/sop-class-handler.md

@@ -0,0 +1,3 @@
+# Module: SOP Class Handler
+
+...

docs/latest/extensions/modules/toolbar.md

@@ -0,0 +1,48 @@
+# Module: 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. The given toolbar must determine its set of elements and the context of
+them. The set of elements will be listed on toolbar `definitions`.
+
+![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/master/extensions/cornerstone/src/toolbarModule.js).
+
+## Toolbar Custom Component
+
+Toolbar elements can define its own custom react component to be consumed when
+rendering it. So far, it accepts `Functional` and `Class` Components. For that,
+you just need to expose your `CustomToolbarComponent` as the value of key
+`CustomComponent`. In case the property `CustomComponent` is not present, a
+default toolbar component will be used to render it. See bellow
+
+```js
+definitions: [
+...
+    {
+        id: 'Custom',
+        label: 'Custom',
+        icon: 'custom-icon',
+        CustomComponent: CustomToolbarComponent,
+    }
+...
+]
+
+```
+
+`CustomComponent` components will receive the following props:
+
+- parentContext: parent context. (In most of the cases it will be a ToolbarRow
+  instance)
+- toolbarClickCallback: callback method when clicking on toolbar
+- button: its own definition object
+- key: react key prop
+- activeButtons: list of active elements
+- isActive: if current

docs/latest/extensions/modules/viewport.md

@@ -0,0 +1,29 @@
+# Module: 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 `ViewportGrid` Component. 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/master/extensions/cornerstone/src/OHIFCornerstoneViewport.js).

docs/latest/hotkeys/index.md

@@ -0,0 +1,3 @@
+# Hotkeys
+
+...

docs/latest/our-process.md

@@ -1,13 +1,13 @@
 # Our Process
 
-Our process is a living, breathing thing. We strive to have regular [retrospectives][retrospective] that help us
-shape and adapt our process to our team's current needs. This document attempts to capture the broad strokes of
+Our process is a living, breathing thing. We strive to have regular
+[retrospectives][retrospective] that help us shape and adapt our process to our
+team's current needs. This document attempts to capture the broad strokes of
 that process in an effort to:
 
 - Strengthen community member involvement and understanding
 - Welcome feedback and helpful suggestions
 
-
 ## Overview
 
 - [Issue Triage](#issue-triage)
@@ -15,78 +15,117 @@ that process in an effort to:
 - [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, and suggest changes to the OHIF Viewer's core
-team. Community issues generally fall into one of three categories, and are marked with a `triage` label when created.
+[GitHub issues][gh-issues] are the best way to provide feedback, ask questions,
+and suggest changes to the OHIF Viewer's core team. Community issues generally
+fall into one of three categories, and are marked with a `triage` label when
+created.
 
-
-|Issue Template Name     | Description                                                                             |
-|------------------------|-----------------------------------------------------------------------------------------|
-|Community: Report 🐛  | Describe a new issue; Provide steps to reproduce; Expected versus actual result?         |
-|Community: Request ✋  | Describe a proposed new feature. Why should it be implemented? What is the impact/value? |
-|Community: Question ❓ | Seek clarification or assistance relevant to the repository.                             | 
+| Issue Template Name    | Description                                                                              |
+| ---------------------- | ---------------------------------------------------------------------------------------- |
+| Community: Report 🐛   | Describe a new issue; Provide steps to reproduce; Expected versus actual result?         |
+| Community: Request ✋  | Describe a proposed new feature. Why should it be implemented? What is the impact/value? |
+| Community: Question ❓ | Seek clarification or assistance relevant to the repository.                             |
 
 _table 1. issue template names and descriptions_
 
-Issues that require `triage` are akin to support tickets. As this is often our first contact with would-be adopters and
-contributors, it's important that we strive for timely responses and satisfactory resolutions. We attempt to accomplish this
-by:
+Issues that require `triage` are akin to support tickets. As this is often our
+first contact with would-be adopters and contributors, it's important that we
+strive for timely responses and satisfactory resolutions. We attempt to
+accomplish this by:
 
 1. Responding to issues requiring `triage` at least once a week
 2. Create new "official issues" from "community issues"
 3. Provide clear guidance and next steps (when applicable)
 4. Regularly clean up old (stale) issues
 
-> :pencil: Less obviously, patterns in the issues being reported can highlight areas that need improvement. For example, users often have
-difficulty navigating CORS issues when deploying the OHIF Viewer -- how do we best reduce our ticket volume for this issue?
+> :pencil: Less obviously, patterns in the issues being reported can highlight
+> areas that need improvement. For example, users often have difficulty
+> navigating CORS issues when deploying the OHIF Viewer -- how do we best reduce
+> our ticket volume for this issue?
 
 ### Backlogged Issues
 
-Community issues serve as vehicles of discussion that lead us to "backlogged issues". Backlogged issues are the distilled and actionable information extracted from community issues. They contain the scope and requirements necessary for hand-off to a core-team (or community) contributor ^_^
+Community issues serve as vehicles of discussion that lead us to "backlogged
+issues". Backlogged issues are the distilled and actionable information
+extracted from community issues. They contain the scope and requirements
+necessary for hand-off to a core-team (or community) contributor ^\_^
 
-|Category| Description| Labels|
-|--------|-----| ---------|
-| Bugs   | An issue with steps that produce a bug (an unexpected result). | [Bug: Verified 🐛][label-bug] |
-| Stories| A feature/enhancement with a clear benefit, boundaries, and requirements. | [Story 🙌][label-story] |
-| Tasks  | Changes that improve [UX], [DX], or test coverage; but don't impact application behavior | [Task: CI/Tooling 🤖][label-tooling], [Task: Docs 📖][label-docs], [Task: Refactor 🛠][label-refactor], [Task: Tests 🔬][label-tests] |
+| Category | Description                                                                              | Labels                                                                                                                               |
+| -------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| Bugs     | An issue with steps that produce a bug (an unexpected result).                           | [Bug: Verified 🐛][label-bug]                                                                                                        |
+| Stories  | A feature/enhancement with a clear benefit, boundaries, and requirements.                | [Story 🙌][label-story]                                                                                                              |
+| Tasks    | Changes that improve [UX], [DX], or test coverage; but don't impact application behavior | [Task: CI/Tooling 🤖][label-tooling], [Task: Docs 📖][label-docs], [Task: Refactor 🛠][label-refactor], [Task: Tests 🔬][label-tests] |
 
 _table 2. backlogged issue types ([full list of labels][gh-labels])_
 
-
 ## Issue Curation (["backlog grooming"][groom-backlog])
 
-If a [GitHub issue][gh-issues] has a `bug`, `story`, or `task` label; it's on our backlog. If an issue is on our backlog, it means we are, at the very least, committed to reviewing any community drafted Pull Requests to complete the issue. If you're interested in seeing an issue completed but don't know where to start, please don't hesitate to leave a comment!
+If a [GitHub issue][gh-issues] has a `bug`, `story`, or `task` label; it's on
+our backlog. If an issue is on our backlog, it means we are, at the very least,
+committed to reviewing any community drafted Pull Requests to complete the
+issue. If you're interested in seeing an issue completed but don't know where to
+start, please don't hesitate to leave a comment!
 
-While we don't yet have a long-term or quarterly road map, we do regularly add items to our ["Active Development" GitHub Project Board][gh-board]. Items on this project board are either in active development by Core Team members, or queued up for development as in-progress items are completed.
+While we don't yet have a long-term or quarterly road map, we do regularly add
+items to our ["Active Development" GitHub Project Board][gh-board]. Items on
+this project board are either in active development by Core Team members, or
+queued up for development as in-progress items are completed.
 
-> :pencil: Want to contribute but not sure where to start? Check out [Up for grabs][label-grabs] issues and our [Contributing documentation][contributing-docs]
+> :pencil: Want to contribute but not sure where to start? Check out [Up for
+> grabs][label-grabs] issues and our [Contributing
+> documentation][contributing-docs]
 
 ## Contributions (Pull Requests)
 
-Incoming Pull Requests (PRs) are triaged using the following labels. Code review is performed on all PRs where the bug fix or added functionality is deemed appropriate:
+Incoming Pull Requests (PRs) are triaged using the following labels. Code review
+is performed on all PRs where the bug fix or added functionality is deemed
+appropriate:
 
-- PR: Bug Fix - Describes a PR filed to address a Bug.
-- PR: Draft - Describes a PR filed to gather early feedback from the core team, but which is not intended for merging in the short term.
-- Awaiting Response - Describes a PR where the core team is waiting for additional information from the author. This may occur before or after code review.
-- Awaiting Review -  Describes a PR where the core team has not yet performed a code review.
-- Awaiting Revisions - Following code review, this label is applied until the author has made sufficient changes.
+| Labels                                         | Description                                                                                                 |
+| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| **Classification**                             |                                                                                                             |
+| [PR: Bug Fix][label-bug]                       | Filed to address a Bug.                                                                                     |
+| [PR: Draft][draft]                             | Filed to gather early feedback from the core team, but which is not intended for merging in the short term. |
+| **Review Workflow**                            |                                                                                                             |
+| [PR: Awaiting Response 💬][awaiting-response]  | The core team is waiting for additional information from the author.                                        |
+| [PR: Awaiting Review 👀][awaiting-review]      | The core team has not yet performed a code review.                                                          |
+| [PR: Awaiting Revisions 🖊][awaiting-revisions] | Following code review, this label is applied until the author has made sufficient changes.                  |
+| **QA**                                         |                                                                                                             |
+| [PR: Awaiting User Cases 💃][awaiting-stories] | The PR code changes need common language descriptions of impact to end users before the review can start    |
+| [PR: No UX Impact 🙃][no-ux-impact]            | The PR code changes do not impact the user's experience                                                     |
 
-We rely on GitHub Checks and integrations with third party services to evaluate changes in code quality and test coverage. Tests must pass before a PR can be merged to master, and code quality and test coverage must not changed by a significant margin. For some repositories, visual screenshot-based tests are also included, and video recordings of end-to-end tests are stored for later review.
+We rely on GitHub Checks and integrations with third party services to evaluate
+changes in code quality and test coverage. Tests must pass and User cases must
+be present (when applicable) before a PR can be merged to master, and code
+quality and test coverage must not changed by a significant margin. For some
+repositories, visual screenshot-based tests are also included, and video
+recordings of end-to-end tests are stored for later review.
 
 [You can read more about our continous integration efforts here](/continous-integration.md)
 
 ## Releases
 
-Releases are made automatically based on the type of commits which have been merged (major.minor.patch). Releases are automatically pushed to NPM. Release notes are automatically generated. Users can subscribe to GitHub and NPM releases.
+Releases are made automatically based on the type of commits which have been
+merged (major.minor.patch). Releases are automatically pushed to NPM. Release
+notes are automatically generated. Users can subscribe to GitHub and NPM
+releases.
 
-Important announcements are made on GitHub, tagged as Announcement, and pinned so that they remain at the top of the Issue page.
+We host development, staging, and production environments for the Progressive
+Web Application version of the OHIF Viewer. [Development][ohif-dev] always
+reflects the latest changes on our master branch. [Staging][ohif-stage] is used
+to regression test a release before a bi-weekly deploy to our [Production
+environment][ohif-prod].
 
-The Core team occasionally performs full manual testing to begin the process of releasing a Stable version. Once testing is complete, the known issues are addressed and a Stable version 
+Important announcements are made on GitHub, tagged as Announcement, and pinned
+so that they remain at the top of the Issue page.
 
+The Core team occasionally performs full manual testing to begin the process of
+releasing a Stable version. Once testing is complete, the known issues are
+addressed and a Stable version is released.
 
 <!--
   LINKS
@@ -97,12 +136,24 @@ The Core team occasionally performs full manual testing to begin the process of
 [retrospective]: https://www.atlassian.com/team-playbook/plays/retrospective
 [gh-issues]: https://github.com/OHIF/Viewers/issues/new/choose
 [gh-labels]: https://github.com/OHIF/Viewers/labels
+<!-- Issue Labels -->
 [label-story]: https://github.com/OHIF/Viewers/labels/Story%20%3Araised_hands%3A
 [label-tooling]: https://github.com/OHIF/Viewers/labels/Task%3A%20CI%2FTooling%20%3Arobot%3A
 [label-docs]: https://github.com/OHIF/Viewers/labels/Task%3A%20Docs%20%3Abook%3A
 [label-refactor]: https://github.com/OHIF/Viewers/labels/Task%3A%20Refactor%20%3Ahammer_and_wrench%3A
 [label-tests]: https://github.com/OHIF/Viewers/labels/Task%3A%20Tests%20%3Amicroscope%3A
 [label-bug]: https://github.com/OHIF/Viewers/labels/Bug%3A%20Verified%20%3Abug%3A
+<!-- PR Labels -->
+[draft]: https://github.com/OHIF/Viewers/labels/PR%3A%20Draft
+[awaiting-response]: https://github.com/OHIF/Viewers/labels/PR%3A%20Awaiting%20Response%20%3Aspeech_balloon%3A
+[awaiting-review]: https://github.com/OHIF/Viewers/labels/PR%3A%20Awaiting%20Review%20%3Aeyes%3A
+[awaiting-stories]: https://github.com/OHIF/Viewers/labels/PR%3A%20Awaiting%20UX%20Stories%20%3Adancer%3A
+[awaiting-revisions]: https://github.com/OHIF/Viewers/labels/PR%3A%20Awaiting%20Revisions%20%3Apen%3A
+[no-ux-impact]: https://github.com/OHIF/Viewers/labels/PR%3A%20No%20UX%20Impact%20%3Aupside_down_face%3A
+<!-- -->
+[ohif-dev]: https://viewer-dev.ohif.org
+[ohif-stage]: https://viewer-stage.ohif.org
+[ohif-prod]: https://viewer.ohif.org
 [gh-board]: https://github.com/OHIF/Viewers/projects/4
 [label-grabs]: https://github.com/OHIF/Viewers/issues?q=is%3Aissue+is%3Aopen+label%3A%22Up+For+Grabs+%3Araising_hand_woman%3A%22
 [contributing-docs]: https://docs.ohif.org/contributing/

docs/latest/services/default/index.md

@@ -0,0 +1,65 @@
+# Services (default)
+
+- [Overview](#overview)
+- [Example](#example)
+
+## Overview
+
+Services are a work in progress. As we are still in the progress of creating a
+non-ui maintained service, this usage may change.
+
+<div style="text-align: center;">
+  <a href="/assets/img/services.png">
+    <img src="/assets/img/services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
+  </a>
+  <div><i>Diagram showing relationship between React Context and UI Service</i></div>
+</div>
+
+## Example
+
+The simplest service return a new object that has a `name` property, and
+methods/properties that give the service its functionality. The "Factory
+Function" that creates the service is provided with the implementation (this is
+slightly different for UI Services).
+
+```js
+const _speak = () => {
+  console.warn('Speak is not implemented');
+};
+
+/**
+ * Factory function to create `HelloWorldService`
+ *
+ * @param {object} implementation
+ * @param {function} implementation.speak - Speak's implementation
+ * @returns HelloWorldService
+ */
+export default function createHelloWorldService({ speak }) {
+  return {
+    name: 'HelloWorldService',
+    speak: speak || _speak,
+  };
+}
+```
+
+A service, once created, can be registered with the `ServicesManager` to make it
+accessible to extensions. Similarly, the application code can access named
+services from the `ServicesManager`.
+
+```js
+// In the application
+const speak = () => {
+  window.alert('HELLO WORLD');
+};
+const HelloWorldService = createHelloWorldService({ speak });
+const servicesManager = new ServicesManager();
+
+servicesManager.registerService(HelloWorldService);
+
+// In an extension
+const { HelloWorldService } = servicesManager.services;
+
+if (HelloWorldService) {
+  HelloWorldService.speak();
+}
+```

docs/latest/services/index.md

@@ -0,0 +1,69 @@
+# 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
+operations, often tied to some shared state, and are made available to
+extensions via the `ServicesManager`. Services are particularly well suited to
+address [cross-cutting concerns][cross-cutting-concerns].
+
+Each service should be:
+
+- self-contained
+- able to fail and/or be removed without breaking the application
+- completely interchangeable with another module implementing the same interface
+
+## Kinds of Services
+
+Depending on the kind of service, we follow slightly different conventions. For
+example, a UI service often receives its implementation from a React Context
+Provider. You can read more about the different kinds of services and what makes
+them different below:
+
+### Services (default)
+
+Services are a work in progress. As we are still in the progress of creating a
+non-ui maintained service, this usage may change.
+
+[You can read more about default services: here](./default/index.md)
+
+### UI Services
+
+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.
+
+We maintain the following UI Services:
+
+- [UIDialogService](./ui/ui-dialog-service.md)
+- [UIModalService](./ui/ui-modal-service.md)
+- [UINotificationService](./ui/ui-notification-service.md)
+
+You can read more about a specific service by selecting it in the above list,
+and more about [UI services in general: here](./ui/index.md)
+
+## Related Patterns
+
+Services are "concern-specific" code modules that can be consumed across layers.
+We try to minimize the coupling they introduce by authoring services that are
+able to fail or be removed. Related patterns that may reduce coupling include:
+
+- Pub/Sub
+- Commands
+
+<!--
+  LINKS
+  -->
+
+<!-- prettier-ignore-start -->
+[commands]: #/
+[core-services]: https://github.com/OHIF/Viewers/tree/master/platform/core/src/services
+[services-manager]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/ServicesManager.js
+[cross-cutting-concerns]: https://en.wikipedia.org/wiki/Cross-cutting_concern
+<!-- prettier-ignore-end -->

docs/latest/services/ui/index.md

@@ -0,0 +1,106 @@
+# UI Services
+
+- [Overview](#overview)
+- [Example](#example)
+- [Tips & Tricks](#/)
+- [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;">
+  <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>
+
+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
+instance to our `ServicesManager` AND to a React component (in this example,
+`ModalContext`'s provider).
+
+The `ModalContext`'s provider:
+
+- Exposes context values
+- Exposes methods that leverage `useCallback` hooks
+- Sets the service's implementation in a `useEffect` hook
+
+The `ServicesManager` is:
+
+- Passed to the `ExtensionManager`
+- The `ExtensionManager` makes the `ServicesManager` available to:
+  - All of it's lifecycle hooks (`preRegistration`)
+  - Each "getModuleFunction" (`getToolbarModule`, `getPanelModule`, etc.)
+
+## Example
+
+That's all fine and good, but it's still a little too abstract. What does this
+translate to in practice?
+
+```js
+// In the application
+const UINotificationService = createUINotificationService();
+const servicesManager = new ServicesManager();
+
+servicesManager.registerService(UINotificationService);
+
+// UI Service Provider
+useEffect(() => {
+  if (service) {
+    service.setServiceImplementation({ hide, show });
+  }
+}, [service, hide, show]);
+
+// In an extension
+const { UINotificationService } = servicesManager.services;
+
+if (UINotificationService) {
+  UINotificationService.show('Hello from the other side 👋');
+}
+```
+
+<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>
+
+## Tips & Tricks
+
+It's important to remember that all we're doing is making it possible to control
+bits of the application's UI from an extension. Here are a few non-obvious
+takeaways worth mentioning:
+
+- Your application code should continue to use React context
+  (consumers/providers) as it normally would
+- You can substitute our "out of the box" UI implementations with your own
+- You can create and register your own UI services
+- You can choose not to register a service or provide a service implementation
+- In extensions, you can provide fallback/alternative behavior if an expected
+  service is not registered
+  - No `UIModalService`? Use the `UINotificationService` to notify users.
+- While we don't have an examples of this, you can technically register a
+  service in an extension and expose it to the core application
+
+> Note: These are recommended patterns, not hard and fast rules. Following them
+> will help reduce confusion and interoperability with the larger OHIF
+> community, but they're not silver bullets. Please speak up, create an issue,
+> if you would like to discuss new services or improvements to this pattern.
+
+## Maintained Services
+
+Our `@ohif/viewer` project is an example of how to glue together the different
+parts and pieces of the OHIF Platform to create a polished and powerful product.
+To accomplish that, we maintain several UI Services that you can use in your own
+project, or provide alternative implementations for:
+
+| Name                  | Docs                                 |
+| --------------------- | ------------------------------------ |
+| UIDialogService       | [Here](./ui-dialog-service.md)       |
+| UIModalService        | [Here](./ui-modal-service.md)        |
+| UINotificationService | [Here](./ui-notification-service.md) |

docs/latest/services/ui/ui-dialog-service.md

@@ -0,0 +1,49 @@
+# UI Dialog Service
+
+Dialogs have similar characteristics to that of Modals, but often with a
+streamlined focus. They can be helpful when:
+
+- We need to grab the user's attention
+- We need user input
+- We need to show additional information
+
+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;">
+  <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>
+
+## Interface
+
+For a more detailed look on the options and return values each of these methods
+is expected to support, [check out it's interface in `@ohif/core`][interface]
+
+| API Member     | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| `create()`     | Creates a new Dialog that is displayed until dismissed |
+| `dismiss()`    | Dismisses the specified dialog                         |
+| `dismissAll()` | Dismisses all dialogs                                  |
+
+## Implementations
+
+| Implementation                       | Consumer                   |
+| ------------------------------------ | -------------------------- |
+| [Dialog Provider][dialog-provider]\* | Baked into Dialog Provider |
+
+`*` - Denotes maintained by OHIF
+
+> 3rd Party implementers may be added to this table via pull requests.
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UIDialogService/index.js
+[dialog-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/DialogProvider.js
+[ux-article]: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
+<!-- prettier-ignore-end -->

docs/latest/services/ui/ui-modal-service.md

@@ -0,0 +1,50 @@
+# UI Modal Service
+
+Modals have similar characteristics to that of Dialogs, but are often larger,
+and only allow for a single instance to be viewable at once. They also tend to
+be centered, and not draggable. They're commonly used when:
+
+- We need to grab the user's attention
+- We need user input
+- We need to show additional information
+
+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;">
+  <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>
+
+## Interface
+
+For a more detailed look on the options and return values each of these methods
+is expected to support, [check out it's interface in `@ohif/core`][interface]
+
+| API Member | Description                           |
+| ---------- | ------------------------------------- |
+| `hide()`   | Hides the open modal                  |
+| `show()`   | Shows the provided content in a modal |
+
+## Implementations
+
+| Implementation                     | Consumer                      |
+| ---------------------------------- | ----------------------------- |
+| [Modal Provider][modal-provider]\* | [OHIFModal][modal-consumer]\* |
+
+`*` - Denotes maintained by OHIF
+
+> 3rd Party implementers may be added to this table via pull requests.
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UIModalService/index.js
+[modal-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/ModalProvider.js
+[modal-consumer]: https://github.com/OHIF/Viewers/tree/master/platform/ui/src/components/ohifModal
+[ux-article]: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
+<!-- prettier-ignore-end -->

docs/latest/services/ui/ui-notification-service.md

@@ -0,0 +1,51 @@
+# UI Notification Service
+
+Notifications can be annoying and disruptive. They can also deliver timely
+helpful information, or expedite the user's workflow. Here is some high level
+guidance on when and how to use them:
+
+- Notifications should be non-interfering (timely, relevant, important)
+- We should only show small/brief notifications
+- Notifications should be contextual to current behavior/actions
+- Notifications can serve warnings (acting as a confirmation)
+
+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;">
+  <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>
+
+## Interface
+
+For a more detailed look on the options and return values each of these methods
+is expected to support, [check out it's interface in `@ohif/core`][interface]
+
+| API Member | Description                             |
+| ---------- | --------------------------------------- |
+| `hide()`   | Hides the specified notification        |
+| `show()`   | Creates and displays a new notification |
+
+## Implementations
+
+| Implementation                           | Consumer                                  |
+| ---------------------------------------- | ----------------------------------------- |
+| [Snackbar Provider][snackbar-provider]\* | [SnackbarContainer][snackbar-container]\* |
+
+`*` - Denotes maintained by OHIF
+
+> 3rd Party implementers may be added to this table via pull requests.
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UINotificationService/index.js
+[snackbar-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/SnackbarProvider.js
+[snackbar-container]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/components/snackbar/SnackbarContainer.js
+[ux-article]: https://uxplanet.org/how-to-design-notifications-for-better-ux-6fb0711be54d
+<!-- prettier-ignore-end -->

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.7.1...@ohif/extension-cornerstone@1.7.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [1.7.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.7.0...@ohif/extension-cornerstone@1.7.1) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
 # [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.6.0...@ohif/extension-cornerstone@1.7.0) (2019-11-25)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",

extensions/cornerstone/src/ConnectedCornerstoneViewport.js

@@ -2,6 +2,7 @@ import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF from '@ohif/core';
 import { connect } from 'react-redux';
 import throttle from 'lodash.throttle';
+import { setEnabledElement } from './state';
 
 const { setViewportActive, setViewportSpecificData } = OHIF.redux.actions;
 const {
@@ -80,11 +81,11 @@ const mapDispatchToProps = (dispatch, ownProps) => {
      */
     onElementEnabled: event => {
       const enabledElement = event.detail.element;
+      setEnabledElement(viewportIndex, enabledElement);
       dispatch(
         setViewportSpecificData(viewportIndex, {
           // TODO: Hack to make sure our plugin info is available from the outset
           plugin: 'cornerstone',
-          dom: enabledElement,
         })
       );
     },

extensions/cornerstone/src/CornerstoneViewportDownloadForm.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+import PropTypes from 'prop-types';
+
+import { ViewportDownloadForm } from '@ohif/ui';
+import { utils } from '@ohif/core';
+
+import { getEnabledElement } from './state';
+
+const MINIMUM_SIZE = 100;
+const DEFAULT_SIZE = 512;
+const MAX_TEXTURE_SIZE = 10000;
+
+const CornerstoneViewportDownloadForm = ({ onClose, activeViewportIndex }) => {
+  const activeEnabledElement = getEnabledElement(activeViewportIndex);
+
+  const enableViewport = viewportElement => {
+    if (viewportElement) {
+      cornerstone.enable(viewportElement);
+    }
+  };
+
+  const disableViewport = viewportElement => {
+    if (viewportElement) {
+      cornerstone.disable(viewportElement);
+    }
+  };
+
+  const updateViewportPreview = (viewportElement, downloadCanvas, fileType) =>
+    new Promise(resolve => {
+      cornerstone.fitToWindow(viewportElement);
+
+      viewportElement.addEventListener(
+        'cornerstoneimagerendered',
+        function updateViewport(event) {
+          const enabledElement = cornerstone.getEnabledElement(event.target)
+            .element;
+          const type = 'image/' + fileType;
+          const dataUrl = downloadCanvas.toDataURL(type, 1);
+
+          let newWidth = enabledElement.offsetHeight;
+          let newHeight = enabledElement.offsetWidth;
+
+          if (newWidth > DEFAULT_SIZE || newHeight > DEFAULT_SIZE) {
+            const multiplier = DEFAULT_SIZE / Math.max(newWidth, newHeight);
+            newHeight *= multiplier;
+            newWidth *= multiplier;
+          }
+
+          resolve({ dataUrl, width: newWidth, height: newHeight });
+
+          viewportElement.removeEventListener(
+            'cornerstoneimagerendered',
+            updateViewport
+          );
+        }
+      );
+    });
+
+  const loadImage = (activeViewport, viewportElement, width, height) =>
+    new Promise(resolve => {
+      if (activeViewport && viewportElement) {
+        const enabledElement = cornerstone.getEnabledElement(activeViewport);
+        const viewport = Object.assign({}, enabledElement.viewport);
+        delete viewport.scale;
+        viewport.translation = {
+          x: 0,
+          y: 0,
+        };
+
+        cornerstone.loadImage(enabledElement.image.imageId).then(image => {
+          cornerstone.displayImage(viewportElement, image);
+          cornerstone.setViewport(viewportElement, viewport);
+          cornerstone.resize(viewportElement, true);
+
+          const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
+          const newHeight = Math.min(height || image.height, MAX_TEXTURE_SIZE);
+
+          resolve({ image, width: newWidth, height: newHeight });
+        });
+      }
+    });
+
+  const toggleAnnotations = (toggle, viewportElement) => {
+    cornerstoneTools.store.state.tools.forEach(({ name }) => {
+      if (toggle) {
+        cornerstoneTools.setToolEnabledForElement(viewportElement, name);
+      } else {
+        cornerstoneTools.setToolDisabledForElement(viewportElement, name);
+      }
+    });
+  };
+
+  const downloadBlob = (
+    filename,
+    fileType,
+    viewportElement,
+    downloadCanvas
+  ) => {
+    const file = `${filename}.${fileType}`;
+    const mimetype = `image/${fileType}`;
+
+    /* Handles JPEG images for IE11 */
+    if (downloadCanvas.msToBlob && fileType === 'jpeg') {
+      const image = downloadCanvas.toDataURL(mimetype, 1);
+      const blob = utils.b64toBlob(
+        image.replace('data:image/jpeg;base64,', ''),
+        mimetype
+      );
+      return window.navigator.msSaveBlob(blob, file);
+    }
+
+    viewportElement.querySelector('canvas').toBlob(blob => {
+      const URLObj = window.URL || window.webkitURL;
+      const a = document.createElement('a');
+      a.href = URLObj.createObjectURL(blob);
+      a.download = file;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+  };
+
+  return (
+    <ViewportDownloadForm
+      onClose={onClose}
+      minimumSize={MINIMUM_SIZE}
+      maximumSize={MAX_TEXTURE_SIZE}
+      defaultSize={DEFAULT_SIZE}
+      canvasClass={'cornerstone-canvas'}
+      activeViewport={activeEnabledElement}
+      enableViewport={enableViewport}
+      disableViewport={disableViewport}
+      updateViewportPreview={updateViewportPreview}
+      loadImage={loadImage}
+      toggleAnnotations={toggleAnnotations}
+      downloadBlob={downloadBlob}
+    />
+  );
+};
+
+CornerstoneViewportDownloadForm.propTypes = {
+  onClose: PropTypes.func,
+  activeViewportIndex: PropTypes.number.isRequired,
+};
+
+export default CornerstoneViewportDownloadForm;

extensions/cornerstone/src/commandsModule.js

@@ -1,261 +1,260 @@
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from '@ohif/core';
+
+import { getEnabledElement } from './state';
+import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 const scroll = cornerstoneTools.import('util/scroll');
 
-const actions = {
-  rotateViewport: ({ viewports, rotation }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+const commandsModule = ({ servicesManager }) => {
+  const actions = {
+    rotateViewport: ({ viewports, rotation }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
-    if (enabledElement) {
-      let viewport = cornerstone.getViewport(enabledElement);
-      viewport.rotation += rotation;
-      cornerstone.setViewport(enabledElement, viewport);
-    }
-  },
-  flipViewportHorizontal: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
-
-    if (enabledElement) {
-      let viewport = cornerstone.getViewport(enabledElement);
-      viewport.hflip = !viewport.hflip;
-      cornerstone.setViewport(enabledElement, viewport);
-    }
-  },
-  flipViewportVertical: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
-
-    if (enabledElement) {
-      let viewport = cornerstone.getViewport(enabledElement);
-      viewport.vflip = !viewport.vflip;
-      cornerstone.setViewport(enabledElement, viewport);
-    }
-  },
-  scaleViewport: ({ viewports, direction }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
-    const step = direction * 0.15;
-
-    if (enabledElement) {
-      if (step) {
+      if (enabledElement) {
         let viewport = cornerstone.getViewport(enabledElement);
-        viewport.scale += step;
+        viewport.rotation += rotation;
         cornerstone.setViewport(enabledElement, viewport);
-      } else {
-        cornerstone.fitToWindow(enabledElement);
       }
-    }
-  },
-  resetViewport: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    },
+    flipViewportHorizontal: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
-    if (enabledElement) {
-      cornerstone.reset(enabledElement);
-    }
-  },
-  invertViewport: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+      if (enabledElement) {
+        let viewport = cornerstone.getViewport(enabledElement);
+        viewport.hflip = !viewport.hflip;
+        cornerstone.setViewport(enabledElement, viewport);
+      }
+    },
+    flipViewportVertical: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
-    if (enabledElement) {
-      let viewport = cornerstone.getViewport(enabledElement);
-      viewport.invert = !viewport.invert;
-      cornerstone.setViewport(enabledElement, viewport);
-    }
-  },
-  // TODO: this is receiving `evt` from `ToolbarRow`. We could use it to have
-  //       better mouseButtonMask sets.
-  setToolActive: ({ toolName }) => {
-    if (!toolName) {
-      console.warn('No toolname provided to setToolActive command');
-    }
-    cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
-  },
-  updateViewportDisplaySet: ({ direction }) => {
-    // TODO
-    console.warn('updateDisplaySet: ', direction);
-  },
-  clearAnnotations: ({ viewports }) => {
-    const element = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
-    if (!element) {
-      return;
-    }
+      if (enabledElement) {
+        let viewport = cornerstone.getViewport(enabledElement);
+        viewport.vflip = !viewport.vflip;
+        cornerstone.setViewport(enabledElement, viewport);
+      }
+    },
+    scaleViewport: ({ direction, viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+      const step = direction * 0.15;
 
-    const enabledElement = cornerstone.getEnabledElement(element);
-    if (!enabledElement || !enabledElement.image) {
-      return;
-    }
-
-    const {
-      toolState,
-    } = cornerstoneTools.globalImageIdSpecificToolStateManager;
-    if (
-      !toolState ||
-      toolState.hasOwnProperty(enabledElement.image.imageId) === false
-    ) {
-      return;
-    }
-
-    const imageIdToolState = toolState[enabledElement.image.imageId];
-
-    const measurementsToRemove = [];
-
-    Object.keys(imageIdToolState).forEach(toolType => {
-      const { data } = imageIdToolState[toolType];
-
-      data.forEach(measurementData => {
-        const { _id, lesionNamingNumber, measurementNumber } = measurementData;
-        if (!_id) {
-          return;
+      if (enabledElement) {
+        if (step) {
+          let viewport = cornerstone.getViewport(enabledElement);
+          viewport.scale += step;
+          cornerstone.setViewport(enabledElement, viewport);
+        } else {
+          cornerstone.fitToWindow(enabledElement);
         }
+      }
+    },
+    resetViewport: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
-        measurementsToRemove.push({
-          toolType,
-          _id,
-          lesionNamingNumber,
-          measurementNumber,
+      if (enabledElement) {
+        cornerstone.reset(enabledElement);
+      }
+    },
+    invertViewport: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+
+      if (enabledElement) {
+        let viewport = cornerstone.getViewport(enabledElement);
+        viewport.invert = !viewport.invert;
+        cornerstone.setViewport(enabledElement, viewport);
+      }
+    },
+    // TODO: this is receiving `evt` from `ToolbarRow`. We could use it to have
+    //       better mouseButtonMask sets.
+    setToolActive: ({ toolName }) => {
+      if (!toolName) {
+        console.warn('No toolname provided to setToolActive command');
+      }
+      cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
+    },
+    updateViewportDisplaySet: ({ direction }) => {
+      // TODO
+      console.warn('updateDisplaySet: ', direction);
+    },
+    clearAnnotations: ({ viewports }) => {
+      const element = getEnabledElement(viewports.activeViewportIndex);
+      if (!element) {
+        return;
+      }
+
+      const enabledElement = cornerstone.getEnabledElement(element);
+      if (!enabledElement || !enabledElement.image) {
+        return;
+      }
+
+      const {
+        toolState,
+      } = cornerstoneTools.globalImageIdSpecificToolStateManager;
+      if (
+        !toolState ||
+        toolState.hasOwnProperty(enabledElement.image.imageId) === false
+      ) {
+        return;
+      }
+
+      const imageIdToolState = toolState[enabledElement.image.imageId];
+
+      const measurementsToRemove = [];
+
+      Object.keys(imageIdToolState).forEach(toolType => {
+        const { data } = imageIdToolState[toolType];
+
+        data.forEach(measurementData => {
+          const {
+            _id,
+            lesionNamingNumber,
+            measurementNumber,
+          } = measurementData;
+          if (!_id) {
+            return;
+          }
+
+          measurementsToRemove.push({
+            toolType,
+            _id,
+            lesionNamingNumber,
+            measurementNumber,
+          });
         });
       });
-    });
 
-    measurementsToRemove.forEach(measurementData => {
-      OHIF.measurements.MeasurementHandlers.onRemoved({
-        detail: {
-          toolType: measurementData.toolType,
-          measurementData,
+      measurementsToRemove.forEach(measurementData => {
+        OHIF.measurements.MeasurementHandlers.onRemoved({
+          detail: {
+            toolType: measurementData.toolType,
+            measurementData,
+          },
+        });
+      });
+    },
+    nextImage: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+      scroll(enabledElement, 1);
+    },
+    previousImage: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+      scroll(enabledElement, -1);
+    },
+    getActiveViewportEnabledElement: ({ viewports }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+      return enabledElement;
+    },
+    showDownloadViewportModal: ({ title, viewports }) => {
+      const activeViewportIndex = viewports.activeViewportIndex;
+      const { UIModalService } = servicesManager.services;
+      UIModalService.show({
+        content: CornerstoneViewportDownloadForm,
+        title,
+        contentProps: {
+          activeViewportIndex,
+          onClose: UIModalService.hide,
         },
       });
-    });
-  },
-  nextImage: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    },
+  };
 
-    scroll(enabledElement, 1);
-  },
-  previousImage: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+  const definitions = {
+    showDownloadViewportModal: {
+      commandFn: actions.showDownloadViewportModal,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    getActiveViewportEnabledElement: {
+      commandFn: actions.getActiveViewportEnabledElement,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    rotateViewportCW: {
+      commandFn: actions.rotateViewport,
+      storeContexts: ['viewports'],
+      options: { rotation: 90 },
+    },
+    rotateViewportCCW: {
+      commandFn: actions.rotateViewport,
+      storeContexts: ['viewports'],
+      options: { rotation: -90 },
+    },
+    invertViewport: {
+      commandFn: actions.invertViewport,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    flipViewportVertical: {
+      commandFn: actions.flipViewportVertical,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    flipViewportHorizontal: {
+      commandFn: actions.flipViewportHorizontal,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    scaleUpViewport: {
+      commandFn: actions.scaleViewport,
+      storeContexts: ['viewports'],
+      options: { direction: 1 },
+    },
+    scaleDownViewport: {
+      commandFn: actions.scaleViewport,
+      storeContexts: ['viewports'],
+      options: { direction: -1 },
+    },
+    fitViewportToWindow: {
+      commandFn: actions.scaleViewport,
+      storeContexts: ['viewports'],
+      options: { direction: 0 },
+    },
+    resetViewport: {
+      commandFn: actions.resetViewport,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    clearAnnotations: {
+      commandFn: actions.clearAnnotations,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    nextImage: {
+      commandFn: actions.nextImage,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    previousImage: {
+      commandFn: actions.previousImage,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    // TODO: First/Last image
+    // Next/Previous series/DisplaySet
+    nextViewportDisplaySet: {
+      commandFn: actions.updateViewportDisplaySet,
+      storeContexts: [],
+      options: { direction: 1 },
+    },
+    previousViewportDisplaySet: {
+      commandFn: actions.updateViewportDisplaySet,
+      storeContexts: [],
+      options: { direction: -1 },
+    },
+    // TOOLS
+    setToolActive: {
+      commandFn: actions.setToolActive,
+      storeContexts: [],
+      options: {},
+    },
+  };
 
-    scroll(enabledElement, -1);
-  },
+  return {
+    actions,
+    definitions,
+    defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE',
+  };
 };
 
-const definitions = {
-  rotateViewportCW: {
-    commandFn: actions.rotateViewport,
-    storeContexts: ['viewports'],
-    options: { rotation: 90 },
-  },
-  rotateViewportCCW: {
-    commandFn: actions.rotateViewport,
-    storeContexts: ['viewports'],
-    options: { rotation: -90 },
-  },
-  invertViewport: {
-    commandFn: actions.invertViewport,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  flipViewportVertical: {
-    commandFn: actions.flipViewportVertical,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  flipViewportHorizontal: {
-    commandFn: actions.flipViewportHorizontal,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  scaleUpViewport: {
-    commandFn: actions.scaleViewport,
-    storeContexts: ['viewports'],
-    options: { direction: 1 },
-  },
-  scaleDownViewport: {
-    commandFn: actions.scaleViewport,
-    storeContexts: ['viewports'],
-    options: { direction: -1 },
-  },
-  fitViewportToWindow: {
-    commandFn: actions.scaleViewport,
-    storeContexts: ['viewports'],
-    options: { direction: 0 },
-  },
-  resetViewport: {
-    commandFn: actions.resetViewport,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  clearAnnotations: {
-    commandFn: actions.clearAnnotations,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  nextImage: {
-    commandFn: actions.nextImage,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  previousImage: {
-    commandFn: actions.previousImage,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  // TODO: First/Last image
-  // Next/Previous series/DisplaySet
-  nextViewportDisplaySet: {
-    commandFn: actions.updateViewportDisplaySet,
-    storeContexts: [],
-    options: { direction: 1 },
-  },
-  previousViewportDisplaySet: {
-    commandFn: actions.updateViewportDisplaySet,
-    storeContexts: [],
-    options: { direction: -1 },
-  },
-  // TOOLS
-  setToolActive: {
-    commandFn: actions.setToolActive,
-    storeContexts: [],
-    options: {},
-  },
-};
-
-/**
- * Grabs `dom` reference for the enabledElement of
- * the active viewport
- */
-function _getActiveViewportEnabledElement(viewports, activeIndex) {
-  const activeViewport = viewports[activeIndex] || {};
-  return activeViewport.dom;
-}
-
-export default {
-  actions,
-  definitions,
-  defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE',
-};
+export default commandsModule;

extensions/cornerstone/src/index.js

@@ -2,6 +2,7 @@ import init from './init.js';
 import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
+import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 
 const OHIFCornerstoneViewport = asyncComponent(() =>
   import(
@@ -33,7 +34,9 @@ export default {
   getToolbarModule() {
     return toolbarModule;
   },
-  getCommandsModule() {
-    return commandsModule;
+  getCommandsModule({ servicesManager }) {
+    return commandsModule({ servicesManager });
   },
 };
+
+export { CornerstoneViewportDownloadForm };

extensions/cornerstone/src/state.js

@@ -0,0 +1,20 @@
+const state = {
+  enabledElements: {},
+};
+
+/**
+ * Sets the enabled element `dom` reference for an active viewport.
+ * @param {HTMLElement} dom Active viewport element.
+ * @return void
+ */
+const setEnabledElement = (viewportIndex, element) =>
+  (state.enabledElements[viewportIndex] = element);
+
+/**
+ * Grabs the enabled element `dom` reference of an active viewport.
+ *
+ * @return {HTMLElement} Active viewport element.
+ */
+const getEnabledElement = viewportIndex => state.enabledElements[viewportIndex];
+
+export { setEnabledElement, getEnabledElement };

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.1...@ohif/extension-dicom-html@1.0.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
 ## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.0...@ohif/extension-dicom-html@1.0.1) (2019-10-29)
 
 

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-html/src/ConnectedDicomHtmlViewport.js

@@ -6,7 +6,7 @@ const { setViewportActive } = OHIF.redux.actions;
 
 const mapStateToProps = (state, ownProps) => {
   const { viewportIndex, byteArray } = ownProps;
-  const activeViewportIndex = state.viewports;
+  const { activeViewportIndex } = state.viewports;
 
   return {
     viewportIndex,

extensions/dicom-html/src/DicomHtmlViewport.js

@@ -238,7 +238,7 @@ class DicomHtmlViewport extends Component {
     } = this.props;
 
     if (viewportIndex !== activeViewportIndex) {
-      setViewportActive();
+      setViewportActive(viewportIndex);
     }
   };
 

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.54.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.2...@ohif/extension-vtk@0.54.3) (2019-12-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.54.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.1...@ohif/extension-vtk@0.54.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.54.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.0...@ohif/extension-vtk@0.54.1) (2019-11-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 # [0.54.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.13...@ohif/extension-vtk@0.54.0) (2019-11-25)
 
 

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.54.0",
+  "version": "0.54.3",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^1.13.0",
-    "@ohif/ui": "^0.65.0",
+    "@ohif/core": "^1.13.3",
+    "@ohif/ui": "^0.65.1",
     "cornerstone-tools": "^4.8.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

extensions/vtk/src/commandsModule.js

@@ -1,3 +1,4 @@
+import throttle from 'lodash.throttle';
 import {
   vtkInteractorStyleMPRCrosshairs,
   vtkInteractorStyleMPRWindowLevel,
@@ -8,354 +9,358 @@ import {
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
-import throttle from 'lodash.throttle';
 
 const { BlendMode } = Constants;
 
-// TODO: Put this somewhere else
-let apis = {};
+const commandsModule = ({ commandsManager }) => {
+  // TODO: Put this somewhere else
+  let apis = {};
 
-async function _getActiveViewportVTKApi(viewports) {
-  const {
-    numRows,
-    numColumns,
-    layout,
-    viewportSpecificData,
-    activeViewportIndex,
-  } = viewports;
+  async function _getActiveViewportVTKApi(viewports) {
+    const {
+      numRows,
+      numColumns,
+      layout,
+      viewportSpecificData,
+      activeViewportIndex,
+    } = viewports;
 
-  const currentData = layout.viewports[activeViewportIndex];
-  if (currentData && currentData.plugin === 'vtk') {
-    // TODO: I was storing/pulling this from Redux but ran into weird issues
-    if (apis[activeViewportIndex]) {
-      return apis[activeViewportIndex];
+    const currentData = layout.viewports[activeViewportIndex];
+    if (currentData && currentData.plugin === 'vtk') {
+      // TODO: I was storing/pulling this from Redux but ran into weird issues
+      if (apis[activeViewportIndex]) {
+        return apis[activeViewportIndex];
+      }
     }
+
+    const displaySet = viewportSpecificData[activeViewportIndex];
+
+    let api;
+    if (!api) {
+      try {
+        api = await setViewportToVTK(
+          displaySet,
+          activeViewportIndex,
+          numRows,
+          numColumns,
+          layout,
+          viewportSpecificData
+        );
+      } catch (error) {
+        throw new Error(error);
+      }
+    }
+
+    return api;
   }
 
-  const displaySet = viewportSpecificData[activeViewportIndex];
+  function _setView(api, sliceNormal, viewUp) {
+    const renderWindow = api.genericRenderWindow.getRenderWindow();
+    const istyle = renderWindow.getInteractor().getInteractorStyle();
+    istyle.setSliceNormal(...sliceNormal);
+    istyle.setViewUp(...viewUp);
 
-  let api;
-  if (!api) {
-    try {
-      api = await setViewportToVTK(
-        displaySet,
-        activeViewportIndex,
-        numRows,
-        numColumns,
-        layout,
-        viewportSpecificData
+    renderWindow.render();
+  }
+
+  function getVOIFromCornerstoneViewport() {
+    const dom = commandsManager.runCommand('getActiveViewportEnabledElement');
+    const cornerstoneElement = cornerstone.getEnabledElement(dom);
+
+    if (cornerstoneElement) {
+      const imageId = cornerstoneElement.image.imageId;
+
+      const { modality } = cornerstone.metaData.get(
+        'generalSeriesModule',
+        imageId
       );
-    } catch (error) {
-      throw new Error(error);
+
+      if (modality !== 'PT') {
+        const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
+
+        return {
+          windowWidth,
+          windowCenter,
+        };
+      }
     }
   }
 
-  return api;
-}
+  function setVOI(voi) {
+    const { windowWidth, windowCenter } = voi;
+    const lower = windowCenter - windowWidth / 2.0;
+    const upper = windowCenter + windowWidth / 2.0;
 
-function _setView(api, sliceNormal, viewUp) {
-  const renderWindow = api.genericRenderWindow.getRenderWindow();
-  const istyle = renderWindow.getInteractor().getInteractorStyle();
-  istyle.setSliceNormal(...sliceNormal);
-  istyle.setViewUp(...viewUp);
+    const rgbTransferFunction = apis[0].volumes[0]
+      .getProperty()
+      .getRGBTransferFunction(0);
 
-  renderWindow.render();
-}
+    rgbTransferFunction.setRange(lower, upper);
 
-const actions = {
-  axial: async ({ viewports }) => {
-    const api = await _getActiveViewportVTKApi(viewports);
-
-    apis[viewports.activeViewportIndex] = api;
-
-    _setView(api, [0, 0, 1], [0, -1, 0]);
-  },
-  sagittal: async ({ viewports }) => {
-    const api = await _getActiveViewportVTKApi(viewports);
-
-    apis[viewports.activeViewportIndex] = api;
-
-    _setView(api, [1, 0, 0], [0, 0, 1]);
-  },
-  coronal: async ({ viewports }) => {
-    const api = await _getActiveViewportVTKApi(viewports);
-
-    apis[viewports.activeViewportIndex] = api;
-
-    _setView(api, [0, 1, 0], [0, 0, 1]);
-  },
-  enableRotateTool: () => {
     apis.forEach(api => {
-      const istyle = vtkInteractorStyleMPRRotate.newInstance();
-
-      api.setInteractorStyle({ istyle });
+      api.updateVOI(windowWidth, windowCenter);
     });
-  },
-  enableCrosshairsTool: () => {
-    apis.forEach((api, apiIndex) => {
-      const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+  }
 
-      api.setInteractorStyle({
-        istyle,
-        configuration: { apis, apiIndex },
-      });
-    });
-  },
-  enableLevelTool: () => {
-    function updateVOI(apis, windowWidth, windowCenter) {
+  const actions = {
+    axial: async ({ viewports }) => {
+      const api = await _getActiveViewportVTKApi(viewports);
+
+      apis[viewports.activeViewportIndex] = api;
+
+      _setView(api, [0, 0, 1], [0, -1, 0]);
+    },
+    sagittal: async ({ viewports }) => {
+      const api = await _getActiveViewportVTKApi(viewports);
+
+      apis[viewports.activeViewportIndex] = api;
+
+      _setView(api, [1, 0, 0], [0, 0, 1]);
+    },
+    coronal: async ({ viewports }) => {
+      const api = await _getActiveViewportVTKApi(viewports);
+
+      apis[viewports.activeViewportIndex] = api;
+
+      _setView(api, [0, 1, 0], [0, 0, 1]);
+    },
+    enableRotateTool: () => {
       apis.forEach(api => {
-        api.updateVOI(windowWidth, windowCenter);
+        const istyle = vtkInteractorStyleMPRRotate.newInstance();
+
+        api.setInteractorStyle({ istyle });
       });
-    }
+    },
+    enableCrosshairsTool: () => {
+      apis.forEach((api, apiIndex) => {
+        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
 
-    const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
-
-    const callbacks = {
-      setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
-        apis.forEach(api => {
-          const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-          renderWindow.render();
+        api.setInteractorStyle({
+          istyle,
+          configuration: { apis, apiIndex },
         });
-
-        throttledUpdateVOIs(apis, windowWidth, windowCenter);
-      },
-    };
-
-    apis.forEach(api => {
-      const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
-
-      api.setInteractorStyle({ istyle, callbacks });
-    });
-  },
-  setSlabThickness: ({ slabThickness }) => {
-    apis.forEach(api => {
-      api.setSlabThickness(slabThickness);
-    });
-  },
-  changeSlabThickness: ({ change }) => {
-    apis.forEach(api => {
-      const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
-
-      api.setSlabThickness(slabThickness);
-    });
-  },
-  setBlendModeToComposite: () => {
-    apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
-
-      const slabThickness = api.getSlabThickness();
-
-      const mapper = api.volumes[0].getMapper();
-      if (mapper.setBlendModeToComposite) {
-        mapper.setBlendModeToComposite();
-      }
-
-      if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(slabThickness);
-      }
-      renderWindow.render();
-    });
-  },
-  setBlendModeToMaximumIntensity: () => {
-    apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const mapper = api.volumes[0].getMapper();
-      if (mapper.setBlendModeToMaximumIntensity) {
-        mapper.setBlendModeToMaximumIntensity();
-      }
-      renderWindow.render();
-    });
-  },
-  setBlendMode: ({ blendMode }) => {
-    apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-      api.volumes[0].getMapper().setBlendMode(blendMode);
-
-      renderWindow.render();
-    });
-  },
-  mpr2d: async ({ viewports }) => {
-    // TODO push a lot of this backdoor logic lower down to the library level.
-    const displaySet =
-      viewports.viewportSpecificData[viewports.activeViewportIndex];
-
-    // Get current VOI if cornerstone viewport.
-    const cornerstoneVOI = getVOIFromCornerstoneViewport(displaySet);
-
-    const viewportProps = [
-      {
-        //Axial
-        orientation: {
-          sliceNormal: [0, 0, 1],
-          viewUp: [0, -1, 0],
-        },
-      },
-      {
-        // Sagital
-        orientation: {
-          sliceNormal: [1, 0, 0],
-          viewUp: [0, 0, 1],
-        },
-      },
-      {
-        // Coronal
-        orientation: {
-          sliceNormal: [0, 1, 0],
-          viewUp: [0, 0, 1],
-        },
-      },
-    ];
-
-    try {
-      apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
-    } catch (error) {
-      throw new Error(error);
-    }
-
-    if (cornerstoneVOI) {
-      setVOI(cornerstoneVOI);
-    }
-
-    // Add widgets and set default interactorStyle of each viewport.
-    apis.forEach((api, apiIndex) => {
-      api.addSVGWidget(
-        vtkSVGCrosshairsWidget.newInstance(),
-        'crosshairsWidget'
-      );
-
-      const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
-
-      api.setInteractorStyle({
-        istyle,
-        configuration: { apis, apiIndex },
       });
-    });
-  },
-};
-
-window.vtkActions = actions;
-
-const definitions = {
-  axial: {
-    commandFn: actions.axial,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  coronal: {
-    commandFn: actions.coronal,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  sagittal: {
-    commandFn: actions.sagittal,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  enableRotateTool: {
-    commandFn: actions.enableRotateTool,
-    storeContexts: [],
-    options: {},
-  },
-  enableCrosshairsTool: {
-    commandFn: actions.enableCrosshairsTool,
-    storeContexts: [],
-    options: {},
-  },
-  enableLevelTool: {
-    commandFn: actions.enableLevelTool,
-    storeContexts: [],
-    options: {},
-  },
-  setBlendModeToComposite: {
-    commandFn: actions.setBlendModeToComposite,
-    storeContexts: [],
-    options: { blendMode: BlendMode.COMPOSITE_BLEND },
-  },
-  setBlendModeToMaximumIntensity: {
-    commandFn: actions.setBlendModeToMaximumIntensity,
-    storeContexts: [],
-    options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
-  },
-  setBlendModeToMinimumIntensity: {
-    commandFn: actions.setBlendMode,
-    storeContexts: [],
-    options: { blendMode: BlendMode.MINIMUM_INTENSITY_BLEND },
-  },
-  setBlendModeToAverageIntensity: {
-    commandFn: actions.setBlendMode,
-    storeContexts: [],
-    options: { blendMode: BlendMode.AVERAGE_INTENSITY_BLEND },
-  },
-  setSlabThickness: {
-    // TODO: How do we pass in a function argument?
-    commandFn: actions.setSlabThickness,
-    storeContexts: [],
-    options: {},
-  },
-  increaseSlabThickness: {
-    commandFn: actions.changeSlabThickness,
-    storeContexts: [],
-    options: {
-      change: 3,
     },
-  },
-  decreaseSlabThickness: {
-    commandFn: actions.changeSlabThickness,
-    storeContexts: [],
-    options: {
-      change: -3,
-    },
-  },
-  mpr2d: {
-    commandFn: actions.mpr2d,
-    storeContexts: ['viewports'],
-    options: {},
-    context: 'VIEWER',
-  },
-};
+    enableLevelTool: () => {
+      function updateVOI(apis, windowWidth, windowCenter) {
+        apis.forEach(api => {
+          api.updateVOI(windowWidth, windowCenter);
+        });
+      }
 
-export default {
-  definitions,
-  defaultContext: 'ACTIVE_VIEWPORT::VTK',
-};
+      const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
 
-function getVOIFromCornerstoneViewport(displaySet) {
-  const cornerstoneElement = cornerstone.getEnabledElement(displaySet.dom);
+      const callbacks = {
+        setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
+          apis.forEach(api => {
+            const renderWindow = api.genericRenderWindow.getRenderWindow();
 
-  if (cornerstoneElement) {
-    const imageId = cornerstoneElement.image.imageId;
+            renderWindow.render();
+          });
 
-    const { modality } = cornerstone.metaData.get(
-      'generalSeriesModule',
-      imageId
-    );
-
-    if (modality !== 'PT') {
-      const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
-
-      return {
-        windowWidth,
-        windowCenter,
+          throttledUpdateVOIs(apis, windowWidth, windowCenter);
+        },
       };
-    }
-  }
-}
 
-function setVOI(voi) {
-  const { windowWidth, windowCenter } = voi;
-  const lower = windowCenter - windowWidth / 2.0;
-  const upper = windowCenter + windowWidth / 2.0;
+      apis.forEach(api => {
+        const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
 
-  const rgbTransferFunction = apis[0].volumes[0]
-    .getProperty()
-    .getRGBTransferFunction(0);
+        api.setInteractorStyle({ istyle, callbacks });
+      });
+    },
+    setSlabThickness: ({ slabThickness }) => {
+      apis.forEach(api => {
+        api.setSlabThickness(slabThickness);
+      });
+    },
+    changeSlabThickness: ({ change }) => {
+      apis.forEach(api => {
+        const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
 
-  rgbTransferFunction.setRange(lower, upper);
+        api.setSlabThickness(slabThickness);
+      });
+    },
+    setBlendModeToComposite: () => {
+      apis.forEach(api => {
+        const renderWindow = api.genericRenderWindow.getRenderWindow();
+        const istyle = renderWindow.getInteractor().getInteractorStyle();
 
-  apis.forEach(api => {
-    api.updateVOI(windowWidth, windowCenter);
-  });
-}
+        const slabThickness = api.getSlabThickness();
+
+        const mapper = api.volumes[0].getMapper();
+        if (mapper.setBlendModeToComposite) {
+          mapper.setBlendModeToComposite();
+        }
+
+        if (istyle.setSlabThickness) {
+          istyle.setSlabThickness(slabThickness);
+        }
+        renderWindow.render();
+      });
+    },
+    setBlendModeToMaximumIntensity: () => {
+      apis.forEach(api => {
+        const renderWindow = api.genericRenderWindow.getRenderWindow();
+        const mapper = api.volumes[0].getMapper();
+        if (mapper.setBlendModeToMaximumIntensity) {
+          mapper.setBlendModeToMaximumIntensity();
+        }
+        renderWindow.render();
+      });
+    },
+    setBlendMode: ({ blendMode }) => {
+      apis.forEach(api => {
+        const renderWindow = api.genericRenderWindow.getRenderWindow();
+
+        api.volumes[0].getMapper().setBlendMode(blendMode);
+
+        renderWindow.render();
+      });
+    },
+    mpr2d: async ({ viewports }) => {
+      // TODO push a lot of this backdoor logic lower down to the library level.
+      const displaySet =
+        viewports.viewportSpecificData[viewports.activeViewportIndex];
+
+      // Get current VOI if cornerstone viewport.
+      const cornerstoneVOI = getVOIFromCornerstoneViewport();
+
+      const viewportProps = [
+        {
+          //Axial
+          orientation: {
+            sliceNormal: [0, 0, 1],
+            viewUp: [0, -1, 0],
+          },
+        },
+        {
+          // Sagital
+          orientation: {
+            sliceNormal: [1, 0, 0],
+            viewUp: [0, 0, 1],
+          },
+        },
+        {
+          // Coronal
+          orientation: {
+            sliceNormal: [0, 1, 0],
+            viewUp: [0, 0, 1],
+          },
+        },
+      ];
+
+      try {
+        apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
+      } catch (error) {
+        throw new Error(error);
+      }
+
+      if (cornerstoneVOI) {
+        setVOI(cornerstoneVOI);
+      }
+
+      // Add widgets and set default interactorStyle of each viewport.
+      apis.forEach((api, apiIndex) => {
+        api.addSVGWidget(
+          vtkSVGCrosshairsWidget.newInstance(),
+          'crosshairsWidget'
+        );
+
+        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+
+        api.setInteractorStyle({
+          istyle,
+          configuration: { apis, apiIndex },
+        });
+      });
+    },
+  };
+
+  window.vtkActions = actions;
+
+  const definitions = {
+    axial: {
+      commandFn: actions.axial,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    coronal: {
+      commandFn: actions.coronal,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    sagittal: {
+      commandFn: actions.sagittal,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    enableRotateTool: {
+      commandFn: actions.enableRotateTool,
+      storeContexts: [],
+      options: {},
+    },
+    enableCrosshairsTool: {
+      commandFn: actions.enableCrosshairsTool,
+      storeContexts: [],
+      options: {},
+    },
+    enableLevelTool: {
+      commandFn: actions.enableLevelTool,
+      storeContexts: [],
+      options: {},
+    },
+    setBlendModeToComposite: {
+      commandFn: actions.setBlendModeToComposite,
+      storeContexts: [],
+      options: { blendMode: BlendMode.COMPOSITE_BLEND },
+    },
+    setBlendModeToMaximumIntensity: {
+      commandFn: actions.setBlendModeToMaximumIntensity,
+      storeContexts: [],
+      options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
+    },
+    setBlendModeToMinimumIntensity: {
+      commandFn: actions.setBlendMode,
+      storeContexts: [],
+      options: { blendMode: BlendMode.MINIMUM_INTENSITY_BLEND },
+    },
+    setBlendModeToAverageIntensity: {
+      commandFn: actions.setBlendMode,
+      storeContexts: [],
+      options: { blendMode: BlendMode.AVERAGE_INTENSITY_BLEND },
+    },
+    setSlabThickness: {
+      // TODO: How do we pass in a function argument?
+      commandFn: actions.setSlabThickness,
+      storeContexts: [],
+      options: {},
+    },
+    increaseSlabThickness: {
+      commandFn: actions.changeSlabThickness,
+      storeContexts: [],
+      options: {
+        change: 3,
+      },
+    },
+    decreaseSlabThickness: {
+      commandFn: actions.changeSlabThickness,
+      storeContexts: [],
+      options: {
+        change: -3,
+      },
+    },
+    mpr2d: {
+      commandFn: actions.mpr2d,
+      storeContexts: ['viewports'],
+      options: {},
+      context: 'VIEWER',
+    },
+  };
+
+  return {
+    definitions,
+    defaultContext: 'ACTIVE_VIEWPORT::VTK',
+  };
+};
+
+export default commandsModule;

extensions/vtk/src/index.js

@@ -20,8 +20,8 @@ const vtkExtension = {
   getToolbarModule() {
     return toolbarModule;
   },
-  getCommandsModule() {
-    return commandsModule;
+  getCommandsModule({ commandsManager }) {
+    return commandsModule({ commandsManager });
   },
 };
 

platform/core/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.3](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.2...@ohif/core@1.13.3) (2019-12-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [1.13.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.1...@ohif/core@1.13.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [1.13.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.0...@ohif/core@1.13.1) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
 # [1.13.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.12.0...@ohif/core@1.13.0) (2019-11-25)
 
 

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "1.13.0",
+  "version": "1.13.3",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",

platform/core/src/classes/HotkeysManager.js

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash.clonedeep';
 import hotkeys from './hotkeys';
 import log from './../log.js';
 
@@ -44,20 +43,68 @@ export class HotkeysManager {
   }
 
   /**
-   * Registers a list of hotkeydefinitions. Optionally, sets the
-   * default hotkey bindings for all provided definitions. These
+   * Registers a list of hotkeydefinitions.
+   *
+   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
+   */
+  setHotkeys(hotkeyDefinitions) {
+    const definitions = Array.isArray(hotkeyDefinitions)
+      ? [...hotkeyDefinitions]
+      : this._parseToArrayLike(hotkeyDefinitions);
+
+    definitions.forEach(definition => this.registerHotkeys(definition));
+  }
+
+  /**
+   * Set default hotkey bindings. These
    * values are used in `this.restoreDefaultBindings`.
    *
-   * @param {HotkeyDefinition[]} hotkeyDefinitions
-   * @param {Boolean} [isDefaultDefinitions]
+   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
    */
-  setHotkeys(hotkeyDefinitions, isDefaultDefinitions = false) {
-    const definitions = cloneDeep(hotkeyDefinitions);
-    definitions.forEach(definition => this.registerHotkeys(definition));
+  setDefaultHotKeys(hotkeyDefinitions) {
+    const definitions = Array.isArray(hotkeyDefinitions)
+      ? [...hotkeyDefinitions]
+      : this._parseToArrayLike(hotkeyDefinitions);
 
-    if (isDefaultDefinitions) {
-      this.hotkeyDefaults = definitions;
-    }
+    this.hotkeyDefaults = definitions;
+  }
+
+  /**
+   * It parses given object containing hotkeyDefinition to array like.
+   * Each property of given object will be mapped to an object of an array. And its property name will be the value of a property named as commandName
+   *
+   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
+   * @returns {HotkeyDefinition[]}
+   */
+  _parseToArrayLike(hotkeyDefinitionsObj) {
+    const copy = { ...hotkeyDefinitionsObj };
+    return Object.entries(copy).map(entryValue =>
+      this._parseToHotKeyObj(entryValue[0], entryValue[1])
+    );
+  }
+
+  /**
+   * Return HotkeyDefinition object like based on given property name and property value
+   * @param {string} propertyName property name of hotkey definition object
+   * @param {object} propertyValue property value of hotkey definition object
+   *
+   * @example
+   *
+   * const hotKeyObj = {hotKeyDefA: {keys:[],....}}
+   *
+   * const parsed = _parseToHotKeyObj(Object.keys(hotKeyDefA)[0], hotKeyObj[hotKeyDefA]);
+   *  {
+   *   commandName: hotKeyDefA,
+   *   keys: [],
+   *   ....
+   *  }
+   *
+   */
+  _parseToHotKeyObj(propertyName, propertyValue) {
+    return {
+      commandName: propertyName,
+      ...propertyValue,
+    };
   }
 
   /**

platform/core/src/classes/HotkeysManager.test.js

@@ -94,18 +94,20 @@ describe('HotkeysManager', () => {
       expect(firstCallArgs).toEqual(hotkeyDefinitions[0]);
       expect(secondCallArgs).toEqual(hotkeyDefinitions[1]);
     });
-    it('does not set this.hotkeyDefaults by default', () => {
+    it('does not set this.hotkeyDefaults when calling setHotKeys', () => {
       const hotkeyDefinitions = [{ commandName: 'dance', keys: '+' }];
 
       hotkeysManager.setHotkeys(hotkeyDefinitions);
 
       expect(hotkeysManager.hotkeyDefaults).toEqual([]);
     });
-    it('sets this.hotkeyDefaults when isDefaultDefinitions is true', () => {
-      const hotkeyDefinitions = [{ commandName: 'dance', keys: '+' }];
-      const isDefaultDefinitions = true;
+  });
 
-      hotkeysManager.setHotkeys(hotkeyDefinitions, isDefaultDefinitions);
+  describe('setDefaultHotKeys()', () => {
+    it('it sets default hotkeys', () => {
+      const hotkeyDefinitions = [{ commandName: 'dance', keys: '+' }];
+
+      hotkeysManager.setDefaultHotKeys(hotkeyDefinitions);
 
       expect(hotkeysManager.hotkeyDefaults).toEqual(hotkeyDefinitions);
     });

platform/core/src/extensions/ExtensionManager.js

@@ -69,6 +69,7 @@ export default class ExtensionManager {
     if (extension.preRegistration) {
       extension.preRegistration({
         servicesManager: this._servicesManager,
+        commandsManager: this._commandsManager,
         configuration,
       });
     }
@@ -112,6 +113,7 @@ export default class ExtensionManager {
     try {
       const extensionModule = getModuleFn({
         servicesManager: this._servicesManager,
+        commandsManager: this._commandsManager,
       });
 
       if (!extensionModule) {

platform/core/src/extensions/ExtensionManager.test.js

@@ -49,7 +49,7 @@ describe('ExtensionManager.js', () => {
       expect(fakeExtension.preRegistration.mock.calls.length).toBe(1);
     });
 
-    it('calls preRegistration() passing configuration and servicesManager instance for extension', () => {
+    it('calls preRegistration() passing configuration along with servicesManager and commandsManager instances for extension', () => {
       const configuration = { config: 'Some configuration' };
       extensionManager._servicesManager = { services: { TestService: {} } };
 
@@ -60,6 +60,7 @@ describe('ExtensionManager.js', () => {
       // Assert
       expect(fakeExtension.preRegistration.mock.calls[0][0]).toEqual({
         servicesManager: extensionManager._servicesManager,
+        commandsManager: extensionManager._commandsManager,
         configuration,
       });
     });
@@ -134,7 +135,7 @@ describe('ExtensionManager.js', () => {
       );
     });
 
-    it('successfully passes a servicesManager instance to each module', () => {
+    it('successfully passes a servicesManager and commandsManager instances to each module', () => {
       extensionManager._servicesManager = { services: { TestService: {} } };
 
       const extension = {
@@ -150,6 +151,7 @@ describe('ExtensionManager.js', () => {
 
       expect(extension.getViewportModule.mock.calls[0][0]).toEqual({
         servicesManager: extensionManager._servicesManager,
+        commandsManager: extensionManager._commandsManager,
       });
     });
 

platform/core/src/redux/actions.js

@@ -12,13 +12,25 @@ import {
   SET_VIEWPORT_LAYOUT_AND_DATA,
 } from './constants/ActionTypes.js';
 
+/**
+ * The definition of a viewport layout.
+ *
+ * @typedef {Object} ViewportLayout
+ * @property {number} numRows -
+ * @property {number} numColumns -
+ * @property {array} viewports -
+ */
+
 /**
  * VIEWPORT
  */
-export const setViewportSpecificData = (viewportIndex, data) => ({
+export const setViewportSpecificData = (
+  viewportIndex,
+  viewportSpecificData
+) => ({
   type: SET_VIEWPORT,
   viewportIndex,
-  data,
+  viewportSpecificData,
 });
 
 export const setViewportActive = viewportIndex => ({
@@ -27,10 +39,7 @@ export const setViewportActive = viewportIndex => ({
 });
 
 /**
- * @param {object} layout
- * @param {number} layout.numRows
- * @param {number} layout.numColumns
- * @param {array} layout.viewports
+ * @param {ViewportLayout} layout
  */
 export const setLayout = ({ numRows, numColumns, viewports }) => ({
   type: SET_VIEWPORT_LAYOUT,
@@ -40,10 +49,9 @@ export const setLayout = ({ numRows, numColumns, viewports }) => ({
 });
 
 /**
- * @param {object} layout
  * @param {number} layout.numRows
  * @param {number} layout.numColumns
- * @param {array} layout.viewports
+ * @param {array} viewports
  */
 export const setViewportLayoutAndData = (
   { numRows, numColumns, viewports },
@@ -61,9 +69,9 @@ export const clearViewportSpecificData = viewportIndex => ({
   viewportIndex,
 });
 
-export const setActiveViewportSpecificData = data => ({
+export const setActiveViewportSpecificData = viewportSpecificData => ({
   type: SET_ACTIVE_SPECIFIC_DATA,
-  data,
+  viewportSpecificData,
 });
 
 /**
@@ -113,13 +121,18 @@ export const setServers = servers => ({
 });
 
 const actions = {
-  // VIEWPORT
+  /**
+   * VIEWPORT
+   */
   setViewportActive,
   setViewportSpecificData,
   setViewportLayoutAndData,
   setLayout,
   clearViewportSpecificData,
   setActiveViewportSpecificData,
+  /**
+   * NOT-VIEWPORT
+   */
   setStudyLoadingProgress,
   clearStudyLoadingProgress,
   setUserPreferences,

platform/core/src/redux/actions.test.js

@@ -28,7 +28,7 @@ describe('actions', () => {
 
   describe('viewport action creators', () => {
     it('should create an action to set the viewport specific data', () => {
-      const data = {
+      const viewportSpecificData = {
         displaySetInstanceUid: 'ef859a23-4631-93ab-d26b-7940a822c699',
         seriesDate: '20151026',
         seriesTime: '082611.370000',
@@ -65,12 +65,12 @@ describe('actions', () => {
 
       const expectedAction = {
         type: types.SET_ACTIVE_SPECIFIC_DATA,
-        data,
+        viewportSpecificData,
       };
 
-      expect(actions.setActiveViewportSpecificData(data)).toEqual(
-        expectedAction
-      );
+      expect(
+        actions.setActiveViewportSpecificData(viewportSpecificData)
+      ).toEqual(expectedAction);
     });
 
     it('should create an action to clear clearViewportSpecificData', () => {

platform/core/src/redux/reducers/preferences.js

@@ -11,12 +11,15 @@ const defaultState = {
     // order, description, window (int), level (int)
     // 0: { description: 'Soft tissue', window: '', level: '' },
   },
+  generalPreferences: {
+    // language: 'en-US'
+  },
 };
 
 const preferences = (state, action) => {
   switch (action.type) {
     case 'SET_USER_PREFERENCES': {
-      const newState = action.state ? action.state : cloneDeep(defaultState);
+      const newState = action.state || cloneDeep(defaultState);
 
       return Object.assign({}, state, newState);
     }

platform/core/src/redux/reducers/viewports.js

@@ -1,3 +1,6 @@
+import cloneDeep from 'lodash.clonedeep';
+import merge from 'lodash.merge';
+
 import {
   CLEAR_VIEWPORT,
   SET_ACTIVE_SPECIFIC_DATA,
@@ -8,10 +11,7 @@ import {
   SET_VIEWPORT_LAYOUT_AND_DATA,
 } from './../constants/ActionTypes.js';
 
-import cloneDeep from 'lodash.clonedeep';
-import merge from 'lodash.merge';
-
-const defaultState = {
+const DEFAULT_STATE = {
   numRows: 1,
   numColumns: 1,
   activeViewportIndex: 0,
@@ -26,94 +26,137 @@ const defaultState = {
 };
 
 /**
- * @param {Object} [state=defaultState]
- * @param {Object} action
- * @param {string} [action.type]
- * @param {number} [action.viewportIndex]
- * @param {Object} [action.layout]
- * @param {Object} [action.viewportSpecificData]
+ * The definition of a viewport action.
+ *
+ * @typedef {Object} ViewportAction
+ * @property {string} type -
+ * @property {Object} data -
+ * @property {Object} layout -
+ * @property {number} viewportIndex -
+ * @property {Object} viewportSpecificData -
  */
-const viewports = (state = defaultState, action) => {
-  let viewportSpecificData;
+
+/**
+ * @param {Object} [state=DEFAULT_STATE] The current viewport state.
+ * @param {ViewportAction} action A viewport action.
+ */
+const viewports = (state = DEFAULT_STATE, action) => {
   let useActiveViewport = false;
+
   switch (action.type) {
-    case SET_VIEWPORT_ACTIVE:
-      return Object.assign({}, state, {
-        activeViewportIndex: action.viewportIndex,
-      });
+    /**
+     * Sets the active viewport index.
+     *
+     * @return {Object} New state.
+     */
+    case SET_VIEWPORT_ACTIVE: {
+      return { ...state, activeViewportIndex: action.viewportIndex };
+    }
+
+    /**
+     * Sets viewport layout.
+     *
+     * @return {Object} New state.
+     */
     case SET_VIEWPORT_LAYOUT: {
-      const { numRows, numColumns, viewports } = action;
-      const layout = {
-        viewports: [...viewports],
+      return {
+        ...state,
+        numRows: action.numRows,
+        numColumns: action.numColumns,
+        layout: { viewports: [...action.viewports] },
       };
-
-      return Object.assign({}, state, { numRows, numColumns, layout });
     }
+
+    /**
+     * Sets viewport layout and data.
+     *
+     * @return {Object} New state.
+     */
     case SET_VIEWPORT_LAYOUT_AND_DATA: {
-      const { numRows, numColumns, viewports, viewportSpecificData } = action;
-      const layout = {
-        viewports: [...viewports],
+      return {
+        ...state,
+        numRows: action.numRows,
+        numColumns: action.numColumns,
+        layout: { viewports: [...action.viewports] },
+        viewportSpecificData: cloneDeep(action.viewportSpecificData),
       };
-
-      return Object.assign({}, state, {
-        numRows,
-        numColumns,
-        layout,
-        viewportSpecificData: cloneDeep(viewportSpecificData),
-      });
     }
+
+    /**
+     * Sets viewport specific data of active viewport.
+     *
+     * @return {Object} New state.
+     */
     case SET_VIEWPORT: {
       const layout = cloneDeep(state.layout);
-      const hasPlugin = action.data && action.data.plugin;
 
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
       viewportSpecificData[action.viewportIndex] = merge(
         {},
         viewportSpecificData[action.viewportIndex],
-        action.data
+        action.viewportSpecificData
       );
 
-      if (hasPlugin) {
-        layout.viewports[action.viewportIndex].plugin = action.data.plugin;
+      if (action.viewportSpecificData && action.viewportSpecificData.plugin) {
+        layout.viewports[action.viewportIndex].plugin =
+          action.viewportSpecificData.plugin;
       }
 
-      return Object.assign({}, state, { layout, viewportSpecificData });
+      return { ...state, layout, viewportSpecificData };
     }
+
+    /**
+     * Sets viewport specific data of active/any viewport.
+     *
+     * @return {Object} New state.
+     */
     case SET_ACTIVE_SPECIFIC_DATA:
       useActiveViewport = true;
     // Allow fall-through
     // eslint-disable-next-line
     case SET_SPECIFIC_DATA: {
       const layout = cloneDeep(state.layout);
-      const hasPlugin = action.data && action.data.plugin;
       const viewportIndex = useActiveViewport
         ? state.activeViewportIndex
         : action.viewportIndex;
-      const { dom } = state.viewportSpecificData[viewportIndex];
 
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
       viewportSpecificData[viewportIndex] = {
-        dom,
-        ...action.data,
+        ...action.viewportSpecificData,
       };
 
-      if (hasPlugin) {
-        layout.viewports[viewportIndex].plugin = action.data.plugin;
+      if (action.viewportSpecificData && action.viewportSpecificData.plugin) {
+        layout.viewports[viewportIndex].plugin =
+          action.viewportSpecificData.plugin;
       }
 
-      return Object.assign({}, state, { layout, viewportSpecificData });
+      return { ...state, layout, viewportSpecificData };
     }
-    case CLEAR_VIEWPORT:
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+
+    /**
+     * Clears viewport specific data of any viewport.
+     *
+     * @return {Object} New state.
+     */
+    case CLEAR_VIEWPORT: {
+      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
+
       if (action.viewportIndex) {
         viewportSpecificData[action.viewportIndex] = {};
-        return Object.assign({}, state, { viewportSpecificData });
+        return { ...state, viewportSpecificData };
       } else {
-        return defaultState;
+        return DEFAULT_STATE;
       }
+    }
 
-    default:
+    /**
+     * Returns the current application state.
+     *
+     * @return {Object} The current state.
+     */
+    default: {
       return state;
+    }
   }
 };
 

platform/core/src/redux/reducers/viewports.test.js

@@ -60,7 +60,7 @@ describe('viewports reducer', () => {
     const setViewportAction = {
       type: types.SET_VIEWPORT,
       viewportIndex: viewportToSet,
-      data: {
+      viewportSpecificData: {
         hello: 'this is that data for the viewport',
         world: 'that will be set for the viewportIndex',
       },
@@ -69,7 +69,7 @@ describe('viewports reducer', () => {
     const updatedState = reducer(undefined, setViewportAction);
     const updatedViewport = updatedState.viewportSpecificData[viewportToSet];
 
-    expect(updatedViewport).toEqual(setViewportAction.data);
+    expect(updatedViewport).toEqual(setViewportAction.viewportSpecificData);
   });
 
   it('should handle CLEAR_VIEWPORT', () => {

platform/core/src/services/UIDialogService/index.js

@@ -16,7 +16,7 @@
  * @property {ReactElement|HTMLElement} content The dialog content.
  * @property {Object} contentProps The dialog content props.
  * @property {boolean} [isDraggable=true] Controls if dialog content is draggable or not.
- *  @property {boolean} [showOverlay=false] Controls dialog overlay.
+ * @property {boolean} [showOverlay=false] Controls dialog overlay.
  * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
  * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
  * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.

platform/i18n/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.2](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.1...@ohif/i18n@0.52.2) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
 ## [0.52.1](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.0...@ohif/i18n@0.52.1) (2019-11-18)
 
 

platform/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/i18n",
-  "version": "0.52.1",
+  "version": "0.52.2",
   "description": "Internationalization library for The OHIF Viewer",
   "author": "OHIF",
   "license": "MIT",

platform/i18n/src/index.js

@@ -42,6 +42,7 @@ const locizeOptions = {
 
 const envUseLocize = !!config.USE_LOCIZE;
 const envApiKeyAvailable = !!config.LOCIZE_API_KEY;
+const DEFAULT_LANGUAGE = 'en-US';
 
 function initI18n(
   detection = detectionOptions,
@@ -74,7 +75,7 @@ function initI18n(
       // init i18next
       // for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        fallbackLng: 'en-US',
+        fallbackLng: DEFAULT_LANGUAGE,
         saveMissing: apiKeyAvailable,
         debug: debugMode,
         keySeparator: false,
@@ -111,7 +112,7 @@ function initI18n(
       // init i18next
       // for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        fallbackLng: 'en-US',
+        fallbackLng: DEFAULT_LANGUAGE,
         resources: locales,
         debug: debugMode,
         keySeparator: false,
@@ -136,5 +137,6 @@ customDebug(`version ${pkg.version} loaded.`, 'info');
 i18n.initializing = initI18n();
 i18n.initI18n = initI18n;
 i18n.addLocales = addLocales;
+i18n.defaultLanguage = DEFAULT_LANGUAGE;
 
 export default i18n;

platform/i18n/src/locales/ar/UserPreferencesModal.json

@@ -0,0 +1,3 @@
+{
+  "No hotkeys found": "Nenhuma tecla de atalho está configurada para este aplicativo. As teclas de atalho podem ser configuradas no arquivo app-config.js do aplicativo."
+}

platform/i18n/src/locales/ar/index.js

@@ -0,0 +1,7 @@
+import UserPreferencesModal from "./UserPreferencesModal.json";
+
+export default { 
+  'ar': {
+    UserPreferencesModal,
+  }
+};

platform/i18n/src/locales/en-US/UserPreferencesModal.json

@@ -1,6 +1,9 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
+  "No hotkeys found": "No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.",
   "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "ResetDefaultMessage": "Preferences successfully reset to default. <br /> You must <strong>Save</strong> to perform this action.",
   "Save": "$t(Buttons:Save)",
+  "SaveMessage": "Preferences saved",
   "User Preferences": "User Preferences"
 }

platform/i18n/src/locales/index.js

@@ -1,3 +1,4 @@
+import ar from './ar/';
 import en_US from './en-US/';
 import es from './es/';
 import ja_JP from './ja-JP/';
@@ -7,6 +8,7 @@ import vi from './vi/';
 import zh from './zh/';
 
 export default {
+  ...ar,
   ...en_US,
   ...es,
   ...ja_JP,

platform/i18n/src/locales/pt-BR/UserPreferencesModal.json

@@ -1,6 +1,8 @@
 {
   "Cancel": "Cancelar",
   "Reset to Defaults": "Restaurar Default",
+  "ResetDefaultMessage": "Preferências resetadas com sucesso. <br /> Você deve <strong>Salvar</strong> para que essa ação seja realizada.",
   "Save": "Salvar",
+  "SaveMessage": "Preferências salvas",
   "User Preferences": "Preferências do Usuário"
 }

platform/ui/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.65.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.65.0...@ohif/ui@0.65.1) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
 # [0.65.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.2...@ohif/ui@0.65.0) (2019-11-25)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.65.0",
+  "version": "0.65.1",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/ui/src/components/languageSwitcher/LanguageSwitcher.js

@@ -1,14 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import i18n from '@ohif/i18n';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import './LanguageSwitcher.styl';
 import { withTranslation } from '../../contextProviders';
 
-const LanguageSwitcher = () => {
-  const getCurrentLanguage = (language = i18n.language) =>
-    language.split('-')[0];
+const LanguageSwitcher = ({ language, onLanguageChange }) => {
+  const parseLanguage = lang => lang.split('-')[0];
 
-  const [currentLanguage, setCurrentLanguage] = useState(getCurrentLanguage());
   const languages = [
     // TODO: list of available languages should come from i18n.options.resources
     {
@@ -21,46 +19,31 @@ const LanguageSwitcher = () => {
     },
   ];
 
-  const onChange = () => {
+  const onChange = event => {
     const { value } = event.target;
-    const language = getCurrentLanguage(value);
-    setCurrentLanguage(language);
-
-    i18n.init({
-      fallbackLng: language,
-      lng: language,
-    });
+    onLanguageChange(parseLanguage(value));
   };
 
-  useEffect(() => {
-    let mounted = true;
-
-    i18n.on('languageChanged', () => {
-      if (mounted) {
-        setCurrentLanguage(getCurrentLanguage());
-      }
-    });
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
   return (
     <select
       name="language-select"
       id="language-select"
       className="language-select"
-      value={currentLanguage}
+      value={parseLanguage(language)}
       onChange={onChange}
     >
-      {languages.map(language => (
-        <option key={language.value} value={language.value}>
-          {language.label}
+      {languages.map(lng => (
+        <option key={lng.value} value={lng.value}>
+          {lng.label}
         </option>
       ))}
     </select>
   );
 };
 
+LanguageSwitcher.propTypes = {
+  language: PropTypes.string.isRequired,
+  onLanguageChange: PropTypes.func.isRequired,
+};
+
 export default withTranslation('UserPreferencesModal')(LanguageSwitcher);

platform/ui/src/components/studyList/CustomDateRangePicker.js

@@ -131,7 +131,6 @@ CustomDateRangePicker.propTypes = {
       end: PropTypes.required,
     })
   ),
-  autoFocus: PropTypes.bool.isRequired,
   onDatesChange: PropTypes.func.isRequired,
   startDate: PropTypes.instanceOf(Date),
   endDate: PropTypes.instanceOf(Date),

platform/ui/src/components/studyList/StudyList.js

@@ -81,7 +81,7 @@ function StudyList(props) {
 
   const mediumTableMeta = [
     {
-      displayText: `${t('Patient')} / ${t('MRN')}`,
+      displayText: `${t('PatientName')} / ${t('MRN')}`,
       fieldName: 'patientNameOrId',
       inputType: 'text',
       size: 250,
@@ -187,7 +187,6 @@ function StudyList(props) {
               studyDate={study.studyDate}
               studyDescription={study.studyDescription || ''}
               studyInstanceUid={study.studyInstanceUid}
-              t={t}
               displaySize={displaySize}
             />
           ))}
@@ -239,10 +238,11 @@ function TableRow(props) {
     studyDescription,
     studyInstanceUid,
     onClick: handleClick,
-    t,
     displaySize,
   } = props;
 
+  const { t } = useTranslation('StudyList');
+
   const largeRowTemplate = (
     <tr
       onClick={() => handleClick(studyInstanceUid)}

platform/ui/src/components/studyList/TableSearchFilter.js

@@ -103,15 +103,14 @@ function TableSearchFilter(props) {
               // https://github.com/airbnb/react-dates
               <CustomDateRangePicker
                 // Required
-                startDate={getDateEntry(studyDateTo, defaultStartDate)}
+                startDate={getDateEntry(studyDateFrom, defaultStartDate)}
                 startDateId="start-date"
-                endDate={getDateEntry(studyDateFrom, defaultEndDate)}
+                endDate={getDateEntry(studyDateTo, defaultEndDate)}
                 endDateId="end-date"
-                autoFocus={false}
                 // TODO: We need a dynamic way to determine which fields values to update
                 onDatesChange={({ startDate, endDate, preset = false }) => {
-                  onValueChange('studyDateTo', startDate);
-                  onValueChange('studyDateFrom', endDate);
+                  onValueChange('studyDateFrom', startDate);
+                  onValueChange('studyDateTo', endDate);
                 }}
                 focusedInput={focusedInput}
                 onFocusChange={updatedVal => setFocusedInput(updatedVal)}

platform/ui/src/components/userPreferencesForm/GeneralPreferences.js

@@ -1,17 +1,57 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import LanguageSwitcher from '../languageSwitcher';
+import i18n from '@ohif/i18n';
 
-export class GeneralPreferences extends Component {
-  render() {
-    return (
-      <div className="general-preferences-wrapper">
-        <div className="col-sm-3">
-          <label htmlFor="language-select" className="p-r-1">
-            Language
-          </label>
-          <LanguageSwitcher />
-        </div>
+/**
+ * General Preferences tab
+ */
+
+/**
+ * General Preferences tab
+ * It renders the General Preferences content
+ *
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.generalPreferences Data for initial state
+ * @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
+ * @param {function} props.onTabErrorChanged Callback Function in case any error on tab
+ */
+function GeneralPreferences({
+  generalPreferences,
+  name,
+  onTabStateChanged,
+  onTabErrorChanged,
+}) {
+  const { language = i18n.language } = generalPreferences;
+
+  const onLanguageChange = language => {
+    onTabStateChanged(name, {
+      generalPreferences: { ...generalPreferences, language },
+    });
+  };
+
+  return (
+    <div className="general-preferences-wrapper">
+      <div className="col-sm-3">
+        <label htmlFor="language-select" className="p-r-1">
+          Language
+        </label>
+        <LanguageSwitcher
+          language={language}
+          onLanguageChange={onLanguageChange}
+        />
       </div>
-    );
-  }
+    </div>
+  );
 }
+
+GeneralPreferences.propTypes = {
+  generalPreferences: PropTypes.any,
+  name: PropTypes.string,
+  onTabStateChanged: PropTypes.func,
+  onTabErrorChanged: PropTypes.func,
+};
+
+export { GeneralPreferences };

platform/ui/src/components/userPreferencesForm/HotKeysPreferences.js

@@ -1,80 +1,238 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
 import './HotKeysPreferences.styl';
-import React, { Component } from 'react';
+
 import {
   allowedKeys,
   disallowedCombinations,
   specialKeys,
 } from './hotKeysConfig.js';
 
-import PropTypes from 'prop-types';
+import isEqual from 'lodash.isequal';
 
-export class HotKeysPreferences extends Component {
-  static propTypes = {
-    hotkeyDefinitions: PropTypes.arrayOf(
-      PropTypes.shape({
-        commandName: PropTypes.string,
-        keys: PropTypes.arrayOf(PropTypes.string),
-        label: PropTypes.string,
-      })
-    ).isRequired,
+const getKeysPressedArray = keyDownEvent => {
+  const keysPressedArray = [];
+  const { ctrlKey, altKey, shiftKey } = keyDownEvent;
+
+  if (ctrlKey && !altKey) {
+    keysPressedArray.push('ctrl');
+  }
+
+  if (shiftKey && !altKey) {
+    keysPressedArray.push('shift');
+  }
+
+  if (altKey && !ctrlKey) {
+    keysPressedArray.push('alt');
+  }
+
+  return keysPressedArray;
+};
+
+const findConflictingCommand = (
+  originalHotKeys,
+  currentCommandName,
+  currentHotKeys
+) => {
+  let firstConflictingCommand = undefined;
+
+  for (const commandName in originalHotKeys) {
+    const toolHotKeys = originalHotKeys[commandName].keys;
+
+    if (
+      isEqual(toolHotKeys, currentHotKeys) &&
+      commandName !== currentCommandName
+    ) {
+      firstConflictingCommand = originalHotKeys[commandName];
+      break;
+    }
+  }
+
+  return firstConflictingCommand;
+};
+
+/**
+ * Splits given keysObj into arrays. Each array item will be a representation of column
+ * @param {obj} keysObj objects to be splitted into columns
+ * @param {number} columnSize How many rows per column
+ */
+const getHotKeysArrayColumns = (keysObj = {}, columnSize) => {
+  if (isNaN(columnSize)) {
+    return keysObj;
+  }
+
+  const keys = Object.keys(keysObj);
+  const keysValues = Object.values(keysObj);
+  const keysLength = keys.length;
+
+  // Columns from left should be bigger;
+  let currentColumn = 0;
+  const dividedKeys = [];
+
+  for (
+    let it = 0;
+    it < keysLength;
+    it++, it % columnSize === 0 ? currentColumn++ : currentColumn
+  ) {
+    if (!dividedKeys[currentColumn]) {
+      dividedKeys[currentColumn] = [];
+    }
+
+    dividedKeys[currentColumn][keys[it]] = keysValues[it];
+  }
+
+  return dividedKeys;
+};
+
+const NO_FIELD_ERROR_MESSAGE = undefined;
+const formatPressedKeys = pressedKeysArray => pressedKeysArray.join('+');
+const unFormatPressedKeys = (pressedKeysStr = '') => pressedKeysStr.split('+');
+const inputValidators = (
+  commandName,
+  inputValue,
+  pressedKeys,
+  lastPressedKey,
+  originalHotKeys
+) => {
+  let hasError = false;
+  let errorMessage = NO_FIELD_ERROR_MESSAGE;
+
+  const modifierValidator = ({ lastPressedKey }) => {
+    // Check if it has a valid modifier
+    const isModifier = ['ctrl', 'alt', 'shift'].includes(lastPressedKey);
+    if (isModifier) {
+      hasError = true;
+      errorMessage =
+        "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut";
+      return {
+        hasError,
+        errorMessage,
+      };
+    }
   };
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hotKeys: this.props.hotkeyDefinitions,
-      errorMessages: {},
-    };
-
-    this.onInputKeyDown = this.onInputKeyDown.bind(this);
-  }
-
-  /**
-   * Normalizes the keys used in a KeyPress event and returns an array of the
-   * keys pressed
-   *
-   * @param {KeyDownEvent} keyDownEvent
-   * @returns {string[]}
-   */
-  getKeysPressedArray(keyDownEvent) {
-    const keysPressedArray = [];
-    const { ctrlKey, altKey, shiftKey } = keyDownEvent;
-
-    if (ctrlKey && !altKey) {
-      keysPressedArray.push('ctrl');
+  const emptyValidator = ({ inputValue }) => {
+    if (!inputValue) {
+      hasError = true;
+      errorMessage = "Field can't be empty.";
+      return {
+        hasError,
+        errorMessage,
+      };
     }
-
-    if (shiftKey && !altKey) {
-      keysPressedArray.push('shift');
+  };
+  const conflictingValidator = ({
+    commandName,
+    pressedKeys,
+    originalHotKeys,
+  }) => {
+    const conflictingCommand = findConflictingCommand(
+      originalHotKeys,
+      commandName,
+      pressedKeys
+    );
+    if (conflictingCommand) {
+      hasError = true;
+      errorMessage = `"${conflictingCommand.label}" is already using the "${pressedKeys}" shortcut.`;
+      return {
+        hasError,
+        errorMessage,
+      };
     }
+  };
 
-    if (altKey && !ctrlKey) {
-      keysPressedArray.push('alt');
+  const disallowedValidator = ({ inputValue, pressedKeys, lastPressedKey }) => {
+    const modifierCommand = formatPressedKeys(
+      pressedKeys.slice(0, pressedKeys.length - 1)
+    );
+
+    const disallowedCombination = disallowedCombinations[modifierCommand];
+    const hasDisallowedCombinations = disallowedCombination
+      ? disallowedCombination.includes(lastPressedKey)
+      : false;
+
+    if (hasDisallowedCombinations) {
+      hasError = true;
+      errorMessage = `"${inputValue}" shortcut combination is not allowed`;
+      return {
+        hasError,
+        errorMessage,
+      };
     }
+  };
 
-    return keysPressedArray;
-  }
+  const validators = [
+    emptyValidator,
+    modifierValidator,
+    conflictingValidator,
+    disallowedValidator,
+  ];
 
-  getConflictingCommand(currentCommandName, currentHotKeys) {
-    return this.state.hotKeys.find((tool, index) => {
-      const toolHotKeys = tool.keys[0];
-      return (
-        toolHotKeys &&
-        toolHotKeys === currentHotKeys &&
-        tool.commandName !== currentCommandName
-      );
+  for (const validator of validators) {
+    const validation = validator({
+      commandName,
+      inputValue,
+      pressedKeys,
+      lastPressedKey,
+      originalHotKeys,
     });
+    if (validation && validation.hasError) {
+      return validation;
+    }
   }
 
-  /**
-   *
-   * @param {String} commandName
-   * @param {KeyDownEvent} keyDownEvent
-   * @param {Boolean} [displayPressedKey=false]
-   */
-  updateInputText(commandName, keyDownEvent, displayPressedKey = false) {
-    const pressedKeys = this.getKeysPressedArray(keyDownEvent);
+  // validation has passed successfully
+  return {
+    hasError,
+    errorMessage,
+  };
+};
+
+/**
+ * HotKeysPreferencesRow
+ * Renders row for hotkey preference
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.commandName command name associated to given row
+ * @param {string[]} props.hotkeys keys associated to given command
+ * @param {object} props.originalHotKeys original hotkeys values
+ * @param {function} props.onSuccessChanged Callback function to communicate parent in case its states changes
+ * @param {function} props.onFailureChanged Callback Function in case any error on row
+ */
+function HotKeyPreferencesRow({
+  commandName,
+  hotkeys,
+  label,
+  originalHotKeys,
+  tabError,
+  onSuccessChanged,
+  onFailureChanged,
+}) {
+  const [inputValue, setInputValue] = useState(formatPressedKeys(hotkeys));
+  const [error, setError] = useState(false);
+
+  const [fieldErrorMessage, setFieldErrorMessage] = useState(
+    NO_FIELD_ERROR_MESSAGE
+  );
+
+  // reset error count if tab has no errors
+  useEffect(() => {
+    if (!tabError) {
+      setError(false);
+      setFieldErrorMessage(NO_FIELD_ERROR_MESSAGE);
+      setInputValue(formatPressedKeys(hotkeys));
+    }
+  }, [tabError]);
+
+  // update state values if props changes
+  useEffect(() => {
+    setInputValue(formatPressedKeys(hotkeys));
+  }, [hotkeys]);
+
+  const updateInputText = (keyDownEvent, displayPressedKey = false) => {
+    const pressedKeys = getKeysPressedArray(keyDownEvent);
 
     if (displayPressedKey) {
       const specialKeyName = specialKeys[keyDownEvent.which];
@@ -82,183 +240,213 @@ export class HotKeysPreferences extends Component {
         specialKeyName ||
         keyDownEvent.key ||
         String.fromCharCode(keyDownEvent.keyCode);
+
+      // ensure lowerCase
       pressedKeys.push(keyName.toLowerCase());
     }
 
-    this.updateHotKeysState(commandName, pressedKeys.join('+'));
-  }
+    setInputValue(formatPressedKeys(pressedKeys));
+  };
 
-  updateHotKeysState(commandName, keys) {
-    const hotKeys = this.state.hotKeys;
-    const hotKeyIndex = this.state.hotKeys.findIndex(
-      x => x.commandName === commandName
+  // validate input value
+  const validateInput = () => {
+    const pressedKeys = unFormatPressedKeys(inputValue);
+    const lastPressedKey = pressedKeys[pressedKeys.length - 1];
+
+    const {
+      hasError = false,
+      errorMessage = NO_FIELD_ERROR_MESSAGE,
+    } = inputValidators(
+      commandName,
+      inputValue,
+      pressedKeys,
+      lastPressedKey,
+      originalHotKeys
     );
-    hotKeys[hotKeyIndex].keys[0] = keys;
-    this.setState({ hotKeys });
-  }
 
-  updateErrorsState(toolKey, errorMessage) {
-    const errorMessages = this.state.errorMessages;
-    errorMessages[toolKey] = errorMessage;
-    this.setState({ errorMessages });
-  }
+    if (hasError) {
+      setInputValue('');
+    } else {
+      onSuccessChanged([inputValue]);
+    }
 
-  onInputKeyDown(event, commandName) {
+    if (hasError !== error) {
+      setError(hasError);
+    }
+
+    setFieldErrorMessage(errorMessage);
+  };
+
+  useEffect(() => {
+    onFailureChanged(error);
+  }, [error]);
+
+  const onInputKeyDown = event => {
     // Prevent ESC key from propagating and closing the modal
     if (event.key === 'Escape') {
       event.stopPropagation();
     }
 
-    if (allowedKeys.includes(event.keyCode)) {
-      this.updateInputText(commandName, event, true);
-    } else {
-      this.updateInputText(commandName, event, false);
-    }
-
+    updateInputText(event, allowedKeys.includes(event.keyCode));
     event.preventDefault();
-  }
+  };
 
-  onChange(event, commandName) {
-    if (event.ctrlKey || event.altKey || event.shiftKey) {
-      return;
+  return (
+    <tr key={commandName}>
+      <td className="text-right p-r-1">{label}</td>
+      <td width="200">
+        <label
+          className={`wrapperLabel ${
+            fieldErrorMessage !== undefined ? 'state-error' : ''
+          } `}
+          data-key="defaultTool"
+        >
+          <input
+            readOnly={true}
+            type="text"
+            value={inputValue}
+            className="form-control hotkey text-center"
+            onKeyDown={onInputKeyDown}
+            onBlur={validateInput}
+          />
+          <span className="wrapperText" />
+          <span className="errorMessage">{fieldErrorMessage}</span>
+        </label>
+      </td>
+    </tr>
+  );
+}
+
+HotKeyPreferencesRow.propTypes = {
+  commandName: PropTypes.string.isRequired,
+  hotkeys: PropTypes.array.isRequired,
+  label: PropTypes.string.isRequired,
+  originalHotKeys: PropTypes.object.isRequired,
+  tabError: PropTypes.bool.isRequired,
+  onSuccessChanged: PropTypes.func.isRequired,
+  onFailureChanged: PropTypes.func.isRequired,
+};
+
+/**
+ * HotKeysPreferences tab
+ * It renders all hotkeys displayed into columns/rows
+ *
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.hotkeyDefinitions Data for initial state
+ * @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
+ * @param {function} props.onTabErrorChanged Callback Function in case any error on tab
+ */
+function HotKeysPreferences({
+  hotkeyDefinitions,
+  name,
+  tabError,
+  onTabStateChanged,
+  onTabErrorChanged,
+}) {
+  const [tabState, setTabState] = useState(hotkeyDefinitions);
+  const [tabErrorCounter, setTabErrorCounter] = useState(0);
+
+  const [numColumns] = useState(2);
+  const [columnSize] = useState(() =>
+    Math.ceil(Object.keys(tabState || {}).length / numColumns)
+  );
+
+  const splittedHotKeys = getHotKeysArrayColumns(tabState, columnSize);
+
+  const onHotKeyChanged = (commandName, hotkeyDefinition, keys) => {
+    const newState = {
+      ...tabState,
+      [commandName]: { ...hotkeyDefinition, keys },
+    };
+    setTabState(newState);
+    onTabStateChanged(name, { hotkeyDefinitions: newState });
+  };
+
+  const onErrorChanged = (toInc = true) => {
+    const increment = toInc ? 1 : -1;
+    const newValue = tabErrorCounter + increment;
+    if (newValue >= 0) {
+      setTabErrorCounter(newValue);
+    }
+  };
+
+  // reset error count if tab has no errors
+  useEffect(() => {
+    if (!tabError) {
+      setTabErrorCounter(0);
+      // update tab state
+      setTabState({ ...hotkeyDefinitions });
+    }
+  }, [tabError]);
+
+  // tell parent to update its state
+  useEffect(() => {
+    if (tabErrorCounter === 0) {
+      onTabErrorChanged(name, false);
     }
 
-    const hotKeyIndex = this.state.hotKeys.findIndex(
-      x => x.commandName === commandName
-    );
-    const hotKey = this.state.hotKeys[hotKeyIndex];
-    const keys = hotKey.keys[0];
-    const pressedKeys = keys.split('+');
-    const lastPressedKey = pressedKeys[pressedKeys.length - 1].toLowerCase();
+    if (tabErrorCounter === 1) {
+      onTabErrorChanged(name, true);
+    }
+  }, [tabErrorCounter]);
 
-    // clear the prior errors
-    this.setState({ errorMessages: {} }, () => {
-      // Check if it has a valid modifier
-      const isModifier = ['ctrl', 'alt', 'shift'].includes(lastPressedKey);
-      if (isModifier) {
-        this.updateHotKeysState(commandName, '');
-        this.updateErrorsState(
-          commandName,
-          "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
-        );
-        return;
-      }
+  // update local state if parent updates
+  useEffect(() => {
+    setTabState({ ...hotkeyDefinitions });
+  }, [hotkeyDefinitions]);
 
-      /*
-       * Check if it has some conflict
-       */
-      const conflictedCommand = this.getConflictingCommand(commandName, keys);
-      if (conflictedCommand) {
-        this.updateHotKeysState(commandName, '');
-        this.updateErrorsState(
-          commandName,
-          `"${conflictedCommand.label}" is already using the "${keys}" shortcut.`
-        );
-        return;
-      }
-
-      /*
-       * Check if is a valid combination
-       */
-      const modifierCommand = pressedKeys
-        .slice(0, pressedKeys.length - 1)
-        .join('+')
-        .toLowerCase();
-
-      const disallowedCombination = disallowedCombinations[modifierCommand];
-      const hasDisallowedCombinations = disallowedCombination
-        ? disallowedCombination.includes(lastPressedKey)
-        : false;
-
-      if (hasDisallowedCombinations) {
-        this.updateHotKeysState(commandName, '');
-        this.updateErrorsState(
-          commandName,
-          `"${pressedKeys.join('+')}" shortcut combination is not allowed`
-        );
-        return;
-      }
-    });
-  }
-
-  renderRow({ commandName, label, keys }) {
-    return (
-      <tr key={commandName}>
-        <td className="text-right p-r-1">{label}</td>
-        <td width="200">
-          <label
-            className={`wrapperLabel ${
-              this.state.errorMessages[commandName] !== undefined
-                ? 'state-error'
-                : ''
-            } `}
-            ref={input => (this[commandName] = input)}
-            data-key="defaultTool"
-          >
-            <input
-              readOnly={true}
-              type="text"
-              value={keys[0]}
-              vali="true"
-              className="form-control hotkey text-center"
-              onKeyDown={event => this.onInputKeyDown(event, commandName)}
-              onKeyUp={event => this.onChange(event, commandName)}
-            />
-            <span className="wrapperText" />
-            <span className="errorMessage">
-              {this.state.errorMessages[commandName]}
-            </span>
-          </label>
-        </td>
-      </tr>
-    );
-  }
-
-  render() {
-    const halfWayThough = Math.floor(this.state.hotKeys.length / 2);
-    const firstHalfHotkeys = this.state.hotKeys.slice(0, halfWayThough);
-    const secondHalfHotkeys = this.state.hotKeys.slice(
-      halfWayThough,
-      this.state.hotKeys.length
-    );
-
-    return this.state.hotKeys.length > 0 ? (
-      <div className="HotKeysPreferences">
-        {/* <!-- Column 1 --> */}
-        <div className="column">
-          <table className="full-width">
-            <thead>
-              <tr>
-                <th className="text-right p-r-1">Function</th>
-                <th className="text-center">Shortcut</th>
-              </tr>
-            </thead>
-            <tbody>
-              {firstHalfHotkeys.map(hotkeyDefinition =>
-                this.renderRow(hotkeyDefinition)
-              )}
-            </tbody>
-          </table>
-        </div>
-        {/* <!-- Column 2 --> */}
-        <div className="column">
-          <table className="full-width">
-            <thead>
-              <tr>
-                <th className="text-right p-r-1">Function</th>
-                <th className="text-center">Shortcut</th>
-              </tr>
-            </thead>
-            <tbody>
-              {secondHalfHotkeys.map(hotkeyDefinition =>
-                this.renderRow(hotkeyDefinition)
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    ) : (
-      <p>{`No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.`}</p>
-    );
-  }
+  return (
+    <div className="HotKeysPreferences">
+      {splittedHotKeys.length > 0
+        ? splittedHotKeys.map((columnHotKeys, index) => {
+            return (
+              <div className="column" key={index}>
+                <table className="full-width">
+                  <thead>
+                    <tr>
+                      <th className="text-right p-r-1">Function</th>
+                      <th className="text-center">Shortcut</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.entries(columnHotKeys).map(
+                      hotkeyDefinitionTuple => (
+                        <HotKeyPreferencesRow
+                          key={hotkeyDefinitionTuple[0]}
+                          commandName={hotkeyDefinitionTuple[0]}
+                          hotkeys={hotkeyDefinitionTuple[1].keys}
+                          label={hotkeyDefinitionTuple[1].label}
+                          originalHotKeys={tabState}
+                          tabError={tabError}
+                          onSuccessChanged={keys =>
+                            onHotKeyChanged(
+                              hotkeyDefinitionTuple[0],
+                              hotkeyDefinitionTuple[1],
+                              keys
+                            )
+                          }
+                          onFailureChanged={onErrorChanged}
+                        ></HotKeyPreferencesRow>
+                      )
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            );
+          })
+        : null}
+    </div>
+  );
 }
+
+HotKeysPreferences.propTypes = {
+  hotkeyDefinitions: PropTypes.any,
+  name: PropTypes.string,
+  tabError: PropTypes.bool,
+  onTabStateChanged: PropTypes.func,
+  onTabErrorChanged: PropTypes.func,
+};
+
+export { HotKeysPreferences };

platform/ui/src/components/userPreferencesForm/UserPreferences.js

@@ -10,7 +10,7 @@ export class UserPreferences extends Component {
   static defaultProps = {
     hotkeyDefinitions: [],
     windowLevelData: {},
-    generalData: {},
+    generalPreferences: {},
   };
 
   // TODO: Make this more generic. Tabs should not be restricted to these entries
@@ -23,7 +23,8 @@ export class UserPreferences extends Component {
       })
     ).isRequired,
     windowLevelData: PropTypes.object.isRequired,
-    generalData: PropTypes.object.isRequired,
+    generalPreferences: PropTypes.object.isRequired,
+    updatePropValue: PropTypes.func.isRequired,
   };
 
   state = {
@@ -64,7 +65,10 @@ export class UserPreferences extends Component {
     return (
       <form className="form-themed themed">
         <div className="form-content">
-          <GeneralPreferences generalData={this.props.generalData} />
+          <GeneralPreferences
+            generalPreferences={this.props.generalPreferences}
+            updatePropValue={this.props.updatePropValue}
+          />
         </div>
       </form>
     );

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js

@@ -1,101 +1,219 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSnackbarContext } from '@ohif/ui';
+
 import './UserPreferencesForm.styl';
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from '../../contextProviders';
+import { useTranslation } from 'react-i18next';
 
-import cloneDeep from 'lodash.clonedeep';
-import isEqual from 'lodash.isequal';
-import { UserPreferences } from './UserPreferences';
+// Tabs Component wrapper
+import { UserPreferencesTabs } from './UserPreferencesTabs';
 
-class UserPreferencesForm extends Component {
-  // TODO: Make this component more generic to allow things other than W/L and hotkeys...
-  static propTypes = {
-    onClose: PropTypes.func,
-    onSave: PropTypes.func,
-    onResetToDefaults: PropTypes.func,
-    windowLevelData: PropTypes.object,
-    hotkeyDefinitions: PropTypes.arrayOf(
-      PropTypes.shape({
-        commandName: PropTypes.string,
-        keys: PropTypes.arrayOf(PropTypes.string),
-        label: PropTypes.string,
-      })
-    ).isRequired,
-    t: PropTypes.func,
+// Tabs
+import { HotKeysPreferences } from './HotKeysPreferences';
+import { WindowLevelPreferences } from './WindowLevelPreferences';
+import { GeneralPreferences } from './GeneralPreferences';
+
+/**
+ @typedef TabObject
+ @type {Object}
+ @property {string} name Name for given tab
+ @property {ReactComponent} Component React component for given tab.
+ @property {object} props Props State for given tab component
+ @property {boolean} [hidden] To hidden tab or not
+ */
+
+/**
+ * Create tabs obj.
+ * @returns {TabObject[]} Array of TabObjs.
+ */
+const createTabs = () => {
+  return [
+    {
+      name: 'Hotkeys',
+      Component: HotKeysPreferences,
+      props: {},
+    },
+    {
+      name: 'General',
+      Component: GeneralPreferences,
+      props: {},
+    },
+    {
+      name: 'Window Level',
+      Component: WindowLevelPreferences,
+      props: {},
+      hidden: true,
+    },
+  ];
+};
+
+/**
+ * Main form component to render preferences tabs and buttons
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.hotkeyDefinitions Hotkeys Data
+ * @param {object} props.windowLevelData Window level data
+ * @param {function} props.onSave Callback function when saving
+ * @param {function} props.onClose Callback function when closing
+ * @param {function} props.onResetToDefaults Callback function when resetting
+ */
+function UserPreferencesForm({
+  onClose,
+  onSave,
+  onResetToDefaults,
+  windowLevelData,
+  hotkeyDefinitions,
+  generalPreferences,
+  hotkeysManager,
+  defaultLanguage,
+  hotkeyDefaults,
+}) {
+  const [tabs, setTabs] = useState(createTabs());
+
+  const createTabsState = (
+    windowLevelData,
+    hotkeyDefinitions,
+    generalPreferences
+  ) => {
+    return {
+      Hotkeys: { hotkeyDefinitions },
+      'Window Level': { windowLevelData },
+      General: { generalPreferences },
+    };
   };
 
-  constructor(props) {
-    super(props);
+  const [tabsState, setTabsState] = useState(
+    createTabsState(windowLevelData, hotkeyDefinitions, generalPreferences)
+  );
 
-    this.state = {
-      windowLevelData: cloneDeep(props.windowLevelData),
-      hotkeyDefinitions: cloneDeep(props.hotkeyDefinitions),
-    };
-  }
+  const [tabsError, setTabsError] = useState(
+    tabs.reduce((acc, tab) => {
+      acc[tab.name] = false;
+      return acc;
+    }, {})
+  );
 
-  save = () => {
-    this.props.onSave({
-      windowLevelData: this.state.windowLevelData,
-      hotkeyDefinitions: this.state.hotkeyDefinitions,
+  const snackbar = useSnackbarContext();
+
+  const { t, ready: translationsAreReady } = useTranslation(
+    'UserPreferencesModal'
+  );
+
+  const onTabStateChanged = (tabName, newState) => {
+    setTabsState({ ...tabsState, [tabName]: newState });
+  };
+
+  const onTabErrorChanged = (tabName, hasError) => {
+    setTabsError({ ...tabsError, [tabName]: hasError });
+  };
+
+  const hasAnyError = () => {
+    return Object.values(tabsError).reduce((acc, value) => acc || value);
+  };
+
+  const onResetPreferences = () => {
+    const defaultHotKeyDefitions = {};
+
+    hotkeyDefaults.map(item => {
+      const { commandName, ...values } = item;
+      defaultHotKeyDefitions[commandName] = { ...values };
+    });
+
+    // update local state
+    setTabsState({
+      ...tabsState,
+      Hotkeys: { hotkeyDefinitions: defaultHotKeyDefitions },
+      General: { generalPreferences: { language: defaultLanguage } },
+    });
+
+    // update tabs state
+    setTabs(createTabs(windowLevelData, hotkeyDefinitions, generalPreferences));
+
+    // reset errors
+    setTabsError(
+      tabs.reduce((acc, tab) => {
+        acc[tab.name] = false;
+        return acc;
+      }, {})
+    );
+
+    snackbar.show({
+      message: (
+        <div dangerouslySetInnerHTML={{ __html: t('ResetDefaultMessage') }} />
+      ),
+      type: 'info',
     });
   };
 
-  componentDidUpdate(prev, next) {
-    const newStateData = {};
+  const onSavePreferences = event => {
+    const toSave = Object.values(tabsState).reduce((acc, tabState) => {
+      return { ...acc, ...tabState };
+    }, {});
 
-    if (!isEqual(prev.windowLevelData, next.windowLevelData)) {
-      newStateData.windowLevelData = prev.windowLevelData;
-    }
+    onSave(toSave);
+    snackbar.show({
+      message: t('SaveMessage'),
+      type: 'success',
+    });
+  };
 
-    if (!isEqual(prev.hotkeyDefinitions, next.hotkeyDefinitions)) {
-      newStateData.hotkeyDefinitions = prev.hotkeyDefinitions;
-    }
+  // update local state if prop values changes
+  useEffect(() => {
+    setTabsState(
+      createTabsState(windowLevelData, hotkeyDefinitions, generalPreferences)
+    );
+  }, [windowLevelData, hotkeyDefinitions, generalPreferences]);
 
-    if (newStateData.hotkeyDefinitions || newStateData.windowLevelData) {
-      this.setState(newStateData);
-    }
-  }
-
-  render() {
-    return (
-      <div className="UserPreferencesForm">
-        <UserPreferences
-          windowLevelData={this.state.windowLevelData}
-          hotkeyDefinitions={this.state.hotkeyDefinitions}
-        />
-        <div className="footer">
-          <button
-            className="btn btn-danger pull-left"
-            data-cy="reset-default-btn"
-            onClick={this.props.onResetToDefaults}
+  return translationsAreReady ? (
+    <div className="UserPreferencesForm">
+      <UserPreferencesTabs
+        tabs={tabs}
+        tabsState={tabsState}
+        tabsError={tabsError}
+        onTabStateChanged={onTabStateChanged}
+        onTabErrorChanged={onTabErrorChanged}
+      />
+      <div className="footer">
+        <button
+          className="btn btn-danger pull-left"
+          data-cy="reset-default-btn"
+          onClick={onResetPreferences}
+        >
+          {t('Reset to Defaults')}
+        </button>
+        <div>
+          <div
+            onClick={onClose}
+            data-cy="cancel-btn"
+            className="btn btn-default"
           >
-            {this.props.t('Reset to Defaults')}
-          </button>
-          <div>
-            <div
-              onClick={this.props.onClose}
-              className="btn btn-default"
-              data-cy="cancel-btn"
-            >
-              {this.props.t('Cancel')}
-            </div>
-            <button
-              className="btn btn-primary"
-              data-cy="save-btn"
-              onClick={this.save}
-            >
-              {this.props.t('Save')}
-            </button>
+            {t('Cancel')}
           </div>
+          <button
+            className="btn btn-primary"
+            data-cy="save-btn"
+            disabled={hasAnyError()}
+            onClick={onSavePreferences}
+          >
+            {t('Save')}
+          </button>
         </div>
       </div>
-    );
-  }
+    </div>
+  ) : null;
 }
 
-const connectedComponent = withTranslation('UserPreferencesForm')(
-  UserPreferencesForm
-);
-export { connectedComponent as UserPreferencesForm };
-export default connectedComponent;
+UserPreferencesForm.propTypes = {
+  onClose: PropTypes.func,
+  onSave: PropTypes.func,
+  onResetToDefaults: PropTypes.func,
+  windowLevelData: PropTypes.object,
+  hotkeyDefinitions: PropTypes.object,
+  generalPreferences: PropTypes.object,
+  hotkeysManager: PropTypes.object,
+  defaultLanguage: PropTypes.string,
+  hotkeyDefaults: PropTypes.array,
+};
+
+export { UserPreferencesForm };

platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import './UserPreferencesTabs.styl';
+
+/**
+ * Render tab component
+ * @param {object} tab TabObject containing tab data
+ * @param {function} onTabStateChanged Callback Function in case tab changes its state
+ * @param {function} onTabErrorChanged Callback Function in case any error on tab
+ */
+const renderTab = (
+  tab = {},
+  tabsState,
+  tabsError,
+  onTabStateChanged,
+  onTabErrorChanged
+) => {
+  const { props, Component, name, hidden = false } = tab;
+
+  const tabState = tabsState[name];
+  const tabError = tabsError[name];
+
+  return !hidden ? (
+    <form className="form-themed themed tabs">
+      <div className="form-content">
+        <Component
+          key={name}
+          {...tabState}
+          {...props}
+          name={name}
+          tabError={tabError}
+          onTabStateChanged={onTabStateChanged}
+          onTabErrorChanged={onTabErrorChanged}
+        ></Component>
+      </div>
+    </form>
+  ) : null;
+};
+
+const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
+  return tabs.length > 0
+    ? tabs.map((tab, index) => {
+        const { name, hidden = false } = tab;
+
+        const tabClass =
+          index === activeTabIndex ? 'nav-link active' : 'nav-link';
+        return !hidden ? (
+          <li
+            key={name}
+            onClick={() => {
+              onHeaderChanged(index);
+            }}
+            className={tabClass}
+          >
+            <button>{name}</button>
+          </li>
+        ) : null;
+      })
+    : null;
+};
+/**
+ * Component to render tabs based on currentActiveTabIndex
+ *
+ * In case any tab changes its state this current component tells parent through function callback
+ * @param {object} props Component props
+ */
+function UserPreferencesTabs({
+  tabs,
+  tabsState,
+  tabsError,
+  onTabStateChanged,
+  onTabErrorChanged,
+}) {
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+  return (
+    <div className="UserPreferencesTabs">
+      <div className="UserPreferencesTabs__selector">
+        <div className="dialog-separator-after">
+          <ul className="nav nav-tabs">
+            {renderTabsHeader(tabs, activeTabIndex, setActiveTabIndex)}
+          </ul>
+        </div>
+      </div>
+      {renderTab(
+        tabs[activeTabIndex],
+        tabsState,
+        tabsError,
+        onTabStateChanged,
+        onTabErrorChanged
+      )}
+    </div>
+  );
+}
+
+UserPreferencesTabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  tabsState: PropTypes.object.isRequired,
+  tabsError: PropTypes.object.isRequired,
+  onTabStateChanged: PropTypes.func.isRequired,
+  onTabErrorChanged: PropTypes.func.isRequired,
+};
+
+export { UserPreferencesTabs };

platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.styl

@@ -3,7 +3,7 @@
 @import './../../design/styles/common/state.styl'
 @import './../../design/styles/common/global.styl'
 
-.UserPreferences
+.UserPreferencesTabs
   display: flex
   flex-direction: column
 

platform/ui/src/components/userPreferencesForm/WindowLevelPreferences.js

@@ -1,94 +1,132 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+
 import './WindowLevelPreferences.styl';
+/**
+ * WindowLevelPreferencesRow
+ * Renders row for window level preference
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.description description for given preset
+ * @param {number} props.window window value
+ * @param {number} props.level level value
+ * @param {string} props.rowName name of given row to identify it
+ * @param {function} props.onSuccessChanged Callback function to communicate parent in case its states changes
+ */
+function WindowLevelPreferencesRow({
+  description,
+  window,
+  level,
+  rowName,
+  onSuccessChanged,
+  // onFailureChanged
+}) {
+  const [rowState, setRowState] = useState({ description, window, level });
 
-export class WindowLevelPreferences extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      data: this.props.windowLevelData,
-    };
-  }
-
-  static propTypes = {
-    windowLevelData: PropTypes.object.isRequired,
-    onChange: PropTypes.func,
+  const onInputChanged = (event, name) => {
+    const newValue = event.target.value;
+    setRowState({ ...rowState, [name]: newValue });
   };
 
-  onChange(event, key, field) {
-    const data = this.state.data;
-    const entry = data[key];
-    entry[field] = event.target.value;
-    this.setState({ data });
+  useEffect(() => {
+    onSuccessChanged(rowName, rowState);
+  }, [rowState]);
 
-    if (this.props.onChange) {
-      this.props.onChange(data);
-    }
-  }
-
-  getWLPreferencesRows(key) {
-    const entry = this.state.data[key];
+  const renderTd = (value, name, type) => {
     return (
-      <tr key={key}>
-        <td className="p-r-1 text-center">{key}</td>
-        <td className="p-r-1">
-          <label className="wrapperLabel">
-            <input
-              value={entry.description}
-              type="text"
-              className="form-control"
-              onChange={event => {
-                this.onChange(event, key, 'description');
-              }}
-            />
-          </label>
-        </td>
-        <td className="p-r-1">
-          <label className="wrapperLabel">
-            <input
-              value={entry.window}
-              type="number"
-              className="form-control"
-              onChange={event => {
-                this.onChange(event, key, 'window');
-              }}
-            />
-          </label>
-        </td>
-        <td className="p-r-1">
-          <label className="wrapperLabel">
-            <input
-              value={entry.level}
-              type="number"
-              className="form-control"
-              onChange={event => {
-                this.onChange(event, key, 'level');
-              }}
-            />
-          </label>
-        </td>
-      </tr>
+      <td className="p-r-1">
+        <label className="wrapperLabel">
+          <input
+            value={value}
+            type={type}
+            className="form-control"
+            onChange={event => {
+              onInputChanged(event, name);
+            }}
+          />
+        </label>
+      </td>
     );
-  }
+  };
 
-  render() {
-    return (
-      <table className="full-width">
-        <thead>
-          <tr>
-            <th className="p-x-1 text-center presetIndex">Preset</th>
-            <th className="p-x-1">Description</th>
-            <th className="p-x-1">Window</th>
-            <th className="p-x-1">Level</th>
-          </tr>
-        </thead>
-        <tbody>
-          {Object.keys(this.state.data).map(key => {
-            return this.getWLPreferencesRows(key);
-          })}
-        </tbody>
-      </table>
-    );
-  }
+  return (
+    <tr key={rowName}>
+      <td className="p-r-1 text-center">{rowName}</td>
+      {renderTd(rowState.description, 'description', 'text')}
+      {renderTd(rowState.window, 'window', 'number')}
+      {renderTd(rowState.level, 'level', 'number')}
+    </tr>
+  );
 }
+
+WindowLevelPreferencesRow.propTypes = {
+  description: PropTypes.string.isRequired,
+  window: PropTypes.number.isRequired,
+  level: PropTypes.number.isRequired,
+  rowName: PropTypes.string.isRequired,
+  onSuccessChanged: PropTypes.func.isRequired,
+  //onFailureChanged: PropTypes.func.isRequired,
+};
+
+/**
+ * WindowLevelPreferences tab
+ * It renders all window level presets
+ *
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.windowLevelData Data for initial state
+ * @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
+ */
+function WindowLevelPreferences({
+  windowLevelData,
+  name,
+  onTabStateChanged /*onTabErrorChanged*/,
+}) {
+  const [tabState, setTabState] = useState(windowLevelData);
+  // TODO to be used once error handling is implemented
+  //const [tabError, setTabError] = useState(false);
+
+  const onWindowLevelChanged = (key, state) => {
+    setTabState({ ...tabState, [key]: state });
+  };
+
+  // tell parent to update its state
+  useEffect(() => {
+    onTabStateChanged(name, { windowLevelData: tabState });
+  }, [tabState]);
+
+  return (
+    <table className="full-width">
+      <thead>
+        <tr>
+          <th className="p-x-1 text-center presetIndex">Preset</th>
+          <th className="p-x-1">Description</th>
+          <th className="p-x-1">Window</th>
+          <th className="p-x-1">Level</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.keys(tabState).map(objKey => (
+          <WindowLevelPreferencesRow
+            onSuccessChanged={onWindowLevelChanged}
+            rowName={objKey}
+            key={objKey}
+            description={tabState[objKey].description}
+            window={tabState[objKey].window}
+            level={tabState[objKey].level}
+          ></WindowLevelPreferencesRow>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+WindowLevelPreferences.propTypes = {
+  windowLevelData: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  onTabStateChanged: PropTypes.func.isRequired,
+  //onTabErrorChanged: PropTypes.func.isRequired,
+};
+
+export { WindowLevelPreferences };

platform/ui/src/components/userPreferencesForm/WindowLevelPreferences.styl

@@ -1,4 +1,4 @@
-@import './UserPreferences.styl'
+@import './UserPreferencesTabs.styl'
 
 .presetIndex
-  padding: 0px 10px 0px 10px
+  padding: 0px 10px 0px 10px

platform/ui/src/components/userPreferencesForm/index.js

@@ -1,4 +1,4 @@
-export { UserPreferences } from './UserPreferences.js';
+export { UserPreferencesTabs } from './UserPreferencesTabs.js';
 export { AboutContent } from '../content/aboutContent/AboutContent.js';
 export { UserPreferencesForm } from './UserPreferencesForm.js';
 export { GeneralPreferences } from './GeneralPreferences.js';

platform/ui/src/elements/form/DropdownMenu.js

@@ -46,7 +46,7 @@ class DropdownMenu extends Component {
           <button
             key={key}
             className="dd-item"
-            data-cy="about-item-menu"
+            data-cy="dd-item-menu"
             onClick={() => this.handleOnClick(onClick)}
           >
             {icon && <Icon {...icon} className="dd-item-icon" />}

platform/viewer/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.4...@ohif/viewer@2.11.5) (2019-12-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.11.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.3...@ohif/viewer@2.11.4) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.11.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.2...@ohif/viewer@2.11.3) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.11.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.1...@ohif/viewer@2.11.2) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
+## [2.11.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.0...@ohif/viewer@2.11.1) (2019-11-27)
+
+
+### Bug Fixes
+
+* of undefined name of project ([#1231](https://github.com/OHIF/Viewers/issues/1231)) ([e34a057](https://github.com/OHIF/Viewers/commit/e34a05726319e3e70279c43d5bf976d33cdf71f7))
+
+
+
+
+
 # [2.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.2...@ohif/viewer@2.11.0) (2019-11-25)
 
 

platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js

@@ -270,7 +270,7 @@ describe('OHIF Study Viewer Page', function() {
     cy.get('[data-cy="options-menu"]')
       .first()
       .click();
-    cy.get('[data-cy="about-item-menu"]')
+    cy.get('[data-cy="dd-item-menu"]')
       .first()
       .click();
     cy.get('[data-cy="about-modal"]')

platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js

@@ -59,91 +59,89 @@ describe('OHIF User Preferences', () => {
         .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
 
       // Options menu should be translated
-      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Opciones')
+        .click();
 
-      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      //Once the issue is fixed, the following code should be uncommented
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'Acerca de');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferencias');
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'Acerca de');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferencias');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
     it('checks if user can cancel the language selection and application will be in English', function() {
-      cy.get('@userPreferencesGeneralTab')
-        .click()
-        .should('have.class', 'active');
+      // Set language to English and save
+      cy.setLanguage('English');
 
-      // Language dropdown should be displayed
-      cy.get('#language-select').should('be.visible');
+      // Set language to Spanish and cancel
+      cy.setLanguage('Spanish', false);
 
-      // Select Spanish and Cancel
-      cy.get('#language-select').select('Spanish');
-      cy.get('@cancelBtn')
+      // Header should be kept in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
+    });
+
+    it('checks if user can restore to default the language selection and application will be in English', function() {
+      // Set language to Spanish
+      cy.setLanguage('Spanish');
+
+      //Open Preferences again
+      cy.openPreferences();
+
+      // Go to general tab
+      cy.get('@userPreferencesGeneralTab').click();
+
+      cy.get('@restoreBtn')
         .scrollIntoView()
         .click();
 
-      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      // Once the issue is fixed, the following code should be uncommented
-      // // Header should be kept in English
-      // cy.get('.research-use')
-      //   .scrollIntoView()
-      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-      //
-      // // Options menu should be translated
-      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-      //
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'About');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferences');
+      // Save
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be in English
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+
+      // Close options Menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
-    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-    // Once the issue is fixed, the following code should be uncommented
-    // it('checks if user can restore to default the language selection and application will be in English', function() {
-    //   cy.get('@userPreferencesGeneralTab')
-    //     .click()
-    //     .should('have.class', 'active');
-
-    //   // Language dropdown should be displayed
-    //   cy.get('#language-select').should('be.visible');
-
-    //   // Select Spanish and Save
-    //   cy.get('#language-select').select('Spanish');
-    //   cy.get('@saveBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    //   //Open Preferences again
-    //   cy.openPreferences();
-
-    //   // Go to general tab
-    //   cy.get('@userPreferencesGeneralTab').click();
-
-    //   cy.get('@restoreBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    // Header should be in English
-    // cy.get('.research-use')
-    //   .scrollIntoView()
-    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-    //
-    // Options menu should be in English
-    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .first()
-    //     .should('have.text', 'About');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .last()
-    //     .should('have.text', 'Preferences');
-    //  });
-
     it('checks if Preferences set in Study List Page will be consistent on Viewer Page', function() {
       // Go go hotkeys tab
       cy.get('@userPreferencesHotkeysTab')
@@ -185,16 +183,12 @@ describe('OHIF User Preferences', () => {
       cy.get('[data-cy="options-menu"]')
         .should('have.text', 'Opciones')
         .click();
-      cy.get('[data-cy="about-item-menu"]')
+      cy.get('[data-cy="dd-item-menu"]')
         .first()
         .should('contain.text', 'Acerca de');
-      cy.get('[data-cy="options-menu"]').click(); //Close Options overlay
-
-      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      //Once the issue is fixed, the following code should be uncommented
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferencias');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferencias');
 
       // Check if new hotkey is working on viewport
       cy.get('body').type('{shift}Q', { release: false });
@@ -266,19 +260,49 @@ describe('OHIF User Preferences', () => {
         .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
 
       // Options menu should be translated
-      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Opciones')
+        .click();
 
-      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      //Once the issue is fixed, the following code should be uncommented
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'Acerca de');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferencias');
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'Acerca de');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferencias');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
     it('checks if user can cancel the language selection and application will be in English', function() {
+      // Set language to English and save
+      cy.setLanguage('English');
+
+      // Set language to Spanish and cancel
+      cy.setLanguage('Spanish', false);
+
+      // Header should be kept in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
+    });
+
+    it('checks if user can restore to default the language selection and application will be in English', function() {
       cy.get('@userPreferencesGeneralTab')
         .click()
         .should('have.class', 'active');
@@ -286,76 +310,51 @@ describe('OHIF User Preferences', () => {
       // Language dropdown should be displayed
       cy.get('#language-select').should('be.visible');
 
-      // Select Spanish and Cancel
+      // Select Spanish and Save
       cy.get('#language-select').select('Spanish');
-      cy.get('@cancelBtn')
+      cy.get('@saveBtn')
         .scrollIntoView()
         .click();
 
-      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      // Once the issue is fixed, the following code should be uncommented
-      // // Header should be kept in English
-      // cy.get('.research-use')
-      //   .scrollIntoView()
-      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-      //
-      // // Options menu should be translated
-      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-      //
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'About');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferences');
+      //Open Preferences again
+      cy.get('[data-cy="options-menu"]')
+        .scrollIntoView()
+        .click();
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .click();
+
+      // Go to general tab
+      cy.get('@userPreferencesGeneralTab').click();
+
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .click();
+
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be in English
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
-    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-    // Once the issue is fixed, the following code should be uncommented
-    // it('checks if user can restore to default the language selection and application will be in English', function() {
-    //   cy.get('@userPreferencesGeneralTab')
-    //     .click()
-    //     .should('have.class', 'active');
-
-    //   // Language dropdown should be displayed
-    //   cy.get('#language-select').should('be.visible');
-
-    //   // Select Spanish and Save
-    //   cy.get('#language-select').select('Spanish');
-    //   cy.get('@saveBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    //   //Open Preferences again
-    //   cy.get('[data-cy="options-menu"]')
-    //     .scrollIntoView()
-    //     .click();
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .last()
-    //     .click();
-
-    //   // Go to general tab
-    //   cy.get('@userPreferencesGeneralTab').click();
-
-    //   cy.get('@restoreBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    // Header should be in English
-    // cy.get('.research-use')
-    //   .scrollIntoView()
-    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-    //
-    // Options menu should be in English
-    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .first()
-    //     .should('have.text', 'About');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .last()
-    //     .should('have.text', 'Preferences');
-    //});
-
     it('checks new hotkeys for "Rotate Right" and "Rotate Left"', function() {
       // Go go hotkeys tab
       cy.get('@userPreferencesHotkeysTab')

platform/viewer/cypress/support/commands.js

@@ -427,15 +427,19 @@ Cypress.Commands.add('initPreferencesModalAliases', () => {
 Cypress.Commands.add('openPreferences', () => {
   cy.log('Open User Preferences Modal');
   // Open User Preferences modal
-  cy.get('[data-cy="options-menu"]')
-    .scrollIntoView()
-    .click()
-    .then(() => {
-      cy.get('[data-cy="about-item-menu"]')
-        .last()
+  cy.get('body').then(body => {
+    if (body.find('.OHIFModal').length === 0) {
+      cy.get('[data-cy="options-menu"]')
+        .scrollIntoView()
         .click()
-        .wait(200);
-    });
+        .then(() => {
+          cy.get('[data-cy="dd-item-menu"]')
+            .last()
+            .click()
+            .wait(200);
+        });
+    }
+  });
 });
 
 Cypress.Commands.add('resetUserHoktkeyPreferences', () => {
@@ -446,10 +450,7 @@ Cypress.Commands.add('resetUserHoktkeyPreferences', () => {
 
   cy.log('Reset to Default Preferences');
   cy.get('@restoreBtn').click();
-
-  //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-  //Once the issue is fixed, the following code should be uncommented
-  //cy.get('@saveBtn').click();
+  cy.get('@saveBtn').click();
 });
 
 Cypress.Commands.add(
@@ -457,11 +458,34 @@ Cypress.Commands.add(
   (function_label, shortcut) => {
     // Within scopes all `.get` and `.contains` to within the matched elements
     // dom instead of checking from document
-    cy.get('.HotKeysPreferences').within(() => {
-      cy.contains(function_label) // label we're looking for
-        .parent()
-        .find('input') // closest input to that label
-        .type(shortcut, { force: true }); // Set new shortcut for that function
-    });
+    cy.get('.HotKeysPreferences')
+      .within(() => {
+        cy.contains(function_label) // label we're looking for
+          .parent()
+          .find('input') // closest input to that label
+          .type(shortcut, { force: true }); // Set new shortcut for that function
+      })
+      .blur();
   }
 );
+
+Cypress.Commands.add('setLanguage', (language, save = true) => {
+  cy.openPreferences();
+
+  cy.get('@userPreferencesGeneralTab')
+    .click()
+    .should('have.class', 'active');
+
+  // Language dropdown should be displayed
+  cy.get('#language-select').should('be.visible');
+
+  // Select Language and Save/Cancel
+  cy.get('#language-select')
+    .select(language)
+    .then(() => {
+      const toClick = save ? '@saveBtn' : '@cancelBtn';
+      cy.get(toClick)
+        .scrollIntoView()
+        .click();
+    });
+});

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.11.0",
+  "version": "2.11.5",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.13.0",
+    "@ohif/core": "^1.13.3",
     "@ohif/extension-cornerstone": "^2.0.0",
-    "@ohif/extension-dicom-html": "^1.0.1",
+    "@ohif/extension-dicom-html": "^1.0.2",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.54.0",
-    "@ohif/i18n": "^0.52.1",
-    "@ohif/ui": "^0.65.0",
+    "@ohif/extension-vtk": "^0.54.3",
+    "@ohif/i18n": "^0.52.2",
+    "@ohif/ui": "^0.65.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/src/App.js

@@ -23,6 +23,7 @@ import {
   createUIModalService,
   createUIDialogService,
   utils,
+  redux as reduxOHIF
 } from '@ohif/core';
 
 import i18n from '@ohif/i18n';
@@ -45,6 +46,7 @@ import OHIFStandaloneViewer from './OHIFStandaloneViewer';
 /** Store */
 import { getActiveContexts } from './store/layout/selectors.js';
 import store from './store';
+const { setUserPreferences } = reduxOHIF.actions;
 
 /** Contexts */
 import WhiteLabellingContext from './context/WhiteLabellingContext';
@@ -221,9 +223,29 @@ function _initExtensions(extensions, hotkeys) {
   const mergedExtensions = defaultExtensions.concat(extensions);
   extensionManager.registerExtensions(mergedExtensions);
 
+  const { hotkeyDefinitions = {} } = store.getState().preferences || {};
+  let updateStore = false;
+  let hotkeysToUse = hotkeyDefinitions;
+
   // Must run after extension commands are registered
-  if (hotkeys) {
-    hotkeysManager.setHotkeys(hotkeys, true);
+  // if there is no hotkeys from localStorate set up from config
+  if (!Object.keys(hotkeyDefinitions).length) {
+    hotkeysToUse = hotkeys;
+    updateStore = true;
+  }
+
+  if (hotkeysToUse) {
+    hotkeysManager.setHotkeys(hotkeysToUse);
+    // set default based on app config
+    hotkeysManager.setDefaultHotKeys(hotkeys);
+
+    if (updateStore) {
+      const { hotkeyDefinitions } = hotkeysManager;
+      const windowLevelData = {};
+      store.dispatch(
+        setUserPreferences({ windowLevelData, hotkeyDefinitions })
+      );
+    }
   }
 }
 

platform/viewer/src/components/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
@@ -11,49 +11,37 @@ import './Header.css';
 // Context
 import AppContext from './../../context/AppContext';
 
-class Header extends Component {
-  static contextType = AppContext;
-  static propTypes = {
-    home: PropTypes.bool.isRequired,
-    location: PropTypes.object.isRequired,
-    children: PropTypes.node,
-    t: PropTypes.func.isRequired,
-    userManager: PropTypes.object,
-    user: PropTypes.object,
-    modal: PropTypes.object,
-  };
+function Header(props) {
+  const {
+    t,
+    user,
+    userManager,
+    modal: { show },
+    home,
+    location,
+    children,
+  } = props;
 
-  static defaultProps = {
-    home: true,
-    children: OHIFLogo(),
-  };
+  const [options, setOptions] = useState([]);
 
-  constructor(props) {
-    super(props);
-    this.state = { isOpen: false };
-
-    this.loadOptions();
-  }
-
-  loadOptions() {
-    const { t, user, userManager, modal } = this.props;
-    this.options = [
+  useEffect(() => {
+    const optionsValue = [
       {
         title: t('About'),
         icon: { name: 'info' },
         onClick: () =>
-          modal.show({
+          show({
             content: AboutContent,
             title: t('OHIF Viewer - About'),
           }),
       },
       {
-        title: 'Preferences ',
+        title: t('Preferences'),
         icon: {
           name: 'user',
         },
         onClick: () =>
-          modal.show({
+          show({
             content: ConnectedUserPreferencesForm,
             title: t('User Preferences'),
           }),
@@ -61,61 +49,74 @@ class Header extends Component {
     ];
 
     if (user && userManager) {
-      this.options.push({
+      optionsValue.push({
         title: t('Logout'),
         icon: { name: 'power-off' },
         onClick: () => userManager.signoutRedirect(),
       });
     }
-  }
+
+    setOptions(optionsValue);
+  }, [setOptions, show, t, user, userManager]);
+
+  const { appConfig = {} } = AppContext;
+  const showStudyList =
+    appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
 
   // ANTD -- Hamburger, Drawer, Menu
-  render() {
-    const { t, home, location, children } = this.props;
-    const { appConfig = {} } = this.context;
-    const showStudyList =
-      appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
-    return (
-      <>
-        <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-        <div className={`entry-header ${home ? 'header-big' : ''}`}>
-          <div className="header-left-box">
-            {location && location.studyLink && (
-              <Link
-                to={location.studyLink}
-                className="header-btn header-viewerLink"
-              >
-                {t('Back to Viewer')}
-              </Link>
-            )}
+  return (
+    <>
+      <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
+      <div className={`entry-header ${home ? 'header-big' : ''}`}>
+        <div className="header-left-box">
+          {location && location.studyLink && (
+            <Link
+              to={location.studyLink}
+              className="header-btn header-viewerLink"
+            >
+              {t('Back to Viewer')}
+            </Link>
+          )}
 
-            {children}
+          {children}
 
-            {showStudyList && !home && (
-              <Link
-                className="header-btn header-studyListLinkSection"
-                to={{
-                  pathname: '/',
-                  state: { studyLink: location.pathname },
-                }}
-              >
-                {t('Study list')}
-              </Link>
-            )}
-          </div>
-
-          <div className="header-menu">
-            <span className="research-use">
-              {t('INVESTIGATIONAL USE ONLY')}
-            </span>
-            <Dropdown title={t('Options')} list={this.options} align="right" />
-          </div>
+          {showStudyList && !home && (
+            <Link
+              className="header-btn header-studyListLinkSection"
+              to={{
+                pathname: '/',
+                state: { studyLink: location.pathname },
+              }}
+            >
+              {t('Study list')}
+            </Link>
+          )}
         </div>
-      </>
-    );
-  }
+
+        <div className="header-menu">
+          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
+          <Dropdown title={t('Options')} list={options} align="right" />
+        </div>
+      </div>
+    </>
+  );
 }
 
+Header.propTypes = {
+  home: PropTypes.bool.isRequired,
+  location: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  t: PropTypes.func.isRequired,
+  userManager: PropTypes.object,
+  user: PropTypes.object,
+  modal: PropTypes.object,
+};
+
+Header.defaultProps = {
+  home: true,
+  children: OHIFLogo(),
+};
+
 export default withTranslation(['Header', 'AboutModal'])(
   withRouter(withModal(Header))
 );

platform/viewer/src/connectedComponents/ConnectedCineDialog.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { CineDialog } from '@ohif/ui';
 import OHIF from '@ohif/core';
 import csTools from 'cornerstone-tools';
+import { commandsManager } from './../App.js';
 // Our target output kills the `as` and "import" throws a keyword error
 // import { import as toolImport, getToolState } from 'cornerstone-tools';
 import cloneDeep from 'lodash.clonedeep';
@@ -16,7 +17,8 @@ const { setViewportSpecificData } = OHIF.redux.actions;
 const mapStateToProps = state => {
   // Get activeViewport's `cine` and `stack`
   const { viewportSpecificData, activeViewportIndex } = state.viewports;
-  const { cine, dom } = viewportSpecificData[activeViewportIndex] || {};
+  const { cine } = viewportSpecificData[activeViewportIndex] || {};
+  const dom = commandsManager.runCommand('getActiveViewportEnabledElement');
 
   const cineData = cine || {
     isPlaying: false,

platform/viewer/src/connectedComponents/ConnectedHeader.js

@@ -1,17 +1,7 @@
 import Header from '../components/Header/Header.js';
 import { connect } from 'react-redux';
-import { hotkeysManager } from '../App.js';
 
 const mapStateToProps = state => {
-  const { hotkeyDefinitions = [] } = state.preferences || {};
-
-  const _hotkeyDefinitions =
-    hotkeyDefinitions.length > 0
-      ? hotkeyDefinitions
-      : hotkeysManager.hotkeyDefaults;
-
-  hotkeysManager.setHotkeys(_hotkeyDefinitions);
-
   return {
     user: state.oidc && state.oidc.user,
   };

platform/viewer/src/connectedComponents/ConnectedUserPreferencesForm.js

@@ -1,34 +1,48 @@
 import { connect } from 'react-redux';
 import { UserPreferencesForm } from '@ohif/ui';
 import OHIF from '@ohif/core';
+import i18n from '@ohif/i18n';
+
 import { hotkeysManager } from '../App.js';
 
 const { setUserPreferences } = OHIF.redux.actions;
 
 const mapStateToProps = (state, ownProps) => {
-  const hotkeyDefinitions =
-    state.preferences.hotkeyDefinitions.length > 0
-      ? state.preferences.hotkeyDefinitions
-      : hotkeysManager.hotkeyDefaults;
-  hotkeysManager.setHotkeys(hotkeyDefinitions);
+  const { defaultLanguage } = i18n;
+  const { hotkeyDefinitions, windowLevelData = {}, generalPreferences } =
+    state.preferences || {};
+  const { hotkeyDefaults } = hotkeysManager;
+
   return {
     onClose: ownProps.hide,
-    windowLevelData: state.preferences ? state.preferences.windowLevelData : {},
+    windowLevelData,
     hotkeyDefinitions,
+    generalPreferences,
+    hotkeysManager,
+    hotkeyDefaults,
+    defaultLanguage,
   };
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
-    onSave: ({ windowLevelData, hotkeyDefinitions }) => {
+    onSave: ({ windowLevelData, hotkeyDefinitions, generalPreferences }) => {
+      // TODO improve this strategy on windowLevel implementation
       hotkeysManager.setHotkeys(hotkeyDefinitions);
+
+      const { language } = generalPreferences;
+
+      // set new language
+      i18n.changeLanguage(language);
+
       ownProps.hide();
-      dispatch(setUserPreferences({ windowLevelData, hotkeyDefinitions }));
-    },
-    onResetToDefaults: () => {
-      hotkeysManager.restoreDefaultBindings();
-      ownProps.hide();
-      dispatch(setUserPreferences());
+      dispatch(
+        setUserPreferences({
+          windowLevelData,
+          hotkeyDefinitions,
+          generalPreferences,
+        })
+      );
     },
   };
 };

platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js

@@ -1,130 +0,0 @@
-import { connect } from 'react-redux';
-import { ViewportDownloadForm } from '@ohif/ui';
-import { utils } from '@ohif/core';
-import cornerstone from 'cornerstone-core';
-import cornerstoneTools from 'cornerstone-tools';
-
-const MINIMUM_SIZE = 100;
-const DEFAULT_SIZE = 512;
-const MAX_TEXTURE_SIZE = 10000;
-
-const mapStateToProps = (state, ownProps) => {
-  const { viewportSpecificData, activeViewportIndex } = state.viewports;
-  const { dom: activeEnabledElement } =
-    viewportSpecificData[activeViewportIndex] || {};
-
-  return {
-    onClose: ownProps.hide,
-    minimumSize: MINIMUM_SIZE,
-    maximumSize: MAX_TEXTURE_SIZE,
-    defaultSize: DEFAULT_SIZE,
-    canvasClass: 'cornerstone-canvas',
-    activeViewport: activeEnabledElement,
-    enableViewport: viewportElement => {
-      if (viewportElement) {
-        cornerstone.enable(viewportElement);
-      }
-    },
-    disableViewport: viewportElement => {
-      if (viewportElement) {
-        cornerstone.disable(viewportElement);
-      }
-    },
-    updateViewportPreview: (viewportElement, downloadCanvas, fileType) =>
-      new Promise(resolve => {
-        cornerstone.fitToWindow(viewportElement);
-
-        viewportElement.addEventListener(
-          'cornerstoneimagerendered',
-          function updateViewport(event) {
-            const enabledElement = cornerstone.getEnabledElement(event.target)
-              .element;
-            const type = 'image/' + fileType;
-            const dataUrl = downloadCanvas.toDataURL(type, 1);
-
-            let newWidth = enabledElement.offsetHeight;
-            let newHeight = enabledElement.offsetWidth;
-
-            if (newWidth > DEFAULT_SIZE || newHeight > DEFAULT_SIZE) {
-              const multiplier = DEFAULT_SIZE / Math.max(newWidth, newHeight);
-              newHeight *= multiplier;
-              newWidth *= multiplier;
-            }
-
-            resolve({ dataUrl, width: newWidth, height: newHeight });
-
-            viewportElement.removeEventListener(
-              'cornerstoneimagerendered',
-              updateViewport
-            );
-          }
-        );
-      }),
-    loadImage: (activeViewport, viewportElement, width, height) =>
-      new Promise(resolve => {
-        if (activeViewport && viewportElement) {
-          const enabledElement = cornerstone.getEnabledElement(activeViewport);
-          const viewport = Object.assign({}, enabledElement.viewport);
-          delete viewport.scale;
-          viewport.translation = {
-            x: 0,
-            y: 0,
-          };
-
-          cornerstone.loadImage(enabledElement.image.imageId).then(image => {
-            cornerstone.displayImage(viewportElement, image);
-            cornerstone.setViewport(viewportElement, viewport);
-            cornerstone.resize(viewportElement, true);
-
-            const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
-            const newHeight = Math.min(
-              height || image.height,
-              MAX_TEXTURE_SIZE
-            );
-
-            resolve({ image, width: newWidth, height: newHeight });
-          });
-        }
-      }),
-    toggleAnnotations: (toggle, viewportElement) => {
-      cornerstoneTools.store.state.tools.forEach(({ name }) => {
-        if (toggle) {
-          cornerstoneTools.setToolEnabledForElement(viewportElement, name);
-        } else {
-          cornerstoneTools.setToolDisabledForElement(viewportElement, name);
-        }
-      });
-    },
-    downloadBlob: (filename, fileType, viewportElement, downloadCanvas) => {
-      const file = `${filename}.${fileType}`;
-      const mimetype = `image/${fileType}`;
-
-      /* Handles JPEG images for IE11 */
-      if (downloadCanvas.msToBlob && fileType === 'jpeg') {
-        const image = downloadCanvas.toDataURL(mimetype, 1);
-        const blob = utils.b64toBlob(
-          image.replace('data:image/jpeg;base64,', ''),
-          mimetype
-        );
-        return window.navigator.msSaveBlob(blob, file);
-      }
-
-      viewportElement.querySelector('canvas').toBlob(blob => {
-        const URLObj = window.URL || window.webkitURL;
-        const a = document.createElement('a');
-        a.href = URLObj.createObjectURL(blob);
-        a.download = file;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-      });
-    },
-  };
-};
-
-const ConnectedViewportDownloadForm = connect(
-  mapStateToProps,
-  null
-)(ViewportDownloadForm);
-
-export default ConnectedViewportDownloadForm;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { MODULE_TYPES } from '@ohif/core';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+
+import { MODULE_TYPES } from '@ohif/core';
 import {
   ExpandableToolMenu,
   RoundedButtonGroup,
@@ -14,7 +15,6 @@ import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
-import ConnectedViewportDownloadForm from './ConnectedViewportDownloadForm';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 
@@ -308,8 +308,7 @@ function _handleBuiltIn(button) {
   }
 
   if (options.behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    modal.show({
-      content: ConnectedViewportDownloadForm,
+    commandsManager.runCommand('showDownloadViewportModal', {
       title: t('Download High Quality Image'),
     });
   }

platform/viewer/src/googleCloud/ProjectsList.js

@@ -63,9 +63,18 @@ class ProjectsList extends Component {
     if (loading) {
       return loadingIcon;
     }
+
+    const lowerCaseFilter = filter.toLowerCase();
+    const filteredProjects = projects.filter(project =>   
+      typeof project.name  === 'string' &&
+      (filter === "" || project.name.toLowerCase().includes(lowerCaseFilter))
+    );
+
     const body = (
       <tbody id="ProjectList">
-        {projects.filter(project => (project.name.toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
+        {
+          filteredProjects.map(this.renderTableRow)
+        }
       </tbody>
     );
 

platform/viewer/src/variables.css

@@ -30,7 +30,7 @@
   --snackbar-info: rgba(54, 156, 199, 0.9);
 
   /** z-Index **/
-  --snackbar-zIndex: 10;
+  --snackbar-zIndex: 1075;
 
   /** DatePicker Colors **/
   --datePicker-input-background: #2c363f;