chore(release): publish [skip ci]

- @ohif/extension-cornerstone@1.5.0
 - @ohif/extension-vtk@0.53.5
 - @ohif/core@1.9.0
 - @ohif/ui@0.62.0
 - @ohif/viewer@2.8.0

README.md

@@ -22,6 +22,7 @@
 [![NPM downloads][npm-downloads-image]][npm-url]
 [![Pulls][docker-pulls-img]][docker-image-url]
 [![MIT License][license-image]][license-url]
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_shield)
 
 [![Netlify Status][netlify-image]][netlify-url]
 [![CircleCI][circleci-image]][circleci-url]
@@ -324,3 +325,6 @@ MIT © [OHIF](https://github.com/OHIF)
 [extension-vtk]: extensions/vtk/README.md
 [vtk-npm]: https://www.npmjs.com/package/@ohif/extension-vtk
 <!-- prettier-ignore-end -->
+
+
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large)

extensions/_example/src/index.js

@@ -11,7 +11,7 @@ export default {
    * LIFECYCLE HOOKS
    */
 
-  preRegistration(extensionConfiguration) {},
+  preRegistration({ serviceManager, configuration: extensionConfiguration }) {},
 
   /**
    * MODULE GETTERS

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.4.1...@ohif/extension-cornerstone@1.5.0) (2019-11-13)
+
+
+### Features
+
+* expose UiNotifications service ([#1172](https://github.com/OHIF/Viewers/issues/1172)) ([5c04e34](https://github.com/OHIF/Viewers/commit/5c04e34c8fb2394ab7acd9eb4f2ab12afeb2f255))
+
+
+
+
+
+## [1.4.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.4.0...@ohif/extension-cornerstone@1.4.1) (2019-11-08)
+
+
+### Bug Fixes
+
+* Add a fallback metadata provider which pulls metadata from WADO-… ([#1158](https://github.com/OHIF/Viewers/issues/1158)) ([31b1adf](https://github.com/OHIF/Viewers/commit/31b1adfa5993d6c8e3e9c8b03fa9856f2621b037))
+
+
+
+
+
 # [1.4.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.3.1...@ohif/extension-cornerstone@1.4.0) (2019-10-26)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "@babel/runtime": "^7.5.5",
     "classnames": "^2.2.6",
     "lodash.throttle": "^4.1.1",
+    "query-string": "^6.8.3",
     "react-cornerstone-viewport": "2.x.x"
   }
 }

extensions/cornerstone/src/index.js

@@ -24,8 +24,8 @@ export default {
    * @param {object} [configuration={}]
    * @param {object|array} [configuration.csToolsConfig] - Passed directly to `initCornerstoneTools`
    */
-  preRegistration(configuration = {}) {
-    init(configuration);
+  preRegistration({ serviceManager, configuration = {} }) {
+    init({ serviceManager, configuration });
   },
   getViewportModule() {
     return OHIFCornerstoneViewport;

extensions/cornerstone/src/init.js

@@ -2,13 +2,33 @@ import OHIF from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
 import initCornerstoneTools from './initCornerstoneTools.js';
+import queryString from 'query-string';
+
+function fallbackMetaDataProvider(type, imageId) {
+  if (!imageId.includes('wado?requestType=WADO')) {
+    return;
+  }
+
+  // If you call for an WADO-URI imageId and get no
+  // metadata, try reformatting to WADO-RS imageId
+  const qs = queryString.parse(imageId);
+  const wadoRoot = window.store.getState().servers.servers[0].wadoRoot;
+  const wadoRsImageId = `wadors:${wadoRoot}/studies/${qs.studyUID}/series/${
+    qs.seriesUID
+  }/instances/${qs.objectUID}/frames/${qs.frame || 1}`;
+
+  return cornerstone.metaData.get(type, wadoRsImageId);
+}
+
+// Add this fallback provider with a low priority so it is handled last
+cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);
 
 /**
  *
  * @param {object} configuration
  * @param {Object|Array} configuration.csToolsConfig
  */
-export default function init(configuration = {}) {
+export default function init({ serviceManager, configuration = {} }) {
   const { csToolsConfig } = configuration;
   const { StackManager } = OHIF.utils;
   const metadataProvider = new OHIF.cornerstone.MetadataProvider();
@@ -78,6 +98,7 @@ export default function init(configuration = {}) {
   ];
 
   tools.forEach(tool => csTools.addTool(tool));
+
   csTools.setToolActive('Pan', { mouseButtonMask: 4 });
   csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
   csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.4...@ohif/extension-vtk@0.53.5) (2019-11-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.53.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.3...@ohif/extension-vtk@0.53.4) (2019-11-12)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.53.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.2...@ohif/extension-vtk@0.53.3) (2019-11-11)
+
+
+### Bug Fixes
+
+* mpr2d vtkjs viewport does not render if range is set to `NaN` values ([#1157](https://github.com/OHIF/Viewers/issues/1157)) ([84a0972](https://github.com/OHIF/Viewers/commit/84a097212babc0f98198b9ced1def9743973a5a8))
+
+
+
+
+
+## [0.53.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.1...@ohif/extension-vtk@0.53.2) (2019-11-08)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.53.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.0...@ohif/extension-vtk@0.53.1) (2019-11-08)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [0.53.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.32...@ohif/extension-vtk@0.53.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
+## [0.52.32](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.31...@ohif/extension-vtk@0.52.32) (2019-11-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.31](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.30...@ohif/extension-vtk@0.52.31) (2019-11-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+## [0.52.30](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.29...@ohif/extension-vtk@0.52.30) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.29](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.28...@ohif/extension-vtk@0.52.29) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Upgrade react-vtkjs-viewport to fix volume orientation ([#1143](https://github.com/OHIF/Viewers/issues/1143)) ([1d86b1a](https://github.com/OHIF/Viewers/commit/1d86b1a102fc422053cff103de8c12ca6f437354))
+
+
+
+
+
+## [0.52.28](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.27...@ohif/extension-vtk@0.52.28) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.52.27](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.26...@ohif/extension-vtk@0.52.27) (2019-10-31)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.27",
+  "version": "0.53.5",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -49,11 +49,11 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.3.7"
+    "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^1.6.1",
-    "@ohif/ui": "^0.58.4",
+    "@ohif/core": "^1.9.0",
+    "@ohif/ui": "^0.62.0",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

extensions/vtk/src/OHIFVTKViewport.js

@@ -65,8 +65,16 @@ class OHIFVTKViewport extends Component {
   };
 
   static propTypes = {
-    studies: PropTypes.object,
-    displaySet: PropTypes.object,
+    viewportData: PropTypes.shape({
+      studies: PropTypes.array,
+      displaySet: PropTypes.shape({
+        studyInstanceUid: PropTypes.string,
+        displaySetInstanceUid: PropTypes.string,
+        sopClassUids: PropTypes.arrayOf(PropTypes.string),
+        sopInstanceUid: PropTypes.string,
+        frameIndex: PropTypes.number,
+      }),
+    }),
     viewportIndex: PropTypes.number,
     children: PropTypes.node,
   };
@@ -175,6 +183,19 @@ class OHIFVTKViewport extends Component {
     }
   };
 
+  /**
+   *
+   *
+   * @param {object} imageDataObject
+   * @param {object} imageDataObject.vtkImageData
+   * @param {object} imageDataObject.imageMetaData0
+   * @param {number} [imageDataObject.imageMetaData0.windowWidth] - The volume's initial windowWidth
+   * @param {number} [imageDataObject.imageMetaData0.windowCenter] - The volume's initial windowCenter
+   * @param {string} imageDataObject.imageMetaData0.modality - CT, MR, PT, etc
+   * @param {string} displaySetInstanceUid
+   * @returns vtkVolumeActor
+   * @memberof OHIFVTKViewport
+   */
   getOrCreateVolume(imageDataObject, displaySetInstanceUid) {
     if (volumeCache[displaySetInstanceUid]) {
       return volumeCache[displaySetInstanceUid];
@@ -183,18 +204,11 @@ class OHIFVTKViewport extends Component {
     const { vtkImageData, imageMetaData0 } = imageDataObject;
     const { windowWidth, windowCenter, modality } = imageMetaData0;
 
-    let lower;
-    let upper;
-
-    if (modality === 'PT') {
-      // For PET just set the range to 0-5 SUV
-      lower = 0;
-      upper = 5;
-    } else {
-      lower = windowCenter - windowWidth / 2.0;
-      upper = windowCenter + windowWidth / 2.0;
-    }
-
+    const { lower, upper } = _getRangeFromWindowLevels(
+      windowWidth,
+      windowCenter,
+      modality
+    );
     const volumeActor = vtkVolume.newInstance();
     const volumeMapper = vtkVolumeMapper.newInstance();
 
@@ -379,4 +393,32 @@ class OHIFVTKViewport extends Component {
   }
 }
 
+/**
+ * Takes window levels and converts them to a range (lower/upper)
+ * for use with VTK RGBTransferFunction
+ *
+ * @private
+ * @param {number} [width] - the width of our window
+ * @param {number} [center] - the center of our window
+ * @param {string} [modality] - 'PT', 'CT', etc.
+ * @returns { lower, upper } - range
+ */
+function _getRangeFromWindowLevels(width, center, modality = undefined) {
+  const levelsAreNotNumbers = isNaN(center) || isNaN(width);
+
+  if (levelsAreNotNumbers) {
+    return { lower: 0, upper: 512 };
+  }
+
+  // For PET just set the range to 0-5 SUV
+  if (modality === 'PT') {
+    return { lower: 0, upper: 5 };
+  }
+
+  return {
+    lower: center - width / 2.0,
+    upper: center + width / 2.0,
+  };
+}
+
 export default OHIFVTKViewport;

extensions/vtk/src/commandsModule.js

@@ -1,7 +1,6 @@
 import {
   vtkInteractorStyleMPRCrosshairs,
   vtkInteractorStyleMPRWindowLevel,
-  vtkInteractorStyleMPRSlice,
   vtkInteractorStyleMPRRotate,
   vtkSVGCrosshairsWidget,
 } from 'react-vtkjs-viewport';

platform/core/CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.9.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.8.0...@ohif/core@1.9.0) (2019-11-13)
+
+
+### Features
+
+* expose UiNotifications service ([#1172](https://github.com/OHIF/Viewers/issues/1172)) ([5c04e34](https://github.com/OHIF/Viewers/commit/5c04e34c8fb2394ab7acd9eb4f2ab12afeb2f255))
+
+
+
+
+
+# [1.8.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.7.1...@ohif/core@1.8.0) (2019-11-12)
+
+
+### Features
+
+* 🎸 Update hotkeys and user preferences modal ([#1135](https://github.com/OHIF/Viewers/issues/1135)) ([e62f5f8](https://github.com/OHIF/Viewers/commit/e62f5f8dd28ab363f23671cd21cee115abb870ff)), closes [#923](https://github.com/OHIF/Viewers/issues/923)
+
+
+
+
+
+## [1.7.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.7.0...@ohif/core@1.7.1) (2019-11-08)
+
+
+### Bug Fixes
+
+* Add a fallback metadata provider which pulls metadata from WADO-… ([#1158](https://github.com/OHIF/Viewers/issues/1158)) ([31b1adf](https://github.com/OHIF/Viewers/commit/31b1adfa5993d6c8e3e9c8b03fa9856f2621b037))
+
+
+
+
+
+# [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.2...@ohif/core@1.7.0) (2019-11-05)
+
+
+### Features
+
+* 🎸 Filter by url query param for seriesInstnaceUID ([#1117](https://github.com/OHIF/Viewers/issues/1117)) ([e208f2e](https://github.com/OHIF/Viewers/commit/e208f2e6a9c49b16dadead0a917f657cf023929a)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
+## [1.6.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.1...@ohif/core@1.6.2) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
 ## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.0...@ohif/core@1.6.1) (2019-10-31)
 
 

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "1.6.1",
+  "version": "1.9.0",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",

platform/core/src/classes/HotkeysManager.js

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash.clonedeep';
 import hotkeys from './hotkeys';
 import log from './../log.js';
 
@@ -51,10 +52,11 @@ export class HotkeysManager {
    * @param {Boolean} [isDefaultDefinitions]
    */
   setHotkeys(hotkeyDefinitions, isDefaultDefinitions = false) {
-    hotkeyDefinitions.forEach(definition => this.registerHotkeys(definition));
+    const definitions = cloneDeep(hotkeyDefinitions);
+    definitions.forEach(definition => this.registerHotkeys(definition));
 
     if (isDefaultDefinitions) {
-      this.hotkeyDefaults = hotkeyDefinitions;
+      this.hotkeyDefaults = definitions;
     }
   }
 

platform/core/src/extensions/ExtensionManager.js

@@ -2,12 +2,13 @@ import MODULE_TYPES from './MODULE_TYPES.js';
 import log from './../log.js';
 
 export default class ExtensionManager {
-  constructor({ commandsManager }) {
+  constructor({ commandsManager, servicesManager }) {
     this.modules = {};
     this.registeredExtensionIds = [];
     this.moduleTypeNames = Object.values(MODULE_TYPES);
     //
     this._commandsManager = commandsManager;
+    this._servicesManager = servicesManager;
 
     this.moduleTypeNames.forEach(moduleType => {
       this.modules[moduleType] = [];
@@ -66,7 +67,10 @@ export default class ExtensionManager {
 
     // preRegistrationHook
     if (extension.preRegistration) {
-      extension.preRegistration(configuration);
+      extension.preRegistration({
+        serviceManager: this._servicesManager,
+        configuration,
+      });
     }
 
     // Register Modules

platform/core/src/index.js

@@ -1,6 +1,7 @@
 import './lib';
 
 import { ExtensionManager, MODULE_TYPES } from './extensions';
+import { ServicesManager } from './services';
 import classes, { CommandsManager, HotkeysManager } from './classes/';
 
 import DICOMWeb from './DICOMWeb';
@@ -18,12 +19,15 @@ import ui from './ui';
 import user from './user.js';
 import utils from './utils/';
 
+import { createUiNotificationService } from './services';
+
 const OHIF = {
   MODULE_TYPES,
   //
   CommandsManager,
   ExtensionManager,
   HotkeysManager,
+  ServicesManager,
   //
   utils,
   studies,
@@ -41,6 +45,8 @@ const OHIF = {
   viewer: {},
   measurements,
   hangingProtocols,
+  //
+  createUiNotificationService,
 };
 
 export {
@@ -49,6 +55,7 @@ export {
   CommandsManager,
   ExtensionManager,
   HotkeysManager,
+  ServicesManager,
   //
   utils,
   studies,
@@ -65,6 +72,8 @@ export {
   DICOMWeb,
   measurements,
   hangingProtocols,
+  //
+  createUiNotificationService,
 };
 
 export { OHIF };

platform/core/src/index.test.js

@@ -8,6 +8,9 @@ describe('Top level exports', () => {
       'CommandsManager',
       'ExtensionManager',
       'HotkeysManager',
+      'ServicesManager',
+      //
+      'createUiNotificationService',
       //
       'utils',
       'studies',

platform/core/src/redux/reducers/preferences.js

@@ -1,18 +1,15 @@
 import cloneDeep from 'lodash.clonedeep';
 
 const defaultState = {
-  // Top level key
-  viewer: {
-    // First tab
-    hotKeysData: {
-      // hotkeyName, label, keys, column
-      // zoom: { label: 'Zoom', command: 'Z', column: 0 },
-    },
-    // Second tab
-    windowLevelData: {
-      // order, description, window (int), level (int)
-      // 0: { description: 'Soft tissue', window: '', level: '' },
-    },
+  // First tab
+  hotkeyDefinitions: [
+    // commandName, label, keys
+    // [{ zoom: { label: 'Zoom', keys: ['z'] }}]
+  ],
+  // Second tab
+  windowLevelData: {
+    // order, description, window (int), level (int)
+    // 0: { description: 'Soft tissue', window: '', level: '' },
   },
 };
 

platform/core/src/services/ServicesManager.js

@@ -0,0 +1,9 @@
+export default class ServicesManager {
+  constructor() {
+    this.services = {};
+  }
+
+  register(service) {
+    this.services[service.name] = service;
+  }
+}

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

@@ -0,0 +1,84 @@
+/**
+ * A UI Notification
+ *
+ * @typedef {Object} Notification
+ * @property {string} title -
+ * @property {string} message -
+ * @property {number} [duration=5000] - in ms
+ * @property {string} [position="bottomRight"] -"topLeft" | "topCenter | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"
+ * @property {string} [type="info"] - "info" | "error" | "warning" | "success"
+ * @property {boolean} [autoClose=true]
+ */
+
+const uiNotificationServicePublicApi = {
+  name: 'UINotificationService',
+  hide,
+  show,
+  setServiceImplementation,
+};
+
+const uiNotificationServiceImplementation = {
+  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
+  _show: () => console.warn('show() NOT IMPLEMENTED'),
+};
+
+function createUiNotificationService() {
+  return uiNotificationServicePublicApi;
+}
+
+/**
+ * Create and show a new UI notification; returns the
+ * ID of the created notification.
+ *
+ * @param {Notification} notification { title, message, duration, position, type, autoClose}
+ * @returns {number} id
+ */
+function show({
+  title,
+  message,
+  duration = 5000,
+  position = 'bottomRight',
+  type = 'info',
+  autoClose = true,
+}) {
+  return uiNotificationServiceImplementation._show({
+    title,
+    message,
+    duration,
+    position,
+    type,
+    autoClose,
+  });
+}
+
+/**
+ * Hides/dismisses the notification, if currently shown
+ *
+ * @param {number} id - id of the notification to hide/dismiss
+ * @returns undefined
+ */
+function hide(id) {
+  return uiNotificationServiceImplementation._hide({ id });
+}
+
+/**
+ *
+ *
+ * @param {*} {
+ *   hide: hideImplementation,
+ *   show: showImplementation,
+ * }
+ */
+function setServiceImplementation({
+  hide: hideImplementation,
+  show: showImplementation,
+}) {
+  if (hideImplementation) {
+    uiNotificationServiceImplementation._hide = hideImplementation;
+  }
+  if (showImplementation) {
+    uiNotificationServiceImplementation._show = showImplementation;
+  }
+}
+
+export default createUiNotificationService;

platform/core/src/services/index.js

@@ -0,0 +1,4 @@
+import ServicesManager from './ServicesManager.js';
+import createUiNotificationService from './UINotificationService';
+
+export { createUiNotificationService, ServicesManager };

platform/core/src/studies/getSeriesInfo.js

@@ -0,0 +1,25 @@
+import DICOMWeb from '../DICOMWeb/';
+import isLowPriorityModality from '../utils/isLowPriorityModality';
+
+const INFO = Symbol('INFO');
+
+/**
+ * Creates an object with processed series information and saves its reference
+ * inside the series object itself.
+ * @param {Object} series The raw series object
+ * @returns {Object} object containing some useful info from given series
+ */
+export default function getSeriesInfo(series) {
+  let info = series[INFO];
+  if (!info) {
+    const modality = DICOMWeb.getString(series['00080060'], '').toUpperCase();
+    info = Object.freeze({
+      modality,
+      isLowPriority: isLowPriorityModality(modality),
+      seriesInstanceUid: DICOMWeb.getString(series['0020000E']),
+      seriesNumber: DICOMWeb.getNumber(series['00200011'], 0) || 0,
+    });
+    series[INFO] = info;
+  }
+  return info;
+}

platform/core/src/studies/retrieveStudiesMetadata.js

@@ -7,13 +7,16 @@ import { retrieveStudyMetadata } from './retrieveStudyMetadata';
  * This function calls retrieveStudyMetadata several times, asynchronously,
  * and waits for all of the results to be returned.
  *
- * @param studyInstanceUids The UIDs of the Studies to be retrieved
- * @return Promise
+ * @param {Object} server Object with server configuration parameters
+ * @param {Array} studyInstanceUids The UIDs of the Studies to be retrieved
+ * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+ * @returns {Promise} that will be resolved with the metadata or rejected with the error
  */
 export default function retrieveStudiesMetadata(
   server,
   studyInstanceUids,
-  seriesInstanceUids
+  filters
 ) {
   // Create an empty array to store the Promises for each metaData retrieval call
   const promises = [];
@@ -21,11 +24,7 @@ export default function retrieveStudiesMetadata(
   // Loop through the array of studyInstanceUids
   studyInstanceUids.forEach(function(studyInstanceUid) {
     // Send the call and resolve or reject the related promise based on its outcome
-    const promise = retrieveStudyMetadata(
-      server,
-      studyInstanceUid,
-      seriesInstanceUids
-    );
+    const promise = retrieveStudyMetadata(server, studyInstanceUid, filters);
 
     // Add the current promise to the array of promises
     promises.push(promise);

platform/core/src/studies/retrieveStudyMetadata.js

@@ -7,11 +7,13 @@ const StudyMetaDataPromises = new Map();
 /**
  * Retrieves study metadata
  *
- * @param {Object} server
+ * @param {Object} server Object with server configuration parameters
  * @param {string} studyInstanceUid The UID of the Study to be retrieved
+ * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
  * @returns {Promise} that will be resolved with the metadata or rejected with the error
  */
-export function retrieveStudyMetadata(server, studyInstanceUid) {
+export function retrieveStudyMetadata(server, studyInstanceUid, filters) {
   // @TODO: Whenever a study metadata request has failed, its related promise will be rejected once and for all
   // and further requests for that metadata will always fail. On failure, we probably need to remove the
   // corresponding promise from the "StudyMetaDataPromises" map...
@@ -32,7 +34,7 @@ export function retrieveStudyMetadata(server, studyInstanceUid) {
 
   // Create a promise to handle the data retrieval
   const promise = new Promise((resolve, reject) => {
-    RetrieveMetadata(server, studyInstanceUid).then(function(data) {
+    RetrieveMetadata(server, studyInstanceUid, filters).then(function(data) {
       resolve(data);
     }, reject);
   });

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

@@ -1,609 +1,30 @@
-import { api } from 'dicomweb-client';
-import DICOMWeb from '../../../DICOMWeb/';
-import isLowPriorityModality from '../../../utils/isLowPriorityModality';
-
-const INFO = Symbol('INFO');
-
-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;
-}
-
-/**
- * Simple cache schema for retrieved color palettes.
- */
-const paletteColorCache = {
-  count: 0,
-  maxAge: 24 * 60 * 60 * 1000, // 24h cache?
-  entries: {},
-  isValidUID: function(paletteUID) {
-    return typeof paletteUID === 'string' && paletteUID.length > 0;
-  },
-  get: function(paletteUID) {
-    let entry = null;
-    if (this.entries.hasOwnProperty(paletteUID)) {
-      entry = this.entries[paletteUID];
-      // check how the entry is...
-      if (Date.now() - entry.time > this.maxAge) {
-        // entry is too old... remove entry.
-        delete this.entries[paletteUID];
-        this.count--;
-        entry = null;
-      }
-    }
-    return entry;
-  },
-  add: function(entry) {
-    if (this.isValidUID(entry.uid)) {
-      let paletteUID = entry.uid;
-      if (this.entries.hasOwnProperty(paletteUID) !== true) {
-        this.count++; // increment cache entry count...
-      }
-      entry.time = Date.now();
-      this.entries[paletteUID] = entry;
-      // @TODO: Add logic to get rid of old entries and reduce memory usage...
-    }
-  },
-};
-
-/** 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}`;
-}
-
-/**
- * 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];
-  }
-}
-
-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);
-    });
-  });
-}
-
-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']
-    ),
-  };
-}
-
-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;
-}
-
-/**
- * Create a plain JS object that describes a study (a study descriptor object)
- * @param {Object} server Object with server configuration paramenters
- * @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']),
-  };
-}
-
-/**
- * Add a list of SOP Instances to a given study object descriptor
- * @param {Object} server Object with server configuration paramenters
- * @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);
-    })
-  );
-}
-
-/**
- * Parses result data from a WADO search into Study MetaData
- * Returns an object populated with study metadata, including the
- * series list.
- *
- * @param {Object} server Object with server configuration paramenters
- * @param {Array} sopInstanceList List of SOP Instances that build up to the study
- * @resolves {{seriesList: Array, patientName: *, patientId: *, accessionNumber: *, studyDate: *, modalities: *, studyDescription: *, imageCount: *, studyInstanceUid: *}}
- */
-async function createStudyFromSOPInstanceList(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');
-}
+import RetrieveMetadataLoaderSync from './retrieveMetadataLoaderSync';
+import RetrieveMetadataLoaderAsync from './retrieveMetadataLoaderAsync';
 
 /**
  * Retrieve Study metadata from a DICOM server. If the server is configured to use lazy load, only the first series
- * will be loaded and the property "studyLoader" will be set to let consumer load remaining series as needed
- * @param {Object} server Object with server configuration paramenters
+ * will be loaded and the property "studyLoader" will be set to let consumer load remaining series as needed.
+ *
+ * @param {Object} server Object with server configuration parameters
  * @param {string} studyInstanceUid The Study Instance UID of the study which needs to be loaded
+ * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
  * @returns {Object} A study descriptor object
  */
-async function RetrieveMetadata(server, studyInstanceUid) {
-  return (server.enableStudyLazyLoad !== false
-    ? lazyLoadStudyMetadata
-    : loadStudyMetadata)(server, studyInstanceUid);
-}
+async function RetrieveMetadata(server, studyInstanceUid, filters = {}) {
+  const RetrieveMetadataLoader =
+    server.enableStudyLazyLoad !== false
+      ? RetrieveMetadataLoaderAsync
+      : RetrieveMetadataLoaderSync;
 
-/**
- *
- * @param {*} server
- * @param {*} studyInstanceUID
- */
-async function loadStudyMetadata(server, studyInstanceUID) {
-  const dicomWeb = new api.DICOMwebClient({
-    url: server.wadoRoot,
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  });
-  return dicomWeb
-    .retrieveStudyMetadata({ studyInstanceUID })
-    .then(result => createStudyFromSOPInstanceList(server, result));
-}
-
-async function lazyLoadStudyMetadata(server, studyInstanceUid) {
-  const seriesInstanceUids = await searchStudySeries(server, studyInstanceUid);
-  const dicomWeb = new api.DICOMwebClient({
-    url: server.wadoRoot,
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  });
-  const seriesLoader = makeSeriesLoader(
-    dicomWeb,
-    studyInstanceUid,
-    seriesInstanceUids
-  );
-  const firstSeries = await seriesLoader.next();
-  const study = await createStudyFromSOPInstanceList(
+  const retrieveMetadataLoader = new RetrieveMetadataLoader(
     server,
-    firstSeries.sopInstances
+    studyInstanceUid,
+    filters
   );
-  if (seriesLoader.hasNext()) {
-    attachSeriesLoader(server, study, seriesLoader);
-  }
-  return study;
-}
+  const studyMetadata = retrieveMetadataLoader.execLoad();
 
-function attachSeriesLoader(server, study, seriesLoader) {
-  study.seriesLoader = Object.freeze({
-    hasNext() {
-      return seriesLoader.hasNext();
-    },
-    async next() {
-      const series = await seriesLoader.next();
-      await addInstancesToStudy(server, study, series.sopInstances);
-      return study.seriesMap[series.seriesInstanceUID];
-    },
-  });
-}
-
-/**
- * Creates an immutable series loader object which loads each series sequentially using the iterator interface
- * @param {DICOMWebClient} dicomWebClient The DICOMWebClient instance to be used for series load
- * @param {string} studyInstanceUID The Study Instance UID from which series will be loaded
- * @param {Array} seriesInstanceUIDList A list of Series Instance UIDs
- * @returns {Object} Returns an object which supports loading of instances from each of given Series Instance UID
- */
-function makeSeriesLoader(
-  dicomWebClient,
-  studyInstanceUID,
-  seriesInstanceUIDList
-) {
-  return Object.freeze({
-    hasNext() {
-      return seriesInstanceUIDList.length > 0;
-    },
-    async next() {
-      const seriesInstanceUID = seriesInstanceUIDList.shift();
-      const sopInstances = await dicomWebClient.retrieveSeriesMetadata({
-        studyInstanceUID,
-        seriesInstanceUID,
-      });
-      return { studyInstanceUID, seriesInstanceUID, sopInstances };
-    },
-  });
-}
-
-/**
- * Search series of a given study
- * @param {Object} server Object with server configuration paramenters
- * @param {string} studyInstanceUID The Study Instance UID to search series from;
- * @returns {Arrays} A list of Series Instance UIDs
- */
-async function searchStudySeries(server, studyInstanceUID) {
-  const dicomWeb = new api.DICOMwebClient({
-    url: server.qidoRoot,
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  });
-  const seriesList = await dicomWeb.searchForSeries({ studyInstanceUID });
-  return seriesList
-    .sort(seriesSortingCriteria)
-    .map(series => getSeriesInfo(series).seriesInstanceUid);
-}
-
-/**
- * Series sorting criteria: series considered low priority are moved to the end
- * of the list and series number is used to break ties
- * @param {Object} firstSeries
- * @param {Object} secondSeries
- */
-function seriesSortingCriteria(firstSeries, secondSeries) {
-  const a = getSeriesInfo(firstSeries);
-  const b = getSeriesInfo(secondSeries);
-  if (!a.isLowPriority && b.isLowPriority) {
-    return -1;
-  }
-  if (a.isLowPriority && !b.isLowPriority) {
-    return 1;
-  }
-  return a.seriesNumber - b.seriesNumber;
-}
-
-/**
- * Creates an object with processed series information and saves its reference
- * inside the series object itself to simplify sorting
- * @param {Object} series The raw series object
- */
-function getSeriesInfo(series) {
-  let info = series[INFO];
-  if (!info) {
-    const modality = DICOMWeb.getString(series['00080060'], '').toUpperCase();
-    info = Object.freeze({
-      modality,
-      isLowPriority: isLowPriorityModality(modality),
-      seriesInstanceUid: DICOMWeb.getString(series['0020000E']),
-      seriesNumber: DICOMWeb.getNumber(series['00200011'], 0) || 0,
-    });
-    series[INFO] = info;
-  }
-  return info;
+  return studyMetadata;
 }
 
 export default RetrieveMetadata;

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

@@ -0,0 +1,58 @@
+/**
+ * Class to define inheritance of load retrieve strategy.
+ * The process can be async load (lazy) or sync load
+ *
+ * There are methods that must be implemented at consumer level
+ * To retrieve study call execLoad
+ */
+export default class RetrieveMetadataLoader {
+  /**
+   * @constructor
+   * @param {Object} server Object with server configuration parameters
+   * @param {Array} studyInstanceUID Study instance ui to be retrieved
+   * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+   * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+   */
+  constructor(server, studyInstanceUID, filters = {}) {
+    this.server = server;
+    this.studyInstanceUID = studyInstanceUID;
+    this.filters = filters;
+  }
+
+  async execLoad() {
+    await this.configLoad();
+    const preLoadData = await this.preLoad();
+    const loadData = await this.load(preLoadData);
+    const postLoadData = await this.posLoad(loadData);
+
+    return postLoadData;
+  }
+
+  /**
+   * It iterates over given loaders running each one. Loaders parameters must be bind when getting it.
+   * @param {Array} loaders - array of loader to retrieve data.
+   */
+  async runLoaders(loaders) {
+    let result;
+    for (const loader of loaders) {
+      try {
+        result = await loader();
+        if (result && result.length) {
+          break; // closes iterator in case data is retrieved successfully
+        }
+      } catch (e) {}
+    }
+
+    if (loaders.next().done && !result) {
+      throw 'cant find data';
+    }
+
+    return result;
+  }
+
+  // Methods to be overwrite
+  async configLoad() {}
+  async preLoad() {}
+  async load(preLoadData) {}
+  async posLoad(loadData) {}
+}

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

@@ -0,0 +1,145 @@
+import { api } from 'dicomweb-client';
+import DICOMWeb from '../../../DICOMWeb/';
+import RetrieveMetadataLoader from './retrieveMetadataLoader';
+import { sortStudySeries, sortingCriteria } from '../../sortStudy';
+import getSeriesInfo from '../../getSeriesInfo';
+import {
+  createStudyFromSOPInstanceList,
+  addInstancesToStudy,
+} from './studyInstanceHelpers';
+
+/**
+ * Map seriesList to an array of seriesInstanceUid
+ * @param {Arrays} seriesList list of Series Instance UIDs
+ * @returns {Arrays} A list of Series Instance UIDs
+ */
+function mapStudySeries(seriesList) {
+  return seriesList.map(series => getSeriesInfo(series).seriesInstanceUid);
+}
+
+function attachSeriesLoader(server, study, seriesLoader) {
+  study.seriesLoader = Object.freeze({
+    hasNext() {
+      return seriesLoader.hasNext();
+    },
+    async next() {
+      const series = await seriesLoader.next();
+      await addInstancesToStudy(server, study, series.sopInstances);
+      return study.seriesMap[series.seriesInstanceUID];
+    },
+  });
+}
+
+/**
+ * Creates an immutable series loader object which loads each series sequentially using the iterator interface
+ * @param {DICOMWebClient} dicomWebClient The DICOMWebClient instance to be used for series load
+ * @param {string} studyInstanceUID The Study Instance UID from which series will be loaded
+ * @param {Array} seriesInstanceUIDList A list of Series Instance UIDs
+ * @returns {Object} Returns an object which supports loading of instances from each of given Series Instance UID
+ */
+function makeSeriesAsyncLoader(
+  dicomWebClient,
+  studyInstanceUID,
+  seriesInstanceUIDList
+) {
+  return Object.freeze({
+    hasNext() {
+      return seriesInstanceUIDList.length > 0;
+    },
+    async next() {
+      const seriesInstanceUID = seriesInstanceUIDList.shift();
+      const sopInstances = await dicomWebClient.retrieveSeriesMetadata({
+        studyInstanceUID,
+        seriesInstanceUID,
+      });
+      return { studyInstanceUID, seriesInstanceUID, sopInstances };
+    },
+  });
+}
+
+/**
+ * Class for async load of study metadata.
+ * It inherits from RetrieveMetadataLoader
+ *
+ * It loads the one series and then append to seriesLoader the others to be consumed/loaded
+ */
+export default class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader {
+  configLoad() {
+    const { server } = this;
+
+    const client = new api.DICOMwebClient({
+      url: server.qidoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(server),
+    });
+
+    this.client = client;
+  }
+
+  /**
+   * @returns {Array} Array of preLoaders. To be consumed as queue
+   */
+  *getPreLoaders() {
+    const preLoaders = [];
+    const {
+      studyInstanceUID,
+      filters: { seriesInstanceUID } = {},
+      client,
+    } = this;
+
+    if (seriesInstanceUID) {
+      const options = {
+        studyInstanceUID,
+        queryParams: { SeriesInstanceUID: seriesInstanceUID },
+      };
+      preLoaders.push(client.searchForSeries.bind(client, options));
+    }
+    // Fallback preloader
+    preLoaders.push(client.searchForSeries.bind(client, { studyInstanceUID }));
+
+    yield* preLoaders;
+  }
+
+  async preLoad() {
+    const preLoaders = this.getPreLoaders();
+    const result = await this.runLoaders(preLoaders);
+
+    const seriesSorted = sortStudySeries(
+      result,
+      sortingCriteria.seriesSortCriteria.seriesInfoSortingCriteria
+    );
+    const seriesInstanceUidsMap = mapStudySeries(seriesSorted);
+
+    return seriesInstanceUidsMap;
+  }
+
+  async load(preLoadData) {
+    const { client, studyInstanceUID } = this;
+
+    const seriesAsyncLoader = makeSeriesAsyncLoader(
+      client,
+      studyInstanceUID,
+      preLoadData
+    );
+
+    const firstSeries = await seriesAsyncLoader.next();
+
+    return {
+      sopInstances: firstSeries.sopInstances,
+      asyncLoader: seriesAsyncLoader,
+    };
+  }
+
+  async posLoad(loadData) {
+    const { server } = this;
+
+    const { sopInstances, asyncLoader } = loadData;
+
+    const study = await createStudyFromSOPInstanceList(server, sopInstances);
+
+    if (asyncLoader.hasNext()) {
+      attachSeriesLoader(server, study, asyncLoader);
+    }
+
+    return study;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { api } from 'dicomweb-client';
+import DICOMWeb from '../../../DICOMWeb/';
+import { createStudyFromSOPInstanceList } from './studyInstanceHelpers';
+import RetrieveMetadataLoader from './retrieveMetadataLoader';
+
+/**
+ * Class for sync load of study metadata.
+ * It inherits from RetrieveMetadataLoader
+ *
+ * A list of loaders (getLoaders) can be created so, it will be applied a fallback load strategy.
+ * I.e Retrieve metadata using all loaders possibilities.
+ */
+export default class RetrieveMetadataLoaderSync extends RetrieveMetadataLoader {
+  getOptions() {
+    const { studyInstanceUID, filters } = this;
+
+    const options = {
+      studyInstanceUID,
+    };
+
+    const { seriesInstanceUID } = filters;
+    if (seriesInstanceUID) {
+      options['seriesInstanceUID'] = seriesInstanceUID;
+    }
+
+    return options;
+  }
+
+  /**
+   * @returns {Array} Array of loaders. To be consumed as queue
+   */
+  *getLoaders() {
+    const loaders = [];
+    const {
+      studyInstanceUID,
+      filters: { seriesInstanceUID } = {},
+      client,
+    } = this;
+
+    if (seriesInstanceUID) {
+      loaders.push(
+        client.retrieveSeriesMetadata.bind(client, {
+          studyInstanceUID,
+          seriesInstanceUID,
+        })
+      );
+    }
+
+    loaders.push(
+      client.retrieveStudyMetadata.bind(client, { studyInstanceUID })
+    );
+
+    yield* loaders;
+  }
+
+  configLoad() {
+    const { server } = this;
+    const client = new api.DICOMwebClient({
+      url: server.wadoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(server),
+    });
+
+    this.client = client;
+  }
+
+  async load(preLoadData) {
+    const loaders = this.getLoaders();
+    const result = this.runLoaders(loaders);
+    return result;
+  }
+
+  async posLoad(loadData) {
+    const { server } = this;
+    return createStudyFromSOPInstanceList(server, loadData);
+  }
+}

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

@@ -0,0 +1,413 @@
+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/core/src/studies/sortStudy.js

@@ -1,17 +1,96 @@
+import getSeriesInfo from './getSeriesInfo';
+
 /**
- * Sorts the series and instances inside a study instance by their series
- * and instance numbers in ascending order.
+ * Series sorting criteria: series considered low priority are moved to the end
+ * of the list and series number is used to break ties
+ * @param {Object} firstSeries
+ * @param {Object} secondSeries
+ */
+function seriesInfoSortingCriteria(firstSeries, secondSeries) {
+  const a = getSeriesInfo(firstSeries);
+  const b = getSeriesInfo(secondSeries);
+  if (!a.isLowPriority && b.isLowPriority) {
+    return -1;
+  }
+  if (a.isLowPriority && !b.isLowPriority) {
+    return 1;
+  }
+  return a.seriesNumber - b.seriesNumber;
+}
+
+const seriesSortCriteria = {
+  default: (a, b) => a.seriesNumber - b.seriesNumber,
+  seriesInfoSortingCriteria,
+};
+
+const instancesSortCriteria = {
+  default: (a, b) => a.instanceNumber - b.instanceNumber,
+};
+
+const sortingCriteria = {
+  seriesSortCriteria,
+  instancesSortCriteria,
+};
+
+/**
+ * Sorts given seriesList (given param is modified)
+ * The default criteria is based on series number in ascending order.
+ *
+ * @param {Array} seriesList List of series
+ * @param {function} seriesSortingCriteria method for sorting
+ * @returns {Array} sorted seriesList object
+ */
+const sortStudySeries = (
+  seriesList,
+  seriesSortingCriteria = seriesSortCriteria.default
+) => {
+  return seriesList.sort(seriesSortingCriteria);
+};
+
+/**
+ * Sorts given instancesList (given param is modified)
+ * The default criteria is based on instance number in ascending order.
+ *
+ * @param {Array} instancesList List of series
+ * @param {function} instancesSortingCriteria method for sorting
+ * @returns {Array} sorted instancesList object
+ */
+const sortStudyInstances = (
+  instancesList,
+  instancesSortingCriteria = instancesSortCriteria.default
+) => {
+  return instancesList.sort(instancesSortingCriteria);
+};
+
+/**
+ * Sorts the series and instances (by default) inside a study instance based on sortingCriteria (given param is modified)
+ * The default criteria is based on series and instance numbers in ascending order.
  *
  * @param {Object} study The study instance
+ * @param {boolean} [deepSort = true] to sort instance also
+ * @param {function} [seriesSortingCriteria = seriesSortCriteria.default] method for sorting series
+ * @param {function} [instancesSortingCriteria = instancesSortCriteria.default] method for sorting instances
+ * @returns {Object} sorted study object
  */
-export default function sortStudy(study) {
+export default function sortStudy(
+  study,
+  deepSort = true,
+  seriesSortingCriteria = seriesSortCriteria.default,
+  instancesSortingCriteria = instancesSortCriteria.default
+) {
   if (!study || !study.seriesList) {
     throw new Error('Insufficient study data was provided to sortStudy');
   }
 
-  study.seriesList.sort((a, b) => a.seriesNumber - b.seriesNumber);
+  sortStudySeries(study.seriesList, seriesSortingCriteria);
 
-  study.seriesList.forEach(series => {
-    series.instances.sort((a, b) => a.instanceNumber - b.instanceNumber);
-  });
+  if (deepSort) {
+    study.seriesList.forEach(series => {
+      sortStudyInstances(series.instances, instancesSortingCriteria);
+    });
+  }
+
+  return study;
 }
+
+export { sortStudySeries, sortStudyInstances, sortingCriteria };

platform/core/src/utils/index.js

@@ -11,6 +11,7 @@ import writeScript from './writeScript.js';
 import DicomLoaderService from './dicomLoaderService.js';
 import b64toBlob from './b64toBlob.js';
 import * as urlUtil from './urlUtil';
+import makeCancelable from './makeCancelable';
 
 const utils = {
   guid,
@@ -27,6 +28,7 @@ const utils = {
   DICOMTagDescriptions,
   DicomLoaderService,
   urlUtil,
+  makeCancelable,
 };
 
 export {
@@ -44,6 +46,7 @@ export {
   DICOMTagDescriptions,
   DicomLoaderService,
   urlUtil,
+  makeCancelable,
 };
 
 export default utils;

platform/core/src/utils/index.test.js

@@ -17,6 +17,7 @@ describe('Top level exports', () => {
       'DICOMTagDescriptions',
       'DicomLoaderService',
       'urlUtil',
+      'makeCancelable',
     ].sort();
 
     const exports = Object.keys(utils.default).sort();

platform/core/src/utils/makeCancelable.js

@@ -0,0 +1,19 @@
+export default function makeCancelable(thenable) {
+  let isCanceled = false;
+  const promise = Promise.resolve(thenable).then(
+    function(result) {
+      if (isCanceled) throw Object.freeze({ isCanceled });
+      return result;
+    },
+    function(error) {
+      if (isCanceled) throw Object.freeze({ isCanceled, error });
+      throw error;
+    }
+  );
+  return Object.assign(Object.create(promise), {
+    then: promise.then.bind(promise),
+    cancel() {
+      isCanceled = true;
+    },
+  });
+}

platform/core/src/utils/updateMetaDataManager.js

@@ -77,14 +77,6 @@ const getWadoRsInstanceMetaData = (study, series, instance) => {
  */
 function updateMetaDataManagerForSeries(study, series) {
   series.instances.forEach(instance => {
-    // Cache just images that are going to be loaded via WADO-RS
-    if (
-      instance.imageRendering !== 'wadors' &&
-      instance.thumbnailRendering !== 'wadors'
-    ) {
-      return;
-    }
-
     const metaData = getWadoRsInstanceMetaData(study, series, instance);
     const numberOfFrames = instance.numberOfFrames || 1;
 
@@ -94,7 +86,7 @@ function updateMetaDataManagerForSeries(study, series) {
     for (let frameNumber = 0; frameNumber < numberOfFrames; frameNumber++) {
       const imageId = getWADORSImageId(instance, frameNumber);
 
-      // TODO Drop dependency on this
+      // TODO Make a metadata manager which uses study/series/instance UIDS instead of imageIds
       cornerstoneWADOImageLoader.wadors.metaDataManager.add(imageId, metaData);
     }
   });

platform/i18n/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.
 
+# [0.52.0](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.51.0...@ohif/i18n@0.52.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
 # [0.51.0](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.5...@ohif/i18n@0.51.0) (2019-10-15)
 
 

platform/i18n/package.json

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

platform/i18n/src/locales/en-US/index.js

@@ -1,13 +1,13 @@
-import AboutModal from "./AboutModal.json";
-import Buttons from "./Buttons.json";
-import CineDialog from "./CineDialog.json";
-import Common from "./Common.json";
-import Header from "./Header.json";
-import MeasurementTable from "./MeasurementTable.json";
-import StudyList from "./StudyList.json";
-import UserPreferencesModal from "./UserPreferencesModal.json";
+import AboutModal from './AboutModal.json';
+import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
+import Common from './Common.json';
+import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
 
-export default { 
+export default {
   'en-US': {
     AboutModal,
     Buttons,
@@ -17,5 +17,5 @@ export default {
     MeasurementTable,
     StudyList,
     UserPreferencesModal,
-  }
-};
+  },
+};

platform/i18n/src/locales/pt-BR/index.js

@@ -1,11 +1,11 @@
-import AboutModal from "./AboutModal.json";
-import Buttons from "./Buttons.json";
-import CineDialog from "./CineDialog.json";
-import Common from "./Common.json";
-import Header from "./Header.json";
-import UserPreferencesModal from "./UserPreferencesModal.json";
+import AboutModal from './AboutModal.json';
+import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
+import Common from './Common.json';
+import Header from './Header.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
 
-export default { 
+export default {
   'pt-BR': {
     AboutModal,
     Buttons,
@@ -13,5 +13,5 @@ export default {
     Common,
     Header,
     UserPreferencesModal,
-  }
-};
+  },
+};

platform/ui/CHANGELOG.md

@@ -3,6 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.62.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.61.0...@ohif/ui@0.62.0) (2019-11-13)
+
+
+### Features
+
+* expose UiNotifications service ([#1172](https://github.com/OHIF/Viewers/issues/1172)) ([5c04e34](https://github.com/OHIF/Viewers/commit/5c04e34c8fb2394ab7acd9eb4f2ab12afeb2f255))
+
+
+
+
+
+# [0.61.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.60.1...@ohif/ui@0.61.0) (2019-11-12)
+
+
+### Features
+
+* 🎸 Update hotkeys and user preferences modal ([#1135](https://github.com/OHIF/Viewers/issues/1135)) ([e62f5f8](https://github.com/OHIF/Viewers/commit/e62f5f8dd28ab363f23671cd21cee115abb870ff)), closes [#923](https://github.com/OHIF/Viewers/issues/923)
+
+
+
+
+
+## [0.60.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.60.0...@ohif/ui@0.60.1) (2019-11-08)
+
+
+### Bug Fixes
+
+* Fix display issues with incorrect thumbnails. Change ImageThumb to functional component. ([#1148](https://github.com/OHIF/Viewers/issues/1148)) ([d70eae3](https://github.com/OHIF/Viewers/commit/d70eae3eb04fe854464f3e62316df8869bba6f11))
+
+
+
+
+
+# [0.60.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.1...@ohif/ui@0.60.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
+
+## [0.59.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.0...@ohif/ui@0.59.1) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+# [0.59.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.5...@ohif/ui@0.59.0) (2019-11-04)
+
+
+### Features
+
+* 🎸 New modal provider ([#1110](https://github.com/OHIF/Viewers/issues/1110)) ([5ee832b](https://github.com/OHIF/Viewers/commit/5ee832b19505a4e8e5756660ce6ed03a7f18dec3)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116)
+
+
+
+
+
+## [0.58.5](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.4...@ohif/ui@0.58.5) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Minor issues measurement panel related to description ([#1142](https://github.com/OHIF/Viewers/issues/1142)) ([681384b](https://github.com/OHIF/Viewers/commit/681384b7425c83b02a0ed83371ca92d78ca7838c))
+
+
+
+
+
 ## [0.58.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.3...@ohif/ui@0.58.4) (2019-10-31)
 
 

platform/ui/package.json

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

platform/ui/src/components/content/aboutContent/AboutContent.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import detect from 'browser-detect';
+import { useTranslation } from 'react-i18next';
+
+import './AboutContent.styl';
+
+const AboutContent = () => {
+  const { t } = useTranslation('AboutContent');
+
+  const { os, version, name } = detect();
+  const capitalize = s =>
+    s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
+
+  const itemsPreset = () => {
+    return [
+      {
+        name: t('Repository URL'),
+        value: 'https://github.com/OHIF/Viewers/',
+        link: 'https://github.com/OHIF/Viewers/',
+      },
+      {
+        name: t('Latest Master Commits'),
+        value: 'https://github.com/OHIF/Viewers/commits/master',
+        link: 'https://github.com/OHIF/Viewers/commits/master',
+      },
+      {
+        name: 'Version Number',
+        value: process.env.VERSION_NUMBER,
+      },
+      {
+        name: t('Build Number'),
+        value: process.env.BUILD_NUM,
+      },
+      {
+        name: t('Browser'),
+        value: `${capitalize(name)} ${version}`,
+      },
+      {
+        name: t('OS'),
+        value: os,
+      },
+    ];
+  };
+
+  const renderTableRow = ({ name, value, link }) => (
+    <tr key={name} style={{ backgroundColor: 'transparent' }}>
+      <td>{name}</td>
+      <td>
+        {link ? (
+          <a target="_blank" rel="noopener noreferrer" href={link}>
+            {value}
+          </a>
+        ) : (
+          value
+        )}
+      </td>
+    </tr>
+  );
+
+  return (
+    <div data-cy="about-modal">
+      <div className="btn-group">
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://groups.google.com/forum/#!forum/cornerstone-platform"
+        >
+          {t('Visit the forum')}
+        </a>
+        {` `}
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/OHIF/Viewers/issues/new/choose"
+        >
+          {t('Report an issue')}
+        </a>
+        {` `}
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://ohif.org"
+        >
+          {t('More details')}
+        </a>
+      </div>
+      <div>
+        <h3>{t('Version Information')}</h3>
+        <table className="table table-responsive">
+          <thead>
+            <tr>
+              <th>{t('Name')}</th>
+              <th>{t('Value')}</th>
+            </tr>
+          </thead>
+          <tbody>{itemsPreset().map(item => renderTableRow(item))}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export { AboutContent };
+export default AboutContent;

platform/ui/src/components/content/aboutContent/AboutContent.styl

@@ -1,7 +1,7 @@
-@import './../../design/styles/common/button.styl'
-@import './../../design/styles/common/table.styl'
+@import '../../../design/styles/common/button.styl'
+@import '../../../design/styles/common/table.styl'
 
-.AboutModal
+.AboutContent
   .btn
     border-color: #ccc;
 

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

@@ -1,10 +1,9 @@
 import React, { useEffect, useState, createRef } from 'react';
-import Modal from 'react-bootstrap-modal';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
-import './DownloadDialog.styl';
+import './ViewportDownloadForm.styl';
 import { TextInput, Select } from '@ohif/ui';
-import { withTranslation } from '../../utils/LanguageProvider';
 
 const FILE_TYPE_OPTIONS = [
   {
@@ -19,9 +18,7 @@ const FILE_TYPE_OPTIONS = [
 
 const DEFAULT_FILENAME = 'image';
 
-const DownloadDialog = ({
-  t,
-  isOpen,
+const ViewportDownloadForm = ({
   activeViewport,
   onClose,
   updateViewportPreview,
@@ -35,6 +32,8 @@ const DownloadDialog = ({
   maximumSize,
   canvasClass,
 }) => {
+  const [t] = useTranslation('ViewportDownloadForm');
+
   const [filename, setFilename] = useState(DEFAULT_FILENAME);
   const [fileType, setFileType] = useState('jpg');
 
@@ -190,142 +189,127 @@ const DownloadDialog = ({
   };
 
   return (
-    <Modal
-      show={isOpen}
-      onHide={onClose}
-      aria-labelledby="ModalHeader"
-      className="DownloadDialog modal fade themed in"
-      backdrop={false}
-      large={true}
-      keyboard={true}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>{t('Download High Quality Image')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <div className="title">
-          {t(
-            'Please specify the dimensions, filename, and desired type for the output image.'
-          )}
-        </div>
+    <>
+      <div className="title">
+        {t(
+          'Please specify the dimensions, filename, and desired type for the output image.'
+        )}
+      </div>
 
-        <div className="file-info-container">
-          <div className="col">
-            <div className="width">
-              <TextInput
-                type="number"
-                min={minimumSize}
-                max={maximumSize}
-                value={width}
-                label={t('Image width (px)')}
-                onChange={onWidthChange}
-              />
-            </div>
-            <div className="height">
-              <TextInput
-                type="number"
-                min={minimumSize}
-                max={maximumSize}
-                value={height}
-                label={t('Image height (px)')}
-                onChange={onHeightChange}
-              />
-            </div>
+      <div className="file-info-container">
+        <div className="col">
+          <div className="width">
+            <TextInput
+              type="number"
+              min={minimumSize}
+              max={maximumSize}
+              value={width}
+              label={t('Image width (px)')}
+              onChange={onWidthChange}
+            />
           </div>
-
-          <div className="col">
-            <div className="file-name">
-              <TextInput
-                type="text"
-                value={filename}
-                onChange={event => setFilename(event.target.value)}
-                label={t('File name')}
-                id="file-name"
-              />
-            </div>
-            <div className="file-type">
-              <Select
-                value={fileType}
-                onChange={event => setFileType(event.target.value)}
-                options={FILE_TYPE_OPTIONS}
-                label={t('File type')}
-              />
-            </div>
-          </div>
-
-          <div className="col">
-            <div className="show-annotations">
-              <label htmlFor="show-annotations" className="form-check-label">
-                <input
-                  id="show-annotations"
-                  type="checkbox"
-                  className="form-check-input"
-                  checked={showAnnotations}
-                  onChange={event => setShowAnnotations(event.target.checked)}
-                />
-                {t('Show Annotations')}
-              </label>
-            </div>
+          <div className="height">
+            <TextInput
+              type="number"
+              min={minimumSize}
+              max={maximumSize}
+              value={height}
+              label={t('Image height (px)')}
+              onChange={onHeightChange}
+            />
           </div>
         </div>
 
-        <div
+        <div className="col">
+          <div className="file-name">
+            <TextInput
+              type="text"
+              value={filename}
+              onChange={event => setFilename(event.target.value)}
+              label={t('File name')}
+              id="file-name"
+            />
+          </div>
+          <div className="file-type">
+            <Select
+              value={fileType}
+              onChange={event => setFileType(event.target.value)}
+              options={FILE_TYPE_OPTIONS}
+              label={t('File type')}
+            />
+          </div>
+        </div>
+
+        <div className="col">
+          <div className="show-annotations">
+            <label htmlFor="show-annotations" className="form-check-label">
+              <input
+                id="show-annotations"
+                type="checkbox"
+                className="form-check-input"
+                checked={showAnnotations}
+                onChange={event => setShowAnnotations(event.target.checked)}
+              />
+              {t('Show Annotations')}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          height: viewportElementHeight,
+          width: viewportElementWidth,
+          position: 'absolute',
+          left: '9999px',
+        }}
+        ref={ref => setViewportElement(ref)}
+      >
+        <canvas
+          className={canvasClass}
           style={{
-            height: viewportElementHeight,
-            width: viewportElementWidth,
-            position: 'absolute',
-            left: '9999px',
+            height: downloadCanvas.height,
+            width: downloadCanvas.width,
+            display: 'block',
           }}
-          ref={ref => setViewportElement(ref)}
-        >
-          <canvas
-            className={canvasClass}
-            style={{
-              height: downloadCanvas.height,
-              width: downloadCanvas.width,
-              display: 'block',
-            }}
-            width={downloadCanvas.width}
-            height={downloadCanvas.height}
-            ref={downloadCanvas.ref}
-          ></canvas>
-        </div>
+          width={downloadCanvas.width}
+          height={downloadCanvas.height}
+          ref={downloadCanvas.ref}
+        ></canvas>
+      </div>
 
-        <div className="preview">
-          <h4> {t('Image Preview')}</h4>
-          <img
-            className="viewport-preview"
-            src={viewportPreview.src}
-            alt="Viewport Preview"
-            style={{
-              height: viewportPreview.height,
-              width: viewportPreview.width,
-            }}
-          />
-        </div>
+      <div className="preview">
+        <h4> {t('Image Preview')}</h4>
+        <img
+          className="viewport-preview"
+          src={viewportPreview.src}
+          alt="Viewport Preview"
+          style={{
+            height: viewportPreview.height,
+            width: viewportPreview.width,
+          }}
+        />
+      </div>
 
-        <div className="actions">
-          <div className="action-cancel">
-            <button type="button" className="btn btn-danger" onClick={onClose}>
-              {t('Cancel')}
-            </button>
-          </div>
-          <div className="action-save">
-            <button onClick={downloadImage} className="btn btn-primary">
-              {t('Download')}
-            </button>
-          </div>
+      <div className="actions">
+        <div className="action-cancel">
+          <button type="button" className="btn btn-danger" onClick={onClose}>
+            {t('Cancel')}
+          </button>
         </div>
-      </Modal.Body>
-    </Modal>
+        <div className="action-save">
+          <button onClick={downloadImage} className="btn btn-primary">
+            {t('Download')}
+          </button>
+        </div>
+      </div>
+    </>
   );
 };
 
-DownloadDialog.propTypes = {
-  t: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  activeViewport: PropTypes.object,
+ViewportDownloadForm.propTypes = {
   onClose: PropTypes.func.isRequired,
+  activeViewport: PropTypes.object,
   updateViewportPreview: PropTypes.func.isRequired,
   enableViewport: PropTypes.func.isRequired,
   disableViewport: PropTypes.func.isRequired,
@@ -338,4 +322,4 @@ DownloadDialog.propTypes = {
   canvasClass: PropTypes.string.isRequired,
 };
 
-export default withTranslation('DownloadDialog')(DownloadDialog);
+export default ViewportDownloadForm;

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

@@ -1,8 +1,8 @@
-@import './../../design/styles/common/global.styl'
-@import './../../design/styles/common/form.styl'
-@import './../../design/styles/common/button.styl'
+@import '../../../design/styles/common/global.styl'
+@import '../../../design/styles/common/form.styl'
+@import '../../../design/styles/common/button.styl'
 
-.DownloadDialog
+.ViewportDownloadForm
   color: var(--text-secondary-color);
   filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
   border: none;

platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx

@@ -0,0 +1,39 @@
+---
+name: Viewport Download Form
+menu: Components
+route: /components/viewport-download-form
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { ViewportDownloadForm } from './../index'
+import NameSpace from '../../../__docs__/NameSpace'
+
+# Viewport Download Form
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{}}
+  >
+    {({ state, setState }) => (
+      <React.Fragment>
+        <div>
+          <pre>{JSON.stringify(state, null, 2)}</pre>
+        </div>
+        <div style={{ maxWidth: '400px', margin: '0 auto' }}>
+          <ViewportDownloadForm />
+        </div>
+      </React.Fragment>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={ViewportDownloadForm} />
+
+## Translation Namespace
+
+<NameSpace name="ViewportDownloadForm" />

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

@@ -0,0 +1,2 @@
+import ViewportDownloadForm from './ViewportDownloadForm';
+export { ViewportDownloadForm };

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

@@ -1,2 +0,0 @@
-import DownloadDialog from './DownloadDialog';
-export { DownloadDialog };

platform/ui/src/components/index.js

@@ -4,18 +4,19 @@ import { MeasurementTable, MeasurementTableItem } from './measurementTable';
 import { Overlay, OverlayTrigger } from './overlayTrigger';
 import { TableList, TableListItem } from './tableList';
 import {
-  AboutModal,
+  AboutContent,
   UserPreferences,
-  UserPreferencesModal,
-} from './userPreferencesModal';
+  UserPreferencesForm,
+} from './userPreferencesForm';
 
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
-import { DownloadDialog } from './downloadDialog';
+import { ViewportDownloadForm } from './content/viewportDownloadForm';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
+import { OHIFModal } from './ohifModal';
 import {
   PageToolbar,
   StudyList,
@@ -28,7 +29,7 @@ import { Tooltip } from './tooltip';
 export {
   Checkbox,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -49,7 +50,8 @@ export {
   TablePagination,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
-  UserPreferencesModal,
+  UserPreferencesForm,
+  OHIFModal,
 };

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

@@ -30,6 +30,11 @@
   .measurementLocation
     margin-left: 9px;
     margin-top: 9px;
+    overflow: hidden;
+    max-width: calc(100% - 50px);
+    text-overflow: ellipsis;
+    overflow-wrap: normal;
+    white-space: nowrap;
 
   .measurementDisplayText
     display: inline-block;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactBootstrapModal from 'react-bootstrap-modal';
+import classNames from 'classnames';
+
+const OHIFModal = ({
+  className,
+  closeButton,
+  backdrop,
+  keyboard,
+  show,
+  title,
+  onHide,
+  footer: Footer,
+  header: Header,
+  children: Component,
+}) => (
+  <ReactBootstrapModal
+    className={classNames('modal fade themed in', className)}
+    backdrop={backdrop}
+    keyboard={keyboard}
+    show={show}
+    large={true}
+    title={title}
+    onHide={onHide}
+  >
+    {(Header || title) && (
+      <ReactBootstrapModal.Header closeButton={closeButton}>
+        {title && (
+          <ReactBootstrapModal.Title>{title}</ReactBootstrapModal.Title>
+        )}
+        {Header && <Header hide={onHide} />}
+      </ReactBootstrapModal.Header>
+    )}
+    <ReactBootstrapModal.Body>
+      {Component && <Component hide={onHide} />}
+    </ReactBootstrapModal.Body>
+    {Footer && (
+      <ReactBootstrapModal.Footer>
+        {' '}
+        <Footer hide={onHide} />
+      </ReactBootstrapModal.Footer>
+    )}
+  </ReactBootstrapModal>
+);
+
+OHIFModal.propTypes = {
+  className: PropTypes.string,
+  closeButton: PropTypes.bool,
+  backdrop: PropTypes.bool,
+  keyboard: PropTypes.bool,
+  show: PropTypes.bool,
+  title: PropTypes.string,
+  onHide: PropTypes.func,
+  footer: PropTypes.node,
+  header: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default OHIFModal;

platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx

@@ -1,15 +1,15 @@
 ---
-name: Download Dialog
+name: OHIFModal
 menu: Components
-route: /components/download-dialog
+route: /components/ohif-modal
 ---
 
 import { Playground, Props } from 'docz'
 import { State } from 'react-powerplug'
-import { DownloadDialog } from './../index'
+import { OHIFModal } from './../index'
 import NameSpace from '../../../__docs__/NameSpace'
 
-# Download Dialog
+# OHIF Modal
 
 ## Basic usage
 
@@ -23,7 +23,7 @@ import NameSpace from '../../../__docs__/NameSpace'
           <pre>{JSON.stringify(state, null, 2)}</pre>
         </div>
         <div style={{ maxWidth: '400px', margin: '0 auto' }}>
-          <DownloadDialog />
+          <OHIFModal />
         </div>
       </React.Fragment>
     )}
@@ -32,8 +32,8 @@ import NameSpace from '../../../__docs__/NameSpace'
 
 ## API
 
-<Props of={DownloadDialog} />
+<Props of={OHIFModal} />
 
 ## Translation Namespace
 
-<NameSpace name="DownloadDialog" />
+<NameSpace name="OHIFModal" />

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

@@ -0,0 +1,2 @@
+import OHIFModal from './OHIFModal';
+export { OHIFModal };

platform/ui/src/components/studyBrowser/ImageThumbnail.js

@@ -1,7 +1,8 @@
 /* global cornerstone */
 import './ImageThumbnail.styl';
 
-import React, { PureComponent } from 'react';
+import { utils } from '@ohif/core';
+import React, { useState, useEffect, createRef } from 'react';
 
 import PropTypes from 'prop-types';
 import ViewportErrorIndicator from '../../viewer/ViewportErrorIndicator';
@@ -12,100 +13,132 @@ import ViewportLoadingIndicator from '../../viewer/ViewportLoadingIndicator';
 // - Set as external dependency?
 // - Pass in the entire load and render function as a prop?
 //import cornerstone from 'cornerstone-core';
+function ImageThumbnail(props) {
+  const {
+    width,
+    height,
+    imageSrc,
+    imageId,
+    stackPercentComplete,
+    error: propsError,
+  } = props;
 
-export default class ImageThumbnail extends PureComponent {
-  static propTypes = {
-    imageSrc: PropTypes.string,
-    imageId: PropTypes.string,
-    error: PropTypes.bool.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    stackPercentComplete: PropTypes.number.isRequired,
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [image, setImage] = useState({});
+  const canvasRef = createRef();
+
+  let loadingOrError;
+  let cancelablePromise;
+
+  if (propsError || error) {
+    loadingOrError = <ViewportErrorIndicator />;
+  } else if (isLoading) {
+    loadingOrError = <ViewportLoadingIndicator />;
+  }
+
+  const showStackLoadingProgressBar = stackPercentComplete !== undefined;
+
+  const shouldRenderToCanvas = () => {
+    return imageId && !imageSrc;
   };
 
-  static defaultProps = {
-    error: false,
-    stackPercentComplete: 0,
-    width: 217,
-    height: 123,
+  const fetchImagePromise = () => {
+    if (!cancelablePromise) {
+      return;
+    }
+
+    setLoading(true);
+    cancelablePromise
+      .then(response => {
+        setImage(response);
+      })
+      .catch(error => {
+        if (error.isCanceled) return;
+        setLoading(false);
+        setError(true);
+        throw new Error(error);
+      });
   };
 
-  constructor(props) {
-    super(props);
+  const setImagePromise = () => {
+    if (shouldRenderToCanvas()) {
+      cancelablePromise = utils.makeCancelable(
+        cornerstone.loadAndCacheImage(imageId)
+      );
+    }
+  };
 
-    this.canvas = React.createRef();
-    this.state = {
-      loading: this.shouldRenderToCanvas(),
+  const purgeCancelablePromise = () => {
+    if (cancelablePromise) {
+      cancelablePromise.cancel();
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      purgeCancelablePromise();
     };
-  }
+  }, []);
 
-  shouldRenderToCanvas() {
-    return this.props.imageId && !this.props.imageSrc;
-  }
-
-  componentDidMount() {
-    if (this.shouldRenderToCanvas()) {
-      cornerstone
-        .loadAndCacheImage(this.props.imageId)
-        .then(image => {
-          cornerstone.renderToCanvas(this.canvas.current, image);
-          this.setState({
-            loading: false,
-          });
-        })
-        .catch(error => {
-          this.setState({
-            loading: false,
-            error: true,
-          });
-          throw new Error(error);
-        });
+  useEffect(() => {
+    if (image.imageId) {
+      cornerstone.renderToCanvas(canvasRef.current, image);
+      setLoading(false);
     }
-  }
+  }, [image.imageId]);
 
-  render() {
-    let loadingOrError;
-    if (this.props.error) {
-      loadingOrError = <ViewportErrorIndicator />;
-    } else if (this.state.loading) {
-      loadingOrError = <ViewportLoadingIndicator />;
+  useEffect(() => {
+    if (!image.imageId || image.imageId !== imageId) {
+      purgeCancelablePromise();
+      setImagePromise();
+      fetchImagePromise();
     }
+  }, [imageId]);
 
-    const showStackLoadingProgressBar =
-      this.props.stackPercentComplete !== undefined;
-
-    return (
-      <div className="ImageThumbnail">
-        <div className="image-thumbnail-canvas">
-          {this.shouldRenderToCanvas() ? (
-            <canvas
-              ref={this.canvas}
-              width={this.props.width}
-              height={this.props.height}
-            />
-          ) : (
-            <img
-              className="static-image"
-              src={this.props.imageSrc}
-              //width={this.props.width}
-              height={this.props.height}
-              alt={''}
-            />
-          )}
-        </div>
-        {loadingOrError}
-        {showStackLoadingProgressBar && (
-          <div className="image-thumbnail-progress-bar">
-            <div
-              className="image-thumbnail-progress-bar-inner"
-              style={{ width: `${this.props.stackPercentComplete}%` }}
-            />
-          </div>
-        )}
-        {this.state.loading && (
-          <div className="image-thumbnail-loading-indicator"></div>
+  return (
+    <div className="ImageThumbnail">
+      <div className="image-thumbnail-canvas">
+        {shouldRenderToCanvas() ? (
+          <canvas ref={canvasRef} width={width} height={height} />
+        ) : (
+          <img
+            className="static-image"
+            src={imageSrc}
+            //width={this.props.width}
+            height={height}
+            alt={''}
+          />
         )}
       </div>
-    );
-  }
+      {loadingOrError}
+      {showStackLoadingProgressBar && (
+        <div className="image-thumbnail-progress-bar">
+          <div
+            className="image-thumbnail-progress-bar-inner"
+            style={{ width: `${stackPercentComplete}%` }}
+          />
+        </div>
+      )}
+      {isLoading && <div className="image-thumbnail-loading-indicator"></div>}
+    </div>
+  );
 }
+
+ImageThumbnail.propTypes = {
+  imageSrc: PropTypes.string,
+  imageId: PropTypes.string,
+  error: PropTypes.bool,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  stackPercentComplete: PropTypes.number.isRequired,
+};
+
+ImageThumbnail.defaultProps = {
+  error: false,
+  stackPercentComplete: 0,
+  width: 217,
+  height: 123,
+};
+
+export default ImageThumbnail;

platform/ui/src/components/studyBrowser/StudyBrowser.js

@@ -32,7 +32,7 @@ function StudyBrowser(props) {
 
               return (
                 <div
-                  key={`container_${studyIndex}_${thumbIndex}`}
+                  key={thumb.displaySetInstanceUid}
                   className="thumbnail-container"
                   data-cy="thumbnail-list"
                 >

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

@@ -38,6 +38,7 @@
   .itemContent
     flex: 1
     color: var(--text-secondary-color)
+    width: calc(100% - 30px);
     font-weight: 400
     margin-left: 9px;
     margin-top: 9px;

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

@@ -10,31 +10,14 @@ import PropTypes from 'prop-types';
 
 export class HotKeysPreferences extends Component {
   static propTypes = {
-    hotKeysData: PropTypes.objectOf(
-      PropTypes.shape({
-        keys: PropTypes.arrayOf(PropTypes.string).isRequired,
-        label: PropTypes.string.isRequired,
-      })
-    ).isRequired,
-    onChange: PropTypes.func,
+    hotkeyDefinitions: PropTypes.array.isRequired,
   };
 
   constructor(props) {
     super(props);
 
-    const hotkeyCommands = Object.keys(this.props.hotKeysData);
-    const localHotKeys = hotkeyCommands.map(commandName => {
-      const definition = this.props.hotKeysData[commandName];
-
-      return {
-        commandName,
-        keys: definition.keys,
-        label: definition.label,
-      };
-    });
-
     this.state = {
-      hotKeys: localHotKeys,
+      hotKeys: this.props.hotkeyDefinitions,
       errorMessages: {},
     };
 
@@ -53,24 +36,28 @@ export class HotKeysPreferences extends Component {
     const { ctrlKey, altKey, shiftKey } = keyDownEvent;
 
     if (ctrlKey && !altKey) {
-      keysPressedArray.push('CTRL');
+      keysPressedArray.push('ctrl');
     }
 
     if (shiftKey && !altKey) {
-      keysPressedArray.push('SHIFT');
+      keysPressedArray.push('shift');
     }
 
     if (altKey && !ctrlKey) {
-      keysPressedArray.push('ALT');
+      keysPressedArray.push('alt');
     }
 
     return keysPressedArray;
   }
 
-  getConflictingCommand(currentToolKey, hotKeyCommand) {
-    return Object.keys(this.state.hotKeys).find(tool => {
-      const value = this.state.hotKeys[tool].command;
-      return value && value === hotKeyCommand && tool !== currentToolKey;
+  getConflictingCommand(currentCommandName, currentHotKeys) {
+    return this.state.hotKeys.find((tool, index) => {
+      const toolHotKeys = tool.keys[0];
+      return (
+        toolHotKeys &&
+        toolHotKeys === currentHotKeys &&
+        tool.commandName !== currentCommandName
+      );
     });
   }
 
@@ -89,7 +76,7 @@ export class HotKeysPreferences extends Component {
         specialKeyName ||
         keyDownEvent.key ||
         String.fromCharCode(keyDownEvent.keyCode);
-      pressedKeys.push(keyName.toUpperCase());
+      pressedKeys.push(keyName);
     }
 
     this.updateHotKeysState(commandName, pressedKeys.join('+'));
@@ -136,17 +123,17 @@ export class HotKeysPreferences extends Component {
     const hotKey = this.state.hotKeys[hotKeyIndex];
     const keys = hotKey.keys[0];
     const pressedKeys = keys.split('+');
-    const lastPressedKey = pressedKeys[pressedKeys.length - 1].toUpperCase();
+    const lastPressedKey = pressedKeys[pressedKeys.length - 1];
 
     // clear the prior errors
     this.setState({ errorMessages: {} }, () => {
       // Check if it has a valid modifier
-      const isModifier = ['CTRL', 'ALT', 'SHIFT'].includes(lastPressedKey);
+      const isModifier = ['ctrl', 'alt', 'shift'].includes(lastPressedKey);
       if (isModifier) {
         this.updateHotKeysState(commandName, '');
         this.updateErrorsState(
           commandName,
-          "It's not possible to define only modifier keys (CTRL, ALT and SHIFT) as a shortcut"
+          "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
         );
         return;
       }
@@ -154,21 +141,13 @@ export class HotKeysPreferences extends Component {
       /*
        * Check if it has some conflict
        */
-      const conflictedCommandKey = this.getConflictingCommand(
-        commandName,
-        keys
-      );
-      if (conflictedCommandKey) {
-        const conflictedCommand = this.state.hotKeys[conflictedCommandKey];
-
+      const conflictedCommand = this.getConflictingCommand(commandName, keys);
+      if (conflictedCommand) {
+        this.updateHotKeysState(commandName, '');
         this.updateErrorsState(
           commandName,
-          `"${conflictedCommand.label}" is already using the "${
-            conflictedCommand.command
-          }" shortcut.`
+          `"${conflictedCommand.label}" is already using the "${keys}" shortcut.`
         );
-        this.updateErrorsState(conflictedCommandKey, '');
-        this.updateHotKeysState(commandName, '');
         return;
       }
 
@@ -177,8 +156,7 @@ export class HotKeysPreferences extends Component {
        */
       const modifierCommand = pressedKeys
         .slice(0, pressedKeys.length - 1)
-        .join('+')
-        .toUpperCase();
+        .join('+');
 
       const disallowedCombination = disallowedCombinations[modifierCommand];
       const hasDisallowedCombinations = disallowedCombination
@@ -189,7 +167,7 @@ export class HotKeysPreferences extends Component {
         this.updateHotKeysState(commandName, '');
         this.updateErrorsState(
           commandName,
-          "It's not possible to define only modifier keys (CTRL, ALT and SHIFT) as a shortcut"
+          `"${pressedKeys.join('+')}" shortcut combination is not allowed`
         );
         return;
       }

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

@@ -8,14 +8,14 @@ import './UserPreferences.styl';
 
 export class UserPreferences extends Component {
   static defaultProps = {
-    hotKeysData: {},
+    hotkeyDefinitions: [],
     windowLevelData: {},
     generalData: {},
   };
 
   // TODO: Make this more generic. Tabs should not be restricted to these entries
   static propTypes = {
-    hotKeysData: PropTypes.object.isRequired,
+    hotkeyDefinitions: PropTypes.array.isRequired,
     windowLevelData: PropTypes.object.isRequired,
     generalData: PropTypes.object.isRequired,
   };
@@ -32,7 +32,9 @@ export class UserPreferences extends Component {
     return (
       <form className="form-themed themed">
         <div className="form-content">
-          <HotKeysPreferences hotKeysData={this.props.hotKeysData} />
+          <HotKeysPreferences
+            hotkeyDefinitions={this.props.hotkeyDefinitions}
+          />
         </div>
       </form>
     );
@@ -66,8 +68,8 @@ export class UserPreferences extends Component {
     switch (tabIndex) {
       case 0:
         return this.renderHotkeysTab();
-      case 1:
-        return this.renderWindowLevelTab();
+      /* case 1:
+        return this.renderWindowLevelTab(); */
       case 2:
         return this.renderGeneralTab();
 
@@ -93,14 +95,16 @@ export class UserPreferences extends Component {
             >
               <button>Hotkeys</button>
             </li>
-            <li
-              onClick={() => {
-                this.tabClick(1);
-              }}
-              className={this.getTabClass(1)}
-            >
-              <button>Window Level</button>
-            </li>
+            {false && (
+              <li
+                onClick={() => {
+                  this.tabClick(1);
+                }}
+                className={this.getTabClass(1)}
+              >
+                <button>Window Level</button>
+              </li>
+            )}
             <li
               onClick={() => {
                 this.tabClick(2);

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

@@ -0,0 +1,86 @@
+import './UserPreferencesForm.styl';
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from '../../utils/LanguageProvider';
+
+import cloneDeep from 'lodash.clonedeep';
+import isEqual from 'lodash.isequal';
+import { UserPreferences } from './UserPreferences';
+
+class UserPreferencesForm extends Component {
+  // TODO: Make this component more generic to allow things other than W/L and hotkeys...
+  static propTypes = {
+    onClose: PropTypes.func,
+    onSave: PropTypes.func,
+    onResetToDefaults: PropTypes.func,
+    windowLevelData: PropTypes.object,
+    hotkeyDefinitions: PropTypes.array,
+    t: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      windowLevelData: cloneDeep(props.windowLevelData),
+      hotkeyDefinitions: cloneDeep(props.hotkeyDefinitions),
+    };
+  }
+
+  save = () => {
+    this.props.onSave({
+      windowLevelData: this.state.windowLevelData,
+      hotkeyDefinitions: this.state.hotkeyDefinitions,
+    });
+  };
+
+  componentDidUpdate(prev, next) {
+    const newStateData = {};
+
+    if (!isEqual(prev.windowLevelData, next.windowLevelData)) {
+      newStateData.windowLevelData = prev.windowLevelData;
+    }
+
+    if (!isEqual(prev.hotkeyDefinitions, next.hotkeyDefinitions)) {
+      newStateData.hotkeyDefinitions = prev.hotkeyDefinitions;
+    }
+
+    if (newStateData.hotkeyDefinitions || newStateData.windowLevelData) {
+      this.setState(newStateData);
+    }
+  }
+
+  render() {
+    return (
+      <div className="UserPreferencesForm">
+        <UserPreferences
+          windowLevelData={this.state.windowLevelData}
+          hotkeyDefinitions={this.state.hotkeyDefinitions}
+        />
+        <div className="footer">
+          <button
+            className="btn btn-danger pull-left"
+            onClick={this.props.onResetToDefaults}
+          >
+            {this.props.t('Reset to Defaults')}
+          </button>
+          <div>
+            <div onClick={this.props.onClose} className="btn btn-default">
+              {this.props.t('Cancel')}
+            </div>
+            <button className="btn btn-primary" onClick={this.save}>
+              {this.props.t('Save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const connectedComponent = withTranslation('UserPreferencesForm')(
+  UserPreferencesForm
+);
+export { connectedComponent as UserPreferencesForm };
+export default connectedComponent;

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.styl

@@ -12,6 +12,13 @@
   text-shadow: 0 1px 0 #fff;
   opacity: .2;
 
-.ModalHeader
-  ol, ul
-    margin-top: 0;
+.UserPreferencesForm
+  .footer
+    display: flex
+    flex-direction: row
+    padding-bottom: 20px
+    justify-content: space-between
+
+    div
+      button:last-child
+        margin-left: 10px

platform/ui/src/components/userPreferencesForm/__docs__/about.mdx

@@ -6,7 +6,7 @@ route: /components/about-modal
 
 import { Playground, Props } from 'docz'
 import { State } from 'react-powerplug'
-import { AboutModal } from './../index.js'
+import { AboutContent } from './../index.js'
 
 # About  Modal
 
@@ -26,7 +26,7 @@ import { AboutModal } from './../index.js'
                 >
                     Open about modal
                 </button>
-                <AboutModal
+                <AboutContent
                     {...state}
                     onCancel={() => setState({ isOpen: false })}
                 />
@@ -39,4 +39,4 @@ import { AboutModal } from './../index.js'
 
 ## API
 
-<Props of={AboutModal} />
+<Props of={AboutContent} />

platform/ui/src/components/userPreferencesForm/__docs__/hotkeyDefaults.js

@@ -60,11 +60,6 @@ export default {
     keys: [''],
     column: 1,
   },
-  toggleDownloadDialog: {
-    label: 'Show/Hide Download Dialog',
-    keys: [''],
-    column: 1,
-  },
 
   // Preset hotkeys
   WLPreset0: { label: 'W/L Preset 0  (Soft Tissue)', keys: ['1'], column: 1 },

platform/ui/src/components/userPreferencesForm/__docs__/userPreferences.mdx

@@ -1,18 +1,18 @@
 ---
-name: User Preferences Modal
+name: User Preferences Form
 menu: Components
-route: /components/user-preferences-modal
+route: /components/user-preferences-form
 ---
 
 import { Playground, Props } from 'docz'
 import { State } from 'react-powerplug'
-import { UserPreferencesModal } from './../index.js'
+import { UserPreferencesForm } from './../index.js'
 import NameSpace from '../../../__docs__/NameSpace'
 //
 import windowLevelDefaults from './windowLevelDefaults.js'
 import hotkeyDefaults from './hotkeyDefaults.js'
 
-# User Preferences Modal
+# User Preferences Form
 
 ## Basic usage
 
@@ -20,7 +20,7 @@ import hotkeyDefaults from './hotkeyDefaults.js'
     <State initial={{
         isOpen: false,
         windowLevelData: windowLevelDefaults,
-        hotKeysData: hotkeyDefaults,
+        hotkeyDefinitions: hotkeyDefaults,
     }}>
 
         {({ state, setState }) => (
@@ -32,7 +32,7 @@ import hotkeyDefaults from './hotkeyDefaults.js'
                 >
                     Open user preferences
                 </button>
-                <UserPreferencesModal
+                <UserPreferencesForm
                     {...state}
                     onCancel={() => setState({ isOpen: false })}
                     onSave={() => alert('on save')}
@@ -47,8 +47,8 @@ import hotkeyDefaults from './hotkeyDefaults.js'
 
 ## API
 
-<Props of={UserPreferencesModal} />
+<Props of={UserPreferencesForm} />
 
 ## Translation Namespace
 
-<NameSpace name="UserPreferencesModal" />
+<NameSpace name="UserPreferencesForm" />

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

@@ -4,38 +4,38 @@ const range = (start, end) => {
 
 export const disallowedCombinations = {
   '': [],
-  ALT: ['SPACE'],
-  SHIFT: [],
-  CTRL: [
-    'F4',
-    'F5',
-    'F11',
-    'W',
-    'R',
-    'T',
-    'O',
-    'P',
-    'A',
-    'D',
-    'F',
-    'G',
-    'H',
-    'J',
-    'L',
-    'Z',
-    'X',
-    'C',
-    'V',
-    'B',
-    'N',
-    'PAGEDOWN',
-    'PAGEUP',
+  alt: ['space'],
+  shift: [],
+  ctrl: [
+    'f4',
+    'f5',
+    'f11',
+    'w',
+    'r',
+    't',
+    'o',
+    'p',
+    'a',
+    'd',
+    'f',
+    'g',
+    'h',
+    'j',
+    'l',
+    'z',
+    'x',
+    'c',
+    'v',
+    'b',
+    'n',
+    'pagedown',
+    'pageup',
   ],
-  'CTRL+SHIFT': ['Q', 'W', 'R', 'T', 'P', 'A', 'H', 'V', 'B', 'N'],
+  'ctrl+shift': ['q', 'w', 'r', 't', 'p', 'a', 'h', 'v', 'b', 'n'],
 };
 
 export const allowedKeys = [
-  ...[8, 13, 27, 32, 46], // BACKSPACE, ENTER, ESCAPE, SPACE, DELETE
+  ...[8, 13, 27, 32, 46], // backspace, enter, escape, space, delete
   ...[12, 106, 107, 109, 110, 111], // Numpad keys
   ...range(218, 220), // [\]
   ...range(185, 190), // ;=,-./

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

@@ -0,0 +1,4 @@
+export { UserPreferences } from './UserPreferences.js';
+export { AboutContent } from '../content/aboutContent/AboutContent.js';
+export { UserPreferencesForm } from './UserPreferencesForm.js';
+export { GeneralPreferences } from './GeneralPreferences.js';

platform/ui/src/components/userPreferencesModal/AboutModal.js

@@ -1,143 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap-modal';
-import detect from 'browser-detect';
-import './AboutModal.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
-
-import 'react-bootstrap-modal/lib/css/rbm-patch.css';
-
-// TODO: Is this the only component importing these?
-import './../../design/styles/common/modal.styl';
-
-class AboutModal extends Component {
-  constructor(props) {
-    super(props);
-  }
-  // TODO: Make this component more generic to allow things other than W/L and hotkeys...
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func,
-  };
-
-  itemsPreset() {
-    const { t } = this.props;
-    const browser = detect();
-    const capitalize = s =>
-      s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
-
-    return [
-      {
-        name: t('Repository URL'),
-        value: 'https://github.com/OHIF/Viewers/',
-        link: 'https://github.com/OHIF/Viewers/',
-      },
-      {
-        name: t('Latest Master Commits'),
-        value: 'https://github.com/OHIF/Viewers/commits/master',
-        link: 'https://github.com/OHIF/Viewers/commits/master',
-      },
-      {
-        name: 'Version Number',
-        value: process.env.VERSION_NUMBER,
-      },
-      {
-        name: t('Build Number'),
-        value: process.env.BUILD_NUM,
-      },
-      {
-        name: t('Browser'),
-        value: `${capitalize(browser.name)} ${browser.version}`,
-      },
-      {
-        name: t('OS'),
-        value: browser.os,
-      },
-    ];
-  }
-
-  static defaultProps = {
-    isOpen: false,
-  };
-
-  renderTableRow(item) {
-    return (
-      <tr key={item.name} style={{ backgroundColor: 'transparent' }}>
-        <td>{item.name}</td>
-        <td>
-          {item.link ? (
-            <a target="_blank" href={item.link}>
-              {item.value}
-            </a>
-          ) : (
-            item.value
-          )}
-        </td>
-      </tr>
-    );
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <Modal
-        show={this.props.isOpen}
-        onHide={this.props.onCancel}
-        aria-labelledby="ModalHeader"
-        className="AboutModal modal fade themed in"
-        backdrop={false}
-        large={true}
-        keyboard={false}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{t('OHIF Viewer - About')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body data-cy="about-modal">
-          <div className="btn-group">
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="https://groups.google.com/forum/#!forum/cornerstone-platform"
-            >
-              {t('Visit the forum')}
-            </a>
-            {` `}
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="https://github.com/OHIF/Viewers/issues/new/choose"
-            >
-              {t('Report an issue')}
-            </a>
-            {` `}
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="http://ohif.org"
-            >
-              {t('More details')}
-            </a>
-          </div>
-          <div>
-            <h3>{t('Version Information')}</h3>
-            <table className="table table-responsive">
-              <thead>
-                <tr>
-                  <th>{t('Name')}</th>
-                  <th>{t('Value')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {this.itemsPreset().map(item => this.renderTableRow(item))}
-              </tbody>
-            </table>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-const connectedComponent = withTranslation('AboutModal')(AboutModal);
-export { connectedComponent as AboutModal };
-export default connectedComponent;

platform/ui/src/components/userPreferencesModal/UserPreferencesModal.js

@@ -1,107 +0,0 @@
-import './UserPreferencesModal.styl';
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap-modal';
-import { withTranslation } from '../../utils/LanguageProvider';
-
-import 'react-bootstrap-modal/lib/css/rbm-patch.css';
-import cloneDeep from 'lodash.clonedeep';
-import isEqual from 'lodash.isequal';
-import { UserPreferences } from './UserPreferences';
-
-// TODO: Is this the only component importing these?
-import './../../design/styles/common/modal.styl';
-
-class UserPreferencesModal extends Component {
-  // TODO: Make this component more generic to allow things other than W/L and hotkeys...
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func,
-    onSave: PropTypes.func,
-    onResetToDefaults: PropTypes.func,
-    windowLevelData: PropTypes.object,
-    hotKeysData: PropTypes.object,
-    t: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      windowLevelData: cloneDeep(props.windowLevelData),
-      hotKeysData: cloneDeep(props.hotKeysData),
-    };
-  }
-
-  static defaultProps = {
-    isOpen: false,
-  };
-
-  save = () => {
-    this.props.onSave({
-      windowLevelData: this.state.windowLevelData,
-      hotKeysData: this.state.hotKeysData,
-    });
-  };
-
-  componentDidUpdate(prev, next) {
-    const newStateData = {};
-
-    if (!isEqual(prev.windowLevelData, next.windowLevelData)) {
-      newStateData.windowLevelData = prev.windowLevelData;
-    }
-
-    if (!isEqual(prev.hotKeysData, next.hotKeysData)) {
-      newStateData.hotKeysData = prev.hotKeysData;
-    }
-
-    if (newStateData.hotKeysData || newStateData.windowLevelData) {
-      this.setState(newStateData);
-    }
-  }
-
-  render() {
-    return (
-      <Modal
-        show={this.props.isOpen}
-        onHide={this.props.onCancel}
-        aria-labelledby="ModalHeader"
-        className="ModalHeader modal fade themed in"
-        backdrop={false}
-        large={true}
-        keyboard={false}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{this.props.t('User Preferences')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <UserPreferences
-            windowLevelData={this.state.windowLevelData}
-            hotKeysData={this.state.hotKeysData}
-          />
-        </Modal.Body>
-        <Modal.Footer>
-          <button
-            className="btn btn-danger pull-left"
-            onClick={this.props.onResetToDefaults}
-          >
-            {this.props.t('Reset to Defaults')}
-          </button>
-          <Modal.Dismiss className="btn btn-default">
-            {this.props.t('Cancel')}
-          </Modal.Dismiss>
-          <button className="btn btn-primary" onClick={this.save}>
-            {this.props.t('Save')}
-          </button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-const connectedComponent = withTranslation('UserPreferencesModal')(
-  UserPreferencesModal
-);
-export { connectedComponent as UserPreferencesModal };
-export default connectedComponent;

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

@@ -1,4 +0,0 @@
-export { UserPreferences } from './UserPreferences.js';
-export { AboutModal } from './AboutModal.js';
-export { UserPreferencesModal } from './UserPreferencesModal.js';
-export { GeneralPreferences } from './GeneralPreferences.js';

platform/ui/src/index.js

@@ -1,7 +1,7 @@
 import {
   Checkbox,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -22,9 +22,10 @@ import {
   TablePagination,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
-  UserPreferencesModal,
+  UserPreferencesForm,
+  OHIFModal,
 } from './components';
 import { useDebounce, useMedia } from './hooks';
 
@@ -52,6 +53,11 @@ import SnackbarProvider, {
   useSnackbarContext,
   withSnackbar,
 } from './utils/SnackbarProvider';
+import ModalProvider, {
+  useModal,
+  withModal,
+  ModalConsumer,
+} from './utils/ModalProvider';
 
 export {
   // Elements
@@ -63,7 +69,7 @@ export {
   TextArea,
   TextInput,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   ExpandableToolMenu,
   Icon,
   LayoutButton,
@@ -93,13 +99,18 @@ export {
   ToolbarButton,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
-  UserPreferencesModal,
+  UserPreferencesForm,
   ViewerbaseDragDropContext,
   SnackbarProvider,
   useSnackbarContext,
   withSnackbar,
+  ModalProvider,
+  useModal,
+  ModalConsumer,
+  withModal,
+  OHIFModal,
   // Hooks
   useDebounce,
   useMedia,

platform/ui/src/utils/ModalProvider.js

@@ -0,0 +1,83 @@
+import React, { useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const ModalContext = createContext(null);
+const { Provider, Consumer } = ModalContext;
+
+export const useModal = () => useContext(ModalContext);
+
+const ModalProvider = ({ children, modal: Modal }) => {
+  const DEFAULT_OPTIONS = {
+    component: null /* The component instance inside the modal. */,
+    backdrop: false /* Should the modal render a backdrop overlay. */,
+    keyboard: false /* Modal is dismissible via the esc key. */,
+    show: true /* Make the Modal visible or hidden. */,
+    closeButton: true /* Should the modal body render the close button. */,
+    title: null /* Should the modal render the title independently of the body content. */,
+    customClassName: null /* The custom class to style the modal. */,
+  };
+
+  const [options, setOptions] = useState(DEFAULT_OPTIONS);
+
+  /**
+   * Show the modal and override its configuration props.
+   *
+   * @returns void
+   */
+  const show = (component, props = {}) =>
+    setOptions(Object.assign({}, options, props, { component }));
+
+  /**
+   * Hide the modal and set its properties to default.
+   *
+   * @returns void
+   */
+  const hide = () => setOptions(DEFAULT_OPTIONS);
+
+  return (
+    <Provider value={{ ...options, show, hide }}>
+      <Consumer>
+        {props => {
+          const { component, footer, header, customClassName } = props;
+          return component ? (
+            <Modal
+              className={classNames(customClassName, component.className)}
+              backdrop={options.backdrop}
+              keyboard={options.keyboard}
+              show={options.show}
+              title={options.title}
+              closeButton={options.closeButton}
+              onHide={hide}
+              footer={footer}
+              header={header}
+            >
+              {component}
+            </Modal>
+          ) : null;
+        }}
+      </Consumer>
+      {children}
+    </Provider>
+  );
+};
+
+ModalProvider.propTypes = {
+  children: PropTypes.node,
+  modal: PropTypes.node,
+};
+
+/**
+ * Higher Order Component to use the modal methods through a Class Component.
+ *
+ * @returns
+ */
+export const withModal = Component => {
+  return function WrappedComponent(props) {
+    return <Component {...props} modalContext={{ ...useModal() }} />;
+  };
+};
+
+export default ModalProvider;
+
+export const ModalConsumer = ModalContext.Consumer;

platform/ui/src/utils/SnackbarProvider.js

@@ -1,4 +1,10 @@
-import React, { useState, createContext, useContext } from 'react';
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+} from 'react';
 import SnackbarContainer from '../components/snackbar/SnackbarContainer';
 import SnackbarTypes from '../components/snackbar/SnackbarTypes';
 
@@ -6,7 +12,7 @@ const SnackbarContext = createContext(null);
 
 export const useSnackbarContext = () => useContext(SnackbarContext);
 
-const SnackbarProvider = ({ children }) => {
+const SnackbarProvider = ({ children, service }) => {
   const DEFAULT_OPTIONS = {
     title: '',
     message: '',
@@ -19,7 +25,11 @@ const SnackbarProvider = ({ children }) => {
   const [count, setCount] = useState(1);
   const [snackbarItems, setSnackbarItems] = useState([]);
 
-  const show = options => {
+  useEffect(() => {
+    service.setServiceImplementation({ hide, show });
+  }, [service, hide, show]);
+
+  const show = useCallback(options => {
     if (!options || (!options.title && !options.message)) {
       console.warn(
         'Snackbar cannot be rendered without required parameters: title | message'
@@ -37,9 +47,9 @@ const SnackbarProvider = ({ children }) => {
 
     setSnackbarItems(state => [...state, newItem]);
     setCount(count + 1);
-  };
+  });
 
-  const hide = id => {
+  const hide = useCallback(id => {
     const hideItem = items => {
       const newItems = items.map(item => {
         if (item.id === id) {
@@ -57,7 +67,7 @@ const SnackbarProvider = ({ children }) => {
     setTimeout(() => {
       setSnackbarItems(state => [...state.filter(item => item.id !== id)]);
     }, 1000);
-  };
+  });
 
   const hideAll = () => {
     // reset count

platform/viewer/CHANGELOG.md

@@ -3,6 +3,136 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.7.1...@ohif/viewer@2.8.0) (2019-11-13)
+
+
+### Features
+
+* expose UiNotifications service ([#1172](https://github.com/OHIF/Viewers/issues/1172)) ([5c04e34](https://github.com/OHIF/Viewers/commit/5c04e34c8fb2394ab7acd9eb4f2ab12afeb2f255))
+* filter field for google api windows ([#1170](https://github.com/OHIF/Viewers/issues/1170)) ([c59c5b3](https://github.com/OHIF/Viewers/commit/c59c5b3f14d44f1c06aa396125a1f4caaa431c25))
+
+
+
+
+
+## [2.7.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.7.0...@ohif/viewer@2.7.1) (2019-11-12)
+
+
+### Bug Fixes
+
+* 🐛 Fix for JS breaking on header ([#1164](https://github.com/OHIF/Viewers/issues/1164)) ([0fbaf95](https://github.com/OHIF/Viewers/commit/0fbaf95971dc0b3a671e1f586a876d9019e860ed))
+
+
+
+
+
+# [2.7.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.6.4...@ohif/viewer@2.7.0) (2019-11-12)
+
+
+### Features
+
+* 🎸 Update hotkeys and user preferences modal ([#1135](https://github.com/OHIF/Viewers/issues/1135)) ([e62f5f8](https://github.com/OHIF/Viewers/commit/e62f5f8dd28ab363f23671cd21cee115abb870ff)), closes [#923](https://github.com/OHIF/Viewers/issues/923)
+
+
+
+
+
+## [2.6.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.6.3...@ohif/viewer@2.6.4) (2019-11-11)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.6.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.6.2...@ohif/viewer@2.6.3) (2019-11-08)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.6.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.6.1...@ohif/viewer@2.6.2) (2019-11-08)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.6.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.6.0...@ohif/viewer@2.6.1) (2019-11-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [2.6.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.5.0...@ohif/viewer@2.6.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
+
+# [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.1...@ohif/viewer@2.5.0) (2019-11-05)
+
+
+### Features
+
+* 🎸 Filter by url query param for seriesInstnaceUID ([#1117](https://github.com/OHIF/Viewers/issues/1117)) ([e208f2e](https://github.com/OHIF/Viewers/commit/e208f2e6a9c49b16dadead0a917f657cf023929a)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.0...@ohif/viewer@2.4.1) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+# [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.8...@ohif/viewer@2.4.0) (2019-11-04)
+
+
+### Features
+
+* 🎸 New modal provider ([#1110](https://github.com/OHIF/Viewers/issues/1110)) ([5ee832b](https://github.com/OHIF/Viewers/commit/5ee832b19505a4e8e5756660ce6ed03a7f18dec3)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116)
+
+
+
+
+
+## [2.3.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.7...@ohif/viewer@2.3.8) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.3.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.6...@ohif/viewer@2.3.7) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Minor issues measurement panel related to description ([#1142](https://github.com/OHIF/Viewers/issues/1142)) ([681384b](https://github.com/OHIF/Viewers/commit/681384b7425c83b02a0ed83371ca92d78ca7838c))
+
+
+
+
+
 ## [2.3.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.5...@ohif/viewer@2.3.6) (2019-11-02)
 
 **Note:** Version bump only for package @ohif/viewer

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

@@ -0,0 +1,201 @@
+//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() {
+  context('Desktop resolution', function() {
+    beforeEach(function() {
+      cy.viewport(1750, 720);
+      cy.openStudyList();
+      cy.initStudyListAliasesOnDesktop();
+    });
+
+    it('searches Patient Name with exact string', function() {
+      cy.get('@patientName').type('Juno');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('Juno');
+      });
+    });
+
+    it('searches MRN with exact string', function() {
+      cy.get('@MRN').type('ProstateX-0000');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('ProstateX-0000');
+      });
+    });
+
+    it('searches Accession with exact string', function() {
+      cy.get('@accessionNumber').type('fpcben98890');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('fpcben98890');
+      });
+    });
+
+    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).to.contain('MR');
+      });
+    });
+
+    it('searches Description with exact string', function() {
+      cy.get('@studyDescription').type('CHEST');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('CHEST');
+      });
+    });
+
+    it('changes rows per page and checks the study count', function() {
+      //Show rows per page options
+      const pageRows = [25, 50, 100];
+
+      //Check all options of rows
+      pageRows.forEach(numRows => {
+        cy.get('select').select(numRows.toString()); //Select rows per page option
+        //Wait result list to be displayed
+        cy.waitStudyList().then(() => {
+          //Compare the search result with the Study Count on the table header
+          cy.get('@studyCount')
+            .should($studyCount => {
+              expect(parseInt($studyCount.text())).to.be.at.most(numRows); //less than or equals to
+            })
+            .then($studyCount => {
+              //Compare to the number of rows in the search result
+              cy.get('@searchResult').then($searchResult => {
+                let countResults = $searchResult.length;
+                expect($studyCount.text()).to.be.eq(countResults.toString());
+              });
+            });
+        });
+      });
+    });
+
+    //TO-TO: This test should be uncommented once issue #1120 is fixed:
+    //https://github.com/OHIF/Viewers/issues/1120
+    // it('filter study list by Study Date', function() {
+    //   //Type Start and End dates
+    //   cy.get('@studyListStartDate').type('01/01/2000');
+    //   cy.get('@studyListEndDate').type('01/01/2019');
+    //   //Display all results into one page
+    //   cy.get('select').select('100');
+    //   //Checks if all expected results are displayed
+    //   //Wait result list to be displayed
+    //   cy.waitStudyList();
+    //   cy.get('@searchResult').should($list => {
+    //     expect($list.length).to.be.eq(42);
+    //   });
+    // });
+  });
+
+  context('Tablet resolution', function() {
+    beforeEach(function() {
+      cy.viewport(1000, 660);
+      cy.openStudyList();
+      cy.initStudyListAliasesOnTablet();
+    });
+
+    it('searches Patient Name with exact string', function() {
+      cy.get('@patientNameOrMRN').type('Juno');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('Juno');
+      });
+    });
+
+    it('searches MRN with with exact string', function() {
+      cy.get('@patientNameOrMRN').type('ProstateX-0000');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('ProstateX-0000');
+      });
+    });
+
+    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).to.contain('MR');
+      });
+    });
+
+    it('searches Accession with exact string', function() {
+      cy.get('@accessionModalityDescription').type('fpcben98890');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('fpcben98890');
+      });
+    });
+
+    it('searches Description with exact string', function() {
+      cy.get('@accessionModalityDescription').type('CHEST');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('CHEST');
+      });
+    });
+
+    it('changes rows per page and checks the study count', function() {
+      //Show rows per page options
+      const pageRows = [25, 50, 100];
+
+      //Check all options of rows
+      pageRows.forEach(numRows => {
+        cy.get('select').select(numRows.toString()); //Select rows per page option
+        //Wait result list to be displayed
+        cy.waitStudyList().then(() => {
+          //Compare the search result with the Study Count on the table header
+          cy.get('@studyCount')
+            .should($studyCount => {
+              expect(parseInt($studyCount.text())).to.be.at.most(numRows); //less than or equals to
+            })
+            .then($studyCount => {
+              //Compare to the number of rows in the search result
+              cy.get('@searchResult').then($searchResult => {
+                let countResults = $searchResult.length;
+                expect($studyCount.text()).to.be.eq(countResults.toString());
+              });
+            });
+        });
+      });
+    });
+
+    //TO-TO: This test should be uncommented once issue #1120 is fixed:
+    //https://github.com/OHIF/Viewers/issues/1120
+    // it('filter study list by Study Date', function() {
+    //   //Type Start and End dates
+    //   cy.get('@studyListStartDate').type('01/01/2000');
+    //   cy.get('@studyListEndDate').type('01/01/2019');
+    //   //Display all results into one page
+    //   cy.get('select').select('100');
+    //   //Checks if all expected results are displayed
+    //   //Wait result list to be displayed
+    //   cy.waitStudyList();
+    //   cy.get('@searchResult').should($list => {
+    //     expect($list.length).to.be.eq(42);
+    //   });
+    // });
+  });
+});

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

@@ -72,30 +72,26 @@ describe('OHIF Study Viewer Page', function() {
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
-  //TO-DO: Test case will fail due to issue #1013: https://github.com/OHIF/Viewers/issues/1013
+  it('checks if Description can be added to measurement item under Measurements panel', () => {
+    cy.addLengthMeasurement(); //Adding measurement in the viewport
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementItem').click();
 
-  // it('checks if Description can be added to measurement item under Measurements panel', () => {
-  //   cy.addLengthMeasurement(); //Adding measurement in the viewport
-  //   cy.get('@measurementsBtn').click();
-  //   cy.get('.measurementItem').click();
-  //
-  //   // Click "Description"
-  //   cy.get('.btnAction')
-  //     .contains('Description')
-  //     .click();
-  //
-  //   // Enter description text
-  //   const descriptionText = 'Adding text for description test';
-  //   cy.get('#description')
-  //     .type(descriptionText);
-  //
-  //   // Confirm
-  //   cy.get('.btn-confirm').click();
-  //
-  //   //Verify if descriptionText was added
-  //   cy.get('.measurementLocation')
-  //     .should('contain.text', descriptionText);
-  // });
+    // Click "Description"
+    cy.get('.btnAction')
+      .contains('Description')
+      .click();
+
+    // Enter description text
+    const descriptionText = 'Adding text for description test';
+    cy.get('#description').type(descriptionText);
+
+    // Confirm
+    cy.get('.btn-confirm').click();
+
+    //Verify if descriptionText was added
+    cy.get('.measurementLocation').should('contain.text', descriptionText);
+  });
 
   it('checks if measurement item can be deleted through the context menu on the viewport', function() {
     cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport
@@ -228,14 +224,12 @@ describe('OHIF Study Viewer Page', function() {
     cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
   });
 
-  //TO-DO: this test is blocked due to issue #1072: https://github.com/OHIF/Viewers/issues/1072
-  // Uncomment this once #1072 is fixed.
-  // it('performs single-click to load thumbnail in active viewport', () => {
-  //   cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click();
+  it('performs single-click to load thumbnail in active viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click();
 
-  //   const expectedText = 'Ser 3';
-  //   cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
-  // });
+    const expectedText = 'Ser: 3';
+    cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
+  });
 
   it('performs right click to zoom', function() {
     //Right click on viewport
@@ -244,7 +238,7 @@ describe('OHIF Study Viewer Page', function() {
       .trigger('mousemove', 'center', { which: 3 })
       .trigger('mouseup');
 
-    const expectedText = 'Zoom: 442%';
+    const expectedText = 'Zoom: 301%';
     cy.get('@viewportInfoBottomRight').should('contains.text', expectedText);
   });
 
@@ -273,8 +267,12 @@ describe('OHIF Study Viewer Page', function() {
   });
 
   it('opens About modal and verify the displayed information', function() {
-    cy.get('[data-cy="options-menu"]').click();
-    cy.get('[data-cy="about-item-menu"]').click();
+    cy.get('[data-cy="options-menu"]')
+      .first()
+      .click();
+    cy.get('[data-cy="about-item-menu"]')
+      .first()
+      .click();
     cy.get('.modal-content')
       .as('aboutOverlay')
       .should('be.visible');

platform/viewer/cypress/support/aliases.js

@@ -52,3 +52,28 @@ export function initVTKToolsAliases() {
   cy.get('.ohif-check-label').as('modeCheckbox');
   cy.get('.btn-group > .toolbar-button').as('layoutBtn');
 }
+
+//Creating aliases for Study List page elements on Desktop experience
+export function initStudyListAliasesOnDesktop() {
+  cy.get('.study-count').as('studyCount');
+  cy.get('#filter-patientName').as('patientName');
+  cy.get('#filter-patientId').as('MRN');
+  cy.get('#filter-accessionNumber').as('accessionNumber');
+  cy.get('#start-date').as('studyListStartDate');
+  cy.get('#end-date').as('studyListEndDate');
+  cy.get('#filter-modalities').as('modalities');
+  cy.get('#filter-studyDescription').as('studyDescription');
+  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
+}
+
+//Creating aliases for Study List page elements on Tablet experience
+export function initStudyListAliasesOnTablet() {
+  cy.get('.study-count').as('studyCount');
+  cy.get('#filter-patientNameOrId').as('patientNameOrMRN');
+  cy.get('#filter-accessionOrModalityOrDescription').as(
+    'accessionModalityDescription'
+  );
+  cy.get('#start-date').as('studyListStartDate');
+  cy.get('#end-date').as('studyListEndDate');
+  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
+}

platform/viewer/cypress/support/commands.js

@@ -5,6 +5,8 @@ import {
   initCommonElementsAliases,
   initRouteAliases,
   initVTKToolsAliases,
+  initStudyListAliasesOnDesktop,
+  initStudyListAliasesOnTablet,
 } from './aliases.js';
 
 // ***********************************************
@@ -76,12 +78,18 @@ Cypress.Commands.add('isPageLoaded', (url = '/viewer/') => {
   return cy.location('pathname', { timeout: 60000 }).should('include', url);
 });
 
-Cypress.Commands.add('openStudyList', patientName => {
+Cypress.Commands.add('openStudyList', () => {
   cy.initRouteAliases();
   cy.visit('/');
   cy.wait('@getStudies');
 });
 
+Cypress.Commands.add('waitStudyList', () => {
+  cy.get('@searchResult').should($list => {
+    expect($list).to.not.have.class('no-hover');
+  });
+});
+
 /**
  * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first.
  * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)
@@ -240,6 +248,16 @@ Cypress.Commands.add('initVTKToolsAliases', () => {
   initVTKToolsAliases();
 });
 
+//Initialize aliases for Study List page elements
+Cypress.Commands.add('initStudyListAliasesOnDesktop', () => {
+  initStudyListAliasesOnDesktop();
+});
+
+//Initialize aliases for Study List page elements
+Cypress.Commands.add('initStudyListAliasesOnTablet', () => {
+  initStudyListAliasesOnTablet();
+});
+
 //Add measurements in the viewport
 Cypress.Commands.add(
   'addLengthMeasurement',

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.3.6",
+  "version": "2.8.0",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.6.1",
+    "@ohif/core": "^1.9.0",
     "@ohif/extension-cornerstone": "^2.0.0",
     "@ohif/extension-dicom-html": "^1.0.1",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.52.27",
-    "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.58.4",
+    "@ohif/extension-vtk": "^0.53.5",
+    "@ohif/i18n": "^0.52.0",
+    "@ohif/ui": "^0.62.0",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/src/App.js

@@ -6,7 +6,9 @@ import './config';
 import {
   CommandsManager,
   ExtensionManager,
+  ServicesManager,
   HotkeysManager,
+  createUiNotificationService,
   utils,
 } from '@ohif/core';
 import React, { Component } from 'react';
@@ -28,7 +30,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { getActiveContexts } from './store/layout/selectors.js';
 import i18n from '@ohif/i18n';
 import store from './store';
-import { SnackbarProvider } from '@ohif/ui';
+import { SnackbarProvider, ModalProvider, OHIFModal } from '@ohif/ui';
 
 // Contexts
 import WhiteLabellingContext from './context/WhiteLabellingContext';
@@ -41,9 +43,16 @@ const commandsManagerConfig = {
   getActiveContexts: () => getActiveContexts(store.getState()),
 };
 
+// Services
+const UINotificationService = createUiNotificationService();
+
 const commandsManager = new CommandsManager(commandsManagerConfig);
 const hotkeysManager = new HotkeysManager(commandsManager);
-const extensionManager = new ExtensionManager({ commandsManager });
+const servicesManager = new ServicesManager();
+const extensionManager = new ExtensionManager({
+  commandsManager,
+  servicesManager,
+});
 // ~~~~ END APP SETUP
 
 // TODO[react] Use a provider when the whole tree is React
@@ -76,15 +85,18 @@ class App extends Component {
     super(props);
 
     this._appConfig = props;
+
     const { servers, extensions, hotkeys, oidc } = props;
 
     this.initUserManager(oidc);
+    _initServices([UINotificationService]);
     _initExtensions(extensions, hotkeys);
     _initServers(servers);
     initWebWorkers();
   }
 
   render() {
+    const { whiteLabelling, routerBasename } = this.props;
     const userManager = this._userManager;
     const config = {
       appConfig: this._appConfig,
@@ -97,12 +109,12 @@ class App extends Component {
             <I18nextProvider i18n={i18n}>
               <OidcProvider store={store} userManager={userManager}>
                 <UserManagerContext.Provider value={userManager}>
-                  <Router basename={this.props.routerBasename}>
-                    <WhiteLabellingContext.Provider
-                      value={this.props.whiteLabelling}
-                    >
-                      <SnackbarProvider>
-                        <OHIFStandaloneViewer userManager={userManager} />
+                  <Router basename={routerBasename}>
+                    <WhiteLabellingContext.Provider value={whiteLabelling}>
+                      <SnackbarProvider service={UINotificationService}>
+                        <ModalProvider modal={OHIFModal}>
+                          <OHIFStandaloneViewer userManager={userManager} />
+                        </ModalProvider>
                       </SnackbarProvider>
                     </WhiteLabellingContext.Provider>
                   </Router>
@@ -118,10 +130,12 @@ class App extends Component {
       <AppContext.Provider value={config}>
         <Provider store={store}>
           <I18nextProvider i18n={i18n}>
-            <Router basename={this.props.routerBasename}>
-              <WhiteLabellingContext.Provider value={this.props.whiteLabelling}>
-                <SnackbarProvider>
-                  <OHIFStandaloneViewer />
+            <Router basename={routerBasename}>
+              <WhiteLabellingContext.Provider value={whiteLabelling}>
+                <SnackbarProvider service={UINotificationService}>
+                  <ModalProvider modal={OHIFModal}>
+                    <OHIFStandaloneViewer />
+                  </ModalProvider>
                 </SnackbarProvider>
               </WhiteLabellingContext.Provider>
             </Router>
@@ -165,6 +179,10 @@ class App extends Component {
   }
 }
 
+function _initServices(services) {
+  services.forEach(service => servicesManager.register(service));
+}
+
 /**
  * @param
  */
@@ -211,4 +229,4 @@ function _makeAbsoluteIfNecessary(url, base_url) {
 const ExportedApp = process.env.NODE_ENV === 'development' ? hot(App) : App;
 
 export default ExportedApp;
-export { commandsManager, extensionManager, hotkeysManager };
+export { commandsManager, extensionManager, hotkeysManager, servicesManager };

platform/viewer/src/appExtensions/MeasurementsPanel/ConnectedMeasurementTable.js

@@ -31,7 +31,7 @@ function getAllTools() {
 function getMeasurementText(measurementData = {}) {
   const defaultText = '...';
   const { location = '', description = '' } = measurementData;
-  const result = location + (description ? `(${description})` : '');
+  const result = location + (description ? ` (${description})` : '');
 
   return result || defaultText;
 }

platform/viewer/src/appExtensions/MeasurementsPanel/index.js

@@ -7,8 +7,8 @@ export default {
    */
   id: 'measurements-table',
 
-  preRegistration(configuration = {}) {
-    init(configuration);
+  preRegistration({ serviceManager, configuration = {} }) {
+    init({ serviceManager, configuration });
   },
   getPanelModule() {
     return {

platform/viewer/src/appExtensions/MeasurementsPanel/init.js

@@ -34,7 +34,7 @@ const MEASUREMENT_ACTION_MAP = {
  * @export
  * @param {*} configuration
  */
-export default function init(configuration) {
+export default function init({ serviceManager, configuration = {} }) {
   // If these tools were already added by a different extension, we want to replace
   // them with the same tools that have an alternative configuration. By passing in
   // our custom `getMeasurementLocationCallback`, we can...

platform/viewer/src/appExtensions/MeasurementsPanel/labelingFlowCallbacks.js

@@ -105,9 +105,9 @@ function getToolLabellingFlowCallback(store) {
       if (location) {
         measurementData.location = location;
       }
-      if (description) {
-        measurementData.description = description;
-      }
+
+      measurementData.description = description || '';
+
       if (response) {
         measurementData.response = response;
       }

platform/viewer/src/components/Header/Header.css

@@ -4,6 +4,10 @@
   height: var(--top-bar-height);
 }
 
+.dd-item {
+  width: 100%;
+}
+
 /* Home Page */
 .entry-header.header-big {
   background: rgba(21, 25, 30, 0.7);

platform/viewer/src/components/Header/Header.js

@@ -1,14 +1,12 @@
-import './Header.css';
-
-import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';
-
-import { Dropdown } from '@ohif/ui';
-import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import PropTypes from 'prop-types';
-import { AboutModal } from '@ohif/ui';
-import { hotkeysManager } from './../../App.js';
+import { Link, withRouter } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+
+import ConnectedUserPreferencesForm from '../../connectedComponents/ConnectedUserPreferencesForm';
+import { Dropdown, AboutContent, withModal } from '@ohif/ui';
+import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
+import './Header.css';
 
 // Context
 import AppContext from './../../context/AppContext';
@@ -21,6 +19,8 @@ class Header extends Component {
     children: PropTypes.node,
     t: PropTypes.func.isRequired,
     userManager: PropTypes.object,
+    user: PropTypes.object,
+    modalContext: PropTypes.object,
   };
 
   static defaultProps = {
@@ -28,89 +28,79 @@ class Header extends Component {
     children: OHIFLogo(),
   };
 
-  // onSave: data => {
-  //   const contextName = store.getState().commandContext.context;
-  //   const preferences = cloneDeep(store.getState().preferences);
-  //   preferences[contextName] = data;
-  //   dispatch(setUserPreferences(preferences));
-  //   dispatch(setUserPreferencesModalOpen(false));
-  //   OHIF.hotkeysUtil.setHotkeys(data.hotKeysData);
-  // },
-  // onResetToDefaults: () => {
-  //   dispatch(setUserPreferences());
-  //   dispatch(setUserPreferencesModalOpen(false));
-  //   OHIF.hotkeysUtil.setHotkeys();
-  // },
-
   constructor(props) {
     super(props);
-    this.state = { isUserPreferencesOpen: false, isOpen: false };
+    this.state = { isOpen: false };
 
     this.loadOptions();
   }
 
   loadOptions() {
-    const { t } = this.props;
+    const {
+      t,
+      user,
+      userManager,
+      modalContext: { show },
+    } = this.props;
     this.options = [
       {
         title: t('About'),
         icon: { name: 'info' },
-        onClick: () => {
-          this.setState({
-            isOpen: true,
-          });
+        onClick: () =>
+          show(AboutContent, {
+            title: t('OHIF Viewer - About'),
+            customClassName: 'AboutContent',
+          }),
+      },
+      {
+        title: 'Preferences ',
+        icon: {
+          name: 'user',
         },
+        onClick: () =>
+          show(ConnectedUserPreferencesForm, {
+            title: t('User Preferences'),
+          }),
       },
     ];
 
-    if (this.props.user && this.props.userManager) {
+    if (user && userManager) {
       this.options.push({
         title: t('Logout'),
         icon: { name: 'power-off' },
-        onClick: () => {
-          this.props.userManager.signoutRedirect();
-        },
+        onClick: () => userManager.signoutRedirect(),
       });
     }
-
-    this.hotKeysData = hotkeysManager.hotkeyDefinitions;
-  }
-
-  onUserPreferencesSave({ windowLevelData, hotKeysData }) {
-    // console.log(windowLevelData);
-    // console.log(hotKeysData);
-    // TODO: Update hotkeysManager
-    // TODO: reset `this.hotKeysData`
   }
 
   // ANTD -- Hamburger, Drawer, Menu
   render() {
-    const { t } = this.props;
+    const { t, home, location, children } = this.props;
     const { appConfig = {} } = this.context;
     const showStudyList =
       appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
     return (
       <>
         <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-        <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
+        <div className={`entry-header ${home ? 'header-big' : ''}`}>
           <div className="header-left-box">
-            {this.props.location && this.props.location.studyLink && (
+            {location && location.studyLink && (
               <Link
-                to={this.props.location.studyLink}
+                to={location.studyLink}
                 className="header-btn header-viewerLink"
               >
                 {t('Back to Viewer')}
               </Link>
             )}
 
-            {this.props.children}
+            {children}
 
-            {showStudyList && !this.props.home && (
+            {showStudyList && !home && (
               <Link
                 className="header-btn header-studyListLinkSection"
                 to={{
                   pathname: '/',
-                  state: { studyLink: this.props.location.pathname },
+                  state: { studyLink: location.pathname },
                 }}
               >
                 {t('Study list')}
@@ -123,16 +113,6 @@ class Header extends Component {
               {t('INVESTIGATIONAL USE ONLY')}
             </span>
             <Dropdown title={t('Options')} list={this.options} align="right" />
-
-            {/* TODO: We need a Modal service */}
-            <AboutModal
-              {...this.state}
-              onCancel={() =>
-                this.setState({
-                  isOpen: false,
-                })
-              }
-            />
           </div>
         </div>
       </>
@@ -140,4 +120,6 @@ class Header extends Component {
   }
 }
 
-export default withTranslation('Header')(withRouter(Header));
+export default withTranslation(['Header', 'AboutModal'])(
+  withRouter(withModal(Header))
+);

platform/viewer/src/components/Labelling/LabellingFlow.js

@@ -152,6 +152,7 @@ export default class LabellingFlow extends Component {
                   ref={this.descriptionInput}
                   defaultValue={description || ''}
                   autoComplete="off"
+                  onKeyPress={this.handleKeyPress}
                 />
               </div>
             </div>
@@ -223,6 +224,12 @@ export default class LabellingFlow extends Component {
     });
   };
 
+  handleKeyPress = e => {
+    if (e.key === 'Enter') {
+      this.descriptionSave();
+    }
+  };
+
   descriptionSave = () => {
     const description = this.descriptionInput.current.value;
     this.props.updateLabelling({ description });

platform/viewer/src/connectedComponents/ConnectedHeader.js

@@ -1,10 +1,19 @@
 import Header from '../components/Header/Header.js';
 import { connect } from 'react-redux';
+import { hotkeysManager } from '../App.js';
 
 const mapStateToProps = state => {
+  const { hotkeyDefinitions = [] } = state.preferences || {};
+
+  const _hotkeyDefinitions =
+    hotkeyDefinitions.length > 0
+      ? hotkeyDefinitions
+      : hotkeysManager.hotkeyDefaults;
+
+  hotkeysManager.setHotkeys(_hotkeyDefinitions);
+
   return {
     user: state.oidc && state.oidc.user,
-    isOpen: state.ui.userPreferencesModalOpen,
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedUserPreferencesForm.js

@@ -0,0 +1,41 @@
+import { connect } from 'react-redux';
+import { UserPreferencesForm } from '@ohif/ui';
+import OHIF from '@ohif/core';
+import { hotkeysManager } from '../App.js';
+
+const { setUserPreferences } = OHIF.redux.actions;
+
+const mapStateToProps = (state, ownProps) => {
+  const hotkeyDefinitions =
+    state.preferences.hotkeyDefinitions.length > 0
+      ? state.preferences.hotkeyDefinitions
+      : hotkeysManager.hotkeyDefaults;
+  hotkeysManager.setHotkeys(hotkeyDefinitions);
+  return {
+    onClose: ownProps.hide,
+    windowLevelData: state.preferences ? state.preferences.windowLevelData : {},
+    hotkeyDefinitions,
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    onSave: ({ windowLevelData, hotkeyDefinitions }) => {
+      hotkeysManager.setHotkeys(hotkeyDefinitions);
+      ownProps.hide();
+      dispatch(setUserPreferences({ windowLevelData, hotkeyDefinitions }));
+    },
+    onResetToDefaults: () => {
+      hotkeysManager.restoreDefaultBindings();
+      ownProps.hide();
+      dispatch(setUserPreferences());
+    },
+  };
+};
+
+const ConnectedUserPreferencesForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UserPreferencesForm);
+
+export default ConnectedUserPreferencesForm;

platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { DownloadDialog } from '@ohif/ui';
+import { ViewportDownloadForm } from '@ohif/ui';
 import { utils } from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
@@ -14,11 +14,11 @@ const mapStateToProps = (state, ownProps) => {
     viewportSpecificData[activeViewportIndex] || {};
 
   return {
+    onClose: ownProps.hide,
     minimumSize: MINIMUM_SIZE,
     maximumSize: MAX_TEXTURE_SIZE,
     defaultSize: DEFAULT_SIZE,
     canvasClass: 'cornerstone-canvas',
-    onClose: ownProps.toggleDownloadDialog,
     activeViewport: activeEnabledElement,
     enableViewport: viewportElement => {
       if (viewportElement) {
@@ -122,9 +122,9 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
-const ConnectedDownloadDialog = connect(
+const ConnectedViewportDownloadForm = connect(
   mapStateToProps,
   null
-)(DownloadDialog);
+)(ViewportDownloadForm);
 
-export default ConnectedDownloadDialog;
+export default ConnectedViewportDownloadForm;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -6,17 +6,17 @@ import {
   ExpandableToolMenu,
   RoundedButtonGroup,
   ToolbarButton,
+  withModal,
 } from '@ohif/ui';
 
 import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
-import ConnectedDownloadDialog from './ConnectedDownloadDialog';
+import ConnectedViewportDownloadForm from './ConnectedViewportDownloadForm';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 
-
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
   // closed if selected is null/undefined
@@ -46,13 +46,10 @@ class ToolbarRow extends Component {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
       isCineDialogOpen: false,
-      isDownloadScreenShotDialogOpen: false,
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
-    this.toggleDownloadDialog = toggleDownloadDialog.bind(this);
-
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
     this.buttonGroups = {
       left: [
@@ -116,13 +113,6 @@ class ToolbarRow extends Component {
       zIndex: 999,
     };
 
-    const downloadScreenShotContainerStyle = {
-      display: this.state.isDownloadScreenShotDialogOpen ? 'block' : 'none',
-      position: 'absolute',
-      top: '82px',
-      zIndex: 1001,
-    };
-
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
@@ -158,12 +148,6 @@ class ToolbarRow extends Component {
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />
         </div>
-        <div className="DownloadScreenShotContainer" style={downloadScreenShotContainerStyle}>
-          <ConnectedDownloadDialog
-            isOpen={this.state.isDownloadScreenShotDialogOpen}
-            toggleDownloadDialog={this.toggleDownloadDialog}
-          />
-        </div>
       </>
     );
   }
@@ -295,15 +279,6 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
-/**
- * Toggles the Download Dialog Modal
- */
-function toggleDownloadDialog() {
-  this.setState({
-    isDownloadScreenShotDialogOpen: !this.state.isDownloadScreenShotDialogOpen,
-  });
-}
-
 function _handleBuiltIn({ behavior } = {}) {
   if (behavior === 'CINE') {
     this.setState({
@@ -312,8 +287,13 @@ function _handleBuiltIn({ behavior } = {}) {
   }
 
   if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    this.toggleDownloadDialog();
+    this.props.modalContext.show(ConnectedViewportDownloadForm, {
+      title: this.props.t('Download High Quality Image'),
+      customClassName: 'ViewportDownloadForm',
+    });
   }
 }
 
-export default withTranslation('Common')(ToolbarRow);
+export default withTranslation(['Common', 'ViewportDownloadForm'])(
+  withModal(ToolbarRow)
+);

platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js

@@ -4,9 +4,10 @@ import { metadata, studies, utils, log } from '@ohif/core';
 import ConnectedViewer from './ConnectedViewer.js';
 import PropTypes from 'prop-types';
 import { extensionManager } from './../App.js';
+import { withSnackbar } from '@ohif/ui';
 
 const { OHIFStudyMetadata, OHIFSeriesMetadata } = metadata;
-const { retrieveStudiesMetadata } = studies;
+const { retrieveStudiesMetadata, deleteStudyMetadataPromise } = studies;
 const { studyMetadataManager, updateMetaDataManager } = utils;
 
 class ViewerRetrieveStudyData extends Component {
@@ -18,6 +19,8 @@ class ViewerRetrieveStudyData extends Component {
 
   constructor(props) {
     super(props);
+    this.abortSeriesLoad = false;
+    this.seriesLoadStats = Object.create(null);
     this.state = {
       studies: null,
       error: null,
@@ -27,11 +30,21 @@ class ViewerRetrieveStudyData extends Component {
   async loadStudies() {
     try {
       const { server, studyInstanceUids, seriesInstanceUids } = this.props;
+      const filters = {};
+
+      // Use the first, discard others
+      const seriesInstanceUID = seriesInstanceUids && seriesInstanceUids[0];
+
+      if (seriesInstanceUID) {
+        filters.seriesInstanceUID = seriesInstanceUID;
+      }
+
       const studies = await retrieveStudiesMetadata(
         server,
         studyInstanceUids,
-        seriesInstanceUids
+        filters
       );
+      this.validateFilters(studies, filters);
       this.setStudies(studies);
     } catch (e) {
       this.setState({ error: true });
@@ -39,6 +52,32 @@ class ViewerRetrieveStudyData extends Component {
     }
   }
 
+  /**
+   * Validate filters and promp user a message in case filter is unsuccessfully applied.
+   * In case of success, studies array contains, as the first element, the queried content (from filter)
+   * @param {Array} studies array of studies to be evaluated
+   * @param {Object} filters filters to test against
+   */
+  validateFilters(studies = [], filters = {}) {
+    const { seriesInstanceUID } = filters;
+
+    const { snackbarContext } = this.props;
+    // skip in case no filter or no toast manager
+    if (!seriesInstanceUID || !snackbarContext) {
+      return;
+    }
+
+    const firstStudy = studies[0] || {};
+    const { seriesList = [] } = firstStudy;
+    const firstSeries = seriesList[0];
+
+    if (!firstSeries || firstSeries.seriesInstanceUid !== seriesInstanceUID) {
+      snackbarContext.show({
+        message: 'No series for given filter: ' + seriesInstanceUID,
+      });
+    }
+  }
+
   setStudies(givenStudies) {
     if (Array.isArray(givenStudies) && givenStudies.length > 0) {
       const sopClassHandlerModules =
@@ -83,18 +122,49 @@ class ViewerRetrieveStudyData extends Component {
     });
   }
 
+  _handleSeriesLoadResult(error, studyMetadata, series) {
+    if (this.abortSeriesLoad) return;
+    const stats = this.seriesLoadStats[studyMetadata.getStudyInstanceUID()];
+    if (!stats) return;
+    stats.count--;
+    if (error || !series) {
+      stats.errors++;
+      log.error(error || 'Bad Series');
+      return;
+    }
+    this._addSeriesToStudy(studyMetadata, series);
+  }
+
   _attemptToLoadRemainingSeries(studyMetadata) {
     const { seriesLoader } = studyMetadata.getData();
     if (!seriesLoader) {
       return;
     }
+    const stats = (this.seriesLoadStats[studyMetadata.getStudyInstanceUID()] = {
+      errors: 0,
+      count: 0,
+    });
     while (seriesLoader.hasNext()) {
       seriesLoader
         .next()
         .then(
-          series => void this._addSeriesToStudy(studyMetadata, series),
-          error => void log.error(error)
+          series =>
+            void this._handleSeriesLoadResult(null, studyMetadata, series),
+          error => void this._handleSeriesLoadResult({ error }, null, null)
         );
+      stats.count++;
+    }
+  }
+
+  componentWillUnmount() {
+    this.abortSeriesLoad = true;
+    for (const studyInstanceUid in this.seriesLoadStats) {
+      const stats = this.seriesLoadStats[studyInstanceUid];
+      if (stats && (stats.count > 0 || stats.errors > 0)) {
+        deleteStudyMetadataPromise(studyInstanceUid);
+        studyMetadataManager.remove(studyInstanceUid);
+        log.info(`Purging incomplete study data: ${studyInstanceUid}`);
+      }
     }
   }
 
@@ -118,4 +188,4 @@ class ViewerRetrieveStudyData extends Component {
   }
 }
 
-export default ViewerRetrieveStudyData;
+export default withSnackbar(ViewerRetrieveStudyData);

platform/viewer/src/googleCloud/DatasetPicker.js

@@ -9,6 +9,7 @@ export default class DatasetPicker extends Component {
     error: null,
     loading: true,
     datasets: [],
+    filterStr: ""
   };
 
   static propTypes = {
@@ -41,15 +42,23 @@ export default class DatasetPicker extends Component {
   }
 
   render() {
-    const { datasets, loading, error } = this.state;
+    const { datasets, loading, error, filterStr  } = this.state;
     const { onSelect } = this.props;
     return (
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        />
       <DatasetsList
         datasets={datasets}
         loading={loading}
         error={error}
+        filter={filterStr}
         onSelect={onSelect}
       />
+      </div>
     );
   }
 }

platform/viewer/src/googleCloud/DatasetsList.js

@@ -46,21 +46,23 @@ class DatasetsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
-      return <p>{this.props.error}</p>;
+    const { loading, datasets, filter, error } = this.props;
+    
+    if (error) {
+      return <p>{error}</p>;
     }
 
     const loadingIcon = (
       <Icon name="circle-notch" className="loading-icon-spin loading-icon" />
     );
 
-    if (this.props.loading) {
+    if (loading) {
       return loadingIcon;
     }
 
     const body = (
       <tbody id="DatasetList">
-        {this.props.datasets.map(this.renderTableRow)}
+        {datasets.filter(dataset => (dataset.name.split('/')[5].toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
       </tbody>
     );
 
@@ -71,7 +73,7 @@ class DatasetsList extends Component {
             <th>{this.props.t('Dataset')}</th>
           </tr>
         </thead>
-        {this.props.datasets && body}
+        {datasets && body}
       </table>
     );
   }

platform/viewer/src/googleCloud/DicomStoreList.js

@@ -46,20 +46,24 @@ class DicomStoreList extends Component {
   }
 
   render() {
-    if (this.props.error) {
-      return <p>{this.props.error}</p>;
+    const { loading, stores, filter, error } = this.props;
+
+    if (error) {
+      return <p>{error}</p>;
     }
 
     const loadingIcon = (
       <Icon name="circle-notch" className="loading-icon-spin loading-icon" />
     );
 
-    if (this.props.loading) {
+    if (loading) {
       return loadingIcon;
     }
 
     const body = (
-      <tbody id="StoreList">{this.props.stores.map(this.renderTableRow)}</tbody>
+      <tbody id="StoreList">{
+        stores.filter(store => (store.name.split('/')[7].toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
+      </tbody>
     );
 
     return (
@@ -69,7 +73,7 @@ class DicomStoreList extends Component {
             <th>{this.props.t('DICOM Store')}</th>
           </tr>
         </thead>
-        {this.props.stores && body}
+        {stores && body}
       </table>
     );
   }

platform/viewer/src/googleCloud/DicomStorePicker.js

@@ -10,6 +10,7 @@ export default class DicomStorePicker extends Component {
     loading: true,
     stores: [],
     locations: [],
+    filterStr: ""
   };
 
   static propTypes = {
@@ -38,16 +39,24 @@ export default class DicomStorePicker extends Component {
   }
 
   render() {
-    const { stores, loading, error } = this.state;
+    const { stores, loading, error, filterStr } = this.state;
     const { onSelect } = this.props;
 
     return (
-      <DicomStoreList
-        stores={stores}
-        loading={loading}
-        error={error}
-        onSelect={onSelect}
-      />
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        />
+        <DicomStoreList
+          stores={stores}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }

platform/viewer/src/googleCloud/LocationPicker.js

@@ -9,6 +9,7 @@ export default class LocationPicker extends Component {
     error: null,
     loading: true,
     locations: [],
+    filterStr: "",
   };
 
   static propTypes = {
@@ -37,15 +38,23 @@ export default class LocationPicker extends Component {
   }
 
   render() {
-    const { locations, loading, error } = this.state;
+    const { locations, loading, error, filterStr } = this.state;
     const { onSelect } = this.props;
     return (
-      <LocationsList
-        locations={locations}
-        loading={loading}
-        error={error}
-        onSelect={onSelect}
-      />
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        />
+        <LocationsList
+          locations={locations}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }