chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.4.0
 - @ohif/extension-vtk@1.2.19
 - @ohif/core@2.5.0
 - @ohif/ui@1.3.0
 - @ohif/viewer@3.7.0

.circleci/config.yml

@@ -13,14 +13,7 @@ version: 2.1
 ##
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@1.11.0
-executors:
-  # Custom executor to override Cypress config
-  deploy-to-prod-executor:
-    docker:
-      - image: 'cypress/browsers:node10.16.0-chrome77'
-        environment:
-          CYPRESS_BASE_URL: https://ohif-staging.netlify.com/
+  cypress: cypress-io/cypress@1.13.0
 
 defaults: &defaults
   docker:
@@ -335,12 +328,15 @@ workflows:
           working_directory: platform/viewer
           build: npx cross-env QUICK_BUILD=true yarn run build
           start: yarn run test:e2e:serve
+          spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:
             - store_artifacts:
                 path: platform/viewer/cypress/screenshots
+            - store_artifacts:
+                path: platform/viewer/cypress/videos
           requires:
             - UNIT_TESTS
       # E2E: script-tag
@@ -357,16 +353,46 @@ workflows:
           working_directory: platform/viewer
           build: npx cross-env QUICK_BUILD=true yarn run build:package
           start: yarn run test:e2e:serve
-          spec: 'cypress/integration/common/**/*'
+          spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:
             - store_artifacts:
                 path: platform/viewer/cypress/screenshots
+            - store_artifacts:
+                path: platform/viewer/cypress/videos
           requires:
             - UNIT_TESTS
 
+  PR_OPTIONAL_VISUAL_TESTS:
+    jobs:
+      - AWAIT_APPROVAL:
+          type: approval
+      # Update hub.docker.org
+      - cypress/run:
+          name: 'Generate Percy Snapshots'
+          executor: cypress/browsers-chrome76
+          browser: chrome
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+                add wait-on' # Use yarn latest
+          yarn: true
+          store_artifacts: false
+          working_directory: platform/viewer
+          build: npx cross-env QUICK_BUILD=true yarn run build
+          # start server --> verify running --> percy + chrome + cypress
+          command: yarn run test:e2e:dist
+          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+          no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
+            - store_artifacts:
+                path: platform/viewer/cypress/videos
+          requires:
+            - AWAIT_APPROVAL
+
   PR_OPTIONAL_DOCKER_PUBLISH:
     jobs:
       # https://circleci.com/docs/2.0/workflows/#holding-a-workflow-for-a-manual-approval
@@ -419,25 +445,33 @@ workflows:
           filters:
             branches:
               only: master
+      # Update base branch snapshots
+      # and record a Cypress dashboard test run
+      - cypress/run:
+          name: 'Generate Percy Snapshots'
+          executor: cypress/browsers-chrome76
+          browser: chrome
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+                add wait-on' # Use yarn latest
+          yarn: true
+          store_artifacts: false
+          working_directory: platform/viewer
+          build: npx cross-env QUICK_BUILD=true yarn run build
+          # start server --> verify running --> percy + chrome + cypress
+          command: yarn run test:e2e:dist
+          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+          no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
+            - store_artifacts:
+                path: platform/viewer/cypress/videos
+            - store_test_results:
+                path: platform/viewer/cypress/results
+          filters:
+            branches:
+              only: master
       - DOCKER_MASTER_PUBLISH:
           requires:
             - NPM_PUBLISH
-#
-#
-# Potentially use to E2E test STAGING environment
-# before publishing to production
-# - cypress/run:
-#     name: 'E2E: PWA'
-#     executor: deploy-to-prod-executor
-#     browser: chrome
-#     working_directory: platform/viewer
-#     cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-#     yarn: true
-#     record: false
-#     no-workspace: true
-#     store_artifacts: true
-#     post-steps:
-#       - store_artifacts:
-#           path: platform/viewer/cypress/screenshots
-#       - store_test_results:
-#           path: cypress/results

.docker/Viewer-v2.x/entrypoint.sh

@@ -1,17 +1,31 @@
 #!/bin/bash
 
-# If CLIENT_ID is specified, use the google.js configuration with the modified ID
-if [ ! -z "$CLIENT_ID" ]
+if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
   then
-  	echo "Google Cloud Healthcare $CLIENT_ID has been provided: "
-  	echo $CLIENT_ID
-  	echo "Updating config..."
+    # If CLIENT_ID is specified, use the google.js configuration with the modified ID
+    if [ -n "$CLIENT_ID" ]
+      then
+  	    echo "Google Cloud Healthcare \$CLIENT_ID has been provided: "
+  	    echo "$CLIENT_ID"
+  	    echo "Updating config..."
 
-  	# - Use SED to replace the CLIENT_ID that is currently in google.js
-	sed -i -e "s/YOURCLIENTID.apps.googleusercontent.com/$CLIENT_ID/g" /usr/share/nginx/html/google.js
+  	    # - Use SED to replace the CLIENT_ID that is currently in google.js
+	      sed -i -e "s/YOURCLIENTID.apps.googleusercontent.com/$CLIENT_ID/g" /usr/share/nginx/html/google.js
+	  fi
 
-	# - Copy google.js to overwrite app-config.js
-	cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
+    # If HEALTHCARE_API_ENDPOINT is specified, use the google.js configuration with the modified endpoint
+    if [ -n "$HEALTHCARE_API_ENDPOINT" ]
+      then
+        echo "Google Cloud Healthcare \$HEALTHCARE_API_ENDPOINT has been provided: "
+        echo "$HEALTHCARE_API_ENDPOINT"
+        echo "Updating config..."
+
+        # - Use SED to replace the HEALTHCARE_API_ENDPOINT that is currently in google.js
+        sed -i -e "s+https://healthcare.googleapis.com/v1beta1+$HEALTHCARE_API_ENDPOINT+g" /usr/share/nginx/html/google.js
+    fi
+
+	  # - Copy google.js to overwrite app-config.js
+	  cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
 fi
 
 echo "Starting Nginx to serve the OHIF Viewer..."

.github/stale.yml

@@ -9,13 +9,14 @@ daysUntilClose: 7
 exemptLabels:
   - 'Story :raised_hands:'
   - 'Bug: Verified :bug:'
-  - 'Task: CI/Tooling 🤖'
+  - 'Task: CI/Tooling :robot:'
   - 'Task: Docs 📖'
   - 'Task: Docs :book:'
-  - 'Task: Refactor 🛠'
+  - 'Task: Refactor :hammer_and_wrench:'
   - 'Task: Tests :microscope:'
   - 'PR: Awaiting Review 👀'
   - 'Triage :white_flag:'
+  - 'Extension: Discussion'
   - 'Announcement 🎉'
 # Label to use when marking an issue as stale
 staleLabel: 'Stale :baguette_bread:'

.gitignore

@@ -30,6 +30,7 @@ docker/dcm4che/dcm4che-arc
 
 # Cypress test results
 videos/
+screenshots/
 
 # Locize settings
 .locize

.webpack/webpack.base.js

@@ -72,12 +72,17 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
     },
     plugins: [
       new webpack.DefinePlugin({
+        /* Application */
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
         'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''),
         'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
         'process.env.VERSION_NUMBER': JSON.stringify(PACKAGE.version || ''),
         'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM),
+        /* i18n */
+        'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''),
+        'process.env.LOCIZE_PROJECTID': JSON.stringify(process.env.LOCIZE_PROJECTID || ''),
+        'process.env.LOCIZE_API_KEY': JSON.stringify(process.env.LOCIZE_API_KEY || ''),
       }),
     ],
     // Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at danny.ri.brown+OHIFcoc@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1 @@
