chore(release): publish [skip ci]

- @ohif/extension-dicom-segmentation@0.2.5
 - @ohif/extension-vtk@1.5.4
 - @ohif/core@2.9.4
 - @ohif/viewer@3.11.8

.circleci/config.yml

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

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

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

.github/stale.yml

@@ -9,14 +9,18 @@ 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 🎉'
+  - 'IDC:priority'
+  - 'IDC:candidate'
+  - 'IDC:collaboration'
 # Label to use when marking an issue as stale
 staleLabel: 'Stale :baguette_bread:'
 # Comment to post when marking an issue as stale. Set to `false` to disable

.gitignore

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

.vscode/settings.json

@@ -28,5 +28,8 @@
   ],
   "prettier.disableLanguages": ["html"],
   "prettier.endOfLine": "lf",
-  "workbench.colorCustomizations": {}
+  "workbench.colorCustomizations": {},
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

.webpack/webpack.base.js

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

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

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

README.md

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

docs/latest/README.md

@@ -48,7 +48,7 @@ Check out these helpful links:
   -->
 
 <!-- prettier-ignore-start -->
-[ohif-org]: https://www.ohif.org
+[ohif-org]: http://www.ohif.org
 [dicom-web]: https://en.wikipedia.org/wiki/DICOMweb
 [gh-issues]: https://github.com/OHIF/Viewers/issues
 <!-- prettier-ignore-end -->

docs/latest/SUMMARY.md

@@ -1,11 +1,11 @@
 # OHIF Viewers
 
 - [Our Process](our-process.md)
-- [Quick Start](quick-start.md)
 - Development
   - [Getting Started](development/getting-started.md)
   - [Contributing](development/contributing.md)
   - [Continuous Integration](development/continous-integration.md)
+  - [Testing](development/testing.md)
 - [Configuring](configuring/index.md)
   - [Data Source](configuring/data-source.md)
 
@@ -27,10 +27,10 @@
     - [Toolbar](extensions/modules/toolbar.md)
     - [Viewport](extensions/modules/viewport.md)
   - [Contexts](extensions/index.md#contexts)
+  - [ExtensionManager](extensions/index.md#extensionmanager)
   - [OHIF Maintained](extensions/index.md#maintained-extensions)
 - [Services](services/index.md)
   - [Default](services/default/index.md)
-    - [Measurements](services/default/measurements.md)
   - [UI](services/ui/index.md)
     - [Dialog Service](services/ui/ui-dialog-service.md)
     - [Modal Service](services/ui/ui-modal-service.md)

docs/latest/architecture/index.md

@@ -13,7 +13,6 @@ 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)
 
@@ -74,10 +73,10 @@ This diagram is a conceptual illustration of how the Viewer is architected.
 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](../services/default/measurements.md)
+- Managing a study's measurements
 - Managing a study's DICOM metadata
 - [A flexible pattern for extensions](../extensions/index.md)
 - And many others
@@ -99,10 +98,6 @@ application.
 
 [Check out our component library!](https://react.ohif.org/)
 
-## Internationalization (i18n)
-
-...
-
 ## Extensions & Configuration
 
 While OHIF maintains several high value and commonly requested features in its
@@ -120,7 +115,7 @@ the viewer. Some common use cases include:
 We expose common integration points via [extensions](../extensions/index.md) to
 make this possible. The viewer and many of our own extensions also offer
 [configuration][configuration]. For a list of extensions maintained by OHIF,
-[check out this helpful table](../extensions/index.mdl#maintained-extensions).
+[check out this helpful table](../extensions/index.md#maintained-extensions).
 
 If you find yourself thinking "I wish the Viewer could do X", and you can't
 accomplish it with an extension today, create a GitHub issue! We're actively
@@ -147,12 +142,12 @@ you would need to recreate.
   -->
 
 <!-- prettier-ignore-start -->
-[monorepo]: #
+[monorepo]: https://github.com/OHIF/Viewers/issues/768
 [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]: ../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
+[ui-github]: https://github.com/OHIF/Viewers/tree/master/platform/ui
 <!-- prettier-ignore-end -->

docs/latest/configuring/index.md

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

docs/latest/deployment/index.md

@@ -123,14 +123,111 @@ There are two important steps to making sure this setup works:
 Most image archives do not provide either of these features "out of the box".
 It's common to use IIS, Nginx, or Apache to route incoming requests and append
 appropriate headers. You can find an example of this setup in our
-[Nginx + Image Archive Deployment Recipe](deployment/recipes/nginx--image-archive.md).
+[Nginx + Image Archive Deployment Recipe](./recipes/nginx--image-archive.md).
 
 #### What if my archive doesn't support DicomWeb?
 
-> This is possible to do with the OHIF Viewer, but not as straightforward. Look
-> out for documentation on this subject in the near future.
+It's possible to supply all Study data via JSON format, in the event you do not have a DicomWeb endpoint.
+You can host all of the relevant files on any web accessible server (Amazon S3, Azure Blob Storage, Local file server etc.)
+
+This JSON is supplied via the '?url=' query parameter.
+It should reference an endpoint that returns **application/json** formatted text.
+
+If you do not have an API, you can simply return a text file containing the JSON from any web server.
+
+
+You tell the OHIF viewer to use JSON by appending the `'?url='` query to the `/Viewer` route:
+
+eg. `https://my-test-ohif-server/viewer?url=https://my-json-server/study-uid.json`
+
+The returned JSON object must contain a single root object with a 'studies' array.
+
+
+*Sample JSON format:*
+```JSON
+{
+    "studies": [
+      {
+        "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78",
+        "StudyDescription": "BRAIN SELLA",
+        "StudyDate": "20010108",
+        "StudyTime": "120022",
+        "PatientName": "MISTER^MR",
+        "PatientId": "832040",
+        "series": [
+          {
+            "SeriesDescription": "SAG T-1",
+            "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121",
+            "SeriesNumber": 2,
+            "SeriesDate": "20010108",
+            "SeriesTime": "120318",
+            "Modality": "MR",
+            "instances": [
+              {
+                "metadata": {
+                    "Columns": 512,
+                    "Rows": 512,
+                    "InstanceNumber": 3,
+                    "AcquisitionNumber": 0,
+                    "PhotometricInterpretation": "MONOCHROME2",
+                    "BitsAllocated": 16,
+                    "BitsStored": 16,
+                    "PixelRepresentation": 1,
+                    "SamplesPerPixel": 1,
+                    "PixelSpacing": [0.390625, 0.390625],
+                    "HighBit": 15,
+                    "ImageOrientationPatient": [0,1,0,0,0,-1],
+                    "ImagePositionPatient": [11.600000,-92.500000, 98.099998],
+                    "FrameOfReferenceUID": "1.2.840.113619.2.5.1762583153.223134.978956938.470",
+                    "ImageType": ["ORIGINAL","PRIMARY","OTHER"],
+                    "Modality": "MR",
+                    "SOPInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.124",
+                    "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121",
+                    "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78"
+                },
+                "url": "dicomweb://s3.amazonaws.com/lury/MRStudy/1.2.840.113619.2.5.1762583153.215519.978957063.124.dcm"
+             }
+           ]
+         }
+       ]
+     }
+   ]
+}
+```
+More info on this JSON format can be found here [Issue #1500](https://github.com/OHIF/Viewers/issues/1500)
+
+
+**Implementation Notes:**
+
+1. When hosting the viewer, you will also need to host a /viewer route on the server - or the browser may not be able to find the route.
+2. For each instance url (dicom object) in the returned JSON, you must prefix the `url` with `dicomweb:` in order for the cornerstone image loader to retrieve it correctly.
+ eg. `https://image-server/my-image.dcm` ---> `dicomweb:https://image-server/my-image.dcm`
+3. The JSON format above is compatible with >= v3.7.8 of the application. Older versions of the viewer used a different JSON format. As of 20/04/20 the public [https://viewer.ohif.org/] is a pre 3.0 version that does not support this format yet.
+4. The JSON format is case-sensitive. Please ensure you have matched casing with the naturalised Dicom format referenced in [Issue #1500](https://github.com/OHIF/Viewers/issues/1500).
+
+*CORS Issues (Cross-Origin Resource Sharing)*
+
+If you host a JSON API or Images on a different domain from the the app itself, you will likely have CORS issues. This will also happen when testing from Localhost and reaching out to remote servers.
+Even if the domain is the same, different ports, subdomains or protocols (https vs http) will also cause CORS errors.
+You will to need add a configuration on each server hosting these assets to allow your App server origin.
+
+For example:
+
+Lets assume your application is hosted on `https://my-ohif-server.com`.
+
+Your JSON API is hosted on `https://my-json-api.aws.com`
+
+And your images are stored on Amazon S3 at `https://my-s3-bucket.aws.com`
+
+When you first start your application, browsing to `https://my-ohif-server.com/viewer?url=https://my-json-api.aws.com/api/my-json-study-info.json`, you will likely get a CORS error in the browser console as it tries to connect to `https://my-json-api.aws.com`.
+
+Adding a setting on the JSON server to allow the CORS origin = `https://my-ohif-server.com` should solve this.
+
+Next, you will likely get a similar CORS error, as the browser tries to go to `https://my-s3-bucket.aws.com`.
+You will need to go to the S3 bucket configuration, and add a CORS setting to allow origin = `https://my-ohif-server.com`.
+
+Essentially, whenever the application connects to a remote resource, you will need to add the applications url to the allowed CORS Origins on that resource. Adding an origin similar to https://localhost:3000 will also allow for local testing.
 
-...
 
 ### Securing Your Data
 
@@ -166,7 +263,7 @@ window.config = {
 ```
 
 You can find an example of this setup in our
-[User Account Control Deployment Recipe](deployment/recipes/user-account-control.md).
+[User Account Control Deployment Recipe](./recipes/user-account-control.md).
 
 #### Choosing a Flow for the Viewer
 
@@ -183,12 +280,12 @@ many possible configurations, so please don't feel limited to these setups.
 Please feel free to suggest or contribute your own recipes.
 
 - Script Include
-  - [Embedding the Viewer](deployment/recipes/embedded-viewer.md)
+  - [Embedding the Viewer](./recipes/embedded-viewer.md)
 - Stand-Alone
-  - [Build for Production](deployment/recipes/build-for-production.md)
-  - [Static](deployment/recipes/static-assets.md)
-  - [Nginx + Image Archive](deployment/recipes/nginx--image-archive.md)
-  - [User Account Control](deployment/recipes/user-account-control.md)
+  - [Build for Production](./recipes/build-for-production.md)
+  - [Static](./recipes/static-assets.md)
+  - [Nginx + Image Archive](./recipes/nginx--image-archive.md)
+  - [User Account Control](./recipes/user-account-control.md)
 
 <!--
   Links

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

@@ -24,12 +24,12 @@ include tags. Here's how it works:
 </ul>
 
 <ol start="2">
-  <li>Create a JS Object to hold the OHIF Viewer's configuration. Here are some
+  <li>Create a JS Object or Function to hold the OHIF Viewer's configuration. Here are some
    example values that would allow the viewer to hit our public PACS:</li>
 </ol>
 
 ```js
-// Set before importing `ohif-viewer`
+// Set before importing `ohif-viewer` (JS Object)
 window.config = {
   // default: '/'
   routerBasename: '/',
@@ -49,6 +49,9 @@ window.config = {
 };
 ```
 
+To learn more about how you can configure the OHIF Viewer, check out our
+[Configuration Guide](../../configuring/index.md).
+
 <ol start="3"><li>
   Render the viewer in the web page's target <code>div</code>
 </li></ol>
@@ -123,12 +126,39 @@ globally defined styles/scripts.
 > We're trying to embed the OHIF Viewer into an existing React App, but seeing
 > react-dom and react conflicts. What can we do?
 
+If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows:
+```
+import { installViewer } from '@ohif/viewer'
+
+const ohifViewerConfig = window.config // or set it here
+const containerId = 'ohif'
+const componentRenderedOrUpdatedCallback = function() {
+    console.log('OHIF Viewer rendered/updated');
+};
+
+componentDidMount() {
+   installViewer(
+      ohifViewerConfig,
+      containerId,
+      componentRenderedOrUpdatedCallback
+    );
+}
+
+render () {
+   ...
+   //you can render in any element you wish
+   <AnyTag id={containerId}/>
+}
+
+```
+
 `installViewer` is a convenience method that pulls in some dependencies that may
 not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
 which is a react component that takes the `configuration` outlined above as
 props. You can use it as a reusable component, and to avoid `react` version
 conflict issues.
 
+
 <!--
   LINKS
   -->

docs/latest/deployment/recipes/nginx--image-archive.md

@@ -49,9 +49,7 @@ We can solve this one of two ways:
 1. Have our Image Archive located at the same domain as our Web App
 2. Add appropriate `Access-Control-Allow-*` HTTP headers
 
-This solution uses the first approach, but you can see an example of the second
-in the `docker-compose` bundled with this project for local development:
-[HERE](https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/Nginx-Orthanc/docker-compose.yml)
+**This solution uses the first approach.**
 
 You can read more about CORS in this Medium article: [Understanding
 CORS][understanding-cors]
@@ -121,7 +119,10 @@ likely want to update:
 
 #### OHIF Viewer
 
-The OHIF Viewer's configuration is imported from a static `.js` file. The configuration we use is set to a specific file when we build the viewer, and determined by the env variable: `APP_CONFIG`. You can see where we set its value in the `dockerfile` for this solution:
+The OHIF Viewer's configuration is imported from a static `.js` file. The
+configuration we use is set to a specific file when we build the viewer, and
+determined by the env variable: `APP_CONFIG`. You can see where we set its value
+in the `dockerfile` for this solution:
 
 `ENV APP_CONFIG=config/docker_openresty-orthanc.js`
 
@@ -138,11 +139,11 @@ Viewer's configuration, you can run:
 
 All other files are found in: `/docker/OpenResty-Orthanc/`
 
-| Service           | Configuration                                  | Docs                                        |
-| ----------------- | ---------------------------------------------- | ------------------------------------------- |
-| OHIF Viewer       | [dockerfile][dockerfile] / [config.js][config] | You're reading them now!                    |
-| OpenResty (Nginx) | [`/nginx.conf`][config-nginx]                  | [lua-resty-openidc][lua-resty-openidc-docs] |
-| Orthanc           | [`/orthanc.json`][config-orthanc]              | [Here][orthanc-docs]                        |
+| Service           | Configuration                     | Docs                                        |
+| ----------------- | --------------------------------- | ------------------------------------------- |
+| OHIF Viewer       | [dockerfile][dockerfile]          | You're reading them now!                    |
+| OpenResty (Nginx) | [`/nginx.conf`][config-nginx]     | [lua-resty-openidc][lua-resty-openidc-docs] |
+| Orthanc           | [`/orthanc.json`][config-orthanc] | [Here][orthanc-docs]                        |
 
 ## Next Steps
 
@@ -218,10 +219,11 @@ following resources helpful:
 - [OpenResty Guide](http://www.staticshin.com/programming/definitely-an-open-resty-guide/)
 - [Lua Ngx API](https://openresty-reference.readthedocs.io/en/latest/Lua_Nginx_API/)
 
-For a different take on this setup, check out the repository one of our
-community members put together:
+For a different take on this setup, check out the repositories our community
+members put together:
 
 - [mjstealey/ohif-orthanc-dimse-docker](https://github.com/mjstealey/ohif-orthanc-dimse-docker)
+- [trypag/ohif-orthanc-postgres-docker](https://github.com/trypag/ohif-orthanc-postgres-docker)
 
 <!--
   Links
@@ -234,8 +236,7 @@ community members put together:
 [orthanc-docs]: http://book.orthanc-server.com/users/configuration.html#configuration
 [lua-resty-openidc-docs]: https://github.com/zmartzone/lua-resty-openidc
 <!-- SRC -->
-[config]: #
-[dockerfile]: #
-[config-nginx]: #
-[config-orthanc]: #
+[dockerfile]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc/dockerfile
+[config-nginx]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc/config/nginx.conf
+[config-orthanc]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc/config/orthanc.json
 <!-- prettier-ignore-end -->

docs/latest/deployment/recipes/user-account-control.md

@@ -122,7 +122,10 @@ likely want to update:
 
 #### OHIF Viewer
 
-The OHIF Viewer's configuration is imported from a static `.js` file. The configuration we use is set to a specific file when we build the viewer, and determined by the env variable: `APP_CONFIG`. You can see where we set its value in the `dockerfile` for this solution:
+The OHIF Viewer's configuration is imported from a static `.js` file. The
+configuration we use is set to a specific file when we build the viewer, and
+determined by the env variable: `APP_CONFIG`. You can see where we set its value
+in the `dockerfile` for this solution:
 
 `ENV APP_CONFIG=config/docker_openresty-orthanc-keycloak.js`
 
@@ -146,8 +149,8 @@ All other files are found in: `/docker/OpenResty-Orthanc-Keycloak/`
 | Orthanc           | [`/orthanc.json`][config-orthanc]                | [Here][orthanc-docs]                        |
 | Keycloak          | [`/ohif-keycloak-realm.json`][config-keycloak]\* |                                             |
 
-- \* These are the seed values for Keycloak. They can be manually updated at
-  `http://127.0.0.1/auth/admin`
+\* These are the seed values for Keycloak. They can be manually updated at
+`http://127.0.0.1/auth/admin`
 
 #### Keycloak Themeing
 
@@ -261,12 +264,12 @@ for OAuth:
 
 - [Diagrams of OpenID Connect Flows](https://medium.com/@darutk/diagrams-of-all-the-openid-connect-flows-6968e3990660)
 - [KeyCloak: OpenID Connect Flows](https://www.keycloak.org/docs/latest/securing_apps/index.html#authorization-code)
-  - [Good description on SSO Protocols](https://www.keycloak.org/docs/2.5/server_admin/topics/sso-protocols/oidc.html)
 
-For a different take on this setup, check out the repository one of our
-community members put together:
+For a different take on this setup, check out the repositories our community
+members put together:
 
 - [mjstealey/ohif-orthanc-dimse-docker](https://github.com/mjstealey/ohif-orthanc-dimse-docker)
+- [trypag/ohif-orthanc-postgres-docker](https://github.com/trypag/ohif-orthanc-postgres-docker)
 
 <!--
   Links
@@ -278,8 +281,8 @@ community members put together:
 [lua-resty-openidc-docs]: https://github.com/zmartzone/lua-resty-openidc
 <!-- SRC -->
 [config]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/src/config.js
-[dockerfile]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/.recipes
-[config-nginx]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/.recipes
-[config-orthanc]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/.recipes
-[config-keycloak]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/.recipes
+[dockerfile]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc-Keycloak/dockerfile
+[config-nginx]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc-Keycloak/config/nginx.conf
+[config-orthanc]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc-Keycloak/config/orthanc.json
+[config-keycloak]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc-Keycloak/config/ohif-keycloak-realm.json
 <!-- prettier-ignore-end -->

docs/latest/development/contributing.md

@@ -114,8 +114,8 @@ the tips above will help ensure your changes are reviewed.
 
 ## Testing contribution pull requests
 
-OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and
-available for testing.
+OHIF uses [netlify](https://www.netlify.com/) so that pull requests are
+autogenerated and available for testing.
 
 For example, [this url][example-url] allows you to test [pull request 237, the
 request that created this FAQ entry,][pr-237] using data pulled from Amazon S3.

docs/latest/development/testing.md

@@ -132,7 +132,7 @@ feature `X` or scenario `Y`? Open an issue and let's discuss.
 [flow-org]: https://flow.org/
 <!-- Talks -->
 [assert-js-talks]: https://www.youtube.com/playlist?list=PLZ66c9_z3umNSrKSb5cmpxdXZcIPNvKGw
-[kent-talk]: https://www.youtube.com/watch?list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf
+[kent-talk]: https://www.youtube.com/watch?v=Fha2bVoC8SE
 [gleb-talk]: https://www.youtube.com/watch?v=5FnalKRjpZk
 [kent-blog]: https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests
 <!-- Images -->

docs/latest/extensions/_maintained-extensions-table.md

@@ -31,6 +31,7 @@
             </td>
             <td>Viewport, Toolbar</td>
         </tr>
+        <!-- dicom-html -->
         <tr>
             <td>
                 <a href="https://www.npmjs.com/package/@ohif/extension-dicom-html">DICOM HTML</a>
@@ -40,6 +41,7 @@
             </td>
             <td>Viewport, SopClassHandler</td>
         </tr>
+        <!-- dicom-pdf -->
         <tr>
             <td>
                 <a href="https://www.npmjs.com/package/@ohif/extension-dicom-pdf">DICOM PDF</a>
@@ -49,6 +51,7 @@
             </td>
             <td>Viewport, SopClassHandler</td>
         </tr>
+        <!-- dicom-microscopy -->
         <tr>
             <td>
                 <a href="https://www.npmjs.com/package/@ohif/extension-dicom-microscopy">DICOM Microscopy</a>
@@ -58,5 +61,15 @@
             </td>
             <td>Viewport, SopClassHandler</td>
         </tr>
+        <!-- dicom-segmentation -->
+        <tr>
+            <td>
+                <a href="https://www.npmjs.com/package/@ohif/extension-dicom-segmentation">DICOM Segmentation</a>
+            </td>
+            <td>
+                Renders segmentation images for a <a href="https://github.com/OHIF/Viewers/blob/master/extensions/dicom-segmentation/src/OHIFDicomSegSopClassHandler.js#L5-L7">specific SopClassUID</a>.
+            </td>
+            <td>Panel, Toolbar</td>
+        </tr>
     </tbody>
 </table>

docs/latest/extensions/index.md

@@ -8,12 +8,15 @@
   - [Modules](#modules)
   - [Contexts](#contexts)
 - [Consuming Extensions](#consuming-extensions)
+  - [Extension Manager](#extensionmanager)
 - [Maintained Extensions](#maintained-extensions)
 
 ## Overview
 
 We use extensions to help us isolate and package groups of related features.
-Extensions provide functionality, ui components, and new behaviors.
+Extensions provide functionality, ui components, and new behaviors. Ideally,
+they're built in a way that allows them to extend entirely different
+implementations of the `@ohif/viewer` project.
 
 <div style="text-align: center;">
   <a href="/assets/img/extensions-diagram.png">
@@ -46,9 +49,8 @@ Practical examples of extensions include:
 
 ### Extension Skeleton
 
-An extension is a plain JavaScript object has an `id` property, and one or more
-"getModuleFunctions" and/or lifecycle hooks. You can read more about
-[lifecycle hooks](#lifecycle-hooks) and [modules](#modules) further down.
+An extension is a plain JavaScript object that has an `id` property, and one or
+more [modules](#modules) and/or [lifecycle hooks](#lifecycle-hooks).
 
 ```js
 // prettier-ignore
@@ -72,12 +74,19 @@ export default {
 ### Registering an Extension
 
 There are two different ways to register and configure extensions: At
-[runtime](#runtime-extensions) and at [build time](#bundled-extensions).
+[runtime](#registering-at-runtime) and at
+[build time](#registering-at-build-time).
 
 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](../viewer/configuration.md) at
+startup. The schema for that file includes an `Extensions` key that supports an
+array of extensions to register.
+
 ```js
 // prettier-ignore
 const config = {
@@ -91,19 +100,13 @@ const config = {
 }
 ```
 
-#### 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.
-
 #### 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 advantages afforded to us by modern tooling:
 
-- Code Splitting
+- Code Splitting (dynamic imports)
 - Tree Shaking
 - Dependency deduplication
 
@@ -141,6 +144,8 @@ differently.
 | [Toolbar](./modules/toolbar.md)                   | Adds buttons or custom components to the toolbar                 | Toolbar button, nested buttons, custom            |
 | [Viewport](./modules/viewport.md)                 | Adds a component responsible for rendering a "DisplaySet"        | `<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
@@ -153,9 +158,67 @@ An extension module can use these to say "Only show this Toolbar Button if the
 active viewport is a Cornerstone viewport." This helps us use the appropriate UI
 and behaviors depending on the current contexts.
 
+For example, if we have hotkey that "rotates the active viewport", each Viewport
+module that supports this behavior can add a command with the same name, scoped
+to the appropriate context. When the `command` is fired, the "active contexts"
+are used to determine the appropriate implementation of the rotate behavior.
+
 ## Consuming Extensions
 
-...
+We consume extensions, via the `ExtensionManager`, in our `@ohif/viewer`
+project.
+
+```js
+const extensionManager = new ExtensionManager({
+  commandsManager,
+  servicesManager,
+});
+
+// prettier-ignore
+extensionManager.registerExtensions([ /** **/ ]);
+```
+
+The `@ohif/viewer` project handles data fetching, basic routing, wires up UI
+services, and is the home to the more bespoke application logic that doesn't
+make as much sense to make reusable.
+
+Long-term, replacing the `@ohif/viewer` application and consuming extensions
+(and the `ExtensionManager`) in your own project is the ideal path for
+applications requiring a high degree of customization that can't be achieved
+with current theming, configuration, extension, and services support.
+
+If you're not sure how to achieve your goals with the extensibility available
+today, create a GitHub issue!
+
+### `ExtensionManager`
+
+The `ExtensionManager` is a class made available to us via the `@ohif/core`
+project (platform/core). Our application instantiates a single instance of it,
+and provides a `ServicesManager` and `CommandsManager` along with the
+application's configuration through the appConfig key (optional).
+
+```js
+const commandsManager = new CommandsManager();
+const servicesManager = new ServicesManager();
+const extensionManager = new ExtensionManager({
+  commandsManager,
+  servicesManager,
+  appConfig,
+});
+```
+
+The `ExtensionManager` only has a few public members:
+
+- `registerExtension` - Registers a single extension
+- `registerExtensions` - Registers an array of extensions
+- `modules` - An object containing registered extensions by `MODULE_TYPE`
+
+During registration, lifecycle hooks and modules have access to the extension's
+config, the application's config and `ExtensionManager`'s `ServicesManager` and
+`CommandsManager` instances.
+
+Our `@ohif/viewer` uses the `modules` member to access registered extensions at
+appropriate places in our application.
 
 ## Maintained Extensions
 

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

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

docs/latest/extensions/modules/commands.md

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

docs/latest/extensions/modules/panel.md

@@ -1,6 +1,20 @@
 # 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';
@@ -10,15 +24,28 @@ export default {
 
   /**
    * @param {object} params
-   * @param {object} params.servicesManager
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
    */
-  getPanelModule({ servicesManager }) {
+  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: [
@@ -27,7 +54,7 @@ export default {
           component: MyComponent,
         },
       ],
-      defaultContext: ['VIEWER'],
+      defaultContext: ['ROUTE:VIEWER'],
     };
   },
 };

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

@@ -1,6 +1,37 @@
 # Module: SOP Class Handler
 
-...
+An extension can register a [SOP Class][sop-class-link] Handler Module by
+defining a `getSopClassHandlerModule` method. The [SOP Class][sop-class-link]
+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 = {
@@ -8,29 +39,67 @@ const SOP_CLASS_UIDS = {
   ENHANCED_SR: '1.2.840.10008.5.1.4.1.1.88.22',
 };
 
-const sopClassHandlerModule = {
-  id: 'OHIFDicomHtmlSopClassHandler',
-  sopClassUids: Object.values(SOP_CLASS_UIDS),
+export default {
+  id: 'example-sop-class-handler-module',
 
-  /**
-   * @param {object} series -
-   * @param {object} study -
-   * @param {object} dicomWebClient -
-   * @param {object} authorizationHeaders -
-   */
-  getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
-    const instance = series.getFirstInstance();
+/**
+ * @param {object} params
+ * @param {ServicesManager} params.servicesManager
+ * @param {CommandsManager} params.commandsManager
+ */
+getSopClassHandlerModule({ servicesManager, commandsManager }) {
+  return {
+    id: 'OHIFDicomHtmlSopClassHandler',
+    sopClassUIDs: Object.values(SOP_CLASS_UIDS),
 
-    return {
-      plugin: 'html',
-      displaySetInstanceUid: 0,
-      wadoRoot: study.getData().wadoRoot,
-      wadoUri: instance.getData().wadouri,
-      sopInstanceUid: instance.getSOPInstanceUID(),
-      seriesInstanceUid: series.getSeriesInstanceUID(),
-      studyInstanceUid: study.getStudyInstanceUID(),
-      authorizationHeaders,
-    };
-  },
+    /**
+     * @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,
+      };
+    },
+  }
 };
 ```
+
+### More examples :
+
+- [Dicom-HTML SOP][dicom-html-sop]
+- [Dicom-PDF SOP][dicom-pdf-sop]
+- [Dicom-Microscopy SOP][dicom-micro-sop]
+- [Dicom-Segmentation SOP][dicom-seg-sop]
+
+## `@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`.
+
+<!-- prettier-ignore-start -->
+[sop-class-link]: http://dicom.nema.org/dicom/2013/output/chtml/part04/sect_B.5.html
+[dicom-html-sop]: https://github.com/OHIF/Viewers/blob/master/extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js#L4-L12
+[dicom-pdf-sop]: https://github.com/OHIF/Viewers/blob/master/extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js#L4-L6
+[dicom-micro-sop]: https://github.com/OHIF/Viewers/blob/master/extensions/dicom-microscopy/src/DicomMicroscopySopClassHandler.js#L5-L7
+[dicom-seg-sop]: https://github.com/OHIF/Viewers/blob/master/extensions/dicom-segmentation/src/OHIFDicomSegSopClassHandler.js#L5-L7
+<!-- prettier-ignore-end -->

docs/latest/extensions/modules/toolbar.md

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

docs/latest/extensions/modules/viewport.md

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

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

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

docs/latest/our-process.md

@@ -75,7 +75,7 @@ items to our ["Active Development" GitHub Project Board][gh-board]. Items on
 this project board are either in active development by Core Team members, or
 queued up for development as in-progress items are completed.
 
-> :pencil: Want to contribute but not sure where to start? Check out [Up for
+> 🖋 Want to contribute but not sure where to start? Check out [Up for
 > grabs][label-grabs] issues and our [Contributing
 > documentation][contributing-docs]
 
@@ -156,5 +156,5 @@ addressed and a Stable version is released.
 [ohif-prod]: https://viewer.ohif.org
 [gh-board]: https://github.com/OHIF/Viewers/projects/4
 [label-grabs]: https://github.com/OHIF/Viewers/issues?q=is%3Aissue+is%3Aopen+label%3A%22Up+For+Grabs+%3Araising_hand_woman%3A%22
-[contributing-docs]: https://docs.ohif.org/contributing/
+[contributing-docs]: ./development/contributing.md
 <!-- prettier-ignore-end -->

docs/latest/services/index.md

@@ -62,7 +62,7 @@ able to fail or be removed. Related patterns that may reduce coupling include:
   -->
 
 <!-- prettier-ignore-start -->
-[commands]: #/
+[commands]: ../extensions/modules/commands.md
 [core-services]: https://github.com/OHIF/Viewers/tree/master/platform/core/src/services
 [services-manager]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/ServicesManager.js
 [cross-cutting-concerns]: https://en.wikipedia.org/wiki/Cross-cutting_concern

docs/latest/services/ui/index.md

@@ -2,8 +2,8 @@
 
 - [Overview](#overview)
 - [Example](#example)
-- [Tips & Tricks](#/)
-- [Maintained Services](#/)
+- [Tips & Tricks](#tips--tricks)
+- [Maintained Services](#maintained-services)
 
 ## Overview
 
@@ -43,7 +43,7 @@ translate to in practice?
 
 ```js
 // In the application
-const UINotificationService = createUINotificationService();
+import UINotificationService from '@ohif/core';
 const servicesManager = new ServicesManager();
 
 servicesManager.registerService(UINotificationService);

docs/latest/viewer/configuration.md

@@ -1,3 +1,119 @@
 # 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: '/',
+  /**
+   * "White Labeling" is used to change the branding, look, and feel of the OHIF
+   * Viewer. These settings, and the color variables that are used by our components,
+   * are the easiest way to rebrand the application.
+   *
+   * More extensive changes are made possible through swapping out the UI library,
+   * Viewer project, or extensions.
+   */
+  whiteLabeling: {
+    /* Optional: Should return a React component to be rendered in the "Logo" section of the application's Top Navigation bar */
+    createLogoComponentFn: function(React) {
+      return React.createElement('a', {
+        target: '_self',
+        rel: 'noopener noreferrer',
+        className: 'header-brand',
+        href: '/',
+        style: {
+          display: 'block',
+          textIndent: '-9999px',
+          background: 'url(/svg-file-hosted-at-domain-root.svg)',
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          width: '200px',
+        },
+      });
+    },
+  },
+  /**
+   * Internally, the OHIF Viewer fetches data primarily with the
+   * `cornerstoneWADOImageLoader` and the `DICOMWebClient`. If either of these
+   * receive a non-200 response, this method allows you to handle that error.
+   *
+   * Common use cases include:
+   * - Showing a notification with the UINotificationService
+   * - Redirecting the user
+   * - Refreshing an auth token
+   *
+   * @param {Object} error - JS new Error()
+   * @param {XMLHttpRequest} error.request - The XHR request that's onreadystate change triggered this callback
+   * @param {string} error.response - The XHR's response property
+   * @param {number} error.status - The XHR's status property
+   */
+  httpErrorHandler: error => {
+    const { request: xhr, response, status } = err;
+    const { responseType, statusText } = xhr;
+
+    // In local files, status is 0 upon success in Firefox
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      console.log(statusText, response, responseType);
+    } else {
+      console.warn('Likely CORS error');
+    }
+  },
+  extensions: [],
+  showStudyList: true,
+  filterQueryParam: false,
+  servers: {
+    dicomWeb: [
+      {
+        name: 'DCM4CHEE',
+        wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
+        qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
+        wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
+        qidoSupportsIncludeField: true,
+        imageRendering: 'wadors',
+        thumbnailRendering: 'wadors',
+        enableStudyLazyLoad: true,
+      },
+    ],
+  },
+  // Supported Keys: https://craig.is/killing/mice
+  hotkeys: [
+    { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
+    { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
+    { commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
+    {
+      commandName: 'flipViewportVertical',
+      label: 'Flip Horizontally',
+      keys: ['h'],
+    },
+    {
+      commandName: 'flipViewportHorizontal',
+      label: 'Flip Vertically',
+      keys: ['v'],
+    },
+  ],
+  /* Configuration passed to the bundled cornerstone extension
+   *
+   * The cornerstone extension is currently tightly coupled to the platform.
+   * Until we're able to decouple it, this key will serve as a workaround to
+   * pass it configuration.
+   */
+  cornerstoneExtensionConfig: {
+    /* Whether to show/hide annotation "handles" */
+    hideHandles: true,
+  },
+};
+```
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[config-dir]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config
+<!-- prettier-ignore-end -->

docs/latest/viewer/environment-variables.md

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

docs/latest/viewer/internationalization.md

@@ -135,7 +135,7 @@ console.log(T('$t(Common:Play) my translated text'));
 
 # Main Concepts While Translating
 
-## - Namespaces
+## Namespaces
 
 Namespaces are being used to organize translations in smaller portions, combined
 semantically or by use. Each `.json` file inside `@ohif/i18n` npm package
@@ -157,7 +157,7 @@ NameSpace, like this following example getting data from `Common` NameSpace:
 $t(Common:Reset)
 ```
 
-## - Extending Languages in @ohif/i18n
+## Extending Languages in @ohif/i18n
 
 Sometimes, even using the same language, some nouns or jargons can change
 according to the country, states or even from Hospital to Hospital.
@@ -212,7 +212,7 @@ object like this:
 Please check the `index.js` files inside locales folder for an example of this
 exporting structure.
 
-### - Extending languages dynamically
+### Extending languages dynamically
 
 You have access to the i18next instance, so you can use the
 [addResourceBundle](https://www.i18next.com/how-to/add-or-load-translations#add-after-init)
@@ -314,4 +314,4 @@ REACT_APP_I18N_DEBUG=true yarn run dev
 ### Contributing with new languages
 
 Contributions of any kind are welcome! Please check the
-[instructions](https://docs.ohif.org/contributing.html).
+[instructions](../development/contributing.md).

docs/latest/viewer/themeing.md

@@ -66,11 +66,11 @@ open to pull requests and discussion issues.
 
 Current white-labeling options are limited. We expose the ability to replace the
 "Logo" section of the application with a custom "Logo" component. You can do
-this by adding a `whiteLabelling` key to your
+this by adding a `whiteLabeling` key to your
 [configuration file](./configuration.md).
 
 ```js
-function RadicalImagingLogo() {
+function RadicalImagingLogo(React) {
   return React.createElement(
     'a',
     {
@@ -83,8 +83,8 @@ function RadicalImagingLogo() {
   );
 }
 
-props.whiteLabelling = {
-  logoComponent: RadicalImagingLogo(),
+props.whiteLabeling = {
+  createLogoComponentFn: RadicalImagingLogo,
 };
 ```
 

docs/latest/yarn.lock

@@ -20,10 +20,10 @@ abbrev@~1.0.9:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
   integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=
 
-agent-base@4, agent-base@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
-  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+agent-base@4, agent-base@^4.1.0, agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
   dependencies:
     es6-promisify "^5.0.0"
 
@@ -773,9 +773,9 @@ err-code@^1.0.0:
     prr "~1.0.1"
 
 es6-promise@^4.0.3:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.6.tgz#b685edd8258886365ea62b57d30de28fadcd974f"
-  integrity sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
 
 es6-promisify@^5.0.0:
   version "5.0.0"
@@ -1289,11 +1289,11 @@ http-signature@~1.2.0:
     sshpk "^1.7.0"
 
 https-proxy-agent@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
-  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
   dependencies:
-    agent-base "^4.1.0"
+    agent-base "^4.3.0"
     debug "^3.1.0"
 
 humanize-ms@^1.2.1:
@@ -1807,11 +1807,16 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-ms@^2.0.0, ms@^2.1.1:
+ms@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 mute-stream@~0.0.4:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"

docs/v1/lesion-tracker/audit-trail.md

@@ -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)

docs/v1/lesion-tracker/study-and-timepoint-management.md

@@ -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)
+
 ...

extensions/_example/src/index.js

@@ -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: [

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,230 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.1...@ohif/extension-cornerstone@2.7.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [2.7.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.0...@ohif/extension-cornerstone@2.7.1) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [2.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.6.1...@ohif/extension-cornerstone@2.7.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [2.6.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.6.0...@ohif/extension-cornerstone@2.6.1) (2020-04-23)
+
+
+### Bug Fixes
+
+* 🐛 Multiframe fix ([#1661](https://github.com/OHIF/Viewers/issues/1661)) ([7120561](https://github.com/OHIF/Viewers/commit/71205618ecb8b592247c5acb32284bfe7e18fce5))
+
+
+
+
+
+# [2.6.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.5.2...@ohif/extension-cornerstone@2.6.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
+## [2.5.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.5.1...@ohif/extension-cornerstone@2.5.2) (2020-04-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.5.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.5.0...@ohif/extension-cornerstone@2.5.1) (2020-04-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.4.3...@ohif/extension-cornerstone@2.5.0) (2020-03-13)
+
+
+### Features
+
+* Segmentations Settings UI - Phase 1 [#1391](https://github.com/OHIF/Viewers/issues/1391) ([#1392](https://github.com/OHIF/Viewers/issues/1392)) ([e8842cf](https://github.com/OHIF/Viewers/commit/e8842cf8aebde98db7fc123e4867c8288552331f)), closes [#1423](https://github.com/OHIF/Viewers/issues/1423)
+
+
+
+
+
+## [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

extensions/cornerstone/README.md

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

extensions/cornerstone/babel.config.js

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

extensions/cornerstone/jest.config.js

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

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "1.7.2",
+  "version": "2.7.2",
   "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-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
+    "cornerstone-tools": "4.12.5",
+    "cornerstone-wado-image-loader": "^3.1.0",
+    "dcmjs": "^0.12.3",
     "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.8"
   }
 }

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -4,28 +4,10 @@ import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
-import handleSegmentationStorage from './handleSegmentationStorage.js';
+import debounce from 'lodash.debounce';
 
 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',
-};
-
-const specialCaseHandlers = {};
-specialCaseHandlers[
-  SOP_CLASSES.SEGMENTATION_STORAGE
-] = handleSegmentationStorage;
-
 class OHIFCornerstoneViewport extends Component {
   state = {
     viewportData: null,
@@ -58,34 +40,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 +75,7 @@ class OHIFCornerstoneViewport extends Component {
     }
 
     const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUid === displaySetInstanceUid;
+      return set.displaySetInstanceUID === displaySetInstanceUID;
     });
 
     if (!displaySet) {
@@ -107,17 +89,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,44 +113,26 @@ class OHIFCornerstoneViewport extends Component {
 
   getViewportData = async (
     studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopClassUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPInstanceUID,
     frameIndex
   ) => {
     let viewportData;
 
-    switch (sopClassUid) {
-      case SOP_CLASSES.SEGMENTATION_STORAGE:
-        const specialCaseHandler =
-          specialCaseHandlers[SOP_CLASSES.SEGMENTATION_STORAGE];
+    const stack = OHIFCornerstoneViewport.getCornerstoneStack(
+      studies,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPInstanceUID,
+      frameIndex
+    );
 
-        viewportData = await specialCaseHandler(
-          studies,
-          studyInstanceUid,
-          displaySetInstanceUid,
-          sopInstanceUid,
-          frameIndex
-        );
-        break;
-      default:
-        const stack = OHIFCornerstoneViewport.getCornerstoneStack(
-          studies,
-          studyInstanceUid,
-          displaySetInstanceUid,
-          sopInstanceUid,
-          frameIndex
-        );
-
-        viewportData = {
-          studyInstanceUid,
-          displaySetInstanceUid,
-          stack,
-        };
-
-        break;
-    }
+    viewportData = {
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      stack,
+    };
 
     return viewportData;
   };
@@ -179,31 +140,28 @@ 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];
-
     this.getViewportData(
       studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUid,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPInstanceUID,
       frameIndex
     ).then(viewportData => {
       this.setState({
@@ -217,13 +175,13 @@ class OHIFCornerstoneViewport extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { studies, displaySet } = this.props.viewportData;
+    const { displaySet } = this.props.viewportData;
     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,19 +206,36 @@ 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,
+          })
+        );
       });
     }
 
+    const debouncedNewImageHandler = debounce(({ currentImageIdIndex, sopInstanceUid }) => {
+      const { displaySet } = this.props.viewportData;
+      const { StudyInstanceUID } = displaySet;
+      if (currentImageIdIndex > 0) {
+        this.props.onNewImage({
+          StudyInstanceUID,
+          SOPInstanceUID: sopInstanceUid,
+          frameIndex: currentImageIdIndex,
+          activeViewportIndex: viewportIndex,
+        });
+      }
+    }, 700);
+
     return (
       <>
         <ConnectedCornerstoneViewport
           viewportIndex={viewportIndex}
           imageIds={imageIds}
           imageIdIndex={currentImageIdIndex}
+          onNewImage={debouncedNewImageHandler}
           // ~~ Connected (From REDUX)
           // frameRate={frameRate}
           // isPlaying={false}

extensions/cornerstone/src/asyncComponent.js

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

extensions/cornerstone/src/commandsModule.js

@@ -2,10 +2,14 @@ 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');
 
+const { studyMetadataManager } = OHIF.utils;
+const { setViewportSpecificData } = OHIF.redux.actions;
+
 const commandsModule = ({ servicesManager }) => {
   const actions = {
     rotateViewport: ({ viewports, rotation }) => {
@@ -73,10 +77,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 +148,160 @@ 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);
+      }
+    },
+    jumpToImage: ({
+      StudyInstanceUID,
+      SOPInstanceUID,
+      frameIndex,
+      activeViewportIndex
+    }) => {
+      const study = studyMetadataManager.get(StudyInstanceUID);
+
+      const displaySet = study.findDisplaySet(ds => {
+        return ds.images && ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
+      });
+
+      displaySet.SOPInstanceUID = SOPInstanceUID;
+      displaySet.frameIndex = frameIndex;
+
+      window.store.dispatch(setViewportSpecificData(activeViewportIndex, displaySet));
+
+      cornerstone.getEnabledElements().forEach(enabledElement => {
+        cornerstone.updateImage(enabledElement.element);
+      });
+    }
   };
 
   const definitions = {
+    jumpToImage: {
+      commandFn: actions.jumpToImage,
+      storeContexts: [],
+      options: {},
+    },
+    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 +372,28 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: ['viewports'],
       options: {},
     },
-    // TODO: First/Last image
-    // Next/Previous series/DisplaySet
-    nextViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: { direction: 1 },
-    },
-    previousViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: { direction: -1 },
-    },
     // TOOLS
     setToolActive: {
       commandFn: actions.setToolActive,
       storeContexts: [],
       options: {},
     },
+    setZoomTool: {
+      commandFn: actions.setToolActive,
+      storeContexts: [],
+      options: { toolName: 'Zoom' },
+    },
+    setCornerstoneLayout: {
+      commandFn: actions.setCornerstoneLayout,
+      storeContexts: [],
+      options: {},
+      context: 'VIEWER',
+    },
+    setWindowLevel: {
+      commandFn: actions.setWindowLevel,
+      storeContexts: ['viewports'],
+      options: {},
+    },
   };
 
   return {

extensions/cornerstone/src/handleSegmentationStorage.js

@@ -1,128 +0,0 @@
-import * as dcmjs from 'dcmjs';
-
-import OHIF from '@ohif/core';
-import cornerstone from 'cornerstone-core';
-import cornerstoneTools from 'cornerstone-tools';
-
-const { StackManager, DicomLoaderService } = OHIF.utils;
-
-function getDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
-  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
-  );
-
-  const displaySet = study.displaySets.find(set => {
-    return set.displaySetInstanceUid === displaySetInstanceUid;
-  });
-
-  return displaySet;
-}
-
-function getDisplaySetsBySeries(studies, studyInstanceUid, seriesInstanceUid) {
-  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
-  );
-
-  return study.displaySets.filter(set => {
-    return set.seriesInstanceUid === seriesInstanceUid;
-  });
-}
-
-function parseSeg(arrayBuffer, imageIds) {
-  return dcmjs.adapters.Cornerstone.Segmentation.generateToolState(
-    imageIds,
-    arrayBuffer,
-    cornerstone.metaData
-  );
-}
-
-function addSegMetadataToCornerstoneToolState(
-  segMetadata,
-  toolState,
-  displaySetInstanceUid
-) {
-  cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
-    toolState
-  );
-
-  const brushModule = cornerstoneTools.store.modules.brush;
-
-  for (let i = 0; i < segMetadata.length; i++) {
-    brushModule.setters.metadata(displaySetInstanceUid, i, segMetadata[i]);
-  }
-}
-
-async function handleSegmentationStorage(
-  studies,
-  studyInstanceUid,
-  displaySetInstanceUid
-) {
-  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
-  );
-  const displaySet = getDisplaySet(
-    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
-  );
-
-  const arrayBuffer = await DicomLoaderService.findDicomDataPromise(
-    displaySet,
-    studies
-  );
-  const dicomData = dcmjs.data.DicomMessage.readFile(arrayBuffer);
-  const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
-    dicomData.dict
-  );
-
-  dataset._meta = dcmjs.data.DicomMetaDictionary.namifyDataset(dicomData.meta);
-
-  const seriesInstanceUid = dataset.ReferencedSeriesSequence.SeriesInstanceUID;
-  const displaySets = getDisplaySetsBySeries(
-    studies,
-    studyInstanceUid,
-    seriesInstanceUid
-  );
-
-  if (displaySets.length > 1) {
-    console.warn(
-      'More than one display set with the same seriesInstanceUid. This is not supported yet...'
-    );
-  }
-
-  const referenceDisplaySet = displaySets[0];
-  const imageIds = referenceDisplaySet.images.map(image => image.getImageId());
-  const results = parseSeg(arrayBuffer, imageIds);
-
-  if (!results) {
-    throw new Error('Fractional segmentations are not supported');
-  }
-
-  const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
-  const { setters } = cornerstoneTools.getModule('segmentation');
-
-  setters.labelmap3DByFirstImageId(
-    imageIds[0],
-    labelmapBuffer,
-    0, // TODO -> Can define a color LUT based on colors in the SEG later.
-    segMetadata,
-    imageIds.length,
-    segmentsOnFrame
-  );
-
-  const cachedStack = StackManager.findOrCreateStack(
-    study,
-    referenceDisplaySet
-  );
-  const stack = Object.assign({}, cachedStack);
-
-  stack.currentImageIdIndex = 0;
-
-  return {
-    studyInstanceUid,
-    displaySetInstanceUid,
-    stack,
-  };
-}
-
-export default handleSegmentationStorage;

extensions/cornerstone/src/index.js

@@ -1,14 +1,20 @@
+import React from 'react';
 import init from './init.js';
-import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
 import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 
-const OHIFCornerstoneViewport = asyncComponent(() =>
-  import(
-    /* webpackChunkName: "OHIFCornerstoneViewport" */ './OHIFCornerstoneViewport.js'
-  )
-);
+const Component = React.lazy(() => {
+  return import('./OHIFCornerstoneViewport');
+});
+
+const OHIFCornerstoneViewport = props => {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
 
 /**
  *
@@ -28,8 +34,15 @@ export default {
   preRegistration({ servicesManager, configuration = {} }) {
     init({ servicesManager, configuration });
   },
-  getViewportModule() {
-    return OHIFCornerstoneViewport;
+  getViewportModule({ commandsManager }) {
+    const ExtendedOHIFCornerstoneViewport = props => {
+      const onNewImageHandler = jumpData => {
+        commandsManager.runCommand('jumpToImage', jumpData);
+      };
+      return <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />;
+    };
+
+    return ExtendedOHIFCornerstoneViewport;
   },
   getToolbarModule() {
     return toolbarModule;

extensions/cornerstone/src/init.js

@@ -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,103 @@ 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,
+    ],
+    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 +159,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);
+          }
+        );
+      });
+    }
+  );
+};

extensions/cornerstone/src/initCornerstoneTools.js

@@ -2,6 +2,9 @@ import Hammer from 'hammerjs';
 import cornerstone from 'cornerstone-core';
 import cornerstoneMath from 'cornerstone-math';
 import cornerstoneTools from 'cornerstone-tools';
+import OHIF from '@ohif/core';
+
+const { log } = OHIF;
 
 export default function(configuration = {}) {
   // For debugging
@@ -12,6 +15,13 @@ export default function(configuration = {}) {
   cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
   cornerstoneTools.init(configuration);
 
+  cornerstoneTools.loadHandlerManager.setErrorLoadingHandler(
+    (element, imageId, error) => {
+      log.error(imageId);
+      throw error;
+    }
+  );
+
   // Set the tool font and font size
   // context.font = "[style] [variant] [weight] [size]/[line height] [font family]";
   const fontFamily =

extensions/cornerstone/src/toolbarModule.js

@@ -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 {

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

@@ -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;

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

@@ -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);
+    });
+  });
+});

extensions/cornerstone/src/utils/setCornerstoneLayout.js

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

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.1...@ohif/extension-dicom-html@1.2.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.0...@ohif/extension-dicom-html@1.2.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.2...@ohif/extension-dicom-html@1.2.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [1.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.1...@ohif/extension-dicom-html@1.1.2) (2020-04-02)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+## [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

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.0.2",
+  "version": "1.2.2",
   "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.12.3",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-html/src/DicomHtmlViewport.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import TypedArrayProp from './TypedArrayProp';
 
 import './DicomHtmlViewport.css';

extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js

@@ -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,
     };
   },

extensions/dicom-html/src/asyncComponent.js

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

extensions/dicom-html/src/index.js

@@ -1,11 +1,17 @@
-import asyncComponent from './asyncComponent.js';
+import React from 'react';
 import OHIFDicomHtmlSopClassHandler from './OHIFDicomHtmlSopClassHandler.js';
 
-const OHIFDicomHtmlViewport = asyncComponent(() =>
-  import(
-    /* webpackChunkName: "OHIFDicomHtmlViewport" */ './OHIFDicomHtmlViewport.js'
-  )
-);
+const Component = React.lazy(() => {
+  return import('./OHIFDicomHtmlViewport');
+});
+
+const OHIFDicomHtmlViewport = props => {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
 
 export default {
   /**

extensions/dicom-microscopy/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.50.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.8...@ohif/extension-dicom-microscopy@0.50.9) (2020-04-02)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+## [0.50.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.7...@ohif/extension-dicom-microscopy@0.50.8) (2020-03-31)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+## [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)
 
 

extensions/dicom-microscopy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.50.6",
+  "version": "0.50.9",
   "description": "OHIF extension for Dicom Microscopy",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-microscopy/src/DicomMicroscopySopClassHandler.js

@@ -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(),
     };
   },
 };

extensions/dicom-microscopy/src/DicomMicroscopyViewport.js

@@ -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
@@ -35,17 +35,18 @@ class DicomMicroscopyViewport extends Component {
         const promises = [];
         for (let i = 0; i < instances.length; i++) {
           const sopInstanceUID = instances[i]['00080018']['Value'][0];
+
           const retrieveInstanceOptions = {
-            studyInstanceUID: displaySet.studyInstanceUid,
-            seriesInstanceUID: displaySet.seriesInstanceUid,
+            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 +57,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 });

extensions/dicom-microscopy/src/asyncComponent.js

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

extensions/dicom-microscopy/src/index.js

@@ -1,11 +1,17 @@
-import asyncComponent from './asyncComponent.js';
+import React from 'react';
 import DicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler.js';
 
-const DicomMicroscopyViewport = asyncComponent(() =>
-  import(
-    /* webpackChunkName: "DicomMicroscopyViewport" */ './DicomMicroscopyViewport.js'
-  )
-);
+const Component = React.lazy(() => {
+  return import('./DicomMicroscopyViewport');
+});
+
+const DicomMicroscopyViewport = props => {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
 
 export default {
   /**

extensions/dicom-p10-downloader/.webpack/webpack.dev.js

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

extensions/dicom-p10-downloader/.webpack/webpack.prod.js

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

extensions/dicom-p10-downloader/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-p10-downloader@0.0.2...@ohif/extension-dicom-p10-downloader@0.1.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
+## 0.0.2 (2020-04-15)
+
+**Note:** Version bump only for package @ohif/extension-dicom-p10-downloader
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.

extensions/dicom-p10-downloader/LICENSE

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

extensions/dicom-p10-downloader/README.md

@@ -0,0 +1 @@
+# @ohif/extension-dicom-p10-downloader

extensions/dicom-p10-downloader/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ohif/extension-dicom-p10-downloader",
+  "version": "0.1.0",
+  "description": "OHIF extension for downloading DICOM P10 files",
+  "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",
+    "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": "^2.6.0",
+    "dicom-parser": "^1.8.3",
+    "dicomweb-client": "^0.5.2"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.5.5",
+    "dicomweb-client": "^0.6.0",
+    "file-saver": "^2.0.2",
+    "jszip": "^3.2.2"
+  }
+}

extensions/dicom-p10-downloader/src/commandsModule.js

@@ -0,0 +1,105 @@
+import OHIF from '@ohif/core';
+import {
+  save,
+  getDicomWebClientFromContext,
+  getSOPInstanceReferenceFromActiveViewport,
+  getSOPInstanceReferencesFromViewports,
+} from './utils';
+import _downloadAndZip from './downloadAndZip';
+
+const {
+  utils: {
+    Queue,
+  },
+} = OHIF;
+
+export function getCommands(context) {
+  const queue = new Queue(1);
+  const actions = {
+    /**
+     * @example Running this command using Commands Manager
+     * commandsManager.runCommand(
+     *   'downloadAndZip',
+     *   {
+     *     listOfUIDs: [...],
+     *     options: {
+     *       progress(status) {
+     *         console.info('Progress:', (status.progress * 100).toFixed(2) + '%');
+     *       }
+     *     }
+     *   },
+     *   'VIEWER'
+     * );
+     */
+    downloadAndZip({ servers, dicomWebClient, listOfUIDs, options }) {
+      return save(
+        _downloadAndZip(
+          dicomWebClient || getDicomWebClientFromContext(context, servers),
+          listOfUIDs,
+          options
+        ),
+        listOfUIDs
+      );
+    },
+    downloadAndZipSeriesOnViewports({ servers, viewports, progress }) {
+      const dicomWebClient = getDicomWebClientFromContext(context, servers);
+      const listOfUIDs = getSOPInstanceReferencesFromViewports(viewports);
+      return save(
+        _downloadAndZip(dicomWebClient, listOfUIDs, { progress }),
+        listOfUIDs
+      );
+    },
+    downloadAndZipSeriesOnActiveViewport({ servers, viewports, progress }) {
+      const dicomWebClient = getDicomWebClientFromContext(context, servers);
+      const listOfUIDs = getSOPInstanceReferenceFromActiveViewport(viewports);
+      return save(
+        _downloadAndZip(dicomWebClient, listOfUIDs, { progress }),
+        listOfUIDs
+      );
+    },
+  };
+
+  const definitions = {
+    downloadAndZip: {
+      commandFn: queue.bindSafe(actions.downloadAndZip, error),
+      storeContexts: ['servers'],
+    },
+    downloadAndZipSeriesOnViewports: {
+      commandFn: queue.bindSafe(actions.downloadAndZipSeriesOnViewports, error),
+      storeContexts: ['servers', 'viewports'],
+      options: { progress },
+    },
+    downloadAndZipSeriesOnActiveViewport: {
+      commandFn: queue.bindSafe(
+        actions.downloadAndZipSeriesOnActiveViewport,
+        error
+      ),
+      storeContexts: ['servers', 'viewports'],
+      options: { progress },
+    },
+  };
+
+  return {
+    actions,
+    definitions,
+  };
+}
+
+/**
+ * Utils
+ */
+
+function progress(status) {
+  OHIF.log.info(
+    'Download and Zip Progress:',
+    (status.progress * 100.0).toFixed(2) + '%'
+  );
+}
+
+function error(e) {
+  if (e.message === 'Queue limit reached') {
+    OHIF.log.warn('A download is already in progress, please wait.');
+  } else {
+    OHIF.log.error(e);
+  }
+}

extensions/dicom-p10-downloader/src/downloadAndZip.js

@@ -0,0 +1,244 @@
+import OHIF from '@ohif/core';
+import { api } from 'dicomweb-client';
+import dicomParser from 'dicom-parser';
+import JSZip from 'jszip';
+
+/**
+ * Constants
+ */
+
+const {
+  utils: {
+    isDicomUid,
+    hierarchicalListUtils,
+    progressTrackingUtils: progressUtils,
+  },
+} = OHIF;
+
+/**
+ * Public Methods
+ */
+
+/**
+ * Download and Zip all DICOM P10 instances from specified DICOM Web Client
+ * based on an hierarchical list of UIDs;
+ *
+ * @param {DICOMwebClient} dicomWebClient A DICOMwebClient instance through
+ *  which the referenced instances will be retrieved;
+ * @param {Array} listOfUIDs The hierarchical list of UIDs from the instances
+ *  that should be retrieved:
+ *  A hierarchical list of UIDs is a regular JS Array where the type of the UID
+ *  (study, series, instance) is determined by its nasting lavel. For example:
+ *    @ The following list instructs the library to download all the instances
+ *      from both studies "A" and "B":
+ *
+ *    ['studyUIDFromA', 'studyUIDFromB']
+ *
+ *    @ In the previous example both UIDs are treated as STUDY UIDs because both
+ *      of them are listed in the same (top) level of the list. If, on the other
+ *      hand, only instances from series "I" and "J" from the study "B"
+ *      are to be downloaded, the expected hierarchical list would be:
+ *
+ *    ['studyUIDFromA', ['studyUIDFromB', ['seriesUIDFromI', 'seriesUIDFromJ']]]
+ *
+ *    @ Which, when prettified, reads like this:
+ *
+ *    [
+ *      'studyUIDFromA',
+ *      ['studyUIDFromB', [
+ *        'seriesUIDFromI',
+ *        'seriesUIDFromJ'
+ *      ]]
+ *    ]
+ *
+ *    @ Furthermore, if only instances "X", "Y" and "Z" from series "J" need to
+ *      be downloaded (instead of all the instances from that series), the list
+ *      could be changed to:
+ *
+ *    [
+ *      'studyUIDFromA',
+ *      ['studyUIDFromB', [
+ *        'seriesUIDFromI',
+ *        ['seriesUIDFromJ', [
+ *          'instanceUIDFromX',
+ *          'instanceUIDFromY',
+ *          'instanceUIDFromZ'
+ *        ]]
+ *      ]]
+ *    ]
+ *
+ * Please refer to hierarchicalListUtils.js for more information and utilities;
+ *
+ * @param {Object} options A plain object with options;
+ * @param {function} options.progress A callback to retrieve notifications
+ * @returns {Promise} A promise that resolves to an URL from which the ZIP file
+ *  can be downloaded;
+ */
+
+async function downloadAndZip(dicomWebClient, listOfUIDs, options) {
+  if (dicomWebClient instanceof api.DICOMwebClient) {
+    const settings = buildSettings(listOfUIDs, options);
+    const { compression } = settings.tasks;
+    // Register user-provided progress handler as a task list observer
+    progressUtils.addObserver(settings.taskList, settings.options.progress);
+    const buffers = await downloadAll(dicomWebClient, settings).catch(error => {
+      // Reject promise from compression task on download failure
+      compression.deferred.reject(error);
+      throw error;
+    });
+    compression.deferred.resolve(zipAll(buffers, settings));
+    const url = await compression.deferred.promise;
+    return url;
+  }
+  throw new Error('A valid DICOM Web Client instance is expected');
+}
+
+/**
+ * Utils
+ */
+
+async function zipAll(buffers, settings) {
+  const zip = new JSZip();
+  OHIF.log.info('Adding DICOM P10 files to archive:', buffers.length);
+  buffers.forEach((buffer, i) => {
+    const path = buildPath(buffer) || `${i}.dcm`;
+    zip.file(path, buffer);
+  });
+  // Set compression task progress to 50%
+  progressUtils.update(settings.tasks.compression.task, 0.5);
+  const blob = await zip.generateAsync({ type: 'blob' });
+  return URL.createObjectURL(blob);
+}
+
+function buildSettings(listOfUIDs, options) {
+  const taskList = progressUtils.createList();
+  const compression = progressUtils.addDeferred(taskList);
+  const downloads = [];
+
+  // Build downloads list
+  hierarchicalListUtils.forEach(
+    listOfUIDs,
+    (StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID) => {
+      if (isDicomUid(StudyInstanceUID)) {
+        downloads.push({
+          tracking: progressUtils.addDeferred(taskList),
+          parameters: [StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID],
+        });
+      }
+    }
+  );
+
+  // Print tree of hierarchical references
+  OHIF.log.info('Downloading DICOM P10 files for references:');
+  OHIF.log.info(hierarchicalListUtils.print(listOfUIDs));
+
+  return {
+    options: Object(options),
+    taskList,
+    tasks: {
+      downloads,
+      compression,
+    },
+  };
+}
+
+function buildPath(buffer) {
+  let path;
+  try {
+    const byteArray = new Uint8Array(buffer);
+    const dataSet = dicomParser.parseDicom(byteArray, {
+      // Stop parsing after SeriesInstanceUID is found
+      untilTag: 'x0020000e',
+    });
+    const StudyInstanceUID = dataSet.string('x0020000d');
+    const SeriesInstanceUID = dataSet.string('x0020000e');
+    const SOPInstanceUID = dataSet.string('x00080018');
+    if (StudyInstanceUID && SeriesInstanceUID && SOPInstanceUID) {
+      path = `${StudyInstanceUID}/${SeriesInstanceUID}/${SOPInstanceUID}.dcm`;
+    }
+  } catch (e) {
+    OHIF.log.error('Error parsing downloaded DICOM P10 file...', e);
+  }
+  return path;
+}
+
+async function downloadAll(dicomWebClient, settings) {
+  const { downloads } = settings.tasks;
+
+  // Make sure at least one download was initiated
+  if (downloads.length < 1) {
+    throw new Error('No valid reference to be downloaded');
+  }
+
+  const promises = downloads.map(item => {
+    const {
+      parameters,
+      tracking: { deferred, task },
+    } = item;
+    deferred.resolve(download(task, dicomWebClient, ...parameters));
+    return deferred.promise;
+  });
+
+  // Wait on created download promises
+  return Promise.all(promises).then(results => {
+    const buffers = [];
+    // The "results" array may directly contain buffers (ArrayBuffer instances)
+    // or arrays of buffers, depending on the type of downloads initiated on the
+    // previous step (retrieveStudy, retrieveSeries or retrieveinstance). Ex:
+    // results = [buf1, [buf2, buf3], buf4, [buf5], ...];
+    results.forEach(
+      function select(nesting, result) {
+        if (result instanceof ArrayBuffer) {
+          buffers.push(result);
+        } else if (nesting && Array.isArray(result)) {
+          // "nesting" argument is important to make sure only two levels
+          // of arrays are visited. For example, "bufX" should not be visited:
+          // [buf1, [buf2, buf3, [bufX]], buf4, [buf5], ...];
+          result.forEach(select.bind(null, false));
+        }
+      }.bind(null, true)
+    );
+    return buffers;
+  });
+}
+
+async function download(
+  task,
+  dicomWebClient,
+  studyInstanceUID,
+  seriesInstanceUID,
+  sopInstanceUID
+) {
+  // Strict DICOM-formatted variable names COULDN'T be used here because the
+  // DICOM Web client interface expects them in this specific format.
+  // @TODO: Add support for download progress handler which will use the
+  // currently not use "task" param
+  if (!isDicomUid(studyInstanceUID)) {
+    throw new Error('Download requires at least a "StudyInstanceUID" property');
+  }
+  if (!isDicomUid(seriesInstanceUID)) {
+    // Download entire study
+    return dicomWebClient.retrieveStudy({
+      studyInstanceUID,
+    });
+  }
+  if (!isDicomUid(sopInstanceUID)) {
+    // Download entire series
+    return dicomWebClient.retrieveSeries({
+      studyInstanceUID,
+      seriesInstanceUID,
+    });
+  }
+  // Download specific instance
+  return dicomWebClient.retrieveInstance({
+    studyInstanceUID,
+    seriesInstanceUID,
+    sopInstanceUID,
+  });
+}
+
+/**
+ * Exports
+ */
+
+export { downloadAndZip as default, downloadAndZip };

extensions/dicom-p10-downloader/src/index.js

@@ -0,0 +1,43 @@
+import { getDicomWebClientFromConfig } from './utils';
+import { getCommands } from './commandsModule';
+
+/**
+ * Constants
+ */
+
+/**
+ * Globals
+ */
+
+const sharedContext = {
+  dicomWebClient: null,
+};
+
+/**
+ * Extension
+ */
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'dicom-p10-downloader',
+
+  /**
+   * LIFECYCLE HOOKS
+   */
+
+  preRegistration({ appConfig }) {
+    const dicomWebClient = getDicomWebClientFromConfig(appConfig);
+    if (dicomWebClient) {
+      sharedContext.dicomWebClient = dicomWebClient;
+    }
+  },
+
+  /**
+   * MODULE GETTERS
+   */
+
+  getCommandsModule() {
+    return getCommands(sharedContext);
+  },
+};

extensions/dicom-p10-downloader/src/utils.js

@@ -0,0 +1,110 @@
+import OHIF from '@ohif/core';
+import { api } from 'dicomweb-client';
+import { saveAs } from 'file-saver';
+
+const {
+  utils: { isDicomUid, resolveObjectPath, hierarchicalListUtils },
+  DICOMWeb,
+} = OHIF;
+
+function validDicomUid(subject) {
+  if (isDicomUid(subject)) {
+    return subject;
+  }
+}
+
+function getActiveServerFromServersStore(store) {
+  const servers = resolveObjectPath(store, 'servers');
+  if (Array.isArray(servers) && servers.length > 0) {
+    return servers.find(server => resolveObjectPath(server, 'active') === true);
+  }
+}
+
+function getDicomWebClientFromConfig(config) {
+  const servers = resolveObjectPath(config, 'servers.dicomWeb');
+  if (Array.isArray(servers) && servers.length > 0) {
+    const server = servers[0];
+    return new api.DICOMwebClient({
+      url: server.wadoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(server),
+    });
+  }
+}
+
+function getDicomWebClientFromContext(context, store) {
+  const activeServer = getActiveServerFromServersStore(store);
+  if (activeServer) {
+    return new api.DICOMwebClient({
+      url: activeServer.wadoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(activeServer),
+    });
+  } else if (context.dicomWebClient instanceof api.DICOMwebClient) {
+    return context.dicomWebClient;
+  }
+}
+
+function getSOPInstanceReference(viewports, index) {
+  if (index >= 0) {
+    const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = Object(
+      resolveObjectPath(viewports, `viewportSpecificData.${index}`)
+    );
+    return Object.freeze(
+      hierarchicalListUtils.addToList(
+        [],
+        validDicomUid(StudyInstanceUID),
+        validDicomUid(SeriesInstanceUID),
+        validDicomUid(SOPInstanceUID)
+      )
+    );
+  }
+}
+
+function getSOPInstanceReferenceFromActiveViewport(viewports) {
+  return getSOPInstanceReference(
+    viewports,
+    resolveObjectPath(viewports, 'activeViewportIndex')
+  );
+}
+
+function getSOPInstanceReferencesFromViewports(viewports) {
+  const list = [];
+  const viewportSpecificData = resolveObjectPath(
+    viewports,
+    'viewportSpecificData'
+  );
+  Object.keys(viewportSpecificData).forEach(index => {
+    const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = Object(
+      viewportSpecificData[index]
+    );
+    hierarchicalListUtils.addToList(
+      list,
+      validDicomUid(StudyInstanceUID),
+      validDicomUid(SeriesInstanceUID),
+      validDicomUid(SOPInstanceUID)
+    );
+  });
+  return list;
+}
+
+function save(promise, listOfUIDs) {
+  return Promise.resolve(promise)
+    .then(url => {
+      OHIF.log.info('Files successfully compressed:', url);
+      const StudyInstanceUID = hierarchicalListUtils.getItem(listOfUIDs, 0);
+      saveAs(url, `${StudyInstanceUID}.zip`);
+      return url;
+    })
+    .catch(error => {
+      OHIF.log.error('Failed to create Zip file...', error);
+      return null;
+    });
+}
+
+export {
+  save,
+  validDicomUid,
+  getDicomWebClientFromConfig,
+  getDicomWebClientFromContext,
+  getSOPInstanceReferenceFromActiveViewport,
+  getSOPInstanceReferencesFromViewports,
+};

extensions/dicom-pdf/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.2...@ohif/extension-dicom-pdf@1.0.3) (2020-04-02)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+## [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)
 
 

extensions/dicom-pdf/package.json

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

extensions/dicom-pdf/src/ConnectedOHIFDicomPDFViewer.js

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

extensions/dicom-pdf/src/DicomPDFViewport.css

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

extensions/dicom-pdf/src/DicomPDFViewport.js

@@ -1,6 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import dicomParser from 'dicom-parser';
+import PDFJS from 'pdfjs-dist';
+import PropTypes from 'prop-types';
+
 import TypedArrayProp from './TypedArrayProp';
+import './DicomPDFViewport.css';
+
+import pdfjsBuild from 'pdfjs-dist/build/pdf';
+import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
+pdfjsBuild.GlobalWorkerOptions.workerSrc = pdfjsWorker;
 
 // TODO: Should probably use dcmjs for this
 const SOP_CLASS_UIDS = {
@@ -8,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>
     );
   }

extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js

@@ -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,
     };
   },

extensions/dicom-pdf/src/OHIFDicomPDFViewport.js

@@ -11,6 +11,9 @@ class OHIFDicomPDFViewport extends Component {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
+    viewportData: PropTypes.object,
+    activeViewportIndex: PropTypes.number,
+    setViewportActive: PropTypes.func,
   };
 
   state = {
@@ -30,42 +33,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>
     );
   }

extensions/dicom-pdf/src/index.js

@@ -1,16 +1,27 @@
+import React from 'react';
 import OHIFDicomPDFSopClassHandler from './OHIFDicomPDFSopClassHandler.js';
-import OHIFDicomPDFViewport from './OHIFDicomPDFViewport.js';
+
+const Component = React.lazy(() => {
+  return import('./ConnectedOHIFDicomPDFViewer');
+});
+
+const ConnectedOHIFDicomPDFViewer = props => {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
 
 export default {
   /**
    * Only required property. Should be a unique value across all extensions.
    */
   id: 'pdf',
-
   getViewportModule() {
-    return OHIFDicomPDFViewport;
+    return ConnectedOHIFDicomPDFViewer;
   },
   getSopClassHandlerModule() {
     return OHIFDicomPDFSopClassHandler;
-  }
+  },
 };

extensions/dicom-rt/.webpack/webpack.dev.js

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

extensions/dicom-rt/.webpack/webpack.prod.js

@@ -0,0 +1,44 @@
+const webpack = require('webpack');
+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: 'OHIFExtDicomSeg',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      filename: pkg.main,
+    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
+  });
+};

extensions/dicom-rt/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.1...@ohif/extension-dicom-rt@0.1.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [0.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.0...@ohif/extension-dicom-rt@0.1.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+# [0.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.0.2...@ohif/extension-dicom-rt@0.1.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## 0.0.2 (2020-04-09)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt

extensions/dicom-rt/LICENSE

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

extensions/dicom-rt/README.md

@@ -0,0 +1 @@
+# @ohif/extension-dicom-rt

extensions/dicom-rt/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ohif/extension-dicom-rt",
+  "version": "0.1.2",
+  "description": "OHIF extension for rendering DICOM RTSTRUCTs on top of cornerstone images.",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/index.umd.js",
+  "module": "src/index.js",
+  "engines": {
+    "node": ">=10",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "dev:dicom-html": "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",
+    "cornerstone-core": "^2.2.8",
+    "cornerstone-tools": "^4.0.9",
+    "dcmjs": "^0.12.3",
+    "prop-types": "^15.6.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.5.5",
+    "react-select": "^3.0.8"
+  }
+}

extensions/dicom-rt/src/OHIFDicomRTStructSopClassHandler.js

@@ -0,0 +1,237 @@
+import { MODULE_TYPES, utils, DICOMWeb } from '@ohif/core';
+import loadRTStruct from './loadRTStruct';
+
+import id from './id';
+
+// TODO: Should probably use dcmjs for this
+const SOP_CLASS_UIDS = {
+  DICOM_RT_STRUCT: '1.2.840.10008.5.1.4.1.1.481.3',
+};
+
+const sopClassUIDs = Object.values(SOP_CLASS_UIDS);
+
+const OHIFDicomRTStructSopClassHandler = {
+  id: 'OHIFDicomRTStructSopClassHandler',
+  type: MODULE_TYPES.SOP_CLASS_HANDLER,
+  sopClassUIDs,
+  getDisplaySetFromSeries: function (
+    series,
+    study,
+    dicomWebClient,
+    authorizationHeaders
+  ) {
+    const instance = series.getFirstInstance();
+
+    const metadata = instance.getData().metadata;
+    const {
+      SeriesDate,
+      SeriesTime,
+      SeriesDescription,
+      FrameOfReferenceUID,
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = metadata;
+
+    // TODO -> GET REFERENCED FRAME OF REFERENCE SEQUENCE.
+
+    const rtStructDisplaySet = {
+      Modality: 'RTSTRUCT',
+      displaySetInstanceUID: utils.guid(),
+      wadoRoot: study.getData().wadoRoot,
+      wadoUri: instance.getData().wadouri,
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+      FrameOfReferenceUID,
+      authorizationHeaders,
+      metadata,
+      isDerived: true,
+      referencedDisplaySetUID: null, // Assigned when loaded.
+      labelmapIndex: null, // Assigned when loaded.
+      isLoaded: false,
+      SeriesDate,
+      SeriesTime,
+      SeriesDescription,
+    };
+
+    if (!metadata.ReferencedSeriesSequence) {
+      const ReferencedFrameOfReferenceSequence =
+        metadata.ReferencedFrameOfReferenceSequence;
+
+      if (ReferencedFrameOfReferenceSequence) {
+        // TODO -> @dannyrb Do we augment metadata or add a (potentially large? fallback list in filterDerivedDisplaySets )
+        metadata.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
+          ReferencedFrameOfReferenceSequence
+        );
+      }
+    }
+
+    rtStructDisplaySet.load = function (referencedDisplaySet, studies) {
+      return loadRTStruct(
+        rtStructDisplaySet,
+        referencedDisplaySet,
+        studies
+      ).catch(error => {
+        rtStructDisplaySet.isLoaded = false;
+        throw new Error(error);
+      });
+    };
+
+    return rtStructDisplaySet;
+  },
+};
+
+function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
+  ReferencedFrameOfReferenceSequence
+) {
+  const ReferencedSeriesSequence = [];
+
+  _getSequenceAsArray(ReferencedFrameOfReferenceSequence).forEach(
+    referencedFrameOfReference => {
+      const { RTReferencedStudySequence } = referencedFrameOfReference;
+
+      _getSequenceAsArray(RTReferencedStudySequence).forEach(
+        rtReferencedStudy => {
+          const { RTReferencedSeriesSequence } = rtReferencedStudy;
+
+          _getSequenceAsArray(RTReferencedSeriesSequence).forEach(
+            rtReferencedSeries => {
+              const ReferencedInstanceSequence = [];
+              const {
+                ContourImageSequence,
+                SeriesInstanceUID,
+              } = rtReferencedSeries;
+
+              _getSequenceAsArray(ContourImageSequence).forEach(
+                contourImage => {
+                  ReferencedInstanceSequence.push({
+                    ReferencedSOPInstanceUID:
+                      contourImage.ReferencedSOPInstanceUID,
+                    ReferencedSOPClassUID: contourImage.ReferencedSOPClassUID,
+                  });
+                }
+              );
+
+              const referencedSeries = {
+                SeriesInstanceUID,
+                ReferencedInstanceSequence,
+              };
+
+              ReferencedSeriesSequence.push(referencedSeries);
+            }
+          );
+        }
+      );
+    }
+  );
+
+  return ReferencedSeriesSequence;
+}
+
+function _getSequenceAsArray(sequence) {
+  return Array.isArray(sequence) ? sequence : [sequence];
+}
+
+function _getReferencedFrameOfReferenceSequence(instance) {
+  const referencedFrameOfReferenceSequenceRaw = instance['30060010'];
+
+  const referencedFrameOfReferenceSequence = [];
+
+  if (
+    !referencedFrameOfReferenceSequenceRaw ||
+    !referencedFrameOfReferenceSequenceRaw.Value
+  ) {
+    return undefined;
+  }
+
+  referencedFrameOfReferenceSequenceRaw.Value.forEach(
+    referencedFrameOfReferenceRaw => {
+      const frameOfReferenceUID = DICOMWeb.getString(
+        referencedFrameOfReferenceRaw['00200052']
+      );
+
+      const referencedFrameOfReference = { frameOfReferenceUID };
+      const RTReferencedStudySequenceRaw =
+        referencedFrameOfReferenceRaw['30060012'];
+
+      referencedFrameOfReferenceSequence.push(referencedFrameOfReference);
+
+      if (RTReferencedStudySequenceRaw && RTReferencedStudySequenceRaw.Value) {
+        referencedFrameOfReference.rtReferencedStudySequence = [];
+
+        const { rtReferencedStudySequence } = referencedFrameOfReference;
+
+        RTReferencedStudySequenceRaw.Value.forEach(rtReferencedStudyRaw => {
+          const referencedSopClassUID = DICOMWeb.getString(
+            rtReferencedStudyRaw['00081150']
+          );
+
+          const referencedSOPInstanceUID = DICOMWeb.getString(
+            rtReferencedStudyRaw['00081155']
+          );
+
+          const rtReferencedStudy = {
+            referencedSopClassUID,
+            referencedSOPInstanceUID,
+            rtReferencedSeriesSequence: [],
+          };
+
+          rtReferencedStudySequence.push(rtReferencedStudy);
+
+          const { rtReferencedSeriesSequence } = rtReferencedStudy;
+
+          const rtReferencedSeriesSequenceRaw =
+            rtReferencedStudyRaw['30060014'];
+
+          rtReferencedSeriesSequenceRaw.Value.forEach(rtReferencedSeriesRaw => {
+            const seriesInstanceUID = DICOMWeb.getString(
+              rtReferencedSeriesRaw['0020000E']
+            );
+
+            const rtReferencedSeries = {
+              seriesInstanceUID,
+              contourImageSequence: [],
+            };
+
+            rtReferencedSeriesSequence.push(rtReferencedSeries);
+
+            const { contourImageSequence } = rtReferencedSeries;
+
+            const contourImageSequenceRaw = rtReferencedSeriesRaw['30060016'];
+
+            contourImageSequenceRaw.Value.forEach(contourImageRaw => {
+              const referencedSOPClassUID = DICOMWeb.getString(
+                contourImageRaw['00081150']
+              );
+
+              const referencedSOPInstanceUID = DICOMWeb.getString(
+                contourImageRaw['00081155']
+              );
+
+              const referencedFrameNumber = DICOMWeb.getString(
+                contourImageRaw['00081160']
+              );
+              const referencedSegmentNumber = DICOMWeb.getString(
+                contourImageRaw['0062000B']
+              );
+
+              const contourImage = {
+                referencedSOPClassUID,
+                referencedSOPInstanceUID,
+                referencedFrameNumber,
+                referencedSegmentNumber,
+              };
+
+              contourImageSequence.push(contourImage);
+            });
+          });
+        });
+      }
+    }
+  );
+
+  return referencedFrameOfReferenceSequence;
+}
+
+export default OHIFDicomRTStructSopClassHandler;

extensions/dicom-rt/src/components/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+const LoadingIndicator = ({ height = "200px", width = "200px", expand = false }) => {
+  return (
+    <div style={expand ? { height: "100%", width: "100%" } : {}}>
+      <svg style={{ margin: 'auto', background: 'none', display: 'block', shapeRendering: 'auto' }} width={width} height={height} viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+        <g transform="rotate(0 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(30 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(60 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(90 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(120 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(150 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(180 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(210 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(240 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(270 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(300 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+          </rect>
+        </g><g transform="rotate(330 50 50)">
+          <rect x="49" y="24" rx="0" ry="0" width="2" height="12" fill="#20a5d6">
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+          </rect>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default LoadingIndicator;

extensions/dicom-rt/src/components/PanelSection/PanelSection.css

@@ -0,0 +1,44 @@
+.dcmrt-panel-section {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-primary-color);
+  font-size: 12px;
+}
+
+.dcmrt-panel-section .header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--ui-gray-dark);
+  border-radius: 5px;
+  font-weight: bold;
+  padding: 10px 15px;
+}
+
+.dcmrt-panel-section .header .eye-icon,
+.dcmrt-panel-section .header .angle-double-down,
+.dcmrt-panel-section .header .angle-double-up {
+  cursor: pointer;
+  color: var(--active-color);
+}
+
+.dcmrt-panel-section .header .eye-icon:hover,
+.dcmrt-panel-section .header .angle-double-down:hover,
+.dcmrt-panel-section .header .angle-double-up:hover {
+  color: var(--hover-color);
+}
+
+.dcmrt-panel-section .header .eye-icon.expanded {
+  color: var(--default-color);
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.icons .angle-double-down, .icons .angle-double-up {
+  margin-left: 15px;
+}

extensions/dicom-rt/src/components/PanelSection/PanelSection.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@ohif/ui';
+
+import './PanelSection.css';
+import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
+
+const PanelSection = ({
+  title,
+  children,
+  visible = false,
+  expanded = false,
+  loading = false,
+  hideVisibleButton = false,
+  onVisibilityChange = () => { },
+  onExpandChange = () => { }
+}) => {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+  const [isVisible, setIsVisible] = useState(visible);
+
+  useEffect(() => {
+    setIsVisible(visible);
+  }, [visible]);
+
+  return (
+    <div
+      className="dcmrt-panel-section"
+      style={{
+        marginBottom: isExpanded ? 0 : 2,
+        height: isExpanded ? '100%' : 'unset'
+      }}
+    >
+      <div className="header">
+        <div>{title}</div>
+        <div className="icons">
+          {!hideVisibleButton && (
+            <Icon
+              className={`eye-icon ${isVisible && 'expanded'}`}
+              name={isVisible ? "eye" : "eye-closed"}
+              width="20px"
+              height="20px"
+              onClick={() => {
+                const newVisibility = !isVisible;
+                setIsVisible(newVisibility);
+                onVisibilityChange(newVisibility);
+              }}
+            />
+          )}
+          <Icon
+            className={`angle-double-${isExpanded ? 'down' : 'up'} ${isExpanded && 'expanded'}`}
+            name={`angle-double-${isExpanded ? 'down' : 'up'}`}
+            width="20px"
+            height="20px"
+            onClick={() => {
+              const newExpandValue = !isExpanded;
+              setIsExpanded(newExpandValue);
+              onExpandChange(newExpandValue);
+            }}
+          />
+        </div>
+      </div>
+      {loading && isExpanded && <LoadingIndicator expand height="70px" width="70px" />}
+      {children}
+    </div>
+  );
+};
+
+PanelSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  visible: PropTypes.bool,
+  expanded: PropTypes.bool,
+  onVisibilityChange: PropTypes.func
+};
+
+PanelSection.defaultProps = {
+  visible: false,
+  expanded: false,
+  onVisibilityChange: () => { }
+};
+
+export default PanelSection;

extensions/dicom-rt/src/components/RTPanel/RTPanel.css

@@ -0,0 +1,26 @@
+.dcmrt-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-background-color);
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+}
+
+.dcmrt-panel .dcmrt-panel-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: white;
+}
+
+.dcmrt-panel .dcmrt-panel-header .cog-icon {
+  align-self: flex-end;
+  color: var(--default-color);
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.dcmrt-panel .dcmrt-panel-header .cog-icon:hover {
+  color: var(--hover-color);
+}

extensions/dicom-rt/src/components/RTPanel/RTPanel.js

@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cornerstoneTools from 'cornerstone-tools';
+import cornerstone from 'cornerstone-core';
+
+import { ScrollableArea, TableList, Icon } from '@ohif/ui';
+
+import { utils } from '@ohif/core';
+
+import './RTPanel.css';
+import StructureSetItem from '../StructureSetItem/StructureSetItem';
+import RTPanelSettings from '../RTSettings/RTSettings';
+import PanelSection from '../PanelSection/PanelSection';
+import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
+
+const { studyMetadataManager } = utils;
+
+const refreshViewport = () => {
+  cornerstone.getEnabledElements().forEach(enabledElement => {
+    cornerstone.updateImage(enabledElement.element);
+  });
+};
+
+/**
+ * RTPanel component
+ *
+ * @param {Object} props
+ * @param {Array} props.studies
+ * @param {Array} props.viewports - viewportSpecificData
+ * @param {number} props.activeIndex - activeViewportIndex
+ * @param {number} props.isOpen - isOpen
+ * @returns component
+ */
+const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }) => {
+  const [selectedContour, setSelectedContour] = useState();
+  const DEFAULT_SET_INDEX = 0;
+  const DEFAULT_STATE = {
+    referencedDisplaysets: [],
+    sets: [],
+    selectedSet: null,
+  };
+
+  const [state, setState] = useState(DEFAULT_STATE);
+  const [showSettings, setShowSettings] = useState(false);
+  const activeViewport = viewports[activeIndex];
+
+  /*
+   * TODO: Improve the way we notify parts of the app that depends on rts to be loaded.
+   *
+   * Currently we are using a non-ideal implementation through a custom event to notify the rtstruct panel
+   * or other components that could rely on loaded rtstructs that
+   * the first batch of structs were loaded so that e.g. when the user opens the panel
+   * before the structs are fully loaded, the panel can subscribe to this custom event
+   * and update itself with the new structs.
+   *
+   * This limitation is due to the fact that the rtmodule is an object (which will be
+   * updated after the structs are loaded) that React its not aware of its changes
+   * because the module object its not passed in to the panel component as prop but accessed externally.
+   *
+   * Improving this event approach to something reactive that can be tracked inside the react lifecycle,
+   * allows us to easily watch the module or the rtstruct loading process in any other component
+   * without subscribing to external events.
+   */
+  useEffect(() => {
+    document.addEventListener('extensiondicomrtrtloaded', updateStructureSets);
+
+    return () => {
+      document.removeEventListener('extensiondicomrtrtloaded', updateStructureSets);
+    };
+  }, []);
+
+  const updateStructureSets = () => {
+    const module = cornerstoneTools.getModule('rtstruct');
+    const StructureSets = module.state.StructureSets;
+
+    if (StructureSets && StructureSets.length) {
+      const viewportSets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
+        activeViewport.SeriesInstanceUID
+      );
+
+      const studyMetadata = studyMetadataManager.get(activeViewport.StudyInstanceUID);
+      const referencedDisplaysets = studyMetadata.getDerivedDatasets({
+        referencedSeriesInstanceUID: activeViewport.SeriesInstanceUID,
+        Modality: 'RTSTRUCT',
+      });
+
+      if (viewportSets.length) {
+        const defaultSet = viewportSets[DEFAULT_SET_INDEX];
+        setState({
+          referencedDisplaysets,
+          selectedSet: defaultSet,
+          sets: viewportSets
+        });
+      } else {
+        setState(DEFAULT_STATE);
+      }
+    }
+  };
+
+  useEffect(() => {
+    updateStructureSets();
+  }, [studies, viewports, activeIndex]);
+
+  useEffect(() => {
+    setShowSettings(showSettings && !isOpen);
+  }, [isOpen]);
+
+  const toContourItem = ({ ROINumber, ROIName, RTROIObservations, colorArray, visible }, loadedSet) => {
+    let interpretedType = '';
+    if (RTROIObservations && RTROIObservations.RTROIInterpretedType) {
+      interpretedType = `(${RTROIObservations.RTROIInterpretedType})`;
+    }
+
+    const isSameContour = selectedContour && selectedContour === ROINumber;
+    return (
+      <StructureSetItem
+        key={ROINumber}
+        selected={isSameContour}
+        onClick={() => {
+          setSelectedContour(isSameContour ? null : ROINumber);
+
+          const enabledElements = cornerstone.getEnabledElements();
+          const element = enabledElements[activeIndex].element;
+          const toolState = cornerstoneTools.getToolState(element, 'stack');
+
+          if (!toolState) {
+            return;
+          }
+
+          const imageIds = toolState.data[0].imageIds;
+
+          const module = cornerstoneTools.getModule('rtstruct');
+          const imageId = module.getters.imageIdOfCenterFrameOfROIContour(
+            state.selectedSet.SeriesInstanceUID,
+            ROINumber,
+            imageIds
+          );
+
+          const frameIndex = imageIds.indexOf(imageId);
+          const SOPInstanceUID = cornerstone.metaData.get('SOPInstanceUID', imageId);
+          const StudyInstanceUID = cornerstone.metaData.get('StudyInstanceUID', imageId);
+
+          onContourItemClick({
+            StudyInstanceUID,
+            SOPInstanceUID,
+            frameIndex,
+            activeViewportIndex: activeIndex
+          });
+        }}
+        label={`${ROIName} ${interpretedType}`}
+        index={ROINumber}
+        color={colorArray}
+        visible={visible}
+        onVisibilityChange={() => {
+          const module = cornerstoneTools.getModule('rtstruct');
+          module.setters.toggleROIContour(state.selectedSet.SeriesInstanceUID, ROINumber);
+        }}
+      />
+    );
+  };
+
+  const configurationChangeHandler = newConfiguration => {
+    const module = cornerstoneTools.getModule('rtstruct');
+    module.configuration.lineWidth = newConfiguration.lineWidth;
+    module.configuration.opacity = newConfiguration.opacity;
+    refreshViewport();
+  };
+
+  if (showSettings) {
+    const module = cornerstoneTools.getModule('rtstruct');
+    return (
+      <RTPanelSettings
+        configuration={module.configuration}
+        onBack={() => setShowSettings(false)}
+        onChange={configurationChangeHandler}
+      />
+    );
+  }
+
+  return (
+    <div className="dcmrt-panel">
+      <div className="dcmrt-panel-header">
+        <h3>RT Structure Sets</h3>
+        <Icon
+          className="cog-icon"
+          name="cog"
+          width="25px"
+          height="25px"
+          onClick={() => setShowSettings(true)}
+        />
+      </div>
+      {!state.referencedDisplaysets.length && <LoadingIndicator expand height="70px" width="70px" />}
+      {state.referencedDisplaysets.map(displaySet => {
+        const { SeriesInstanceUID, metadata, isLoaded } = displaySet;
+
+        const module = cornerstoneTools.getModule('rtstruct');
+        const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(viewports[activeIndex].SeriesInstanceUID);
+
+        const loadedSet = sets.find(set => set.SeriesInstanceUID === SeriesInstanceUID);
+        return (
+          <PanelSection
+            key={SeriesInstanceUID}
+            title={metadata.StructureSetLabel}
+            loading={!isLoaded || !loadedSet}
+            visible={isLoaded && loadedSet.visible}
+            hideVisibleButton={!isLoaded}
+            expanded={isLoaded && loadedSet.SeriesInstanceUID === state.selectedSet.SeriesInstanceUID}
+            onVisibilityChange={() => {
+              const module = cornerstoneTools.getModule('rtstruct');
+              module.setters.toggleStructureSet(SeriesInstanceUID);
+            }}
+            onExpandChange={async () => {
+              if (!isLoaded) {
+                await displaySet.load(viewports[activeIndex], studies);
+                const module = cornerstoneTools.getModule('rtstruct');
+                const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(viewports[activeIndex].SeriesInstanceUID);
+                const selectedSet = sets.find(set => set.SeriesInstanceUID === SeriesInstanceUID);
+                setState(state => ({ ...state, selectedSet, sets }));
+              }
+            }}
+          >
+            <ScrollableArea>
+              <TableList headless>
+                {isLoaded && loadedSet.ROIContours.map(c => toContourItem(c, loadedSet))}
+              </TableList>
+            </ScrollableArea>
+          </PanelSection>
+        );
+      })}
+    </div>
+  );
+};
+
+RTPanel.propTypes = {
+  viewports: PropTypes.shape({
+    displaySetInstanceUID: PropTypes.string,
+    frameRate: PropTypes.any,
+    InstanceNumber: PropTypes.number,
+    isMultiFrame: PropTypes.bool,
+    isReconstructable: PropTypes.bool,
+    Modality: PropTypes.string,
+    plugin: PropTypes.string,
+    SeriesDate: PropTypes.string,
+    SeriesDescription: PropTypes.string,
+    SeriesInstanceUID: PropTypes.string,
+    SeriesNumber: PropTypes.any,
+    SeriesTime: PropTypes.string,
+    sopClassUIDs: PropTypes.arrayOf(PropTypes.string),
+    StudyInstanceUID: PropTypes.string,
+  }),
+  activeIndex: PropTypes.number.isRequired,
+  studies: PropTypes.array.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+RTPanel.defaultProps = {};
+
+export default RTPanel;