chore(release): publish [skip ci]

- @ohif/viewer@3.4.1

.circleci/config.yml

@@ -13,14 +13,7 @@ version: 2.1
 ##
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@1.11.0
+  cypress: cypress-io/cypress@1.13.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/
 
 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,13 +353,15 @@ 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
 
@@ -375,6 +373,7 @@ workflows:
       - 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
@@ -389,6 +388,8 @@ workflows:
           post-steps:
             - store_artifacts:
                 path: platform/viewer/cypress/screenshots
+            - store_artifacts:
+                path: platform/viewer/cypress/videos
           requires:
             - AWAIT_APPROVAL
 
@@ -445,9 +446,11 @@ workflows:
             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
@@ -456,34 +459,20 @@ workflows:
           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
+          start: yarn run test:e2e:dist
+          spec: 'cypress/integration/visual-regression/**/*'
           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 [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
-if [ ! -z "$CLIENT_ID" ]
   then
-  	echo "Google Cloud Healthcare $CLIENT_ID has been provided: "
+    # If CLIENT_ID is specified, use the google.js configuration with the modified ID
-  	echo $CLIENT_ID
+    if [ -n "$CLIENT_ID" ]
-  	echo "Updating config..."
+      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
+  	    # - 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
+	      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
+    # If HEALTHCARE_API_ENDPOINT is specified, use the google.js configuration with the modified endpoint
-	cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
+    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..."

.gitignore

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

.webpack/webpack.base.js

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

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
+During registration, lifecycle hooks and modules have access to the extension's config,
-`ExtensionManager`'s `ServicesManager` and `CommandsManager`.
+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/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/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

extensions/_example/src/index.js

@@ -14,6 +14,7 @@ export default {
   preRegistration({
     servicesManager = {},
     commandsManager = {},
+    appConfig = {},
     configuration = {},
   }) {},
 

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.8.0",
+    "cornerstone-tools": "^4.9.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.8.2",
     "dicom-parser": "^1.8.3",

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');
@@ -242,6 +243,9 @@ const commandsModule = ({ servicesManager }) => {
       cornerstoneTools.removeToolState(element, toolType, tool);
       cornerstone.updateImage(element);
     },
+    setCornerstoneLayout: () => {
+      setCornerstoneLayout();
+    }
   };
 
   const definitions = {
@@ -348,6 +352,12 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: [],
       options: {},
     },
+    setCornerstoneLayout: {
+      commandFn: actions.setCornerstoneLayout,
+      storeContexts: [],
+      options: {},
+      context: 'VIEWER',
+    },
   };
 
   return {

extensions/cornerstone/src/init.js

@@ -1,10 +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';
+import queryString from 'query-string';
+import initCornerstoneTools from './initCornerstoneTools.js';
 
 function fallbackMetaDataProvider(type, imageId) {
   if (!imageId.includes('wado?requestType=WADO')) {
@@ -76,30 +76,35 @@ export default function init({ servicesManager, configuration }) {
 
   initCornerstoneTools(defaultCsToolsConfig);
 
-  // ~~ Toooools 🙌
+  const toolsGroupedByType = {
-  const tools = [
+    touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
-    csTools.PanTool,
+    annotations: [
-    csTools.ZoomTool,
+      csTools.ArrowAnnotateTool,
-    csTools.WwwcTool,
+      csTools.EraserTool,
-    csTools.MagnifyTool,
+      csTools.BidirectionalTool,
-    csTools.StackScrollTool,
+      csTools.LengthTool,
-    csTools.StackScrollMouseWheelTool,
+      csTools.AngleTool,
-    // Touch
+      csTools.FreehandRoiTool,
-    csTools.PanMultiTouchTool,
+      csTools.EllipticalRoiTool,
-    csTools.ZoomTouchPinchTool,
+      csTools.DragProbeTool,
-    // Annotations
+      csTools.RectangleRoiTool,
-    csTools.ArrowAnnotateTool,
+    ],
-    csTools.EraserTool,
+    segmentation: [csTools.BrushTool],
-    csTools.BidirectionalTool,
+    other: [
-    csTools.LengthTool,
+      csTools.PanTool,
-    csTools.AngleTool,
+      csTools.ZoomTool,
-    csTools.FreehandRoiTool,
+      csTools.WwwcTool,
-    csTools.EllipticalRoiTool,
+      csTools.WwwcRegionTool,
-    csTools.DragProbeTool,
+      csTools.MagnifyTool,
-    csTools.RectangleRoiTool,
+      csTools.StackScrollTool,
-    // Segmentation
+      csTools.StackScrollMouseWheelTool,
-    csTools.BrushTool,
+    ],
-  ];
+  };
+
+  let tools = [];
+  Object.keys(toolsGroupedByType).forEach(toolsGroup =>
+    tools.push(...toolsGroupedByType[toolsGroup])
+  );
 
   /* Add extension tools configuration here. */
   const internalToolsConfig = {
@@ -113,13 +118,48 @@ export default function init({ servicesManager, configuration }) {
     },
   };
 
+  /* 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, externalToolProps);
+    const props = merge(
+      internalToolProps,
+      parseToolProps(externalToolProps, tool)
+    );
     csTools.addTool(tool, props);
   });
 
@@ -132,7 +172,7 @@ export default function init({ servicesManager, configuration }) {
       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 });
   csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });

extensions/cornerstone/src/toolbarModule.js

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

extensions/cornerstone/src/utils/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-pdf/CHANGELOG.md

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

extensions/dicom-pdf/package.json

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

extensions/dicom-pdf/src/ConnectedOHIFDicomPDFViewer.js

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

extensions/dicom-pdf/src/DicomPDFViewport.css

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

extensions/dicom-pdf/src/DicomPDFViewport.js

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

extensions/dicom-pdf/src/OHIFDicomPDFViewport.js

@@ -11,6 +11,9 @@ class OHIFDicomPDFViewport extends Component {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
+    viewportData: PropTypes.object,
+    activeViewportIndex: PropTypes.number,
+    setViewportActive: PropTypes.func,
   };
 
   state = {
@@ -30,42 +33,36 @@ class OHIFDicomPDFViewport extends Component {
 
   componentDidMount() {
     const { displaySet, studies } = this.props.viewportData;
-    const {
-      studyInstanceUid,
-      seriesInstanceUid,
-      sopInstanceUid,
-      wadoRoot,
-      wadoUri,
-      authorizationHeaders,
-    } = displaySet;
-
     DicomLoaderService.findDicomDataPromise(displaySet, studies).then(
-      data => {
+      data => this.setState({ byteArray: new Uint8Array(data) }),
-        const byteArray = new Uint8Array(data);
-        this.setState({
-          byteArray: byteArray,
-        });
-      },
       error => {
-        this.setState({
+        this.setState({ error });
-          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 && (
+        {byteArray && (
-          <DicomPDFViewport byteArray={this.state.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/vtk/CHANGELOG.md

@@ -3,6 +3,132 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.6...@ohif/extension-vtk@1.2.7) (2020-01-08)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.5...@ohif/extension-vtk@1.2.6) (2020-01-07)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.4...@ohif/extension-vtk@1.2.5) (2020-01-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.3...@ohif/extension-vtk@1.2.4) (2019-12-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.2...@ohif/extension-vtk@1.2.3) (2019-12-20)
+
+
+### Bug Fixes
+
+* 🐛 1241: Make Plugin switch part of ToolbarModule ([#1322](https://github.com/OHIF/Viewers/issues/1322)) ([6540e36](https://github.com/OHIF/Viewers/commit/6540e36818944ac2eccc696186366ae495b33a04)), closes [#1241](https://github.com/OHIF/Viewers/issues/1241)
+
+
+
+
+
+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.1...@ohif/extension-vtk@1.2.2) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.0...@ohif/extension-vtk@1.2.1) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.7...@ohif/extension-vtk@1.2.0) (2019-12-20)
+
+
+### Features
+
+* 🎸 Configuration so viewer tools can nix handles ([#1304](https://github.com/OHIF/Viewers/issues/1304)) ([63594d3](https://github.com/OHIF/Viewers/commit/63594d36b0bdba59f0901095aed70b75fb05172d)), closes [#1223](https://github.com/OHIF/Viewers/issues/1223)
+
+
+
+
+
+## [1.1.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.6...@ohif/extension-vtk@1.1.7) (2019-12-19)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.5...@ohif/extension-vtk@1.1.6) (2019-12-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.4...@ohif/extension-vtk@1.1.5) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.3...@ohif/extension-vtk@1.1.4) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.2...@ohif/extension-vtk@1.1.3) (2019-12-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.1...@ohif/extension-vtk@1.1.2) (2019-12-12)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.1.0...@ohif/extension-vtk@1.1.1) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 # [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.0.2...@ohif/extension-vtk@1.1.0) (2019-12-11)
 
 

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.1.0",
+  "version": "1.2.7",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,9 +52,9 @@
     "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^2.1.0",
+    "@ohif/core": "^2.3.2",
-    "@ohif/ui": "^1.1.0",
+    "@ohif/ui": "^1.1.8",
-    "cornerstone-tools": "^4.8.0",
+    "cornerstone-tools": "^4.9.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3",
     "gh-pages": "^2.0.1",

extensions/vtk/src/commandsModule.js

@@ -234,7 +234,7 @@ const commandsModule = ({ commandsManager }) => {
           },
         },
         {
-          // Sagital
+          // Sagittal
           orientation: {
             sliceNormal: [1, 0, 0],
             viewUp: [0, 0, 1],

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',
-};
+}

platform/core/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

platform/core/package.json

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

platform/core/src/DICOMSR/dataExchange.js

@@ -1,5 +1,10 @@
-import { log, studies, utils } from '@ohif/core';
+import log from '../log';
-import { retrieveMeasurementFromSR, stowSRFromMeasurements } from './handleStructuredReport';
+import studies from '../studies';
+import utils from '../utils';
+import {
+  retrieveMeasurementFromSR,
+  stowSRFromMeasurements,
+} from './handleStructuredReport';
 import findMostRecentStructuredReport from './utils/findMostRecentStructuredReport';
 
 /**
@@ -65,7 +70,9 @@ const storeMeasurements = async (measurementData, filter, server) => {
       message: 'Measurements were saved with success',
     };
   } catch (error) {
-    log.error(`[DICOMSR] Error while saving the measurements: ${error.message}`);
+    log.error(
+      `[DICOMSR] Error while saving the measurements: ${error.message}`
+    );
     throw new Error('Error while saving the measurements.');
   }
 };

platform/core/src/DICOMSR/handleStructuredReport.js

@@ -1,11 +1,11 @@
 import * as dcmjs from 'dcmjs';
-import { DICOMWeb } from '@ohif/core';
+import { api } from 'dicomweb-client';
+
+import DICOMWeb from '../DICOMWeb';
 import parseDicomStructuredReport from './parseDicomStructuredReport';
 import parseMeasurementsData from './parseMeasurementsData';
 import getAllDisplaySets from './utils/getAllDisplaySets';
 
-import { api } from 'dicomweb-client';
-
 const VERSION_NAME = 'dcmjs-0.0';
 const TRANSFER_SYNTAX_UID = '1.2.840.10008.1.2.1';
 
@@ -34,7 +34,10 @@ const retrieveMeasurementFromSR = async (series, studies, serverUrl) => {
 
   const part10SRArrayBuffer = await dicomWeb.retrieveInstance(options);
   const displaySets = getAllDisplaySets(studies);
-  const measurementsData = parseDicomStructuredReport(part10SRArrayBuffer, displaySets);
+  const measurementsData = parseDicomStructuredReport(
+    part10SRArrayBuffer,
+    displaySets
+  );
 
   return measurementsData;
 };
@@ -47,13 +50,10 @@ const retrieveMeasurementFromSR = async (series, studies, serverUrl) => {
  * @returns {Promise}
  */
 const stowSRFromMeasurements = async (measurements, serverUrl) => {
-  const { dataset } = parseMeasurementsData(
+  const { dataset } = parseMeasurementsData(measurements);
-    measurements
-  );
   const { DicomMetaDictionary, DicomDict } = dcmjs.data;
   const meta = {
-    FileMetaInformationVersion:
+    FileMetaInformationVersion: dataset._meta.FileMetaInformationVersion.Value,
-      dataset._meta.FileMetaInformationVersion.Value,
     MediaStorageSOPClassUID: dataset.SOPClassUID,
     MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
     TransferSyntaxUID: TRANSFER_SYNTAX_UID,

platform/core/src/DICOMSR/parseDicomStructuredReport.js

@@ -1,4 +1,5 @@
 import * as dcmjs from 'dcmjs';
+
 import findInstanceMetadataBySopInstanceUid from './utils/findInstanceMetadataBySopInstanceUid';
 
 /**
@@ -37,7 +38,12 @@ const parseDicomStructuredReport = (part10SRArrayBuffer, displaySets) => {
       const { studyInstanceUid, patientId } = study;
       const { seriesInstanceUid } = series;
       const { sopInstanceUid, frameIndex } = measurement;
-      const imagePath = getImagePath(studyInstanceUid, seriesInstanceUid, sopInstanceUid, frameIndex);
+      const imagePath = getImagePath(
+        studyInstanceUid,
+        seriesInstanceUid,
+        sopInstanceUid,
+        frameIndex
+      );
 
       const imageId = instanceMetadata.getImageId();
       if (!imageId) {
@@ -75,8 +81,15 @@ const parseDicomStructuredReport = (part10SRArrayBuffer, displaySets) => {
  * @param {string} frameIndex
  * @returns
  */
-const getImagePath = (studyInstanceUid, seriesInstanceUid, sopInstanceUid, frameIndex) => {
+const getImagePath = (
-  return [studyInstanceUid, seriesInstanceUid, sopInstanceUid, frameIndex].join('_');
+  studyInstanceUid,
-}
+  seriesInstanceUid,
+  sopInstanceUid,
+  frameIndex
+) => {
+  return [studyInstanceUid, seriesInstanceUid, sopInstanceUid, frameIndex].join(
+    '_'
+  );
+};
 
 export default parseDicomStructuredReport;

platform/core/src/DICOMSR/parseMeasurementsData.js

@@ -1,6 +1,8 @@
 import * as dcmjs from 'dcmjs';
-import { log, measurements } from '@ohif/core';
 import cornerstone from 'cornerstone-core';
+
+import log from '../log';
+import measurements from '../measurements';
 import isToolSupported from './utils/isToolSupported';
 
 /**

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

@@ -11,7 +11,9 @@ const findInstanceMetadataBySopInstanceUid = (displaySets, sopInstanceUid) => {
   displaySets.find(displaySet => {
     if (!displaySet.images) return false;
 
-    instanceFound = displaySet.images.find(instanceMetadata => instanceMetadata._sopInstanceUID === sopInstanceUid);
+    instanceFound = displaySet.images.find(
+      instanceMetadata => instanceMetadata._sopInstanceUID === sopInstanceUid
+    );
 
     return !!instanceFound;
   });

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

@@ -4,15 +4,17 @@
  * @param {Array} studies
  * @returns {Object} Series
  */
-const findMostRecentStructuredReport = (studies) => {
+const findMostRecentStructuredReport = studies => {
   let mostRecentStructuredReport;
 
   studies.forEach(study => {
     const allSeries = study.getSeries ? study.getSeries() : [];
     allSeries.forEach(series => {
-
       if (isStructuredReportSeries(series)) {
-        if (!mostRecentStructuredReport || compareSeriesDate(series, mostRecentStructuredReport)) {
+        if (
+          !mostRecentStructuredReport ||
+          compareSeriesDate(series, mostRecentStructuredReport)
+        ) {
           mostRecentStructuredReport = series;
         }
       }
@@ -28,7 +30,7 @@ const findMostRecentStructuredReport = (studies) => {
  * @param {Object} series - Series metadata
  * @returns {boolean}
  */
-const isStructuredReportSeries = (series) => {
+const isStructuredReportSeries = series => {
   const supportedSopClassUIDs = [
     '1.2.840.10008.5.1.4.1.1.88.22',
     '1.2.840.10008.5.1.4.1.1.11.1',
@@ -38,7 +40,7 @@ const isStructuredReportSeries = (series) => {
   const sopClassUid = firstInstance._instance.sopClassUid;
 
   return supportedSopClassUIDs.includes(sopClassUid);
-}
+};
 
 /**
  *  Checkes if series1 is newer than series2
@@ -48,10 +50,11 @@ const isStructuredReportSeries = (series) => {
  * @returns {boolean} true/false if series1 is newer than series2
  */
 const compareSeriesDate = (series1, series2) => {
-  return series1._data.seriesDate > series2._data.seriesDate ||
+  return (
+    series1._data.seriesDate > series2._data.seriesDate ||
     (series1._data.seriesDate === series2._data.seriesDate &&
-      series1._data.seriesTime > series2._data.seriesTime);
+      series1._data.seriesTime > series2._data.seriesTime)
-}
+  );
-
+};
 
 export default findMostRecentStructuredReport;

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

@@ -4,7 +4,7 @@
  * @param {Object} studies - List of studies loaded into the viewer
  * @returns {Object} List of DisplaySets
  */
-const getAllDisplaySets = (studies) => {
+const getAllDisplaySets = studies => {
   let allDisplaySets = [];
 
   studies.forEach(study => {

platform/core/src/extensions/ExtensionManager.js

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

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

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

platform/core/src/index.js

@@ -5,6 +5,7 @@ import { ServicesManager } from './services';
 import classes, { CommandsManager, HotkeysManager } from './classes/';
 
 import DICOMWeb from './DICOMWeb';
+import DICOMSR from './DICOMSR';
 import cornerstone from './cornerstone.js';
 import hangingProtocols from './hanging-protocols';
 import header from './header.js';
@@ -23,8 +24,6 @@ import {
   UINotificationService,
   UIModalService,
   UIDialogService,
-  UIContextMenuService,
-  UILabellingFlowService,
 } from './services';
 
 const OHIF = {
@@ -48,6 +47,7 @@ const OHIF = {
   object,
   log,
   DICOMWeb,
+  DICOMSR,
   viewer: {},
   measurements,
   hangingProtocols,
@@ -55,8 +55,6 @@ const OHIF = {
   UINotificationService,
   UIModalService,
   UIDialogService,
-  UIContextMenuService,
-  UILabellingFlowService,
 };
 
 export {
@@ -80,14 +78,13 @@ export {
   object,
   log,
   DICOMWeb,
+  DICOMSR,
   measurements,
   hangingProtocols,
   //
   UINotificationService,
   UIModalService,
   UIDialogService,
-  UIContextMenuService,
-  UILabellingFlowService,
 };
 
 export { OHIF };

platform/core/src/index.test.js

@@ -13,8 +13,6 @@ describe('Top level exports', () => {
       'UINotificationService',
       'UIModalService',
       'UIDialogService',
-      'UIContextMenuService',
-      'UILabellingFlowService',
       //
       'utils',
       'studies',
@@ -30,6 +28,7 @@ describe('Top level exports', () => {
       'object',
       'log',
       'DICOMWeb',
+      'DICOMSR',
       'OHIF', //
       'measurements',
       'hangingProtocols',

platform/core/src/services/ServicesManager.js

@@ -33,7 +33,9 @@ export default class ServicesManager {
     }
 
     if (service.create) {
-      this.services[service.name] = service.create({ configuration });
+      this.services[service.name] = service.create({
+        configuration,
+      });
     } else {
       log.warn(`Service create factory function not defined. Exiting early.`);
       return;

platform/core/src/services/ServicesManager.test.js

@@ -33,7 +33,7 @@ describe('ServicesManager.js', () => {
         [{ name: 'UIModalTestService', create: jest.fn() }, fakeConfiguration],
       ]);
 
-      expect(servicesManager.registerService.mock.calls[1]).toContain(
+      expect(servicesManager.registerService.mock.calls[1][1]).toEqual(
         fakeConfiguration
       );
     });
@@ -85,7 +85,7 @@ describe('ServicesManager.js', () => {
       expect(log.warn.mock.calls.length).toBe(1);
     });
 
-    it('pass configuration to service create factory function', () => {
+    it('pass dependencies and configuration to service create factory function', () => {
       const configuration = { config: 'Some configuration' };
 
       servicesManager.registerService(fakeService, configuration);

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

@@ -1,66 +0,0 @@
-/**
- * UI Context Menu
- *
- * @typedef {Object} ContextMenuProps
- * @property {Event} event The event with tool information.
- */
-
-const name = 'UIContextMenuService';
-
-const publicAPI = {
-  name,
-  hide: _hide,
-  show: _show,
-  setServiceImplementation,
-};
-
-const serviceImplementation = {
-  _show: () => console.warn('show() NOT IMPLEMENTED'),
-  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
-};
-
-/**
- * Show a new UI ContextMenu dialog;
- *
- * @param {ContextMenuProps} props { event }
- */
-function _show({ event }) {
-  return serviceImplementation._show({
-    event,
-  });
-}
-
-/**
- * Hide a UI ContextMenu dialog;
- *
- */
-function _hide() {
-  return serviceImplementation._hide();
-}
-
-/**
- *
- *
- * @param {*} {
- *   show: showImplementation,
- *   hide: hideImplementation,
- * }
- */
-function setServiceImplementation({
-  show: showImplementation,
-  hide: hideImplementation,
-}) {
-  if (showImplementation) {
-    serviceImplementation._show = showImplementation;
-  }
-  if (hideImplementation) {
-    serviceImplementation._hide = hideImplementation;
-  }
-}
-
-export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
-  },
-};

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

@@ -1,71 +0,0 @@
-/**
- * UI Labelling Flow
- *
- * @typedef {Object} LabellingFlowProps
- * @property {Object} defaultPosition The position of the labelling dialog.
- * @property {boolean} centralize conditional to center the labelling dialog.
- * @property {Object} props The labelling props.
- *
- */
-
-const name = 'UILabellingFlowService';
-
-const publicAPI = {
-  name,
-  show: _show,
-  hide: _hide,
-  setServiceImplementation,
-};
-
-const serviceImplementation = {
-  _show: () => console.warn('show() NOT IMPLEMENTED'),
-  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
-};
-
-/**
- * Hide a UI LabellingFlow dialog;
- *
- */
-function _hide() {
-  return serviceImplementation._hide();
-}
-
-/**
- * Show a new UI LabellingFlow dialog;
- *
- * @param {LabellingFlowProps} props { defaultPosition, centralize, props }
- */
-function _show({ defaultPosition, centralize, props }) {
-  return serviceImplementation._show({
-    defaultPosition,
-    centralize,
-    props,
-  });
-}
-
-/**
- *
- *
- * @param {*} {
- *   show: showImplementation,
- *   hide: hideImplementation,
- * }
- */
-function setServiceImplementation({
-  show: showImplementation,
-  hide: hideImplementation,
-}) {
-  if (showImplementation) {
-    serviceImplementation._show = showImplementation;
-  }
-  if (hideImplementation) {
-    serviceImplementation._hide = hideImplementation;
-  }
-}
-
-export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
-  },
-};

platform/core/src/services/index.js

@@ -2,14 +2,10 @@ import ServicesManager from './ServicesManager.js';
 import UINotificationService from './UINotificationService';
 import UIModalService from './UIModalService';
 import UIDialogService from './UIDialogService';
-import UIContextMenuService from './UIContextMenuService';
-import UILabellingFlowService from './UILabellingFlowService';
 
 export {
   UINotificationService,
   UIModalService,
   UIDialogService,
-  UIContextMenuService,
-  UILabellingFlowService,
   ServicesManager,
 };

platform/core/src/studies/services/wado/retrieveMetadataLoader.js

@@ -40,7 +40,9 @@ export default class RetrieveMetadataLoader {
         if (result && result.length) {
           break; // closes iterator in case data is retrieved successfully
         }
-      } catch (e) { }
+      } catch (e) {
+        throw e;
+      }
     }
 
     if (loaders.next().done && !result) {
@@ -51,8 +53,8 @@ export default class RetrieveMetadataLoader {
   }
 
   // Methods to be overwrite
-  async configLoad() { }
+  async configLoad() {}
-  async preLoad() { }
+  async preLoad() {}
-  async load(preLoadData) { }
+  async load(preLoadData) {}
-  async posLoad(loadData) { }
+  async posLoad(loadData) {}
 }

platform/core/src/studies/studyUtils.js

@@ -1,413 +0,0 @@
-import DICOMWeb from '../DICOMWeb/';
-
-const WADOProxy = {
-  convertURL: (url, server) => {
-    // TODO: Remove all WADOProxy stuff from this file
-    return url;
-  },
-};
-function parseFloatArray(obj) {
-  const result = [];
-
-  if (!obj) {
-    return result;
-  }
-
-  const objs = obj.split('\\');
-  for (let i = 0; i < objs.length; i++) {
-    result.push(parseFloat(objs[i]));
-  }
-
-  return result;
-}
-
-/**
- * Create a plain JS object that describes a study (a study descriptor object)
- * @param {Object} server Object with server configuration parameters
- * @param {Object} aSopInstance a SOP Instance from which study information will be added
- */
-function createStudy(server, aSopInstance) {
-  // TODO: Pass a reference ID to the server instead of including the URLs here
-  return {
-    seriesList: [],
-    seriesMap: Object.create(null),
-    seriesLoader: null,
-    wadoUriRoot: server.wadoUriRoot,
-    wadoRoot: server.wadoRoot,
-    qidoRoot: server.qidoRoot,
-    patientName: DICOMWeb.getName(aSopInstance['00100010']),
-    patientId: DICOMWeb.getString(aSopInstance['00100020']),
-    patientAge: DICOMWeb.getNumber(aSopInstance['00101010']),
-    patientSize: DICOMWeb.getNumber(aSopInstance['00101020']),
-    patientWeight: DICOMWeb.getNumber(aSopInstance['00101030']),
-    accessionNumber: DICOMWeb.getString(aSopInstance['00080050']),
-    studyDate: DICOMWeb.getString(aSopInstance['00080020']),
-    modalities: DICOMWeb.getString(aSopInstance['00080061']),
-    studyDescription: DICOMWeb.getString(aSopInstance['00081030']),
-    imageCount: DICOMWeb.getString(aSopInstance['00201208']),
-    studyInstanceUid: DICOMWeb.getString(aSopInstance['0020000D']),
-    institutionName: DICOMWeb.getString(aSopInstance['00080080']),
-  };
-}
-
-/** Returns a WADO url for an instance
- *
- * @param studyInstanceUid
- * @param seriesInstanceUid
- * @param sopInstanceUid
- * @returns  {string}
- */
-function buildInstanceWadoUrl(
-  server,
-  studyInstanceUid,
-  seriesInstanceUid,
-  sopInstanceUid
-) {
-  // TODO: This can be removed, since DICOMWebClient has the same function. Not urgent, though
-  const params = [];
-
-  params.push('requestType=WADO');
-  params.push(`studyUID=${studyInstanceUid}`);
-  params.push(`seriesUID=${seriesInstanceUid}`);
-  params.push(`objectUID=${sopInstanceUid}`);
-  params.push('contentType=application/dicom');
-  params.push('transferSyntax=*');
-
-  const paramString = params.join('&');
-
-  return `${server.wadoUriRoot}?${paramString}`;
-}
-
-function buildInstanceWadoRsUri(
-  server,
-  studyInstanceUid,
-  seriesInstanceUid,
-  sopInstanceUid
-) {
-  return `${server.wadoRoot}/studies/${studyInstanceUid}/series/${seriesInstanceUid}/instances/${sopInstanceUid}`;
-}
-
-function buildInstanceFrameWadoRsUri(
-  server,
-  studyInstanceUid,
-  seriesInstanceUid,
-  sopInstanceUid,
-  frame
-) {
-  const baseWadoRsUri = buildInstanceWadoRsUri(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-  frame = frame != null || 1;
-
-  return `${baseWadoRsUri}/frames/${frame}`;
-}
-
-function getFrameIncrementPointer(element) {
-  const frameIncrementPointerNames = {
-    '00181065': 'frameTimeVector',
-    '00181063': 'frameTime',
-  };
-
-  if (!element || !element.Value || !element.Value.length) {
-    return;
-  }
-
-  const value = element.Value[0];
-  return frameIncrementPointerNames[value];
-}
-
-function getRadiopharmaceuticalInfo(instance) {
-  const modality = DICOMWeb.getString(instance['00080060']);
-
-  if (modality !== 'PT') {
-    return;
-  }
-
-  const radiopharmaceuticalInfo = instance['00540016'];
-  if (
-    radiopharmaceuticalInfo === undefined ||
-    !radiopharmaceuticalInfo.Value ||
-    !radiopharmaceuticalInfo.Value.length
-  ) {
-    return;
-  }
-
-  const firstPetRadiopharmaceuticalInfo = radiopharmaceuticalInfo.Value[0];
-  return {
-    radiopharmaceuticalStartTime: DICOMWeb.getString(
-      firstPetRadiopharmaceuticalInfo['00181072']
-    ),
-    radionuclideTotalDose: DICOMWeb.getNumber(
-      firstPetRadiopharmaceuticalInfo['00181074']
-    ),
-    radionuclideHalfLife: DICOMWeb.getNumber(
-      firstPetRadiopharmaceuticalInfo['00181075']
-    ),
-  };
-}
-
-/**
- * Parses the SourceImageSequence, if it exists, in order
- * to return a ReferenceSOPInstanceUID. The ReferenceSOPInstanceUID
- * is used to refer to this image in any accompanying DICOM-SR documents.
- *
- * @param instance
- * @returns {String} The ReferenceSOPInstanceUID
- */
-function getSourceImageInstanceUid(instance) {
-  // TODO= Parse the whole Source Image Sequence
-  // This is a really poor workaround for now.
-  // Later we should probably parse the whole sequence.
-  var SourceImageSequence = instance['00082112'];
-  if (
-    SourceImageSequence &&
-    SourceImageSequence.Value &&
-    SourceImageSequence.Value.length &&
-    SourceImageSequence.Value[0]['00081155'].Value
-  ) {
-    return SourceImageSequence.Value[0]['00081155'].Value[0];
-  }
-}
-
-async function makeSOPInstance(server, study, instance) {
-  const { studyInstanceUid } = study;
-  const seriesInstanceUid = DICOMWeb.getString(instance['0020000E']);
-  let series = study.seriesMap[seriesInstanceUid];
-
-  if (!series) {
-    series = {
-      seriesInstanceUid,
-      seriesDescription: DICOMWeb.getString(instance['0008103E']),
-      modality: DICOMWeb.getString(instance['00080060']),
-      seriesNumber: DICOMWeb.getNumber(instance['00200011']),
-      seriesDate: DICOMWeb.getString(instance['00080021']),
-      seriesTime: DICOMWeb.getString(instance['00080031']),
-      instances: [],
-    };
-    study.seriesMap[seriesInstanceUid] = series;
-    study.seriesList.push(series);
-  }
-
-  const sopInstanceUid = DICOMWeb.getString(instance['00080018']);
-  const wadouri = buildInstanceWadoUrl(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-  const baseWadoRsUri = buildInstanceWadoRsUri(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-  const wadorsuri = buildInstanceFrameWadoRsUri(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-
-  const sopInstance = {
-    imageType: DICOMWeb.getString(instance['00080008']),
-    sopClassUid: DICOMWeb.getString(instance['00080016']),
-    modality: DICOMWeb.getString(instance['00080060']),
-    sopInstanceUid,
-    instanceNumber: DICOMWeb.getNumber(instance['00200013']),
-    imagePositionPatient: DICOMWeb.getString(instance['00200032']),
-    imageOrientationPatient: DICOMWeb.getString(instance['00200037']),
-    frameOfReferenceUID: DICOMWeb.getString(instance['00200052']),
-    sliceLocation: DICOMWeb.getNumber(instance['00201041']),
-    samplesPerPixel: DICOMWeb.getNumber(instance['00280002']),
-    photometricInterpretation: DICOMWeb.getString(instance['00280004']),
-    planarConfiguration: DICOMWeb.getNumber(instance['00280006']),
-    rows: DICOMWeb.getNumber(instance['00280010']),
-    columns: DICOMWeb.getNumber(instance['00280011']),
-    pixelSpacing: DICOMWeb.getString(instance['00280030']),
-    pixelAspectRatio: DICOMWeb.getString(instance['00280034']),
-    bitsAllocated: DICOMWeb.getNumber(instance['00280100']),
-    bitsStored: DICOMWeb.getNumber(instance['00280101']),
-    highBit: DICOMWeb.getNumber(instance['00280102']),
-    pixelRepresentation: DICOMWeb.getNumber(instance['00280103']),
-    smallestPixelValue: DICOMWeb.getNumber(instance['00280106']),
-    largestPixelValue: DICOMWeb.getNumber(instance['00280107']),
-    windowCenter: DICOMWeb.getString(instance['00281050']),
-    windowWidth: DICOMWeb.getString(instance['00281051']),
-    rescaleIntercept: DICOMWeb.getNumber(instance['00281052']),
-    rescaleSlope: DICOMWeb.getNumber(instance['00281053']),
-    rescaleType: DICOMWeb.getNumber(instance['00281054']),
-    sourceImageInstanceUid: getSourceImageInstanceUid(instance),
-    laterality: DICOMWeb.getString(instance['00200062']),
-    viewPosition: DICOMWeb.getString(instance['00185101']),
-    acquisitionDateTime: DICOMWeb.getString(instance['0008002A']),
-    numberOfFrames: DICOMWeb.getNumber(instance['00280008']),
-    frameIncrementPointer: getFrameIncrementPointer(instance['00280009']),
-    frameTime: DICOMWeb.getNumber(instance['00181063']),
-    frameTimeVector: parseFloatArray(DICOMWeb.getString(instance['00181065'])),
-    sliceThickness: DICOMWeb.getNumber(instance['00180050']),
-    spacingBetweenSlices: DICOMWeb.getString(instance['00180088']),
-    lossyImageCompression: DICOMWeb.getString(instance['00282110']),
-    derivationDescription: DICOMWeb.getString(instance['00282111']),
-    lossyImageCompressionRatio: DICOMWeb.getString(instance['00282112']),
-    lossyImageCompressionMethod: DICOMWeb.getString(instance['00282114']),
-    echoNumber: DICOMWeb.getString(instance['00180086']),
-    contrastBolusAgent: DICOMWeb.getString(instance['00180010']),
-    radiopharmaceuticalInfo: getRadiopharmaceuticalInfo(instance),
-    baseWadoRsUri: baseWadoRsUri,
-    wadouri: WADOProxy.convertURL(wadouri, server),
-    wadorsuri: WADOProxy.convertURL(wadorsuri, server),
-    wadoRoot: server.wadoRoot,
-    imageRendering: server.imageRendering,
-    thumbnailRendering: server.thumbnailRendering,
-  };
-
-  // Get additional information if the instance uses "PALETTE COLOR" photometric interpretation
-  if (sopInstance.photometricInterpretation === 'PALETTE COLOR') {
-    const redPaletteColorLookupTableDescriptor = parseFloatArray(
-      DICOMWeb.getString(instance['00281101'])
-    );
-    const greenPaletteColorLookupTableDescriptor = parseFloatArray(
-      DICOMWeb.getString(instance['00281102'])
-    );
-    const bluePaletteColorLookupTableDescriptor = parseFloatArray(
-      DICOMWeb.getString(instance['00281103'])
-    );
-    const palettes = await getPaletteColors(
-      server,
-      instance,
-      redPaletteColorLookupTableDescriptor
-    );
-
-    if (palettes) {
-      if (palettes.uid) {
-        sopInstance.paletteColorLookupTableUID = palettes.uid;
-      }
-
-      sopInstance.redPaletteColorLookupTableData = palettes.red;
-      sopInstance.greenPaletteColorLookupTableData = palettes.green;
-      sopInstance.bluePaletteColorLookupTableData = palettes.blue;
-      sopInstance.redPaletteColorLookupTableDescriptor = redPaletteColorLookupTableDescriptor;
-      sopInstance.greenPaletteColorLookupTableDescriptor = greenPaletteColorLookupTableDescriptor;
-      sopInstance.bluePaletteColorLookupTableDescriptor = bluePaletteColorLookupTableDescriptor;
-    }
-  }
-
-  series.instances.push(sopInstance);
-  return sopInstance;
-}
-
-function getPaletteColor(server, instance, tag, lutDescriptor) {
-  const numLutEntries = lutDescriptor[0];
-  const bits = lutDescriptor[2];
-
-  let uri = WADOProxy.convertURL(instance[tag].BulkDataURI, server);
-
-  // TODO: Workaround for dcm4chee behind SSL-terminating proxy returning
-  // incorrect bulk data URIs
-  if (server.wadoRoot.indexOf('https') === 0 && !uri.includes('https')) {
-    uri = uri.replace('http', 'https');
-  }
-
-  const config = {
-    url: server.wadoRoot, //BulkDataURI is absolute, so this isn't used
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  };
-  const dicomWeb = new api.DICOMwebClient(config);
-  const options = {
-    BulkDataURI: uri,
-  };
-
-  const readUInt16 = (byteArray, position) => {
-    return byteArray[position] + byteArray[position + 1] * 256;
-  };
-
-  const arrayBufferToPaletteColorLUT = result => {
-    const arraybuffer = result[0];
-    const byteArray = new Uint8Array(arraybuffer);
-    const lut = [];
-
-    for (let i = 0; i < numLutEntries; i++) {
-      if (bits === 16) {
-        lut[i] = readUInt16(byteArray, i * 2);
-      } else {
-        lut[i] = byteArray[i];
-      }
-    }
-
-    return lut;
-  };
-
-  return dicomWeb.retrieveBulkData(options).then(arrayBufferToPaletteColorLUT);
-}
-
-/**
- * Fetch palette colors for instances with "PALETTE COLOR" photometricInterpretation.
- *
- * @param server {Object} Current server;
- * @param instance {Object} The retrieved instance metadata;
- * @returns {String} The ReferenceSOPInstanceUID
- */
-async function getPaletteColors(server, instance, lutDescriptor) {
-  let paletteUID = DICOMWeb.getString(instance['00281199']);
-
-  return new Promise((resolve, reject) => {
-    let entry;
-    if (paletteColorCache.isValidUID(paletteUID)) {
-      entry = paletteColorCache.get(paletteUID);
-
-      if (entry) {
-        return resolve(entry);
-      }
-    }
-
-    // no entry in cache... Fetch remote data.
-    const r = getPaletteColor(server, instance, '00281201', lutDescriptor);
-    const g = getPaletteColor(server, instance, '00281202', lutDescriptor);
-    const b = getPaletteColor(server, instance, '00281203', lutDescriptor);
-
-    const promises = [r, g, b];
-
-    Promise.all(promises).then(args => {
-      entry = {
-        red: args[0],
-        green: args[1],
-        blue: args[2],
-      };
-
-      // when paletteUID is present, the entry can be cached...
-      entry.uid = paletteUID;
-      paletteColorCache.add(entry);
-
-      resolve(entry);
-    });
-  });
-}
-
-/**
- * Add a list of SOP Instances to a given study object descriptor
- * @param {Object} server Object with server configuration parameters
- * @param {Object} study The study descriptor to which the given SOP instances will be added
- * @param {Array} sopInstanceList A list of SOP instance objects
- */
-async function addInstancesToStudy(server, study, sopInstanceList) {
-  return Promise.all(
-    sopInstanceList.map(function(sopInstance) {
-      return makeSOPInstance(server, study, sopInstance);
-    })
-  );
-}
-
-const createStudyFromSOPInstanceList = async (server, sopInstanceList) => {
-  if (Array.isArray(sopInstanceList) && sopInstanceList.length > 0) {
-    const firstSopInstance = sopInstanceList[0];
-    const study = createStudy(server, firstSopInstance);
-    await addInstancesToStudy(server, study, sopInstanceList);
-    return study;
-  }
-  throw new Error('Failed to create study out of provided SOP instance list');
-};
-
-export { createStudyFromSOPInstanceList, addInstancesToStudy };

platform/i18n/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.
 
+## [0.52.4](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.3...@ohif/i18n@0.52.4) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/i18n
+
+
+
+
+
+## [0.52.3](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.2...@ohif/i18n@0.52.3) (2019-12-12)
+
+
+### Bug Fixes
+
+* translations ([#1234](https://github.com/OHIF/Viewers/issues/1234)) ([30b9e44](https://github.com/OHIF/Viewers/commit/30b9e4422073557287ef26a80b38eeb3f3fcff4c))
+
+
+
+
+
 ## [0.52.2](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.1...@ohif/i18n@0.52.2) (2019-11-28)
 
 

platform/i18n/package.json

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

platform/i18n/src/index.js

@@ -29,19 +29,20 @@ function addLocales(newLocales) {
   customDebug(resourceBundle, 'info');
 }
 
-// Note: Developers can add the API key to use the in-context editor.
+/*
-// DO NOT commit the API key
+ * Note: Developers can add the API key to use the
-const config = (window.config && window.config.i18n) || {};
+ * in-context editor using environment variables.
-
+ * (DO NOT commit the API key)
+ */
 const locizeOptions = {
-  projectId: config.LOCIZE_PROJECTID,
+  projectId: process.env.LOCIZE_PROJECTID,
-  apiKey: config.LOCIZE_API_KEY,
+  apiKey: process.env.LOCIZE_API_KEY,
   referenceLng: 'en-US',
   fallbacklng: 'en-US',
 };
 
-const envUseLocize = !!config.USE_LOCIZE;
+const envUseLocize = !!process.env.USE_LOCIZE;
-const envApiKeyAvailable = !!config.LOCIZE_API_KEY;
+const envApiKeyAvailable = !!process.env.LOCIZE_API_KEY;
 const DEFAULT_LANGUAGE = 'en-US';
 
 function initI18n(

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

@@ -10,6 +10,7 @@
   "Clear": "Clear",
   "Coronal": "Coronal",
   "Crosshairs": "Crosshairs",
+  "Download": "Download",
   "Ellipse": "Ellipse",
   "Elliptical": "Elliptical",
   "Flip H": "Flip H",

platform/i18n/src/locales/es/Buttons.json

@@ -10,18 +10,19 @@
   "Clear": "Limpiar",
   "Coronal": "Coronal",
   "Crosshairs": "Punto de mira",
+  "Download": "Descargar",
   "Ellipse": "Elipse",
   "Elliptical": "Elíptico",
-  "Flip H": "Espejo H",
+  "Flip H": "Voltear H",
-  "Flip V": "Espejo V",
+  "Flip V": "Voltear V",
   "Freehand": "Mano alzada",
-  "Invert": "Invertir",
+  "Invert": "Negativo",
   "Layout": "$t(Common:Layout)",
   "Length": "Longitud",
-  "Levels": "Niveles",
+  "Levels": "W/L",
-  "Magnify": "Aumentar",
+  "Magnify": "Lupa",
   "Manual": "Manual",
-  "Measurements": "Mediciones",
+  "Measurements": "Medidas",
   "More": "$t(Common:More)",
   "Next": "$t(Common:Next)",
   "Pan": "Mover",
@@ -32,11 +33,11 @@
   "Rectangle": "Rectángulo",
   "Reset": "$t(Common:Reset)",
   "Reset to Defaults": "$t(Common:Reset) por defecto",
-  "Rotate Right": "Rotar ->",
+  "Rotate Right": "Girar ->",
   "Sagittal": "Sagital",
   "Save": "Guardar",
-  "Stack Scroll": "Scroll en pila",
+  "Stack Scroll": "Scroll",
   "Stop": "$t(Common:Stop)",
   "Themes": "Temas",
-  "Zoom": "Zoom"
+  "Zoom": "Ampliar"
 }

platform/i18n/src/locales/es/Common.json

@@ -1,12 +1,12 @@
 {
   "Image": "Imagen",
-  "Layout": "Disposición",
+  "Layout": "Formato",
   "Measurements": "Medidas",
   "More": "Más",
   "Next": "Siguiente",
   "Play": "Play",
   "Previous": "Anterior",
-  "Reset": "Resetear",
+  "Reset": "Restaurar",
   "RowsPerPage": "filas por página",
   "Series": "Secuencia",
   "Show": "Mostrar",

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

@@ -10,6 +10,7 @@
   "Clear": "Limpar",
   "Coronal": "Coronal",
   "Crosshairs": "Localizador",
+  "Download": "Baixar",
   "Ellipse": "Elipse",
   "Elliptical": "Elíptico",
   "Flip H": "Inverter H",
@@ -30,8 +31,8 @@
   "Probe": "Prova",
   "ROI Window": "Janela ROI",
   "Rectangle": "Retângulo",
-  "Reset": "Resetar",
+  "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "Restaurar para o Padrão",
+  "Reset to Defaults": "$t(Common:Reset) para o Padrão",
   "Rotate Right": "Girar à direita",
   "Sagittal": "Sagital",
   "Save": "Salvar",

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

@@ -6,6 +6,6 @@
   "Next": "Próximo",
   "Play": "Play",
   "Previous": "Anterior",
-  "Reset": "Reset",
+  "Reset": "Restaurar",
   "Stop": "Stop"
 }

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

@@ -1,6 +1,6 @@
 {
   "Cancel": "Cancelar",
-  "Reset to Defaults": "Restaurar Default",
+  "Reset to Defaults": "$t(Common:Reset) para Padrão",
   "ResetDefaultMessage": "Preferências resetadas com sucesso. <br /> Você deve <strong>Salvar</strong> para que essa ação seja realizada.",
   "Save": "Salvar",
   "SaveMessage": "Preferências salvas",

platform/ui/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.8](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.7...@ohif/ui@1.1.8) (2020-01-08)
+
+
+### Bug Fixes
+
+* measurements panel css and delete button visibility ([#1352](https://github.com/OHIF/Viewers/issues/1352)) ([7ab0bbb](https://github.com/OHIF/Viewers/commit/7ab0bbb32581dcba16ee16b49b92406e2856ac76))
+
+
+
+
+
+## [1.1.7](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.6...@ohif/ui@1.1.7) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+## [1.1.6](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.5...@ohif/ui@1.1.6) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+## [1.1.5](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.4...@ohif/ui@1.1.5) (2019-12-19)
+
+
+### Bug Fixes
+
+* 🐛 Fix drag-n-drop of local files into OHIF ([#1319](https://github.com/OHIF/Viewers/issues/1319)) ([23305ce](https://github.com/OHIF/Viewers/commit/23305cec9c0f514e73a8dd17f984ffc87ad8d131)), closes [#1307](https://github.com/OHIF/Viewers/issues/1307)
+
+
+
+
+
+## [1.1.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.3...@ohif/ui@1.1.4) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+## [1.1.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.2...@ohif/ui@1.1.3) (2019-12-13)
+
+
+### Bug Fixes
+
+* allow empty values for dimensions ([#1295](https://github.com/OHIF/Viewers/issues/1295)) ([cd2da34](https://github.com/OHIF/Viewers/commit/cd2da349e5212cccdd8e65ffa3f7fdc6bad1057c))
+
+
+
+
+
+## [1.1.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.1...@ohif/ui@1.1.2) (2019-12-12)
+
+
+### Bug Fixes
+
+* translations ([#1234](https://github.com/OHIF/Viewers/issues/1234)) ([30b9e44](https://github.com/OHIF/Viewers/commit/30b9e4422073557287ef26a80b38eeb3f3fcff4c))
+
+
+
+
+
+## [1.1.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.1.0...@ohif/ui@1.1.1) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
 # [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.0.1...@ohif/ui@1.1.0) (2019-12-11)
 
 

platform/ui/package.json

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

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js

@@ -32,69 +32,52 @@ const ViewportDownloadForm = ({
   maximumSize,
   canvasClass,
 }) => {
-  const [t] = useTranslation('ViewportDownloadForm');
+  const [t] = useTranslation('Buttons');
 
   const [filename, setFilename] = useState(DEFAULT_FILENAME);
   const [fileType, setFileType] = useState('jpg');
 
-  const [height, setHeight] = useState(defaultSize);
+  const [dimensions, setDimensions] = useState({
-  const [width, setWidth] = useState(defaultSize);
+    width: defaultSize,
+    height: defaultSize,
+  });
 
   const [showAnnotations, setShowAnnotations] = useState(true);
 
-  const [keepAspect, setKeepAspect] = useState(true);
-  const [lastImage, setLastImage] = useState();
-
   const [viewportElement, setViewportElement] = useState();
-  const [viewportElementHeight, setViewportElementHeight] = useState(
+  const [viewportElementDimensions, setViewportElementDimensions] = useState({
-    minimumSize
+    width: defaultSize,
-  );
+    height: defaultSize,
-  const [viewportElementWidth, setViewportElementWidth] = useState(minimumSize);
+  });
 
   const [downloadCanvas, setDownloadCanvas] = useState({
     ref: createRef(),
-    width: minimumSize,
+    width: defaultSize,
-    height: minimumSize,
+    height: defaultSize,
   });
 
   const [viewportPreview, setViewportPreview] = useState({
     src: null,
-    width: minimumSize,
+    width: defaultSize,
-    height: minimumSize,
+    height: defaultSize,
   });
 
+  // Cornerstone's `enable/disable`
   useEffect(() => {
     enableViewport(viewportElement);
 
     return () => {
       disableViewport(viewportElement);
-
-      setHeight(defaultSize);
-      setWidth(defaultSize);
     };
-  }, [defaultSize, disableViewport, enableViewport, viewportElement]);
+  }, [disableViewport, enableViewport, viewportElement]);
 
   useEffect(() => {
+    const { width, height } = viewportElementDimensions;
     const validSize = value => (value >= minimumSize ? value : minimumSize);
     const loadAndUpdateViewports = async () => {
-      const {
+      await loadImage(activeViewport, viewportElement, width, height);
-        image,
-        width: scaledWidth,
-        height: scaledHeight,
-      } = await loadImage(activeViewport, viewportElement, width, height);
-      setLastImage(image);
-
       toggleAnnotations(showAnnotations, viewportElement);
 
-      setViewportElementHeight(validSize(scaledHeight));
-      setViewportElementWidth(validSize(scaledWidth));
-
-      setDownloadCanvas(state => ({
-        ...state,
-        height: validSize(scaledHeight),
-        width: validSize(scaledWidth),
-      }));
-
       const {
         dataUrl,
         width: viewportElementWidth,
@@ -118,8 +101,6 @@ const ViewportDownloadForm = ({
     activeViewport,
     viewportElement,
     showAnnotations,
-    height,
-    width,
     loadImage,
     toggleAnnotations,
     updateViewportPreview,
@@ -127,54 +108,41 @@ const ViewportDownloadForm = ({
     downloadCanvas.ref,
     minimumSize,
     maximumSize,
+    viewportElementDimensions,
   ]);
 
-  const onHeightChange = event => {
+  /**
-    const newHeight = Math.min(event.target.value, maximumSize);
+   * @param {object} event - Input change event
-    setHeight(newHeight);
+   * @param {string} dimension - "height" | "width"
+   */
+  const onDimensionsChange = (event, dimension) => {
+    const sanitizedTargetValue = event.target.value.replace(/\D/, '');
+    const isEmpty = sanitizedTargetValue === '';
+    const updatedDimension = isEmpty
+      ? ''
+      : Math.min(sanitizedTargetValue, maximumSize);
 
-    setViewportElementHeight(newHeight);
+    if (updatedDimension === dimensions.width) {
-
+      return;
-    setDownloadCanvas(state => ({
-      ...state,
-      height: newHeight,
-    }));
-
-    if (keepAspect) {
-      const multiplier = newHeight / lastImage.height;
-      const newWidth = Math.round(lastImage.width * multiplier);
-
-      setWidth(newWidth);
-      setViewportElementWidth(newWidth);
-
-      setDownloadCanvas(state => ({
-        ...state,
-        width: newWidth,
-      }));
     }
-  };
 
-  const onWidthChange = event => {
+    // In current code, keepAspect is always `true`
-    const newWidth = Math.min(event.target.value, maximumSize);
+    // And we always start w/ a square width/height
-    setWidth(newWidth);
+    setDimensions({
-
+      width: updatedDimension,
-    setViewportElementWidth(newWidth);
+      height: updatedDimension,
-
+    });
-    setDownloadCanvas(state => ({
-      ...state,
-      width: newWidth,
-    }));
-
-    if (keepAspect) {
-      const multiplier = newWidth / lastImage.width;
-      const newHeight = Math.round(lastImage.height * multiplier);
-
-      setHeight(newHeight);
-      setViewportElementHeight(newHeight);
 
+    // Only update if value is non-empty
+    if (!isEmpty) {
+      setViewportElementDimensions({
+        height: updatedDimension,
+        width: updatedDimension,
+      });
       setDownloadCanvas(state => ({
         ...state,
-        height: newHeight,
+        height: updatedDimension,
+        width: updatedDimension,
       }));
     }
   };
@@ -196,26 +164,22 @@ const ViewportDownloadForm = ({
         )}
       </div>
 
-      <div className="file-info-container">
+      <div className="file-info-container" data-cy="file-info-container">
         <div className="col">
           <div className="width">
             <TextInput
-              type="number"
+              data-cy="image-width"
-              min={minimumSize}
+              value={dimensions.width}
-              max={maximumSize}
-              value={width}
               label={t('Image width (px)')}
-              onChange={onWidthChange}
+              onChange={evt => onDimensionsChange(evt, 'height')}
             />
           </div>
           <div className="height">
             <TextInput
-              type="number"
+              data-cy="image-height"
-              min={minimumSize}
+              value={dimensions.height}
-              max={maximumSize}
-              value={height}
               label={t('Image height (px)')}
-              onChange={onHeightChange}
+              onChange={evt => onDimensionsChange(evt, 'width')}
             />
           </div>
         </div>
@@ -224,6 +188,7 @@ const ViewportDownloadForm = ({
           <div className="file-name">
             <TextInput
               type="text"
+              data-cy="file-name"
               value={filename}
               onChange={event => setFilename(event.target.value)}
               label={t('File name')}
@@ -233,6 +198,7 @@ const ViewportDownloadForm = ({
           <div className="file-type">
             <Select
               value={fileType}
+              data-cy="file-type"
               onChange={event => setFileType(event.target.value)}
               options={FILE_TYPE_OPTIONS}
               label={t('File type')}
@@ -245,6 +211,7 @@ const ViewportDownloadForm = ({
             <label htmlFor="show-annotations" className="form-check-label">
               <input
                 id="show-annotations"
+                data-cy="show-annotations"
                 type="checkbox"
                 className="form-check-input"
                 checked={showAnnotations}
@@ -258,8 +225,8 @@ const ViewportDownloadForm = ({
 
       <div
         style={{
-          height: viewportElementHeight,
+          height: viewportElementDimensions.height,
-          width: viewportElementWidth,
+          width: viewportElementDimensions.width,
           position: 'absolute',
           left: '9999px',
         }}
@@ -278,23 +245,33 @@ const ViewportDownloadForm = ({
         ></canvas>
       </div>
 
-      <div className="preview">
+      <div className="preview" data-cy="image-preview">
         <h4> {t('Image Preview')}</h4>
         <img
           className="viewport-preview"
           src={viewportPreview.src}
           alt="Viewport Preview"
+          data-cy="viewport-preview-img"
         />
       </div>
 
       <div className="actions">
         <div className="action-cancel">
-          <button type="button" className="btn btn-danger" onClick={onClose}>
+          <button
+            type="button"
+            data-cy="cancel-btn"
+            className="btn btn-danger"
+            onClick={onClose}
+          >
             {t('Cancel')}
           </button>
         </div>
         <div className="action-save">
-          <button onClick={downloadImage} className="btn btn-primary">
+          <button
+            onClick={downloadImage}
+            className="btn btn-primary"
+            data-cy="download-btn"
+          >
             {t('Download')}
           </button>
         </div>
@@ -312,6 +289,7 @@ ViewportDownloadForm.propTypes = {
   toggleAnnotations: PropTypes.func.isRequired,
   loadImage: PropTypes.func.isRequired,
   downloadBlob: PropTypes.func.isRequired,
+  /** A default width & height, between the minimum and maximum size */
   defaultSize: PropTypes.number.isRequired,
   minimumSize: PropTypes.number.isRequired,
   maximumSize: PropTypes.number.isRequired,

platform/ui/src/components/contextMenu/ContextMenu.css

@@ -1,20 +1,19 @@
-.ToolContextMenu {
+.ContextMenu {
   position: relative;
   background-color: white;
-  border: 1px solid white;
   border-radius: 5px;
   z-index: 1000;
   display: block;
   width: 170px;
 }
 
-.ToolContextMenu > ul {
+.ContextMenu>ul {
   list-style-type: none;
   padding-left: 0;
   margin: 0;
 }
 
-.ToolContextMenu > ul > li > button {
+.ContextMenu>ul>li>button {
   padding: 10px;
   font-size: 14px;
   border: none;
@@ -25,10 +24,10 @@
   background: none;
 }
 
-.ToolContextMenu > ul > li > button:hover {
+.ContextMenu>ul>li>button:hover {
   color: #16202b;
 }
 
-.ToolContextMenu > ul > li > button:active {
+.ContextMenu>ul>li>button:active {
   color: #79f9fe;
 }

platform/ui/src/components/contextMenu/ContextMenu.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './ContextMenu.css';
+
+const ContextMenu = ({ items, onClick }) => {
+  return (
+    <div className="ContextMenu">
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <button className="form-action" onClick={() => onClick(item)}>
+              <span key={index}>{item.label}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+ContextMenu.propTypes = {
+  items: PropTypes.array.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default ContextMenu;

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

@@ -0,0 +1 @@
+export { default as ContextMenu } from './ContextMenu.js';

platform/ui/src/components/index.js

@@ -17,6 +17,7 @@ import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
 import { OHIFModal } from './ohifModal';
+import { ContextMenu } from './contextMenu';
 import {
   PageToolbar,
   StudyList,
@@ -27,6 +28,7 @@ import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
 
 export {
+  ContextMenu,
   Checkbox,
   CineDialog,
   ViewportDownloadForm,

platform/ui/src/components/measurementTable/MeasurementTable.js

@@ -79,7 +79,11 @@ class MeasurementTable extends Component {
         </ScrollableArea>
         <div className="measurementTableFooter">
           {saveFunction && (
-            <button onClick={this.saveFunction} className="saveBtn">
+            <button
+              onClick={this.saveFunction}
+              className="saveBtn"
+              data-cy="save-measurements-btn"
+            >
               <Icon name="save" width="14px" height="14px" />
               Save measurements
             </button>

platform/ui/src/components/measurementTable/MeasurementTableItem.styl

@@ -1,5 +1,6 @@
 .measurementItem
   .rowActions
+      margin-left: -1px;
       background-color: var(--ui-gray-darker)
       height: 0
       overflow: hidden
@@ -28,7 +29,6 @@
       visibility: visible
 
   .measurementLocation
-    margin-left: 9px;
     margin-top: 9px;
     overflow: hidden;
     max-width: calc(100% - 50px);
@@ -39,7 +39,6 @@
   .measurementDisplayText
     display: inline-block;
     margin-top: 9px;
-    margin-left: 9px;
     padding-left: 9px;
     width: 90px;
     border-left: 1px solid var(--text-secondary-color);

platform/ui/src/components/ohifModal/OHIFModal.js

@@ -29,7 +29,7 @@ const OHIFModal = ({
   const renderHeader = () => {
     return (
       title && (
-        <div className="OHIFModal__header">
+        <div className="OHIFModal__header" data-cy="modal-header">
           <h4>{title}</h4>
           {closeButton && (
             <button data-cy="close-button" onClick={onClose}>
@@ -44,6 +44,7 @@ const OHIFModal = ({
   return (
     <Modal
       className={classNames('OHIFModal', className)}
+      data-cy="modal"
       shouldCloseOnEsc={shouldCloseOnEsc}
       isOpen={isOpen}
       title={title}
@@ -51,7 +52,9 @@ const OHIFModal = ({
     >
       <>
         {renderHeader()}
-        <div className="OHIFModal__content">{children}</div>
+        <div className="OHIFModal__content" data-cy="modal-content">
+          {children}
+        </div>
       </>
     </Modal>
   );

platform/ui/src/components/tableList/TableListItem.styl

@@ -28,7 +28,7 @@
     transition(all 0.3s ease)
     font-size: 14px
     font-weight: 400
-    margin-right: 5px
+    margin-right: 6px
     padding: 10px
     text-align: center
     -webkit-box-sizing: initial;
@@ -38,9 +38,8 @@
   .itemContent
     flex: 1
     color: var(--text-secondary-color)
-    width: calc(100% - 30px);
+    width: calc(100% - 51px);
     font-weight: 400
-    margin-left: 9px;
     margin-top: 9px;
 
   .warning-icon

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

@@ -43,6 +43,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
     ? tabs.map((tab, index) => {
         const { name, hidden = false } = tab;
 
+        const cypressSelectorId = name.toLowerCase();
         const tabClass =
           index === activeTabIndex ? 'nav-link active' : 'nav-link';
         return !hidden ? (
@@ -52,6 +53,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
               onHeaderChanged(index);
             }}
             className={tabClass}
+            data-cy={cypressSelectorId}
           >
             <button>{name}</button>
           </li>

platform/ui/src/contextProviders/ContextMenuProvider.js

@@ -1,147 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useCallback,
-} from 'react';
-import PropTypes from 'prop-types';
-
-import { useDialog } from '@ohif/ui';
-import { useLabellingFlow } from '@ohif/ui';
-
-const ContextMenuContext = createContext(null);
-const { Provider } = ContextMenuContext;
-
-export const useContextMenu = () => useContext(ContextMenuContext);
-
-const ContextMenuProvider = ({
-  children,
-  service,
-  contextMenuComponent: ContextMenuComponent,
-  onDelete,
-}) => {
-  const { create, dismiss } = useDialog();
-  const { show: showLabellingFlow } = useLabellingFlow();
-
-  /**
-   * Sets the implementation of a context menu service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({
-        show,
-        hide,
-      });
-    }
-  }, [hide, service, show]);
-
-  const hide = useCallback(() => dismiss({ id: 'context-menu' }), [dismiss]);
-
-  /**
-   * Show the context menu and override its configuration props.
-   *
-   * @param {ContextMenuProps} props { eventData, isTouchEvent, onClose, visible }
-   * @returns void
-   */
-  const show = useCallback(
-    ({ event }) => {
-      hide();
-      create({
-        id: 'context-menu',
-        isDraggable: false,
-        preservePosition: false,
-        content: ContextMenuComponent,
-        contentProps: {
-          eventData: event,
-          onDelete: (nearbyToolData, eventData) =>
-            onDelete(nearbyToolData, eventData),
-          onClose: () => dismiss({ id: 'context-menu' }),
-          onSetLabel: (eventData, measurementData) =>
-            showLabellingFlow({
-              event: eventData,
-              centralize: true,
-              props: {
-                measurementData,
-                skipAddLabelButton: true,
-                editLocation: true,
-              },
-            }),
-          onSetDescription: (eventData, measurementData) =>
-            showLabellingFlow({
-              event: eventData,
-              centralize: false,
-              defaultPosition: _getDefaultPosition(eventData),
-              props: {
-                measurementData,
-                editDescriptionOnDialog: true,
-              },
-            }),
-        },
-        defaultPosition: _getDefaultPosition(event),
-      });
-    },
-    [ContextMenuComponent, create, dismiss, hide, onDelete, showLabellingFlow]
-  );
-
-  const _getDefaultPosition = event => ({
-    x: (event && event.currentPoints.client.x) || 0,
-    y: (event && event.currentPoints.client.y) || 0,
-  });
-
-  return (
-    <Provider
-      value={{
-        show,
-        hide,
-      }}
-    >
-      {children}
-    </Provider>
-  );
-};
-
-/**
- * Higher Order Component to use the context menu methods through a Class Component.
- *
- * @returns
- */
-export const withContextMenu = Component => {
-  return function WrappedComponent(props) {
-    const { show, hide } = useContextMenu();
-    return (
-      <Component
-        {...props}
-        modal={{
-          show,
-          hide,
-        }}
-      />
-    );
-  };
-};
-
-ContextMenuProvider.defaultProps = {
-  service: null,
-};
-
-ContextMenuProvider.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-  service: PropTypes.shape({
-    setServiceImplementation: PropTypes.func,
-  }),
-  contextMenuComponent: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]).isRequired,
-  onDelete: PropTypes.func.isRequired,
-};
-
-export default ContextMenuProvider;
-
-export const ContextMenuConsumer = ContextMenuContext.Consumer;

platform/ui/src/contextProviders/DialogProvider.js

@@ -152,6 +152,7 @@ const DialogProvider = ({ children, service }) => {
         onStart,
         onStop,
         onDrag,
+        showOverlay,
       } = dialog;
 
       let position =
@@ -160,7 +161,7 @@ const DialogProvider = ({ children, service }) => {
         position = centerPositions.find(position => position.id === id);
       }
 
-      return (
+      const dragableItem = () => (
         <Draggable
           key={id}
           disabled={!isDraggable}
@@ -217,6 +218,16 @@ const DialogProvider = ({ children, service }) => {
           </div>
         </Draggable>
       );
+
+      return (
+        showOverlay ? (
+          <div className="Overlay" key={id}>
+            {dragableItem()}
+          </div>
+        ) : (
+            dragableItem()
+          )
+      );
     });
 
   /**
@@ -238,13 +249,11 @@ const DialogProvider = ({ children, service }) => {
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
-      <div className="DraggableArea">
+      {!isEmpty() &&
-        {dialogs.some(dialog => dialog.showOverlay) ? (
+        <div className="DraggableArea">
-          <div className="Overlay active">{renderDialogs()}</div>
+          {renderDialogs()}
-        ) : (
+        </div>
-          renderDialogs()
+      }
-        )}
-      </div>
       {children}
     </DialogContext.Provider>
   );

platform/ui/src/contextProviders/DialogProvider.styl

@@ -6,17 +6,16 @@
   div
     cursor: grabbing !important
 
-.DraggableArea, .Overlay
+.DraggableArea
   width: 100%
   height: 100%
   position: absolute
-
+  .Overlay
-.Overlay.active
+    position: fixed
-  position: fixed
+    z-index: 999
-  z-index: 999
+    left: 0
-  left: 0
+    top: 0
-  top: 0
+    width: 100%
-  width: 100%
+    height: 100%
-  height: 100%
+    overflow: auto
-  overflow: auto
+    background: rgba(0,0,0,.1)
-  background: rgba(0,0,0,.1)

platform/ui/src/contextProviders/LabellingFlowProvider.js

@@ -1,136 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useCallback,
-} from 'react';
-import PropTypes from 'prop-types';
-
-import { useDialog } from './DialogProvider';
-
-const LabellingFlowContext = createContext(null);
-const { Provider } = LabellingFlowContext;
-
-export const useLabellingFlow = () => useContext(LabellingFlowContext);
-
-const LabellingFlowProvider = ({
-  children,
-  service,
-  labellingComponent: LabellingComponent,
-  onUpdateLabelling,
-}) => {
-  const { create, dismiss } = useDialog();
-
-  /**
-   * Sets the implementation of a labelling flow service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({
-        show,
-        hide,
-      });
-    }
-  }, [hide, service, show]);
-
-  const hide = useCallback(() => dismiss({ id: 'labelling' }), [dismiss]);
-
-  const show = useCallback(
-    ({ centralize, defaultPosition, props }) => {
-      hide();
-      create({
-        id: 'labelling',
-        centralize,
-        isDraggable: false,
-        showOverlay: true,
-        content: LabellingComponent,
-        defaultPosition,
-        contentProps: {
-          visible: true,
-          measurementData: props.measurementData,
-          labellingDoneCallback: () => dismiss({ id: 'labelling' }),
-          updateLabelling: labellingData =>
-            _updateLabellingHandler(labellingData, props.measurementData),
-          ...props,
-        },
-      });
-    },
-    [LabellingComponent, _updateLabellingHandler, create, dismiss, hide]
-  );
-
-  const _updateLabellingHandler = useCallback(
-    (labellingData, measurementData) => {
-      const { location, description, response } = labellingData;
-
-      if (location) {
-        measurementData.location = location;
-      }
-
-      measurementData.description = description || '';
-
-      if (response) {
-        measurementData.response = response;
-      }
-
-      onUpdateLabelling(labellingData, measurementData);
-    },
-    [onUpdateLabelling]
-  );
-
-  return (
-    <Provider
-      value={{
-        show,
-        hide,
-      }}
-    >
-      {children}
-    </Provider>
-  );
-};
-
-/**
- * Higher Order Component to use the labelling flow methods through a Class Component.
- *
- * @returns
- */
-export const withLabellingFlow = Component => {
-  return function WrappedComponent(props) {
-    const { show, hide } = useLabellingFlow();
-    return (
-      <Component
-        {...props}
-        modal={{
-          show,
-          hide,
-        }}
-      />
-    );
-  };
-};
-
-LabellingFlowProvider.defaultProps = {
-  service: null,
-};
-
-LabellingFlowProvider.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-  service: PropTypes.shape({
-    setServiceImplementation: PropTypes.func,
-  }),
-  labellingComponent: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]).isRequired,
-  onUpdateLabelling: PropTypes.func.isRequired,
-};
-
-export default LabellingFlowProvider;
-
-export const LabellingFlowConsumer = LabellingFlowContext.Consumer;

platform/ui/src/contextProviders/index.js

@@ -18,15 +18,3 @@ export {
   withDialog,
   useDialog,
 } from './DialogProvider.js';
-export {
-  default as ContextMenuProvider,
-  withContextMenu,
-  useContextMenu,
-  ContextMenuConsumer,
-} from './ContextMenuProvider.js';
-export {
-  default as LabellingFlowProvider,
-  withLabellingFlow,
-  useLabellingFlow,
-  LabellingFlowConsumer,
-} from './LabellingFlowProvider.js';

platform/ui/src/index.js

@@ -1,4 +1,5 @@
 import {
+  ContextMenu,
   Checkbox,
   CineDialog,
   ViewportDownloadForm,
@@ -60,14 +61,6 @@ import {
   ModalConsumer,
   useModal,
   withModal,
-  ContextMenuProvider,
-  ContextMenuConsumer,
-  useContextMenu,
-  withContextMenu,
-  LabellingFlowProvider,
-  LabellingFlowConsumer,
-  useLabellingFlow,
-  withLabellingFlow,
 } from './contextProviders';
 
 export {
@@ -80,6 +73,7 @@ export {
   TextArea,
   TextInput,
   CineDialog,
+  ContextMenu,
   ViewportDownloadForm,
   ExpandableToolMenu,
   Icon,
@@ -125,14 +119,6 @@ export {
   DialogProvider,
   withDialog,
   useDialog,
-  ContextMenuProvider,
-  ContextMenuConsumer,
-  useContextMenu,
-  withContextMenu,
-  LabellingFlowProvider,
-  LabellingFlowConsumer,
-  useLabellingFlow,
-  withLabellingFlow,
   // Hooks
   useDebounce,
   useMedia,

platform/ui/src/viewer/ToolbarButton.js

@@ -23,8 +23,14 @@ export function ToolbarButton(props) {
     }
   };
 
+  const cypressSelectorId = props.label.toLowerCase();
+
   return (
-    <div className={className} onClick={handleClick}>
+    <div
+      className={className}
+      onClick={handleClick}
+      data-cy={cypressSelectorId}
+    >
       {iconProps && <Icon {...iconProps} />}
       <div className="toolbar-button-label">
         {t(label)}

platform/viewer/CHANGELOG.md

@@ -3,6 +3,235 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.4.0...@ohif/viewer@3.4.1) (2020-01-15)
+
+
+### Bug Fixes
+
+* 🐛 Metadata is being mistakenly purged ([#1360](https://github.com/OHIF/Viewers/issues/1360)) ([b9a66d4](https://github.com/OHIF/Viewers/commit/b9a66d44241f2896ef184511287fb4984671e16d)), closes [#1326](https://github.com/OHIF/Viewers/issues/1326)
+
+
+
+
+
+# [3.4.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.8...@ohif/viewer@3.4.0) (2020-01-14)
+
+
+### Features
+
+* Custom Healthcare API endpoint ([#1367](https://github.com/OHIF/Viewers/issues/1367)) ([a5d6bc6](https://github.com/OHIF/Viewers/commit/a5d6bc6a51784ed3a8a40d4ae773de9099f116b9))
+
+
+
+
+
+## [3.3.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.7...@ohif/viewer@3.3.8) (2020-01-10)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.3.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.6...@ohif/viewer@3.3.7) (2020-01-08)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.3.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.5...@ohif/viewer@3.3.6) (2020-01-07)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.3.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.4...@ohif/viewer@3.3.5) (2020-01-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.3.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.3...@ohif/viewer@3.3.4) (2019-12-30)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.3.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.2...@ohif/viewer@3.3.3) (2019-12-20)
+
+
+### Bug Fixes
+
+* 🐛 1241: Make Plugin switch part of ToolbarModule ([#1322](https://github.com/OHIF/Viewers/issues/1322)) ([6540e36](https://github.com/OHIF/Viewers/commit/6540e36818944ac2eccc696186366ae495b33a04)), closes [#1241](https://github.com/OHIF/Viewers/issues/1241)
+
+
+
+
+
+## [3.3.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.1...@ohif/viewer@3.3.2) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.3.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.3.0...@ohif/viewer@3.3.1) (2019-12-20)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [3.3.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.2.2...@ohif/viewer@3.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)
+
+
+
+
+
+## [3.2.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.2.1...@ohif/viewer@3.2.2) (2019-12-19)
+
+
+### Bug Fixes
+
+* 🐛 Fix drag-n-drop of local files into OHIF ([#1319](https://github.com/OHIF/Viewers/issues/1319)) ([23305ce](https://github.com/OHIF/Viewers/commit/23305cec9c0f514e73a8dd17f984ffc87ad8d131)), closes [#1307](https://github.com/OHIF/Viewers/issues/1307)
+
+
+
+
+
+## [3.2.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.2.0...@ohif/viewer@3.2.1) (2019-12-18)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [3.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.12...@ohif/viewer@3.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)
+
+
+
+
+
+## [3.1.12](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.11...@ohif/viewer@3.1.12) (2019-12-16)
+
+
+### Bug Fixes
+
+* 🐛 Dismiss all dialogs if leaving viewer route [#1242](https://github.com/OHIF/Viewers/issues/1242) ([#1301](https://github.com/OHIF/Viewers/issues/1301)) ([5c3d8b3](https://github.com/OHIF/Viewers/commit/5c3d8b37b6f723fbd8edcc447c37984e7eee8d40))
+
+
+
+
+
+## [3.1.11](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.10...@ohif/viewer@3.1.11) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.10](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.9...@ohif/viewer@3.1.10) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.9](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.8...@ohif/viewer@3.1.9) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.7...@ohif/viewer@3.1.8) (2019-12-16)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.6...@ohif/viewer@3.1.7) (2019-12-13)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.5...@ohif/viewer@3.1.6) (2019-12-13)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.4...@ohif/viewer@3.1.5) (2019-12-13)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.3...@ohif/viewer@3.1.4) (2019-12-13)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.2...@ohif/viewer@3.1.3) (2019-12-12)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.1...@ohif/viewer@3.1.2) (2019-12-12)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.1.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.1.0...@ohif/viewer@3.1.1) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
 # [3.1.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.0.3...@ohif/viewer@3.1.0) (2019-12-11)
 
 

platform/viewer/cypress.json

@@ -1,10 +1,10 @@
 {
   "baseUrl": "http://localhost:3000",
-  "video": false,
   "chromeWebSecurity": false,
   "waitForAnimations": true,
   "defaultCommandTimeout": 10000,
   "requestTimeout": 10000,
   "responseTimeout": 10000,
-  "projectId": "4oe38f"
+  "projectId": "4oe38f",
+  "video": false
 }

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

@@ -47,7 +47,6 @@ describe('OHIF Cornerstone Hotkeys', () => {
     cy.get('body').type('I');
     // Visual comparison
     cy.screenshot('Hotkey I - Should Invert Image');
-    cy.percyCanvasSnapshot('Hotkey I - Should Invert Image');
   });
 
   it('checks if hotkeys "+", "-" and "=" can zoom in, out and fit to viewport', () => {
@@ -77,14 +76,11 @@ describe('OHIF Cornerstone Hotkeys', () => {
 
     // Visual comparison to make sure the 'inverted' image was reset
     cy.screenshot('Hotkey SPACEBAR - Should Reset Image');
-    cy.percyCanvasSnapshot('Hotkey SPACEBAR - Should Reset Image');
   });
 
   it('uses hotkeys "RightArrow" and "LeftArrow" to navigate between multiple viewports', () => {
-    //Click on Layout button
+    //Select viewport layout (3,1)
-    cy.get('@layoutBtn').click();
+    cy.setLayout(3, 1);
-    //Select 3 viewports
-    cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
     cy.waitViewportImageLoading();
 
     // Press multiples hotkeys on viewport #1

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

@@ -119,7 +119,6 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     // Visual comparison
     cy.screenshot('Pan tool moved the image inside the viewport');
-    cy.percyCanvasSnapshot('Pan tool moved the image inside the viewport');
   });
 
   it('checks if Length annotation can be added on viewport and on measurements panel', () => {
@@ -266,7 +265,7 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     let iconName;
     //Click on one of the secondary tools from the overlay
-    cy.get('.tooltip-inner > :nth-child(1)')
+    cy.get('[data-cy="magnify"]')
       .click()
       .then($magnifyBtn => {
         cy.wrap($magnifyBtn)
@@ -407,9 +406,7 @@ describe('OHIF Cornerstone Toolbar', () => {
       .as('toolbarOverlay')
       .should('be.visible');
     //Click on Clear button
-    cy.get('.tooltip-inner')
+    cy.get('[data-cy="clear"]').click();
-      .contains('Clear')
-      .click();
 
     //Verify if measurements were removed from the measurements panel
     cy.get('.measurementItem').should('not.exist');
@@ -446,9 +443,7 @@ describe('OHIF Cornerstone Toolbar', () => {
       .should('be.visible')
       .then(() => {
         //Click Eraser button
-        cy.get('.tooltip-inner')
+        cy.get('[data-cy="eraser"]').click({ force: true });
-          .contains('Eraser')
-          .click({ force: true });
       });
 
     //Erase measurement #1 and Verify if it was removed from the measurements panel
@@ -471,13 +466,10 @@ describe('OHIF Cornerstone Toolbar', () => {
     cy.get('.tooltip-toolbar-overlay').should('be.visible');
 
     // Click on Invert button
-    cy.get('.tooltip-inner')
+    cy.get('[data-cy="invert"]').click();
-      .contains('Invert')
-      .click();
 
     // Visual comparison
     cy.screenshot('Invert tool - Should Invert Canvas');
-    cy.percyCanvasSnapshot('Invert tool - Should Invert Canvas');
   });
 
   it('check if Rotate tool will change the image orientation in the viewport', () => {
@@ -488,14 +480,11 @@ describe('OHIF Cornerstone Toolbar', () => {
       .should('be.visible')
       .then(() => {
         //Click on Rotate button
-        cy.get('.tooltip-inner')
+        cy.get('[data-cy="rotate right"]').click({ force: true });
-          .contains('Rotate')
-          .click({ force: true });
       });
 
     // Visual comparison
     cy.screenshot('Rotate tool - Should Rotate Image to Right');
-    cy.percyCanvasSnapshot('Rotate tool - Should Rotate Image to Right');
   });
 
   it('check if Flip H tool will flip the image horizontally in the viewport', () => {
@@ -505,13 +494,10 @@ describe('OHIF Cornerstone Toolbar', () => {
     cy.get('.tooltip-toolbar-overlay').should('be.visible');
 
     //Click on Flip H button
-    cy.get('.tooltip-inner')
+    cy.get('[data-cy="flip h"]').click();
-      .contains('Flip H')
-      .click();
 
     // Visual comparison
     cy.screenshot('Flip H tool - Should Flip Image on Y axis');
-    cy.percyCanvasSnapshot('Flip H tool - Should Flip Image on Y axis');
   });
 
   it('check if Flip V tool will flip the image vertically in the viewport', () => {
@@ -521,12 +507,9 @@ describe('OHIF Cornerstone Toolbar', () => {
     cy.get('.tooltip-toolbar-overlay').should('be.visible');
 
     //Click on Flip V button
-    cy.get('.tooltip-inner')
+    cy.get('[data-cy="flip v"]').click();
-      .contains('Flip V')
-      .click();
 
     // Visual comparison
     cy.screenshot('Flip V tool - Should Flip Image on X axis');
-    cy.percyCanvasSnapshot('Flip V tool - Should Flip Image on X axis');
   });
 });

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

@@ -0,0 +1,123 @@
+describe('OHIF Download Snapshot File', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(5);
+  });
+
+  beforeEach(() => {
+    cy.openDownloadImageModal();
+  });
+
+  afterEach(() => {
+    // Close modal
+    cy.get('[data-cy="close-button"]')
+      .scrollIntoView()
+      .click();
+  });
+
+  it('checks displayed information for Tablet experience', function() {
+    // Set Tablet resolution
+    cy.viewport(1000, 660);
+    // Visual comparison
+    cy.screenshot('Download Image Modal - Tablet experience');
+  });
+
+  it('checks displayed information for Desktop experience', function() {
+    // Set Desktop resolution
+    cy.viewport(1750, 720);
+    // Visual comparison
+    cy.screenshot('Download Image Modal - Desktop experience');
+    //Check if all elements are displayed
+    cy.get('[data-cy=modal-header]')
+      .as('downloadImageModal')
+      .should('contain.text', 'Download High Quality Image');
+    // Check input fields
+    cy.get('[data-cy=file-type]')
+      .select('png')
+      .should('have.value', 'png')
+      .select('jpg')
+      .should('have.value', 'jpg');
+    // Check image preview
+    cy.get('[data-cy="image-preview"]').should('contain.text', 'Image Preview');
+    cy.get('[data-cy="viewport-preview-img"]')
+      .should('have.attr', 'src')
+      .and('include', 'data:image');
+    // Check buttons
+    cy.get('[data-cy="cancel-btn"]')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.get('[data-cy="download-btn"]')
+      .scrollIntoView()
+      .should('be.visible');
+  });
+
+  it('cancel changes on download modal', function() {
+    //Change Image Width, Filename and File Type
+    cy.get('[data-cy="image-width"]')
+      .clear()
+      .type('300');
+    cy.get('[data-cy="image-height"]') //Image Height should be the same as width
+      .should('have.value', '300');
+    cy.get('[data-cy="file-name"]')
+      .clear()
+      .type('new-filename');
+    cy.get('[data-cy=file-type]').select('png');
+    //Click on Cancel button
+    cy.get('[data-cy="cancel-btn"]')
+      .scrollIntoView()
+      .click();
+    //Check modal is closed
+    cy.get('[data-cy="modal"]').should('not.exist');
+    //Open Modal
+    cy.openDownloadImageModal();
+    //Verify default values was restored
+    cy.get('[data-cy="image-width"]').should('have.value', '512');
+    cy.get('[data-cy="file-name"]').should('have.value', 'image');
+    cy.get('[data-cy=file-type]').should('have.value', 'jpg');
+  });
+
+  // TO-DO once issue is fixed: https://github.com/OHIF/Viewers/issues/1217
+  // it('checks error messages for empty fields', function() {
+  //   //Clear fields Image Width and Filename
+  //   cy.get('[data-cy="image-width"]')
+  //     .clear();
+  //   cy.get('[data-cy="file-name"]').clear();
+
+  //   //Click on Download button
+  //   cy.get('[data-cy="download-btn"]')
+  //     .scrollIntoView()
+  //     .click();
+  //   //Check error message
+  // });
+
+  it('checks if "Show Annotations" checkbox will display annotations', function() {
+    // Close modal that is initially opened
+    cy.get('[data-cy="close-button"]').click();
+
+    // Add measurements in the viewport
+    cy.addLengthMeasurement();
+    cy.addAngleMeasurement();
+
+    // Open Modal
+    cy.openDownloadImageModal();
+    // Select "Show Annotations" option
+    cy.get('[data-cy="show-annotations"]').check();
+    // Check image preview
+    cy.get('[data-cy="image-preview"]').scrollIntoView();
+    // Visual comparison
+    cy.screenshot('Download Image Modal - Show Annotations checked');
+    //Compare classes that exists on Image Preview with Annotations and Without Annotation
+    cy.get('[data-cy="modal-content"]')
+      .find('canvas')
+      .should('have.class', 'magnifyTool'); //Class "MagnifyTool" exists with annotations displayed on Image preview
+    // Uncheck "Show Annotations" option
+    cy.get('[data-cy="show-annotations"]')
+      .uncheck()
+      .wait(300);
+    // Check that class "MagnifyTool" should not exist
+    cy.get('[data-cy="modal-content"]')
+      .find('canvas')
+      .should('not.have.class', 'magnifyTool');
+  });
+});

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

@@ -0,0 +1,21 @@
+//We excluded the tests for '**/studies/**' because the bulk/all of our other study/viewer tests use this route
+
+describe('OHIF Routes', function() {
+  beforeEach(function() {
+    cy.openStudyList();
+  });
+
+  it('checks PT/CT json url study route', function() {
+    cy.visit(
+      '/viewer?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/JSON/PTCTStudy.json'
+    );
+
+    cy.server();
+    cy.route('GET', '**/PTCTStudy/**').as('getPTCTStudy');
+
+    cy.wait('@getPTCTStudy.all');
+    cy.get('@getPTCTStudy').should($route => {
+      expect($route.status).to.be.eq(200);
+    });
+  });
+});

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

@@ -4,9 +4,6 @@ describe('OHIFStandaloneViewer', () => {
   });
 
   it('loads route with at least 2 rows', () => {
-    cy.screenshot('Study List');
-    cy.percyCanvasSnapshot('Study List');
-
     cy.get('[data-cy="study-list-results"] tr')
       .its('length')
       .should('be.gt', 2);

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

@@ -1,14 +1,14 @@
 //We are keeping the hardcoded results values for the study list tests
 //this is intended to be running in a controled docker environment with test data.
-describe('OHIF Study List', function () {
+describe('OHIF Study List', function() {
-  context('Desktop resolution', function () {
+  context('Desktop resolution', function() {
-    beforeEach(function () {
+    beforeEach(function() {
       cy.viewport(1750, 720);
       cy.openStudyList();
       cy.initStudyListAliasesOnDesktop();
     });
 
-    it('searches Patient Name with exact string', function () {
+    it('searches Patient Name with exact string', function() {
       cy.get('@patientName').type('Juno');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -18,7 +18,7 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('searches MRN with exact string', function () {
+    it('searches MRN with exact string', function() {
       cy.get('@MRN').type('ProstateX-0000');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -28,7 +28,7 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('searches Accession with exact string', function () {
+    it('searches Accession with exact string', function() {
       cy.get('@accessionNumber').type('fpcben98890');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -38,17 +38,17 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('searches Modality with camel case', function () {
+    it('searches Modality with camel case', function() {
       cy.get('@modalities').type('Mr');
       //Wait result list to be displayed
       cy.waitStudyList();
       cy.get('@searchResult').should($list => {
-        expect($list.length).to.be.eq(18);
+        expect($list.length).to.be.eq(17);
         expect($list).to.contain('MR');
       });
     });
 
-    it('searches Description with exact string', function () {
+    it('searches Description with exact string', function() {
       cy.get('@studyDescription').type('CHEST');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -58,7 +58,7 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('changes rows per page and checks the study count', function () {
+    it('changes rows per page and checks the study count', function() {
       //Show rows per page options
       const pageRows = [25, 50, 100];
 
@@ -100,14 +100,14 @@ describe('OHIF Study List', function () {
     // });
   });
 
-  context('Tablet resolution', function () {
+  context('Tablet resolution', function() {
-    beforeEach(function () {
+    beforeEach(function() {
       cy.viewport(1000, 660);
       cy.openStudyList();
       cy.initStudyListAliasesOnTablet();
     });
 
-    it('searches Patient Name with exact string', function () {
+    it('searches Patient Name with exact string', function() {
       cy.get('@patientNameOrMRN').type('Juno');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -117,7 +117,7 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('searches MRN with with exact string', function () {
+    it('searches MRN with with exact string', function() {
       cy.get('@patientNameOrMRN').type('ProstateX-0000');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -127,17 +127,17 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('searches Modality with exact string', function () {
+    it('searches Modality with exact string', function() {
       cy.get('@accessionModalityDescription').type('MR');
       //Wait result list to be displayed
       cy.waitStudyList();
       cy.get('@searchResult').should($list => {
-        expect($list.length).to.be.eq(18);
+        expect($list.length).to.be.eq(17);
         expect($list).to.contain('MR');
       });
     });
 
-    it('searches Accession with exact string', function () {
+    it('searches Accession with exact string', function() {
       cy.get('@accessionModalityDescription').type('fpcben98890');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -147,7 +147,7 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('searches Description with exact string', function () {
+    it('searches Description with exact string', function() {
       cy.get('@accessionModalityDescription').type('CHEST');
       //Wait result list to be displayed
       cy.waitStudyList();
@@ -157,7 +157,7 @@ describe('OHIF Study List', function () {
       });
     });
 
-    it('changes rows per page and checks the study count', function () {
+    it('changes rows per page and checks the study count', function() {
       //Show rows per page options
       const pageRows = [25, 50, 100];
 

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

@@ -12,7 +12,6 @@ describe('OHIF Study Viewer Page', function() {
 
   it('checks if series thumbnails are being displayed', function() {
     cy.screenshot('Series Thumbnails - Should Display Thumbnails');
-    cy.percyCanvasSnapshot('Series Thumbnails - Should Display Thumbnails');
 
     cy.get('[data-cy="thumbnail-list"]')
       .its('length')
@@ -293,7 +292,6 @@ describe('OHIF Study Viewer Page', function() {
 
     // Visual comparison
     cy.screenshot('About modal - Should display modal');
-    cy.percyCanvasSnapshot('About modal - Should display modal');
 
     //close modal
     cy.get('[data-cy="close-button"]').click();

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

@@ -24,10 +24,7 @@ describe('OHIF User Preferences', () => {
 
       // Visual comparison
       cy.screenshot(
-        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
+        'User Preferences Modal - Hotkeys tab initial state in Study List page'
-      );
-      cy.percyCanvasSnapshot(
-        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
       );
       cy.get('[data-cy="close-button"]').click();
     });
@@ -42,16 +39,10 @@ describe('OHIF User Preferences', () => {
 
       // Visual comparison
       cy.screenshot(
-        'User Preferences Modal - General tab initial state in Study Viewer page'
+        'User Preferences Modal - General tab initial state in Study List page'
       );
-      cy.percyCanvasSnapshot(
+      // Set language to Spanish and save
-        'User Preferences Modal - General tab initial state in Study Viewer page'
+      cy.setLanguage('Spanish');
-      );
-      // Select Spanish and Save
-      cy.get('#language-select').select('Spanish');
-      cy.get('@saveBtn')
-        .scrollIntoView()
-        .click();
 
       // Header should be translated to Spanish
       cy.get('.research-use')
@@ -161,11 +152,8 @@ describe('OHIF User Preferences', () => {
       // Go to General tab
       cy.get('@userPreferencesGeneralTab').click();
 
-      // Select Spanish and Save
+      // Set language to Spanish
-      cy.get('#language-select').select('Spanish');
+      cy.setLanguage('Spanish');
-      cy.get('@saveBtn')
-        .scrollIntoView()
-        .click();
 
       // Go to Study Viewer page
       cy.openStudy('MISTER^MR');
@@ -191,7 +179,9 @@ describe('OHIF User Preferences', () => {
         .should('contain.text', 'Preferencias');
 
       // Check if new hotkey is working on viewport
-      cy.get('body').type('{shift}Q', { release: false });
+      cy.get('body').type('{shift}Q', {
+        release: false,
+      });
       cy.get('@viewportInfoMidTop').should('contains.text', 'R');
     });
   });
@@ -225,10 +215,7 @@ describe('OHIF User Preferences', () => {
 
       // Visual comparison
       cy.screenshot(
-        'User Preferences Modal - Hotkeys tab initial state in Study List page'
+        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
-      );
-      cy.percyCanvasSnapshot(
-        'User Preferences Modal - Hotkeys tab initial state in Study List page'
       );
       cy.get('[data-cy="close-button"]').click(); //close User Preferences modal
     });
@@ -243,16 +230,10 @@ describe('OHIF User Preferences', () => {
 
       // Visual comparison
       cy.screenshot(
-        'User Preferences Modal - General tab initial state in Study List page'
+        'User Preferences Modal - General tab initial state in Study Viewer page'
       );
-      cy.percyCanvasSnapshot(
+      // Set language to Spanish
-        'User Preferences Modal - General tab initial state in Study List page'
+      cy.setLanguage('Spanish');
-      );
-      // Select Spanish and Save
-      cy.get('#language-select').select('Spanish');
-      cy.get('@saveBtn')
-        .scrollIntoView()
-        .click();
 
       // Header should be translated to Spanish
       cy.get('.research-use')
@@ -310,19 +291,11 @@ describe('OHIF User Preferences', () => {
       // Language dropdown should be displayed
       cy.get('#language-select').should('be.visible');
 
-      // Select Spanish and Save
+      // Set language to Spanish
-      cy.get('#language-select').select('Spanish');
+      cy.setLanguage('Spanish');
-      cy.get('@saveBtn')
-        .scrollIntoView()
-        .click();
 
-      //Open Preferences again
+      // Open User Preferences modal
-      cy.get('[data-cy="options-menu"]')
+      cy.openPreferences();
-        .scrollIntoView()
-        .click();
-      cy.get('[data-cy="dd-item-menu"]')
-        .last()
-        .click();
 
       // Go to general tab
       cy.get('@userPreferencesGeneralTab').click();
@@ -437,9 +410,7 @@ describe('OHIF User Preferences', () => {
 
       // Visual comparison
       cy.screenshot('Viewport Navigation - 2nd viewport inverted and rotated');
-      cy.percyCanvasSnapshot(
+
-        'Viewport Navigation - 2nd viewport inverted and rotated'
-      );
       // Set 1 viewport layout
       cy.setLayout(1, 1);
     });

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

@@ -1,24 +0,0 @@
-describe('ViewerRouting', () => {
-  beforeEach(() => {
-    cy.visit('/');
-    cy.contains('Study List');
-    cy.get(
-      '[data-cy="study-list-results"]> :nth-child(1) > .patientId'
-    ).click();
-  });
-
-  // it('thumbnails list has more than 2 items', () => {
-  //   cy.get('.scrollable-study-thumbnails div.thumbnail-container')
-  //     .its('length')
-  //     .should('be.gte', 2);
-  // });
-
-  // it('loads route with at least 2 thumbnails', () => {
-  //   cy.get(
-  //     ':nth-child(1) > .ThumbnailEntry > .p-x-1 > .ImageThumbnail > .image-thumbnail-canvas > canvas'
-  //   ).should('be.visible');
-  //   cy.get(
-  //     ':nth-child(2) > .ThumbnailEntry > .p-x-1 > .ImageThumbnail > .image-thumbnail-canvas > canvas'
-  //   ).should('be.visible');
-  // });
-});

platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js

@@ -23,8 +23,5 @@ describe('OHIF Microscopy Extension', () => {
     cy.wait(3000); //Waiting for image to render before taking the snapshot
     // Visual comparison
     cy.screenshot('Microscopy Extension - Should display loaded canvas');
-    cy.percyCanvasSnapshot(
-      'Microscopy Extension - Should display loaded canvas'
-    );
   });
 });

platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js

@@ -23,6 +23,5 @@ describe('OHIF PDF Extension', () => {
     // This won't work unless we switch to an extension that renders using `canvas`
     // Currently, we rely on the browser's built-in implementation
     cy.screenshot('PDF Extension - Should load PDF file');
-    cy.percyCanvasSnapshot('PDF Extension - Should load PDF file');
   });
 });

platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js

@@ -24,10 +24,9 @@ describe('OHIF VTK Extension', () => {
     cy.get('[data-cy="thumbnail-list"]')
       .contains('CT WB 5.0  B35f')
       .drag('.viewport-drop-target')
-      .wait(1000); // TODO: Once issue #1167 is fixed, the wait command should be removed. (https://github.com/OHIF/Viewers/issues/1167)
 
     //Select 2D MPR button
-    cy.get('.PluginSwitch > .toolbar-button').click();
+    cy.get('[data-cy="2d mpr"]').click();
 
     //Wait Reformatting Images
     cy.waitVTKReformatting();
@@ -58,9 +57,6 @@ describe('OHIF VTK Extension', () => {
 
     // Visual comparison
     cy.screenshot('VTK initial state - Should display toolbar and 3 viewports');
-    cy.percyCanvasSnapshot(
-      'VTK initial state - Should display toolbar and 3 viewports'
-    );
   });
 
   it('checks Crosshairs tool', () => {
@@ -76,9 +72,6 @@ describe('OHIF VTK Extension', () => {
     cy.screenshot(
       "VTK Crosshairs tool - Should display crosshairs' green lines"
     );
-    cy.percyCanvasSnapshot(
-      "VTK Crosshairs tool - Should display crosshairs' green lines"
-    );
   });
 
   /* TODO: Non-deterministic behavior (const expectedText = 'W: 350 L: -1044';)
@@ -102,7 +95,6 @@ describe('OHIF VTK Extension', () => {
 
     // Visual comparison
     cy.screenshot('VTK WWWC tool - Canvas should be bright');
-    cy.percyCanvasSnapshot('VTK WWWC tool - Canvas should be bright');
   }); */
 
   it('checks Rotate tool', () => {
@@ -118,6 +110,5 @@ describe('OHIF VTK Extension', () => {
 
     // Visual comparison
     cy.screenshot('VTK Rotate tool - Should rotate image');
-    cy.percyCanvasSnapshot('VTK Rotate tool - Should rotate image');
   });
 });

platform/viewer/cypress/integration/pwa/OHIFSaveMeasurements.spec.js

@@ -0,0 +1,149 @@
+describe('OHIF Save Measurements', function() {
+  before(() => {
+    cy.openStudy('Fall 1');
+    cy.expectMinimumThumbnails(2);
+  });
+
+  beforeEach(() => {
+    // Drags Study thumbnail into viewport
+    cy.get('[data-cy="thumbnail-list"]:nth-child(1)')
+      .scrollIntoView()
+      .drag('.viewport-drop-target');
+
+    // Wait image to load on viewport
+    cy.wait(2000);
+
+    cy.resetViewport();
+    cy.initCommonElementsAliases();
+  });
+
+  it('saves new measurement annotation', function() {
+    // Add measurement in the viewport
+    cy.addLengthMeasurement();
+
+    // Verify if measurement annotation was added into the measurements panel
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementItem')
+      .its('length')
+      .should('be.at.least', 1);
+
+    // Save new measurement
+    cy.get('[data-cy="save-measurements-btn"]').click();
+
+    // Verify that success message overlay is displayed
+    cy.get('.sb-success')
+      .should('be.visible')
+      .and('contains.text', 'Measurements were saved with success');
+
+    // Visual test comparison
+    cy.screenshot('Save Measurements - new measurement added');
+    cy.percyCanvasSnapshot('Save Measurements - new measurement added');
+  });
+
+  it('retrieves saved measurements', function() {
+    // Add measurement in the viewport
+    cy.addLengthMeasurement();
+
+    // Verify if measurement annotation was added into the measurements panel
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementDisplayText') // Get label size of the recently added measurement
+      .last()
+      .then($measurementSizeLabel => {
+        // Save new measurement
+        cy.get('[data-cy="save-measurements-btn"]').click();
+
+        // Verify that success message overlay is displayed
+        cy.get('.sb-success').should('be.visible');
+
+        // Reload the page
+        cy.reload();
+
+        //Verify that recently added measurement was retrieved
+        cy.get('@measurementsBtn').click();
+        cy.get('.measurementDisplayText') // Get label size of the recently added measurement
+          .last()
+          .then($retrivedMeasurementSizeLabel => {
+            expect($retrivedMeasurementSizeLabel.textContent).to.eq(
+              $measurementSizeLabel.textContent
+            );
+          });
+      });
+  });
+
+  it('checks error message when saving without any measurement', function() {
+    // Checks that measurement list is empty
+    cy.get('.numberOfItems').should('have.text', '0');
+
+    // Click on Save Measurement button
+    cy.get('[data-cy="save-measurements-btn"]').click();
+
+    // Verify that error message overlay is displayed
+    cy.get('.sb-error')
+      .should('be.visible')
+      .and('contains.text', 'Error while saving the measurements');
+    // Close message overlay
+    cy.get('.sb-closeIcon').click();
+  });
+
+  it('checks if warning message is displayed on measurements of unsupported tools', function() {
+    // Add measurement for unsupported tool in the viewport
+    cy.addAngleMeasurement();
+
+    // Verify if measurement annotation was added into the measurements panel
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementItem')
+      .its('length')
+      .should('be.at.least', 1);
+
+    // Check that warning is displayed for unsupported tool
+    cy.get('.hasWarnings').should('be.visible');
+
+    // Save new measurement
+    cy.get('[data-cy="save-measurements-btn"]').click();
+
+    // Verify that error message overlay is displayed
+    cy.get('.sb-error')
+      .should('be.visible')
+      .and('contains.text', 'Error while saving the measurements');
+    // Close message overlay
+    cy.get('.sb-closeIcon').click();
+    // Close Measurements panel
+    cy.get('@measurementsBtn').click();
+  });
+
+  it('checks if measurements of unsupported tools were not saved', function() {
+    // Add measurement for supported tool in the viewport
+    cy.addLengthMeasurement();
+    // Add measurement for unsupported tool in the viewport
+    cy.addAngleMeasurement();
+
+    // Verify if measurement annotation was added into the measurements panel
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementItem')
+      .its('length')
+      .should('be.eq', 2);
+
+    // Check that warning is displayed for unsupported tool
+    cy.get('.hasWarnings').should('be.visible');
+
+    // Save new measurement
+    cy.get('[data-cy="save-measurements-btn"]').click();
+
+    // Verify that success message overlay is displayed
+    cy.get('.sb-success')
+      .should('be.visible')
+      .and('contains.text', 'Measurements were saved with success');
+
+    // Reload the page
+    cy.reload();
+
+    //Verify that measurement for unsupported tool was not saved
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementItem')
+      .its('length')
+      .should('be.eq', 1);
+
+    // Close Measurements panel
+    cy.get('@measurementsBtn').click();
+  });
+});

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js

@@ -0,0 +1,33 @@
+describe('Visual Regression - OHIF Cornerstone Hotkeys', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(3);
+  });
+
+  beforeEach(() => {
+    cy.initCornerstoneToolsAliases();
+    cy.initCommonElementsAliases();
+    cy.resetViewport();
+  });
+
+  it('checks if hotkey "I" can invert the image', () => {
+    // Hotkey I
+    cy.get('body').type('I');
+    // Visual comparison
+    cy.screenshot('Hotkey I - Should Invert Image');
+    cy.percyCanvasSnapshot('Hotkey I - Should Invert Image');
+  });
+
+  it('checks if hotkey "SPACEBAR" can reset the image', () => {
+    // Press multiples hotkeys
+    cy.get('body').type('V+++I');
+
+    // Hotkey SPACEBAR
+    cy.get('body').type(' ');
+
+    // Visual comparison to make sure the 'inverted' image was reset
+    cy.screenshot('Hotkey SPACEBAR - Should Reset Image');
+    cy.percyCanvasSnapshot('Hotkey SPACEBAR - Should Reset Image');
+  });
+});

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js

@@ -0,0 +1,84 @@
+describe('Visual Regression - OHIF Cornerstone Toolbar', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(5);
+  });
+
+  beforeEach(() => {
+    cy.initCornerstoneToolsAliases();
+    cy.initCommonElementsAliases();
+    cy.resetViewport();
+  });
+
+  it('checks if Pan tool will move the image inside the viewport', () => {
+    //Click on button and vefiry if icon is active on toolbar
+    cy.get('@panBtn')
+      .click()
+      .then($panBtn => {
+        cy.wrap($panBtn).should('have.class', 'active');
+      });
+
+    cy.get('@viewport')
+      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousemove', 'bottom', { which: 1 })
+      .trigger('mouseup', 'bottom');
+
+    // Visual comparison
+    cy.percyCanvasSnapshot('Pan tool moved the image inside the viewport');
+  });
+
+  it('check if Invert tool will change the colors of the image in the viewport', () => {
+    // Click on More button
+    cy.get('@moreBtn').click();
+    // Verify if overlay is displayed
+    cy.get('.tooltip-toolbar-overlay').should('be.visible');
+
+    // Click on Invert button
+    cy.get('[data-cy="invert"]').click();
+
+    // Visual comparison
+    cy.percyCanvasSnapshot('Invert tool - Should Invert Canvas');
+  });
+
+  it('check if Rotate tool will change the image orientation in the viewport', () => {
+    //Click on More button
+    cy.get('@moreBtn').click();
+    //Verify if overlay is displayed
+    cy.get('.tooltip-toolbar-overlay')
+      .should('be.visible')
+      .then(() => {
+        //Click on Rotate button
+        cy.get('[data-cy="rotate right"]').click({ force: true });
+      });
+
+    // Visual comparison
+    cy.percyCanvasSnapshot('Rotate tool - Should Rotate Image to Right');
+  });
+
+  it('check if Flip H tool will flip the image horizontally in the viewport', () => {
+    //Click on More button
+    cy.get('@moreBtn').click();
+    //Verify if overlay is displayed
+    cy.get('.tooltip-toolbar-overlay').should('be.visible');
+
+    //Click on Flip H button
+    cy.get('[data-cy="flip h"]').click();
+
+    // Visual comparison
+    cy.percyCanvasSnapshot('Flip H tool - Should Flip Image on Y axis');
+  });
+
+  it('check if Flip V tool will flip the image vertically in the viewport', () => {
+    //Click on More button
+    cy.get('@moreBtn').click();
+    //Verify if overlay is displayed
+    cy.get('.tooltip-toolbar-overlay').should('be.visible');
+
+    //Click on Flip V button
+    cy.get('[data-cy="flip v"]').click();
+
+    // Visual comparison
+    cy.percyCanvasSnapshot('Flip V tool - Should Flip Image on X axis');
+  });
+});

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js

@@ -0,0 +1,50 @@
+describe('Visual Regression - OHIF Download Snapshot File', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(5);
+  });
+
+  beforeEach(() => {
+    cy.openDownloadImageModal();
+  });
+
+  afterEach(() => {
+    // Close modal
+    cy.get('[data-cy="close-button"]')
+      .scrollIntoView()
+      .click();
+  });
+
+  it('checks displayed information for Tablet experience', function() {
+    // Set Tablet resolution
+    cy.viewport(1000, 660);
+    // Visual comparison
+    cy.percyCanvasSnapshot('Download Image Modal - Tablet experience');
+  });
+
+  it('checks displayed information for Desktop experience', function() {
+    // Set Desktop resolution
+    cy.viewport(1750, 720);
+    // Visual comparison
+    cy.percyCanvasSnapshot('Download Image Modal - Desktop experience');
+  });
+
+  it('checks if "Show Annotations" checkbox will display annotations', function() {
+    // Close modal that is initially opened
+    cy.get('[data-cy="close-button"]').click();
+
+    // Add measurements in the viewport
+    cy.addLengthMeasurement();
+    cy.addAngleMeasurement();
+
+    // Open Modal
+    cy.openDownloadImageModal();
+    // Select "Show Annotations" option
+    cy.get('[data-cy="show-annotations"]').check();
+    // Check image preview
+    cy.get('[data-cy="image-preview"]').scrollIntoView();
+    // Visual comparison
+    cy.percyCanvasSnapshot('Download Image Modal - Show Annotations checked');
+  });
+});

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js

@@ -0,0 +1,22 @@
+describe('Visual Regression - OHIF Microscopy Extension', () => {
+  before(() => {
+    cy.openStudyModality('SM');
+    cy.expectMinimumThumbnails(6);
+  });
+
+  it('drags and drop a SM thumbnail into viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('SM')
+      .drag('.viewport-drop-target');
+
+    cy.get('.DicomMicroscopyViewer')
+      .its('length')
+      .should('be.eq', 1);
+
+    cy.wait(3000); //Waiting for image to render before taking the snapshot
+    // Visual comparison
+    cy.percyCanvasSnapshot(
+      'Microscopy Extension - Should display loaded canvas'
+    );
+  });
+});

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js

@@ -0,0 +1,20 @@
+describe('Visual Regression - OHIF PDF Extension', () => {
+  before(() => {
+    cy.openStudy('Dummy');
+    cy.expectMinimumThumbnails(6);
+  });
+
+  it('drags and drop a PDF thumbnail into viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('DOC')
+      .drag('.viewport-drop-target');
+
+    cy.get('.DicomPDFViewport')
+      .its('length')
+      .should('be.eq', 1);
+
+    // This won't work unless we switch to an extension that renders using `canvas`
+    // Currently, we rely on the browser's built-in implementation
+    cy.percyCanvasSnapshot('PDF Extension - Should load PDF file');
+  });
+});