+See our contributing guidelines at [`https://docs.ohif.org`](https://docs.ohif.org/development/contributing.html)

README.md

@@ -271,8 +271,8 @@ MIT © [OHIF](https://github.com/OHIF)
 <!-- Badges -->
 [lerna-image]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
 [lerna-url]: https://lerna.js.org/
-[netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
-[netlify-url]: https://app.netlify.com/sites/ohif/deploys
+[netlify-image]: https://api.netlify.com/api/v1/badges/32708787-c9b0-4634-b50f-7ca41952da77/deploy-status
+[netlify-url]: https://app.netlify.com/sites/ohif-dev/deploys
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
 [circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
 [circleci-url]: https://circleci.com/gh/OHIF/Viewers

docs/latest/SUMMARY.md

@@ -1,7 +1,6 @@
 # OHIF Viewers
 
 - [Our Process](our-process.md)
-- [Quick Start](quick-start.md)
 - Development
   - [Getting Started](development/getting-started.md)
   - [Contributing](development/contributing.md)
@@ -26,11 +25,11 @@
     - [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)
+  - [Contexts](extensions/index.md#contexts)
+  - [ExtensionManager](extensions/index.md#extensionmanager)
+  - [OHIF Maintained](extensions/index.md#maintained-extensions)
 - [Services](services/index.md)
   - [Default](services/default/index.md)
-    - [Measurements](services/default/measurements.md)
   - [UI](services/ui/index.md)
     - [Dialog Service](services/ui/ui-dialog-service.md)
     - [Modal Service](services/ui/ui-modal-service.md)

docs/latest/configuring/index.md

@@ -66,6 +66,52 @@ window.config = {
 };
 ```
 
+The configuration can also be written as a JS Function in case you need to inject dependencies like external services:
+
+```js
+window.config = ({ servicesManager } = {}) => {
+  const { UIDialogService } = servicesManager.services;
+  return {
+    cornerstoneExtensionConfig: {
+      tools: {
+        ArrowAnnotate: {
+          configuration: {
+            getTextCallback: (callback, eventDetails) => UIDialogService.create({...
+          }
+        }
+      },
+    },
+    routerBasename: '/',
+    servers: {
+      dicomWeb: [
+        {
+          name: 'DCM4CHEE',
+          wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
+          qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
+          wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
+          qidoSupportsIncludeField: true,
+          imageRendering: 'wadors',
+          thumbnailRendering: 'wadors',
+        },
+      ],
+    },
+  };
+};
+```
+
+You can also create a new config file and specify its path relative to the build
+output's root by setting the `APP_CONFIG` environment variable. You can set the
+value of this environment variable a few different ways:
+
+- ~[Add a temporary environment variable in your shell](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-temporary-environment-variables-in-your-shell)~
+  - Previous `react-scripts` functionality that we need to duplicate with
+    `dotenv-webpack`
+- ~[Add environment specific variables in `.env` file(s)](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env)~
+  - Previous `react-scripts` functionality that we need to duplicate with
+    `dotenv-webpack`
+- Using the `cross-env` package in an npm script:
+  - `"build": "cross-env APP_CONFIG=config/my-config.js react-scripts build"`
+
 After updating the configuration, `yarn run build` to generate updated build
 output.
 

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

@@ -24,12 +24,12 @@ include tags. Here's how it works:
 </ul>
 
 <ol start="2">
-  <li>Create a JS Object to hold the OHIF Viewer's configuration. Here are some
+  <li>Create a JS Object or Function to hold the OHIF Viewer's configuration. Here are some
    example values that would allow the viewer to hit our public PACS:</li>
 </ol>
 
 ```js
-// Set before importing `ohif-viewer`
+// Set before importing `ohif-viewer` (JS Object)
 window.config = {
   // default: '/'
   routerBasename: '/',
@@ -49,6 +49,9 @@ window.config = {
 };
 ```
 
+To learn more about how you can configure the OHIF Viewer, check out our
+[Configuration Guide](./index.md).
+
 <ol start="3"><li>
   Render the viewer in the web page's target <code>div</code>
 </li></ol>

docs/latest/development/getting-started.md

@@ -75,7 +75,7 @@ You should see the following output:
 ### Building for Production
 
 > More comprehensive guides for building and publishing can be found in our
-> [deployment docs](./deployment/index.md)
+> [deployment docs](./../deployment/index.md)
 
 ```bash
 # Build static assets to host a PWA

docs/latest/extensions/index.md

@@ -8,12 +8,15 @@
   - [Modules](#modules)
   - [Contexts](#contexts)
 - [Consuming Extensions](#consuming-extensions)
+  - [Extension Manager](#extensionmanager)
 - [Maintained Extensions](#maintained-extensions)
 
 ## Overview
 
 We use extensions to help us isolate and package groups of related features.
-Extensions provide functionality, ui components, and new behaviors.
+Extensions provide functionality, ui components, and new behaviors. Ideally,
+they're built in a way that allows them to extend entirely different
+implementations of the `@ohif/viewer` project.
 
 <div style="text-align: center;">
   <a href="/assets/img/extensions-diagram.png">
@@ -46,9 +49,8 @@ Practical examples of extensions include:
 
 ### 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.
+An extension is a plain JavaScript object that has an `id` property, and one or
+more [modules](#modules) and/or [lifecycle hooks](#lifecycle-hooks).
 
 ```js
 // prettier-ignore
@@ -78,6 +80,12 @@ 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`.
 
+#### Registering at Runtime
+
+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.
+
 ```js
 // prettier-ignore
 const config = {
@@ -91,20 +99,13 @@ const config = {
 }
 ```
 
-#### 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
+#### Registering at Build Time
 
 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:
+them at "build time" to leverage advantages afforded to us by modern tooling:
 
-- Code Splitting
+- Code Splitting (dynamic imports)
 - Tree Shaking
 - Dependency deduplication
 
@@ -116,23 +117,106 @@ You can update the list of bundled extensions by:
 
 ### Lifecycle Hooks
 
-...
+Currently, there is only a single lifecycle hook for extensions:
+[`preRegistration`](./lifecycle/pre-registration.md)
+
+If an extension defines the [`preRegistration`](./lifecycle/pre-registration.md)
+lifecycle hook, it is called before any modules are registered in the
+`ExtensionManager`. It's most commonly used to wire up extensions to
+[services](./../services/index.md) and [commands](./modules/commands.md), and to
+bootstrap 3rd party libraries.
 
 ### 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.
+Modules are the meat of extensions. They provide "definitions", components, and
+filtering/mapping logic that are then made available by various managers and
+services.
+
+Each module type has a special purpose, and is consumed by our viewer
+differently.
+
+| Type                                              | Description                                                      | Examples                                          |
+| ------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------- |
+| [Commands](./modules/commands.md)                 | Adds named commands, scoped to a context, to the CommandsManager | `setToolActive()`, `nextSeries()`                 |
+| [Panel](./modules/panel.md)                       | Adds left or right hand side panels                              | `<ThumbnailList />`, `<MeasurementsTable />`      |
+| [SOPClassHandler](./modules/sop-class-handler.md) | Determines how retrieved study data is split into "DisplaySets"  | `getDisplaySetFromSeries()`                       |
+| [Toolbar](./modules/toolbar.md)                   | Adds buttons or custom components to the toolbar                 | Toolbar button, nested buttons, custom            |
+| [Viewport](./modules/viewport.md)                 | Adds a component responsible for rendering a "DisplaySet"        | `<CornerstoneViewport />`, `<DicomPdfViewport />` |
+
+<figure style="text-align: center; font-style: italic;">Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.</figure>
 
 ### Contexts
 
-...
+The `@ohif/viewer` tracks "active contexts" that extensions can use to scope
+their functionality. Some example contexts being:
+
+- Route: `ROUTE:VIEWER`, `ROUTE:STUDY_LIST`
+- Active Viewport: `ACTIVE_VIEWPORT:CORNERSTONE`, `ACTIVE_VIEWPORT:VTK`
+
+An extension module can use these to say "Only show this Toolbar Button if the
+active viewport is a Cornerstone viewport." This helps us use the appropriate UI
+and behaviors depending on the current contexts.
+
+For example, if we have hotkey that "rotates the active viewport", each Viewport
+module that supports this behavior can add a command with the same name, scoped
+to the appropriate context. When the `command` is fired, the "active contexts"
+are used to determine the appropriate implementation of the rotate behavior.
 
 ## Consuming Extensions
 
-...
+We consume extensions, via the `ExtensionManager`, in our `@ohif/viewer`
+project.
+
+```js
+const extensionManager = new ExtensionManager({
+  commandsManager,
+  servicesManager,
+});
+
+// prettier-ignore
+extensionManager.registerExtensions([ /** **/ ]);
+```
+
+The `@ohif/viewer` project handles data fetching, basic routing, wires up UI
+services, and is the home to the more bespoke application logic that doesn't
+make as much sense to make reusable.
+
+Long-term, replacing the `@ohif/viewer` application and consuming extensions
+(and the `ExtensionManager`) in your own project is the ideal path for
+applications requiring a high degree of customization that can't be achieved
+with current theming, configuration, extension, and services support.
+
+If you're not sure how to achieve your goals with the extensibility available
+today, create a GitHub issue!
+
+### `ExtensionManager`
+
+The `ExtensionManager` is a class made available to us via the `@ohif/core`
+project (platform/core). Our application instantiates a single instance of it,
+and provides a `ServicesManager` and `CommandsManager` along with the application's
+configuration through the appConfig key (optional).
+
+```js
+const commandsManager = new CommandsManager();
+const servicesManager = new ServicesManager();
+const extensionManager = new ExtensionManager({
+  commandsManager,
+  servicesManager,
+  appConfig
+});
+```
+
+The `ExtensionManager` only has a few public members:
+
+- `registerExtension` - Registers a single extension
+- `registerExtensions` - Registers an array of extensions
+- `modules` - An object containing registered extensions by `MODULE_TYPE`
+
+During registration, lifecycle hooks and modules have access to the extension's config,
+the application's config and `ExtensionManager`'s `ServicesManager` and `CommandsManager` instances.
+
+Our `@ohif/viewer` uses the `modules` member to access registered extensions at
+appropriate places in our application.
 
 ## Maintained Extensions
 

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

@@ -1,12 +1,31 @@
 # Lifecylce Hook: preRegistration
 
 If an extension defines the `preRegistration` lifecycle hook, it is called
-before any modules are registered to the `ExtensionManager`.
+before any modules are registered in the `ExtensionManager`. This hook can be
+used to:
+
+- initialize 3rd party libraries
+- register event listeners
+- add or call services
+- add or call commands
+
+The `preRegistration` hook receives an object containing the
+`ExtensionManager`'s associated `ServicesManager`, `CommandsManager`, and any
+`configuration` that was provided with the extension at time of registration.
+
+_Example `preRegistration` hook implementation_
 
 ```js
 export default {
   id: 'MyExampleExtension',
 
+  /**
+   * @param {object} params
+   * @param {object} params.configuration
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   * @returns void
+   */
   preRegistration({ servicesManager, commandsManager, configuration }) {
     console.log('Wiring up important stuff.');
 

docs/latest/extensions/modules/commands.md

@@ -1,34 +1,158 @@
 # 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][#]).
+- [Overview](#overview)
+- [Command Definitions](#command-definitions)
+- [Commands Manager](#commands-manager)
+  - [Instantiating](#instatiating)
+  - [Public API](#public-api)
+  - [Contexts](#contexts)
+
+## Overview
+
+An extension can register a Commands Module by defining a `getCommandsModule`
+method. The Commands Module allows us to register one or more commands scoped to
+specific [contexts](./../index.md#contexts). Commands have several unique
+characteristics that make them tremendously powerful:
+
+- Multiple implementations for the same command can be defined
+- Only the correct command's implementation will be run, dependent on the
+  application's "context"
+- Commands can be called from extensions, modules, and the consuming application
+
 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'
-        }
-    }
+export default {
+  id: 'example-commands-module',
+
+  /**
+   * @param {object} params
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   */
+  getCommandsModule({ servicesManager, commandsManager }) {
+    return {
+      definitions: {
+        sayHello: {
+          commandFn: ({ words }) => {
+            console.log(words);
+          },
+          options: { words: 'Hello!' },
+        },
+      },
+      defaultContext: 'VIEWER',
+    };
+  },
+};
+```
+
+Each definition returned by the Commands Module is registered to the
+`ExtensionManager`'s `CommandsManager`.
+
+## Command Definitions
+
+The command definition consists of a named command (`myCommandName` below) and a
+`commandFn`. The command name is used to call the command, and the `commandFn`
+is the "command" that is actioned.
+
+```js
+myCommandName: {
+	commandFn: ({ viewports, other, options }) => { },
+	storeContexts: ['viewports'],
+	options: { words: 'Just kidding! Goodbye!' },
+	context: 'ACTIVE_VIEWPORT::CORNERSTONE',
 }
 ```
+
+| Property        | Type               | Description                                                                                                                             |
+| --------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `commandFn`     | func               | The function to call when command is run. Receives `options` and `storeContexts`.                                                       |
+| `storeContexts` | string[]           | (optional) Expected state objects to be passed in as props. Located using `getAppState` fn defined at `CommandsManager`'s instatiation. |
+| `options`       | object             | (optional) Arguments to pass at the time of calling to the `commandFn`                                                                  |
+| `context`       | string[] or string | (optional) Overrides the `defaultContext`. Let's us know if command is currently "available" to be run.                                 |
+
+## Command Behavior
+
+**I have many similar commands. How can I share their `commandFn` and make it
+reusable?**
+
+This is where `storeContexts` and `options` come in. We use these in our
+`setToolActive` command. `storeContexts` helps us identify our `activeViewport`,
+and `options` allow us to pass in the name of a tool we would like to set as
+active.
+
+**If there are multiple valid commands for the application's active contexts**
+
+- What happens: all commands are run
+- When to use: A `clearData` command that cleans up state for multiple
+  extensions
+
+**If no commands are valid for the application's active contexts**
+
+- What happens: a warning is printed to the console
+- When to use: a `hotkey` (like "invert") that doesn't make sense for the
+  current viewport (PDF or HTML)
+
+## `CommandsManager`
+
+The `CommandsManager` is a class defined in the `@ohif/core` project. A single
+instance of it should be defined in the consuming application, and it should be
+used when constructing the `ExtensionManager`.
+
+### Instantiating
+
+When we instantiate the `CommandsManager`, we need to pass it two methods:
+
+- `getAppState` - Should return the application's state when called
+- `getActiveContexts` - Should return the application's active contexts when
+  called
+
+These methods are used internally to help determine which commands are currently
+valid, and how to provide them with any state they may need at the time they are
+called.
+
+```js
+const commandsManager = new CommandsManager({
+  getAppState,
+  getActiveContexts,
+});
+```
+
+### Public API
+
+If you would like to run a command in the consuming app or an extension, you can
+use one of the following methods:
+
+```js
+// Returns all commands for a given context
+commandsManager.getContext('string');
+
+// Attempts to run a command
+commandsManager.runCommand('speak', { command: 'hello' });
+
+// Run command, but override the active contexts
+commandsManager.runCommand('speak', { command: 'hello' }, ['VIEWER']);
+```
+
+The `ExtensionManager` handles registering commands and creating contexts, so
+most consumer's won't need these methods. If you find yourself using these, ask
+yourself "why can't I register these commands via an extension?"
+
+```js
+// Used by the `ExtensionManager` to register new commands
+commandsManager.registerCommand('context', 'name', commandDefinition);
+
+// Creates a new context; clears the context if it already exists
+commandsManager.createContext('string');
+```
+
+### Contexts
+
+It is up to the consuming application to define what contexts are possible, and
+which ones are currently active. As extensions depend heavily on these, we will
+likely publish guidance around creating contexts, and ways to override extension
+defined contexts in the near future. If you would like to discuss potential
+changes to how contexts work, please don't hesistate to createa new GitHub
+issue.
+
+[Some additional information on Contexts can be found here.](./../index.md#contexts)

docs/latest/extensions/modules/panel.md

@@ -1,3 +1,57 @@
 # Module: Panel
 
-...
+An extension can register a Panel Module by defining a `getPanelModule` method.
+The panel module provides the ability to define `menuOptions` and `components`
+that can be used by the consuming application. `components` are React Components
+that can be displayed in the consuming application's "Panel" Component.
+
+![Panel Extension](../../assets/img/extensions-panel.gif)
+
+<center><i>A panel extension example</i></center>
+
+The `menuOptions`'s `target` key points to a registered `components`'s `id`. A
+`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
+optional provide it's own `context` value.
+
+The `getPanelModule` receives an object containing the `ExtensionManager`'s
+associated `ServicesManager` and `CommandsManager`.
+
+```js
+import MyComponent from './MyComponent.js';
+
+export default {
+  id: 'example-panel-module',
+
+  /**
+   * @param {object} params
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   */
+  getPanelModule({ servicesManager, commandsManager }) {
+    return {
+      menuOptions: [
+        {
+          // A suggested icon
+          // Available icons determined by consuming app
+          icon: 'list',
+          // A suggested label
+          label: 'Magic',
+          // 'right' or 'left'
+          from: 'right',
+          // The target component to toggle open/close
+          target: 'target-component-id',
+          // Overrides `defaultContext`, if specified
+          context: ['ACTIVE_VIEWPORT:MAGIC'],
+        },
+      ],
+      components: [
+        {
+          id: 'target-component-id',
+          component: MyComponent,
+        },
+      ],
+      defaultContext: ['ROUTE:VIEWER'],
+    };
+  },
+};
+```

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

@@ -1,3 +1,90 @@
 # Module: SOP Class Handler
 
-...
+An extension can register a SOP Class Handler Module by defining a
+`getSopClassHandlerModule` method. The SOP Class Handler is a bit different from
+the other modules, as it doesn't provide a `1:1` schema for UI or provide it's
+own components. It instead defines:
+
+- `sopClassUids`: an array of string SOP Class UIDs that the
+  `getDisplaySetFromSeries` method should be applied to.
+- `getDisplaySetFromSeries`: a method that maps series and study metadata to a
+  display set
+
+A `displaySet` has the following shape:
+
+```js
+return {
+  plugin: 'html',
+  modality: 'SR',
+  displaySetInstanceUid: 0,
+  wadoRoot: study.getData().wadoRoot,
+  wadoUri: instance.getData().wadouri,
+  sopInstanceUid: instance.getSOPInstanceUID(),
+  seriesInstanceUid: series.getSeriesInstanceUID(),
+  studyInstanceUid: study.getStudyInstanceUID(),
+  authorizationHeaders,
+};
+```
+
+Where the `plugin` key is used to influence the default `ViewportComponent` for
+rendering the `displaySet`. Additional properties are passed to the
+`ViewportComponent` and used by the default `StudyBrowser` to render
+"thumbnails" for each `displaySet`
+
+## Example SOP Class Handler Module
+
+```js
+const SOP_CLASS_UIDS = {
+  BASIC_TEXT_SR: '1.2.840.10008.5.1.4.1.1.88.11',
+  ENHANCED_SR: '1.2.840.10008.5.1.4.1.1.88.22',
+};
+
+export default {
+  id: 'example-sop-class-handler-module',
+
+/**
+ * @param {object} params
+ * @param {ServicesManager} params.servicesManager
+ * @param {CommandsManager} params.commandsManager
+ */
+getSopClassHandlerModule({ servicesManager, commandsManager }) {
+  return {
+    id: 'OHIFDicomHtmlSopClassHandler',
+    sopClassUids: Object.values(SOP_CLASS_UIDS),
+
+    /**
+     * @param {object} series -
+     * @param {object} study -
+     * @param {object} dicomWebClient -
+     * @param {object} authorizationHeaders -
+     */
+    getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
+      const instance = series.getFirstInstance();
+
+      return {
+        plugin: 'html',
+        displaySetInstanceUid: 0,
+        wadoRoot: study.getData().wadoRoot,
+        wadoUri: instance.getData().wadouri,
+        sopInstanceUid: instance.getSOPInstanceUID(),
+        seriesInstanceUid: series.getSeriesInstanceUID(),
+        studyInstanceUid: study.getStudyInstanceUID(),
+        authorizationHeaders,
+      };
+    },
+  }
+};
+```
+
+## `@ohif/viewer` usage
+
+We use the `sopClassHandlerModule`s in three different places:
+
+- `ViewerLocalFileData.js`
+- `ViewerRetrieveStudyData.js`
+- `StandaloneRouting.js`
+
+Each time, it is used to map study and series data to `displaySets`. It does
+this by working alongside the `StudyMetadataManager` in `@ohif/core`. That
+manager has the method `createDisplaySets` that takes an array of
+`sopClassHandlerModules`.

docs/latest/extensions/modules/toolbar.md

@@ -1,48 +1,130 @@
 # 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`.
+An extension can register a Toolbar Module by defining a `getToolbarModule`
+method. This module is commonly used to define:
 
-![Toolbar Extension](../assets/img/extensions-toolbar.gif)
+- [Toolbar buttons](#button-definitions)
+- [Nested toolbar menus](#nested-toolbar-menus)
+- [Custom components](#custom-components)
 
-<center><i>A toolbar extension example</i></center>
+![Toolbar Extension](../../assets/img/extensions-toolbar.gif)
 
-Toolbar components are rendered in the `ToolbarRow` component.
+<center><i>Example toolbar button using the Dialog Service to show CINE controls.</i></center>
 
-For a complete example implementation,
-[check out the OHIFCornerstoneViewport's Toolbar Module](https://github.com/OHIF/Viewers/blob/master/extensions/cornerstone/src/toolbarModule.js).
+## Example Toolbar Module
 
-## 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
+The Toolbar Module should return an array of `definitions` and a
+`defaultContext`. There are currently a few different variations of definitions,
+each one is detailed further down.
 
 ```js
-definitions: [
-...
+export default {
+  id: 'example-toolbar-module',
+
+  /**
+   * @param {object} params
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   */
+  getToolbarModule({ servicesManager, commandsManager }) {
+    return {
+      definitions: [
+        /* Array of definitions */
+      ],
+      defaultContext: ['ROUTE:VIEWER'],
+    };
+  },
+};
+```
+
+## Button Definitions
+
+The simplest definition has the following properties:
+
+```js
+{
+  id: 'StackScroll',
+  label: 'Stack Scroll',
+  icon: 'bars',
+  type: 'setToolActive',
+  commandName: 'setToolActive',
+  commandOptions: { toolName: 'StackScroll' },
+},
+```
+
+| property         | description                                                       | values                                    |
+| ---------------- | ----------------------------------------------------------------- | ----------------------------------------- |
+| `id`             | Unique string identifier for the definition                       | \*                                        |
+| `label`          | User/display friendly to show in UI                               | \*                                        |
+| `icon`           | A string name for an icon supported by the consuming application. | \*                                        |
+| `type`           | Used to determine the button's component and behavior             | `"setToolActive"`, `"command"`            |
+| `commandName`    | (optional) The command to run when the button is used.            | Any command registed by a `CommandModule` |
+| `commandOptions` | (optional) Options to pass the target `commandName`               | \*                                        |
+| `context`        | (optional) Overrides module's `defaultContext`                    | Array of string context names             |
+
+Where a button with a `type` of `setToolActive` has an "active" styling applied
+when clicked; removing the active styling from all other buttons.
+
+## Nested Toolbar Menus
+
+You can indicate that buttons should be grouped and nested in a submenu by
+including `buttons` property in a definition:
+
+```js
+{
+  id: 'More',
+  label: 'More',
+  icon: 'ellipse-circle',
+  buttons: [
     {
-        id: 'Custom',
-        label: 'Custom',
-        icon: 'custom-icon',
-        CustomComponent: CustomToolbarComponent,
-    }
-...
-]
+      id: 'cstInvert',
+      label: 'Invert',
+      icon: 'circle',
+      type: 'command',
+      commandName: 'invertViewport',
+    },
+  ],
+},
+```
+
+![Toolbar Extension](../../assets/img/extensions-toolbar-nested.gif)
+
+<center><i>Example toolbar button demonstrating nested buttons.</i></center>
+
+## Custom Components
+
+The Toolbar Modules supports rendering custom components in place of the
+application's default. In place of the `type`, `commandName`, and
+`commandOptions` properties, we instead specify a `CustomComponent`.
+
+```js
+{
+  id: 'Custom',
+  label: 'Custom',
+  icon: 'custom-icon',
+  CustomComponent: CustomToolbarComponent,
+}
 
 ```
 
-`CustomComponent` components will receive the following props:
+The `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
+```html
+<CustomComponent
+  parentContext="{parentContext}"
+  toolbarClickCallback="{_handleToolbarButtonClick.bind(this)}"
+  button="{button}"
+  key="{button.id}"
+  activeButtons="{activeButtonsIds}"
+  isActive="{isActive}"
+/>
+```
+
+| Property               | Type     | Description                     |
+| ---------------------- | -------- | ------------------------------- |
+| `activeButtons`        | string[] | list of active buttons          |
+| `button`               | object   | its own definition object       |
+| `key`                  | string   | React key prop                  |
+| `isActive`             | boolean  | If current button is active     |
+| `parentContext`        | ?        | The parent component's context? |
+| `toolbarClickCallback` | func     | Callback method for clicks      |

docs/latest/extensions/modules/viewport.md

@@ -1,19 +1,39 @@
 # 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:
+An extension can register a Viewport Module by defining a `getViewportModule`
+method that returns a React component. Currently, we use viewport components to
+add support for:
 
-```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
+- 2D Medical Image Viewing (cornerstone ext.)
+- Structured Reports as HTML (dicom html ext.)
+- Encapsulated PDFs as PDFs (dicom pdf ext.)
+- Whole Slide Microscopy Viewing (whole slide ext.)
+- etc.
+
+The general pattern is, the [`sopClassHandlerModule`](#) helps us determine
+which Viewport Component a set of `sopClassUIDs` should default to. The Viewport
+Component receives props containing a display set it should know how to render.
+
+## Viewport Component Props
+
+Each `ViewportComponent` will receive the following props:
+
+```html
+<viewportComponent
+  viewportData="{viewportData}"
+  viewportIndex="{viewportIndex}"
+  children="{[children]}"
+/>
 ```
 
+| Property        | Type            | Description                       |
+| --------------- | --------------- | --------------------------------- |
+| `children`      | React.element[] |                                   |
+| `viewportData`  | object          | `viewportSpecificData` (probably) |
+| `viewportIndex` | number          |                                   |
+
+### `@ohif/viewer`
+
 Viewport components are managed by the `ViewportGrid` Component. Which Viewport
 component is used depends on:
 
@@ -23,7 +43,4 @@ component is used depends on:
 
 ![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).
+<center><i>An example of three cornerstone Viewports</i></center>

docs/latest/faq/scope-of-project.md

@@ -13,7 +13,7 @@ like user preferences and previous query paramaters. Because of this, the Viewer
 has been built to be highly configurable to work with almost any web accessible
 data source.
 
-![scope-of-project diagram](./assets/img/scope-of-project.png)
+![scope-of-project diagram](./../assets/img/scope-of-project.png)
 
 To be more specific, the OHIF Viewer is a collection of HTML, JS, and CSS files.
 These can be delivered to your end users however you would like:

docs/latest/services/ui/index.md

@@ -43,7 +43,7 @@ translate to in practice?
 
 ```js
 // In the application
-const UINotificationService = createUINotificationService();
+import UINotificationService from '@ohif/core';
 const servicesManager = new ServicesManager();
 
 servicesManager.registerService(UINotificationService);

docs/latest/viewer/configuration.md

@@ -1,3 +1,67 @@
 # Viewer: Configuration
 
-...
+We maintain a number of common viewer application configurations at
+[`<root>/platform/viewer/public/configs`][config-dir]. How these values are
+passed to the viewer depend on how it's deployed, but the two most common paths
+are:
+
+- `index.html` looks for `https://your-website.com/app-config.js` OR
+- `index.html` passes the values to `OHIF.installViewer()`
+
+```js
+window.config = {
+  routerBasename: '/',
+  whiteLabelling: {},
+  extensions: [],
+  showStudyList: true,
+  filterQueryParam: false,
+  servers: {
+    dicomWeb: [
+      {
+        name: 'DCM4CHEE',
+        wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
+        qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
+        wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
+        qidoSupportsIncludeField: true,
+        imageRendering: 'wadors',
+        thumbnailRendering: 'wadors',
+        enableStudyLazyLoad: true,
+      },
+    ],
+  },
+  // Supported Keys: https://craig.is/killing/mice
+  hotkeys: [
+    { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
+    { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
+    { commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
+    {
+      commandName: 'flipViewportVertical',
+      label: 'Flip Horizontally',
+      keys: ['h'],
+    },
+    {
+      commandName: 'flipViewportHorizontal',
+      label: 'Flip Vertically',
+      keys: ['v'],
+    },
+  ],
+  /* Configuration passed to the bundled cornerstone extension
+   *
+   * The cornerstone extension is currently tightly coupled to the platform.
+   * Until we're able to decouple it, this key will serve as a workaround to
+   * pass it configuration.
+   */
+  cornerstoneExtensionConfig: {
+    /* Whether to show/hide annotation "handles" */
+    hideHandles: true,
+  },
+};
+```
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[config-dir]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config
+<!-- prettier-ignore-end -->

docs/latest/viewer/environment-variables.md

@@ -0,0 +1,23 @@
+# Environment Variables
+
+There are a number of environment variables we use at build time to influence the output application's behavior.
+
+```bash
+# Application
+NODE_ENV=< production | development >
+DEBUG=< true | false >
+APP_CONFIG=< relative path to application configuration file >
+PUBLIC_URL=<>
+VERSION_NUMBER=<Set by CircleCI>
+BUILD_NUM=<Set by CircleCI>
+# i18n
+USE_LOCIZE=<false>
+LOCIZE_PROJECTID=<ProjectID to pull translations for>
+LOCIZE_API_KEY=<To enable Locize live editing of translations>
+```
+
+## Setting Environment Variables
+
+- `npx cross-env`
+- `.env` files
+- env variables on build machine, or for terminal session

docs/latest/viewer/index.md

@@ -1 +1,9 @@
 # Viewer
+
+The OHIF Viewing Platform strives to be highly configurable and extensible. This
+makes it easier for our community members to keep their "secret sauce" private,
+and incentivises contributions back to the platform. The `@ohif/viewer` project
+of the platform is the lynchpin that combines everything to create our
+application.
+
+- When configuration and themeing aren't enough

extensions/_example/src/index.js

@@ -12,8 +12,10 @@ export default {
    */
 
   preRegistration({
-    servicesManager,
-    configuration: extensionConfiguration,
+    servicesManager = {},
+    commandsManager = {},
+    appConfig = {},
+    configuration = {},
   }) {},
 
   /**

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.3.1...@ohif/extension-cornerstone@2.4.0) (2020-02-20)
+
+
+### Features
+
+* [#1342](https://github.com/OHIF/Viewers/issues/1342) - Window level tab ([#1429](https://github.com/OHIF/Viewers/issues/1429)) ([ebc01a8](https://github.com/OHIF/Viewers/commit/ebc01a8ca238d5a3437b44d81f75aa8a5e8d0574))
+
+
+
+
+
+## [2.3.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.3.0...@ohif/extension-cornerstone@2.3.1) (2020-02-14)
+
+
+### Bug Fixes
+
+* Creating 2 commands to activate zoom tool and also to move between displaySets ([#1446](https://github.com/OHIF/Viewers/issues/1446)) ([06a4af0](https://github.com/OHIF/Viewers/commit/06a4af06faaecf6fa06ccd90cdfa879ee8d53053))
+
+
+
+
+
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.2.2...@ohif/extension-cornerstone@2.3.0) (2020-02-10)
+
+
+### Features
+
+* 🎸 MeasurementService ([#1314](https://github.com/OHIF/Viewers/issues/1314)) ([0c37a40](https://github.com/OHIF/Viewers/commit/0c37a406d963569af8c3be24c697dafd42712dfc))
+
+
+
+
+
+## [2.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.2.1...@ohif/extension-cornerstone@2.2.2) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.2.0...@ohif/extension-cornerstone@2.2.1) (2019-12-20)
+
+
+### Bug Fixes
+
+* 🐛 1241: Make Plugin switch part of ToolbarModule ([#1322](https://github.com/OHIF/Viewers/issues/1322)) ([6540e36](https://github.com/OHIF/Viewers/commit/6540e36818944ac2eccc696186366ae495b33a04)), closes [#1241](https://github.com/OHIF/Viewers/issues/1241)
+
+
+
+
+
+# [2.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.1.1...@ohif/extension-cornerstone@2.2.0) (2019-12-20)
+
+
+### Features
+
+* 🎸 Configuration so viewer tools can nix handles ([#1304](https://github.com/OHIF/Viewers/issues/1304)) ([63594d3](https://github.com/OHIF/Viewers/commit/63594d36b0bdba59f0901095aed70b75fb05172d)), closes [#1223](https://github.com/OHIF/Viewers/issues/1223)
+
+
+
+
+
+## [2.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.1.0...@ohif/extension-cornerstone@2.1.1) (2019-12-16)
+
+
+### Bug Fixes
+
+* 🐛 add WwwcRegionTool to cornerstone tools initialization ([#1302](https://github.com/OHIF/Viewers/issues/1302)) ([d5bf728](https://github.com/OHIF/Viewers/commit/d5bf72851a32dff9fd3fc09332ea5250bc7e6114))
+
+
+
+
+
+# [2.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.0.2...@ohif/extension-cornerstone@2.1.0) (2019-12-11)
+
+
+### Features
+
+* 🎸 DICOM SR STOW on MeasurementAPI ([#954](https://github.com/OHIF/Viewers/issues/954)) ([ebe1af8](https://github.com/OHIF/Viewers/commit/ebe1af8d4f75d2483eba869655906d7829bd9666)), closes [#758](https://github.com/OHIF/Viewers/issues/758)
+
+
+
+
+
+## [2.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.0.1...@ohif/extension-cornerstone@2.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.0.0...@ohif/extension-cornerstone@2.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.7.2...@ohif/extension-cornerstone@2.0.0) (2019-12-09)
+
+
+* feat!: Ability to configure cornerstone tools via extension configuration (#1229) ([55a5806](https://github.com/OHIF/Viewers/commit/55a580659ecb74ca6433461d8f9a05c2a2b69533)), closes [#1229](https://github.com/OHIF/Viewers/issues/1229)
+
+
+### BREAKING CHANGES
+
+* modifies the exposed react <App /> components props. The contract for providing configuration for the app has changed. Please reference updated documentation for guidance.
+
+
+
+
+
 ## [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

extensions/cornerstone/README.md

@@ -67,6 +67,38 @@ Our Viewport wraps [cornerstonejs/react-cornerstone-viewport][react-viewport]
 and is connected the redux store. This module is the most prone to change as we
 hammer out our Viewport interface.
 
+## Tool Configuration
+
+Tools can be configured through extension configuration using the tools key:
+
+```js
+  ...
+  cornerstoneExtensionConfig: {
+    tools: {
+      ArrowAnnotate: {
+        configuration: {
+          getTextCallback: (callback, eventDetails) => callback(prompt('Enter your custom annotation')),
+        },
+      },
+    },
+  },
+  ...
+```
+
+## Annotate Tools Configuration
+
+*We currently support one property for annotation tools.*
+
+### Hide handles
+This extension configuration allows you to toggle on/off handle rendering for all annotate tools:
+
+```js
+  ...
+  cornerstoneExtensionConfig: {
+    hideHandles: true,
+  },
+  ...
+
 ## Resources
 
 ### Repositories

extensions/cornerstone/babel.config.js

@@ -0,0 +1 @@
+module.exports = require("../../babel.config.js");

extensions/cornerstone/jest.config.js

@@ -0,0 +1,13 @@
+const base = require('../../jest.config.base.js');
+const pkg = require('./package');
+
+module.exports = {
+  ...base,
+  name: pkg.name,
+  displayName: pkg.name,
+  // rootDir: "../.."
+  // testMatch: [
+  //   //`<rootDir>/platform/${pack.name}/**/*.spec.js`
+  //   "<rootDir>/platform/viewer/**/*.test.js"
+  // ]
+};

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "1.7.2",
+  "version": "2.4.0",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -25,16 +25,18 @@
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "prepublishOnly": "yarn run build",
-    "start": "yarn run dev"
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage"
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.8.0",
+    "cornerstone-tools": "^4.12.0",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.8.2",
     "dicom-parser": "^1.8.3",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -47,6 +49,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "classnames": "^2.2.6",
+    "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "query-string": "^6.8.3",
     "react-cornerstone-viewport": "2.x.x"

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -248,10 +248,13 @@ class OHIFCornerstoneViewport extends Component {
     // TODO: Does it make more sense to use Context?
     if (this.props.children && this.props.children.length) {
       childrenWithProps = this.props.children.map((child, index) => {
-        return React.cloneElement(child, {
-          viewportIndex: this.props.viewportIndex,
-          key: index,
-        });
+        return (
+          child &&
+          React.cloneElement(child, {
+            viewportIndex: this.props.viewportIndex,
+            key: index,
+          })
+        );
       });
     }
 

extensions/cornerstone/src/commandsModule.js

@@ -2,6 +2,7 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from '@ohif/core';
 
+import setCornerstoneLayout from './utils/setCornerstoneLayout.js';
 import { getEnabledElement } from './state';
 import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 const scroll = cornerstoneTools.import('util/scroll');
@@ -73,10 +74,6 @@ const commandsModule = ({ servicesManager }) => {
       }
       cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
     },
-    updateViewportDisplaySet: ({ direction }) => {
-      // TODO
-      console.warn('updateDisplaySet: ', direction);
-    },
     clearAnnotations: ({ viewports }) => {
       const element = getEnabledElement(viewports.activeViewportIndex);
       if (!element) {
@@ -148,18 +145,133 @@ const commandsModule = ({ servicesManager }) => {
     showDownloadViewportModal: ({ title, viewports }) => {
       const activeViewportIndex = viewports.activeViewportIndex;
       const { UIModalService } = servicesManager.services;
-      UIModalService.show({
-        content: CornerstoneViewportDownloadForm,
-        title,
-        contentProps: {
-          activeViewportIndex,
-          onClose: UIModalService.hide,
-        },
+      if (UIModalService) {
+        UIModalService.show({
+          content: CornerstoneViewportDownloadForm,
+          title,
+          contentProps: {
+            activeViewportIndex,
+            onClose: UIModalService.hide,
+          },
+        });
+      }
+    },
+    updateTableWithNewMeasurementData({
+      toolType,
+      measurementNumber,
+      location,
+      description,
+    }) {
+      // Update all measurements by measurement number
+      const measurementApi = OHIF.measurements.MeasurementApi.Instance;
+      const measurements = measurementApi.tools[toolType].filter(
+        m => m.measurementNumber === measurementNumber
+      );
+
+      measurements.forEach(measurement => {
+        measurement.location = location;
+        measurement.description = description;
+
+        measurementApi.updateMeasurement(measurement.toolType, measurement);
       });
+
+      measurementApi.syncMeasurementsAndToolData();
+
+      // Update images in all active viewports
+      cornerstone.getEnabledElements().forEach(enabledElement => {
+        cornerstone.updateImage(enabledElement.element);
+      });
+    },
+    getNearbyToolData({ element, canvasCoordinates, availableToolTypes }) {
+      const nearbyTool = {};
+      let pointNearTool = false;
+
+      availableToolTypes.forEach(toolType => {
+        const elementToolData = cornerstoneTools.getToolState(
+          element,
+          toolType
+        );
+
+        if (!elementToolData) {
+          return;
+        }
+
+        elementToolData.data.forEach((toolData, index) => {
+          let elementToolInstance = cornerstoneTools.getToolForElement(
+            element,
+            toolType
+          );
+
+          if (!elementToolInstance) {
+            elementToolInstance = cornerstoneTools.getToolForElement(
+              element,
+              `${toolType}Tool`
+            );
+          }
+
+          if (!elementToolInstance) {
+            console.warn('Tool not found.');
+            return undefined;
+          }
+
+          if (
+            elementToolInstance.pointNearTool(
+              element,
+              toolData,
+              canvasCoordinates
+            )
+          ) {
+            pointNearTool = true;
+            nearbyTool.tool = toolData;
+            nearbyTool.index = index;
+            nearbyTool.toolType = toolType;
+          }
+        });
+
+        if (pointNearTool) {
+          return false;
+        }
+      });
+
+      return pointNearTool ? nearbyTool : undefined;
+    },
+    removeToolState: ({ element, toolType, tool }) => {
+      cornerstoneTools.removeToolState(element, toolType, tool);
+      cornerstone.updateImage(element);
+    },
+    setCornerstoneLayout: () => {
+      setCornerstoneLayout();
+    },
+    setWindowLevel: ({ viewports, window, level }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+
+      if (enabledElement) {
+        let viewport = cornerstone.getViewport(enabledElement);
+        viewport.voi = {
+          windowWidth: Number(window),
+          windowCenter: Number(level),
+        };
+        cornerstone.setViewport(enabledElement, viewport);
+      }
     },
   };
 
   const definitions = {
+    getNearbyToolData: {
+      commandFn: actions.getNearbyToolData,
+      storeContexts: [],
+      options: {},
+    },
+    removeToolState: {
+      commandFn: actions.removeToolState,
+      storeContexts: [],
+      options: {},
+    },
+    updateTableWithNewMeasurementData: {
+      commandFn: actions.updateTableWithNewMeasurementData,
+      storeContexts: [],
+      options: {},
+    },
     showDownloadViewportModal: {
       commandFn: actions.showDownloadViewportModal,
       storeContexts: ['viewports'],
@@ -230,24 +342,28 @@ const commandsModule = ({ servicesManager }) => {
       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: {},
     },
+    setZoomTool: {
+      commandFn: actions.setToolActive,
+      storeContexts: [],
+      options: { toolName: 'Zoom' },
+    },
+    setCornerstoneLayout: {
+      commandFn: actions.setCornerstoneLayout,
+      storeContexts: [],
+      options: {},
+      context: 'VIEWER',
+    },
+    setWindowLevel: {
+      commandFn: actions.setWindowLevel,
+      storeContexts: ['viewports'],
+      options: {},
+    },
   };
 
   return {

extensions/cornerstone/src/init.js

@@ -1,9 +1,11 @@
 import OHIF from '@ohif/core';
+import { SimpleDialog } from '@ohif/ui';
 import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
-import initCornerstoneTools from './initCornerstoneTools.js';
+import merge from 'lodash.merge';
 import queryString from 'query-string';
-import { SimpleDialog } from '@ohif/ui';
+import initCornerstoneTools from './initCornerstoneTools.js';
+import measurementServiceMappingsFactory from './utils/measurementServiceMappings/measurementServiceMappingsFactory';
 
 function fallbackMetaDataProvider(type, imageId) {
   if (!imageId.includes('wado?requestType=WADO')) {
@@ -16,7 +18,7 @@ function fallbackMetaDataProvider(type, imageId) {
   const wadoRoot = window.store.getState().servers.servers[0].wadoRoot;
   const wadoRsImageId = `wadors:${wadoRoot}/studies/${qs.studyUID}/series/${
     qs.seriesUID
-  }/instances/${qs.objectUID}/frames/${qs.frame || 1}`;
+    }/instances/${qs.objectUID}/frames/${qs.frame || 1}`;
 
   return cornerstone.metaData.get(type, wadoRsImageId);
 }
@@ -26,30 +28,33 @@ cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);
 
 /**
  *
- * @param {object} configuration
+ * @param {Object} servicesManager
+ * @param {Object} configuration
  * @param {Object|Array} configuration.csToolsConfig
  */
-export default function init({ servicesManager, configuration = {} }) {
-  const { UIDialogService } = servicesManager.services;
+export default function init({ servicesManager, configuration }) {
+  const { UIDialogService, MeasurementService } = servicesManager.services;
+
   const callInputDialog = (data, event, callback) => {
-    let dialogId = UIDialogService.create({
-      content: SimpleDialog.InputDialog,
-      defaultPosition: {
-        x: (event && event.currentPoints.canvas.x) || 0,
-        y: (event && event.currentPoints.canvas.y) || 0,
-      },
-      showOverlay: true,
-      contentProps: {
-        title: 'Enter your annotation',
-        label: 'New label',
-        measurementData: data ? { description: data.text } : {},
-        onClose: () => UIDialogService.dismiss({ id: dialogId }),
-        onSubmit: value => {
-          callback(value);
-          UIDialogService.dismiss({ id: dialogId });
+    if (UIDialogService) {
+      let dialogId = UIDialogService.create({
+        centralize: true,
+        isDraggable: false,
+        content: SimpleDialog.InputDialog,
+        useLastPosition: false,
+        showOverlay: true,
+        contentProps: {
+          title: 'Enter your annotation',
+          label: 'New label',
+          measurementData: data ? { description: data.text } : {},
+          onClose: () => UIDialogService.dismiss({ id: dialogId }),
+          onSubmit: value => {
+            callback(value);
+            UIDialogService.dismiss({ id: dialogId });
+          },
         },
-      },
-    });
+      });
+    }
   };
 
   const { csToolsConfig } = configuration;
@@ -72,61 +77,105 @@ export default function init({ servicesManager, configuration = {} }) {
 
   initCornerstoneTools(defaultCsToolsConfig);
 
-  // ~~ Toooools 🙌
-  const {
-    PanTool,
-    ZoomTool,
-    WwwcTool,
-    MagnifyTool,
-    StackScrollTool,
-    StackScrollMouseWheelTool,
-    // Touch
-    PanMultiTouchTool,
-    ZoomTouchPinchTool,
-    // Annotations
-    EraserTool,
-    BidirectionalTool,
-    LengthTool,
-    AngleTool,
-    FreehandRoiTool,
-    EllipticalRoiTool,
-    DragProbeTool,
-    RectangleRoiTool,
-    // Segmentation
-    BrushTool,
-  } = csTools;
-  const tools = [
-    PanTool,
-    ZoomTool,
-    WwwcTool,
-    MagnifyTool,
-    StackScrollTool,
-    StackScrollMouseWheelTool,
-    // Touch
-    PanMultiTouchTool,
-    ZoomTouchPinchTool,
-    // Annotations
-    EraserTool,
-    BidirectionalTool,
-    LengthTool,
-    AngleTool,
-    FreehandRoiTool,
-    EllipticalRoiTool,
-    DragProbeTool,
-    RectangleRoiTool,
-    // Segmentation
-    BrushTool,
-  ];
+  const toolsGroupedByType = {
+    touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
+    annotations: [
+      csTools.ArrowAnnotateTool,
+      csTools.EraserTool,
+      csTools.BidirectionalTool,
+      csTools.LengthTool,
+      csTools.AngleTool,
+      csTools.FreehandRoiTool,
+      csTools.EllipticalRoiTool,
+      csTools.DragProbeTool,
+      csTools.RectangleRoiTool,
+    ],
+    segmentation: [csTools.BrushTool],
+    other: [
+      csTools.PanTool,
+      csTools.ZoomTool,
+      csTools.WwwcTool,
+      csTools.WwwcRegionTool,
+      csTools.MagnifyTool,
+      csTools.StackScrollTool,
+      csTools.StackScrollMouseWheelTool,
+      csTools.OverlayTool,
+    ],
+  };
 
-  tools.forEach(tool => csTools.addTool(tool));
+  let tools = [];
+  Object.keys(toolsGroupedByType).forEach(toolsGroup =>
+    tools.push(...toolsGroupedByType[toolsGroup])
+  );
 
-  csTools.addTool(csTools.ArrowAnnotateTool, {
-    configuration: {
-      getTextCallback: (callback, eventDetails) =>
-        callInputDialog(null, eventDetails, callback),
-      changeTextCallback: (data, eventDetails, callback) =>
-        callInputDialog(data, eventDetails, callback),
+  /* Measurement Service */
+  _connectToolsToMeasurementService(MeasurementService);
+
+  /* Add extension tools configuration here. */
+  const internalToolsConfig = {
+    ArrowAnnotate: {
+      configuration: {
+        getTextCallback: (callback, eventDetails) =>
+          callInputDialog(null, eventDetails, callback),
+        changeTextCallback: (data, eventDetails, callback) =>
+          callInputDialog(data, eventDetails, callback),
+      },
     },
+  };
+
+  /* Abstract tools configuration using extension configuration. */
+  const parseToolProps = (props, tool) => {
+    const { annotations } = toolsGroupedByType;
+    // An alternative approach would be to remove the `drawHandlesOnHover` config
+    // from the supported configuration properties in `cornerstone-tools`
+    const toolsWithHideableHandles = annotations.filter(
+      tool => !['RectangleRoiTool', 'EllipticalRoiTool'].includes(tool.name)
+    );
+
+    let parsedProps = { ...props };
+
+    /**
+     * drawHandles - Never/Always show handles
+     * drawHandlesOnHover - Only show handles on handle hover (pointNearHandle)
+     *
+     * Does not apply to tools where handles aren't placed in predictable
+     * locations.
+     */
+    if (
+      configuration.hideHandles !== false &&
+      toolsWithHideableHandles.includes(tool)
+    ) {
+      if (props.configuration) {
+        parsedProps.configuration.drawHandlesOnHover = true;
+      } else {
+        parsedProps.configuration = { drawHandlesOnHover: true };
+      }
+    }
+
+    return parsedProps;
+  };
+
+  /* Add tools with its custom props through extension configuration. */
+  tools.forEach(tool => {
+    const toolName = tool.name.replace('Tool', '');
+    const externalToolsConfig = configuration.tools || {};
+    const externalToolProps = externalToolsConfig[toolName] || {};
+    const internalToolProps = internalToolsConfig[toolName] || {};
+    const props = merge(
+      internalToolProps,
+      parseToolProps(externalToolProps, tool)
+    );
+    csTools.addTool(tool, props);
+  });
+
+  // TODO -> We need a better way to do this with maybe global tool state setting all tools passive.
+  const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
+  tools.forEach(tool => {
+    if (tool.prototype instanceof BaseAnnotationTool) {
+      // BaseAnnotationTool would likely come from csTools lib exports
+      const toolName = new tool().name;
+      csTools.setToolPassive(toolName); // there may be a better place to determine name; may not be on uninstantiated class
+    }
   });
 
   csTools.setToolActive('Pan', { mouseButtonMask: 4 });
@@ -135,4 +184,113 @@ export default function init({ servicesManager, configuration = {} }) {
   csTools.setToolActive('StackScrollMouseWheel', {}); // TODO: Empty options should not be required
   csTools.setToolActive('PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
   csTools.setToolActive('ZoomTouchPinch', {});
+  csTools.setToolEnabled('Overlay', {});
 }
+
+const _initMeasurementService = measurementService => {
+  /* Initialization */
+  const { toAnnotation, toMeasurement } = measurementServiceMappingsFactory(measurementService);
+  const csToolsVer4MeasurementSource = measurementService.createSource(
+    'CornerstoneTools',
+    '4'
+  );
+
+  /* Matching Criterias */
+  const matchingCriteria = {
+    valueType: measurementService.VALUE_TYPES.POLYLINE,
+    points: 2,
+  };
+
+  /* Mappings */
+  measurementService.addMapping(
+    csToolsVer4MeasurementSource,
+    'Length',
+    matchingCriteria,
+    toAnnotation,
+    toMeasurement
+  );
+
+  return csToolsVer4MeasurementSource;
+};
+
+const _connectToolsToMeasurementService = measurementService => {
+  const csToolsVer4MeasurementSource = _initMeasurementService(measurementService);
+  const {
+    id: sourceId,
+    addOrUpdate,
+    getAnnotation,
+  } = csToolsVer4MeasurementSource;
+
+  /* Measurement Service Events */
+  cornerstone.events.addEventListener(
+    cornerstone.EVENTS.ELEMENT_ENABLED,
+    event => {
+      const {
+        MEASUREMENT_ADDED,
+        MEASUREMENT_UPDATED,
+      } = measurementService.EVENTS;
+
+      measurementService.subscribe(
+        MEASUREMENT_ADDED,
+        ({ source, measurement }) => {
+          if (![sourceId].includes(source.id)) {
+            const annotation = getAnnotation('Length', measurement.id);
+
+            console.log(
+              'Measurement Service [Cornerstone]: Measurement added',
+              measurement
+            );
+            console.log('Mapped annotation:', annotation);
+          }
+        });
+
+      measurementService.subscribe(
+        MEASUREMENT_UPDATED,
+        ({ source, measurement }) => {
+          if (![sourceId].includes(source.id)) {
+            const annotation = getAnnotation('Length', measurement.id);
+
+            console.log(
+              'Measurement Service [Cornerstone]: Measurement updated',
+              measurement
+            );
+            console.log('Mapped annotation:', annotation);
+          }
+        }
+      );
+
+      const addOrUpdateMeasurement = csToolsAnnotation => {
+        try {
+          const { toolName, toolType, measurementData } = csToolsAnnotation;
+          const csTool = toolName || measurementData.toolType || toolType;
+          csToolsAnnotation.id = measurementData._measurementServiceId;
+          const measurementServiceId = addOrUpdate(csTool, csToolsAnnotation);
+
+          if (!measurementData._measurementServiceId) {
+            addMeasurementServiceId(measurementServiceId, csToolsAnnotation);
+          }
+        } catch (error) {
+          console.warn('Failed to add or update measurement:', error);
+        }
+      };
+
+      const addMeasurementServiceId = (id, csToolsAnnotation) => {
+        const { measurementData } = csToolsAnnotation;
+        Object.assign(measurementData, { _measurementServiceId: id });
+      };
+
+      [
+        csTools.EVENTS.MEASUREMENT_ADDED,
+        csTools.EVENTS.MEASUREMENT_MODIFIED,
+      ].forEach(csToolsEvtName => {
+        event.detail.element.addEventListener(
+          csToolsEvtName,
+          ({ detail: csToolsAnnotation }) => {
+            console.log(`Cornerstone Element Event: ${csToolsEvtName}`);
+            addOrUpdateMeasurement(csToolsAnnotation);
+          }
+        );
+      });
+    }
+  );
+};

extensions/cornerstone/src/toolbarModule.js

@@ -237,6 +237,15 @@ const definitions = [
       },
     ],
   },
+  {
+    id: 'Exit2DMPR',
+    label: 'Exit 2D MPR',
+    icon: 'times',
+    //
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'setCornerstoneLayout',
+    context: 'ACTIVE_VIEWPORT::VTK',
+  }
 ];
 
 export default {

extensions/cornerstone/src/utils/measurementServiceMappings/measurementServiceMappingsFactory.js

@@ -0,0 +1,133 @@
+import cornerstone from 'cornerstone-core';
+
+const SUPPORTED_TOOLS = ['Length', 'EllipticalRoi', 'RectangleRoi', 'ArrowAnnotate'];
+
+const measurementServiceMappingsFactory = measurementService => {
+  /**
+   * Maps measurement service format object to cornerstone annotation object.
+   *
+   * @param {Measurement} measurement The measurement instance
+   * @param {string} definition The source definition
+   * @return {Object} Cornerstone annotation data
+   */
+  const toAnnotation = (measurement, definition) => {
+    const {
+      id,
+      label,
+      description,
+      points,
+      unit,
+      sopInstanceUID,
+      frameOfReferenceUID,
+      referenceSeriesUID,
+    } = measurement;
+
+    return {
+      toolName: definition,
+      measurementData: {
+        sopInstanceUid: sopInstanceUID,
+        frameOfReferenceUid: frameOfReferenceUID,
+        seriesInstanceUid: referenceSeriesUID,
+        unit,
+        text: label,
+        description,
+        handles: _getHandlesFromPoints(points),
+        _measurementServiceId: id,
+      },
+    };
+  };
+
+  /**
+   * Maps cornerstone annotation event data to measurement service format.
+   *
+   * @param {Object} cornerstone Cornerstone event data
+   * @return {Measurement} Measurement instance
+   */
+  const toMeasurement = csToolsAnnotation => {
+    const { element, measurementData } = csToolsAnnotation;
+    const tool =
+      csToolsAnnotation.toolType ||
+      csToolsAnnotation.toolName ||
+      measurementData.toolType;
+
+    const validToolType = toolName => SUPPORTED_TOOLS.includes(toolName);
+
+    if (!validToolType(tool)) {
+      throw new Error('Tool not supported');
+    }
+
+    const {
+      sopInstanceUid,
+      frameOfReferenceUid,
+      seriesInstanceUid,
+    } = _getAttributes(element);
+
+    const points = [];
+    points.push(measurementData.handles);
+
+    return {
+      id: measurementData._measurementServiceId,
+      sopInstanceUID: sopInstanceUid,
+      frameOfReferenceUID: frameOfReferenceUid,
+      referenceSeriesUID: seriesInstanceUid,
+      label: measurementData.text,
+      description: measurementData.description,
+      unit: measurementData.unit,
+      area: measurementData.cachedStats && measurementData.cachedStats.area, /* TODO: Add concept names instead (descriptor) */
+      type: _getValueTypeFromToolType(tool),
+      points: _getPointsFromHandles(measurementData.handles),
+    };
+  };
+
+  const _getAttributes = element => {
+    const enabledElement = cornerstone.getEnabledElement(element);
+    const imageId = enabledElement.image.imageId;
+    const sopInstance = cornerstone.metaData.get('instance', imageId);
+    const sopInstanceUid = sopInstance.sopInstanceUid;
+    const frameOfReferenceUid = sopInstance.frameOfReferenceUID;
+    const series = cornerstone.metaData.get('series', imageId);
+    const seriesInstanceUid = series.seriesInstanceUid;
+
+    return { sopInstanceUid, frameOfReferenceUid, seriesInstanceUid };
+  };
+
+  const _getValueTypeFromToolType = toolType => {
+    const { POLYLINE, ELLIPSE, POINT } = measurementService.VALUE_TYPES;
+
+    /* TODO: Relocate static value types */
+    const TOOL_TYPE_TO_VALUE_TYPE = {
+      Length: POLYLINE,
+      EllipticalRoi: ELLIPSE,
+      RectangleRoi: POLYLINE,
+      ArrowAnnotate: POINT,
+    };
+
+    return TOOL_TYPE_TO_VALUE_TYPE[toolType];
+  };
+
+  const _getPointsFromHandles = handles => {
+    let points = [];
+    Object.keys(handles).map(handle => {
+      if (['start', 'end'].includes(handle)) {
+        let point = {};
+        if (handles[handle].x) point.x = handles[handle].x;
+        if (handles[handle].y) point.y = handles[handle].y;
+        points.push(point);
+      }
+    });
+    return points;
+  };
+
+  const _getHandlesFromPoints = points => {
+    return points
+      .map((p, i) => (i % 10 === 0 ? { start: p } : { end: p }))
+      .reduce((obj, item) => Object.assign(obj, { ...item }), {});
+  };
+
+  return {
+    toAnnotation,
+    toMeasurement,
+  };
+};
+
+export default measurementServiceMappingsFactory;

extensions/cornerstone/src/utils/measurementServiceMappings/measurementServiceMappingsFactory.test.js

@@ -0,0 +1,80 @@
+import measurementServiceMappingsFactory from './measurementServiceMappingsFactory';
+
+jest.mock('cornerstone-core', () => ({
+  ...jest.requireActual('cornerstone-core'),
+  getEnabledElement: () => ({
+    image: { imageId: 123 },
+  }),
+  metaData: {
+    ...jest.requireActual('cornerstone-core').metaData,
+    get: () => ({
+      sopInstanceUid: "123",
+      frameOfReferenceUID: "123",
+      seriesInstanceUid: "123",
+    }),
+  },
+}));
+
+describe('measurementServiceMappings.js', () => {
+  let mappings;
+  let handles;
+  let points;
+  let csToolsAnnotation;
+  let measurement;
+  let measurementServiceMock;
+  let definition = 'Length';
+
+  beforeEach(() => {
+    measurementServiceMock = {
+      VALUE_TYPES: {
+        POLYLINE: 'value_type::polyline',
+        POINT: 'value_type::point',
+        ELLIPSE: 'value_type::ellipse',
+        MULTIPOINT: 'value_type::multipoint',
+        CIRCLE: 'value_type::circle',
+      },
+    };
+    mappings = measurementServiceMappingsFactory(measurementServiceMock);
+    handles = { start: { x: 1, y: 2 }, end: { x: 1, y: 2 } };
+    points = [{ x: 1, y: 2 }, { x: 1, y: 2 }];
+    csToolsAnnotation = {
+      toolName: definition,
+      measurementData: {
+        _measurementServiceId: 1,
+        sopInstanceUid: '123',
+        frameOfReferenceUid: '123',
+        seriesInstanceUid: '123',
+        handles,
+        text: 'Test',
+        description: 'Test',
+        unit: 'mm',
+      },
+    };
+    measurement = {
+      id: 1,
+      sopInstanceUID: '123',
+      frameOfReferenceUID: '123',
+      referenceSeriesUID: '123',
+      label: 'Test',
+      description: 'Test',
+      unit: 'mm',
+      type: measurementServiceMock.VALUE_TYPES.POLYLINE,
+      points: points,
+    };
+    jest.clearAllMocks();
+  });
+
+  describe('toAnnotation()', () => {
+    it('map measurement service format to annotation', async () => {
+      const mappedMeasurement = await mappings.toAnnotation(measurement, definition);
+      expect(mappedMeasurement).toEqual(csToolsAnnotation);
+    });
+  });
+
+  describe('toMeasurement()', () => {
+    it('map annotation to measurement service format', async () => {
+      const mappedAnnotation = await mappings.toMeasurement(csToolsAnnotation);
+      expect(mappedAnnotation).toEqual(measurement);
+    });
+  });
+});

extensions/cornerstone/src/utils/setCornerstoneLayout.js

@@ -0,0 +1,22 @@
+import { redux } from '@ohif/core';
+
+const { setLayout } = redux.actions;
+
+/**
+ * Update the current layout with a simple Cornerstone one
+ *
+ * @return void
+ */
+const setCornerstoneLayout = () => {
+  const layout = {
+    numRows: 1,
+    numColumns: 1,
+    viewports: [{ plugin: 'cornerstone' }],
+  };
+
+  const action = setLayout(layout);
+
+  window.store.dispatch(action);
+}
+
+export default setCornerstoneLayout;

extensions/dicom-html/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.
 
+# [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.2...@ohif/extension-dicom-html@1.1.0) (2019-12-11)
+
+
+### Features
+
+* 🎸 DICOM SR STOW on MeasurementAPI ([#954](https://github.com/OHIF/Viewers/issues/954)) ([ebe1af8](https://github.com/OHIF/Viewers/commit/ebe1af8d4f75d2483eba869655906d7829bd9666)), closes [#758](https://github.com/OHIF/Viewers/issues/758)
+
+
+
+
+
 ## [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

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.8.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-pdf/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.
 
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.0...@ohif/extension-dicom-pdf@1.0.1) (2019-12-16)
+
+
+### Bug Fixes
+
+* 🐛 Update ohif pdf extension to optionally use pdfjs ([#1162](https://github.com/OHIF/Viewers/issues/1162)) ([31e542d](https://github.com/OHIF/Viewers/commit/31e542dfd973c3e982ede6d02d79bfe65175e792)), closes [#1049](https://github.com/OHIF/Viewers/issues/1049)
+
+
+
+
+
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.4...@ohif/extension-dicom-pdf@1.0.0) (2019-09-27)
 
 

extensions/dicom-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-pdf",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "OHIF extension for Dicom PDF",
   "author": "OHIF",
   "license": "MIT",
@@ -37,7 +37,8 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "classnames": "^2.2.6",
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "^4.5.0",
+    "pdfjs-dist": "^2.2.228"
   },
   "gitHead": "a5baa9228c0eda0df880136bde4420d78e6f8706"
 }

extensions/dicom-pdf/src/ConnectedOHIFDicomPDFViewer.js

@@ -0,0 +1,27 @@
+import OHIF from '@ohif/core';
+import { connect } from 'react-redux';
+import OHIFDicomPDFViewport from './OHIFDicomPDFViewport';
+
+const { setViewportActive } = OHIF.redux.actions;
+
+const mapStateToProps = (state, ownProps) => {
+  const { activeViewportIndex } = state.viewports;
+  return { activeViewportIndex };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  const { viewportIndex } = ownProps;
+
+  return {
+    setViewportActive: () => {
+      dispatch(setViewportActive(viewportIndex));
+    },
+  };
+};
+
+const ConnectedOHIFDicomPDFViewer = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(OHIFDicomPDFViewport);
+
+export default ConnectedOHIFDicomPDFViewer;

extensions/dicom-pdf/src/DicomPDFViewport.css

@@ -0,0 +1,62 @@
+.DicomPDFViewport {
+  --header-height: 50px;
+}
+
+.DicomPDFViewport #toolbar {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  padding: 0.5em;
+  border-bottom: var(--ui-border-thickness) solid var(--ui-border-color);
+  height: var(--header-height);
+}
+
+.DicomPDFViewport #canvas {
+  height: calc(100% - var(--header-height));
+  overflow-y: scroll;
+}
+
+.DicomPDFViewport #text-layer {
+  height: 100%;
+  margin-top: var(--header-height);
+}
+
+.DicomPDFViewport #pdf-canvas-container {
+  position: relative;
+}
+
+.DicomPDFViewport canvas, #text-layer {
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.DicomPDFViewport #toolbar button {
+  color: currentColor;
+  background-color: transparent;
+  font: inherit;
+  border: var(--ui-border-thickness) solid var(--ui-border-color);
+  border-radius: 3px;
+  padding: 0.25em 0.5em;
+  margin-right: 0.5em;
+  cursor: pointer;
+}
+
+.DicomPDFViewport #text-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  opacity: 0.2;
+  line-height: 1;
+}
+
+.DicomPDFViewport #text-layer>span {
+  color: transparent;
+  position: absolute;
+  white-space: pre;
+  cursor: text;
+  transform-origin: 0% 0%;
+}

extensions/dicom-pdf/src/DicomPDFViewport.js

@@ -1,6 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import dicomParser from 'dicom-parser';
+import PDFJS from 'pdfjs-dist';
+import PropTypes from 'prop-types';
+
 import TypedArrayProp from './TypedArrayProp';
+import './DicomPDFViewport.css';
+
+import pdfjsBuild from 'pdfjs-dist/build/pdf';
+import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
+pdfjsBuild.GlobalWorkerOptions.workerSrc = pdfjsWorker;
 
 // TODO: Should probably use dcmjs for this
 const SOP_CLASS_UIDS = {
@@ -8,16 +16,88 @@ const SOP_CLASS_UIDS = {
 };
 
 class DicomPDFViewport extends Component {
-  state = {
-    fileURL: null,
-    error: null,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fileURL: null,
+      error: null,
+      currentPageIndex: 1,
+      pdf: null,
+      scale: 1,
+    };
+
+    this.canvas = createRef();
+    this.textLayer = createRef();
+  }
 
   static propTypes = {
     byteArray: TypedArrayProp.uint8,
+    useNative: PropTypes.bool,
+    viewportData: PropTypes.object,
+    activeViewportIndex: PropTypes.number,
+    setViewportActive: PropTypes.func,
+    viewportIndex: PropTypes.number,
   };
 
-  renderPDF = (dataSet, byteArray) => {
+  static defaultProps = {
+    useNative: false,
+  };
+
+  async componentDidMount() {
+    const dataSet = this.parseByteArray(this.props.byteArray);
+    const fileURL = this.getPDFFileUrl(dataSet, this.props.byteArray);
+
+    this.setState(state => ({ ...state, fileURL }));
+
+    if (!this.props.useNative) {
+      const pdf = await PDFJS.getDocument(fileURL).promise;
+      this.setState(state => ({ ...state, pdf }), () => this.updatePDFCanvas());
+    }
+  }
+
+  updatePDFCanvas = async () => {
+    const { pdf, scale, currentPageIndex } = this.state;
+    const context = this.canvas.getContext('2d');
+
+    const page = await pdf.getPage(currentPageIndex);
+    let viewport = page.getViewport({ scale });
+
+    this.canvas.height = viewport.height;
+    this.canvas.width = viewport.width;
+
+    const renderContext = {
+      canvasContext: context,
+      viewport: viewport,
+    };
+
+    await page.render(renderContext);
+    const textContent = await page.getTextContent();
+
+    this.textLayer.innerHTML = '';
+    this.textLayer.style.height = viewport.height + 'px';
+    this.textLayer.style.width = viewport.width + 'px';
+
+    PDFJS.renderTextLayer({
+      textContent,
+      container: this.textLayer,
+      viewport,
+      textDivs: [],
+    });
+  };
+
+  componentDidUpdate(prevProps, prevState) {
+    const { currentPageIndex, scale } = this.state;
+    const newValidScale = prevState.scale !== scale && scale > 0;
+    const newValidPageNumber =
+      prevState.currentPageIndex !== currentPageIndex && currentPageIndex > 0;
+
+    if (newValidScale || newValidPageNumber) {
+      this.updatePDFCanvas();
+    }
+  }
+
+  getPDFFileUrl = (dataSet, byteArray) => {
     let pdfByteArray = byteArray;
 
     if (dataSet) {
@@ -36,50 +116,144 @@ class DicomPDFViewport extends Component {
     const PDF = new Blob([pdfByteArray], { type: 'application/pdf' });
     const fileURL = URL.createObjectURL(PDF);
 
-    this.setState({
-      fileURL,
-    });
+    return fileURL;
+  };
+
+  onPageChange = async event => {
+    const { currentPageIndex, pdf } = this.state;
+    let newPageIndex = currentPageIndex;
+
+    const action = event.target.getAttribute('data-pager');
+    if (action === 'prev') {
+      if (currentPageIndex === 1) {
+        return;
+      }
+      newPageIndex -= 1;
+      if (currentPageIndex < 0) {
+        newPageIndex = 0;
+      }
+    }
+
+    if (action === 'next') {
+      if (currentPageIndex === pdf.numPages - 1) {
+        return;
+      }
+      newPageIndex += 1;
+      if (currentPageIndex > pdf.numPages - 1) {
+        newPageIndex = pdf.numPages - 1;
+      }
+    }
+
+    this.setState(state => ({ ...state, currentPageIndex: newPageIndex }));
+  };
+
+  onZoomChange = () => {
+    let newZoomValue = this.state.scale;
+
+    const action = event.target.getAttribute('data-pager');
+
+    if (action === '+') {
+      newZoomValue += 0.25;
+    }
+
+    if (action === '-') {
+      newZoomValue -= 0.25;
+    }
+
+    this.setState(state => ({ ...state, scale: newZoomValue }));
   };
 
   parseByteArray = byteArray => {
-    const options = {
-      untilTag: '',
-    };
+    const options = { untilTag: '' };
 
     let dataSet;
-
     try {
       dataSet = dicomParser.parseDicom(byteArray, options);
     } catch (error) {
-      this.setState({
-        error,
-      });
+      this.setState(state => ({ ...state, error }));
     }
 
     return dataSet;
   };
 
-  componentDidMount() {
-    const dataSet = this.parseByteArray(this.props.byteArray);
+  setViewportActiveHandler = () => {
+    const {
+      setViewportActive,
+      viewportIndex,
+      activeViewportIndex,
+    } = this.props;
 
-    this.renderPDF(dataSet, this.props.byteArray);
-  }
+    if (viewportIndex !== activeViewportIndex) {
+      setViewportActive(viewportIndex);
+    }
+  };
+
+  downloadPDFCanvas = () => {
+    const { fileURL } = this.state;
+    const a = document.createElement('a');
+    a.href = fileURL;
+    a.download = fileURL.substr(fileURL.lastIndexOf('/') + 1);
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
 
   render() {
+    const { fileURL, pdf, error } = this.state;
+
     return (
       <div
         className={'DicomPDFViewport'}
+        onClick={this.setViewportActiveHandler}
+        onScroll={this.setViewportActiveHandler}
         style={{ width: '100%', height: '100%' }}
       >
-        {this.state.fileURL && (
+        {!this.props.useNative ? (
+          <>
+            <div id="toolbar">
+              <div id="pager">
+                {pdf && pdf.numPages > 1 && (
+                  <>
+                    <button data-pager="prev" onClick={this.onPageChange}>
+                      {`<`}
+                    </button>
+                    <button data-pager="next" onClick={this.onPageChange}>
+                      {`>`}
+                    </button>
+                  </>
+                )}
+                <button data-pager="-" onClick={this.onZoomChange}>
+                  {`-`}
+                </button>
+                <button data-pager="+" onClick={this.onZoomChange}>
+                  {`+`}
+                </button>
+                <button onClick={this.downloadPDFCanvas}>Download</button>
+              </div>
+            </div>
+            <div id="canvas">
+              <div id="pdf-canvas-container">
+                <canvas
+                  id="pdf-canvas"
+                  ref={canvas => (this.canvas = canvas)}
+                />
+                <div
+                  id="text-layer"
+                  ref={textLayer => (this.textLayer = textLayer)}
+                ></div>
+              </div>
+            </div>
+          </>
+        ) : (
           <object
-            data={this.state.fileURL}
+            aria-label="PDF Viewer"
+            data={fileURL}
             type="application/pdf"
             width="100%"
             height="100%"
           />
         )}
-        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+        {error && <h2>{JSON.stringify(error)}</h2>}
       </div>
     );
   }

extensions/dicom-pdf/src/OHIFDicomPDFViewport.js

@@ -11,6 +11,9 @@ class OHIFDicomPDFViewport extends Component {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
+    viewportData: PropTypes.object,
+    activeViewportIndex: PropTypes.number,
+    setViewportActive: PropTypes.func,
   };
 
   state = {
@@ -30,42 +33,36 @@ class OHIFDicomPDFViewport extends Component {
 
   componentDidMount() {
     const { displaySet, studies } = this.props.viewportData;
-    const {
-      studyInstanceUid,
-      seriesInstanceUid,
-      sopInstanceUid,
-      wadoRoot,
-      wadoUri,
-      authorizationHeaders,
-    } = displaySet;
-
     DicomLoaderService.findDicomDataPromise(displaySet, studies).then(
-      data => {
-        const byteArray = new Uint8Array(data);
-        this.setState({
-          byteArray: byteArray,
-        });
-      },
+      data => this.setState({ byteArray: new Uint8Array(data) }),
       error => {
-        this.setState({
-          error,
-        });
-
+        this.setState({ error });
         throw new Error(error);
       }
     );
   }
 
   render() {
+    const {
+      setViewportActive,
+      viewportIndex,
+      activeViewportIndex,
+    } = this.props;
+    const { byteArray, error } = this.state;
     const { id, init, destroy } = OHIFDicomPDFViewport;
     const pluginProps = { id, init, destroy };
 
     return (
       <OHIFComponentPlugin {...pluginProps}>
-        {this.state.byteArray && (
-          <DicomPDFViewport byteArray={this.state.byteArray} />
+        {byteArray && (
+          <DicomPDFViewport
+            byteArray={byteArray}
+            setViewportActive={setViewportActive}
+            viewportIndex={viewportIndex}
+            activeViewportIndex={activeViewportIndex}
+          />
         )}
-        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+        {error && <h2>{JSON.stringify(error)}</h2>}
       </OHIFComponentPlugin>
     );
   }

extensions/dicom-pdf/src/asyncComponent.js

@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}

extensions/dicom-pdf/src/index.js

@@ -1,16 +1,21 @@
+import asyncComponent from './asyncComponent.js';
 import OHIFDicomPDFSopClassHandler from './OHIFDicomPDFSopClassHandler.js';
-import OHIFDicomPDFViewport from './OHIFDicomPDFViewport.js';
+
+const ConnectedOHIFDicomPDFViewer = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "ConnectedOHIFDicomPDFViewer" */ './ConnectedOHIFDicomPDFViewer'
+  )
+);
 
 export default {
   /**
    * Only required property. Should be a unique value across all extensions.
    */
   id: 'pdf',
-
   getViewportModule() {
-    return OHIFDicomPDFViewport;
+    return ConnectedOHIFDicomPDFViewer;
   },
   getSopClassHandlerModule() {
     return OHIFDicomPDFSopClassHandler;
-  }
+  },
 };

extensions/lesion-tracker/.webpack/webpack.dev.js

@@ -0,0 +1,8 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+};

extensions/lesion-tracker/.webpack/webpack.prod.js

@@ -0,0 +1,38 @@
+const merge = require('webpack-merge');
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const pkg = require('./../package.json');
+
+const ROOT_DIR = path.join(__dirname, './..');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+
+  return merge(commonConfig, {
+    devtool: 'source-map',
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
+    optimization: {
+      minimize: true,
+      sideEffects: true,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'OHIFExtLesionTracker',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      filename: pkg.main,
+    },
+  });
+};

extensions/lesion-tracker/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-lesion-tracker@0.1.0...@ohif/extension-lesion-tracker@0.2.0) (2020-02-10)
+
+
+### Features
+
+* Lesion tracker right panel ([#1428](https://github.com/OHIF/Viewers/issues/1428)) ([98a649b](https://github.com/OHIF/Viewers/commit/98a649b455ffc712938fc5035cdef40695e58440))
+
+
+
+
+
+# 0.1.0 (2020-02-06)
+
+
+### Features
+
+* lesion-tracker extension ([#1420](https://github.com/OHIF/Viewers/issues/1420)) ([73e4409](https://github.com/OHIF/Viewers/commit/73e440968ce4699d081a9c9f2d21dd68095b3056))

extensions/lesion-tracker/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

extensions/lesion-tracker/README.md

@@ -0,0 +1,38 @@
+# @ohif/extension-lesion-tracker
+
+This project is an OHIF extension that can be used with the Core OHIF Platform,
+either at runtime, or as an ES6 dependency, to create a medical image viewing
+application similar to that of the [legacy Lesion
+Tracker][legacy-lesion-tracker] viewer.
+
+## About
+
+...
+
+## Scope
+
+...
+
+### Configuration
+
+...
+
+### Extensions
+
+...
+
+## Build & Deploy
+
+...
+
+## Funding/Support
+
+...
+
+<!--
+  LINKS
+  -->
+
+<!-- prettier-ignore-start -->
+[legacy-lesion-tracker]: http://lesiontracker.ohif.org/studylist
+<!-- prettier-ignore-end -->

extensions/lesion-tracker/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ohif/extension-lesion-tracker",
+  "version": "0.2.0",
+  "description": "OHIF extension for Lesion Tracker",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/index.umd.js",
+  "module": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=10",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "dev:lesion-tracker": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "prepublishOnly": "yarn run build",
+    "start": "yarn run dev"
+  },
+  "peerDependencies": {
+    "@ohif/core": "^0.50.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.5.5",
+    "classnames": "^2.2.6"
+  }
+}

extensions/lesion-tracker/src/components/MeasurementComparisonTable.css

@@ -0,0 +1,60 @@
+.MeasurementComparisonTable {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.MeasurementComparisonTable .displayTexts {
+  display: flex;
+}
+
+.MeasurementComparisonTable .displayTexts .measurementDisplayText {
+  flex: 1;
+}
+
+.MeasurementComparisonTable .measurementTableHeader {
+  display: flex;
+  position: relative;
+  padding-left: 38px;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .warning-status {
+  left: 0;
+  top: 3px;
+  cursor: pointer;
+  width: 40px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .warning-status .warning-border {
+  padding: 2px 3px;
+  width: 30px;
+  height: 30px;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .warning-status svg {
+  width: 20px;
+  height: 18px;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .measurementTableHeaderItem {
+  position: relative;
+  flex: 1;
+}
+
+.MeasurementComparisonTable .generate-report {
+  background-color: #151a1f;
+  margin-top: 2px;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.MeasurementComparisonTable .generate-report button {
+  font-size: 12px;
+  color: black;
+  background-color: var(--active-color);
+}

extensions/lesion-tracker/src/components/MeasurementComparisonTable.js

@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { MeasurementTable } from '@ohif/ui';
+
+import './MeasurementComparisonTable.css';
+
+const overallWarnings = {
+  warningList: [
+    'All measurements should have a location',
+    'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+  ],
+};
+
+const measurements = [
+  {
+    measurementId: '125',
+    measurementNumber: '125',
+    itemNumber: 1,
+    label: '(No description)',
+    data: [{ displayText: '12.5 x 4.6' }],
+  },
+  {
+    measurementId: '124',
+    measurementNumber: '124',
+    itemNumber: 2,
+    label: '(No description)',
+    data: [{ displayText: '32.5 x 1.6' }],
+  },
+  {
+    measurementId: '123',
+    measurementNumber: '123',
+    itemNumber: 3,
+    hasWarnings: true,
+    warningList: [
+      'All measurements should have a location',
+      'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+    ],
+    label: '(No description)',
+    data: [{ displayText: '5.5 x 9.2' }],
+  },
+];
+
+const additionalFindings = [
+  {
+    measurementId: '122',
+    measurementNumber: '122',
+    itemNumber: 1,
+    hasWarnings: true,
+    warningList: [
+      'All measurements should have a location',
+      'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+    ],
+    label: '(No description)',
+    data: [{ displayText: '23.5 x 9.2' }],
+  },
+  {
+    measurementId: '121',
+    measurementNumber: '121',
+    itemNumber: 2,
+    hasWarnings: true,
+    warningList: [
+      'All measurements should have a location',
+      'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+    ],
+    label: '(No description)',
+    data: [{ displayText: '11.2 x 9.2' }],
+  },
+  {
+    measurementId: '120',
+    measurementNumber: '120',
+    itemNumber: 3,
+    label: '(No description)',
+    data: [{ displayText: '2.9 x 9.2' }],
+  },
+];
+
+const currentCollections = [
+  {
+    selectorAction: () => { },
+    maxMeasurements: 3,
+    groupName: 'Measurements',
+    measurements: measurements,
+  },
+  {
+    selectorAction: () => { },
+    groupName: 'Additional Findings',
+    measurements: additionalFindings,
+  },
+];
+
+const comparisonColletions = [
+  {
+    selectorAction: () => { },
+    maxMeasurements: 3,
+    groupName: 'Measurements',
+    measurements: measurements,
+  },
+  {
+    selectorAction: () => { },
+    groupName: 'Additional Findings',
+    measurements: additionalFindings,
+  },
+];
+
+const comparisonCollections = currentCollections.map((group, index) => {
+  return {
+    ...group,
+    measurements: group.measurements.map((measurement, measurementIndex) => {
+      const comparisonCollection = comparisonColletions[index].measurements;
+      if (measurementIndex < comparisonCollection.length) {
+        return {
+          ...measurement,
+          data: [
+            ...measurement.data,
+            ...comparisonCollection[measurementIndex].data,
+          ],
+        };
+      }
+    }),
+  };
+});
+
+const comparisonTimepoints = [
+  {
+    key: 'Current',
+    date: '10-Apr-18',
+  },
+  {
+    key: 'Comparison',
+    date: '15-Jun-18',
+  }
+];
+
+const MeasurementComparisonTable = () => {
+  return (
+    <div className="MeasurementComparisonTable">
+      <MeasurementTable
+        timepoints={comparisonTimepoints}
+        overallWarnings={overallWarnings}
+        measurementCollection={comparisonCollections}
+        onRelabelClick={() => { }}
+        onEditDescriptionClick={() => { }}
+      />
+      <div className="generate-report">
+        <button className="btn btn-primary">Generate Report</button>
+      </div>
+    </div>
+  );
+};
+
+export default MeasurementComparisonTable;

extensions/lesion-tracker/src/index.js

@@ -0,0 +1,52 @@
+import MeasurementComparisonTable from './components/MeasurementComparisonTable';
+
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'lesion-tracker',
+
+  /**
+   * @param {object} params
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   */
+  getPanelModule({ servicesManager, commandsManager }) {
+    return {
+      menuOptions: [
+        {
+          icon: 'th-list',
+          label: 'Measurements',
+          target: 'lesion-tracker-panel',
+        },
+      ],
+      components: [
+        {
+          id: 'lesion-tracker-panel',
+          component: MeasurementComparisonTable,
+        },
+      ],
+      defaultContext: ['VIEWER']
+    };
+  },
+
+  /**
+   * @param {object} params
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   * @returns Object
+   */
+  getToolbarModule() {
+    return null;
+  },
+
+  /**
+   * @param {object} params
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
+   * @returns Object
+   */
+  getCommandsModule() {
+    return null;
+  },
+};

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,280 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.18...@ohif/extension-vtk@1.2.19) (2020-02-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.17...@ohif/extension-vtk@1.2.18) (2020-02-12)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.17](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.16...@ohif/extension-vtk@1.2.17) (2020-02-10)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.16](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.15...@ohif/extension-vtk@1.2.16) (2020-02-10)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.15](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.14...@ohif/extension-vtk@1.2.15) (2020-02-07)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.13...@ohif/extension-vtk@1.2.14) (2020-02-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.12...@ohif/extension-vtk@1.2.13) (2020-01-30)
+
+
+### Bug Fixes
+
+* Set VTK viewport as active by interaction  ([#1139](https://github.com/OHIF/Viewers/issues/1139)) ([686d12d](https://github.com/OHIF/Viewers/commit/686d12da5c9d3d435b1e326c2a5caee36e2ed27c))
+
+
+
+
+
+## [1.2.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.11...@ohif/extension-vtk@1.2.12) (2020-01-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.10...@ohif/extension-vtk@1.2.11) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.9...@ohif/extension-vtk@1.2.10) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.8...@ohif/extension-vtk@1.2.9) (2020-01-27)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.7...@ohif/extension-vtk@1.2.8) (2020-01-24)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.6...@ohif/extension-vtk@1.2.7) (2020-01-08)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.5...@ohif/extension-vtk@1.2.6) (2020-01-07)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.4...@ohif/extension-vtk@1.2.5) (2020-01-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.3...@ohif/extension-vtk@1.2.4) (2019-12-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.2...@ohif/extension-vtk@1.2.3) (2019-12-20)
+
+
+### Bug Fixes
+
+* 🐛 1241: Make Plugin switch part of ToolbarModule ([#1322](https://github.com/OHIF/Viewers/issues/1322)) ([6540e36](https://github.com/OHIF/Viewers/commit/6540e36818944ac2eccc696186366ae495b33a04)), closes [#1241](https://github.com/OHIF/Viewers/issues/1241)
+
+
+
+
+
+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.1...@ohif/extension-vtk@1.2.2) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.0...@ohif/extension-vtk@1.2.1) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.7...@ohif/extension-vtk@1.2.0) (2019-12-20)
+
+
+### Features
+
+* 🎸 Configuration so viewer tools can nix handles ([#1304](https://github.com/OHIF/Viewers/issues/1304)) ([63594d3](https://github.com/OHIF/Viewers/commit/63594d36b0bdba59f0901095aed70b75fb05172d)), closes [#1223](https://github.com/OHIF/Viewers/issues/1223)
+
+
+
+
+
+## [1.1.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.6...@ohif/extension-vtk@1.1.7) (2019-12-19)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.5...@ohif/extension-vtk@1.1.6) (2019-12-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.4...@ohif/extension-vtk@1.1.5) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.3...@ohif/extension-vtk@1.1.4) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.2...@ohif/extension-vtk@1.1.3) (2019-12-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.1...@ohif/extension-vtk@1.1.2) (2019-12-12)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.0...@ohif/extension-vtk@1.1.1) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.0.2...@ohif/extension-vtk@1.1.0) (2019-12-11)
+
+
+### Features
+
+* 🎸 DICOM SR STOW on MeasurementAPI ([#954](https://github.com/OHIF/Viewers/issues/954)) ([ebe1af8](https://github.com/OHIF/Viewers/commit/ebe1af8d4f75d2483eba869655906d7829bd9666)), closes [#758](https://github.com/OHIF/Viewers/issues/758)
+
+
+
+
+
+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.0.1...@ohif/extension-vtk@1.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.0.0...@ohif/extension-vtk@1.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.6...@ohif/extension-vtk@1.0.0) (2019-12-09)
+
+
+* feat!: Ability to configure cornerstone tools via extension configuration (#1229) ([55a5806](https://github.com/OHIF/Viewers/commit/55a580659ecb74ca6433461d8f9a05c2a2b69533)), closes [#1229](https://github.com/OHIF/Viewers/issues/1229)
+
+
+### BREAKING CHANGES
+
+* modifies the exposed react <App /> components props. The contract for providing configuration for the app has changed. Please reference updated documentation for guidance.
+
+
+
+
+
+## [0.54.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.5...@ohif/extension-vtk@0.54.6) (2019-12-07)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.54.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.4...@ohif/extension-vtk@0.54.5) (2019-12-07)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.54.5",
+  "version": "1.2.19",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.8.2",
     "dicom-parser": "^1.8.3",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
@@ -49,14 +49,13 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.3.9"
+    "react-vtkjs-viewport": "^0.8.3"
   },
   "devDependencies": {
-    "@ohif/core": "^1.13.3",
-    "@ohif/ui": "^0.65.3",
-    "cornerstone-tools": "^4.8.0",
+    "@ohif/core": "^2.5.0",
+    "@ohif/ui": "^1.3.0",
+    "cornerstone-tools": "^4.12.0",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",
     "gh-pages": "^2.0.1",
     "i18next": "^17.0.3",

extensions/vtk/src/ConnectedVTKViewport.js

@@ -1,6 +1,6 @@
 import OHIF from '@ohif/core';
-import { View2D } from 'react-vtkjs-viewport';
 import { connect } from 'react-redux';
+import VTKViewport from './VTKViewport';
 
 const { setViewportActive, setViewportSpecificData } = OHIF.redux.actions;
 
@@ -18,6 +18,7 @@ const mapStateToProps = (state, ownProps) => {
   const pluginDetails = viewportLayout.vtk || {};
 
   return {
+    activeViewportIndex: state.viewports.activeViewportIndex,
     layout: state.viewports.layout,
     isActive,
     ...pluginDetails,
@@ -75,6 +76,6 @@ const ConnectedVTKViewport = connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps
-)(View2D);
+)(VTKViewport);
 
 export default ConnectedVTKViewport;

extensions/vtk/src/OHIFVTKViewport.js

@@ -77,6 +77,11 @@ class OHIFVTKViewport extends Component {
     }),
     viewportIndex: PropTypes.number,
     children: PropTypes.node,
+    onScroll: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onScroll: () => {},
   };
 
   static id = 'OHIFVTKViewport';
@@ -358,10 +363,13 @@ class OHIFVTKViewport extends Component {
     // TODO: Does it make more sense to use Context?
     if (this.props.children && this.props.children.length) {
       childrenWithProps = this.props.children.map((child, index) => {
-        return React.cloneElement(child, {
-          viewportIndex: this.props.viewportIndex,
-          key: index,
-        });
+        return (
+          child &&
+          React.cloneElement(child, {
+            viewportIndex: this.props.viewportIndex,
+            key: index,
+          })
+        );
       });
     }
 
@@ -383,6 +391,7 @@ class OHIFVTKViewport extends Component {
                 this.state.paintFilterBackgroundImageData
               }
               viewportIndex={this.props.viewportIndex}
+              onScroll={this.props.onScroll}
             />
           )}
         </div>

extensions/vtk/src/VTKViewport.css

@@ -0,0 +1,3 @@
+.vtk-viewport-handler svg {
+  pointer-events: none;
+}

extensions/vtk/src/VTKViewport.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useCallback } from 'react';
+import { View2D } from 'react-vtkjs-viewport';
+import PropTypes from 'prop-types';
+
+import './VTKViewport.css';
+
+const VTKViewport = props => {
+  const style = { width: '100%', height: '100%', position: 'relative' };
+
+  const setViewportActiveHandler = useCallback(() => {
+    const { setViewportActive, viewportIndex, activeViewportIndex } = props;
+
+    if (viewportIndex !== activeViewportIndex) {
+      // set in Connected
+      setViewportActive();
+    }
+  });
+
+  useEffect(() => {
+    const handleScrollEvent = evt => {
+      const vtkViewportApiReference = props.onScroll(props.viewportIndex) || {};
+      const viewportUid = vtkViewportApiReference.uid;
+      const viewportWasScrolled = viewportUid === evt.detail.uid;
+
+      if (viewportWasScrolled) {
+        setViewportActiveHandler();
+      }
+    };
+
+    window.addEventListener('vtkscrollevent', handleScrollEvent);
+    return () =>
+      window.removeEventListener('vtkscrollevent', handleScrollEvent);
+  }, [props, props.onScroll, props.viewportIndex, setViewportActiveHandler]);
+
+  return (
+    <div
+      className="vtk-viewport-handler"
+      style={style}
+      onClick={setViewportActiveHandler}
+    >
+      <View2D {...props} />
+    </div>
+  );
+};
+
+VTKViewport.propTypes = {
+  setViewportActive: PropTypes.func.isRequired,
+  viewportIndex: PropTypes.number.isRequired,
+  activeViewportIndex: PropTypes.number.isRequired,
+  /* Receives viewportIndex */
+  onScroll: PropTypes.func,
+};
+
+VTKViewport.defaultProps = {
+  onScroll: () => {},
+};
+
+export default VTKViewport;

extensions/vtk/src/commandsModule.js

@@ -103,6 +103,9 @@ const commandsModule = ({ commandsManager }) => {
   }
 
   const actions = {
+    getVtkApis: ({ index }) => {
+      return apis[index];
+    },
     axial: async ({ viewports }) => {
       const api = await _getActiveViewportVTKApi(viewports);
 
@@ -234,7 +237,7 @@ const commandsModule = ({ commandsManager }) => {
           },
         },
         {
-          // Sagital
+          // Sagittal
           orientation: {
             sliceNormal: [1, 0, 0],
             viewUp: [0, 0, 1],
@@ -266,11 +269,12 @@ const commandsModule = ({ commandsManager }) => {
           'crosshairsWidget'
         );
 
+        const uid = api.uid;
         const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
 
         api.setInteractorStyle({
           istyle,
-          configuration: { apis, apiIndex },
+          configuration: { apis, apiIndex, uid },
         });
       });
     },
@@ -296,55 +300,45 @@ const commandsModule = ({ commandsManager }) => {
     },
     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,
       },
@@ -355,6 +349,10 @@ const commandsModule = ({ commandsManager }) => {
       options: {},
       context: 'VIEWER',
     },
+    getVtkApiForViewportIndex: {
+      commandFn: actions.getVtkApis,
+      context: 'VIEWER',
+    },
   };
 
   return {

extensions/vtk/src/index.js

@@ -1,6 +1,7 @@
 import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
+import withCommandsManager from './withCommandsManager.js';
 // This feels weird
 // import loadLocales from './loadLocales';
 
@@ -14,8 +15,8 @@ const vtkExtension = {
    */
   id: 'vtk',
 
-  getViewportModule() {
-    return OHIFVTKViewport;
+  getViewportModule({ commandsManager }) {
+    return withCommandsManager(OHIFVTKViewport, commandsManager);
   },
   getToolbarModule() {
     return toolbarModule;

extensions/vtk/src/toolbarComponents/VTKMPRToolbarButton.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { ToolbarButton } from '@ohif/ui';
+import { utils } from '@ohif/core';
+
+const { studyMetadataManager } = utils;
+
+let isVisible = true;
+
+const _isDisplaySetReconstructable = (viewportSpecificData = {}, activeViewportIndex) => {
+  if (!viewportSpecificData[activeViewportIndex]) {
+    return false;
+  };
+
+  const { displaySetInstanceUid, studyInstanceUid } = viewportSpecificData[
+    activeViewportIndex
+  ];
+
+  const studies = studyMetadataManager.all();
+
+  const study = studies.find(
+    study => study.studyInstanceUID === studyInstanceUid
+  );
+
+  if (!study) {
+    return false;
+  }
+
+  const displaySet = study._displaySets.find(set => set.displaySetInstanceUid === displaySetInstanceUid);
+
+  if (!displaySet) {
+    return false;
+  };
+
+  return displaySet.isReconstructable;
+};
+
+function VTKMPRToolbarButton({
+  parentContext,
+  toolbarClickCallback,
+  button,
+  activeButtons,
+  isActive,
+  className,
+}) {
+  const { id, label, icon } = button;
+  const { viewportSpecificData, activeViewportIndex } = useSelector(state => {
+    const { viewports = {} } = state;
+    const { viewportSpecificData, activeViewportIndex } = viewports;
+
+    return {
+      viewportSpecificData,
+      activeViewportIndex,
+    }
+  });
+
+  isVisible = _isDisplaySetReconstructable(
+    viewportSpecificData,
+    activeViewportIndex,
+  );
+
+  return (
+    <React.Fragment>
+      {isVisible && (
+        <ToolbarButton
+          key={id}
+          label={label}
+          icon={icon}
+          onClick={evt => toolbarClickCallback(button, evt)}
+          isActive={isActive}
+        />
+      )}
+    </React.Fragment>
+  );
+}
+
+VTKMPRToolbarButton.propTypes = {
+  parentContext: PropTypes.object.isRequired,
+  toolbarClickCallback: PropTypes.func.isRequired,
+  button: PropTypes.object.isRequired,
+  activeButtons: PropTypes.array.isRequired,
+  isActive: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default VTKMPRToolbarButton;

extensions/vtk/src/toolbarModule.js

@@ -1,4 +1,5 @@
 import SlabThicknessToolbarComponent from './toolbarComponents/SlabThicknessToolbarComponent';
+import VTKMPRToolbarButton from './toolbarComponents/VTKMPRToolbarButton';
 
 const TOOLBAR_BUTTON_TYPES = {
   COMMAND: 'command',
@@ -115,9 +116,19 @@ const definitions = [
       },
     ],
   },
+  {
+    id: '2DMPR',
+    label: '2D MPR',
+    icon: 'cube',
+    //
+    CustomComponent: VTKMPRToolbarButton,
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'mpr2d',
+    context: 'ACTIVE_VIEWPORT::CORNERSTONE',
+  },
 ];
 
 export default {
   definitions,
   defaultContext: 'ACTIVE_VIEWPORT::VTK',
-};
+}

extensions/vtk/src/withCommandsManager.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function withCommandsManager(Component, commandsManager = {}) {
+  return class WithCommandsManager extends React.Component {
+    render() {
+      return (
+        <Component
+          {...this.props}
+          onScroll={viewportIndex =>
+            commandsManager.runCommand('getVtkApiForViewportIndex', {
+              index: viewportIndex,
+            })
+          }
+        />
+      );
+    }
+  };
+}

jest.config.js

@@ -10,7 +10,8 @@ module.exports = {
   // https://jestjs.io/docs/en/configuration#projects-array-string-projectconfig
   projects: [
     // "<rootDir>/extensions/*/jest.config.js",
-    "<rootDir>/platform/*/jest.config.js"
+    "<rootDir>/platform/*/jest.config.js",
+    "<rootDir>/extensions/*/jest.config.js"
   ],
   coverageDirectory: "<rootDir>/coverage/"
 };

package.json

@@ -13,11 +13,13 @@
   "scripts": {
     "cm": "npx git-cz",
     "build": "lerna run build:viewer --stream",
+    "build:lt": "lerna run build:viewer:lesion-tracker --stream",
     "build:ci": "lerna run build:viewer:ci --stream",
     "build:demo": "lerna run build:viewer:demo --stream",
     "build:package": "lerna run build:viewer:package --stream",
     "build:package-all": "lerna run build:package --parallel --stream",
     "dev": "lerna run dev:viewer --stream",
+    "dev:lt": "lerna run dev:viewer:lesion-tracker --stream",
     "dev:project": ".scripts/dev.sh",
     "dev:orthanc": "lerna run dev:orthanc --stream",
     "orthanc:up": "docker-compose -f .docker/Nginx-Orthanc/docker-compose.yml up",
@@ -59,6 +61,7 @@
     "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "css-loader": "^3.2.0",
+    "cypress-file-upload": "^3.5.3",
     "dotenv": "^8.1.0",
     "eslint": "5.16.0",
     "eslint-config-prettier": "^6.4.0",
@@ -72,7 +75,6 @@
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.5.0",
     "extract-css-chunks-webpack-plugin": "^4.5.4",
-    "favicons-webpack-plugin": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",

platform/core/CHANGELOG.md

@@ -3,6 +3,199 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.4.1...@ohif/core@2.5.0) (2020-02-20)
+
+
+### Features
+
+* [#1342](https://github.com/OHIF/Viewers/issues/1342) - Window level tab ([#1429](https://github.com/OHIF/Viewers/issues/1429)) ([ebc01a8](https://github.com/OHIF/Viewers/commit/ebc01a8ca238d5a3437b44d81f75aa8a5e8d0574))
+
+
+
+
+
+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.4.0...@ohif/core@2.4.1) (2020-02-12)
+
+
+### Bug Fixes
+
+* Combined Hotkeys for special characters ([#1233](https://github.com/OHIF/Viewers/issues/1233)) ([2f30e7a](https://github.com/OHIF/Viewers/commit/2f30e7a821a238144c49c56f37d8e5565540b4bd))
+
+
+
+
+
+# [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.9...@ohif/core@2.4.0) (2020-02-10)
+
+
+### Features
+
+* 🎸 MeasurementService ([#1314](https://github.com/OHIF/Viewers/issues/1314)) ([0c37a40](https://github.com/OHIF/Viewers/commit/0c37a406d963569af8c3be24c697dafd42712dfc))
+
+
+
+
+
+## [2.3.9](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.8...@ohif/core@2.3.9) (2020-02-07)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.8](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.7...@ohif/core@2.3.8) (2020-02-06)
+
+
+### Bug Fixes
+
+* Remove trash data from redux storage after updates ([#1358](https://github.com/OHIF/Viewers/issues/1358)) ([7b2d44f](https://github.com/OHIF/Viewers/commit/7b2d44f2c18241ea521b8d3652aee32e36eaddb8))
+
+
+
+
+
+## [2.3.7](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.6...@ohif/core@2.3.7) (2020-01-30)
+
+
+### Bug Fixes
+
+* Set VTK viewport as active by interaction  ([#1139](https://github.com/OHIF/Viewers/issues/1139)) ([686d12d](https://github.com/OHIF/Viewers/commit/686d12da5c9d3d435b1e326c2a5caee36e2ed27c))
+
+
+
+
+
+## [2.3.6](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.5...@ohif/core@2.3.6) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.5](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.4...@ohif/core@2.3.5) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.4](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.3...@ohif/core@2.3.4) (2020-01-27)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.3](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.2...@ohif/core@2.3.3) (2020-01-24)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.1...@ohif/core@2.3.2) (2020-01-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.0...@ohif/core@2.3.1) (2019-12-30)
+
+
+### Bug Fixes
+
+* 🐛 1241: Make Plugin switch part of ToolbarModule ([#1322](https://github.com/OHIF/Viewers/issues/1322)) ([6540e36](https://github.com/OHIF/Viewers/commit/6540e36818944ac2eccc696186366ae495b33a04)), closes [#1241](https://github.com/OHIF/Viewers/issues/1241)
+
+
+
+
+
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.2.1...@ohif/core@2.3.0) (2019-12-20)
+
+
+### Features
+
+* 🎸 Configuration so viewer tools can nix handles ([#1304](https://github.com/OHIF/Viewers/issues/1304)) ([63594d3](https://github.com/OHIF/Viewers/commit/63594d36b0bdba59f0901095aed70b75fb05172d)), closes [#1223](https://github.com/OHIF/Viewers/issues/1223)
+
+
+
+
+
+## [2.2.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.2.0...@ohif/core@2.2.1) (2019-12-18)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.2.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.1.1...@ohif/core@2.2.0) (2019-12-16)
+
+
+### Features
+
+* 🎸 Expose extension config to modules ([#1279](https://github.com/OHIF/Viewers/issues/1279)) ([4ea239a](https://github.com/OHIF/Viewers/commit/4ea239a9535ef297e23387c186e537ab273744ea)), closes [#1268](https://github.com/OHIF/Viewers/issues/1268)
+
+
+
+
+
+## [2.1.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.1.0...@ohif/core@2.1.1) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.1.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.2...@ohif/core@2.1.0) (2019-12-11)
+
+
+### Features
+
+* 🎸 DICOM SR STOW on MeasurementAPI ([#954](https://github.com/OHIF/Viewers/issues/954)) ([ebe1af8](https://github.com/OHIF/Viewers/commit/ebe1af8d4f75d2483eba869655906d7829bd9666)), closes [#758](https://github.com/OHIF/Viewers/issues/758)
+
+
+
+
+
+## [2.0.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.1...@ohif/core@2.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.0.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.0...@ohif/core@2.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.3...@ohif/core@2.0.0) (2019-12-09)
+
+
+* feat!: Ability to configure cornerstone tools via extension configuration (#1229) ([55a5806](https://github.com/OHIF/Viewers/commit/55a580659ecb74ca6433461d8f9a05c2a2b69533)), closes [#1229](https://github.com/OHIF/Viewers/issues/1229)
+
+
+### BREAKING CHANGES
+
+* modifies the exposed react <App /> components props. The contract for providing configuration for the app has changed. Please reference updated documentation for guidance.
+
+
+
+
+
 ## [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

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "1.13.3",
+  "version": "2.5.0",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -32,13 +32,14 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.8.0",
+    "cornerstone-tools": "^4.12.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "ajv": "^6.10.0",
+    "dcmjs": "^0.8.3",
     "dicomweb-client": "^0.5.2",
     "isomorphic-base64": "^1.0.2",
     "lodash.clonedeep": "^4.5.0",

platform/core/src/DICOMSR/dataExchange.js

@@ -0,0 +1,80 @@
+import log from '../log';
+import studies from '../studies';
+import utils from '../utils';
+import {
+  retrieveMeasurementFromSR,
+  stowSRFromMeasurements,
+} from './handleStructuredReport';
+import findMostRecentStructuredReport from './utils/findMostRecentStructuredReport';
+
+/**
+ *
+ * @typedef serverType
+ * @property {string} type - type of the server
+ * @property {string} wadoRoot - server wado root url
+ *
+ */
+
+/**
+ * Function to be registered into MeasurementAPI to retrieve measurements from DICOM Structured Reports
+ *
+ * @param {serverType} server
+ * @returns {Promise} Should resolve with OHIF measurementData object
+ */
+const retrieveMeasurements = server => {
+  log.info('[DICOMSR] retrieveMeasurements');
+
+  if (!server || server.type !== 'dicomWeb') {
+    log.error('[DICOMSR] DicomWeb server is required!');
+    return Promise.reject({});
+  }
+
+  const serverUrl = server.wadoRoot;
+  const studies = utils.studyMetadataManager.all();
+  const latestSeries = findMostRecentStructuredReport(studies);
+
+  if (!latestSeries) return Promise.resolve({});
+
+  return retrieveMeasurementFromSR(latestSeries, studies, serverUrl);
+};
+
+/**
+ *  Function to be registered into MeasurementAPI to store measurements into DICOM Structured Reports
+ *
+ * @param {Object} measurementData - OHIF measurementData object
+ * @param {Object} filter
+ * @param {serverType} server
+ * @returns {Object} With message to be displayed on success
+ */
+const storeMeasurements = async (measurementData, filter, server) => {
+  log.info('[DICOMSR] storeMeasurements');
+
+  if (!server || server.type !== 'dicomWeb') {
+    log.error('[DICOMSR] DicomWeb server is required!');
+    return Promise.reject({});
+  }
+
+  const serverUrl = server.wadoRoot;
+  const firstMeasurementKey = Object.keys(measurementData)[0];
+  const firstMeasurement = measurementData[firstMeasurementKey][0];
+  const studyInstanceUid =
+    firstMeasurement && firstMeasurement.studyInstanceUid;
+
+  try {
+    await stowSRFromMeasurements(measurementData, serverUrl);
+    if (studyInstanceUid) {
+      studies.deleteStudyMetadataPromise(studyInstanceUid);
+    }
+
+    return {
+      message: 'Measurements were saved with success',
+    };
+  } catch (error) {
+    log.error(
+      `[DICOMSR] Error while saving the measurements: ${error.message}`
+    );
+    throw new Error('Error while saving the measurements.');
+  }
+};
+
+export { retrieveMeasurements, storeMeasurements };

platform/core/src/DICOMSR/handleStructuredReport.js

@@ -0,0 +1,84 @@
+import * as dcmjs from 'dcmjs';
+import { api } from 'dicomweb-client';
+
+import DICOMWeb from '../DICOMWeb';
+import parseDicomStructuredReport from './parseDicomStructuredReport';
+import parseMeasurementsData from './parseMeasurementsData';
+import getAllDisplaySets from './utils/getAllDisplaySets';
+
+const VERSION_NAME = 'dcmjs-0.0';
+const TRANSFER_SYNTAX_UID = '1.2.840.10008.1.2.1';
+
+/**
+ * Function to retrieve measurements from DICOM Structured Reports coming from determined server
+ *
+ * @param {Array} series - List of all series metaData loaded
+ * @param {Array} studies - List of all studies metaData loaded
+ * @param {string} serverUrl - Server URL to be used on request
+ * @returns {Object} MeasurementData
+ */
+const retrieveMeasurementFromSR = async (series, studies, serverUrl) => {
+  const config = {
+    url: serverUrl,
+    headers: DICOMWeb.getAuthorizationHeader(),
+  };
+
+  const dicomWeb = new api.DICOMwebClient(config);
+
+  const instance = series.getFirstInstance();
+  const options = {
+    studyInstanceUID: instance.getStudyInstanceUID(),
+    seriesInstanceUID: instance.getSeriesInstanceUID(),
+    sopInstanceUID: instance.getSOPInstanceUID(),
+  };
+
+  const part10SRArrayBuffer = await dicomWeb.retrieveInstance(options);
+  const displaySets = getAllDisplaySets(studies);
+  const measurementsData = parseDicomStructuredReport(
+    part10SRArrayBuffer,
+    displaySets
+  );
+
+  return measurementsData;
+};
+
+/**
+ * Function to store measurements to DICOM Structured Reports in determined server
+ *
+ * @param {Object} measurements - OHIF measurementData object
+ * @param {string} serverUrl - Server URL to be used on request
+ * @returns {Promise}
+ */
+const stowSRFromMeasurements = async (measurements, serverUrl) => {
+  const { dataset } = parseMeasurementsData(measurements);
+  const { DicomMetaDictionary, DicomDict } = dcmjs.data;
+  const meta = {
+    FileMetaInformationVersion: dataset._meta.FileMetaInformationVersion.Value,
+    MediaStorageSOPClassUID: dataset.SOPClassUID,
+    MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
+    TransferSyntaxUID: TRANSFER_SYNTAX_UID,
+    ImplementationClassUID: DicomMetaDictionary.uid(),
+    ImplementationVersionName: VERSION_NAME,
+  };
+
+  const denaturalized = DicomMetaDictionary.denaturalizeDataset(meta);
+  const dicomDict = new DicomDict(denaturalized);
+
+  dicomDict.dict = DicomMetaDictionary.denaturalizeDataset(dataset);
+
+  const part10Buffer = dicomDict.write();
+
+  const config = {
+    url: serverUrl,
+    headers: DICOMWeb.getAuthorizationHeader(),
+  };
+
+  const dicomWeb = new api.DICOMwebClient(config);
+  const options = {
+    datasets: [part10Buffer],
+  };
+
+  await dicomWeb.storeInstances(options);
+};
+
+export { retrieveMeasurementFromSR, stowSRFromMeasurements };

platform/core/src/DICOMSR/index.js

@@ -0,0 +1,10 @@
+import { retrieveMeasurements, storeMeasurements } from './dataExchange';
+import isToolSupported from './utils/isToolSupported';
+
+const DICOMSR = {
+  retrieveMeasurements,
+  storeMeasurements,
+  isToolSupported,
+};
+
+export default DICOMSR;

platform/core/src/DICOMSR/parseDicomStructuredReport.js

@@ -0,0 +1,95 @@
+import * as dcmjs from 'dcmjs';
+
+import findInstanceMetadataBySopInstanceUid from './utils/findInstanceMetadataBySopInstanceUid';
+
+/**
+ * Function to parse the part10 array buffer that comes from a DICOM Structured report into measurementData
+ * measurementData format is a viewer specific format to be stored into the redux and consumed by other components
+ * (e.g. measurement table)
+ *
+ * @param {ArrayBuffer} part10SRArrayBuffer
+ * @param {Array} displaySets
+ * @returns
+ */
+const parseDicomStructuredReport = (part10SRArrayBuffer, displaySets) => {
+  // Get the dicom data as an Object
+  const dicomData = dcmjs.data.DicomMessage.readFile(part10SRArrayBuffer);
+  const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
+    dicomData.dict
+  );
+
+  const { MeasurementReport } = dcmjs.adapters.Cornerstone;
+  const storedMeasurementByToolType = MeasurementReport.generateToolState(
+    dataset
+  );
+  const measurementData = {};
+  let measurementNumber = 0;
+
+  Object.keys(storedMeasurementByToolType).forEach(toolName => {
+    const measurements = storedMeasurementByToolType[toolName];
+    measurementData[toolName] = [];
+
+    measurements.forEach(measurement => {
+      const instanceMetadata = findInstanceMetadataBySopInstanceUid(
+        displaySets,
+        measurement.sopInstanceUid
+      );
+      const { _study: study, _series: series } = instanceMetadata;
+      const { studyInstanceUid, patientId } = study;
+      const { seriesInstanceUid } = series;
+      const { sopInstanceUid, frameIndex } = measurement;
+      const imagePath = getImagePath(
+        studyInstanceUid,
+        seriesInstanceUid,
+        sopInstanceUid,
+        frameIndex
+      );
+
+      const imageId = instanceMetadata.getImageId();
+      if (!imageId) {
+        return;
+      }
+
+      // TODO: We need the currentTimepointID set into the viewer
+      const currentTimepointId = 'TimepointId';
+
+      const toolData = Object.assign({}, measurement, {
+        imageId,
+        imagePath,
+        seriesInstanceUid,
+        studyInstanceUid,
+        patientId,
+        measurementNumber: ++measurementNumber,
+        timepointId: currentTimepointId,
+        toolType: toolName,
+        _id: imageId + measurementNumber,
+      });
+
+      measurementData[toolName].push(toolData);
+    });
+  });
+
+  return measurementData;
+};
+
+/**
+ * Function to create imagePath with all imageData related
+ *
+ * @param {string} studyInstanceUid
+ * @param {string} seriesInstanceUid
+ * @param {string} sopInstanceUid
+ * @param {string} frameIndex
+ * @returns
+ */
+const getImagePath = (
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid,
+  frameIndex
+) => {
+  return [studyInstanceUid, seriesInstanceUid, sopInstanceUid, frameIndex].join(
+    '_'
+  );
+};
+
+export default parseDicomStructuredReport;

platform/core/src/DICOMSR/parseMeasurementsData.js

@@ -0,0 +1,57 @@
+import * as dcmjs from 'dcmjs';
+import cornerstone from 'cornerstone-core';
+
+import log from '../log';
+import measurements from '../measurements';
+import isToolSupported from './utils/isToolSupported';
+
+/**
+ * Function to parse OHIF viewer measurementData into a dcmjs MeasurementReport
+ *
+ * @param {Object} measurementsData - OHIF measurementData object
+ * @returns {Object} Dataset: measurement report from dcmjs
+ */
+const parseMeasurementsData = measurementsData => {
+  const { MeasurementReport } = dcmjs.adapters.Cornerstone;
+  const { getImageIdForImagePath } = measurements;
+
+  const toolState = {};
+  const unsupportedTools = [];
+
+  Object.keys(measurementsData).forEach(measurementType => {
+    const annotations = measurementsData[measurementType];
+
+    annotations.forEach(annotation => {
+      const { toolType, imagePath } = annotation;
+
+      if (isToolSupported(toolType)) {
+        const imageId = getImageIdForImagePath(imagePath);
+        toolState[imageId] = toolState[imageId] || {};
+        toolState[imageId][toolType] = toolState[imageId][toolType] || {
+          data: [],
+        };
+
+        toolState[imageId][toolType].data.push(annotation);
+      } else {
+        unsupportedTools.push(toolType);
+      }
+    });
+  });
+
+  if (unsupportedTools.length > 0) {
+    log.warn(
+      `[DICOMSR] Tooltypes not supported: ${unsupportedTools.join(', ')}`
+    );
+  }
+
+  const report = MeasurementReport.generateReport(
+    toolState,
+    cornerstone.metaData
+  );
+
+  return {
+    dataset: report.dataset,
+  };
+};
+
+export default parseMeasurementsData;

platform/core/src/DICOMSR/utils/findInstanceMetadataBySopInstanceUid.js

@@ -0,0 +1,24 @@
+/**
+ *  Should Find the requested instance metadata into the displaySets and return
+ *
+ * @param {Array} displaySets - List of displaySets
+ * @param {string} sopInstanceUid - sopInstanceUID to look for
+ * @returns {Object} - instance metadata found
+ */
+const findInstanceMetadataBySopInstanceUid = (displaySets, sopInstanceUid) => {
+  let instanceFound;
+
+  displaySets.find(displaySet => {
+    if (!displaySet.images) return false;
+
+    instanceFound = displaySet.images.find(
+      instanceMetadata => instanceMetadata._sopInstanceUID === sopInstanceUid
+    );
+
+    return !!instanceFound;
+  });
+
+  return instanceFound;
+};
+
+export default findInstanceMetadataBySopInstanceUid;

platform/core/src/DICOMSR/utils/findMostRecentStructuredReport.js

@@ -0,0 +1,60 @@
+/**
+ * Should find the most recent Structured Report metadata
+ *
+ * @param {Array} studies
+ * @returns {Object} Series
+ */
+const findMostRecentStructuredReport = studies => {
+  let mostRecentStructuredReport;
+
+  studies.forEach(study => {
+    const allSeries = study.getSeries ? study.getSeries() : [];
+    allSeries.forEach(series => {
+      if (isStructuredReportSeries(series)) {
+        if (
+          !mostRecentStructuredReport ||
+          compareSeriesDate(series, mostRecentStructuredReport)
+        ) {
+          mostRecentStructuredReport = series;
+        }
+      }
+    });
+  });
+
+  return mostRecentStructuredReport;
+};
+
+/**
+ *  Checks if series sopClassUID matches with the supported Structured Reports sopClassUID
+ *
+ * @param {Object} series - Series metadata
+ * @returns {boolean}
+ */
+const isStructuredReportSeries = series => {
+  const supportedSopClassUIDs = [
+    '1.2.840.10008.5.1.4.1.1.88.22',
+    '1.2.840.10008.5.1.4.1.1.11.1',
+  ];
+
+  const firstInstance = series.getFirstInstance();
+  const sopClassUid = firstInstance._instance.sopClassUid;
+
+  return supportedSopClassUIDs.includes(sopClassUid);
+};
+
+/**
+ *  Checkes if series1 is newer than series2
+ *
+ * @param {Object} series1 - Series Metadata 1
+ * @param {Object} series2 - Series Metadata 2
+ * @returns {boolean} true/false if series1 is newer than series2
+ */
+const compareSeriesDate = (series1, series2) => {
+  return (
+    series1._data.seriesDate > series2._data.seriesDate ||
+    (series1._data.seriesDate === series2._data.seriesDate &&
+      series1._data.seriesTime > series2._data.seriesTime)
+  );
+};
+
+export default findMostRecentStructuredReport;

platform/core/src/DICOMSR/utils/getAllDisplaySets.js

@@ -0,0 +1,19 @@
+/**
+ * Retrieve a list of all displaySets of all studies
+ *
+ * @param {Object} studies - List of studies loaded into the viewer
+ * @returns {Object} List of DisplaySets
+ */
+const getAllDisplaySets = studies => {
+  let allDisplaySets = [];
+
+  studies.forEach(study => {
+    if (study.getDisplaySets) {
+      allDisplaySets = allDisplaySets.concat(study.getDisplaySets());
+    }
+  });
+
+  return allDisplaySets;
+};
+
+export default getAllDisplaySets;

platform/core/src/DICOMSR/utils/isToolSupported.js

@@ -0,0 +1,14 @@
+import * as dcmjs from 'dcmjs';
+
+/**
+ *  Checks if dcmjs has support to determined tool
+ *
+ * @param {string} toolName
+ * @returns {boolean}
+ */
+const isToolSupported = toolName => {
+  const adapter = dcmjs.adapters.Cornerstone;
+  return !!adapter[toolName];
+};
+
+export default isToolSupported;

platform/core/src/__mocks__/log.js

@@ -1,4 +1,5 @@
 export default {
   warn: jest.fn(),
   error: jest.fn(),
+  info: jest.fn(),
 };

platform/core/src/classes/CommandsManager.js

@@ -59,7 +59,7 @@ export class CommandsManager {
    *
    * @method
    * @param {string} contextName - Namespace for commands
-   * @returs {Object} - the matched context
+   * @returns {Object} - the matched context
    */
   getContext(contextName) {
     const context = this.contexts[contextName];
@@ -161,7 +161,7 @@ export class CommandsManager {
       return;
     }
 
-    const { commandFn, storeContexts } = definition;
+    const { commandFn, storeContexts = [] } = definition;
     const definitionOptions = definition.options;
 
     let commandParams = {};

platform/core/src/classes/HotkeysManager.js

@@ -1,4 +1,4 @@
-import hotkeys from './hotkeys';
+import hotkeys from './../utils/hotkeys';
 import log from './../log.js';
 
 /**
@@ -11,7 +11,7 @@ import log from './../log.js';
  */
 
 export class HotkeysManager {
-  constructor(commandsManager) {
+  constructor(commandsManager, servicesManager) {
     this.hotkeyDefinitions = {};
     this.hotkeyDefaults = [];
     this.isEnabled = true;
@@ -22,9 +22,19 @@ export class HotkeysManager {
       );
     }
 
+    this._servicesManager = servicesManager;
     this._commandsManager = commandsManager;
   }
 
+  /**
+   * Exposes Mousetrap.js's `.record` method, added by the record plugin.
+   *
+   * @param {*} event
+   */
+  record(event) {
+    return hotkeys.record(event);
+  }
+
   /**
    * Disables all hotkeys. Hotkeys added while disabled will not listen for
    * input.
@@ -45,38 +55,57 @@ export class HotkeysManager {
   /**
    * Registers a list of hotkeydefinitions.
    *
-   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
+   * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions=[]] Contains hotkeys definitions
    */
-  setHotkeys(hotkeyDefinitions) {
-    const definitions = Array.isArray(hotkeyDefinitions)
-      ? [...hotkeyDefinitions]
-      : this._parseToArrayLike(hotkeyDefinitions);
+  setHotkeys(hotkeyDefinitions = []) {
+    try {
+      const definitions = this._getValidDefinitions(hotkeyDefinitions);
 
-    definitions.forEach(definition => this.registerHotkeys(definition));
+      definitions.forEach(definition => this.registerHotkeys(definition));
+    } catch (error) {
+      const { UINotificationService } = this._servicesManager.services;
+      UINotificationService.show({
+        title: 'Hotkeys Manager',
+        message: 'Erro while setting hotkeys',
+        type: 'error',
+      });
+    }
   }
 
   /**
    * Set default hotkey bindings. These
    * values are used in `this.restoreDefaultBindings`.
    *
-   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
+   * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions=[]] Contains hotkeys definitions
    */
-  setDefaultHotKeys(hotkeyDefinitions) {
+  setDefaultHotKeys(hotkeyDefinitions = []) {
+    const definitions = this._getValidDefinitions(hotkeyDefinitions);
+
+    this.hotkeyDefaults = definitions;
+  }
+
+  /**
+   * Take hotkey definitions that can be an array or object and make sure that it
+   * returns an array of hotkeys
+   *
+   * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions=[]] Contains hotkeys definitions
+   */
+  _getValidDefinitions(hotkeyDefinitions) {
     const definitions = Array.isArray(hotkeyDefinitions)
       ? [...hotkeyDefinitions]
       : this._parseToArrayLike(hotkeyDefinitions);
 
-    this.hotkeyDefaults = definitions;
+    return 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
+   * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions={}] Contains hotkeys definitions
    * @returns {HotkeyDefinition[]}
    */
-  _parseToArrayLike(hotkeyDefinitionsObj) {
+  _parseToArrayLike(hotkeyDefinitionsObj = {}) {
     const copy = { ...hotkeyDefinitionsObj };
     return Object.entries(copy).map(entryValue =>
       this._parseToHotKeyObj(entryValue[0], entryValue[1])
@@ -127,11 +156,13 @@ export class HotkeysManager {
     if (previouslyRegisteredDefinition) {
       const previouslyRegisteredKeys = previouslyRegisteredDefinition.keys;
       this._unbindHotkeys(commandName, previouslyRegisteredKeys);
+      log.info(`Unbinding ${commandName} from ${previouslyRegisteredKeys}`);
     }
 
     // Set definition & bind
     this.hotkeyDefinitions[commandName] = { keys, label };
     this._bindHotkeys(commandName, keys);
+    log.info(`Binding ${commandName} to ${keys}`);
   }
 
   /**
@@ -167,12 +198,11 @@ export class HotkeysManager {
     }
 
     const isKeyArray = keys instanceof Array;
-    if (isKeyArray) {
-      keys.forEach(key => this._bindHotkeys(commandName, key));
-      return;
-    }
+    const combinedKeys = isKeyArray ? keys.join('+') : keys;
 
-    hotkeys.bind(keys, evt => {
+    hotkeys.bind(combinedKeys, evt => {
+      evt.preventDefault();
+      evt.stopPropagation();
       this._commandsManager.runCommand(commandName, { evt });
     });
   }
@@ -193,7 +223,8 @@ export class HotkeysManager {
 
     const isKeyArray = keys instanceof Array;
     if (isKeyArray) {
-      keys.forEach(key => this._unbindHotkeys(commandName, key));
+      const combinedKeys = keys.join('+');
+      this._unbindHotkeys(commandName, combinedKeys);
       return;
     }
 

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

@@ -1,10 +1,10 @@
 import CommandsManager from './CommandsManager.js';
 import HotkeysManager from './HotkeysManager.js';
-import hotkeys from './hotkeys';
+import hotkeys from './../utils/hotkeys';
 import log from './../log.js';
 
 jest.mock('./CommandsManager.js');
-jest.mock('./hotkeys');
+jest.mock('./../utils/hotkeys');
 jest.mock('./../log.js');
 
 describe('HotkeysManager', () => {
@@ -60,7 +60,10 @@ describe('HotkeysManager', () => {
   });
 
   describe('enable()', () => {
-    beforeEach(() => hotkeys.unpause.mockClear());
+    beforeEach(() => {
+      hotkeys.unpause = jest.fn();
+      hotkeys.unpause.mockClear();
+    });
 
     it('sets isEnabled property to true', () => {
       hotkeysManager.disable();
@@ -139,20 +142,18 @@ describe('HotkeysManager', () => {
         expectedHotkeyDefinition
       );
     });
-    it('calls hotkeys.bind for all keys in array', () => {
-      const definition = { commandName: 'dance', keys: ['h', 'e', 'l', 'o'] };
+    it('calls hotkeys.bind for the group of keys', () => {
+      const definition = { commandName: 'dance', keys: ['shift', 'e'] };
 
       hotkeysManager.registerHotkeys(definition);
 
-      expect(hotkeys.bind.mock.calls.length).toBe(definition.keys.length);
-      definition.keys.forEach((key, i) =>
-        expect(hotkeys.bind.mock.calls[i][0]).toBe(key)
-      );
+      expect(hotkeys.bind.mock.calls.length).toBe(1);
+      expect(hotkeys.bind.mock.calls[0][0]).toBe('shift+e');
     });
     it('calls hotkeys.unbind if commandName was previously registered, for each previously registered set of keys', () => {
       const firstDefinition = {
         commandName: 'dance',
-        keys: ['h', 'e', 'l', 'o'],
+        keys: ['alt', 'e'],
       };
       const secondDefinition = { commandName: 'dance', keys: 'a' };
 
@@ -161,12 +162,8 @@ describe('HotkeysManager', () => {
       // Second call
       hotkeysManager.registerHotkeys(secondDefinition);
 
-      expect(hotkeys.unbind.mock.calls.length).toBe(
-        firstDefinition.keys.length
-      );
-      firstDefinition.keys.forEach((key, i) =>
-        expect(hotkeys.unbind.mock.calls[i][0]).toBe(key)
-      );
+      expect(hotkeys.unbind.mock.calls.length).toBe(1);
+      expect(hotkeys.unbind.mock.calls[0][0]).toBe('alt+e');
     });
   });
 

platform/core/src/classes/hotkeys/index.js

@@ -1,17 +0,0 @@
-// Only imported in environment w/ `window`
-// So we need to mock these for tests
-import Mousetrap from 'mousetrap';
-import pausePlugin from 'mousetrap/plugins/pause/mousetrap-pause.js';
-import recordPlugin from 'mousetrap/plugins/record/mousetrap-record.js';
-
-// import pausePlugin from './pausePlugin.js';
-// import recordPlugin from './recordPlugin.js';
-
-// // // TODO: May need to bind these so Mousetrap = this in plugins;
-// pausePlugin(Mousetrap);
-// recordPlugin(Mousetrap);
-
-// console.log(Mousetrap);
-// console.log(Object.keys(Mousetrap));
-
-export default Mousetrap;

platform/core/src/extensions/ExtensionManager.js

@@ -2,13 +2,14 @@ import MODULE_TYPES from './MODULE_TYPES.js';
 import log from './../log.js';
 
 export default class ExtensionManager {
-  constructor({ commandsManager, servicesManager }) {
+  constructor({ commandsManager, servicesManager, appConfig = {} }) {
     this.modules = {};
     this.registeredExtensionIds = [];
     this.moduleTypeNames = Object.values(MODULE_TYPES);
     //
     this._commandsManager = commandsManager;
     this._servicesManager = servicesManager;
+    this._appConfig = appConfig;
 
     this.moduleTypeNames.forEach(moduleType => {
       this.modules[moduleType] = [];
@@ -26,7 +27,7 @@ export default class ExtensionManager {
       const hasConfiguration = Array.isArray(extension);
 
       if (hasConfiguration) {
-        const [ohifExtension, configuration] = extensions;
+        const [ohifExtension, configuration] = extension;
         this.registerExtension(ohifExtension, configuration);
       } else {
         this.registerExtension(extension);
@@ -70,6 +71,7 @@ export default class ExtensionManager {
       extension.preRegistration({
         servicesManager: this._servicesManager,
         commandsManager: this._commandsManager,
+        appConfig: this._appConfig,
         configuration,
       });
     }
@@ -79,7 +81,8 @@ export default class ExtensionManager {
       const extensionModule = this._getExtensionModule(
         moduleType,
         extension,
-        extensionId
+        extensionId,
+        configuration
       );
 
       if (extensionModule) {
@@ -102,7 +105,7 @@ export default class ExtensionManager {
    * @param {Object} extension
    * @param {string} extensionId - Used for logging warnings
    */
-  _getExtensionModule(moduleType, extension, extensionId) {
+  _getExtensionModule(moduleType, extension, extensionId, configuration) {
     const getModuleFnName = 'get' + _capitalizeFirstCharacter(moduleType);
     const getModuleFn = extension[getModuleFnName];
 
@@ -114,6 +117,8 @@ export default class ExtensionManager {
       const extensionModule = getModuleFn({
         servicesManager: this._servicesManager,
         commandsManager: this._commandsManager,
+        appConfig: this._appConfig,
+        configuration,
       });
 
       if (!extensionModule) {

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

@@ -6,7 +6,7 @@ import log from './../log.js';
 jest.mock('./../log.js');
 
 describe('ExtensionManager.js', () => {
-  let extensionManager, commandsManager;
+  let extensionManager, commandsManager, servicesManager, appConfig;
 
   beforeEach(() => {
     commandsManager = {
@@ -14,7 +14,17 @@ describe('ExtensionManager.js', () => {
       getContext: jest.fn(),
       registerCommand: jest.fn(),
     };
-    extensionManager = new ExtensionManager({ commandsManager });
+    servicesManager = {
+      registerService: jest.fn(),
+    };
+    appConfig = {
+      testing: true,
+    };
+    extensionManager = new ExtensionManager({
+      servicesManager,
+      commandsManager,
+      appConfig,
+    });
     log.warn.mockClear();
     jest.clearAllMocks();
   });
@@ -37,6 +47,24 @@ describe('ExtensionManager.js', () => {
       // Assert
       expect(extensionManager.registerExtension.mock.calls.length).toBe(3);
     });
+
+    it('calls registerExtension() for each extension passing its configuration if tuple', () => {
+      const fakeConfiguration = { testing: true };
+      extensionManager.registerExtension = jest.fn();
+
+      // SUT
+      const fakeExtensions = [
+        { one: '1' },
+        [{ two: '2' }, fakeConfiguration],
+        { three: '3 ' },
+      ];
+      extensionManager.registerExtensions(fakeExtensions);
+
+      // Assert
+      expect(extensionManager.registerExtension.mock.calls[1][1]).toEqual(
+        fakeConfiguration
+      );
+    });
   });
 
   describe('registerExtension()', () => {
@@ -49,19 +77,19 @@ describe('ExtensionManager.js', () => {
       expect(fakeExtension.preRegistration.mock.calls.length).toBe(1);
     });
 
-    it('calls preRegistration() passing configuration along with servicesManager and commandsManager instances for extension', () => {
-      const configuration = { config: 'Some configuration' };
-      extensionManager._servicesManager = { services: { TestService: {} } };
+    it('calls preRegistration() passing dependencies and extension configuration to extension', () => {
+      const extensionConfiguration = { config: 'Some configuration' };
 
       // SUT
-      const fakeExtension = { one: '1', preRegistration: jest.fn() };
-      extensionManager.registerExtension(fakeExtension, configuration);
+      const extension = { one: '1', preRegistration: jest.fn() };
+      extensionManager.registerExtension(extension, extensionConfiguration);
 
       // Assert
-      expect(fakeExtension.preRegistration.mock.calls[0][0]).toEqual({
-        servicesManager: extensionManager._servicesManager,
-        commandsManager: extensionManager._commandsManager,
-        configuration,
+      expect(extension.preRegistration.mock.calls[0][0]).toEqual({
+        servicesManager,
+        commandsManager,
+        appConfig,
+        configuration: extensionConfiguration,
       });
     });
 
@@ -135,8 +163,8 @@ describe('ExtensionManager.js', () => {
       );
     });
 
-    it('successfully passes a servicesManager and commandsManager instances to each module', () => {
-      extensionManager._servicesManager = { services: { TestService: {} } };
+    it('successfully passes dependencies to each module along with extension configuration', () => {
+      const extensionConfiguration = { testing: true };
 
       const extension = {
         id: 'hello-world',
@@ -147,11 +175,17 @@ describe('ExtensionManager.js', () => {
         getCommandsModule: jest.fn(),
       };
 
-      extensionManager.registerExtension(extension);
+      extensionManager.registerExtension(extension, extensionConfiguration);
 
-      expect(extension.getViewportModule.mock.calls[0][0]).toEqual({
-        servicesManager: extensionManager._servicesManager,
-        commandsManager: extensionManager._commandsManager,
+      Object.keys(extension).forEach(module => {
+        if (typeof extension[module] === 'function') {
+          expect(extension[module].mock.calls[0][0]).toEqual({
+            servicesManager,
+            commandsManager,
+            appConfig,
+            configuration: extensionConfiguration,
+          });
+        }
       });
     });
 
@@ -192,7 +226,7 @@ describe('ExtensionManager.js', () => {
           return {
             definitions: {
               exampleDefinition: {
-                commandFn: () => {},
+                commandFn: () => { },
                 storeContexts: [],
                 options: {},
               },

platform/core/src/index.js

@@ -5,6 +5,7 @@ import { ServicesManager } from './services';
 import classes, { CommandsManager, HotkeysManager } from './classes/';
 
 import DICOMWeb from './DICOMWeb';
+import DICOMSR from './DICOMSR';
 import cornerstone from './cornerstone.js';
 import hangingProtocols from './hanging-protocols';
 import header from './header.js';
@@ -17,12 +18,13 @@ import string from './string.js';
 import studies from './studies/';
 import ui from './ui';
 import user from './user.js';
-import utils from './utils/';
+import utils, { hotkeys } from './utils/';
 
 import {
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  MeasurementService,
 } from './services';
 
 const OHIF = {
@@ -34,6 +36,7 @@ const OHIF = {
   ServicesManager,
   //
   utils,
+  hotkeys,
   studies,
   redux,
   classes,
@@ -46,13 +49,15 @@ const OHIF = {
   object,
   log,
   DICOMWeb,
+  DICOMSR,
   viewer: {},
   measurements,
   hangingProtocols,
   //
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  MeasurementService,
 };
 
 export {
@@ -64,6 +69,7 @@ export {
   ServicesManager,
   //
   utils,
+  hotkeys,
   studies,
   redux,
   classes,
@@ -76,12 +82,14 @@ export {
   object,
   log,
   DICOMWeb,
+  DICOMSR,
   measurements,
   hangingProtocols,
   //
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  MeasurementService,
 };
 
 export { OHIF };

platform/core/src/index.test.js

@@ -10,11 +10,13 @@ describe('Top level exports', () => {
       'HotkeysManager',
       'ServicesManager',
       //
-      'createUINotificationService',
-      'createUIModalService',
-      'createUIDialogService',
+      'UINotificationService',
+      'UIModalService',
+      'UIDialogService',
+      'MeasurementService',
       //
       'utils',
+      'hotkeys',
       'studies',
       'redux',
       'classes',
@@ -28,6 +30,7 @@ describe('Top level exports', () => {
       'object',
       'log',
       'DICOMWeb',
+      'DICOMSR',
       'OHIF', //
       'measurements',
       'hangingProtocols',

platform/core/src/measurements/classes/MeasurementApi.js

@@ -1,4 +1,5 @@
 import cornerstoneTools from 'cornerstone-tools';
+import cornerstone from 'cornerstone-core';
 import log from '../../log';
 import getLabel from '../lib/getLabel';
 import getDescription from '../lib/getDescription';
@@ -7,13 +8,32 @@ import guid from '../../utils/guid';
 import studyMetadataManager from '../../utils/studyMetadataManager';
 import { measurementApiDefaultConfig } from './../configuration.js';
 
+
 const configuration = {
-  ...measurementApiDefaultConfig,
+  ...measurementApiDefaultConfig
 };
 
 export default class MeasurementApi {
   static Instance;
 
+  /**
+   * Set configuration: It should merge default configuration with any new one
+   *
+   * @static
+   * @param {Object} config
+   * @param {Object} config.server
+   * @param {string} config.server.type - The server type
+   * @param {string} config.server.wadoRoot - The server wado URL root
+   * @param {Array} config.measurementTools
+   * @param {string} config.measurementTools[].id - The tool group id
+   * @param {string} config.measurementTools[].name - The tool group name
+   * @param {Array} config.measurementTools[].childTools - The child tool's configuration
+   * @param {Object} config.dataExchange
+   * @param {Function} config.dataExchange.store - Function that store measurement data
+   * @param {Function} config.dataExchange.retrieve - Function that retrieves measurement data
+   *
+   * @memberof MeasurementApi
+   */
   static setConfiguration(config) {
     Object.assign(configuration, config);
   }
@@ -203,13 +223,14 @@ export default class MeasurementApi {
 
   retrieveMeasurements(patientId, timepointIds) {
     const retrievalFn = configuration.dataExchange.retrieve;
+    const { server } = configuration;
     if (typeof retrievalFn !== 'function') {
       log.error('Measurement retrieval function has not been configured.');
       return;
     }
 
     return new Promise((resolve, reject) => {
-      retrievalFn(patientId, timepointIds).then(measurementData => {
+      retrievalFn(server).then(measurementData => {
         if (measurementData) {
           log.info('Measurement data retrieval');
           log.info(measurementData);
@@ -230,6 +251,10 @@ export default class MeasurementApi {
         // Synchronize the new tool data
         this.syncMeasurementsAndToolData();
 
+        cornerstone.getEnabledElements().forEach(enabledElement => {
+          cornerstone.updateImage(enabledElement.element);
+        });
+
         // Let others know that the measurements are updated
         this.onMeasurementsUpdated();
       }, reject);
@@ -237,6 +262,7 @@ export default class MeasurementApi {
   }
 
   storeMeasurements(timepointId) {
+    const { server } = configuration;
     const storeFn = configuration.dataExchange.store;
     if (typeof storeFn !== 'function') {
       log.error('Measurement store function has not been configured.');
@@ -278,8 +304,9 @@ export default class MeasurementApi {
     };
 
     log.info('Saving Measurements for timepoints:', timepoints);
-    return storeFn(measurementData, filter).then(() => {
+    return storeFn(measurementData, filter, server).then(result => {
       log.info('Measurement storage completed');
+      return result;
     });
   }
 

platform/core/src/measurements/tools/angle.js

@@ -1,6 +1,6 @@
 const displayFunction = data => {
   let text = '';
-  if (data.rAngle) {
+  if (data.rAngle && !isNaN(data.rAngle)) {
     text = data.rAngle.toFixed(2) + String.fromCharCode(parseInt('00B0', 16));
   }
   return text;

platform/core/src/measurements/tools/circleRoi.js

@@ -1,7 +1,7 @@
 const displayFunction = data => {
   let meanValue = '';
   const { cachedStats } = data;
-  if (cachedStats && cachedStats.mean) {
+  if (cachedStats && cachedStats.mean && !isNaN(cachedStats.mean)) {
     meanValue = cachedStats.mean.toFixed(2) + ' HU';
   }
   return meanValue;

platform/core/src/measurements/tools/ellipticalRoi.js

@@ -1,7 +1,7 @@
 const displayFunction = data => {
   let meanValue = '';
   const { cachedStats } = data;
-  if (cachedStats && cachedStats.mean) {
+  if (cachedStats && cachedStats.mean && !isNaN(cachedStats.mean)) {
     meanValue = cachedStats.mean.toFixed(2) + ' HU';
   }
   return meanValue;

platform/core/src/measurements/tools/freehandMouse.js

@@ -1,6 +1,6 @@
 const displayFunction = data => {
   let meanValue = '';
-  if (data.meanStdDev && data.meanStdDev.mean) {
+  if (data.meanStdDev && data.meanStdDev.mean && !isNaN(data.meanStdDev.mean)) {
     meanValue = data.meanStdDev.mean.toFixed(2) + ' HU';
   }
   return meanValue;

platform/core/src/measurements/tools/length.js

@@ -1,6 +1,6 @@
 const displayFunction = data => {
   let lengthValue = '';
-  if (data.length) {
+  if (data.length && !isNaN(data.length)) {
     lengthValue = data.length.toFixed(2) + ' mm';
   }
   return lengthValue;

platform/core/src/measurements/tools/rectangleRoi.js

@@ -1,7 +1,7 @@
 const displayFunction = data => {
   let meanValue = '';
   const { cachedStats } = data;
-  if (cachedStats && cachedStats.mean) {
+  if (cachedStats && cachedStats.mean && !isNaN(cachedStats.mean)) {
     meanValue = cachedStats.mean.toFixed(2) + ' HU';
   }
   return meanValue;

platform/core/src/redux/actions.js

@@ -10,6 +10,7 @@ import {
   SET_VIEWPORT_ACTIVE,
   SET_VIEWPORT_LAYOUT,
   SET_VIEWPORT_LAYOUT_AND_DATA,
+  SET_USER_PREFERENCES,
 } from './constants/ActionTypes.js';
 
 /**
@@ -89,7 +90,7 @@ export const clearStudyLoadingProgress = progressId => ({
 });
 
 export const setUserPreferences = state => ({
-  type: 'SET_USER_PREFERENCES',
+  type: SET_USER_PREFERENCES,
   state,
 });