chore(release): publish [skip ci]

- @ohif/extension-vtk@1.3.3
 - @ohif/core@2.6.2
 - @ohif/viewer@3.8.6

.circleci/config.yml

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

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

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

.github/stale.yml

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

.gitignore

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

.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/SUMMARY.md

@@ -1,7 +1,6 @@
 # OHIF Viewers
 
 - [Our Process](our-process.md)
-- [Quick Start](quick-start.md)
 - Development
   - [Getting Started](development/getting-started.md)
   - [Contributing](development/contributing.md)
@@ -31,7 +30,6 @@
   - [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/extensions/index.md

@@ -193,7 +193,8 @@ today, create a GitHub issue!
 
 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`.
+and provides a `ServicesManager` and `CommandsManager` along with the application's
+configuration through the appConfig key (optional).
 
 ```js
 const commandsManager = new CommandsManager();
@@ -201,6 +202,7 @@ const servicesManager = new ServicesManager();
 const extensionManager = new ExtensionManager({
   commandsManager,
   servicesManager,
+  appConfig
 });
 ```
 
@@ -210,8 +212,8 @@ The `ExtensionManager` only has a few public members:
 - `registerExtensions` - Registers an array of extensions
 - `modules` - An object containing registered extensions by `MODULE_TYPE`
 
-During registration, lifecycle hooks and modules have access to
-`ExtensionManager`'s `ServicesManager` and `CommandsManager`.
+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.

docs/latest/extensions/modules/panel.md

@@ -40,6 +40,10 @@ export default {
           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'],
         },

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

@@ -5,7 +5,7 @@ An extension can register a SOP Class Handler Module by defining a
 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
+- `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
@@ -15,13 +15,13 @@ A `displaySet` has the following shape:
 ```js
 return {
   plugin: 'html',
-  modality: 'SR',
-  displaySetInstanceUid: 0,
+  Modality: 'SR',
+  displaySetInstanceUID: 0,
   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,
 };
 ```
@@ -50,7 +50,7 @@ export default {
 getSopClassHandlerModule({ servicesManager, commandsManager }) {
   return {
     id: 'OHIFDicomHtmlSopClassHandler',
-    sopClassUids: Object.values(SOP_CLASS_UIDS),
+    sopClassUIDs: Object.values(SOP_CLASS_UIDS),
 
     /**
      * @param {object} series -
@@ -63,12 +63,12 @@ getSopClassHandlerModule({ servicesManager, commandsManager }) {
 
       return {
         plugin: 'html',
-        displaySetInstanceUid: 0,
+        displaySetInstanceUID: 0,
         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,
       };
     },

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

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

docs/latest/services/ui/index.md

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

docs/latest/viewer/configuration.md

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

docs/latest/viewer/environment-variables.md

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

docs/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

@@ -14,13 +14,13 @@ export default {
   preRegistration({
     servicesManager = {},
     commandsManager = {},
+    appConfig = {},
     configuration = {},
   }) {},
 
   /**
    * MODULE GETTERS
    */
-
   getViewportModule() {
     return '... react component ...';
   },
@@ -63,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',
@@ -77,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,
     };
   },
@@ -97,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,140 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/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

extensions/cornerstone/README.md

@@ -85,6 +85,20 @@ Tools can be configured through extension configuration using the tools key:
   ...
 ```
 
+## 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": "2.0.1",
+  "version": "2.5.0",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -25,16 +25,18 @@
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "prepublishOnly": "yarn run build",
-    "start": "yarn run dev"
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage"
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.8.0",
+    "cornerstone-tools": "4.12.5",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.10.1",
     "dicom-parser": "^1.8.3",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -49,7 +51,6 @@
     "classnames": "^2.2.6",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
-    "query-string": "^6.8.3",
-    "react-cornerstone-viewport": "2.x.x"
+    "react-cornerstone-viewport": "^2.3.6"
   }
 }

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -4,28 +4,9 @@ import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
-import handleSegmentationStorage from './handleSegmentationStorage.js';
 
 const { StackManager } = OHIF.utils;
 
-// Metadata configuration
-const metadataProvider = new OHIF.cornerstone.MetadataProvider();
-
-cornerstone.metaData.addProvider(
-  metadataProvider.provider.bind(metadataProvider)
-);
-
-StackManager.setMetadataProvider(metadataProvider);
-
-const SOP_CLASSES = {
-  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
-};
-
-const specialCaseHandlers = {};
-specialCaseHandlers[
-  SOP_CLASSES.SEGMENTATION_STORAGE
-] = handleSegmentationStorage;
-
 class OHIFCornerstoneViewport extends Component {
   state = {
     viewportData: null,
@@ -58,34 +39,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 +74,7 @@ class OHIFCornerstoneViewport extends Component {
     }
 
     const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUid === displaySetInstanceUid;
+      return set.displaySetInstanceUID === displaySetInstanceUID;
     });
 
     if (!displaySet) {
@@ -107,17 +88,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 +112,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 +139,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 +174,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();

extensions/cornerstone/src/commandsModule.js

@@ -2,6 +2,7 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from '@ohif/core';
 
+import setCornerstoneLayout from './utils/setCornerstoneLayout.js';
 import { getEnabledElement } from './state';
 import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 const scroll = cornerstoneTools.import('util/scroll');
@@ -73,10 +74,6 @@ const commandsModule = ({ servicesManager }) => {
       }
       cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
     },
-    updateViewportDisplaySet: ({ direction }) => {
-      // TODO
-      console.warn('updateDisplaySet: ', direction);
-    },
     clearAnnotations: ({ viewports }) => {
       const element = getEnabledElement(viewports.activeViewportIndex);
       if (!element) {
@@ -242,6 +239,22 @@ const commandsModule = ({ servicesManager }) => {
       cornerstoneTools.removeToolState(element, toolType, tool);
       cornerstone.updateImage(element);
     },
+    setCornerstoneLayout: () => {
+      setCornerstoneLayout();
+    },
+    setWindowLevel: ({ viewports, window, level }) => {
+      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+
+      if (enabledElement) {
+        let viewport = cornerstone.getViewport(enabledElement);
+
+        viewport.voi = {
+          windowWidth: Number(window),
+          windowCenter: Number(level),
+        };
+        cornerstone.setViewport(enabledElement, viewport);
+      }
+    },
   };
 
   const definitions = {
@@ -330,24 +343,28 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: ['viewports'],
       options: {},
     },
-    // TODO: First/Last image
-    // Next/Previous series/DisplaySet
-    nextViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: { direction: 1 },
-    },
-    previousViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: { direction: -1 },
-    },
     // TOOLS
     setToolActive: {
       commandFn: actions.setToolActive,
       storeContexts: [],
       options: {},
     },
+    setZoomTool: {
+      commandFn: actions.setToolActive,
+      storeContexts: [],
+      options: { toolName: 'Zoom' },
+    },
+    setCornerstoneLayout: {
+      commandFn: actions.setCornerstoneLayout,
+      storeContexts: [],
+      options: {},
+      context: 'VIEWER',
+    },
+    setWindowLevel: {
+      commandFn: actions.setWindowLevel,
+      storeContexts: ['viewports'],
+      options: {},
+    },
   };
 
   return {

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/init.js

@@ -1,29 +1,10 @@
 import OHIF from '@ohif/core';
+import { SimpleDialog } from '@ohif/ui';
 import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
-import initCornerstoneTools from './initCornerstoneTools.js';
-import queryString from 'query-string';
-import { SimpleDialog } from '@ohif/ui';
 import merge from 'lodash.merge';
-
-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 initCornerstoneTools from './initCornerstoneTools.js';
+import measurementServiceMappingsFactory from './utils/measurementServiceMappings/measurementServiceMappingsFactory';
 
 /**
  *
@@ -32,9 +13,9 @@ cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);
  * @param {Object|Array} configuration.csToolsConfig
  */
 export default function init({ servicesManager, configuration }) {
-  const callInputDialog = (data, event, callback) => {
-    const { UIDialogService } = servicesManager.services;
+  const { UIDialogService, MeasurementService } = servicesManager.services;
 
+  const callInputDialog = (data, event, callback) => {
     if (UIDialogService) {
       let dialogId = UIDialogService.create({
         centralize: true,
@@ -57,16 +38,13 @@ export default function init({ servicesManager, configuration }) {
   };
 
   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,
@@ -76,33 +54,40 @@ export default function init({ servicesManager, configuration }) {
 
   initCornerstoneTools(defaultCsToolsConfig);
 
-  // ~~ Toooools 🙌
-  const tools = [
-    csTools.PanTool,
-    csTools.ZoomTool,
-    csTools.WwwcTool,
-    csTools.MagnifyTool,
-    csTools.StackScrollTool,
-    csTools.StackScrollMouseWheelTool,
-    // Touch
-    csTools.PanMultiTouchTool,
-    csTools.ZoomTouchPinchTool,
-    // Annotations
-    csTools.ArrowAnnotateTool,
-    csTools.EraserTool,
-    csTools.BidirectionalTool,
-    csTools.LengthTool,
-    csTools.AngleTool,
-    csTools.FreehandRoiTool,
-    csTools.EllipticalRoiTool,
-    csTools.DragProbeTool,
-    csTools.RectangleRoiTool,
-    // Segmentation
-    csTools.BrushTool,
-  ];
+  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,
+    ],
+  };
+
+  let tools = [];
+  Object.keys(toolsGroupedByType).forEach(toolsGroup =>
+    tools.push(...toolsGroupedByType[toolsGroup])
+  );
+
+  /* Measurement Service */
+  _connectToolsToMeasurementService(MeasurementService);
 
   /* Add extension tools configuration here. */
-  const extensionToolsConfiguration = {
+  const internalToolsConfig = {
     ArrowAnnotate: {
       configuration: {
         getTextCallback: (callback, eventDetails) =>
@@ -113,19 +98,60 @@ export default function init({ servicesManager, configuration }) {
     },
   };
 
-  const isEmpty = obj => Object.keys(obj).length < 1;
-  if (!isEmpty(configuration.tools) || !isEmpty(extensionToolsConfiguration)) {
-    /* Add tools with its custom props through extension configuration. */
-    tools.forEach(tool => {
-      const toolName = tool.name.replace('Tool', '');
-      const configurationToolProps = configuration.tools[toolName] || {};
-      const extensionToolProps = extensionToolsConfiguration[toolName];
-      let props = merge(extensionToolProps, configurationToolProps);
-      csTools.addTool(tool, props);
-    });
-  } else {
-    tools.forEach(tool => csTools.addTool(tool));
-  }
+  /* 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 });
   csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
@@ -133,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/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,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.0...@ohif/extension-dicom-html@1.1.1) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+# [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.2...@ohif/extension-dicom-html@1.1.0) (2019-12-11)
+
+
+### Features
+
+* 🎸 DICOM SR STOW on MeasurementAPI ([#954](https://github.com/OHIF/Viewers/issues/954)) ([ebe1af8](https://github.com/OHIF/Viewers/commit/ebe1af8d4f75d2483eba869655906d7829bd9666)), closes [#758](https://github.com/OHIF/Viewers/issues/758)
+
+
+
+
+
 ## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.1...@ohif/extension-dicom-html@1.0.2) (2019-12-02)
 
 **Note:** Version bump only for package @ohif/extension-dicom-html

extensions/dicom-html/package.json

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

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-microscopy/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.7",
   "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
@@ -34,18 +34,18 @@ class DicomMicroscopyViewport extends Component {
       .then(instances => {
         const promises = [];
         for (let i = 0; i < instances.length; i++) {
-          const sopInstanceUID = instances[i]['00080018']['Value'][0];
+          const sopInstanceUid = instances[i]['00080018']['Value'][0];
           const retrieveInstanceOptions = {
-            studyInstanceUID: displaySet.studyInstanceUid,
-            seriesInstanceUID: displaySet.seriesInstanceUid,
-            sopInstanceUID,
+            studyInstanceUID: displaySet.StudyInstanceUID,
+            seriesInstanceUID: displaySet.SeriesInstanceUID,
+            sopInstanceUid,
           };
 
           const promise = dicomWebClient
             .retrieveInstanceMetadata(retrieveInstanceOptions)
             .then(metadata => {
-              const imageType = metadata[0]['00080008']['Value'];
-              if (imageType[2] === 'VOLUME') {
+              const ImageType = metadata[0]['00080008']['Value'];
+              if (ImageType[2] === 'VOLUME') {
                 return metadata[0];
               }
             });
@@ -56,13 +56,15 @@ class DicomMicroscopyViewport extends Component {
       .then(async metadata => {
         metadata = metadata.filter(m => m);
 
-        const { api } = await import(/* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer');
+        const { api } = await import(
+          /* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer'
+        );
         const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
 
         this.viewer = new microscopyViewer({
           client: dicomWebClient,
           metadata,
-          retrieveRendered: false
+          retrieveRendered: false,
         });
 
         this.viewer.render({ container });

extensions/dicom-pdf/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.1...@ohif/extension-dicom-pdf@1.0.2) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.0...@ohif/extension-dicom-pdf@1.0.1) (2019-12-16)
+
+
+### Bug Fixes
+
+* 🐛 Update ohif pdf extension to optionally use pdfjs ([#1162](https://github.com/OHIF/Viewers/issues/1162)) ([31e542d](https://github.com/OHIF/Viewers/commit/31e542dfd973c3e982ede6d02d79bfe65175e792)), closes [#1049](https://github.com/OHIF/Viewers/issues/1049)
+
+
+
+
+
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.4...@ohif/extension-dicom-pdf@1.0.0) (2019-09-27)
 
 

extensions/dicom-pdf/package.json

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

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/asyncComponent.js

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

extensions/dicom-pdf/src/index.js

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

extensions/dicom-segmentation/.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-segmentation/.webpack/webpack.prod.js

@@ -0,0 +1,33 @@
+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',
+    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-segmentation/CHANGELOG.md

@@ -0,0 +1,11 @@
+# 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 (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)

extensions/dicom-segmentation/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-segmentation/README.md

@@ -0,0 +1,65 @@
+# @ohif/dicom-segmentation
+
+![npm (scoped)](https://img.shields.io/npm/v/@ohif/dicom-segmentation.svg?style=flat-square)
+
+This extension adds support to view and navigate the segments available in the DICOM SEG,
+allowing control over visibility of a given segment and providing metadata about the segment(s).
+
+<!-- TODO: Simple image or GIF? -->
+
+#### Index
+
+Extension Id: `com.ohif.dicom-segmentation`
+
+## 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
+
+- [cornerstonejs/react-cornerstone-viewport][react-viewport]
+- [cornerstonejs/cornerstoneTools][cornerstone-tools]
+- [cornerstonejs/cornerstone][cornerstone]
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[docs-commands]: https://www.com
+[docs-hotkeys]: https://www.com
+[docs-userprefs]: htt
+[react-viewport]: https://github.com/cornerstonejs/react-cornerstone-viewport
+[cornerstone-tools]: https://github.com/cornerstonejs/cornerstoneTools
+[cornerstone]: https://github.com/cornerstonejs/cornerstone
+<!-- prettier-ignore-end -->

extensions/dicom-segmentation/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ohif/extension-dicom-segmentation",
+  "version": "0.1.0",
+  "description": "OHIF extension for viewing segmentations in the 2D MPR view",
+  "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.12.5",
+    "dcmjs": "^0.6.1",
+    "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-segmentation/src/OHIFDicomSegSopClassHandler.js

@@ -0,0 +1,71 @@
+import { MODULE_TYPES, utils } from '@ohif/core';
+import loadSegmentation from './loadSegmentation';
+
+// TODO: Should probably use dcmjs for this
+const SOP_CLASS_UIDS = {
+  DICOM_SEG: '1.2.840.10008.5.1.4.1.1.66.4',
+};
+
+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 OHIFDicomSegSopClassHandler = {
+  id: 'OHIFDicomSegSopClassHandler',
+  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;
+
+    const segDisplaySet = {
+      Modality: 'SEG',
+      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,
+    };
+
+    segDisplaySet.load = function(referencedDisplaySet, studies) {
+      return loadSegmentation(
+        segDisplaySet,
+        referencedDisplaySet,
+        studies
+      ).catch(error => {
+        segDisplaySet.isLoaded = false;
+        throw new Error(error);
+      });
+    };
+
+    return segDisplaySet;
+  },
+};
+
+export default OHIFDicomSegSopClassHandler;

extensions/dicom-segmentation/src/components/BrushColorSelector/BrushColorSelector.css

@@ -0,0 +1,41 @@
+.dcmseg-brush-color-selector .selector-buttons button {
+  color: #333;
+  background-color: #fff;
+  padding: 4px 12px;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+
+.dcmseg-brush-color-selector .selector-buttons button:hover,
+.dcmseg-brush-color-selector .selector-buttons button:active,
+.dcmseg-brush-color-selector .selector-buttons button.active {
+  background-color: var(--active-color);
+  border-color: var(--ui-border-color-active);
+  color: #fff;
+}
+
+.dcmseg-brush-color-selector .selector-buttons {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.dcmseg-brush-color-selector .selector-buttons button:last-of-type {
+  margin-left: 5px;
+}
+
+.dcmseg-brush-color-selector .selector-active-segment {
+  border-radius: 100%;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  line-height: 32px;
+}

extensions/dicom-segmentation/src/components/BrushColorSelector/BrushColorSelector.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './BrushColorSelector.css';
+
+const BrushColorSelector = ({ defaultColor, index, onNext, onPrev }) => (
+  <div className="dcmseg-brush-color-selector">
+    <div
+      className="selector-active-segment"
+      style={{ backgroundColor: defaultColor }}
+    >
+      {index}
+    </div>
+    <div className="selector-buttons">
+      <button onClick={onPrev}>
+        Previous
+      </button>
+      <button onClick={onNext}>
+        Next
+      </button>
+    </div>
+  </div>
+);
+
+BrushColorSelector.propTypes = {
+  defaultColor: PropTypes.string.isRequired,
+  index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  onNext: PropTypes.func.isRequired,
+  onPrev: PropTypes.func.isRequired,
+};
+
+export default BrushColorSelector;

extensions/dicom-segmentation/src/components/BrushRadius/BrushRadius.css

@@ -0,0 +1,4 @@
+.dcmseg-brush-radius label {
+  display: block;
+  margin-bottom: 8px;
+}

extensions/dicom-segmentation/src/components/BrushRadius/BrushRadius.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Range } from '@ohif/ui';
+
+import './BrushRadius.css';
+
+const BrushRadius = ({ value, onChange, min, max, step }) => (
+  <div className="dcmseg-brush-radius">
+    <label htmlFor="dcmseg-brush-radius">Brush Radius</label>
+    <Range
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={onChange}
+      id="dcmseg-brush-radius"
+    />
+  </div>
+);
+
+BrushRadius.propTypes = {
+  value: PropTypes.number.isRequired,
+  onChange: PropTypes.number,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+};
+
+BrushRadius.defaultProps = {
+  onChange: () => { },
+  min: 1,
+  max: 50,
+  step: 1,
+};
+
+export default BrushRadius;

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.css

@@ -0,0 +1,64 @@
+.dcmseg-segment-item .segment-color-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.dcmseg-segment-item .segment-color {
+  margin-top: 8px;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+}
+
+.dcmseg-segment-item .segment-label {
+  overflow: hidden;
+  max-width: calc(100% - 50px);
+  text-overflow: ellipsis;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.dcmseg-segment-item .segment-info {
+  display: inline-block;
+  margin-top: 9px;
+  padding-left: 9px;
+  width: 90px;
+  border-left: 1px solid var(--text-secondary-color);
+  color: var(--text-primary-color);
+  width: 100%;
+}
+
+.dcmseg-segment-item.selected .segment-actions {
+  height: 35px;
+  visibility: visible;
+}
+
+.dcmseg-segment-item .segment-actions {
+  margin-left: -1px;
+  background-color: var(--ui-gray-darker);
+  height: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  visibility: hidden;
+  padding-left: 14px;
+}
+
+.dcmseg-segment-item .segment-actions .btnAction {
+  background-color: transparent;
+  border: none;
+  color: var(--default-color);
+  cursor: pointer;
+  line-height: 35px;
+  height: 35px;
+  transition: all 0.3s ease;
+}
+
+.dcmseg-segment-item .segment-actions .btnAction:hover, .dcmseg-segment-item .segment-actions .btnAction:active {
+  color: var(--text-primary-color);
+}
+
+.dcmseg-segment-item .segment-actions .btnAction i {
+  margin-right: 4px;
+}

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TableListItem, Icon } from '@ohif/ui';
+
+import './SegmentItem.css';
+
+const ColoredCircle = ({ color }) => {
+  return (
+    <div
+      className="segment-color"
+      style={{ backgroundColor: `rgba(${color.join(',')})` }}
+    ></div>
+  );
+};
+
+ColoredCircle.propTypes = {
+  color: PropTypes.array.isRequired,
+};
+
+const SegmentItem = ({ index, label, onClick, itemClass, color }) => (
+  <div className="dcmseg-segment-item">
+    <TableListItem
+      key={index}
+      itemKey={index}
+      itemIndex={index}
+      itemClass={itemClass}
+      itemMeta={<ColoredCircle color={color} />}
+      itemMetaClass="segment-color-section"
+      onItemClick={onClick}
+    >
+      <div>
+        <div className="segment-label" style={{ marginBottom: 4 }}>
+          {label}
+        </div>
+        {false && <div className="segment-info">{'...'}</div>}
+        {false && (
+          <div className="segment-actions">
+            <button
+              className="btnAction"
+              onClick={() => console.log('Relabelling...')}
+            >
+              <span style={{ marginRight: '4px' }}>
+                <Icon name="edit" width="14px" height="14px" />
+              </span>
+              Relabel
+              </button>
+            <button
+              className="btnAction"
+              onClick={() => console.log('Editing description...')}
+            >
+              <span style={{ marginRight: '4px' }}>
+                <Icon name="edit" width="14px" height="14px" />
+              </span>
+              Description
+              </button>
+          </div>
+        )}
+      </div>
+    </TableListItem>
+  </div>
+);
+
+SegmentItem.propTypes = {
+  index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  itemClass: PropTypes.string,
+  color: PropTypes.array.isRequired,
+};
+
+SegmentItem.defaultProps = {
+  itemClass: '',
+  onClick: () => { }
+};
+
+export default SegmentItem;

extensions/dicom-segmentation/src/components/SegmentationItem/SegmentationItem.css

@@ -0,0 +1,25 @@
+.dcmseg-segmentation-item {
+  display: flex;
+  justify-content: start;
+  margin: 0;
+}
+
+.dcmseg-segmentation-item .segmentation-meta {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.dcmseg-segmentation-item .segmentation-meta-title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: white;
+  max-width: calc(100% - 30px);
+}
+
+.dcmseg-segmentation-item .segmentation-meta-description {
+  font-size: 12px;
+  color: var(--text-secondary-color);
+}

extensions/dicom-segmentation/src/components/SegmentationItem/SegmentationItem.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './SegmentationItem.css';
+
+const SegmentationItem = ({ onClick, title, description }) => {
+  return (
+    <li className="dcmseg-segmentation-item" onClick={onClick}>
+      <div className="segmentation-meta">
+        <div className="segmentation-meta-title">{title}</div>
+        <div className="segmentation-meta-description">{description}</div>
+      </div>
+    </li>
+  );
+};
+
+SegmentationItem.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+};
+
+SegmentationItem.defaultProps = {
+  description: ''
+};
+
+export default SegmentationItem;

extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.css

@@ -0,0 +1,61 @@
+.dcmseg-segmentation-panel {
+  color: white;
+  min-height: 200px;
+  background-color: var(--primary-background-color);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dcmseg-segmentation-panel h3 {
+  padding-left: 20px;
+  margin-top: 0;
+}
+
+.dcmseg-segmentation-panel .segmentations {
+  padding: 0 20px 20px 20px;
+}
+
+.dcmseg-segmentation-panel .cog-icon {
+  margin: 20px 20px 0 0;
+  align-self: flex-end;
+  color: var(--default-color);
+  cursor: pointer;
+}
+
+.dcmseg-segmentation-panel .cog-icon:hover {
+  color: var(--hover-color);
+}
+
+.dcmseg-segmentation-panel .segmentation-icon {
+  margin-right: 8px;
+  margin-top: 12px;
+  min-width: 14px;
+}
+
+.dcmseg-segmentation-panel .selector-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  height: 150px;
+}
+
+.dcmseg-segmentation-panel .selector-form>div {
+  width: 100%;
+}
+
+.dcmseg-segmentation-panel .selector-form>div:first-of-type {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.dcmseg-segmentation-panel .tableList .tableListHeader .numberOfItems {
+  float: unset;
+  max-width: unset;
+  flex: unset;
+  margin-right: 16px;
+}

extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js

@@ -0,0 +1,475 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cornerstoneTools from 'cornerstone-tools';
+import cornerstone from 'cornerstone-core';
+import moment from 'moment';
+import { utils, log } from '@ohif/core';
+import { ScrollableArea, TableList, Icon } from '@ohif/ui';
+
+import {
+  BrushColorSelector,
+  BrushRadius,
+  SegmentationItem,
+  SegmentItem,
+  SegmentationSelect,
+} from '../index';
+
+import './SegmentationPanel.css';
+import SegmentationSettings from '../SegmentationSettings/SegmentationSettings';
+
+const { studyMetadataManager } = utils;
+
+const refreshViewport = () => {
+  cornerstone.getEnabledElements().forEach(enabledElement => {
+    cornerstone.updateImage(enabledElement.element);
+  });
+};
+
+/**
+ * SegmentationPanel component
+ *
+ * @param {Object} props
+ * @param {Array} props.studies
+ * @param {Array} props.viewports - viewportSpecificData
+ * @param {number} props.activeIndex - activeViewportIndex
+ * @returns component
+ */
+const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
+  /*
+   * TODO: wrap get/set interactions with the cornerstoneTools
+   * store with context to make these kind of things less blurry.
+   */
+  const segmentationModule = cornerstoneTools.getModule('segmentation');
+  const { configuration } = segmentationModule;
+  const DEFAULT_BRUSH_RADIUS = configuration.radius || 10;
+
+  const [brushRadius, setBrushRadius] = useState(DEFAULT_BRUSH_RADIUS);
+
+  /* TODO: We shouldn't hardcode this color, in the future the SEG may set the colorLUT to whatever it wants. */
+  const [brushColor, setBrushColor] = useState('rgba(221, 85, 85, 1)');
+  const [selectedSegment, setSelectedSegment] = useState();
+  const [showSegSettings, setShowSegSettings] = useState(false);
+  const [selectedSegmentation, setSelectedSegmentation] = useState();
+
+  const viewport = viewports[activeIndex];
+
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    displaySetInstanceUID,
+  } = viewport;
+
+  const studyMetadata = studyMetadataManager.get(StudyInstanceUID);
+  const firstImageId = studyMetadata.getFirstImageId(displaySetInstanceUID);
+
+  /* CornerstoneTools */
+  const [brushStackState, setBrushStackState] = useState(
+    segmentationModule.state.series[firstImageId]
+  );
+
+  useEffect(() => {
+    setShowSegSettings(showSegSettings && !isOpen);
+  }, [isOpen]);
+
+  useEffect(() => {
+    setBrushStackState(segmentationModule.state.series[firstImageId]);
+  }, [studies, viewports, activeIndex, firstImageId]);
+
+  useEffect(() => {
+    if (brushStackState) {
+      setSelectedSegmentation(brushStackState.activeLabelmapIndex);
+    }
+
+    const labelmapModifiedHandler = event => {
+      log.warn('labelmap modified', event);
+      setBrushStackState(segmentationModule.state.series[firstImageId]);
+    };
+
+    /*
+     * These are specific to each element;
+     * Need to iterate cornerstone-tools tracked enabled elements?
+     * Then only care about the one tied to active viewport?
+     */
+    cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
+      enabledElement.addEventListener(
+        'cornerstonetoolslabelmapmodified',
+        labelmapModifiedHandler
+      )
+    );
+
+    return () => {
+      cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
+        enabledElement.removeEventListener(
+          'cornerstonetoolslabelmapmodified',
+          labelmapModifiedHandler
+        )
+      );
+    };
+  });
+
+  if (!brushStackState) {
+    return null;
+  }
+
+  const labelmap3D =
+    brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
+
+  /*
+   * 2. UseEffect to update state? or to a least trigger a re-render
+   * 4. Toggle visibility of labelmap?
+   * 5. Toggle visibility of seg?
+   *
+   * If the port is cornerstone, just need to call a re-render.
+   * If the port is vtkjs, its a bit more tricky as we now need to create a new
+   */
+
+  const getLabelmapList = () => {
+    /* Get list of SEG labelmaps specific to active viewport (reference series) */
+    const referencedSegDisplaysets = _getReferencedSegDisplaysets(
+      StudyInstanceUID,
+      SeriesInstanceUID
+    );
+
+    return referencedSegDisplaysets.map((displaySet, index) => {
+      const { labelmapIndex, SeriesDate, SeriesTime } = displaySet;
+
+      /* Map to display representation */
+      const dateStr = `${SeriesDate}:${SeriesTime}`.split('.')[0];
+      const date = moment(dateStr, 'YYYYMMDD:HHmmss');
+      const isActiveLabelmap =
+        labelmapIndex === brushStackState.activeLabelmapIndex;
+      const displayDate = date.format('ddd, MMM Do YYYY');
+      const displayTime = date.format('h:mm:ss a');
+      const displayDescription = displaySet.SeriesDescription;
+
+      return {
+        value: labelmapIndex,
+        title: displayDescription,
+        description: displayDate,
+        onClick: async () => {
+          const activatedLabelmapIndex = await _setActiveLabelmap(
+            viewport,
+            studies,
+            displaySet,
+            firstImageId,
+            brushStackState.activeLabelmapIndex
+          );
+          setSelectedSegmentation(activatedLabelmapIndex);
+        },
+      };
+    });
+  };
+
+  const labelmapList = getLabelmapList();
+
+  const segmentList = [];
+
+  if (labelmap3D) {
+    /*
+     * Newly created segments have no `meta`
+     * So we instead build a list of all segment indexes in use
+     * Then find any associated metadata
+     */
+    const uniqueSegmentIndexes = labelmap3D.labelmaps2D
+      .reduce((acc, labelmap2D) => {
+        if (labelmap2D) {
+          const segmentIndexes = labelmap2D.segmentsOnLabelmap;
+
+          for (let i = 0; i < segmentIndexes.length; i++) {
+            if (!acc.includes(segmentIndexes[i]) && segmentIndexes[i] !== 0) {
+              acc.push(segmentIndexes[i]);
+            }
+          }
+        }
+
+        return acc;
+      }, [])
+      .sort((a, b) => a - b);
+
+    const colorLutTable =
+      segmentationModule.state.colorLutTables[labelmap3D.colorLUTIndex];
+    const hasLabelmapMeta = labelmap3D.metadata && labelmap3D.metadata.data;
+
+    for (let i = 0; i < uniqueSegmentIndexes.length; i++) {
+      const segmentIndex = uniqueSegmentIndexes[i];
+
+      const color = colorLutTable[segmentIndex];
+      let segmentLabel = '(unlabeled)';
+      let segmentNumber = segmentIndex;
+
+      /* Meta */
+      if (hasLabelmapMeta) {
+        const segmentMeta = labelmap3D.metadata.data[segmentIndex];
+
+        if (segmentMeta) {
+          segmentNumber = segmentMeta.SegmentNumber;
+          segmentLabel = segmentMeta.SegmentLabel;
+        }
+      }
+
+      const sameSegment = selectedSegment === segmentNumber;
+      const setCurrentSelectedSegment = () => {
+        _setActiveSegment(
+          firstImageId,
+          segmentNumber,
+          labelmap3D.activeSegmentIndex
+        );
+        setSelectedSegment(sameSegment ? null : segmentNumber);
+      };
+
+      segmentList.push(
+        <SegmentItem
+          key={segmentNumber}
+          itemClass={`segment-item ${sameSegment && 'selected'}`}
+          onClick={setCurrentSelectedSegment}
+          label={segmentLabel}
+          index={segmentNumber}
+          color={color}
+        />
+      );
+    }
+
+    /*
+     * Let's iterate over segmentIndexes ^ above
+     * If meta has a match, use it to show info
+     * If now, add "no-meta" class
+     * Show default name
+     */
+  }
+
+  const updateBrushSize = evt => {
+    const updatedRadius = Number(evt.target.value);
+
+    if (updatedRadius !== brushRadius) {
+      setBrushRadius(updatedRadius);
+      segmentationModule.setters.radius(updatedRadius);
+    }
+  };
+
+  const decrementSegment = event => {
+    event.preventDefault();
+    if (labelmap3D.activeSegmentIndex > 1) {
+      labelmap3D.activeSegmentIndex--;
+    }
+    setSelectedSegment(labelmap3D.activeSegmentIndex);
+    updateActiveSegmentColor();
+  };
+
+  const incrementSegment = event => {
+    event.preventDefault();
+    labelmap3D.activeSegmentIndex++;
+    setSelectedSegment(labelmap3D.activeSegmentIndex);
+    updateActiveSegmentColor();
+  };
+
+  const updateActiveSegmentColor = () => {
+    const color = getActiveSegmentColor();
+    setBrushColor(color);
+  };
+
+  const getActiveSegmentColor = () => {
+    if (!brushStackState) {
+      return 'rgba(255, 255, 255, 1)';
+    }
+
+    const colorLutTable =
+      segmentationModule.state.colorLutTables[labelmap3D.colorLUTIndex];
+    const color = colorLutTable[labelmap3D.activeSegmentIndex];
+
+    return `rgba(${color.join(',')})`;
+  };
+
+  const updateConfiguration = newConfiguration => {
+    /* Supported configuration */
+    configuration.renderFill = newConfiguration.renderFill;
+    configuration.renderOutline = newConfiguration.renderOutline;
+    configuration.shouldRenderInactiveLabelmaps =
+      newConfiguration.shouldRenderInactiveLabelmaps;
+    configuration.fillAlpha = newConfiguration.fillAlpha;
+    configuration.outlineAlpha = newConfiguration.outlineAlpha;
+    configuration.outlineWidth = newConfiguration.outlineWidth;
+    configuration.fillAlphaInactive = newConfiguration.fillAlphaInactive;
+    configuration.outlineAlphaInactive = newConfiguration.outlineAlphaInactive;
+    refreshViewport();
+  };
+
+  if (showSegSettings) {
+    return (
+      <SegmentationSettings
+        configuration={configuration}
+        onBack={() => setShowSegSettings(false)}
+        onChange={updateConfiguration}
+      />
+    );
+  } else {
+    return (
+      <div className="dcmseg-segmentation-panel">
+        <Icon
+          className="cog-icon"
+          name="cog"
+          width="25px"
+          height="25px"
+          onClick={() => setShowSegSettings(true)}
+        />
+        {false && (
+          <form className="selector-form">
+            <BrushColorSelector
+              defaultColor={brushColor}
+              index={labelmap3D.activeSegmentIndex}
+              onNext={incrementSegment}
+              onPrev={decrementSegment}
+            />
+            <BrushRadius
+              value={brushRadius}
+              onChange={updateBrushSize}
+              min={configuration.minRadius}
+              max={configuration.maxRadius}
+            />
+          </form>
+        )}
+        <h3>Segmentations</h3>
+        <div className="segmentations">
+          <SegmentationSelect
+            value={
+              labelmapList.find(i => i.value === selectedSegmentation) || null
+            }
+            formatOptionLabel={SegmentationItem}
+            options={labelmapList}
+          />
+        </div>
+        <ScrollableArea>
+          <TableList
+            customHeader={<SegmentsHeader count={segmentList.length} />}
+          >
+            {segmentList}
+          </TableList>
+        </ScrollableArea>
+      </div>
+    );
+  }
+};
+
+SegmentationPanel.propTypes = {
+  /*
+   * An object, with int index keys?
+   * Maps to: state.viewports.viewportSpecificData, in `viewer`
+   * Passed in MODULE_TYPES.PANEL when specifying component in viewer
+   */
+  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,
+};
+SegmentationPanel.defaultProps = {};
+
+/**
+ * Returns SEG Displaysets that reference the target series, sorted by dateTime
+ *
+ * @param {string} StudyInstanceUID
+ * @param {string} SeriesInstanceUID
+ * @returns Array
+ */
+const _getReferencedSegDisplaysets = (StudyInstanceUID, SeriesInstanceUID) => {
+  /* Referenced DisplaySets */
+  const studyMetadata = studyMetadataManager.get(StudyInstanceUID);
+  const referencedDisplaysets = studyMetadata.getDerivedDatasets({
+    referencedSeriesInstanceUID: SeriesInstanceUID,
+    Modality: 'SEG',
+  });
+
+  /* Sort */
+  referencedDisplaysets.sort((a, b) => {
+    const aNumber = Number(`${a.SeriesDate}${a.SeriesTime}`);
+    const bNumber = Number(`${b.SeriesDate}${b.SeriesTime}`);
+    return aNumber - bNumber;
+  });
+
+  return referencedDisplaysets;
+};
+
+/**
+ *
+ *
+ * @param {*} viewportSpecificData
+ * @param {*} studies
+ * @param {*} displaySet
+ * @param {*} firstImageId
+ * @param {*} activeLabelmapIndex
+ * @returns
+ */
+const _setActiveLabelmap = async (
+  viewportSpecificData,
+  studies,
+  displaySet,
+  firstImageId,
+  activeLabelmapIndex
+) => {
+  if (displaySet.labelmapIndex === activeLabelmapIndex) {
+    log.warn(`${activeLabelmapIndex} is already the active labelmap`);
+    return;
+  }
+
+  if (!displaySet.isLoaded) {
+    // What props does this expect `viewportSpecificData` to have?
+    // TODO: Should this return the `labelmapIndex`?
+    await displaySet.load(viewportSpecificData, studies);
+  }
+
+  const { state } = cornerstoneTools.getModule('segmentation');
+  const brushStackState = state.series[firstImageId];
+
+  brushStackState.activeLabelmapIndex = displaySet.labelmapIndex;
+
+  refreshViewport();
+
+  return displaySet.labelmapIndex;
+};
+
+/**
+ *
+ * @param {*} firstImageId
+ * @param {*} activeSegmentIndex
+ * @returns
+ */
+const _setActiveSegment = (firstImageId, segmentIndex, activeSegmentIndex) => {
+  if (segmentIndex === activeSegmentIndex) {
+    log.info(`${activeSegmentIndex} is already the active segment`);
+    return;
+  }
+
+  const { state } = cornerstoneTools.getModule('segmentation');
+  const brushStackState = state.series[firstImageId];
+
+  const labelmap3D =
+    brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
+  labelmap3D.activeSegmentIndex = segmentIndex;
+
+  refreshViewport();
+
+  return segmentIndex;
+};
+
+const SegmentsHeader = ({ count }) => {
+  return (
+    <React.Fragment>
+      <div className="tableListHeaderTitle">Segments</div>
+      <div className="numberOfItems">{count}</div>
+    </React.Fragment>
+  );
+};
+
+export default SegmentationPanel;

extensions/dicom-segmentation/src/components/SegmentationSelect.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Select from 'react-select';
+
+const SegmentationSelect = ({ value, formatOptionLabel, options }) => (
+  <Select
+    value={value}
+    formatOptionLabel={formatOptionLabel}
+    styles={segmentationSelectStyles}
+    options={options}
+  />
+);
+
+const computedstyle = getComputedStyle(document.body);
+const uiGrayDarker = computedstyle.getPropertyValue('--ui-gray-darker');
+const activeColor = computedstyle.getPropertyValue('--active-color');
+const defaultColor = computedstyle.getPropertyValue('--default-color');
+const uiGrayDark = computedstyle.getPropertyValue('--ui-gray-dark');
+
+const segmentationSelectStyles = {
+  control: (base, state) => ({
+    ...base,
+    cursor: 'pointer',
+    background: uiGrayDarker,
+    borderRadius: state.isFocused ? '5px 5px 5px 5px' : 5,
+    borderColor: state.isFocused ? activeColor : defaultColor,
+    boxShadow: state.isFocused ? null : null,
+    minHeight: '50px',
+    '&:hover': {
+      borderColor: activeColor,
+    },
+  }),
+  menu: base => ({
+    ...base,
+    borderRadius: 5,
+    background: uiGrayDarker,
+  }),
+  option: (base, state) => ({
+    ...base,
+    cursor: 'pointer',
+    '&:first-of-type': {
+      borderTopLeftRadius: 5,
+      borderTopRightRadius: 5,
+    },
+    '&:last-of-type': {
+      borderBottomLeftRadius: 5,
+      borderBottomRightRadius: 5,
+    },
+    background: state.isSelected ? uiGrayDark : uiGrayDarker,
+    '&:hover': {
+      background: uiGrayDark,
+    },
+  }),
+};
+
+export default SegmentationSelect;

extensions/dicom-segmentation/src/components/SegmentationSettings/SegmentationSettings.css

@@ -0,0 +1,95 @@
+.dcmseg-segmentation-settings {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.dcmseg-segmentation-settings .range label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.dcmseg-segmentation-settings .settings-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20px;
+}
+
+.dcmseg-segmentation-settings .settings-title h3 {
+  color: var(--text-primary-color);
+  margin: 0;
+  padding: 0;
+}
+
+.dcmseg-segmentation-settings .settings-group {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-primary-color);
+  font-size: 12px;
+}
+
+.dcmseg-segmentation-settings .settings-group .range {
+  display: flex;
+  padding: 20px 15px;
+}
+
+.dcmseg-segmentation-settings .settings-group .range:not(:last-of-type) {
+  padding-bottom: 0;
+}
+
+.dcmseg-segmentation-settings .settings-group .range label {
+  margin: 0;
+  display: unset;
+  min-width: 40px;
+  max-width: 40px;
+}
+
+.dcmseg-segmentation-settings .settings-group .range input {
+  width: 100%;
+  padding: 0 20px 0 20px;
+}
+
+.dcmseg-segmentation-settings .custom-check label {
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 2px solid black;
+  padding: 10px 15px;
+}
+
+.dcmseg-segmentation-settings .custom-check input {
+  width: 15px;
+  height: 15px;
+}
+
+.dcmseg-segmentation-settings .settings-group {
+  background-color: var(--ui-gray-dark);
+  border-radius: 5px;
+}
+
+.dcmseg-segmentation-settings .return-button {
+  color: #333;
+  background-color: #fff;
+  padding: 4px 12px;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+
+.dcmseg-segmentation-settings .return-button:hover,
+.dcmseg-segmentation-settings .return-button:active,
+.dcmseg-segmentation-settings .return-button.active {
+  background-color: var(--active-color);
+  border-color: var(--ui-border-color-active);
+  color: #fff;
+}

extensions/dicom-segmentation/src/components/SegmentationSettings/SegmentationSettings.js

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Range } from '@ohif/ui';
+
+import './SegmentationSettings.css';
+
+const SegmentationSettings = ({ configuration, onBack, onChange }) => {
+  const [state, setState] = useState({
+    renderFill: configuration.renderFill,
+    renderOutline: configuration.renderOutline,
+    shouldRenderInactiveLabelmaps: configuration.shouldRenderInactiveLabelmaps,
+    fillAlpha: configuration.fillAlpha,
+    outlineAlpha: configuration.outlineAlpha,
+    outlineWidth: configuration.outlineWidth,
+    fillAlphaInactive: configuration.fillAlphaInactive,
+    outlineAlphaInactive: configuration.outlineAlphaInactive
+  });
+
+  useEffect(() => {
+    onChange(state);
+  }, [state]);
+
+  const check = field => {
+    setState(state => ({ ...state, [field]: !state[field] }));
+  };
+
+  const save = (field, value) => {
+    setState(state => ({ ...state, [field]: value }));
+  };
+
+  const toFloat = value => parseFloat(value / 100).toFixed(2);
+
+  return (
+    <div className="dcmseg-segmentation-settings">
+      <div className="settings-title">
+        <h3>Segmentations Settings</h3>
+        <button className="return-button" onClick={onBack}>
+          Back
+        </button>
+      </div>
+      <div
+        className="settings-group"
+        style={{ marginBottom: state.renderFill ? 15 : 0 }}
+      >
+        <CustomCheck
+          label="Segment Fill"
+          checked={state.renderFill}
+          onChange={() => check('renderFill')}
+        />
+        {state.renderFill && (
+          <CustomRange
+            label="Opacity"
+            step={1}
+            min={0}
+            max={100}
+            value={state.fillAlpha * 100}
+            onChange={event => save('fillAlpha', toFloat(event.target.value))}
+            showPercentage
+          />
+        )}
+      </div>
+      <div
+        className="settings-group"
+        style={{ marginBottom: state.renderOutline ? 15 : 0 }}
+      >
+        <CustomCheck
+          label="Segment Outline"
+          checked={state.renderOutline}
+          onChange={() => check('renderOutline')}
+        />
+        {state.renderOutline && (
+          <>
+            <CustomRange
+              value={state.outlineAlpha * 100}
+              label="Opacity"
+              showPercentage
+              step={1}
+              min={0}
+              max={100}
+              onChange={event => save('outlineAlpha', toFloat(event.target.value))}
+            />
+            <CustomRange
+              value={state.outlineWidth}
+              label="Width"
+              showValue
+              step={1}
+              min={0}
+              max={5}
+              onChange={event => save('outlineWidth', parseInt(event.target.value))}
+            />
+          </>
+        )}
+      </div>
+      {(state.renderFill || state.renderOutline) && (
+        <div
+          className="settings-group"
+          style={{ marginBottom: state.shouldRenderInactiveLabelmaps ? 15 : 0 }}
+        >
+          <CustomCheck
+            label="Render inactive segmentations"
+            checked={state.shouldRenderInactiveLabelmaps}
+            onChange={() => check('shouldRenderInactiveLabelmaps')}
+          />
+          {state.shouldRenderInactiveLabelmaps && (
+            <>
+              {state.renderFill && (
+                <CustomRange
+                  label="Fill Opacity"
+                  showPercentage
+                  step={1}
+                  min={0}
+                  max={100}
+                  value={state.fillAlphaInactive * 100}
+                  onChange={event => save('fillAlphaInactive', toFloat(event.target.value))}
+                />
+              )}
+              {state.renderOutline && (
+                <CustomRange
+                  label="Outline Opacity"
+                  showPercentage
+                  step={1}
+                  min={0}
+                  max={100}
+                  value={state.outlineAlphaInactive * 100}
+                  onChange={event => save('outlineAlphaInactive', toFloat(event.target.value))}
+                />
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CustomCheck = ({ label, checked, onChange }) => {
+  return (
+    <div className="custom-check">
+      <label>
+        <span>{label}</span>
+        <input type="checkbox" checked={checked} onChange={onChange} />
+      </label>
+    </div>
+  );
+};
+
+const CustomRange = props => {
+  const { label, onChange } = props;
+  return (
+    <div className="range">
+      <label htmlFor="range">{label}</label>
+      <Range
+        {...props}
+        onChange={event => {
+          event.persist();
+          onChange(event);
+        }}
+      />
+    </div>
+  );
+};
+
+SegmentationSettings.propTypes = {
+  configuration: PropTypes.shape({
+    renderFill: PropTypes.bool.isRequired,
+    renderOutline: PropTypes.bool.isRequired,
+    shouldRenderInactiveLabelmaps: PropTypes.bool.isRequired,
+    fillAlpha: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, /* TODO: why fillAlpha is string? */
+    outlineAlpha: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, /* TODO: why fillAlpha is string? */
+    outlineWidth: PropTypes.number.isRequired,
+    fillAlphaInactive: PropTypes.number.isRequired,
+    outlineAlphaInactive: PropTypes.number.isRequired,
+  }).isRequired,
+  onBack: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default SegmentationSettings;

extensions/dicom-segmentation/src/components/index.js

@@ -0,0 +1,7 @@
+export { default as BrushColorSelector } from './BrushColorSelector/BrushColorSelector';
+export { default as BrushRadius } from './BrushRadius/BrushRadius';
+export { default as SegmentationItem } from './SegmentationItem/SegmentationItem';
+export { default as SegmentationSettings } from './SegmentationSettings/SegmentationSettings';
+export { default as SegmentationPanel } from './SegmentationPanel/SegmentationPanel';
+export { default as SegmentItem } from './SegmentItem/SegmentItem';
+export { default as SegmentationSelect } from './SegmentationSelect';

extensions/dicom-segmentation/src/index.js

@@ -0,0 +1,30 @@
+import init from './init.js';
+import toolbarModule from './toolbarModule.js';
+import panelModule from './panelModule.js';
+import sopClassHandlerModule from './OHIFDicomSegSopClassHandler.js';
+
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'com.ohif.dicom-segmentation',
+
+  /**
+   *
+   *
+   * @param {object} [configuration={}]
+   * @param {object|array} [configuration.csToolsConfig] - Passed directly to `initCornerstoneTools`
+   */
+  preRegistration({ servicesManager, configuration = {} }) {
+    init({ servicesManager, configuration });
+  },
+  getToolbarModule({ servicesManager }) {
+    return toolbarModule;
+  },
+  getPanelModule({ servicesManager }) {
+    return panelModule;
+  },
+  getSopClassHandlerModule({ servicesManager }) {
+    return sopClassHandlerModule;
+  },
+};

extensions/dicom-segmentation/src/init.js

@@ -0,0 +1,20 @@
+import csTools from 'cornerstone-tools';
+
+/**
+ *
+ * @param {object} configuration
+ * @param {Object|Array} configuration.csToolsConfig
+ */
+export default function init({ servicesManager, configuration = {} }) {
+  const { BrushTool, SphericalBrushTool, CorrectionScissorsTool } = csTools;
+  const tools = [BrushTool, SphericalBrushTool, CorrectionScissorsTool];
+
+  tools.forEach(tool => csTools.addTool(tool));
+
+  csTools.addTool(BrushTool, {
+    name: 'BrushEraser',
+    configuration: {
+      alwaysEraseOnClick: true,
+    },
+  });
+}

extensions/dicom-segmentation/src/loadSegmentation.js

@@ -0,0 +1,115 @@
+import OHIF from '@ohif/core';
+import * as dcmjs from 'dcmjs';
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+
+const { DicomLoaderService } = OHIF.utils;
+
+export default async function loadSegmentation(
+  segDisplaySet,
+  referencedDisplaySet,
+  studies
+) {
+  const { StudyInstanceUID } = referencedDisplaySet;
+
+  // Set here is loading is asynchronous.
+  // If this function throws its set back to false.
+  segDisplaySet.isLoaded = true;
+
+  const segArrayBuffer = await DicomLoaderService.findDicomDataPromise(
+    segDisplaySet,
+    studies
+  );
+
+  const dicomData = dcmjs.data.DicomMessage.readFile(segArrayBuffer);
+  const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
+    dicomData.dict
+  );
+
+  dataset._meta = dcmjs.data.DicomMetaDictionary.namifyDataset(dicomData.meta);
+
+  const imageIds = _getImageIdsForDisplaySet(
+    studies,
+    StudyInstanceUID,
+    referencedDisplaySet.SeriesInstanceUID
+  );
+
+  const results = _parseSeg(segArrayBuffer, imageIds);
+
+  if (!results) {
+    throw new Error('Fractional segmentations are not yet supported');
+  }
+
+  const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
+  const { setters } = cornerstoneTools.getModule('segmentation');
+
+  // TODO: Could define a color LUT based on colors in the SEG.
+  const labelmapIndex = _getNextLabelmapIndex(imageIds[0]);
+
+  setters.labelmap3DByFirstImageId(
+    imageIds[0],
+    labelmapBuffer,
+    labelmapIndex,
+    segMetadata,
+    imageIds.length,
+    segmentsOnFrame
+  );
+
+  segDisplaySet.labelmapIndex = labelmapIndex;
+}
+
+function _getNextLabelmapIndex(firstImageId) {
+  const { state } = cornerstoneTools.getModule('segmentation');
+  const brushStackState = state.series[firstImageId];
+
+  let labelmapIndex = 0;
+
+  if (brushStackState) {
+    const { labelmaps3D } = brushStackState;
+    labelmapIndex = labelmaps3D.length;
+
+    for (let i = 0; i < labelmaps3D.length; i++) {
+      if (!labelmaps3D[i]) {
+        labelmapIndex = i;
+        break;
+      }
+    }
+  }
+
+  return labelmapIndex;
+}
+
+function _parseSeg(arrayBuffer, imageIds) {
+  return dcmjs.adapters.Cornerstone.Segmentation.generateToolState(
+    imageIds,
+    arrayBuffer,
+    cornerstone.metaData
+  );
+}
+
+function _getImageIdsForDisplaySet(
+  studies,
+  StudyInstanceUID,
+  SeriesInstanceUID
+) {
+  const study = studies.find(
+    study => study.StudyInstanceUID === StudyInstanceUID
+  );
+
+  const displaySets = study.displaySets.filter(displaySet => {
+    return displaySet.SeriesInstanceUID === SeriesInstanceUID;
+  });
+
+  if (displaySets.length > 1) {
+    console.warn(
+      'More than one display set with the same SeriesInstanceUID. This is not supported yet...'
+    );
+    // TODO -> We could make check the instance list and see if any match?
+    // Do we split the segmentation into two cornerstoneTools segmentations if there are images in both series?
+    // ^ Will that even happen?
+  }
+
+  const referencedDisplaySet = displaySets[0];
+
+  return referencedDisplaySet.images.map(image => image.getImageId());
+}

extensions/dicom-segmentation/src/panelModule.js

@@ -0,0 +1,39 @@
+import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';
+
+export default {
+  menuOptions: [
+    {
+      icon: 'list',
+      label: 'Segmentations',
+      target: 'segmentation-panel',
+      isDisabled: studies => {
+        if (!studies) {
+          return true;
+        }
+
+        for (let i = 0; i < studies.length; i++) {
+          const study = studies[i];
+
+          if (study && study.series) {
+            for (let j = 0; j < study.series.length; j++) {
+              const series = study.series[j];
+
+              if (series.Modality === 'SEG') {
+                return false;
+              }
+            }
+          }
+        }
+
+        return true;
+      },
+    },
+  ],
+  components: [
+    {
+      id: 'segmentation-panel',
+      component: SegmentationPanel,
+    },
+  ],
+  defaultContext: ['VIEWER'],
+};

extensions/dicom-segmentation/src/toolbarModule.js

@@ -0,0 +1,60 @@
+/* TODO: Creation tools (future release).
+
+const TOOLBAR_BUTTON_TYPES = {
+  COMMAND: 'command',
+  SET_TOOL_ACTIVE: 'setToolActive',
+  BUILT_IN: 'builtIn',
+};
+
+*/
+
+const definitions = []; /* TODO: Creation tools (future release). [
+  {
+    id: 'SegDropdown',
+    label: 'Segmentation',
+    icon: 'ellipse-circle',
+    buttons: [
+      {
+        id: 'Brush',
+        label: 'Brush',
+        icon: 'brush',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Brush' },
+      },
+      {
+        id: 'SphericalBrush',
+        label: 'Spherical',
+        icon: 'sphere',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'SphericalBrush' },
+      },
+      {
+        id: 'CorrectionScissors',
+        label: 'Correction Scissors',
+        icon: 'scissors',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'CorrectionScissors' },
+      },
+      {
+        id: 'BrushEraser',
+        label: 'Eraser',
+        icon: 'trash',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'BrushEraser' },
+      },
+    ],
+  },
+]; */
+
+export default {
+  definitions,
+  defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE',
+};

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

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

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

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

extensions/lesion-tracker/CHANGELOG.md

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

extensions/lesion-tracker/LICENSE

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

extensions/lesion-tracker/README.md

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

extensions/lesion-tracker/package.json

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

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

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

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

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

extensions/lesion-tracker/src/index.js

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

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.0.1",
+  "version": "1.3.3",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -33,8 +33,9 @@
     "@ohif/i18n": "^0.50.0",
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
+    "cornerstone-tools": "4.12.5",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.10.1",
     "dicom-parser": "^1.8.3",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
@@ -49,14 +50,13 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.3.9"
+    "react-vtkjs-viewport": "^0.8.3"
   },
   "devDependencies": {
-    "@ohif/core": "^2.0.1",
-    "@ohif/ui": "^1.0.1",
-    "cornerstone-tools": "^4.8.0",
+    "@ohif/core": "^2.6.2",
+    "@ohif/ui": "^1.4.1",
+    "cornerstone-tools": "4.12.5",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",
     "gh-pages": "^2.0.1",
     "i18next": "^17.0.3",

extensions/vtk/src/ConnectedVTKViewport.js

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

extensions/vtk/src/OHIFVTKViewport.js

@@ -1,46 +1,34 @@
 import React, { Component } from 'react';
 import { getImageData, loadImageData } from 'react-vtkjs-viewport';
-
 import ConnectedVTKViewport from './ConnectedVTKViewport';
 import LoadingIndicator from './LoadingIndicator.js';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
-import handleSegmentationStorage from './handleSegmentationStorage.js';
+import cornerstoneTools from 'cornerstone-tools';
 import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
 import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
 import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
 
+const segmentationModule = cornerstoneTools.getModule('segmentation');
+
 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;
-
 // TODO: Figure out where we plan to put this long term
 const volumeCache = {};
+const labelmapCache = {};
 
 /**
  * Create a labelmap image with the same dimensions as our background volume.
  *
  * @param backgroundImageData vtkImageData
  */
+/* TODO: Not currently used until we have drawing tools in vtkjs.
 function createLabelMapImageData(backgroundImageData) {
+  // TODO => Need to do something like this if we start drawing a new segmentation
+  // On a vtkjs viewport.
+
   const labelMapData = vtkImageData.newInstance(
     backgroundImageData.get('spacing', 'origin', 'direction')
   );
@@ -55,7 +43,7 @@ function createLabelMapImageData(backgroundImageData) {
   labelMapData.getPointData().setScalars(dataArray);
 
   return labelMapData;
-}
+} */
 
 class OHIFVTKViewport extends Component {
   state = {
@@ -68,15 +56,20 @@ class OHIFVTKViewport extends Component {
     viewportData: PropTypes.shape({
       studies: PropTypes.array,
       displaySet: PropTypes.shape({
-        studyInstanceUid: PropTypes.string,
-        displaySetInstanceUid: PropTypes.string,
-        sopClassUids: PropTypes.arrayOf(PropTypes.string),
-        sopInstanceUid: PropTypes.string,
+        StudyInstanceUID: PropTypes.string,
+        displaySetInstanceUID: PropTypes.string,
+        sopClassUIDs: PropTypes.arrayOf(PropTypes.string),
+        SOPInstanceUID: PropTypes.string,
         frameIndex: PropTypes.number,
       }),
     }),
     viewportIndex: PropTypes.number,
     children: PropTypes.node,
+    onScroll: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onScroll: () => {},
   };
 
   static id = 'OHIFVTKViewport';
@@ -92,18 +85,18 @@ class OHIFVTKViewport extends Component {
 
   static getCornerstoneStack(
     studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPInstanceUID,
     frameIndex
   ) {
     // Create shortcut to displaySet
     const study = studies.find(
-      study => study.studyInstanceUid === studyInstanceUid
+      study => study.StudyInstanceUID === StudyInstanceUID
     );
 
     const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUid === displaySetInstanceUid;
+      return set.displaySetInstanceUID === displaySetInstanceUID;
     });
 
     // Get stack from Stack Manager
@@ -114,17 +107,14 @@ class OHIFVTKViewport extends Component {
 
     if (frameIndex !== undefined) {
       stack.currentImageIdIndex = frameIndex;
-    } else if (sopInstanceUid) {
+    } else if (SOPInstanceUID) {
       const index = stack.imageIds.findIndex(imageId => {
-        const sopCommonModule = cornerstone.metaData.get(
-          'sopCommonModule',
+        const imageIdSOPInstanceUID = cornerstone.metaData.get(
+          'SOPInstanceUID',
           imageId
         );
-        if (!sopCommonModule) {
-          return;
-        }
 
-        return sopCommonModule.sopInstanceUID === sopInstanceUid;
+        return imageIdSOPInstanceUID === SOPInstanceUID;
       });
 
       if (index > -1) {
@@ -139,48 +129,73 @@ class OHIFVTKViewport extends Component {
 
   getViewportData = (
     studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopClassUid,
-    sopInstanceUid,
+    StudyInstanceUID,
+    displaySetInstanceUID,
+    SOPClassUID,
+    SOPInstanceUID,
     frameIndex
   ) => {
     const stack = OHIFVTKViewport.getCornerstoneStack(
       studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUid,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPClassUID,
+      SOPInstanceUID,
       frameIndex
     );
 
-    let imageDataObject;
+    const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
     let labelmapDataObject;
+    let labelmapColorLUT;
 
-    switch (sopClassUid) {
-      case SOP_CLASSES.SEGMENTATION_STORAGE:
-        throw new Error('Not yet implemented');
-      /*
-        const data = handleSegmentationStorage(
-          stack.imageIds,
-          displaySetInstanceUid
+    const firstImageId = stack.imageIds[0];
+    const { state } = segmentationModule;
+    const brushStackState = state.series[firstImageId];
+
+    if (brushStackState) {
+      const { activeLabelmapIndex } = brushStackState;
+      const labelmap3D = brushStackState.labelmaps3D[activeLabelmapIndex];
+
+      const vtkLabelmapID = `${firstImageId}_${activeLabelmapIndex}`;
+
+      if (labelmapCache[vtkLabelmapID]) {
+        labelmapDataObject = labelmapCache[vtkLabelmapID];
+      } else {
+        // TODO -> We need an imageId based getter in cornerstoneTools
+        const labelmapBuffer = labelmap3D.buffer;
+
+        // Create VTK Image Data with buffer as input
+        labelmapDataObject = vtkImageData.newInstance();
+
+        const dataArray = vtkDataArray.newInstance({
+          numberOfComponents: 1, // labelmap with single component
+          values: new Uint16Array(labelmapBuffer),
+        });
+
+        labelmapDataObject.getPointData().setScalars(dataArray);
+        labelmapDataObject.setDimensions(...imageDataObject.dimensions);
+        labelmapDataObject.setSpacing(
+          ...imageDataObject.vtkImageData.getSpacing()
+        );
+        labelmapDataObject.setOrigin(
+          ...imageDataObject.vtkImageData.getOrigin()
+        );
+        labelmapDataObject.setDirection(
+          ...imageDataObject.vtkImageData.getDirection()
         );
 
-        imageDataObject = data.referenceDataObject;
-        labelmapDataObject = data.labelmapDataObject;
+        // Cache the labelmap volume.
+        labelmapCache[vtkLabelmapID] = labelmapDataObject;
+      }
 
-        return loadImageData(imageDataObject).then(() => {
-          return {
-            data: imageDataObject.vtkImageData,
-            labelmap: labelmapDataObject,
-          };
-        });
-        */
-      default:
-        imageDataObject = getImageData(stack.imageIds, displaySetInstanceUid);
-
-        return imageDataObject;
+      labelmapColorLUT = state.colorLutTables[labelmap3D.colorLUTIndex];
     }
+
+    return {
+      imageDataObject,
+      labelmapDataObject,
+      labelmapColorLUT,
+    };
   };
 
   /**
@@ -189,25 +204,31 @@ class OHIFVTKViewport extends Component {
    * @param {object} imageDataObject
    * @param {object} imageDataObject.vtkImageData
    * @param {object} imageDataObject.imageMetaData0
-   * @param {number} [imageDataObject.imageMetaData0.windowWidth] - The volume's initial windowWidth
-   * @param {number} [imageDataObject.imageMetaData0.windowCenter] - The volume's initial windowCenter
-   * @param {string} imageDataObject.imageMetaData0.modality - CT, MR, PT, etc
-   * @param {string} displaySetInstanceUid
+   * @param {number} [imageDataObject.imageMetaData0.WindowWidth] - The volume's initial WindowWidth
+   * @param {number} [imageDataObject.imageMetaData0.WindowCenter] - The volume's initial WindowCenter
+   * @param {string} imageDataObject.imageMetaData0.Modality - CT, MR, PT, etc
+   * @param {string} displaySetInstanceUID
    * @returns vtkVolumeActor
    * @memberof OHIFVTKViewport
    */
-  getOrCreateVolume(imageDataObject, displaySetInstanceUid) {
-    if (volumeCache[displaySetInstanceUid]) {
-      return volumeCache[displaySetInstanceUid];
+  getOrCreateVolume(imageDataObject, displaySetInstanceUID) {
+    if (volumeCache[displaySetInstanceUID]) {
+      return volumeCache[displaySetInstanceUID];
     }
 
     const { vtkImageData, imageMetaData0 } = imageDataObject;
-    const { windowWidth, windowCenter, modality } = imageMetaData0;
+    // TODO -> Should update react-vtkjs-viewport and react-cornerstone-viewports
+    // internals to use naturalized DICOM JSON names.
+    const {
+      windowWidth: WindowWidth,
+      windowCenter: WindowCenter,
+      modality: Modality,
+    } = imageMetaData0;
 
     const { lower, upper } = _getRangeFromWindowLevels(
-      windowWidth,
-      windowCenter,
-      modality
+      WindowWidth,
+      WindowCenter,
+      Modality
     );
     const volumeActor = vtkVolume.newInstance();
     const volumeMapper = vtkVolumeMapper.newInstance();
@@ -231,7 +252,7 @@ class OHIFVTKViewport extends Component {
     // TODO: maybe we should auto adjust samples to 1000.
     volumeMapper.setMaximumSamplesPerRay(4000);
 
-    volumeCache[displaySetInstanceUid] = volumeActor;
+    volumeCache[displaySetInstanceUID] = volumeActor;
 
     return volumeActor;
   }
@@ -239,53 +260,61 @@ class OHIFVTKViewport extends Component {
   setStateFromProps() {
     const { studies, displaySet } = this.props.viewportData;
     const {
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUids,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      sopClassUIDs,
+      SOPInstanceUID,
       frameIndex,
     } = displaySet;
 
-    if (sopClassUids.length > 1) {
+    if (sopClassUIDs.length > 1) {
       console.warn(
-        'More than one SOPClassUid in the same series is not yet supported.'
+        'More than one SOPClassUID in the same series is not yet supported.'
       );
     }
 
-    const sopClassUid = sopClassUids[0];
-    const imageDataObject = this.getViewportData(
+    const study = studies.find(
+      study => study.StudyInstanceUID === StudyInstanceUID
+    );
+
+    const dataDetails = {
+      studyDate: study.studyDate,
+      studyTime: study.studyTime,
+      studyDescription: study.studyDescription,
+      patientName: study.patientName,
+      patientId: study.patientId,
+      seriesNumber: String(displaySet.seriesNumber),
+      seriesDescription: displaySet.seriesDescription,
+    };
+
+    const {
+      imageDataObject,
+      labelmapDataObject,
+      labelmapColorLUT,
+    } = this.getViewportData(
       studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopClassUid,
-      sopInstanceUid,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPInstanceUID,
       frameIndex
     );
 
     this.imageDataObject = imageDataObject;
 
-    // TODO: Temporarily disabling this since it is not yet
-    // being used and hurts performance significantly.
-    /*if (!labelmap) {
+    /* TODO: Not currently used until we have drawing tools in vtkjs.
+    if (!labelmap) {
       labelmap = createLabelMapImageData(data);
-    }*/
+    } */
 
     const volumeActor = this.getOrCreateVolume(
       imageDataObject,
-      displaySetInstanceUid
+      displaySetInstanceUID
     );
 
-    this.setState({
-      paintFilterBackgroundImageData: imageDataObject.vtkImageData,
-      paintFilterLabelMapImageData: null, // TODO
-      percentComplete: 0,
-    });
-
     this.setState(
       {
-        paintFilterBackgroundImageData: imageDataObject.vtkImageData,
-        paintFilterLabelMapImageData: null, // TODO
         percentComplete: 0,
+        dataDetails,
       },
       () => {
         this.loadProgressively(imageDataObject);
@@ -297,6 +326,9 @@ class OHIFVTKViewport extends Component {
         setTimeout(() => {
           this.setState({
             volumes: [volumeActor],
+            paintFilterLabelMapImageData: labelmapDataObject,
+            paintFilterBackgroundImageData: imageDataObject.vtkImageData,
+            labelmapColorLUT,
           });
         }, 200);
       }
@@ -308,13 +340,13 @@ class OHIFVTKViewport 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();
@@ -326,7 +358,7 @@ class OHIFVTKViewport extends Component {
 
     const { isLoading, insertPixelDataPromises } = imageDataObject;
 
-    const numberOfFrames = insertPixelDataPromises.length;
+    const NumberOfFrames = insertPixelDataPromises.length;
 
     if (!isLoading) {
       this.setState({ isLoaded: true });
@@ -336,7 +368,7 @@ class OHIFVTKViewport extends Component {
     insertPixelDataPromises.forEach(promise => {
       promise.then(numberProcessed => {
         const percentComplete = Math.floor(
-          (numberProcessed * 100) / numberOfFrames
+          (numberProcessed * 100) / NumberOfFrames
         );
 
         if (percentComplete !== this.state.percentComplete) {
@@ -348,12 +380,15 @@ class OHIFVTKViewport extends Component {
     });
 
     Promise.all(insertPixelDataPromises).then(() => {
-      this.setState({ isLoaded: true });
+      this.setState({
+        isLoaded: true,
+      });
     });
   }
 
   render() {
     let childrenWithProps = null;
+    const { configuration } = segmentationModule;
 
     // TODO: Does it make more sense to use Context?
     if (this.props.children && this.props.children.length) {
@@ -370,6 +405,10 @@ class OHIFVTKViewport extends Component {
 
     const style = { width: '100%', height: '100%', position: 'relative' };
 
+    const visible = configuration.renderFill || configuration.renderOutline;
+    const opacity = configuration.fillAlpha;
+    const outlineThickness = configuration.outlineThickness;
+
     return (
       <>
         <div style={style}>
@@ -386,6 +425,15 @@ class OHIFVTKViewport extends Component {
                 this.state.paintFilterBackgroundImageData
               }
               viewportIndex={this.props.viewportIndex}
+              dataDetails={this.state.dataDetails}
+              labelmapRenderingOptions={{
+                colorLUT: this.state.labelmapColorLUT,
+                globalOpacity: opacity,
+                visible,
+                outlineThickness,
+                renderOutline: true,
+              }}
+              onScroll={this.props.onScroll}
             />
           )}
         </div>
@@ -403,21 +451,21 @@ class OHIFVTKViewport extends Component {
  * @private
  * @param {number} [width] - the width of our window
  * @param {number} [center] - the center of our window
- * @param {string} [modality] - 'PT', 'CT', etc.
+ * @param {string} [Modality] - 'PT', 'CT', etc.
  * @returns { lower, upper } - range
  */
-function _getRangeFromWindowLevels(width, center, modality = undefined) {
+function _getRangeFromWindowLevels(width, center, Modality = undefined) {
+  // For PET just set the range to 0-5 SUV
+  if (Modality === 'PT') {
+    return { lower: 0, upper: 5 };
+  }
+
   const levelsAreNotNumbers = isNaN(center) || isNaN(width);
 
   if (levelsAreNotNumbers) {
     return { lower: 0, upper: 512 };
   }
 
-  // For PET just set the range to 0-5 SUV
-  if (modality === 'PT') {
-    return { lower: 0, upper: 5 };
-  }
-
   return {
     lower: center - width / 2.0,
     upper: center + width / 2.0,

extensions/vtk/src/VTKViewport.css

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

extensions/vtk/src/VTKViewport.js

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

extensions/vtk/src/commandsModule.js

@@ -70,12 +70,9 @@ const commandsModule = ({ commandsManager }) => {
     if (cornerstoneElement) {
       const imageId = cornerstoneElement.image.imageId;
 
-      const { modality } = cornerstone.metaData.get(
-        'generalSeriesModule',
-        imageId
-      );
+      const Modality = cornerstone.metaData.get('Modality', imageId);
 
-      if (modality !== 'PT') {
+      if (Modality !== 'PT') {
         const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
 
         return {
@@ -103,6 +100,9 @@ const commandsModule = ({ commandsManager }) => {
   }
 
   const actions = {
+    getVtkApis: ({ index }) => {
+      return apis[index];
+    },
     axial: async ({ viewports }) => {
       const api = await _getActiveViewportVTKApi(viewports);
 
@@ -234,7 +234,7 @@ const commandsModule = ({ commandsManager }) => {
           },
         },
         {
-          // Sagital
+          // Sagittal
           orientation: {
             sliceNormal: [1, 0, 0],
             viewUp: [0, 0, 1],
@@ -266,11 +266,12 @@ const commandsModule = ({ commandsManager }) => {
           'crosshairsWidget'
         );
 
+        const uid = api.uid;
         const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
 
         api.setInteractorStyle({
           istyle,
-          configuration: { apis, apiIndex },
+          configuration: { apis, apiIndex, uid },
         });
       });
     },
@@ -296,55 +297,45 @@ const commandsModule = ({ commandsManager }) => {
     },
     enableRotateTool: {
       commandFn: actions.enableRotateTool,
-      storeContexts: [],
       options: {},
     },
     enableCrosshairsTool: {
       commandFn: actions.enableCrosshairsTool,
-      storeContexts: [],
       options: {},
     },
     enableLevelTool: {
       commandFn: actions.enableLevelTool,
-      storeContexts: [],
       options: {},
     },
     setBlendModeToComposite: {
       commandFn: actions.setBlendModeToComposite,
-      storeContexts: [],
       options: { blendMode: BlendMode.COMPOSITE_BLEND },
     },
     setBlendModeToMaximumIntensity: {
       commandFn: actions.setBlendModeToMaximumIntensity,
-      storeContexts: [],
       options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
     },
     setBlendModeToMinimumIntensity: {
       commandFn: actions.setBlendMode,
-      storeContexts: [],
       options: { blendMode: BlendMode.MINIMUM_INTENSITY_BLEND },
     },
     setBlendModeToAverageIntensity: {
       commandFn: actions.setBlendMode,
-      storeContexts: [],
       options: { blendMode: BlendMode.AVERAGE_INTENSITY_BLEND },
     },
     setSlabThickness: {
       // TODO: How do we pass in a function argument?
       commandFn: actions.setSlabThickness,
-      storeContexts: [],
       options: {},
     },
     increaseSlabThickness: {
       commandFn: actions.changeSlabThickness,
-      storeContexts: [],
       options: {
         change: 3,
       },
     },
     decreaseSlabThickness: {
       commandFn: actions.changeSlabThickness,
-      storeContexts: [],
       options: {
         change: -3,
       },
@@ -355,6 +346,10 @@ const commandsModule = ({ commandsManager }) => {
       options: {},
       context: 'VIEWER',
     },
+    getVtkApiForViewportIndex: {
+      commandFn: actions.getVtkApis,
+      context: 'VIEWER',
+    },
   };
 
   return {

extensions/vtk/src/handleSegmentationStorage.js

@@ -1,150 +0,0 @@
-import * as dcmjs from "dcmjs";
-
-import OHIF from "@ohif/core";
-import { api } from "dicomweb-client";
-
-const { StackManager } = 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 getCornerstoneStack(studies, studyInstanceUid, displaySetInstanceUid) {
-  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
-  );
-
-  // Create shortcut to displaySet
-  const displaySet = getDisplaySet(
-    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
-  );
-
-  // Get stack from Stack Manager
-  const stack = StackManager.findOrCreateStack(study, displaySet);
-
-  // Clone the stack here so we don't mutate it later
-  const stackClone = Object.assign({}, stack);
-  stackClone.currentImageIdIndex = 0;
-
-  return stackClone;
-}
-
-function retrieveDicomData(
-  studyInstanceUID,
-  seriesInstanceUID,
-  sopInstanceUID,
-  wadoRoot
-) {
-  const config = {
-    url: wadoRoot,
-    headers: DICOMWeb.getAuthorizationHeader()
-  };
-
-  const dicomWeb = new api.DICOMwebClient(config);
-  const options = {
-    studyInstanceUID,
-    seriesInstanceUID,
-    sopInstanceUID
-  };
-
-  return dicomWeb.retrieveInstance(options);
-}
-
-async function handleSegmentationStorage(
-  studies,
-  studyInstanceUid,
-  displaySetInstanceUid
-) {
-  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
-  );
-  const displaySet = getDisplaySet(
-    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
-  );
-
-  // TODO: This is terrible but we need to use WADO-RS or we can't retrieve the SEG
-  // from google cloud
-  const wadoRoot = displaySet.images[0].getData().wadoRoot;
-
-  const StudyInstanceUID = displaySet.images[0].getStudyInstanceUID();
-  const SeriesInstanceUID = displaySet.images[0].getSeriesInstanceUID();
-  const SOPInstanceUID = displaySet.images[0].getSOPInstanceUID();
-
-  const arrayBuffer = await retrieveDicomData(
-    StudyInstanceUID,
-    SeriesInstanceUID,
-    SOPInstanceUID,
-    wadoRoot
-  );
-
-  const dicomData = dcmjs.data.DicomMessage.readFile(arrayBuffer);
-  const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
-    dicomData.dict
-  );
-
-  const segments = dcmjs.adapters.VTKjs.Segmentation.generateSegments(dataset);
-
-  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());
-
-  if (!results) {
-    throw new Error("Fractional segmentations are not supported");
-  }
-
-  const cachedStack = StackManager.findOrCreateStack(
-    study,
-    referenceDisplaySet
-  );
-  const stack = Object.assign({}, cachedStack);
-  stack.currentImageIdIndex = 0;
-
-  return {
-    referenceDataObject,
-    labelmapDataObject
-  };
-
-  return {
-    studyInstanceUid,
-    displaySetInstanceUid,
-    stack
-  };
-}
-
-export default handleSegmentationStorage;

extensions/vtk/src/index.js

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

extensions/vtk/src/toolbarComponents/VTKMPRToolbarButton.js

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

extensions/vtk/src/toolbarModule.js

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

extensions/vtk/src/withCommandsManager.js

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

jest.config.js

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

package.json

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

platform/core/CHANGELOG.md

@@ -3,6 +3,242 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.6.1...@ohif/core@2.6.2) (2020-03-24)
+
+
+### Bug Fixes
+
+* OverlayPlane module usage for ArrayBuffer, BulkDataURI, and InlineBinary cases, as well as PaletteColor LUTs for ArrayBuffer (i.e. local drag/drop) case ([#1546](https://github.com/OHIF/Viewers/issues/1546)) ([404d52f](https://github.com/OHIF/Viewers/commit/404d52fe5c0442dd13e4d407bb0687d72fa5f32c))
+
+
+
+
+
+## [2.6.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.6.0...@ohif/core@2.6.1) (2020-03-23)
+
+
+### Bug Fixes
+
+* avoid-wasteful-renders ([#1544](https://github.com/OHIF/Viewers/issues/1544)) ([e41d339](https://github.com/OHIF/Viewers/commit/e41d339f5faef6b93700bc860f37f29f32ad5ed6))
+
+
+
+
+
+# [2.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.5.3...@ohif/core@2.6.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)
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.5.3](https://github.com/OHIF/Viewers/compare/@ohif/core@2.5.2...@ohif/core@2.5.3) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.5.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.5.1...@ohif/core@2.5.2) (2020-03-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.5.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.5.0...@ohif/core@2.5.1) (2020-02-21)
+
+
+### Bug Fixes
+
+* 💡 Update log to warn ([#1454](https://github.com/OHIF/Viewers/issues/1454)) ([509a7b7](https://github.com/OHIF/Viewers/commit/509a7b7e57834a0653add98cc320b2a5dbefd51d)), closes [#1451](https://github.com/OHIF/Viewers/issues/1451)
+
+
+
+
+
+# [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.4.1...@ohif/core@2.5.0) (2020-02-20)
+
+
+### Features
+
+* [#1342](https://github.com/OHIF/Viewers/issues/1342) - Window level tab ([#1429](https://github.com/OHIF/Viewers/issues/1429)) ([ebc01a8](https://github.com/OHIF/Viewers/commit/ebc01a8ca238d5a3437b44d81f75aa8a5e8d0574))
+
+
+
+
+
+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.4.0...@ohif/core@2.4.1) (2020-02-12)
+
+
+### Bug Fixes
+
+* Combined Hotkeys for special characters ([#1233](https://github.com/OHIF/Viewers/issues/1233)) ([2f30e7a](https://github.com/OHIF/Viewers/commit/2f30e7a821a238144c49c56f37d8e5565540b4bd))
+
+
+
+
+
+# [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.9...@ohif/core@2.4.0) (2020-02-10)
+
+
+### Features
+
+* 🎸 MeasurementService ([#1314](https://github.com/OHIF/Viewers/issues/1314)) ([0c37a40](https://github.com/OHIF/Viewers/commit/0c37a406d963569af8c3be24c697dafd42712dfc))
+
+
+
+
+
+## [2.3.9](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.8...@ohif/core@2.3.9) (2020-02-07)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.8](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.7...@ohif/core@2.3.8) (2020-02-06)
+
+
+### Bug Fixes
+
+* Remove trash data from redux storage after updates ([#1358](https://github.com/OHIF/Viewers/issues/1358)) ([7b2d44f](https://github.com/OHIF/Viewers/commit/7b2d44f2c18241ea521b8d3652aee32e36eaddb8))
+
+
+
+
+
+## [2.3.7](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.6...@ohif/core@2.3.7) (2020-01-30)
+
+
+### Bug Fixes
+
+* Set VTK viewport as active by interaction  ([#1139](https://github.com/OHIF/Viewers/issues/1139)) ([686d12d](https://github.com/OHIF/Viewers/commit/686d12da5c9d3d435b1e326c2a5caee36e2ed27c))
+
+
+
+
+
+## [2.3.6](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.5...@ohif/core@2.3.6) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.5](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.4...@ohif/core@2.3.5) (2020-01-28)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.4](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.3...@ohif/core@2.3.4) (2020-01-27)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.3](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.2...@ohif/core@2.3.3) (2020-01-24)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.1...@ohif/core@2.3.2) (2020-01-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.3.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.3.0...@ohif/core@2.3.1) (2019-12-30)
+
+
+### Bug Fixes
+
+* 🐛 1241: Make Plugin switch part of ToolbarModule ([#1322](https://github.com/OHIF/Viewers/issues/1322)) ([6540e36](https://github.com/OHIF/Viewers/commit/6540e36818944ac2eccc696186366ae495b33a04)), closes [#1241](https://github.com/OHIF/Viewers/issues/1241)
+
+
+
+
+
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.2.1...@ohif/core@2.3.0) (2019-12-20)
+
+
+### Features
+
+* 🎸 Configuration so viewer tools can nix handles ([#1304](https://github.com/OHIF/Viewers/issues/1304)) ([63594d3](https://github.com/OHIF/Viewers/commit/63594d36b0bdba59f0901095aed70b75fb05172d)), closes [#1223](https://github.com/OHIF/Viewers/issues/1223)
+
+
+
+
+
+## [2.2.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.2.0...@ohif/core@2.2.1) (2019-12-18)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.2.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.1.1...@ohif/core@2.2.0) (2019-12-16)
+
+
+### Features
+
+* 🎸 Expose extension config to modules ([#1279](https://github.com/OHIF/Viewers/issues/1279)) ([4ea239a](https://github.com/OHIF/Viewers/commit/4ea239a9535ef297e23387c186e537ab273744ea)), closes [#1268](https://github.com/OHIF/Viewers/issues/1268)
+
+
+
+
+
+## [2.1.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.1.0...@ohif/core@2.1.1) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.1.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.2...@ohif/core@2.1.0) (2019-12-11)
+
+
+### Features
+
+* 🎸 DICOM SR STOW on MeasurementAPI ([#954](https://github.com/OHIF/Viewers/issues/954)) ([ebe1af8](https://github.com/OHIF/Viewers/commit/ebe1af8d4f75d2483eba869655906d7829bd9666)), closes [#758](https://github.com/OHIF/Viewers/issues/758)
+
+
+
+
+
+## [2.0.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.1...@ohif/core@2.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
 ## [2.0.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.0...@ohif/core@2.0.1) (2019-12-09)
 
 **Note:** Version bump only for package @ohif/core
@@ -106,339 +342,239 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.9.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.8.0...@ohif/core@1.9.0) (2019-11-13)
 
-
 ### Features
 
-* expose UiNotifications service ([#1172](https://github.com/OHIF/Viewers/issues/1172)) ([5c04e34](https://github.com/OHIF/Viewers/commit/5c04e34c8fb2394ab7acd9eb4f2ab12afeb2f255))
-
-
-
-
+- expose UiNotifications service
+  ([#1172](https://github.com/OHIF/Viewers/issues/1172))
+  ([5c04e34](https://github.com/OHIF/Viewers/commit/5c04e34c8fb2394ab7acd9eb4f2ab12afeb2f255))
 
 # [1.8.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.7.1...@ohif/core@1.8.0) (2019-11-12)
 
-
 ### Features
 
-* 🎸 Update hotkeys and user preferences modal ([#1135](https://github.com/OHIF/Viewers/issues/1135)) ([e62f5f8](https://github.com/OHIF/Viewers/commit/e62f5f8dd28ab363f23671cd21cee115abb870ff)), closes [#923](https://github.com/OHIF/Viewers/issues/923)
-
-
-
-
+- 🎸 Update hotkeys and user preferences modal
+  ([#1135](https://github.com/OHIF/Viewers/issues/1135))
+  ([e62f5f8](https://github.com/OHIF/Viewers/commit/e62f5f8dd28ab363f23671cd21cee115abb870ff)),
+  closes [#923](https://github.com/OHIF/Viewers/issues/923)
 
 ## [1.7.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.7.0...@ohif/core@1.7.1) (2019-11-08)
 
-
 ### Bug Fixes
 
-* Add a fallback metadata provider which pulls metadata from WADO-… ([#1158](https://github.com/OHIF/Viewers/issues/1158)) ([31b1adf](https://github.com/OHIF/Viewers/commit/31b1adfa5993d6c8e3e9c8b03fa9856f2621b037))
-
-
-
-
+- Add a fallback metadata provider which pulls metadata from WADO-…
+  ([#1158](https://github.com/OHIF/Viewers/issues/1158))
+  ([31b1adf](https://github.com/OHIF/Viewers/commit/31b1adfa5993d6c8e3e9c8b03fa9856f2621b037))
 
 # [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.2...@ohif/core@1.7.0) (2019-11-05)
 
-
 ### Features
 
-* 🎸 Filter by url query param for seriesInstnaceUID ([#1117](https://github.com/OHIF/Viewers/issues/1117)) ([e208f2e](https://github.com/OHIF/Viewers/commit/e208f2e6a9c49b16dadead0a917f657cf023929a)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
-
-
-
-
+- 🎸 Filter by url query param for seriesInstnaceUID
+  ([#1117](https://github.com/OHIF/Viewers/issues/1117))
+  ([e208f2e](https://github.com/OHIF/Viewers/commit/e208f2e6a9c49b16dadead0a917f657cf023929a)),
+  closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
 
 ## [1.6.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.1...@ohif/core@1.6.2) (2019-11-05)
 
-
 ### Bug Fixes
 
-* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
-
-
-
-
+- [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study
+  List before all series have finishe…
+  ([#1090](https://github.com/OHIF/Viewers/issues/1090))
+  ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
 
 ## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.0...@ohif/core@1.6.1) (2019-10-31)
 
-
 ### Bug Fixes
 
-* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
-
-
-
-
+- application crash if patientName is an object
+  ([#1138](https://github.com/OHIF/Viewers/issues/1138))
+  ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
 
 # [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.2...@ohif/core@1.6.0) (2019-10-26)
 
-
 ### Features
 
-* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
-
-
-
-
+- Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840))
+  ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
 
 ## [1.5.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.1...@ohif/core@1.5.2) (2019-10-25)
 
-
 ### Bug Fixes
 
-* set SR in ActiveViewport by clicking thumb ([#1091](https://github.com/OHIF/Viewers/issues/1091)) ([986b7ae](https://github.com/OHIF/Viewers/commit/986b7ae2bf4f7d27f326e62f93285ce20eaf0a79))
-
-
-
-
+- set SR in ActiveViewport by clicking thumb
+  ([#1091](https://github.com/OHIF/Viewers/issues/1091))
+  ([986b7ae](https://github.com/OHIF/Viewers/commit/986b7ae2bf4f7d27f326e62f93285ce20eaf0a79))
 
 ## [1.5.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.0...@ohif/core@1.5.1) (2019-10-25)
 
-
 ### Bug Fixes
 
-* 🐛 Orthographic MPR fix ([#1092](https://github.com/OHIF/Viewers/issues/1092)) ([460e375](https://github.com/OHIF/Viewers/commit/460e375f0aa75d35f7a46b4d48e6cc706019956d))
-
-
-
-
+- 🐛 Orthographic MPR fix ([#1092](https://github.com/OHIF/Viewers/issues/1092))
+  ([460e375](https://github.com/OHIF/Viewers/commit/460e375f0aa75d35f7a46b4d48e6cc706019956d))
 
 # [1.5.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.4.0...@ohif/core@1.5.0) (2019-10-25)
 
-
 ### Features
 
-* 🎸 Allow routes to load Google Cloud DICOM Stores in the Study List ([#1069](https://github.com/OHIF/Viewers/issues/1069)) ([21b586b](https://github.com/OHIF/Viewers/commit/21b586b08f3dde6613859712a9e0577dece564db))
-
-
-
-
+- 🎸 Allow routes to load Google Cloud DICOM Stores in the Study List
+  ([#1069](https://github.com/OHIF/Viewers/issues/1069))
+  ([21b586b](https://github.com/OHIF/Viewers/commit/21b586b08f3dde6613859712a9e0577dece564db))
 
 # [1.4.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.3.2...@ohif/core@1.4.0) (2019-10-15)
 
-
 ### Features
 
-* 🎸 Only allow reconstruction of datasets that make sense ([#1010](https://github.com/OHIF/Viewers/issues/1010)) ([2d75e01](https://github.com/OHIF/Viewers/commit/2d75e01)), closes [#561](https://github.com/OHIF/Viewers/issues/561)
-
-
-
-
+- 🎸 Only allow reconstruction of datasets that make sense
+  ([#1010](https://github.com/OHIF/Viewers/issues/1010))
+  ([2d75e01](https://github.com/OHIF/Viewers/commit/2d75e01)), closes
+  [#561](https://github.com/OHIF/Viewers/issues/561)
 
 ## [1.3.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.3.1...@ohif/core@1.3.2) (2019-10-14)
 
-
 ### Bug Fixes
 
-* Return display sets in StudyMetadata._createDisplaySetsForSeries ([#1042](https://github.com/OHIF/Viewers/issues/1042)) ([fc01532](https://github.com/OHIF/Viewers/commit/fc01532))
-
-
-
-
+- Return display sets in StudyMetadata.\_createDisplaySetsForSeries
+  ([#1042](https://github.com/OHIF/Viewers/issues/1042))
+  ([fc01532](https://github.com/OHIF/Viewers/commit/fc01532))
 
 ## [1.3.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.3.0...@ohif/core@1.3.1) (2019-10-11)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 # [1.3.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.2.0...@ohif/core@1.3.0) (2019-10-11)
 
-
 ### Features
 
-* 🎸 Improve usability of Google Cloud adapter, including direct routes to studies ([#989](https://github.com/OHIF/Viewers/issues/989)) ([2bc361c](https://github.com/OHIF/Viewers/commit/2bc361c))
-
-
-
-
+- 🎸 Improve usability of Google Cloud adapter, including direct routes to
+  studies ([#989](https://github.com/OHIF/Viewers/issues/989))
+  ([2bc361c](https://github.com/OHIF/Viewers/commit/2bc361c))
 
 # [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.1.0...@ohif/core@1.2.0) (2019-10-09)
 
-
 ### Bug Fixes
 
-* OHIF-1002 Study lazy load should be true by default ([#1004](https://github.com/OHIF/Viewers/issues/1004)) ([66d8bc6](https://github.com/OHIF/Viewers/commit/66d8bc6))
-
+- OHIF-1002 Study lazy load should be true by default
+  ([#1004](https://github.com/OHIF/Viewers/issues/1004))
+  ([66d8bc6](https://github.com/OHIF/Viewers/commit/66d8bc6))
 
 ### Features
 
-* Allow a server requestOptions.auth to be a function that returns the Authorization header. ([#928](https://github.com/OHIF/Viewers/issues/928)) ([0064a4b](https://github.com/OHIF/Viewers/commit/0064a4b))
-
-
-
-
+- Allow a server requestOptions.auth to be a function that returns the
+  Authorization header. ([#928](https://github.com/OHIF/Viewers/issues/928))
+  ([0064a4b](https://github.com/OHIF/Viewers/commit/0064a4b))
 
 # [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.0.2...@ohif/core@1.1.0) (2019-10-03)
 
-
 ### Features
 
-* Use QIDO + WADO to load series metadata individually rather than the entire study metadata at once ([#953](https://github.com/OHIF/Viewers/issues/953)) ([9e10c2b](https://github.com/OHIF/Viewers/commit/9e10c2b))
-
-
-
-
+- Use QIDO + WADO to load series metadata individually rather than the entire
+  study metadata at once ([#953](https://github.com/OHIF/Viewers/issues/953))
+  ([9e10c2b](https://github.com/OHIF/Viewers/commit/9e10c2b))
 
 ## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.0.1...@ohif/core@1.0.2) (2019-10-02)
 
-
 ### Bug Fixes
 
-* Temporarily sort SEG files to the end of the display set list as a workaround for several metadata issues ([#987](https://github.com/OHIF/Viewers/issues/987)) ([b3b4c10](https://github.com/OHIF/Viewers/commit/b3b4c10))
-
-
-
-
+- Temporarily sort SEG files to the end of the display set list as a workaround
+  for several metadata issues
+  ([#987](https://github.com/OHIF/Viewers/issues/987))
+  ([b3b4c10](https://github.com/OHIF/Viewers/commit/b3b4c10))
 
 ## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.0.0...@ohif/core@1.0.1) (2019-09-27)
 
-
 ### Bug Fixes
 
-* Check for Value in 00081155 sequence (Few patient protocol images doesn't have this value) and removed a duplicate declaration ([#921](https://github.com/OHIF/Viewers/issues/921)) ([d0ec9cf](https://github.com/OHIF/Viewers/commit/d0ec9cf))
-
-
-
-
+- Check for Value in 00081155 sequence (Few patient protocol images doesn't have
+  this value) and removed a duplicate declaration
+  ([#921](https://github.com/OHIF/Viewers/issues/921))
+  ([d0ec9cf](https://github.com/OHIF/Viewers/commit/d0ec9cf))
 
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.10...@ohif/core@1.0.0) (2019-09-27)
 
-
 ### Bug Fixes
 
-* 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support in local file and WADO-RS-only use cases ([#862](https://github.com/OHIF/Viewers/issues/862)) ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes [#838](https://github.com/OHIF/Viewers/issues/838)
-
+- 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support
+  in local file and WADO-RS-only use cases
+  ([#862](https://github.com/OHIF/Viewers/issues/862))
+  ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes
+  [#838](https://github.com/OHIF/Viewers/issues/838)
 
 ### BREAKING CHANGES
 
-* DICOM Seg
-
-
-
-
+- DICOM Seg
 
 ## [0.50.10](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.9...@ohif/core@0.50.10) (2019-09-23)
 
-
 ### Bug Fixes
 
-* Avoid using variable name "module" ([#942](https://github.com/OHIF/Viewers/issues/942)) ([72427fe](https://github.com/OHIF/Viewers/commit/72427fe)), closes [#940](https://github.com/OHIF/Viewers/issues/940)
-
-
-
-
+- Avoid using variable name "module"
+  ([#942](https://github.com/OHIF/Viewers/issues/942))
+  ([72427fe](https://github.com/OHIF/Viewers/commit/72427fe)), closes
+  [#940](https://github.com/OHIF/Viewers/issues/940)
 
 ## [0.50.9](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.8...@ohif/core@0.50.9) (2019-09-17)
 
-
 ### Bug Fixes
 
-* bump cornerstone-tools version in peerDeps ([4afc88c](https://github.com/OHIF/Viewers/commit/4afc88c))
-
-
-
-
+- bump cornerstone-tools version in peerDeps
+  ([4afc88c](https://github.com/OHIF/Viewers/commit/4afc88c))
 
 ## [0.50.8](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.7...@ohif/core@0.50.8) (2019-09-10)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 ## [0.50.7](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.6...@ohif/core@0.50.7) (2019-09-10)
 
-
 ### Bug Fixes
 
-* remove requestOptions when key is not needed ([32bc47d](https://github.com/OHIF/Viewers/commit/32bc47d))
-
-
-
-
+- remove requestOptions when key is not needed
+  ([32bc47d](https://github.com/OHIF/Viewers/commit/32bc47d))
 
 ## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.5...@ohif/core@0.50.6) (2019-09-09)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 ## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.4...@ohif/core@0.50.5) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 ## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.3...@ohif/core@0.50.4) (2019-09-04)
 
-
 ### Bug Fixes
 
-* measurementsAPI issue caused by production build ([#842](https://github.com/OHIF/Viewers/issues/842)) ([49d3439](https://github.com/OHIF/Viewers/commit/49d3439))
-
-
-
-
+- measurementsAPI issue caused by production build
+  ([#842](https://github.com/OHIF/Viewers/issues/842))
+  ([49d3439](https://github.com/OHIF/Viewers/commit/49d3439))
 
 ## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.2...@ohif/core@0.50.3) (2019-08-26)
 
-
 ### Bug Fixes
 
-* **Studies:** Qidosupportsincludefield should be true by default ([#801](https://github.com/OHIF/Viewers/issues/801)) ([a88d865](https://github.com/OHIF/Viewers/commit/a88d865))
-
-
-
-
+- **Studies:** Qidosupportsincludefield should be true by default
+  ([#801](https://github.com/OHIF/Viewers/issues/801))
+  ([a88d865](https://github.com/OHIF/Viewers/commit/a88d865))
 
 ## [0.50.2](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.1...@ohif/core@0.50.2) (2019-08-22)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 ## [0.50.1](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.0-alpha.10...@ohif/core@0.50.1) (2019-08-14)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 # [0.50.0-alpha.10](https://github.com/OHIF/Viewers/compare/@ohif/core@0.11.1-alpha.9...@ohif/core@0.50.0-alpha.10) (2019-08-14)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 ## [0.11.1-alpha.9](https://github.com/OHIF/Viewers/compare/@ohif/core@0.11.1-alpha.8...@ohif/core@0.11.1-alpha.9) (2019-08-14)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 ## 0.11.1-alpha.8 (2019-08-14)
 
 **Note:** Version bump only for package @ohif/core
 
-
-
-
-
 # Change Log
 
 All notable changes to this project will be documented in this file. See