chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.4.3 - @ohif/extension-dicom-html@1.1.1 - @ohif/extension-dicom-microscopy@0.50.7 - @ohif/extension-dicom-pdf@1.0.2 - @ohif/extension-vtk@1.2.24 - @ohif/core@2.5.3 - @ohif/i18n@0.52.7 - @ohif/ui@1.3.3 - @ohif/viewer@3.7.8
Instance metadata/metadata providers overhaul (#1481 )
2020-03-09 19:04:54 +00:00 · 2020-03-09 19:03:23 +00:00 · 2020-03-09 13:39:36 +00:00 · 2020-03-09 09:36:26 -04:00 · 2020-03-09 09:35:27 -04:00 · 2020-03-06 09:53:40 +00:00
419 changed files with 16162 additions and 15484 deletions
@@ -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
@@ -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..."
@@ -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:'
@@ -30,6 +30,7 @@ docker/dcm4che/dcm4che-arc

 # Cypress test results
 videos/
+screenshots/

 # Locize settings
 .locize
@@ -28,5 +28,8 @@
  ],
  "prettier.disableLanguages": ["html"],
  "prettier.endOfLine": "lf",
-  "workbench.colorCustomizations": {}
+  "workbench.colorCustomizations": {},
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
@@ -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
@@ -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
@@ -0,0 +1 @@
+See our contributing guidelines at [`https://docs.ohif.org`](https://docs.ohif.org/development/contributing.html)
@@ -84,7 +84,7 @@ We offer support through

 For commercial support, academic collaberations, and answers to common
 questions; please read our
-[documented FAQ](https://docs.ohif.org/frequently-asked-questions.html#does-ohif-offer-commercial-support).
+[documented FAQ](https://docs.ohif.org/faq/index.html#does-ohif-offer-commercial-support).

 ## Quick Start Deployment

@@ -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
@@ -296,14 +296,14 @@ MIT © [OHIF](https://github.com/OHIF)
 [monorepo]: https://en.wikipedia.org/wiki/Monorepo
 [how-to-fork]: https://help.github.com/en/articles/fork-a-repo
 [how-to-clone]: https://help.github.com/en/articles/fork-a-repo#step-2-create-a-local-clone-of-your-fork
-[ohif-architecture]: https://docs.ohif.org/advanced/architecture.html
-[ohif-extensions]: https://docs.ohif.org/advanced/architecture.html
+[ohif-architecture]: https://docs.ohif.org/architecture/index.html
+[ohif-extensions]: https://docs.ohif.org/architecture/index.html
 [deployment-docs]: https://docs.ohif.org/deployment/
 [react-url]: https://reactjs.org/
 [pwa-url]: https://developers.google.com/web/progressive-web-apps/
 [ohif-viewer-url]: https://www.npmjs.com/package/@ohif/viewer
-[configuration-url]: https://docs.ohif.org/essentials/configuration.html
-[extensions-url]: https://docs.ohif.org/advanced/extensions.html
+[configuration-url]: https://docs.ohif.org/configuring/
+[extensions-url]: https://docs.ohif.org/extensions/
 <!-- Platform -->
 [platform-core]: platform/core/README.md
 [core-npm]: https://www.npmjs.com/package/@ohif/core
@@ -326,5 +326,4 @@ MIT © [OHIF](https://github.com/OHIF)
 [vtk-npm]: https://www.npmjs.com/package/@ohif/extension-vtk
 <!-- prettier-ignore-end -->

-
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large)
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large)
@@ -38,9 +38,9 @@ our integration and extension points.
 Check out these helpful links:

 - Ready to dive into some code? Check out our
-  [Getting Started Guide](./essentials/getting-started.md).
+  [Getting Started Guide](./development/getting-started.md).
 - We're an active, vibrant community.
-  [Learn how you can be more involved.](./contributing/index.md)
+  [Learn how you can be more involved.](./development/contributing.md)
 - Feeling lost? Read our [help page](./help.md).

 <!--
@@ -1,26 +1,20 @@
 # OHIF Viewers

 - [Our Process](our-process.md)
- Essentials
-  - [Getting Started](essentials/getting-started.md)
-  - [Installation](essentials/installation.md)
-  - [Data Source](essentials/data-source.md)
-  - [Configuration](essentials/configuration.md)
-  - [Themeing](essentials/themeing.md)
-  - [Translating](essentials/translating.md)
-  - [Troubleshooting](essentials/troubleshooting.md)
- [Scope of Project](essentials/scope-of-project.md)
+- Development
+  - [Getting Started](development/getting-started.md)
+  - [Contributing](development/contributing.md)
+  - [Continuous Integration](development/continous-integration.md)
+- [Configuring](configuring/index.md)
+  - [Data Source](configuring/data-source.md)

 ---

- [Advanced](advanced/index.md)
- [Architecture](advanced/architecture.md)
-  - [Overview](advanced/architecture.md#overview)
-  - [Business Logic](advanced/architecture.md#business-logic)
-  - [Component Library](advanced/architecture.md#react-component-library)
-  - [Extensions](advanced/architecture.md#misc-extensions)
-  - [Diagram](advanced/architecture.md#diagram)
-  - [Common Questions](advanced/architecture.md#common-questions)
+- [Architecture](architecture/index.md)
+- [Viewer](viewer/index.md)
+  - [Configuration](viewer/configuration.md)
+  - [Themeing](viewer/themeing.md)
+  - [Internationalization](viewer/internationalization.md)
 - [Extensions](extensions/index.md)
  - [Registering](extensions/index.md#registering-an-extension)
  - [Lifecycle Hooks](extensions/index.md#lifecycle-hooks)
@@ -31,15 +25,15 @@
    - [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)
  - [UI](services/ui/index.md)
    - [Dialog Service](services/ui/ui-dialog-service.md)
    - [Modal Service](services/ui/ui-modal-service.md)
    - [Notification Service](services/ui/ui-notification-service.md)
- [Custom Tools](advanced/custom-tools.md)

 ---

@@ -59,8 +53,8 @@

 ---

- [FAQ](frequently-asked-questions.md)
- [Contributing](contributing/index.md)
-  - [Continuous Integration](continous-integration.md)
- [Browser Support](browser-support.md)
+- [FAQ](faq/index.md)
+  - [Scope of Project](faq/scope-of-project.md)
+  - [Browser Support](faq/browser-support.md)
+  - [PWA vs Packaged](faq/pwa-vs-packaged.md)
 - [Help](help.md)
@@ -1,62 +0,0 @@
-<table>
-    <thead>
-        <tr>
-            <th>Extension</th>
-            <th>Description</th>
-            <th>Modules</th>
-        </tr>
-    </thead>
-    <tbody>
-        <!-- CORNERSTONE.js -->
-        <tr>
-            <td>
-                <a href="https://www.npmjs.com/package/@ohif/extension-cornerstone">
-                    Cornerstone
-                </a>
-            </td>
-            <td>
-                A viewport powered by <code>cornerstone.js</code>. Adds support for 2D DICOM rendering and manipulation, as well as support for the tools features in <a href="https://tools.cornerstonejs.org/examples/"><code>cornerstone-tools</code></a>. Also adds "CINE Dialog" to the Toolbar.
-            </td>
-            <td>Viewport, Toolbar</td>
-        </tr>
-        <!-- VTK.js -->
-        <tr>
-            <td>
-                <a href="https://www.npmjs.com/package/@ohif/extension-vtk">
-                    VTK.js
-                </a>
-            </td>
-            <td>
-                A viewport powered by <code>vtk.js</code>. Adds support for volume renderings and advanced features like MPR. Also adds "3D Rotate" to the Toolbar.
-            </td>
-            <td>Viewport, Toolbar</td>
-        </tr>
-        <tr>
-            <td>
-                <a href="https://www.npmjs.com/package/@ohif/extension-dicom-html">DICOM HTML</a>
-            </td>
-            <td>
-                Renders text and HTML content for <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js#L4-L12">specific SopClassUIDs</a>.
-            </td>
-            <td>Viewport, SopClassHandler</td>
-        </tr>
-        <tr>
-            <td>
-                <a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
-            </td>
-            <td>
-                Renders PDFs for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js#L4-L6">specific SopClassUID</a>.
-            </td>
-            <td>Viewport, SopClassHandler</td>
-        </tr>
-        <tr>
-            <td>
-                <a href="https://www.npmjs.com/package/@ohif/extension-dicom-microscopy">DICOM Microscopy</a>
-            </td>
-            <td>
-                Renders Microscopy images for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-microscopy/src/DicomMicroscopySopClassHandler.js#L5-L7">specific SopClassUID</a>.
-            </td>
-            <td>Viewport, SopClassHandler</td>
-        </tr>
-    </tbody>
-</table>
@@ -1,9 +0,0 @@
-# Tool Management
-
-This is not yet exposed in an easy/convenient way. Most tools are currently
-added by creating new Viewport, Toolbar, and SOPInstanceHandler extension
-modules. You can read more about that approach in
-[extensions](../extensions/index.md).
-
-In the near future, we intend to improve the extensibility of tools for existing
-Viewports (like our Cornerstone.js and VTK.js viewports).
@@ -1,3 +0,0 @@
-# Advanced
-
-Advanced topics go beyond basic configuration and deployment. Their goal is to provide insight into this project's architecture and guidance on leveraging extensions.
@@ -1,23 +0,0 @@
-# MonoRepos: A Crash Course
-
- [Lerna][lerna]
-
-Solutions:
-
-## Semantic-Release
-
- [Semantic-Release](https://github.com/semantic-release/semantic-release/issues/193#issuecomment-462063871)
- [Multi-semantic-release](https://github.com/dhoulb/multi-semantic-release)
- [semantic-release-monorepo](https://github.com/Updater/semantic-release-monorepo)
-
-# Netlify
-
- https://community.netlify.com/t/best-practices-for-deploying-sites-from-monorepos/818
-
-<!--
-  Links
-  -->
-
-<!-- prettier-ignore-start -->
-[lerna]: https://github.com/lerna/lerna
-<!-- prettier-ignore-end -->
@@ -10,6 +10,13 @@ allows our code to be used in more ways, it also increases complexity. Below, we
 aim to demistify that complexity by providing insight into how our Viewer is
 architected, and the role each of it's dependent libraries plays.

+- [Overview](#overview)
+- [Business Logic](#business-logic)
+- [Component Library](#react-component-library)
+- [Internationalization](#internationalization-i18n)
+- [Extensions & Configuration](#extensions--configuration)
+- [Common Questions](#common-questions)
+
 ## Overview

 The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a
@@ -39,27 +46,47 @@ you'll see the following:
 └── README.md
 ```

-Continue reading to see how these libraries work together to create the OHIF
-Viewer.
+The `platform` directory contains the business logic library, component library,
+and the application library that combines them to create a powerful medical
+imaging viewer.

-### Business Logic
+The `extensions` directory contains many packages that can be registered with
+`@ohif/core`'s `ExtensionManager` to expand an application's supported features
+and functionality.
+
+![Architecture Diagram](../assets/img/architecture-diagram.png)
+
+<center><i>architecture diagram</i></center>
+
+This diagram is a conceptual illustration of how the Viewer is architected.
+
+1. (optional) `extensions` can be registered with `@ohif/core`'s
+   `ExtensionManager`
+2. `@ohif/core` provides bussiness logic and a way for `@ohif/viewer` to access
+   registered extensions
+3. The `@ohif/viewer` composes and provides data to components from our
+   component library (`@ohif/ui`)
+4. The `@ohif/viewer` can be built and served as a stand-alone PWA, or as an
+   embeddable package ([`@ohif/viewer`][viewer-npm])
+
+## Business Logic

 The [`@ohif/core`][core-github] project offers pre-packaged solutions for
 features common to Web-based medical imaging viewers. For example:

- Hotkeys
+- [Hotkeys](#)
 - DICOM Web requests
 - Hanging Protocols
- Managing a study's measurements
+- [Managing a study's measurements](../services/default/measurements.md)
 - Managing a study's DICOM metadata
- A flexible pattern for extensions
+- [A flexible pattern for extensions](../extensions/index.md)
 - And many others

 It does this while remaining decoupled from any particular view library or
 rendering logic. While we use it to power our React Viewer, it can be used with
 Vue, React, Vanilla JS, or any number of other frameworks.

-### React Component Library
+## React Component Library

 [`@ohif/ui`][ui-github] is a React Component library that contains the reusable
 components that power the OHIF Viewer. It allows us to build, compose, and test
@@ -72,15 +99,11 @@ application.

 [Check out our component library!](https://react.ohif.org/)

-### Internationalization (i18n)
+## Internationalization (i18n)

 ...

-### The Viewer
-
-...
-
-### Extensions & Configuration
+## Extensions & Configuration

 While OHIF maintains several high value and commonly requested features in its
 own extensions, there are many instances where one may wish to further extend
@@ -105,23 +128,6 @@ looking for ways to improve our extensibility ^\_^

 [Click here to read more about extensions!](../extensions/index.md)

-### Diagram
-
-This diagram is a conceptual illustration of how the Viewer is architected.
-
-1. (optional) `extensions` can be registered with `@ohif/core`'s extension
-   manager
-2. `@ohif/core` provides bussiness logic and a way for `@ohif/viewer` to access
-   registered extensions
-3. The `@ohif/viewer` composes and provides data to components from our
-   component library (`@ohif/ui`)
-4. The `@ohif/viewer` can be built and served as a stand-alone PWA, or as an
-   embeddable package ([`@ohif/viewer`][viewer-npm])
-
-![Architecture Diagram](../assets/img/architecture-diagram.png)
-
-<center><i>architecture diagram</i></center>
-
 ## Common Questions

 > When should I use the packaged source `@ohif/viewer` versus building a PWA
@@ -141,10 +147,11 @@ you would need to recreate.
  -->

 <!-- prettier-ignore-start -->
+[monorepo]: #
 [viewers-project]: https://github.com/OHIF/Viewers
 [viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
 [pwa]: https://developers.google.com/web/progressive-web-apps/
-[configuration]: ../essentials/configuration.md
+[configuration]: ../configuring/index.md
 [extensions]: ../extensions/index.md
 [core-github]: https://github.com/OHIF/viewers/platform/core
 [ui-github]: https://github.com/OHIF/Viewers/platform/ui
@@ -1,8 +1,9 @@
 # Data Source

-After following the steps outlined in [Getting Started](./getting-started.md),
-you'll notice that the OHIF Viewer has data for several studies and their
-images. You didn't add this data, so where is it coming from?
+After following the steps outlined in
+[Getting Started](./../development/getting-started.md), you'll notice that the
+OHIF Viewer has data for several studies and their images. You didn't add this
+data, so where is it coming from?

 By default, the viewer is configured to connect to a remote server hosted by the
 nice folks over at [dcmjs.org][dcmjs-org]. While convenient for getting started,
@@ -84,7 +85,7 @@ yarn run dev:orthanc
 #### Configuration: Learn More

 > For more configuration fun, check out the
-> [Essentials Configuration](./configuration.md) guide.
+> [Essentials Configuration](./index.md) guide.

 Let's take a look at what's going on under the hood here. `yarn run dev:orthanc`
 is running the `dev:orthanc` script in our project's `package.json`. That script
@@ -130,7 +131,7 @@ window.config = {
 ```

 To learn more about how you can configure the OHIF Viewer, check out our
-[Configuration Guide](./configuration.md).
+[Configuration Guide](./index.md).

 ## Open Source DICOM Image Archives

@@ -2,7 +2,12 @@

 > This step assumes you have an imaging archive. If you need assistance setting
 > one up, check out the [`Data Source` Guide](./data-source.md) or a deployment
-> recipe that contains an open source Image Archive
+> recipe that contains an open Image Archive
+
+- [Overview](#overview)
+  - [Configuration Files](#configuration-files)
+  - [Environment Variables](#environment-variables)
+- [How do I configure my project?](#how-do-i-configure-my-project)

 ## Overview

@@ -16,8 +21,8 @@ and registered extension's features, are configured using this file.

 **Embedded Use Note:**

-Alternatively, when using the `commonjs` bundle for embedded use cases, these
-same values are what you'll pass to `installViewer` method:
+Alternatively, when using the `umd` bundle for embedded use cases, these same
+values are what you'll pass to `installViewer` method:

 `OHIFStandaloneViewer.installViewer(window.config)`

@@ -36,10 +41,6 @@ alternative data source (or even specify different default hotkeys).
 | `PROXY_TARGET`       | When developing, proxy requests that match this pattern to `PROXY_DOMAIN`                          | `undefined`         |
 | `PROXY_DOMAIN`       | When developing, proxy requests from `PROXY_TARGET` to `PROXY_DOMAIN`                              | `undefined`         |

-### Registering Extensions
-
-> :warn: Instructions coming soon
-
 ## How do I configure my project?

 The simplest way is to update the existing default config:
@@ -65,6 +66,39 @@ 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:
@@ -10,9 +10,9 @@ your Viewer will display).
 ## Overview

 Our goal is to make deployment as simple and painless as possible; however,
-there is an inherent amount of complexity in customizing, optimizing, and
-deploying web applications. If you find yourself a little lost, please don't
-hesitate to [reach out for help](/help.md)
+there is an inherent amount of complexity in configuring and deploying web
+applications. If you find yourself a little lost, please don't hesitate to
+[reach out for help](/help.md)

 ## Deployment Scenarios

@@ -96,12 +96,12 @@ support it yet, but it is gaining wider adoption.
 If you have an existing archive and intend to host the OHIF Viewer at the same
 domain name as your archive, then connecting the two is as simple as following
 the steps layed out in our
-[Configuration Essentials Guide](./../essentials/configuration.md).
+[Configuration Essentials Guide](./../configuring/index.md).

 #### What if I don't have an imaging archive?

 We provide some guidance on configuring a local image archive in our
-[Data Source Essentials](./../essentials/data-source.md) guide. Hosting an
+[Data Source Essentials](./../configuring/data-source.md) guide. Hosting an
 archive remotely is a little trickier. You can check out some of our
 [advanced recipes](#recipes) for modeled setups that may work for you.

@@ -142,7 +142,7 @@ The OHIF Viewer can be configured to work with authorization servers that
 support one or more of the OpenID-Connect authorization flows. The Viewer finds
 it's OpenID-Connect settings on the `oidc` configuration key. You can set these
 values following the instructions laid out in the
-[Configuration Essentials Guide](./../essentials/configuration.md).
+[Configuration Essentials Guide](./../configuring/index.md).

 _Example OpenID-Connect Settings:_

@@ -1,7 +1,7 @@
 # Build for Production

 > If you've already followed the
-> ["Getting Started" Guide](/essentials/getting-started.md), you can skip ahead
+> ["Getting Started" Guide](/development/getting-started.md), you can skip ahead
 > to [Configuration](#configuration)

 ## Overview
@@ -73,7 +73,7 @@ and registered extension's features, are configured using this file.

 The easiest way to apply your own configuration is to modify the `default.js`
 file. For more advanced cofiguration options, check out our
-[configuration essentials guide](/essentials/configuration.md).
+[configuration essentials guide](/configuring/index.md).

 ## Next Steps

@@ -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>
@@ -7,8 +7,8 @@ like to discuss the changes you intend to make to clarify where or how they
 should be implemented, please don't hesitate to create a new issue. At a
 minimum, you may want to read the following documentation:

- [Essentials: Getting Started](/essentials/getting-started.md)
- [Advanced: Architecture](/advanced/architecture.md)
+- [Getting Started](/development/getting-started.md)
+- [Architecture](/architecture/index.md)

 Pull requests that are:

@@ -85,20 +85,12 @@ yarn run build
 yarn run build:package
 ```

-## Next Steps
-
-Take a look at the sidebar. Depending on how you intend to use The OHIF Viewer,
-different topics may be more pertinent than others. At a minimum, reading "The
-Essentials" and the deployment recipes should be a good starting point.
-
 ## Troubleshooting

 - If you receive a _"No Studies Found"_ message and do not see your studies, try
  changing the Study Date filters to a wider range.
 - If you see a 'Loading' message which never resolves, check your browser
  JavaScript console inside the Developer Tools to identify any errors.
- If you see any errors in your server console, check the
-  [Troubleshooting](./troubleshooting.md) page for more in depth advice.

 <!--
  Links
@@ -1,20 +0,0 @@
-# Troubleshooting
-
-Common GitHub issues that are not easily remedied with cleaner code or
-documentation will be recorded here. Please feel free to make PRs to update this
-page.
-
-## Common Problems
-
-| Problem                                      | Most Common Reasons                                                                                                                                         |
-| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ** Can't retrieve Study List over DICOMWeb** | 1. QIDO root URL is incorrect<br> 2. DICOM Web is not enabled on PACS                                                                                       |
-| ** Can't retrieve images**                   | 1. WADO Root URL is incorrect<br> 2. DICOM Web is not enabled on PACS<br> 3. HTTP Basic Authentication username and password are incorrect or not provided. |
-
-## Debugging Steps
-
-### Can't retrieve Study List over DICOMWeb
-
-1. Check that you can query your PACS using an alternative DICOM Web client
-   (e.g. cURL, or a Web Browser). If you cannot, then your PACS is configured
-   incorrectly. Refer to the documentation of the image archive.
@@ -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
@@ -71,11 +73,19 @@ export default {

 ### Registering an Extension

-There are two different ways to register and configure extensions. You can
-leverage one or both strategies. Which one(s) you choose depend on your
+There are two different ways to register and configure extensions: At
+[runtime](#runtime-extensions) and at [build time](#bundled-extensions).
+
+You can leverage one or both strategies. Which one(s) you choose depend on your
 application's requirements. Each [module](#modules) defined by the extension
 becomes available to the core application via the `ExtensionManager`.

+#### 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 = {
@@ -89,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

@@ -114,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

@@ -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.');

@@ -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)
@@ -1,3 +1,61 @@
 # 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',
+          // UI Hint; If the target panel is in a "disabled" state
+          isDisabled: studies => {
+            return false;
+          },
+          // Overrides `defaultContext`, if specified
+          context: ['ACTIVE_VIEWPORT:MAGIC'],
+        },
+      ],
+      components: [
+        {
+          id: 'target-component-id',
+          component: MyComponent,
+        },
+      ],
+      defaultContext: ['ROUTE:VIEWER'],
+    };
+  },
+};
+```
@@ -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`.
@@ -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      |
@@ -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>
@@ -19,10 +19,10 @@ Follow the steps outlined in the [Bug Report Template][bug-report-template].
 At the moment we are in the process of defining our roadmap and will do our best
 to communicate this to the community. If your requested feature is on the
 roadmap, then it will most likely be built at some point. If it is not, you are
-welcome to build it yourself and [contribute it](contributing/index.md). If you
-have resources and would like to fund the development of a feature, please
-[contact us](http://www.ohif.org) or work with community members that offer
-[consulting services][commercial-support].
+welcome to build it yourself and [contribute it](development/contributing.md).
+If you have resources and would like to fund the development of a feature,
+please [contact us](http://www.ohif.org) or work with community members that
+offer [consulting services][commercial-support].

 ### Who should I contact about Academic Collaborations?

@@ -1,4 +1,4 @@
-# Installation
+# PWA vs Packaged

 It's important to know that the OHIF Viewer project provides two different build
 processes:
@@ -36,7 +36,7 @@ many data sources. The OHIF Viewer's scope **DOES** include configuration and
 support for services that are protected with OpenID-Connect.

 In an effort to aide our users and contributors, we attempt to provide several
-[deployment and hosting recipes](./../deployment/index.md) as potential starting
+[deployment and hosting recipes](./deployment/index.md) as potential starting
 points. These are not meant to be rock solid, production ready, solutions; like
 most recipes, they should be augmented to best fit you and your organization's
 taste, preferences, etc.
@@ -105,7 +105,7 @@ quality and test coverage must not changed by a significant margin. For some
 repositories, visual screenshot-based tests are also included, and video
 recordings of end-to-end tests are stored for later review.

-[You can read more about our continous integration efforts here](/continous-integration.md)
+[You can read more about our continous integration efforts here](/development/continous-integration.md)

 ## Releases

@@ -0,0 +1,28 @@
+# Quick Start
+
+This page details how to get an instance of the OHIF Viewer up and running as
+fast as possible. It shows how to grab a pre-built version of the application,
+point it at your data source (PACS), and plop it on a web server.
+
+## Options
+
+### 1. Pre-built PWA
+
+...
+
+### 2. Script-Tag
+
+...
+
+### 3. Docker
+
+...
+
+## Security Concerns
+
+- Secure your data
+
+## Common Issues
+
+- Missing server rewrite rules
+- CORS issues when requesting data from PACS
@@ -1,6 +1,6 @@
-# Measurements Package (ohif-measurements)
+# Service: Measurements

-## Package design
+...

 ## Usage

@@ -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);
@@ -0,0 +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 -->
@@ -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
@@ -0,0 +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
@@ -1,4 +1,4 @@
-# Translating
+# Viewer: Internationalization

 OHIF supports internationalization using [i18next](https://www.i18next.com/)
 through the npm package [@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n),
@@ -15,7 +15,7 @@ where is the main instance of i18n containing several languages and tools.
  </div>
 </div>

-### Installing
+## Installing

 ```bash
 yarn add @ohif/i18n
@@ -25,7 +25,7 @@ yarn add @ohif/i18n
 npm install --save @ohif/i18n
 ```

-### How it works
+## How it works

 After installing `@ohif/i18n` npm package, the translation function
 [t](https://www.i18next.com/overview/api#t) can be used [with](#with-react) or
@@ -57,13 +57,13 @@ If the translation.json file contains a key that matches the HTML content e.g.

 ---

-#### With React
+### With React

 This section will introduce you to [react-i18next](https://react.i18next.com/)
 basics and show how to implement the [t](https://www.i18next.com/overview/api#t)
 function easily.

-##### Using HOCs
+#### Using HOCs

 In most cases we used
 [High Order Components](https://react.i18next.com/latest/withtranslation-hoc) to
@@ -86,13 +86,13 @@ export default withTranslation('MyNameSpace')(MyComponent);
 > [I18nextProvider](#using-outside-of-ohif-viewer) section, `withTranslation`
 > HOC doesnt works without a I18nextProvider

-##### Using Hooks
+#### Using Hooks

 Also, it's possible to get the `t` tool using
 [React Hooks](https://react.i18next.com/latest/usetranslation-hook), but it
 requires at least React > 16.8 😉

-#### Using outside of OHIF viewer
+### Using outside of OHIF viewer

 OHIF Viewer already sets a main
 [I18nextProvider](https://react.i18next.com/latest/i18nextprovider) connected to
@@ -119,7 +119,7 @@ usage.

 ---

-#### Without React
+### Without React

 When needed, you can also use available translations _without React_.

@@ -1,4 +1,4 @@
-# Themeing
+# Viewer: Themeing

 Themeing is currently accomplished with color variables that are defined within
 the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector
@@ -1,6 +1,7 @@
 # Lesion Tracker - Audit Trail

 1. To view Audit Trails, select **View Audit Log** on the Configuration menu.
-2. To filter audit logs for a column or multiple columns, type or select in the related column or columns.
+2. To filter audit logs for a column or multiple columns, type or select in the
+   related column or columns.

 ![Audit Trails](../assets/img/LesionTracker/LT_Audit_Trails.png)
@@ -2,50 +2,74 @@

 ![Study List](../assets/img/LesionTracker/LT_StudyList.png)

-1. Study List allows to sort each column. To sort studies, click the desired column header.
-2. Study List is filterable for each column and you can filter by more than one column by typing in the column field. To filter a column, type the text in the desired column header field and press Enter.
-3. Pagination is provided for the Study List at the bottom of the page. You can change the number of rows per page or the current page.
+1. Study List allows to sort each column. To sort studies, click the desired
+   column header.
+2. Study List is filterable for each column and you can filter by more than one
+   column by typing in the column field. To filter a column, type the text in
+   the desired column header field and press Enter.
+3. Pagination is provided for the Study List at the bottom of the page. You can
+   change the number of rows per page or the current page.

 ## Study List Context Menu

-When you right-click on the study row, Study Context Menu will pop up. Study Context Menu includes operations at the study level.
+When you right-click on the study row, Study Context Menu will pop up. Study
+Context Menu includes operations at the study level.

 There are a couple of ways to view a study:

-* Simply double-click on the study row.
-* Select **View** option on the Study Context Menu, then you will be redirected to Viewer page.
+- Simply double-click on the study row.
+- Select **View** option on the Study Context Menu, then you will be redirected
+  to Viewer page.

 ![View Study](../assets/img/LesionTracker/LT_View_Study.png)

 ### Timepoint Association

-1. To link a study with a timepoint, right-click on the study row and select **Associate** option on the Study Context Menu. You will see Study Association dialog.
-2. To link multiple studies at the same time, hold Shift key and select studies you would like to associate, then right-click and select Associate on the Study Context Menu
+1. To link a study with a timepoint, right-click on the study row and select
+   **Associate** option on the Study Context Menu. You will see Study
+   Association dialog.
+2. To link multiple studies at the same time, hold Shift key and select studies
+   you would like to associate, then right-click and select Associate on the
+   Study Context Menu

 ![Select Associate](../assets/img/LesionTracker/LT_Select_Associate.png)

-The Study Association dialog allows you to select and unselect Timepoint Type for the selected study or studies. Also, it will include all studies within 14 days of your selected studies, in case you forgot to select a study. After you identify timepoints for the selected study or studies, click **Save** to save the association.
+The Study Association dialog allows you to select and unselect Timepoint Type
+for the selected study or studies. Also, it will include all studies within 14
+days of your selected studies, in case you forgot to select a study. After you
+identify timepoints for the selected study or studies, click **Save** to save
+the association.

 ![Association Dialog](../assets/img/LesionTracker/LT_Association_Dialog.png)

 ### Remove Timepoint Association
-To unlink a timepoint association with a study, right-click on the study row and select **Remove Association** option on the Study Context Menu. Remove Association will be disabled if the study is already dissociated.
+
+To unlink a timepoint association with a study, right-click on the study row and
+select **Remove Association** option on the Study Context Menu. Remove
+Association will be disabled if the study is already dissociated.

 ![Remove Associate](../assets/img/LesionTracker/LT_Remove_Associate.png)

 ### View Series Details
-To view details of related series, right-click on the study row and select **View Series Details** option on the Study Context Menu, then Series Details dialog will pop up. Series Details dialog gives a summary of the selected study.
+
+To view details of related series, right-click on the study row and select
+**View Series Details** option on the Study Context Menu, then Series Details
+dialog will pop up. Series Details dialog gives a summary of the selected study.

 ![View Series Details](../assets/img/LesionTracker/LT_View_Series_Details.png)

 ### Anonymize (Under Development)
+
 ...

 ### Send (Under Development)
+
 ...

 ### Export (Under Development)
+
 ...

 ### Delete (Under Development)
+
 ...
@@ -12,14 +12,15 @@ export default {
   */

  preRegistration({
-    servicesManager,
-    configuration: extensionConfiguration,
+    servicesManager = {},
+    commandsManager = {},
+    appConfig = {},
+    configuration = {},
  }) {},

  /**
   * MODULE GETTERS
   */
-
  getViewportModule() {
    return '... react component ...';
  },
@@ -62,7 +63,7 @@ const commandsModule = {
 */
 const sopClassHandlerModule = {
  id: 'OHIFDicomHtmlSopClassHandler',
-  sopClassUids: Object.values({
+  sopClassUIDs: Object.values({
    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',
    COMPREHENSIVE_SR: '1.2.840.10008.5.1.4.1.1.88.33',
@@ -76,12 +77,12 @@ const sopClassHandlerModule = {

    return {
      plugin: 'html',
-      displaySetInstanceUid: 0, //utils.guid(),
+      displaySetInstanceUID: 0, //utils.guid(),
      wadoRoot: study.getData().wadoRoot,
      wadoUri: instance.getData().wadouri,
-      sopInstanceUid: instance.getSOPInstanceUID(),
-      seriesInstanceUid: series.getSeriesInstanceUID(),
-      studyInstanceUid: study.getStudyInstanceUID(),
+      SOPInstanceUID: instance.getSOPInstanceUID(),
+      SeriesInstanceUID: series.getSeriesInstanceUID(),
+      StudyInstanceUID: study.getStudyInstanceUID(),
      authorizationHeaders,
    };
  },
@@ -96,6 +97,9 @@ const panelModule = {
      icon: 'th-list',
      label: 'Segments',
      target: 'segment-panel',
+      isDisabled: studies => {
+        return false;
+      },
    },
  ],
  components: [
@@ -3,6 +3,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.4.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.4.2...@ohif/extension-cornerstone@2.4.3) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.4.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.4.1...@ohif/extension-cornerstone@2.4.2) (2020-03-09)
+
+
+### Bug Fixes
+
+* Remove Eraser and ROI Window ([6c950a9](https://github.com/OHIF/Viewers/commit/6c950a9669f7fbf3c46e48679fa26ee514824156))
+
+
+
+
+
+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.4.0...@ohif/extension-cornerstone@2.4.1) (2020-03-03)
+
+
+### Bug Fixes
+
+* bump react-cornerstone-viewport version to address critical issue ([#1473](https://github.com/OHIF/Viewers/issues/1473)) ([ee80e02](https://github.com/OHIF/Viewers/commit/ee80e026610442e94caf5e4e3e4d193220cd0ece))
+
+
+
+
+
+# [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
@@ -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
@@ -0,0 +1 @@
+module.exports = require("../../babel.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"
+  // ]
+};
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "1.7.2",
+  "version": "2.4.3",
  "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.10.1",
    "dicom-parser": "^1.8.3",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
@@ -47,8 +49,8 @@
  "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"
+    "react-cornerstone-viewport": "^2.3.6"
  }
 }
@@ -8,15 +8,6 @@ import handleSegmentationStorage from './handleSegmentationStorage.js';

 const { StackManager } = OHIF.utils;

-// Metadata configuration
-const metadataProvider = new OHIF.cornerstone.MetadataProvider();
-
-cornerstone.metaData.addProvider(
-  metadataProvider.provider.bind(metadataProvider)
-);
-
-StackManager.setMetadataProvider(metadataProvider);
-
 const SOP_CLASSES = {
  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
 };
@@ -58,34 +49,34 @@ class OHIFCornerstoneViewport extends Component {
   * Obtain the CornerstoneTools Stack for the specified display set.
   *
   * @param {Object[]} studies
-   * @param {String} studyInstanceUid
-   * @param {String} displaySetInstanceUid
-   * @param {String} [sopInstanceUid]
+   * @param {String} StudyInstanceUID
+   * @param {String} displaySetInstanceUID
+   * @param {String} [SOPInstanceUID]
   * @param {Number} [frameIndex=1]
   * @return {Object} CornerstoneTools Stack
   */
  static getCornerstoneStack(
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPInstanceUID,
    frameIndex = 0
  ) {
    if (!studies || !studies.length) {
      throw new Error('Studies not provided.');
    }

-    if (!studyInstanceUid) {
+    if (!StudyInstanceUID) {
      throw new Error('StudyInstanceUID not provided.');
    }

-    if (!displaySetInstanceUid) {
+    if (!displaySetInstanceUID) {
      throw new Error('StudyInstanceUID not provided.');
    }

    // Create shortcut to displaySet
    const study = studies.find(
-      study => study.studyInstanceUid === studyInstanceUid
+      study => study.StudyInstanceUID === StudyInstanceUID
    );

    if (!study) {
@@ -93,7 +84,7 @@ class OHIFCornerstoneViewport extends Component {
    }

    const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUid === displaySetInstanceUid;
+      return set.displaySetInstanceUID === displaySetInstanceUID;
    });

    if (!displaySet) {
@@ -107,17 +98,14 @@ class OHIFCornerstoneViewport extends Component {
    const stack = Object.assign({}, storedStack);
    stack.currentImageIdIndex = frameIndex;

-    if (sopInstanceUid) {
+    if (SOPInstanceUID) {
      const index = stack.imageIds.findIndex(imageId => {
-        const sopCommonModule = cornerstone.metaData.get(
-          'sopCommonModule',
+        const imageIdSOPInstanceUID = cornerstone.metaData.get(
+          'SOPInstanceUID',
          imageId
        );
-        if (!sopCommonModule) {
-          return;
-        }

-        return sopCommonModule.sopInstanceUID === sopInstanceUid;
+        return imageIdSOPInstanceUID === SOPInstanceUID;
      });

      if (index > -1) {
@@ -134,39 +122,39 @@ class OHIFCornerstoneViewport extends Component {

  getViewportData = async (
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopClassUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPClassUID,
+    SOPInstanceUID,
    frameIndex
  ) => {
    let viewportData;

-    switch (sopClassUid) {
+    switch (SOPClassUID) {
      case SOP_CLASSES.SEGMENTATION_STORAGE:
        const specialCaseHandler =
          specialCaseHandlers[SOP_CLASSES.SEGMENTATION_STORAGE];

        viewportData = await specialCaseHandler(
          studies,
-          studyInstanceUid,
-          displaySetInstanceUid,
-          sopInstanceUid,
+          StudyInstanceUID,
+          displaySetInstanceUID,
+          SOPInstanceUID,
          frameIndex
        );
        break;
      default:
        const stack = OHIFCornerstoneViewport.getCornerstoneStack(
          studies,
-          studyInstanceUid,
-          displaySetInstanceUid,
-          sopInstanceUid,
+          StudyInstanceUID,
+          displaySetInstanceUID,
+          SOPInstanceUID,
          frameIndex
        );

        viewportData = {
-          studyInstanceUid,
-          displaySetInstanceUid,
+          StudyInstanceUID,
+          displaySetInstanceUID,
          stack,
        };

@@ -179,31 +167,31 @@ class OHIFCornerstoneViewport extends Component {
  setStateFromProps() {
    const { studies, displaySet } = this.props.viewportData;
    const {
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUids,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      sopClassUIDs,
+      SOPInstanceUID,
      frameIndex,
    } = displaySet;

-    if (!studyInstanceUid || !displaySetInstanceUid) {
+    if (!StudyInstanceUID || !displaySetInstanceUID) {
      return;
    }

-    if (sopClassUids && sopClassUids.length > 1) {
+    if (sopClassUIDs && sopClassUIDs.length > 1) {
      console.warn(
-        'More than one SOPClassUid in the same series is not yet supported.'
+        'More than one SOPClassUID in the same series is not yet supported.'
      );
    }

-    const sopClassUid = sopClassUids && sopClassUids[0];
+    const SOPClassUID = sopClassUIDs && sopClassUIDs[0];

    this.getViewportData(
      studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUid,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPClassUID,
+      SOPInstanceUID,
      frameIndex
    ).then(viewportData => {
      this.setState({
@@ -221,9 +209,9 @@ class OHIFCornerstoneViewport extends Component {
    const prevDisplaySet = prevProps.viewportData.displaySet;

    if (
-      displaySet.displaySetInstanceUid !==
-        prevDisplaySet.displaySetInstanceUid ||
-      displaySet.sopInstanceUid !== prevDisplaySet.sopInstanceUid ||
+      displaySet.displaySetInstanceUID !==
+        prevDisplaySet.displaySetInstanceUID ||
+      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
      displaySet.frameIndex !== prevDisplaySet.frameIndex
    ) {
      this.setStateFromProps();
@@ -248,10 +236,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,
+          })
+        );
      });
    }

@@ -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,134 @@ 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 +343,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 {
@@ -6,25 +6,25 @@ import cornerstoneTools from 'cornerstone-tools';

 const { StackManager, DicomLoaderService } = OHIF.utils;

-function getDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
+function getDisplaySet(studies, StudyInstanceUID, displaySetInstanceUID) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );

  const displaySet = study.displaySets.find(set => {
-    return set.displaySetInstanceUid === displaySetInstanceUid;
+    return set.displaySetInstanceUID === displaySetInstanceUID;
  });

  return displaySet;
 }

-function getDisplaySetsBySeries(studies, studyInstanceUid, seriesInstanceUid) {
+function getDisplaySetsBySeries(studies, StudyInstanceUID, SeriesInstanceUID) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );

  return study.displaySets.filter(set => {
-    return set.seriesInstanceUid === seriesInstanceUid;
+    return set.SeriesInstanceUID === SeriesInstanceUID;
  });
 }

@@ -39,7 +39,7 @@ function parseSeg(arrayBuffer, imageIds) {
 function addSegMetadataToCornerstoneToolState(
  segMetadata,
  toolState,
-  displaySetInstanceUid
+  displaySetInstanceUID
 ) {
  cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
    toolState
@@ -48,22 +48,22 @@ function addSegMetadataToCornerstoneToolState(
  const brushModule = cornerstoneTools.store.modules.brush;

  for (let i = 0; i < segMetadata.length; i++) {
-    brushModule.setters.metadata(displaySetInstanceUid, i, segMetadata[i]);
+    brushModule.setters.metadata(displaySetInstanceUID, i, segMetadata[i]);
  }
 }

 async function handleSegmentationStorage(
  studies,
-  studyInstanceUid,
-  displaySetInstanceUid
+  StudyInstanceUID,
+  displaySetInstanceUID
 ) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );
  const displaySet = getDisplaySet(
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
+    StudyInstanceUID,
+    displaySetInstanceUID
  );

  const arrayBuffer = await DicomLoaderService.findDicomDataPromise(
@@ -77,16 +77,16 @@ async function handleSegmentationStorage(

  dataset._meta = dcmjs.data.DicomMetaDictionary.namifyDataset(dicomData.meta);

-  const seriesInstanceUid = dataset.ReferencedSeriesSequence.SeriesInstanceUID;
+  const SeriesInstanceUID = dataset.ReferencedSeriesSequence.SeriesInstanceUID;
  const displaySets = getDisplaySetsBySeries(
    studies,
-    studyInstanceUid,
-    seriesInstanceUid
+    StudyInstanceUID,
+    SeriesInstanceUID
  );

  if (displaySets.length > 1) {
    console.warn(
-      'More than one display set with the same seriesInstanceUid. This is not supported yet...'
+      'More than one display set with the same SeriesInstanceUID. This is not supported yet...'
    );
  }

@@ -119,8 +119,8 @@ async function handleSegmentationStorage(
  stack.currentImageIdIndex = 0;

  return {
-    studyInstanceUid,
-    displaySetInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
    stack,
  };
 }
@@ -1,68 +1,50 @@
 import OHIF from '@ohif/core';
+import { SimpleDialog } from '@ohif/ui';
 import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
+import merge from 'lodash.merge';
 import initCornerstoneTools from './initCornerstoneTools.js';
-import queryString from 'query-string';
-import { SimpleDialog } from '@ohif/ui';
-
-function fallbackMetaDataProvider(type, imageId) {
-  if (!imageId.includes('wado?requestType=WADO')) {
-    return;
-  }
-
-  // If you call for an WADO-URI imageId and get no
-  // metadata, try reformatting to WADO-RS imageId
-  const qs = queryString.parse(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}`;
-
-  return cornerstone.metaData.get(type, wadoRsImageId);
-}
-
-// Add this fallback provider with a low priority so it is handled last
-cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);
+import measurementServiceMappingsFactory from './utils/measurementServiceMappings/measurementServiceMappingsFactory';

 /**
 *
- * @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;
-  const { StackManager } = OHIF.utils;
-  const metadataProvider = new OHIF.cornerstone.MetadataProvider();
+  const metadataProvider = OHIF.cornerstone.metadataProvider;

-  // ~~ Set our MetadataProvider
  cornerstone.metaData.addProvider(
-    metadataProvider.provider.bind(metadataProvider)
+    metadataProvider.get.bind(metadataProvider),
+    9999
  );

-  StackManager.setMetadataProvider(metadataProvider);
-
  // ~~
  const defaultCsToolsConfig = csToolsConfig || {
    globalToolSyncEnabled: true,
@@ -72,61 +54,104 @@ 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.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 +160,118 @@ 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);
+          }
+        );
+      });
+    }
+  );
+};
@@ -215,15 +215,6 @@ const definitions = [
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Bidirectional' },
      },
-      {
-        id: 'Eraser',
-        label: 'Eraser',
-        icon: 'eraser',
-        //
-        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Eraser' },
-      },
      {
        id: 'Download',
        label: 'Download',
@@ -237,6 +228,15 @@ const definitions = [
      },
    ],
  },
+  {
+    id: 'Exit2DMPR',
+    label: 'Exit 2D MPR',
+    icon: 'times',
+    //
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'setCornerstoneLayout',
+    context: 'ACTIVE_VIEWPORT::VTK',
+  },
 ];

 export default {
@@ -0,0 +1,141 @@
+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,
+      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 instance = cornerstone.metaData.get('instance', imageId);
+
+    return {
+      SOPInstanceUID: instance.SOPInstanceUID,
+      FrameOfReferenceUID: instance.FrameOfReferenceUID,
+      SeriesInstanceUID: instance.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;
@@ -0,0 +1,83 @@
+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);
+    });
+  });
+});
@@ -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;
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.0...@ohif/extension-dicom-html@1.1.1) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+# [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
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-html",
-  "version": "1.0.2",
+  "version": "1.1.1",
  "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.10.1",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -11,26 +11,26 @@ const SOP_CLASS_UIDS = {
  X_RAY_RADIATION_DOSE_SR: '1.2.840.10008.5.1.4.1.1.88.67',
 };

-const sopClassUids = Object.values(SOP_CLASS_UIDS);
+const sopClassUIDs = Object.values(SOP_CLASS_UIDS);

 // TODO: Handle the case where there is more than one SOP Class Handler for the
 // same SOP Class
 const OHIFDicomHtmlSopClassHandler = {
  id: 'OHIFDicomHtmlSopClassHandler',
  type: MODULE_TYPES.SOP_CLASS_HANDLER,
-  sopClassUids,
+  sopClassUIDs,
  getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
    const instance = series.getFirstInstance();

    return {
      plugin: 'html',
-      modality: 'SR',
-      displaySetInstanceUid: utils.guid(),
+      Modality: 'SR',
+      displaySetInstanceUID: utils.guid(),
      wadoRoot: study.getData().wadoRoot,
      wadoUri: instance.getData().wadouri,
-      sopInstanceUid: instance.getSOPInstanceUID(),
-      seriesInstanceUid: series.getSeriesInstanceUID(),
-      studyInstanceUid: study.getStudyInstanceUID(),
+      SOPInstanceUID: instance.getSOPInstanceUID(),
+      SeriesInstanceUID: series.getSeriesInstanceUID(),
+      StudyInstanceUID: study.getStudyInstanceUID(),
      authorizationHeaders,
    };
  },
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.50.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.6...@ohif/extension-dicom-microscopy@0.50.7) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
 ## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.5...@ohif/extension-dicom-microscopy@0.50.6) (2019-09-26)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.50.6",
+  "version": "0.50.7",
  "description": "OHIF extension for Dicom Microscopy",
  "author": "OHIF",
  "license": "MIT",
@@ -8,7 +8,7 @@ const SOP_CLASS_UIDS = {

 const DicomMicroscopySopClassHandler = {
  id: 'DicomMicroscopySopClassHandlerPlugin',
-  sopClassUids: [SOP_CLASS_UIDS.VL_WHOLE_SLIDE_MICROSCOPY_IMAGE_STORAGE],
+  sopClassUIDs: [SOP_CLASS_UIDS.VL_WHOLE_SLIDE_MICROSCOPY_IMAGE_STORAGE],
  getDisplaySetFromSeries(series, study, dicomWebClient) {
    const instance = series.getFirstInstance();

@@ -16,12 +16,12 @@ const DicomMicroscopySopClassHandler = {

    return {
      plugin: 'microscopy',
-      modality: 'SM',
-      displaySetInstanceUid: utils.guid(),
+      Modality: 'SM',
+      displaySetInstanceUID: utils.guid(),
      dicomWebClient,
-      sopInstanceUid: instance.getSOPInstanceUID(),
-      seriesInstanceUid: series.getSeriesInstanceUID(),
-      studyInstanceUid: study.getStudyInstanceUID(),
+      SOPInstanceUID: instance.getSOPInstanceUID(),
+      SeriesInstanceUID: series.getSeriesInstanceUID(),
+      StudyInstanceUID: study.getStudyInstanceUID(),
    };
  },
 };
@@ -25,8 +25,8 @@ class DicomMicroscopyViewport extends Component {
    const dicomWebClient = displaySet.dicomWebClient;

    const searchInstanceOptions = {
-      studyInstanceUID: displaySet.studyInstanceUid,
-      seriesInstanceUID: displaySet.seriesInstanceUid,
+      studyInstanceUID: displaySet.StudyInstanceUID,
+      seriesInstanceUID: displaySet.SeriesInstanceUID,
    };

    dicomWebClient
@@ -34,18 +34,18 @@ class DicomMicroscopyViewport extends Component {
      .then(instances => {
        const promises = [];
        for (let i = 0; i < instances.length; i++) {
-          const sopInstanceUID = instances[i]['00080018']['Value'][0];
+          const sopInstanceUid = instances[i]['00080018']['Value'][0];
          const retrieveInstanceOptions = {
-            studyInstanceUID: displaySet.studyInstanceUid,
-            seriesInstanceUID: displaySet.seriesInstanceUid,
-            sopInstanceUID,
+            studyInstanceUID: displaySet.StudyInstanceUID,
+            seriesInstanceUID: displaySet.SeriesInstanceUID,
+            sopInstanceUid,
          };

          const promise = dicomWebClient
            .retrieveInstanceMetadata(retrieveInstanceOptions)
            .then(metadata => {
-              const imageType = metadata[0]['00080008']['Value'];
-              if (imageType[2] === 'VOLUME') {
+              const ImageType = metadata[0]['00080008']['Value'];
+              if (ImageType[2] === 'VOLUME') {
                return metadata[0];
              }
            });
@@ -56,13 +56,15 @@ class DicomMicroscopyViewport extends Component {
      .then(async metadata => {
        metadata = metadata.filter(m => m);

-        const { api } = await import(/* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer');
+        const { api } = await import(
+          /* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer'
+        );
        const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;

        this.viewer = new microscopyViewer({
          client: dicomWebClient,
          metadata,
-          retrieveRendered: false
+          retrieveRendered: false,
        });

        this.viewer.render({ container });
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.1...@ohif/extension-dicom-pdf@1.0.2) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+## [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)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-pdf",
-  "version": "1.0.0",
+  "version": "1.0.2",
  "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"
 }
@@ -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;
@@ -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%;
+}
@@ -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,22 +16,94 @@ 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) {
-      const sopClassUid = dataSet.string('x00080016');
+      const SOPClassUID = dataSet.string('x00080016');

-      if (sopClassUid !== SOP_CLASS_UIDS.ENCAPSULATED_PDF) {
+      if (SOPClassUID !== SOP_CLASS_UIDS.ENCAPSULATED_PDF) {
        throw new Error('This is not a DICOM-encapsulated PDF');
      }

@@ -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>
    );
  }
@@ -8,19 +8,19 @@ const SOP_CLASS_UIDS = {
 const OHIFDicomPDFSopClassHandler = {
  id: 'OHIFDicomPDFSopClassHandlerPlugin',
  type: MODULE_TYPES.SOP_CLASS_HANDLER,
-  sopClassUids: [SOP_CLASS_UIDS.ENCAPSULATED_PDF],
+  sopClassUIDs: [SOP_CLASS_UIDS.ENCAPSULATED_PDF],
  getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
    const instance = series.getFirstInstance();

    return {
      plugin: 'pdf',
-      modality: 'DOC',
-      displaySetInstanceUid: utils.guid(),
+      Modality: 'DOC',
+      displaySetInstanceUID: utils.guid(),
      wadoRoot: study.getData().wadoRoot,
      wadoUri: instance.getData().wadouri,
-      sopInstanceUid: instance.getSOPInstanceUID(),
-      seriesInstanceUid: series.getSeriesInstanceUID(),
-      studyInstanceUid: study.getStudyInstanceUID(),
+      SOPInstanceUID: instance.getSOPInstanceUID(),
+      SeriesInstanceUID: series.getSeriesInstanceUID(),
+      StudyInstanceUID: study.getStudyInstanceUID(),
      authorizationHeaders: authorizationHeaders,
    };
  },
@@ -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,37 @@ 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>
    );
  }
@@ -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;
+}
@@ -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;
-  }
+  },
 };
@@ -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 });
+};
@@ -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,
+    },
+  });
+};
@@ -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))
@@ -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.
@@ -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 -->
@@ -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"
+  }
+}
@@ -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);
+}
@@ -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;
@@ -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;
+  },
+};
@@ -3,6 +3,336 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.2.24](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.23...@ohif/extension-vtk@1.2.24) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.22...@ohif/extension-vtk@1.2.23) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.21...@ohif/extension-vtk@1.2.22) (2020-03-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.20...@ohif/extension-vtk@1.2.21) (2020-02-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.19...@ohif/extension-vtk@1.2.20) (2020-02-21)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [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
+
+
+
+
+
+## [0.54.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.3...@ohif/extension-vtk@0.54.4) (2019-12-07)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.54.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.2...@ohif/extension-vtk@0.54.3) (2019-12-06)

 **Note:** Version bump only for package @ohif/extension-vtk
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "0.54.3",
+  "version": "1.2.24",
  "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.10.1",
    "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.1",
-    "cornerstone-tools": "^4.8.0",
+    "@ohif/core": "^2.5.3",
+    "@ohif/ui": "^1.3.3",
+    "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",
@@ -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;
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { getImageData, loadImageData } from 'react-vtkjs-viewport';
-
 import ConnectedVTKViewport from './ConnectedVTKViewport';
 import LoadingIndicator from './LoadingIndicator.js';
 import OHIF from '@ohif/core';
@@ -13,15 +12,7 @@ import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
 import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';

 const { StackManager } = OHIF.utils;
-
-// Metadata configuration
-const metadataProvider = new OHIF.cornerstone.MetadataProvider();
-
-cornerstone.metaData.addProvider(
-  metadataProvider.provider.bind(metadataProvider)
-);
-
-StackManager.setMetadataProvider(metadataProvider);
+const style = { width: '100%', height: '100%', position: 'relative' };

 const SOP_CLASSES = {
  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
@@ -68,15 +59,20 @@ class OHIFVTKViewport extends Component {
    viewportData: PropTypes.shape({
      studies: PropTypes.array,
      displaySet: PropTypes.shape({
-        studyInstanceUid: PropTypes.string,
-        displaySetInstanceUid: PropTypes.string,
-        sopClassUids: PropTypes.arrayOf(PropTypes.string),
-        sopInstanceUid: PropTypes.string,
+        StudyInstanceUID: PropTypes.string,
+        displaySetInstanceUID: PropTypes.string,
+        sopClassUIDs: PropTypes.arrayOf(PropTypes.string),
+        SOPInstanceUID: PropTypes.string,
        frameIndex: PropTypes.number,
      }),
    }),
    viewportIndex: PropTypes.number,
    children: PropTypes.node,
+    onScroll: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onScroll: () => {},
  };

  static id = 'OHIFVTKViewport';
@@ -92,18 +88,18 @@ class OHIFVTKViewport extends Component {

  static getCornerstoneStack(
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPInstanceUID,
    frameIndex
  ) {
    // Create shortcut to displaySet
    const study = studies.find(
-      study => study.studyInstanceUid === studyInstanceUid
+      study => study.StudyInstanceUID === StudyInstanceUID
    );

    const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUid === displaySetInstanceUid;
+      return set.displaySetInstanceUID === displaySetInstanceUID;
    });

    // Get stack from Stack Manager
@@ -114,17 +110,14 @@ class OHIFVTKViewport extends Component {

    if (frameIndex !== undefined) {
      stack.currentImageIdIndex = frameIndex;
-    } else if (sopInstanceUid) {
+    } else if (SOPInstanceUID) {
      const index = stack.imageIds.findIndex(imageId => {
-        const sopCommonModule = cornerstone.metaData.get(
-          'sopCommonModule',
+        const imageIdSOPInstanceUID = cornerstone.metaData.get(
+          'SOPInstanceUID',
          imageId
        );
-        if (!sopCommonModule) {
-          return;
-        }

-        return sopCommonModule.sopInstanceUID === sopInstanceUid;
+        return imageIdSOPInstanceUID === SOPInstanceUID;
      });

      if (index > -1) {
@@ -139,31 +132,31 @@ class OHIFVTKViewport extends Component {

  getViewportData = (
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopClassUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPClassUID,
+    SOPInstanceUID,
    frameIndex
  ) => {
    const stack = OHIFVTKViewport.getCornerstoneStack(
      studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUid,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPClassUID,
+      SOPInstanceUID,
      frameIndex
    );

    let imageDataObject;
    let labelmapDataObject;

-    switch (sopClassUid) {
+    switch (SOPClassUID) {
      case SOP_CLASSES.SEGMENTATION_STORAGE:
        throw new Error('Not yet implemented');
      /*
        const data = handleSegmentationStorage(
          stack.imageIds,
-          displaySetInstanceUid
+          displaySetInstanceUID
        );

        imageDataObject = data.referenceDataObject;
@@ -177,7 +170,7 @@ class OHIFVTKViewport extends Component {
        });
        */
      default:
-        imageDataObject = getImageData(stack.imageIds, displaySetInstanceUid);
+        imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);

        return imageDataObject;
    }
@@ -189,25 +182,31 @@ class OHIFVTKViewport extends Component {
   * @param {object} imageDataObject
   * @param {object} imageDataObject.vtkImageData
   * @param {object} imageDataObject.imageMetaData0
-   * @param {number} [imageDataObject.imageMetaData0.windowWidth] - The volume's initial windowWidth
-   * @param {number} [imageDataObject.imageMetaData0.windowCenter] - The volume's initial windowCenter
-   * @param {string} imageDataObject.imageMetaData0.modality - CT, MR, PT, etc
-   * @param {string} displaySetInstanceUid
+   * @param {number} [imageDataObject.imageMetaData0.WindowWidth] - The volume's initial WindowWidth
+   * @param {number} [imageDataObject.imageMetaData0.WindowCenter] - The volume's initial WindowCenter
+   * @param {string} imageDataObject.imageMetaData0.Modality - CT, MR, PT, etc
+   * @param {string} displaySetInstanceUID
   * @returns vtkVolumeActor
   * @memberof OHIFVTKViewport
   */
-  getOrCreateVolume(imageDataObject, displaySetInstanceUid) {
-    if (volumeCache[displaySetInstanceUid]) {
-      return volumeCache[displaySetInstanceUid];
+  getOrCreateVolume(imageDataObject, displaySetInstanceUID) {
+    if (volumeCache[displaySetInstanceUID]) {
+      return volumeCache[displaySetInstanceUID];
    }

    const { vtkImageData, imageMetaData0 } = imageDataObject;
-    const { windowWidth, windowCenter, modality } = imageMetaData0;
+    // TODO -> Should update react-vtkjs-viewport and react-cornerstone-viewports
+    // internals to use naturalized DICOM JSON names.
+    const {
+      windowWidth: WindowWidth,
+      windowCenter: WindowCenter,
+      modality: Modality,
+    } = imageMetaData0;

    const { lower, upper } = _getRangeFromWindowLevels(
-      windowWidth,
-      windowCenter,
-      modality
+      WindowWidth,
+      WindowCenter,
+      Modality
    );
    const volumeActor = vtkVolume.newInstance();
    const volumeMapper = vtkVolumeMapper.newInstance();
@@ -231,7 +230,7 @@ class OHIFVTKViewport extends Component {
    // TODO: maybe we should auto adjust samples to 1000.
    volumeMapper.setMaximumSamplesPerRay(4000);

-    volumeCache[displaySetInstanceUid] = volumeActor;
+    volumeCache[displaySetInstanceUID] = volumeActor;

    return volumeActor;
  }
@@ -239,26 +238,26 @@ class OHIFVTKViewport extends Component {
  setStateFromProps() {
    const { studies, displaySet } = this.props.viewportData;
    const {
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUids,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      sopClassUIDs,
+      SOPInstanceUID,
      frameIndex,
    } = displaySet;

-    if (sopClassUids.length > 1) {
+    if (sopClassUIDs.length > 1) {
      console.warn(
-        'More than one SOPClassUid in the same series is not yet supported.'
+        'More than one SOPClassUID in the same series is not yet supported.'
      );
    }

-    const sopClassUid = sopClassUids[0];
+    const SOPClassUID = sopClassUIDs[0];
    const imageDataObject = this.getViewportData(
      studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUid,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPClassUID,
+      SOPInstanceUID,
      frameIndex
    );

@@ -272,7 +271,7 @@ class OHIFVTKViewport extends Component {

    const volumeActor = this.getOrCreateVolume(
      imageDataObject,
-      displaySetInstanceUid
+      displaySetInstanceUID
    );

    this.setState({
@@ -312,9 +311,9 @@ class OHIFVTKViewport extends Component {
    const prevDisplaySet = prevProps.viewportData.displaySet;

    if (
-      displaySet.displaySetInstanceUid !==
-        prevDisplaySet.displaySetInstanceUid ||
-      displaySet.sopInstanceUid !== prevDisplaySet.sopInstanceUid ||
+      displaySet.displaySetInstanceUID !==
+        prevDisplaySet.displaySetInstanceUID ||
+      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
      displaySet.frameIndex !== prevDisplaySet.frameIndex
    ) {
      this.setStateFromProps();
@@ -326,7 +325,7 @@ class OHIFVTKViewport extends Component {

    const { isLoading, insertPixelDataPromises } = imageDataObject;

-    const numberOfFrames = insertPixelDataPromises.length;
+    const NumberOfFrames = insertPixelDataPromises.length;

    if (!isLoading) {
      this.setState({ isLoaded: true });
@@ -336,7 +335,7 @@ class OHIFVTKViewport extends Component {
    insertPixelDataPromises.forEach(promise => {
      promise.then(numberProcessed => {
        const percentComplete = Math.floor(
-          (numberProcessed * 100) / numberOfFrames
+          (numberProcessed * 100) / NumberOfFrames
        );

        if (percentComplete !== this.state.percentComplete) {
@@ -358,15 +357,16 @@ 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,
+          })
+        );
      });
    }

-    const style = { width: '100%', height: '100%', position: 'relative' };
-
    return (
      <>
        <div style={style}>
@@ -383,6 +383,7 @@ class OHIFVTKViewport extends Component {
                this.state.paintFilterBackgroundImageData
              }
              viewportIndex={this.props.viewportIndex}
+              onScroll={this.props.onScroll}
            />
          )}
        </div>
@@ -400,21 +401,21 @@ class OHIFVTKViewport extends Component {
 * @private
 * @param {number} [width] - the width of our window
 * @param {number} [center] - the center of our window
- * @param {string} [modality] - 'PT', 'CT', etc.
+ * @param {string} [Modality] - 'PT', 'CT', etc.
 * @returns { lower, upper } - range
 */
-function _getRangeFromWindowLevels(width, center, modality = undefined) {
+function _getRangeFromWindowLevels(width, center, Modality = undefined) {
+  // For PET just set the range to 0-5 SUV
+  if (Modality === 'PT') {
+    return { lower: 0, upper: 5 };
+  }
+
  const levelsAreNotNumbers = isNaN(center) || isNaN(width);

  if (levelsAreNotNumbers) {
    return { lower: 0, upper: 512 };
  }

-  // For PET just set the range to 0-5 SUV
-  if (modality === 'PT') {
-    return { lower: 0, upper: 5 };
-  }
-
  return {
    lower: center - width / 2.0,
    upper: center + width / 2.0,
@@ -0,0 +1,3 @@
+.vtk-viewport-handler svg {
+  pointer-events: none;
+}
@@ -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;
@@ -70,12 +70,9 @@ const commandsModule = ({ commandsManager }) => {
    if (cornerstoneElement) {
      const imageId = cornerstoneElement.image.imageId;

-      const { modality } = cornerstone.metaData.get(
-        'generalSeriesModule',
-        imageId
-      );
+      const Modality = cornerstone.metaData.get('Modality', imageId);

-      if (modality !== 'PT') {
+      if (Modality !== 'PT') {
        const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;

        return {
@@ -103,6 +100,9 @@ const commandsModule = ({ commandsManager }) => {
  }

  const actions = {
+    getVtkApis: ({ index }) => {
+      return apis[index];
+    },
    axial: async ({ viewports }) => {
      const api = await _getActiveViewportVTKApi(viewports);

@@ -234,7 +234,7 @@ const commandsModule = ({ commandsManager }) => {
          },
        },
        {
-          // Sagital
+          // Sagittal
          orientation: {
            sliceNormal: [1, 0, 0],
            viewUp: [0, 0, 1],
@@ -266,11 +266,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 +297,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 +346,10 @@ const commandsModule = ({ commandsManager }) => {
      options: {},
      context: 'VIEWER',
    },
+    getVtkApiForViewportIndex: {
+      commandFn: actions.getVtkApis,
+      context: 'VIEWER',
+    },
  };

  return {
@@ -1,42 +1,42 @@
-import * as dcmjs from "dcmjs";
+import * as dcmjs from 'dcmjs';

-import OHIF from "@ohif/core";
-import { api } from "dicomweb-client";
+import OHIF from '@ohif/core';
+import { api } from 'dicomweb-client';

 const { StackManager } = OHIF.utils;

-function getDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
+function getDisplaySet(studies, StudyInstanceUID, displaySetInstanceUID) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );

  const displaySet = study.displaySets.find(set => {
-    return set.displaySetInstanceUid === displaySetInstanceUid;
+    return set.displaySetInstanceUID === displaySetInstanceUID;
  });

  return displaySet;
 }

-function getDisplaySetsBySeries(studies, studyInstanceUid, seriesInstanceUid) {
+function getDisplaySetsBySeries(studies, StudyInstanceUID, SeriesInstanceUID) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );

  return study.displaySets.filter(set => {
-    return set.seriesInstanceUid === seriesInstanceUid;
+    return set.SeriesInstanceUID === SeriesInstanceUID;
  });
 }

-function getCornerstoneStack(studies, studyInstanceUid, displaySetInstanceUid) {
+function getCornerstoneStack(studies, StudyInstanceUID, displaySetInstanceUID) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );

  // Create shortcut to displaySet
  const displaySet = getDisplaySet(
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
+    StudyInstanceUID,
+    displaySetInstanceUID
  );

  // Get stack from Stack Manager
@@ -52,19 +52,19 @@ function getCornerstoneStack(studies, studyInstanceUid, displaySetInstanceUid) {
 function retrieveDicomData(
  studyInstanceUID,
  seriesInstanceUID,
-  sopInstanceUID,
+  sopInstanceUid,
  wadoRoot
 ) {
  const config = {
    url: wadoRoot,
-    headers: DICOMWeb.getAuthorizationHeader()
+    headers: DICOMWeb.getAuthorizationHeader(),
  };

  const dicomWeb = new api.DICOMwebClient(config);
  const options = {
    studyInstanceUID,
    seriesInstanceUID,
-    sopInstanceUID
+    sopInstanceUid,
  };

  return dicomWeb.retrieveInstance(options);
@@ -72,30 +72,26 @@ function retrieveDicomData(

 async function handleSegmentationStorage(
  studies,
-  studyInstanceUid,
-  displaySetInstanceUid
+  StudyInstanceUID,
+  displaySetInstanceUID
 ) {
  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
+    study => study.StudyInstanceUID === StudyInstanceUID
  );
  const displaySet = getDisplaySet(
    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
+    StudyInstanceUID,
+    displaySetInstanceUID
  );

  // TODO: This is terrible but we need to use WADO-RS or we can't retrieve the SEG
  // from google cloud
  const wadoRoot = displaySet.images[0].getData().wadoRoot;

-  const StudyInstanceUID = displaySet.images[0].getStudyInstanceUID();
-  const SeriesInstanceUID = displaySet.images[0].getSeriesInstanceUID();
-  const SOPInstanceUID = displaySet.images[0].getSOPInstanceUID();
-
  const arrayBuffer = await retrieveDicomData(
-    StudyInstanceUID,
-    SeriesInstanceUID,
-    SOPInstanceUID,
+    displaySet.images[0].getStudyInstanceUID(),
+    displaySet.images[0].getSeriesInstanceUID(),
+    displaySet.images[0].getSOPInstanceUID(),
    wadoRoot
  );

@@ -108,16 +104,16 @@ async function handleSegmentationStorage(

  dataset._meta = dcmjs.data.DicomMetaDictionary.namifyDataset(dicomData.meta);

-  const seriesInstanceUid = dataset.ReferencedSeriesSequence.SeriesInstanceUID;
+  const SeriesInstanceUID = dataset.ReferencedSeriesSequence.SeriesInstanceUID;
  const displaySets = getDisplaySetsBySeries(
    studies,
-    studyInstanceUid,
-    seriesInstanceUid
+    StudyInstanceUID,
+    SeriesInstanceUID
  );

  if (displaySets.length > 1) {
    console.warn(
-      "More than one display set with the same seriesInstanceUid. This is not supported yet..."
+      'More than one display set with the same SeriesInstanceUID. This is not supported yet...'
    );
  }

@@ -125,7 +121,7 @@ async function handleSegmentationStorage(
  const imageIds = referenceDisplaySet.images.map(image => image.getImageId());

  if (!results) {
-    throw new Error("Fractional segmentations are not supported");
+    throw new Error('Fractional segmentations are not supported');
  }

  const cachedStack = StackManager.findOrCreateStack(
@@ -137,13 +133,13 @@ async function handleSegmentationStorage(

  return {
    referenceDataObject,
-    labelmapDataObject
+    labelmapDataObject,
  };

  return {
-    studyInstanceUid,
-    displaySetInstanceUid,
-    stack
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    stack,
  };
 }

@@ -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;
				`@@ -0,0 +1 @@`
				See our contributing guidelines at [`https://docs.ohif.org`](https://docs.ohif.org/development/contributing.html)
				`@@ -0,0 +1 @@`
				`module.exports = require("../../babel.config.js");`