chore(release): publish [skip ci]

- @ohif/extension-cornerstone@1.7.1
 - @ohif/extension-dicom-html@1.0.2
 - @ohif/extension-vtk@0.54.2
 - @ohif/core@1.13.2
 - @ohif/viewer@2.11.3

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.7.0...@ohif/extension-cornerstone@1.7.1) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.6.0...@ohif/extension-cornerstone@1.7.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
 # [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.5.1...@ohif/extension-cornerstone@1.6.0) (2019-11-19)
 
 

extensions/cornerstone/package.json

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

extensions/cornerstone/src/ConnectedCornerstoneViewport.js

@@ -2,6 +2,7 @@ import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF from '@ohif/core';
 import { connect } from 'react-redux';
 import throttle from 'lodash.throttle';
+import { setEnabledElement } from './state';
 
 const { setViewportActive, setViewportSpecificData } = OHIF.redux.actions;
 const {
@@ -80,11 +81,11 @@ const mapDispatchToProps = (dispatch, ownProps) => {
      */
     onElementEnabled: event => {
       const enabledElement = event.detail.element;
+      setEnabledElement(viewportIndex, enabledElement);
       dispatch(
         setViewportSpecificData(viewportIndex, {
           // TODO: Hack to make sure our plugin info is available from the outset
           plugin: 'cornerstone',
-          dom: enabledElement,
         })
       );
     },

extensions/cornerstone/src/commandsModule.js

@@ -1,14 +1,12 @@
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from '@ohif/core';
+import { getEnabledElement } from './state';
 const scroll = cornerstoneTools.import('util/scroll');
 
 const actions = {
   rotateViewport: ({ viewports, rotation }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
     if (enabledElement) {
       let viewport = cornerstone.getViewport(enabledElement);
@@ -17,10 +15,7 @@ const actions = {
     }
   },
   flipViewportHorizontal: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
     if (enabledElement) {
       let viewport = cornerstone.getViewport(enabledElement);
@@ -29,10 +24,7 @@ const actions = {
     }
   },
   flipViewportVertical: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
     if (enabledElement) {
       let viewport = cornerstone.getViewport(enabledElement);
@@ -40,11 +32,8 @@ const actions = {
       cornerstone.setViewport(enabledElement, viewport);
     }
   },
-  scaleViewport: ({ viewports, direction }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+  scaleViewport: ({ direction, viewports }) => {
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
     const step = direction * 0.15;
 
     if (enabledElement) {
@@ -58,20 +47,14 @@ const actions = {
     }
   },
   resetViewport: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
     if (enabledElement) {
       cornerstone.reset(enabledElement);
     }
   },
   invertViewport: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
 
     if (enabledElement) {
       let viewport = cornerstone.getViewport(enabledElement);
@@ -92,10 +75,7 @@ const actions = {
     console.warn('updateDisplaySet: ', direction);
   },
   clearAnnotations: ({ viewports }) => {
-    const element = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
+    const element = getEnabledElement(viewports.activeViewportIndex);
     if (!element) {
       return;
     }
@@ -147,24 +127,25 @@ const actions = {
     });
   },
   nextImage: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
-
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
     scroll(enabledElement, 1);
   },
   previousImage: ({ viewports }) => {
-    const enabledElement = _getActiveViewportEnabledElement(
-      viewports.viewportSpecificData,
-      viewports.activeViewportIndex
-    );
-
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
     scroll(enabledElement, -1);
   },
+  getActiveViewportEnabledElement: ({ viewports }) => {
+    const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+    return enabledElement;
+  },
 };
 
 const definitions = {
+  getActiveViewportEnabledElement: {
+    commandFn: actions.getActiveViewportEnabledElement,
+    storeContexts: ['viewports'],
+    options: {},
+  },
   rotateViewportCW: {
     commandFn: actions.rotateViewport,
     storeContexts: ['viewports'],
@@ -245,15 +226,6 @@ const definitions = {
   },
 };
 
-/**
- * Grabs `dom` reference for the enabledElement of
- * the active viewport
- */
-function _getActiveViewportEnabledElement(viewports, activeIndex) {
-  const activeViewport = viewports[activeIndex] || {};
-  return activeViewport.dom;
-}
-
 export default {
   actions,
   definitions,

extensions/cornerstone/src/init.js

@@ -3,6 +3,7 @@ import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
 import initCornerstoneTools from './initCornerstoneTools.js';
 import queryString from 'query-string';
+import { SimpleDialog } from '@ohif/ui';
 
 function fallbackMetaDataProvider(type, imageId) {
   if (!imageId.includes('wado?requestType=WADO')) {
@@ -29,6 +30,28 @@ cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);
  * @param {Object|Array} configuration.csToolsConfig
  */
 export default function init({ servicesManager, configuration = {} }) {
+  const { UIDialogService } = servicesManager.services;
+  const callInputDialog = (data, event, callback) => {
+    let dialogId = UIDialogService.create({
+      content: SimpleDialog.InputDialog,
+      defaultPosition: {
+        x: (event && event.currentPoints.canvas.x) || 0,
+        y: (event && event.currentPoints.canvas.y) || 0,
+      },
+      showOverlay: true,
+      contentProps: {
+        title: 'Enter your annotation',
+        label: 'New label',
+        measurementData: data ? { description: data.text } : {},
+        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        onSubmit: value => {
+          callback(value);
+          UIDialogService.dismiss({ id: dialogId });
+        },
+      },
+    });
+  };
+
   const { csToolsConfig } = configuration;
   const { StackManager } = OHIF.utils;
   const metadataProvider = new OHIF.cornerstone.MetadataProvider();
@@ -62,7 +85,6 @@ export default function init({ servicesManager, configuration = {} }) {
     ZoomTouchPinchTool,
     // Annotations
     EraserTool,
-    ArrowAnnotateTool,
     BidirectionalTool,
     LengthTool,
     AngleTool,
@@ -85,7 +107,6 @@ export default function init({ servicesManager, configuration = {} }) {
     ZoomTouchPinchTool,
     // Annotations
     EraserTool,
-    ArrowAnnotateTool,
     BidirectionalTool,
     LengthTool,
     AngleTool,
@@ -99,6 +120,15 @@ export default function init({ servicesManager, configuration = {} }) {
 
   tools.forEach(tool => csTools.addTool(tool));
 
+  csTools.addTool(csTools.ArrowAnnotateTool, {
+    configuration: {
+      getTextCallback: (callback, eventDetails) =>
+        callInputDialog(null, eventDetails, callback),
+      changeTextCallback: (data, eventDetails, callback) =>
+        callInputDialog(data, eventDetails, callback),
+    },
+  });
+
   csTools.setToolActive('Pan', { mouseButtonMask: 4 });
   csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
   csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });

extensions/cornerstone/src/state.js

@@ -0,0 +1,20 @@
+const state = {
+  enabledElements: {},
+};
+
+/**
+ * Sets the enabled element `dom` reference for an active viewport.
+ * @param {HTMLElement} dom Active viewport element.
+ * @return void
+ */
+const setEnabledElement = (viewportIndex, element) =>
+  (state.enabledElements[viewportIndex] = element);
+
+/**
+ * Grabs the enabled element `dom` reference of an active viewport.
+ *
+ * @return {HTMLElement} Active viewport element.
+ */
+const getEnabledElement = viewportIndex => state.enabledElements[viewportIndex];
+
+export { setEnabledElement, getEnabledElement };

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.1...@ohif/extension-dicom-html@1.0.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
 ## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.0...@ohif/extension-dicom-html@1.0.1) (2019-10-29)
 
 

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-html/src/ConnectedDicomHtmlViewport.js

@@ -6,7 +6,7 @@ const { setViewportActive } = OHIF.redux.actions;
 
 const mapStateToProps = (state, ownProps) => {
   const { viewportIndex, byteArray } = ownProps;
-  const activeViewportIndex = state.viewports;
+  const { activeViewportIndex } = state.viewports;
 
   return {
     viewportIndex,

extensions/dicom-html/src/DicomHtmlViewport.js

@@ -238,7 +238,7 @@ class DicomHtmlViewport extends Component {
     } = this.props;
 
     if (viewportIndex !== activeViewportIndex) {
-      setViewportActive();
+      setViewportActive(viewportIndex);
     }
   };
 

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.54.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.1...@ohif/extension-vtk@0.54.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.54.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.0...@ohif/extension-vtk@0.54.1) (2019-11-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [0.54.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.13...@ohif/extension-vtk@0.54.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+## [0.53.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.12...@ohif/extension-vtk@0.53.13) (2019-11-25)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.53.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.11...@ohif/extension-vtk@0.53.12) (2019-11-20)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.53.12",
+  "version": "0.54.2",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,9 +52,9 @@
     "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^1.12.0",
-    "@ohif/ui": "^0.64.1",
-    "cornerstone-tools": "^4.0.9",
+    "@ohif/core": "^1.13.2",
+    "@ohif/ui": "^0.65.1",
+    "cornerstone-tools": "^4.8.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",

extensions/vtk/src/commandsModule.js

@@ -1,3 +1,4 @@
+import throttle from 'lodash.throttle';
 import {
   vtkInteractorStyleMPRCrosshairs,
   vtkInteractorStyleMPRWindowLevel,
@@ -8,354 +9,358 @@ import {
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
-import throttle from 'lodash.throttle';
 
 const { BlendMode } = Constants;
 
-// TODO: Put this somewhere else
-let apis = {};
+const commandsModule = ({ commandsManager }) => {
+  // TODO: Put this somewhere else
+  let apis = {};
 
-async function _getActiveViewportVTKApi(viewports) {
-  const {
-    numRows,
-    numColumns,
-    layout,
-    viewportSpecificData,
-    activeViewportIndex,
-  } = viewports;
+  async function _getActiveViewportVTKApi(viewports) {
+    const {
+      numRows,
+      numColumns,
+      layout,
+      viewportSpecificData,
+      activeViewportIndex,
+    } = viewports;
 
-  const currentData = layout.viewports[activeViewportIndex];
-  if (currentData && currentData.plugin === 'vtk') {
-    // TODO: I was storing/pulling this from Redux but ran into weird issues
-    if (apis[activeViewportIndex]) {
-      return apis[activeViewportIndex];
+    const currentData = layout.viewports[activeViewportIndex];
+    if (currentData && currentData.plugin === 'vtk') {
+      // TODO: I was storing/pulling this from Redux but ran into weird issues
+      if (apis[activeViewportIndex]) {
+        return apis[activeViewportIndex];
+      }
     }
+
+    const displaySet = viewportSpecificData[activeViewportIndex];
+
+    let api;
+    if (!api) {
+      try {
+        api = await setViewportToVTK(
+          displaySet,
+          activeViewportIndex,
+          numRows,
+          numColumns,
+          layout,
+          viewportSpecificData
+        );
+      } catch (error) {
+        throw new Error(error);
+      }
+    }
+
+    return api;
   }
 
-  const displaySet = viewportSpecificData[activeViewportIndex];
+  function _setView(api, sliceNormal, viewUp) {
+    const renderWindow = api.genericRenderWindow.getRenderWindow();
+    const istyle = renderWindow.getInteractor().getInteractorStyle();
+    istyle.setSliceNormal(...sliceNormal);
+    istyle.setViewUp(...viewUp);
 
-  let api;
-  if (!api) {
-    try {
-      api = await setViewportToVTK(
-        displaySet,
-        activeViewportIndex,
-        numRows,
-        numColumns,
-        layout,
-        viewportSpecificData
+    renderWindow.render();
+  }
+
+  function getVOIFromCornerstoneViewport() {
+    const dom = commandsManager.runCommand('getActiveViewportEnabledElement');
+    const cornerstoneElement = cornerstone.getEnabledElement(dom);
+
+    if (cornerstoneElement) {
+      const imageId = cornerstoneElement.image.imageId;
+
+      const { modality } = cornerstone.metaData.get(
+        'generalSeriesModule',
+        imageId
       );
-    } catch (error) {
-      throw new Error(error);
+
+      if (modality !== 'PT') {
+        const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
+
+        return {
+          windowWidth,
+          windowCenter,
+        };
+      }
     }
   }
 
-  return api;
-}
+  function setVOI(voi) {
+    const { windowWidth, windowCenter } = voi;
+    const lower = windowCenter - windowWidth / 2.0;
+    const upper = windowCenter + windowWidth / 2.0;
 
-function _setView(api, sliceNormal, viewUp) {
-  const renderWindow = api.genericRenderWindow.getRenderWindow();
-  const istyle = renderWindow.getInteractor().getInteractorStyle();
-  istyle.setSliceNormal(...sliceNormal);
-  istyle.setViewUp(...viewUp);
+    const rgbTransferFunction = apis[0].volumes[0]
+      .getProperty()
+      .getRGBTransferFunction(0);
 
-  renderWindow.render();
-}
+    rgbTransferFunction.setRange(lower, upper);
 
-const actions = {
-  axial: async ({ viewports }) => {
-    const api = await _getActiveViewportVTKApi(viewports);
-
-    apis[viewports.activeViewportIndex] = api;
-
-    _setView(api, [0, 0, 1], [0, -1, 0]);
-  },
-  sagittal: async ({ viewports }) => {
-    const api = await _getActiveViewportVTKApi(viewports);
-
-    apis[viewports.activeViewportIndex] = api;
-
-    _setView(api, [1, 0, 0], [0, 0, 1]);
-  },
-  coronal: async ({ viewports }) => {
-    const api = await _getActiveViewportVTKApi(viewports);
-
-    apis[viewports.activeViewportIndex] = api;
-
-    _setView(api, [0, 1, 0], [0, 0, 1]);
-  },
-  enableRotateTool: () => {
     apis.forEach(api => {
-      const istyle = vtkInteractorStyleMPRRotate.newInstance();
-
-      api.setInteractorStyle({ istyle });
+      api.updateVOI(windowWidth, windowCenter);
     });
-  },
-  enableCrosshairsTool: () => {
-    apis.forEach((api, apiIndex) => {
-      const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+  }
 
-      api.setInteractorStyle({
-        istyle,
-        configuration: { apis, apiIndex },
-      });
-    });
-  },
-  enableLevelTool: () => {
-    function updateVOI(apis, windowWidth, windowCenter) {
+  const actions = {
+    axial: async ({ viewports }) => {
+      const api = await _getActiveViewportVTKApi(viewports);
+
+      apis[viewports.activeViewportIndex] = api;
+
+      _setView(api, [0, 0, 1], [0, -1, 0]);
+    },
+    sagittal: async ({ viewports }) => {
+      const api = await _getActiveViewportVTKApi(viewports);
+
+      apis[viewports.activeViewportIndex] = api;
+
+      _setView(api, [1, 0, 0], [0, 0, 1]);
+    },
+    coronal: async ({ viewports }) => {
+      const api = await _getActiveViewportVTKApi(viewports);
+
+      apis[viewports.activeViewportIndex] = api;
+
+      _setView(api, [0, 1, 0], [0, 0, 1]);
+    },
+    enableRotateTool: () => {
       apis.forEach(api => {
-        api.updateVOI(windowWidth, windowCenter);
+        const istyle = vtkInteractorStyleMPRRotate.newInstance();
+
+        api.setInteractorStyle({ istyle });
       });
-    }
+    },
+    enableCrosshairsTool: () => {
+      apis.forEach((api, apiIndex) => {
+        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
 
-    const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
-
-    const callbacks = {
-      setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
-        apis.forEach(api => {
-          const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-          renderWindow.render();
+        api.setInteractorStyle({
+          istyle,
+          configuration: { apis, apiIndex },
         });
-
-        throttledUpdateVOIs(apis, windowWidth, windowCenter);
-      },
-    };
-
-    apis.forEach(api => {
-      const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
-
-      api.setInteractorStyle({ istyle, callbacks });
-    });
-  },
-  setSlabThickness: ({ slabThickness }) => {
-    apis.forEach(api => {
-      api.setSlabThickness(slabThickness);
-    });
-  },
-  changeSlabThickness: ({ change }) => {
-    apis.forEach(api => {
-      const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
-
-      api.setSlabThickness(slabThickness);
-    });
-  },
-  setBlendModeToComposite: () => {
-    apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
-
-      const slabThickness = api.getSlabThickness();
-
-      const mapper = api.volumes[0].getMapper();
-      if (mapper.setBlendModeToComposite) {
-        mapper.setBlendModeToComposite();
-      }
-
-      if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(slabThickness);
-      }
-      renderWindow.render();
-    });
-  },
-  setBlendModeToMaximumIntensity: () => {
-    apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const mapper = api.volumes[0].getMapper();
-      if (mapper.setBlendModeToMaximumIntensity) {
-        mapper.setBlendModeToMaximumIntensity();
-      }
-      renderWindow.render();
-    });
-  },
-  setBlendMode: ({ blendMode }) => {
-    apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-      api.volumes[0].getMapper().setBlendMode(blendMode);
-
-      renderWindow.render();
-    });
-  },
-  mpr2d: async ({ viewports }) => {
-    // TODO push a lot of this backdoor logic lower down to the library level.
-    const displaySet =
-      viewports.viewportSpecificData[viewports.activeViewportIndex];
-
-    // Get current VOI if cornerstone viewport.
-    const cornerstoneVOI = getVOIFromCornerstoneViewport(displaySet);
-
-    const viewportProps = [
-      {
-        //Axial
-        orientation: {
-          sliceNormal: [0, 0, 1],
-          viewUp: [0, -1, 0],
-        },
-      },
-      {
-        // Sagital
-        orientation: {
-          sliceNormal: [1, 0, 0],
-          viewUp: [0, 0, 1],
-        },
-      },
-      {
-        // Coronal
-        orientation: {
-          sliceNormal: [0, 1, 0],
-          viewUp: [0, 0, 1],
-        },
-      },
-    ];
-
-    try {
-      apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
-    } catch (error) {
-      throw new Error(error);
-    }
-
-    if (cornerstoneVOI) {
-      setVOI(cornerstoneVOI);
-    }
-
-    // Add widgets and set default interactorStyle of each viewport.
-    apis.forEach((api, apiIndex) => {
-      api.addSVGWidget(
-        vtkSVGCrosshairsWidget.newInstance(),
-        'crosshairsWidget'
-      );
-
-      const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
-
-      api.setInteractorStyle({
-        istyle,
-        configuration: { apis, apiIndex },
       });
-    });
-  },
-};
-
-window.vtkActions = actions;
-
-const definitions = {
-  axial: {
-    commandFn: actions.axial,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  coronal: {
-    commandFn: actions.coronal,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  sagittal: {
-    commandFn: actions.sagittal,
-    storeContexts: ['viewports'],
-    options: {},
-  },
-  enableRotateTool: {
-    commandFn: actions.enableRotateTool,
-    storeContexts: [],
-    options: {},
-  },
-  enableCrosshairsTool: {
-    commandFn: actions.enableCrosshairsTool,
-    storeContexts: [],
-    options: {},
-  },
-  enableLevelTool: {
-    commandFn: actions.enableLevelTool,
-    storeContexts: [],
-    options: {},
-  },
-  setBlendModeToComposite: {
-    commandFn: actions.setBlendModeToComposite,
-    storeContexts: [],
-    options: { blendMode: BlendMode.COMPOSITE_BLEND },
-  },
-  setBlendModeToMaximumIntensity: {
-    commandFn: actions.setBlendModeToMaximumIntensity,
-    storeContexts: [],
-    options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
-  },
-  setBlendModeToMinimumIntensity: {
-    commandFn: actions.setBlendMode,
-    storeContexts: [],
-    options: { blendMode: BlendMode.MINIMUM_INTENSITY_BLEND },
-  },
-  setBlendModeToAverageIntensity: {
-    commandFn: actions.setBlendMode,
-    storeContexts: [],
-    options: { blendMode: BlendMode.AVERAGE_INTENSITY_BLEND },
-  },
-  setSlabThickness: {
-    // TODO: How do we pass in a function argument?
-    commandFn: actions.setSlabThickness,
-    storeContexts: [],
-    options: {},
-  },
-  increaseSlabThickness: {
-    commandFn: actions.changeSlabThickness,
-    storeContexts: [],
-    options: {
-      change: 3,
     },
-  },
-  decreaseSlabThickness: {
-    commandFn: actions.changeSlabThickness,
-    storeContexts: [],
-    options: {
-      change: -3,
-    },
-  },
-  mpr2d: {
-    commandFn: actions.mpr2d,
-    storeContexts: ['viewports'],
-    options: {},
-    context: 'VIEWER',
-  },
-};
+    enableLevelTool: () => {
+      function updateVOI(apis, windowWidth, windowCenter) {
+        apis.forEach(api => {
+          api.updateVOI(windowWidth, windowCenter);
+        });
+      }
 
-export default {
-  definitions,
-  defaultContext: 'ACTIVE_VIEWPORT::VTK',
-};
+      const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
 
-function getVOIFromCornerstoneViewport(displaySet) {
-  const cornerstoneElement = cornerstone.getEnabledElement(displaySet.dom);
+      const callbacks = {
+        setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
+          apis.forEach(api => {
+            const renderWindow = api.genericRenderWindow.getRenderWindow();
 
-  if (cornerstoneElement) {
-    const imageId = cornerstoneElement.image.imageId;
+            renderWindow.render();
+          });
 
-    const { modality } = cornerstone.metaData.get(
-      'generalSeriesModule',
-      imageId
-    );
-
-    if (modality !== 'PT') {
-      const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
-
-      return {
-        windowWidth,
-        windowCenter,
+          throttledUpdateVOIs(apis, windowWidth, windowCenter);
+        },
       };
-    }
-  }
-}
 
-function setVOI(voi) {
-  const { windowWidth, windowCenter } = voi;
-  const lower = windowCenter - windowWidth / 2.0;
-  const upper = windowCenter + windowWidth / 2.0;
+      apis.forEach(api => {
+        const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
 
-  const rgbTransferFunction = apis[0].volumes[0]
-    .getProperty()
-    .getRGBTransferFunction(0);
+        api.setInteractorStyle({ istyle, callbacks });
+      });
+    },
+    setSlabThickness: ({ slabThickness }) => {
+      apis.forEach(api => {
+        api.setSlabThickness(slabThickness);
+      });
+    },
+    changeSlabThickness: ({ change }) => {
+      apis.forEach(api => {
+        const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
 
-  rgbTransferFunction.setRange(lower, upper);
+        api.setSlabThickness(slabThickness);
+      });
+    },
+    setBlendModeToComposite: () => {
+      apis.forEach(api => {
+        const renderWindow = api.genericRenderWindow.getRenderWindow();
+        const istyle = renderWindow.getInteractor().getInteractorStyle();
 
-  apis.forEach(api => {
-    api.updateVOI(windowWidth, windowCenter);
-  });
-}
+        const slabThickness = api.getSlabThickness();
+
+        const mapper = api.volumes[0].getMapper();
+        if (mapper.setBlendModeToComposite) {
+          mapper.setBlendModeToComposite();
+        }
+
+        if (istyle.setSlabThickness) {
+          istyle.setSlabThickness(slabThickness);
+        }
+        renderWindow.render();
+      });
+    },
+    setBlendModeToMaximumIntensity: () => {
+      apis.forEach(api => {
+        const renderWindow = api.genericRenderWindow.getRenderWindow();
+        const mapper = api.volumes[0].getMapper();
+        if (mapper.setBlendModeToMaximumIntensity) {
+          mapper.setBlendModeToMaximumIntensity();
+        }
+        renderWindow.render();
+      });
+    },
+    setBlendMode: ({ blendMode }) => {
+      apis.forEach(api => {
+        const renderWindow = api.genericRenderWindow.getRenderWindow();
+
+        api.volumes[0].getMapper().setBlendMode(blendMode);
+
+        renderWindow.render();
+      });
+    },
+    mpr2d: async ({ viewports }) => {
+      // TODO push a lot of this backdoor logic lower down to the library level.
+      const displaySet =
+        viewports.viewportSpecificData[viewports.activeViewportIndex];
+
+      // Get current VOI if cornerstone viewport.
+      const cornerstoneVOI = getVOIFromCornerstoneViewport();
+
+      const viewportProps = [
+        {
+          //Axial
+          orientation: {
+            sliceNormal: [0, 0, 1],
+            viewUp: [0, -1, 0],
+          },
+        },
+        {
+          // Sagital
+          orientation: {
+            sliceNormal: [1, 0, 0],
+            viewUp: [0, 0, 1],
+          },
+        },
+        {
+          // Coronal
+          orientation: {
+            sliceNormal: [0, 1, 0],
+            viewUp: [0, 0, 1],
+          },
+        },
+      ];
+
+      try {
+        apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
+      } catch (error) {
+        throw new Error(error);
+      }
+
+      if (cornerstoneVOI) {
+        setVOI(cornerstoneVOI);
+      }
+
+      // Add widgets and set default interactorStyle of each viewport.
+      apis.forEach((api, apiIndex) => {
+        api.addSVGWidget(
+          vtkSVGCrosshairsWidget.newInstance(),
+          'crosshairsWidget'
+        );
+
+        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+
+        api.setInteractorStyle({
+          istyle,
+          configuration: { apis, apiIndex },
+        });
+      });
+    },
+  };
+
+  window.vtkActions = actions;
+
+  const definitions = {
+    axial: {
+      commandFn: actions.axial,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    coronal: {
+      commandFn: actions.coronal,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    sagittal: {
+      commandFn: actions.sagittal,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    enableRotateTool: {
+      commandFn: actions.enableRotateTool,
+      storeContexts: [],
+      options: {},
+    },
+    enableCrosshairsTool: {
+      commandFn: actions.enableCrosshairsTool,
+      storeContexts: [],
+      options: {},
+    },
+    enableLevelTool: {
+      commandFn: actions.enableLevelTool,
+      storeContexts: [],
+      options: {},
+    },
+    setBlendModeToComposite: {
+      commandFn: actions.setBlendModeToComposite,
+      storeContexts: [],
+      options: { blendMode: BlendMode.COMPOSITE_BLEND },
+    },
+    setBlendModeToMaximumIntensity: {
+      commandFn: actions.setBlendModeToMaximumIntensity,
+      storeContexts: [],
+      options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
+    },
+    setBlendModeToMinimumIntensity: {
+      commandFn: actions.setBlendMode,
+      storeContexts: [],
+      options: { blendMode: BlendMode.MINIMUM_INTENSITY_BLEND },
+    },
+    setBlendModeToAverageIntensity: {
+      commandFn: actions.setBlendMode,
+      storeContexts: [],
+      options: { blendMode: BlendMode.AVERAGE_INTENSITY_BLEND },
+    },
+    setSlabThickness: {
+      // TODO: How do we pass in a function argument?
+      commandFn: actions.setSlabThickness,
+      storeContexts: [],
+      options: {},
+    },
+    increaseSlabThickness: {
+      commandFn: actions.changeSlabThickness,
+      storeContexts: [],
+      options: {
+        change: 3,
+      },
+    },
+    decreaseSlabThickness: {
+      commandFn: actions.changeSlabThickness,
+      storeContexts: [],
+      options: {
+        change: -3,
+      },
+    },
+    mpr2d: {
+      commandFn: actions.mpr2d,
+      storeContexts: ['viewports'],
+      options: {},
+      context: 'VIEWER',
+    },
+  };
+
+  return {
+    definitions,
+    defaultContext: 'ACTIVE_VIEWPORT::VTK',
+  };
+};
+
+export default commandsModule;

extensions/vtk/src/index.js

@@ -20,8 +20,8 @@ const vtkExtension = {
   getToolbarModule() {
     return toolbarModule;
   },
-  getCommandsModule() {
-    return commandsModule;
+  getCommandsModule({ commandsManager }) {
+    return commandsModule({ commandsManager });
   },
 };
 

platform/core/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.1...@ohif/core@1.13.2) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [1.13.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.0...@ohif/core@1.13.1) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
+# [1.13.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.12.0...@ohif/core@1.13.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
 # [1.12.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.11.0...@ohif/core@1.12.0) (2019-11-19)
 
 

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "1.12.0",
+  "version": "1.13.2",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.8.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3"
   },

platform/core/src/classes/HotkeysManager.js

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash.clonedeep';
 import hotkeys from './hotkeys';
 import log from './../log.js';
 
@@ -44,20 +43,68 @@ export class HotkeysManager {
   }
 
   /**
-   * Registers a list of hotkeydefinitions. Optionally, sets the
-   * default hotkey bindings for all provided definitions. These
+   * Registers a list of hotkeydefinitions.
+   *
+   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
+   */
+  setHotkeys(hotkeyDefinitions) {
+    const definitions = Array.isArray(hotkeyDefinitions)
+      ? [...hotkeyDefinitions]
+      : this._parseToArrayLike(hotkeyDefinitions);
+
+    definitions.forEach(definition => this.registerHotkeys(definition));
+  }
+
+  /**
+   * Set default hotkey bindings. These
    * values are used in `this.restoreDefaultBindings`.
    *
-   * @param {HotkeyDefinition[]} hotkeyDefinitions
-   * @param {Boolean} [isDefaultDefinitions]
+   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
    */
-  setHotkeys(hotkeyDefinitions, isDefaultDefinitions = false) {
-    const definitions = cloneDeep(hotkeyDefinitions);
-    definitions.forEach(definition => this.registerHotkeys(definition));
+  setDefaultHotKeys(hotkeyDefinitions) {
+    const definitions = Array.isArray(hotkeyDefinitions)
+      ? [...hotkeyDefinitions]
+      : this._parseToArrayLike(hotkeyDefinitions);
 
-    if (isDefaultDefinitions) {
-      this.hotkeyDefaults = definitions;
-    }
+    this.hotkeyDefaults = definitions;
+  }
+
+  /**
+   * It parses given object containing hotkeyDefinition to array like.
+   * Each property of given object will be mapped to an object of an array. And its property name will be the value of a property named as commandName
+   *
+   * @param {HotkeyDefinition[] | Object} hotkeyDefinitions Contains hotkeys definitions
+   * @returns {HotkeyDefinition[]}
+   */
+  _parseToArrayLike(hotkeyDefinitionsObj) {
+    const copy = { ...hotkeyDefinitionsObj };
+    return Object.entries(copy).map(entryValue =>
+      this._parseToHotKeyObj(entryValue[0], entryValue[1])
+    );
+  }
+
+  /**
+   * Return HotkeyDefinition object like based on given property name and property value
+   * @param {string} propertyName property name of hotkey definition object
+   * @param {object} propertyValue property value of hotkey definition object
+   *
+   * @example
+   *
+   * const hotKeyObj = {hotKeyDefA: {keys:[],....}}
+   *
+   * const parsed = _parseToHotKeyObj(Object.keys(hotKeyDefA)[0], hotKeyObj[hotKeyDefA]);
+   *  {
+   *   commandName: hotKeyDefA,
+   *   keys: [],
+   *   ....
+   *  }
+   *
+   */
+  _parseToHotKeyObj(propertyName, propertyValue) {
+    return {
+      commandName: propertyName,
+      ...propertyValue,
+    };
   }
 
   /**

platform/core/src/classes/HotkeysManager.test.js

@@ -94,18 +94,20 @@ describe('HotkeysManager', () => {
       expect(firstCallArgs).toEqual(hotkeyDefinitions[0]);
       expect(secondCallArgs).toEqual(hotkeyDefinitions[1]);
     });
-    it('does not set this.hotkeyDefaults by default', () => {
+    it('does not set this.hotkeyDefaults when calling setHotKeys', () => {
       const hotkeyDefinitions = [{ commandName: 'dance', keys: '+' }];
 
       hotkeysManager.setHotkeys(hotkeyDefinitions);
 
       expect(hotkeysManager.hotkeyDefaults).toEqual([]);
     });
-    it('sets this.hotkeyDefaults when isDefaultDefinitions is true', () => {
-      const hotkeyDefinitions = [{ commandName: 'dance', keys: '+' }];
-      const isDefaultDefinitions = true;
+  });
 
-      hotkeysManager.setHotkeys(hotkeyDefinitions, isDefaultDefinitions);
+  describe('setDefaultHotKeys()', () => {
+    it('it sets default hotkeys', () => {
+      const hotkeyDefinitions = [{ commandName: 'dance', keys: '+' }];
+
+      hotkeysManager.setDefaultHotKeys(hotkeyDefinitions);
 
       expect(hotkeysManager.hotkeyDefaults).toEqual(hotkeyDefinitions);
     });

platform/core/src/extensions/ExtensionManager.js

@@ -69,6 +69,7 @@ export default class ExtensionManager {
     if (extension.preRegistration) {
       extension.preRegistration({
         servicesManager: this._servicesManager,
+        commandsManager: this._commandsManager,
         configuration,
       });
     }
@@ -112,6 +113,7 @@ export default class ExtensionManager {
     try {
       const extensionModule = getModuleFn({
         servicesManager: this._servicesManager,
+        commandsManager: this._commandsManager,
       });
 
       if (!extensionModule) {

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

@@ -49,7 +49,7 @@ describe('ExtensionManager.js', () => {
       expect(fakeExtension.preRegistration.mock.calls.length).toBe(1);
     });
 
-    it('calls preRegistration() passing configuration and servicesManager instance for extension', () => {
+    it('calls preRegistration() passing configuration along with servicesManager and commandsManager instances for extension', () => {
       const configuration = { config: 'Some configuration' };
       extensionManager._servicesManager = { services: { TestService: {} } };
 
@@ -60,6 +60,7 @@ describe('ExtensionManager.js', () => {
       // Assert
       expect(fakeExtension.preRegistration.mock.calls[0][0]).toEqual({
         servicesManager: extensionManager._servicesManager,
+        commandsManager: extensionManager._commandsManager,
         configuration,
       });
     });
@@ -134,7 +135,7 @@ describe('ExtensionManager.js', () => {
       );
     });
 
-    it('successfully passes a servicesManager instance to each module', () => {
+    it('successfully passes a servicesManager and commandsManager instances to each module', () => {
       extensionManager._servicesManager = { services: { TestService: {} } };
 
       const extension = {
@@ -150,6 +151,7 @@ describe('ExtensionManager.js', () => {
 
       expect(extension.getViewportModule.mock.calls[0][0]).toEqual({
         servicesManager: extensionManager._servicesManager,
+        commandsManager: extensionManager._commandsManager,
       });
     });
 

platform/core/src/redux/actions.js

@@ -12,13 +12,25 @@ import {
   SET_VIEWPORT_LAYOUT_AND_DATA,
 } from './constants/ActionTypes.js';
 
+/**
+ * The definition of a viewport layout.
+ *
+ * @typedef {Object} ViewportLayout
+ * @property {number} numRows -
+ * @property {number} numColumns -
+ * @property {array} viewports -
+ */
+
 /**
  * VIEWPORT
  */
-export const setViewportSpecificData = (viewportIndex, data) => ({
+export const setViewportSpecificData = (
+  viewportIndex,
+  viewportSpecificData
+) => ({
   type: SET_VIEWPORT,
   viewportIndex,
-  data,
+  viewportSpecificData,
 });
 
 export const setViewportActive = viewportIndex => ({
@@ -27,10 +39,7 @@ export const setViewportActive = viewportIndex => ({
 });
 
 /**
- * @param {object} layout
- * @param {number} layout.numRows
- * @param {number} layout.numColumns
- * @param {array} layout.viewports
+ * @param {ViewportLayout} layout
  */
 export const setLayout = ({ numRows, numColumns, viewports }) => ({
   type: SET_VIEWPORT_LAYOUT,
@@ -40,10 +49,9 @@ export const setLayout = ({ numRows, numColumns, viewports }) => ({
 });
 
 /**
- * @param {object} layout
  * @param {number} layout.numRows
  * @param {number} layout.numColumns
- * @param {array} layout.viewports
+ * @param {array} viewports
  */
 export const setViewportLayoutAndData = (
   { numRows, numColumns, viewports },
@@ -61,9 +69,9 @@ export const clearViewportSpecificData = viewportIndex => ({
   viewportIndex,
 });
 
-export const setActiveViewportSpecificData = data => ({
+export const setActiveViewportSpecificData = viewportSpecificData => ({
   type: SET_ACTIVE_SPECIFIC_DATA,
-  data,
+  viewportSpecificData,
 });
 
 /**
@@ -113,13 +121,18 @@ export const setServers = servers => ({
 });
 
 const actions = {
-  // VIEWPORT
+  /**
+   * VIEWPORT
+   */
   setViewportActive,
   setViewportSpecificData,
   setViewportLayoutAndData,
   setLayout,
   clearViewportSpecificData,
   setActiveViewportSpecificData,
+  /**
+   * NOT-VIEWPORT
+   */
   setStudyLoadingProgress,
   clearStudyLoadingProgress,
   setUserPreferences,

platform/core/src/redux/actions.test.js

@@ -28,7 +28,7 @@ describe('actions', () => {
 
   describe('viewport action creators', () => {
     it('should create an action to set the viewport specific data', () => {
-      const data = {
+      const viewportSpecificData = {
         displaySetInstanceUid: 'ef859a23-4631-93ab-d26b-7940a822c699',
         seriesDate: '20151026',
         seriesTime: '082611.370000',
@@ -65,12 +65,12 @@ describe('actions', () => {
 
       const expectedAction = {
         type: types.SET_ACTIVE_SPECIFIC_DATA,
-        data,
+        viewportSpecificData,
       };
 
-      expect(actions.setActiveViewportSpecificData(data)).toEqual(
-        expectedAction
-      );
+      expect(
+        actions.setActiveViewportSpecificData(viewportSpecificData)
+      ).toEqual(expectedAction);
     });
 
     it('should create an action to clear clearViewportSpecificData', () => {

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

@@ -11,12 +11,15 @@ const defaultState = {
     // order, description, window (int), level (int)
     // 0: { description: 'Soft tissue', window: '', level: '' },
   },
+  generalPreferences: {
+    // language: 'en-US'
+  },
 };
 
 const preferences = (state, action) => {
   switch (action.type) {
     case 'SET_USER_PREFERENCES': {
-      const newState = action.state ? action.state : cloneDeep(defaultState);
+      const newState = action.state || cloneDeep(defaultState);
 
       return Object.assign({}, state, newState);
     }

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

@@ -1,3 +1,6 @@
+import cloneDeep from 'lodash.clonedeep';
+import merge from 'lodash.merge';
+
 import {
   CLEAR_VIEWPORT,
   SET_ACTIVE_SPECIFIC_DATA,
@@ -8,10 +11,7 @@ import {
   SET_VIEWPORT_LAYOUT_AND_DATA,
 } from './../constants/ActionTypes.js';
 
-import cloneDeep from 'lodash.clonedeep';
-import merge from 'lodash.merge';
-
-const defaultState = {
+const DEFAULT_STATE = {
   numRows: 1,
   numColumns: 1,
   activeViewportIndex: 0,
@@ -26,94 +26,137 @@ const defaultState = {
 };
 
 /**
- * @param {Object} [state=defaultState]
- * @param {Object} action
- * @param {string} [action.type]
- * @param {number} [action.viewportIndex]
- * @param {Object} [action.layout]
- * @param {Object} [action.viewportSpecificData]
+ * The definition of a viewport action.
+ *
+ * @typedef {Object} ViewportAction
+ * @property {string} type -
+ * @property {Object} data -
+ * @property {Object} layout -
+ * @property {number} viewportIndex -
+ * @property {Object} viewportSpecificData -
  */
-const viewports = (state = defaultState, action) => {
-  let viewportSpecificData;
+
+/**
+ * @param {Object} [state=DEFAULT_STATE] The current viewport state.
+ * @param {ViewportAction} action A viewport action.
+ */
+const viewports = (state = DEFAULT_STATE, action) => {
   let useActiveViewport = false;
+
   switch (action.type) {
-    case SET_VIEWPORT_ACTIVE:
-      return Object.assign({}, state, {
-        activeViewportIndex: action.viewportIndex,
-      });
+    /**
+     * Sets the active viewport index.
+     *
+     * @return {Object} New state.
+     */
+    case SET_VIEWPORT_ACTIVE: {
+      return { ...state, activeViewportIndex: action.viewportIndex };
+    }
+
+    /**
+     * Sets viewport layout.
+     *
+     * @return {Object} New state.
+     */
     case SET_VIEWPORT_LAYOUT: {
-      const { numRows, numColumns, viewports } = action;
-      const layout = {
-        viewports: [...viewports],
+      return {
+        ...state,
+        numRows: action.numRows,
+        numColumns: action.numColumns,
+        layout: { viewports: [...action.viewports] },
       };
-
-      return Object.assign({}, state, { numRows, numColumns, layout });
     }
+
+    /**
+     * Sets viewport layout and data.
+     *
+     * @return {Object} New state.
+     */
     case SET_VIEWPORT_LAYOUT_AND_DATA: {
-      const { numRows, numColumns, viewports, viewportSpecificData } = action;
-      const layout = {
-        viewports: [...viewports],
+      return {
+        ...state,
+        numRows: action.numRows,
+        numColumns: action.numColumns,
+        layout: { viewports: [...action.viewports] },
+        viewportSpecificData: cloneDeep(action.viewportSpecificData),
       };
-
-      return Object.assign({}, state, {
-        numRows,
-        numColumns,
-        layout,
-        viewportSpecificData: cloneDeep(viewportSpecificData),
-      });
     }
+
+    /**
+     * Sets viewport specific data of active viewport.
+     *
+     * @return {Object} New state.
+     */
     case SET_VIEWPORT: {
       const layout = cloneDeep(state.layout);
-      const hasPlugin = action.data && action.data.plugin;
 
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
       viewportSpecificData[action.viewportIndex] = merge(
         {},
         viewportSpecificData[action.viewportIndex],
-        action.data
+        action.viewportSpecificData
       );
 
-      if (hasPlugin) {
-        layout.viewports[action.viewportIndex].plugin = action.data.plugin;
+      if (action.viewportSpecificData && action.viewportSpecificData.plugin) {
+        layout.viewports[action.viewportIndex].plugin =
+          action.viewportSpecificData.plugin;
       }
 
-      return Object.assign({}, state, { layout, viewportSpecificData });
+      return { ...state, layout, viewportSpecificData };
     }
+
+    /**
+     * Sets viewport specific data of active/any viewport.
+     *
+     * @return {Object} New state.
+     */
     case SET_ACTIVE_SPECIFIC_DATA:
       useActiveViewport = true;
     // Allow fall-through
     // eslint-disable-next-line
     case SET_SPECIFIC_DATA: {
       const layout = cloneDeep(state.layout);
-      const hasPlugin = action.data && action.data.plugin;
       const viewportIndex = useActiveViewport
         ? state.activeViewportIndex
         : action.viewportIndex;
-      const { dom } = state.viewportSpecificData[viewportIndex];
 
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
       viewportSpecificData[viewportIndex] = {
-        dom,
-        ...action.data,
+        ...action.viewportSpecificData,
       };
 
-      if (hasPlugin) {
-        layout.viewports[viewportIndex].plugin = action.data.plugin;
+      if (action.viewportSpecificData && action.viewportSpecificData.plugin) {
+        layout.viewports[viewportIndex].plugin =
+          action.viewportSpecificData.plugin;
       }
 
-      return Object.assign({}, state, { layout, viewportSpecificData });
+      return { ...state, layout, viewportSpecificData };
     }
-    case CLEAR_VIEWPORT:
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+
+    /**
+     * Clears viewport specific data of any viewport.
+     *
+     * @return {Object} New state.
+     */
+    case CLEAR_VIEWPORT: {
+      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
+
       if (action.viewportIndex) {
         viewportSpecificData[action.viewportIndex] = {};
-        return Object.assign({}, state, { viewportSpecificData });
+        return { ...state, viewportSpecificData };
       } else {
-        return defaultState;
+        return DEFAULT_STATE;
       }
+    }
 
-    default:
+    /**
+     * Returns the current application state.
+     *
+     * @return {Object} The current state.
+     */
+    default: {
       return state;
+    }
   }
 };
 

platform/core/src/redux/reducers/viewports.test.js

@@ -60,7 +60,7 @@ describe('viewports reducer', () => {
     const setViewportAction = {
       type: types.SET_VIEWPORT,
       viewportIndex: viewportToSet,
-      data: {
+      viewportSpecificData: {
         hello: 'this is that data for the viewport',
         world: 'that will be set for the viewportIndex',
       },
@@ -69,7 +69,7 @@ describe('viewports reducer', () => {
     const updatedState = reducer(undefined, setViewportAction);
     const updatedViewport = updatedState.viewportSpecificData[viewportToSet];
 
-    expect(updatedViewport).toEqual(setViewportAction.data);
+    expect(updatedViewport).toEqual(setViewportAction.viewportSpecificData);
   });
 
   it('should handle CLEAR_VIEWPORT', () => {

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

@@ -1,11 +1,5 @@
 /**
- * A UI Element
- *
- * @typedef {ReactElement|HTMLElement} DialogContent
- */
-
-/**
- * A UI Position
+ * A UI Element Position
  *
  * @typedef {Object} ElementPosition
  * @property {number} top -
@@ -18,16 +12,16 @@
  * UI Dialog
  *
  * @typedef {Object} DialogProps
- * @property {string} id -
- * @property {DialogContent} content -
- * @property {boolean} isDraggable -
- * @property {ElementPosition} defaultPosition -
- * @property {ElementPosition} position -
- * @property {Function} onSubmit -
- * @property {Function} onClose -
- * @property {Function} onStart -
- * @property {Function} onStop -
- * @property {Function} onDrag -
+ * @property {string} id The dialog id.
+ * @property {ReactElement|HTMLElement} content The dialog content.
+ * @property {Object} contentProps The dialog content props.
+ * @property {boolean} [isDraggable=true] Controls if dialog content is draggable or not.
+ *  @property {boolean} [showOverlay=false] Controls dialog overlay.
+ * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+ * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
+ * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+ * @property {Function} onStop Called when dragging stops.
+ * @property {Function} onDrag Called while dragging.
  */
 
 const uiDialogServicePublicAPI = {
@@ -51,29 +45,29 @@ function createUIDialogService() {
 /**
  * Show a new UI dialog;
  *
- * @param {DialogProps} props { id, content, onSubmit, onClose, onStart, onDrag, onStop, isDraggable, defaultPosition, position }
+ * @param {DialogProps} props { id, content, contentProps, onStart, onDrag, onStop, isDraggable, showOverlay, defaultPosition, position }
  */
 function create({
   id,
   content,
-  onSubmit,
-  onClose,
+  contentProps,
   onStart,
   onDrag,
   onStop,
-  isDraggable,
+  isDraggable = true,
+  showOverlay = false,
   defaultPosition,
   position,
 }) {
   return uiDialogServiceImplementation._create({
     id,
     content,
-    onSubmit,
-    onClose,
+    contentProps,
     onStart,
     onDrag,
     onStop,
     isDraggable,
+    showOverlay,
     defaultPosition,
     position,
   });

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

@@ -1,18 +1,14 @@
-/**
- * A UI Element
- *
- * @typedef {ReactElement|HTMLElement} Modal
- */
-
 /**
  * UI Modal
  *
  * @typedef {Object} ModalProps
- * @property {boolean} [shouldCloseOnEsc=false] -
- * @property {boolean} [isOpen=true] -
- * @property {boolean} [closeButton=true] -
- * @property {string} [title=null] - 'Modal Title'
- * @property {string} [customClassName=null] - '.ModalClass'
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
  */
 
 const uiModalServicePublicAPI = {
@@ -34,20 +30,26 @@ function createUIModalService() {
 /**
  * Show a new UI modal;
  *
- * @param {Modal} component React component
- * @param {ModalProps} props { shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
+ * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
  */
-function show(
-  component,
-  props = {
-    shouldCloseOnEsc: false,
-    isOpen: true,
-    closeButton: true,
-    title: null,
-    customClassName: null,
-  }
-) {
-  return uiModalServiceImplementation._show(component, props);
+function show({
+  content = null,
+  contentProps = null,
+  shouldCloseOnEsc = false,
+  isOpen = true,
+  closeButton = true,
+  title = null,
+  customClassName = null,
+}) {
+  return uiModalServiceImplementation._show({
+    content,
+    contentProps,
+    shouldCloseOnEsc,
+    isOpen,
+    closeButton,
+    title,
+    customClassName,
+  });
 }
 
 /**

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.2](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.1...@ohif/i18n@0.52.2) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
 ## [0.52.1](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.0...@ohif/i18n@0.52.1) (2019-11-18)
 
 

platform/i18n/package.json

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

platform/i18n/src/index.js

@@ -42,6 +42,7 @@ const locizeOptions = {
 
 const envUseLocize = !!config.USE_LOCIZE;
 const envApiKeyAvailable = !!config.LOCIZE_API_KEY;
+const DEFAULT_LANGUAGE = 'en-US';
 
 function initI18n(
   detection = detectionOptions,
@@ -74,7 +75,7 @@ function initI18n(
       // init i18next
       // for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        fallbackLng: 'en-US',
+        fallbackLng: DEFAULT_LANGUAGE,
         saveMissing: apiKeyAvailable,
         debug: debugMode,
         keySeparator: false,
@@ -111,7 +112,7 @@ function initI18n(
       // init i18next
       // for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        fallbackLng: 'en-US',
+        fallbackLng: DEFAULT_LANGUAGE,
         resources: locales,
         debug: debugMode,
         keySeparator: false,
@@ -136,5 +137,6 @@ customDebug(`version ${pkg.version} loaded.`, 'info');
 i18n.initializing = initI18n();
 i18n.initI18n = initI18n;
 i18n.addLocales = addLocales;
+i18n.defaultLanguage = DEFAULT_LANGUAGE;
 
 export default i18n;

platform/i18n/src/locales/ar/UserPreferencesModal.json

@@ -0,0 +1,3 @@
+{
+  "No hotkeys found": "Nenhuma tecla de atalho está configurada para este aplicativo. As teclas de atalho podem ser configuradas no arquivo app-config.js do aplicativo."
+}

platform/i18n/src/locales/ar/index.js

@@ -0,0 +1,7 @@
+import UserPreferencesModal from "./UserPreferencesModal.json";
+
+export default { 
+  'ar': {
+    UserPreferencesModal,
+  }
+};

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

@@ -1,6 +1,9 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
+  "No hotkeys found": "No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.",
   "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "ResetDefaultMessage": "Preferences successfully reset to default. <br /> You must <strong>Save</strong> to perform this action.",
   "Save": "$t(Buttons:Save)",
+  "SaveMessage": "Preferences saved",
   "User Preferences": "User Preferences"
 }

platform/i18n/src/locales/index.js

@@ -1,3 +1,4 @@
+import ar from './ar/';
 import en_US from './en-US/';
 import es from './es/';
 import ja_JP from './ja-JP/';
@@ -7,6 +8,7 @@ import vi from './vi/';
 import zh from './zh/';
 
 export default {
+  ...ar,
   ...en_US,
   ...es,
   ...ja_JP,

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

@@ -1,6 +1,8 @@
 {
   "Cancel": "Cancelar",
   "Reset to Defaults": "Restaurar Default",
+  "ResetDefaultMessage": "Preferências resetadas com sucesso. <br /> Você deve <strong>Salvar</strong> para que essa ação seja realizada.",
   "Save": "Salvar",
+  "SaveMessage": "Preferências salvas",
   "User Preferences": "Preferências do Usuário"
 }

platform/ui/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.65.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.65.0...@ohif/ui@0.65.1) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
+# [0.65.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.2...@ohif/ui@0.65.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+## [0.64.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.1...@ohif/ui@0.64.2) (2019-11-25)
+
+
+### Bug Fixes
+
+* Issue branch from danny experimental changes pr 1128 ([#1150](https://github.com/OHIF/Viewers/issues/1150)) ([a870b3c](https://github.com/OHIF/Viewers/commit/a870b3cc6056cf824af422e46f1ad674910b534e)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
 ## [0.64.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.0...@ohif/ui@0.64.1) (2019-11-20)
 
 **Note:** Version bump only for package @ohif/ui

platform/ui/package.json

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

platform/ui/src/components/languageSwitcher/LanguageSwitcher.js

@@ -1,14 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import i18n from '@ohif/i18n';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import './LanguageSwitcher.styl';
 import { withTranslation } from '../../contextProviders';
 
-const LanguageSwitcher = () => {
-  const getCurrentLanguage = (language = i18n.language) =>
-    language.split('-')[0];
+const LanguageSwitcher = ({ language, onLanguageChange }) => {
+  const parseLanguage = lang => lang.split('-')[0];
 
-  const [currentLanguage, setCurrentLanguage] = useState(getCurrentLanguage());
   const languages = [
     // TODO: list of available languages should come from i18n.options.resources
     {
@@ -21,46 +19,31 @@ const LanguageSwitcher = () => {
     },
   ];
 
-  const onChange = () => {
+  const onChange = event => {
     const { value } = event.target;
-    const language = getCurrentLanguage(value);
-    setCurrentLanguage(language);
-
-    i18n.init({
-      fallbackLng: language,
-      lng: language,
-    });
+    onLanguageChange(parseLanguage(value));
   };
 
-  useEffect(() => {
-    let mounted = true;
-
-    i18n.on('languageChanged', () => {
-      if (mounted) {
-        setCurrentLanguage(getCurrentLanguage());
-      }
-    });
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
   return (
     <select
       name="language-select"
       id="language-select"
       className="language-select"
-      value={currentLanguage}
+      value={parseLanguage(language)}
       onChange={onChange}
     >
-      {languages.map(language => (
-        <option key={language.value} value={language.value}>
-          {language.label}
+      {languages.map(lng => (
+        <option key={lng.value} value={lng.value}>
+          {lng.label}
         </option>
       ))}
     </select>
   );
 };
 
+LanguageSwitcher.propTypes = {
+  language: PropTypes.string.isRequired,
+  onLanguageChange: PropTypes.func.isRequired,
+};
+
 export default withTranslation('UserPreferencesModal')(LanguageSwitcher);

platform/ui/src/components/simpleDialog/SimpleDialog.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import PropTypes from 'prop-types';
+import { TextInput } from '@ohif/ui';
 
 import './SimpleDialog.styl';
 
@@ -21,6 +22,31 @@ class SimpleDialog extends Component {
     rootClass: '',
   };
 
+  static InputDialog = ({ onSubmit, defaultValue, title, label, onClose }) => {
+    const [value, setValue] = useState(defaultValue);
+
+    const onSubmitHandler = () => {
+      onSubmit(value);
+    };
+
+    return (
+      <div className="InputDialog">
+        <SimpleDialog
+          headerTitle={title}
+          onClose={onClose}
+          onConfirm={onSubmitHandler}
+        >
+          <TextInput
+            type="text"
+            value={value}
+            onChange={event => setValue(event.target.value)}
+            label={label}
+          />
+        </SimpleDialog>
+      </div>
+    );
+  };
+
   render() {
     return (
       <React.Fragment>

platform/ui/src/components/simpleDialog/SimpleDialog.styl

@@ -1,6 +1,10 @@
 @import './../../design/styles/common/button.styl'
 @import './../../design/styles/common/global.styl'
 
+.InputDialog
+  .simpleDialog
+    position: relative
+
 .simpleDialog
   position: fixed;
   top: 0px;

platform/ui/src/components/studyList/CustomDateRangePicker.js

@@ -131,7 +131,6 @@ CustomDateRangePicker.propTypes = {
       end: PropTypes.required,
     })
   ),
-  autoFocus: PropTypes.bool.isRequired,
   onDatesChange: PropTypes.func.isRequired,
   startDate: PropTypes.instanceOf(Date),
   endDate: PropTypes.instanceOf(Date),

platform/ui/src/components/studyList/StudyList.js

@@ -3,11 +3,22 @@ import './StudyList.styl';
 import React from 'react';
 import classNames from 'classnames';
 import TableSearchFilter from './TableSearchFilter.js';
-import useMedia from '../../hooks/useMedia.js';
 import PropTypes from 'prop-types';
 import { StudyListLoadingText } from './StudyListLoadingText.js';
-import { withTranslation } from '../../contextProviders';
+import { useTranslation } from 'react-i18next';
 
+const getContentFromUseMediaValue = (
+  displaySize,
+  contentArrayMap,
+  defaultContent
+) => {
+  const content =
+    displaySize in contentArrayMap
+      ? contentArrayMap[displaySize]
+      : defaultContent;
+
+  return content;
+};
 /**
  *
  *
@@ -24,9 +35,10 @@ function StudyList(props) {
     filterValues,
     onFilterChange: handleFilterChange,
     onSelectItem: handleSelectItem,
-    t,
     studyListDateFilterNumDays,
+    displaySize,
   } = props;
+  const { t, ready: translationsAreReady } = useTranslation('StudyList');
 
   const largeTableMeta = [
     {
@@ -69,13 +81,13 @@ function StudyList(props) {
 
   const mediumTableMeta = [
     {
-      displayText: 'Patient / MRN',
+      displayText: `${t('PatientName')} / ${t('MRN')}`,
       fieldName: 'patientNameOrId',
       inputType: 'text',
       size: 250,
     },
     {
-      displayText: 'Description',
+      displayText: t('Description'),
       fieldName: 'accessionOrModalityOrDescription',
       inputType: 'text',
       size: 350,
@@ -90,16 +102,16 @@ function StudyList(props) {
 
   const smallTableMeta = [
     {
-      displayText: 'Search',
+      displayText: t('Search'),
       fieldName: 'allFields',
       inputType: 'text',
       size: 100,
     },
   ];
 
-  const tableMeta = useMedia(
-    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
-    [largeTableMeta, mediumTableMeta, smallTableMeta],
+  const tableMeta = getContentFromUseMediaValue(
+    displaySize,
+    { large: largeTableMeta, medium: mediumTableMeta, small: smallTableMeta },
     smallTableMeta
   );
 
@@ -107,7 +119,7 @@ function StudyList(props) {
     .map(field => field.size)
     .reduce((prev, next) => prev + next);
 
-  return (
+  return translationsAreReady ? (
     <table className="table table--striped table--hoverable">
       <colgroup>
         {tableMeta.map((field, i) => {
@@ -175,12 +187,12 @@ function StudyList(props) {
               studyDate={study.studyDate}
               studyDescription={study.studyDescription || ''}
               studyInstanceUid={study.studyInstanceUid}
-              t={t}
+              displaySize={displaySize}
             />
           ))}
       </tbody>
     </table>
-  );
+  ) : null;
 }
 
 StudyList.propTypes = {
@@ -205,9 +217,12 @@ StudyList.propTypes = {
     patientNameOrId: PropTypes.string.isRequired,
     accessionOrModalityOrDescription: PropTypes.string.isRequired,
     allFields: PropTypes.string.isRequired,
+    studyDateTo: PropTypes.any,
+    studyDateFrom: PropTypes.any,
   }).isRequired,
   onFilterChange: PropTypes.func.isRequired,
   studyListDateFilterNumDays: PropTypes.number,
+  displaySize: PropTypes.string,
 };
 
 StudyList.defaultProps = {};
@@ -223,9 +238,11 @@ function TableRow(props) {
     studyDescription,
     studyInstanceUid,
     onClick: handleClick,
-    t,
+    displaySize,
   } = props;
 
+  const { t } = useTranslation('StudyList');
+
   const largeRowTemplate = (
     <tr
       onClick={() => handleClick(studyInstanceUid)}
@@ -360,9 +377,13 @@ function TableRow(props) {
     </tr>
   );
 
-  const rowTemplate = useMedia(
-    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
-    [largeRowTemplate, mediumRowTemplate, smallRowTemplate],
+  const rowTemplate = getContentFromUseMediaValue(
+    displaySize,
+    {
+      large: largeRowTemplate,
+      medium: mediumRowTemplate,
+      small: smallRowTemplate,
+    },
     smallRowTemplate
   );
 
@@ -378,11 +399,11 @@ TableRow.propTypes = {
   studyDate: PropTypes.string.isRequired,
   studyDescription: PropTypes.string.isRequired,
   studyInstanceUid: PropTypes.string.isRequired,
+  displaySize: PropTypes.string,
 };
 
 TableRow.defaultProps = {
   isHighlighted: false,
 };
 
-const connectedComponent = withTranslation('StudyList')(StudyList);
-export { connectedComponent as StudyList };
+export { StudyList };

platform/ui/src/components/studyList/TableSearchFilter.js

@@ -6,6 +6,22 @@ import CustomDateRangePicker from './CustomDateRangePicker.js';
 import { Icon } from './../../elements/Icon';
 import { useTranslation } from 'react-i18next';
 
+const getDateEntry = (datePicked, rangeDatePicked) => {
+  return rangeDatePicked || datePicked || null;
+};
+
+const getDateEntryFromRange = (today, numOfDays, edge = 'start') => {
+  if (typeof numOfDays !== 'number') {
+    return;
+  }
+
+  if (edge === 'end') {
+    return today;
+  } else {
+    today.subtract(numOfDays, 'days');
+  }
+};
+
 function TableSearchFilter(props) {
   const {
     meta,
@@ -17,20 +33,30 @@ function TableSearchFilter(props) {
     // TODO: Rename
     studyListDateFilterNumDays,
   } = props;
+
+  const { studyDateTo, studyDateFrom } = values || {};
   const [focusedInput, setFocusedInput] = useState(null);
-  const [t] = useTranslation(); // 'Common'?
+  const { t, ready: translationsAreReady } = useTranslation('Common');
 
   const sortIcons = ['sort', 'sort-up', 'sort-down'];
   const sortIconForSortField =
     sortDirection === 'asc' ? sortIcons[1] : sortIcons[2];
+
   const today = moment();
   const lastWeek = moment().subtract(7, 'day');
   const lastMonth = moment().subtract(1, 'month');
-  const defaultStartDate = moment().subtract(
+
+  const defaultStartDate = getDateEntryFromRange(
+    today,
     studyListDateFilterNumDays,
-    'days'
+    'start'
   );
-  const defaultEndDate = today;
+  const defaultEndDate = getDateEntryFromRange(
+    today,
+    studyListDateFilterNumDays,
+    'end'
+  );
+
   const studyDatePresets = [
     {
       text: t('Today'),
@@ -49,56 +75,58 @@ function TableSearchFilter(props) {
     },
   ];
 
-  return meta.map((field, i) => {
-    const { displayText, fieldName, inputType } = field;
-    const isSortField = sortFieldName === fieldName;
-    const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];
+  return translationsAreReady
+    ? meta.map((field, i) => {
+        const { displayText, fieldName, inputType } = field;
+        const isSortField = sortFieldName === fieldName;
+        const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];
 
-    return (
-      <th key={`${fieldName}-${i}`}>
-        <label
-          htmlFor={`filter-${fieldName}`}
-          onClick={() => onSort(fieldName)}
-        >
-          {`${displayText} `}
-          <Icon name={sortIcon} style={{ fontSize: '12px' }} />
-        </label>
-        {inputType === 'text' && (
-          <input
-            type="text"
-            id={`filter-${fieldName}`}
-            className="form-control studylist-search"
-            value={values[fieldName]}
-            onChange={e => onValueChange(fieldName, e.target.value)}
-          />
-        )}
-        {inputType === 'date-range' && (
-          // https://github.com/airbnb/react-dates
-          <CustomDateRangePicker
-            // Required
-            startDate={studyListDateFilterNumDays ? defaultStartDate : null}
-            startDateId="start-date"
-            endDate={studyListDateFilterNumDays ? defaultEndDate : null}
-            endDateId="end-date"
-            // TODO: We need a dynamic way to determine which fields values to update
-            onDatesChange={({ startDate, endDate, preset = false }) => {
-              onValueChange('studyDateFrom', startDate);
-              onValueChange('studyDateTo', endDate);
-            }}
-            focusedInput={focusedInput}
-            onFocusChange={updatedVal => setFocusedInput(updatedVal)}
-            // Optional
-            numberOfMonths={1} // For med and small screens? 2 for large?
-            showClearDates={true}
-            anchorDirection="left"
-            presets={studyDatePresets}
-            hideKeyboardShortcutsPanel={true}
-            isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
-          />
-        )}
-      </th>
-    );
-  });
+        return (
+          <th key={`${fieldName}-${i}`}>
+            <label
+              htmlFor={`filter-${fieldName}`}
+              onClick={() => onSort(fieldName)}
+            >
+              {`${displayText}`}
+              <Icon name={sortIcon} style={{ fontSize: '12px' }} />
+            </label>
+            {inputType === 'text' && (
+              <input
+                type="text"
+                id={`filter-${fieldName}`}
+                className="form-control studylist-search"
+                value={values[fieldName]}
+                onChange={e => onValueChange(fieldName, e.target.value)}
+              />
+            )}
+            {inputType === 'date-range' && (
+              // https://github.com/airbnb/react-dates
+              <CustomDateRangePicker
+                // Required
+                startDate={getDateEntry(studyDateFrom, defaultStartDate)}
+                startDateId="start-date"
+                endDate={getDateEntry(studyDateTo, defaultEndDate)}
+                endDateId="end-date"
+                // TODO: We need a dynamic way to determine which fields values to update
+                onDatesChange={({ startDate, endDate, preset = false }) => {
+                  onValueChange('studyDateFrom', startDate);
+                  onValueChange('studyDateTo', endDate);
+                }}
+                focusedInput={focusedInput}
+                onFocusChange={updatedVal => setFocusedInput(updatedVal)}
+                // Optional
+                numberOfMonths={1} // For med and small screens? 2 for large?
+                showClearDates={true}
+                anchorDirection="left"
+                presets={studyDatePresets}
+                hideKeyboardShortcutsPanel={true}
+                isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
+              />
+            )}
+          </th>
+        );
+      })
+    : null;
 }
 
 TableSearchFilter.propTypes = {

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

@@ -1,17 +1,57 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import LanguageSwitcher from '../languageSwitcher';
+import i18n from '@ohif/i18n';
 
-export class GeneralPreferences extends Component {
-  render() {
-    return (
-      <div className="general-preferences-wrapper">
-        <div className="col-sm-3">
-          <label htmlFor="language-select" className="p-r-1">
-            Language
-          </label>
-          <LanguageSwitcher />
-        </div>
+/**
+ * General Preferences tab
+ */
+
+/**
+ * General Preferences tab
+ * It renders the General Preferences content
+ *
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.generalPreferences Data for initial state
+ * @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
+ * @param {function} props.onTabErrorChanged Callback Function in case any error on tab
+ */
+function GeneralPreferences({
+  generalPreferences,
+  name,
+  onTabStateChanged,
+  onTabErrorChanged,
+}) {
+  const { language = i18n.language } = generalPreferences;
+
+  const onLanguageChange = language => {
+    onTabStateChanged(name, {
+      generalPreferences: { ...generalPreferences, language },
+    });
+  };
+
+  return (
+    <div className="general-preferences-wrapper">
+      <div className="col-sm-3">
+        <label htmlFor="language-select" className="p-r-1">
+          Language
+        </label>
+        <LanguageSwitcher
+          language={language}
+          onLanguageChange={onLanguageChange}
+        />
       </div>
-    );
-  }
+    </div>
+  );
 }
+
+GeneralPreferences.propTypes = {
+  generalPreferences: PropTypes.any,
+  name: PropTypes.string,
+  onTabStateChanged: PropTypes.func,
+  onTabErrorChanged: PropTypes.func,
+};
+
+export { GeneralPreferences };

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

@@ -1,80 +1,238 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
 import './HotKeysPreferences.styl';
-import React, { Component } from 'react';
+
 import {
   allowedKeys,
   disallowedCombinations,
   specialKeys,
 } from './hotKeysConfig.js';
 
-import PropTypes from 'prop-types';
+import isEqual from 'lodash.isequal';
 
-export class HotKeysPreferences extends Component {
-  static propTypes = {
-    hotkeyDefinitions: PropTypes.arrayOf(
-      PropTypes.shape({
-        commandName: PropTypes.string,
-        keys: PropTypes.arrayOf(PropTypes.string),
-        label: PropTypes.string,
-      })
-    ).isRequired,
+const getKeysPressedArray = keyDownEvent => {
+  const keysPressedArray = [];
+  const { ctrlKey, altKey, shiftKey } = keyDownEvent;
+
+  if (ctrlKey && !altKey) {
+    keysPressedArray.push('ctrl');
+  }
+
+  if (shiftKey && !altKey) {
+    keysPressedArray.push('shift');
+  }
+
+  if (altKey && !ctrlKey) {
+    keysPressedArray.push('alt');
+  }
+
+  return keysPressedArray;
+};
+
+const findConflictingCommand = (
+  originalHotKeys,
+  currentCommandName,
+  currentHotKeys
+) => {
+  let firstConflictingCommand = undefined;
+
+  for (const commandName in originalHotKeys) {
+    const toolHotKeys = originalHotKeys[commandName].keys;
+
+    if (
+      isEqual(toolHotKeys, currentHotKeys) &&
+      commandName !== currentCommandName
+    ) {
+      firstConflictingCommand = originalHotKeys[commandName];
+      break;
+    }
+  }
+
+  return firstConflictingCommand;
+};
+
+/**
+ * Splits given keysObj into arrays. Each array item will be a representation of column
+ * @param {obj} keysObj objects to be splitted into columns
+ * @param {number} columnSize How many rows per column
+ */
+const getHotKeysArrayColumns = (keysObj = {}, columnSize) => {
+  if (isNaN(columnSize)) {
+    return keysObj;
+  }
+
+  const keys = Object.keys(keysObj);
+  const keysValues = Object.values(keysObj);
+  const keysLength = keys.length;
+
+  // Columns from left should be bigger;
+  let currentColumn = 0;
+  const dividedKeys = [];
+
+  for (
+    let it = 0;
+    it < keysLength;
+    it++, it % columnSize === 0 ? currentColumn++ : currentColumn
+  ) {
+    if (!dividedKeys[currentColumn]) {
+      dividedKeys[currentColumn] = [];
+    }
+
+    dividedKeys[currentColumn][keys[it]] = keysValues[it];
+  }
+
+  return dividedKeys;
+};
+
+const NO_FIELD_ERROR_MESSAGE = undefined;
+const formatPressedKeys = pressedKeysArray => pressedKeysArray.join('+');
+const unFormatPressedKeys = (pressedKeysStr = '') => pressedKeysStr.split('+');
+const inputValidators = (
+  commandName,
+  inputValue,
+  pressedKeys,
+  lastPressedKey,
+  originalHotKeys
+) => {
+  let hasError = false;
+  let errorMessage = NO_FIELD_ERROR_MESSAGE;
+
+  const modifierValidator = ({ lastPressedKey }) => {
+    // Check if it has a valid modifier
+    const isModifier = ['ctrl', 'alt', 'shift'].includes(lastPressedKey);
+    if (isModifier) {
+      hasError = true;
+      errorMessage =
+        "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut";
+      return {
+        hasError,
+        errorMessage,
+      };
+    }
   };
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hotKeys: this.props.hotkeyDefinitions,
-      errorMessages: {},
-    };
-
-    this.onInputKeyDown = this.onInputKeyDown.bind(this);
-  }
-
-  /**
-   * Normalizes the keys used in a KeyPress event and returns an array of the
-   * keys pressed
-   *
-   * @param {KeyDownEvent} keyDownEvent
-   * @returns {string[]}
-   */
-  getKeysPressedArray(keyDownEvent) {
-    const keysPressedArray = [];
-    const { ctrlKey, altKey, shiftKey } = keyDownEvent;
-
-    if (ctrlKey && !altKey) {
-      keysPressedArray.push('ctrl');
+  const emptyValidator = ({ inputValue }) => {
+    if (!inputValue) {
+      hasError = true;
+      errorMessage = "Field can't be empty.";
+      return {
+        hasError,
+        errorMessage,
+      };
     }
-
-    if (shiftKey && !altKey) {
-      keysPressedArray.push('shift');
+  };
+  const conflictingValidator = ({
+    commandName,
+    pressedKeys,
+    originalHotKeys,
+  }) => {
+    const conflictingCommand = findConflictingCommand(
+      originalHotKeys,
+      commandName,
+      pressedKeys
+    );
+    if (conflictingCommand) {
+      hasError = true;
+      errorMessage = `"${conflictingCommand.label}" is already using the "${pressedKeys}" shortcut.`;
+      return {
+        hasError,
+        errorMessage,
+      };
     }
+  };
 
-    if (altKey && !ctrlKey) {
-      keysPressedArray.push('alt');
+  const disallowedValidator = ({ inputValue, pressedKeys, lastPressedKey }) => {
+    const modifierCommand = formatPressedKeys(
+      pressedKeys.slice(0, pressedKeys.length - 1)
+    );
+
+    const disallowedCombination = disallowedCombinations[modifierCommand];
+    const hasDisallowedCombinations = disallowedCombination
+      ? disallowedCombination.includes(lastPressedKey)
+      : false;
+
+    if (hasDisallowedCombinations) {
+      hasError = true;
+      errorMessage = `"${inputValue}" shortcut combination is not allowed`;
+      return {
+        hasError,
+        errorMessage,
+      };
     }
+  };
 
-    return keysPressedArray;
-  }
+  const validators = [
+    emptyValidator,
+    modifierValidator,
+    conflictingValidator,
+    disallowedValidator,
+  ];
 
-  getConflictingCommand(currentCommandName, currentHotKeys) {
-    return this.state.hotKeys.find((tool, index) => {
-      const toolHotKeys = tool.keys[0];
-      return (
-        toolHotKeys &&
-        toolHotKeys === currentHotKeys &&
-        tool.commandName !== currentCommandName
-      );
+  for (const validator of validators) {
+    const validation = validator({
+      commandName,
+      inputValue,
+      pressedKeys,
+      lastPressedKey,
+      originalHotKeys,
     });
+    if (validation && validation.hasError) {
+      return validation;
+    }
   }
 
-  /**
-   *
-   * @param {String} commandName
-   * @param {KeyDownEvent} keyDownEvent
-   * @param {Boolean} [displayPressedKey=false]
-   */
-  updateInputText(commandName, keyDownEvent, displayPressedKey = false) {
-    const pressedKeys = this.getKeysPressedArray(keyDownEvent);
+  // validation has passed successfully
+  return {
+    hasError,
+    errorMessage,
+  };
+};
+
+/**
+ * HotKeysPreferencesRow
+ * Renders row for hotkey preference
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.commandName command name associated to given row
+ * @param {string[]} props.hotkeys keys associated to given command
+ * @param {object} props.originalHotKeys original hotkeys values
+ * @param {function} props.onSuccessChanged Callback function to communicate parent in case its states changes
+ * @param {function} props.onFailureChanged Callback Function in case any error on row
+ */
+function HotKeyPreferencesRow({
+  commandName,
+  hotkeys,
+  label,
+  originalHotKeys,
+  tabError,
+  onSuccessChanged,
+  onFailureChanged,
+}) {
+  const [inputValue, setInputValue] = useState(formatPressedKeys(hotkeys));
+  const [error, setError] = useState(false);
+
+  const [fieldErrorMessage, setFieldErrorMessage] = useState(
+    NO_FIELD_ERROR_MESSAGE
+  );
+
+  // reset error count if tab has no errors
+  useEffect(() => {
+    if (!tabError) {
+      setError(false);
+      setFieldErrorMessage(NO_FIELD_ERROR_MESSAGE);
+      setInputValue(formatPressedKeys(hotkeys));
+    }
+  }, [tabError]);
+
+  // update state values if props changes
+  useEffect(() => {
+    setInputValue(formatPressedKeys(hotkeys));
+  }, [hotkeys]);
+
+  const updateInputText = (keyDownEvent, displayPressedKey = false) => {
+    const pressedKeys = getKeysPressedArray(keyDownEvent);
 
     if (displayPressedKey) {
       const specialKeyName = specialKeys[keyDownEvent.which];
@@ -82,183 +240,213 @@ export class HotKeysPreferences extends Component {
         specialKeyName ||
         keyDownEvent.key ||
         String.fromCharCode(keyDownEvent.keyCode);
+
+      // ensure lowerCase
       pressedKeys.push(keyName.toLowerCase());
     }
 
-    this.updateHotKeysState(commandName, pressedKeys.join('+'));
-  }
+    setInputValue(formatPressedKeys(pressedKeys));
+  };
 
-  updateHotKeysState(commandName, keys) {
-    const hotKeys = this.state.hotKeys;
-    const hotKeyIndex = this.state.hotKeys.findIndex(
-      x => x.commandName === commandName
+  // validate input value
+  const validateInput = () => {
+    const pressedKeys = unFormatPressedKeys(inputValue);
+    const lastPressedKey = pressedKeys[pressedKeys.length - 1];
+
+    const {
+      hasError = false,
+      errorMessage = NO_FIELD_ERROR_MESSAGE,
+    } = inputValidators(
+      commandName,
+      inputValue,
+      pressedKeys,
+      lastPressedKey,
+      originalHotKeys
     );
-    hotKeys[hotKeyIndex].keys[0] = keys;
-    this.setState({ hotKeys });
-  }
 
-  updateErrorsState(toolKey, errorMessage) {
-    const errorMessages = this.state.errorMessages;
-    errorMessages[toolKey] = errorMessage;
-    this.setState({ errorMessages });
-  }
+    if (hasError) {
+      setInputValue('');
+    } else {
+      onSuccessChanged([inputValue]);
+    }
 
-  onInputKeyDown(event, commandName) {
+    if (hasError !== error) {
+      setError(hasError);
+    }
+
+    setFieldErrorMessage(errorMessage);
+  };
+
+  useEffect(() => {
+    onFailureChanged(error);
+  }, [error]);
+
+  const onInputKeyDown = event => {
     // Prevent ESC key from propagating and closing the modal
     if (event.key === 'Escape') {
       event.stopPropagation();
     }
 
-    if (allowedKeys.includes(event.keyCode)) {
-      this.updateInputText(commandName, event, true);
-    } else {
-      this.updateInputText(commandName, event, false);
-    }
-
+    updateInputText(event, allowedKeys.includes(event.keyCode));
     event.preventDefault();
-  }
+  };
 
-  onChange(event, commandName) {
-    if (event.ctrlKey || event.altKey || event.shiftKey) {
-      return;
+  return (
+    <tr key={commandName}>
+      <td className="text-right p-r-1">{label}</td>
+      <td width="200">
+        <label
+          className={`wrapperLabel ${
+            fieldErrorMessage !== undefined ? 'state-error' : ''
+          } `}
+          data-key="defaultTool"
+        >
+          <input
+            readOnly={true}
+            type="text"
+            value={inputValue}
+            className="form-control hotkey text-center"
+            onKeyDown={onInputKeyDown}
+            onBlur={validateInput}
+          />
+          <span className="wrapperText" />
+          <span className="errorMessage">{fieldErrorMessage}</span>
+        </label>
+      </td>
+    </tr>
+  );
+}
+
+HotKeyPreferencesRow.propTypes = {
+  commandName: PropTypes.string.isRequired,
+  hotkeys: PropTypes.array.isRequired,
+  label: PropTypes.string.isRequired,
+  originalHotKeys: PropTypes.object.isRequired,
+  tabError: PropTypes.bool.isRequired,
+  onSuccessChanged: PropTypes.func.isRequired,
+  onFailureChanged: PropTypes.func.isRequired,
+};
+
+/**
+ * HotKeysPreferences tab
+ * It renders all hotkeys displayed into columns/rows
+ *
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.hotkeyDefinitions Data for initial state
+ * @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
+ * @param {function} props.onTabErrorChanged Callback Function in case any error on tab
+ */
+function HotKeysPreferences({
+  hotkeyDefinitions,
+  name,
+  tabError,
+  onTabStateChanged,
+  onTabErrorChanged,
+}) {
+  const [tabState, setTabState] = useState(hotkeyDefinitions);
+  const [tabErrorCounter, setTabErrorCounter] = useState(0);
+
+  const [numColumns] = useState(2);
+  const [columnSize] = useState(() =>
+    Math.ceil(Object.keys(tabState || {}).length / numColumns)
+  );
+
+  const splittedHotKeys = getHotKeysArrayColumns(tabState, columnSize);
+
+  const onHotKeyChanged = (commandName, hotkeyDefinition, keys) => {
+    const newState = {
+      ...tabState,
+      [commandName]: { ...hotkeyDefinition, keys },
+    };
+    setTabState(newState);
+    onTabStateChanged(name, { hotkeyDefinitions: newState });
+  };
+
+  const onErrorChanged = (toInc = true) => {
+    const increment = toInc ? 1 : -1;
+    const newValue = tabErrorCounter + increment;
+    if (newValue >= 0) {
+      setTabErrorCounter(newValue);
+    }
+  };
+
+  // reset error count if tab has no errors
+  useEffect(() => {
+    if (!tabError) {
+      setTabErrorCounter(0);
+      // update tab state
+      setTabState({ ...hotkeyDefinitions });
+    }
+  }, [tabError]);
+
+  // tell parent to update its state
+  useEffect(() => {
+    if (tabErrorCounter === 0) {
+      onTabErrorChanged(name, false);
     }
 
-    const hotKeyIndex = this.state.hotKeys.findIndex(
-      x => x.commandName === commandName
-    );
-    const hotKey = this.state.hotKeys[hotKeyIndex];
-    const keys = hotKey.keys[0];
-    const pressedKeys = keys.split('+');
-    const lastPressedKey = pressedKeys[pressedKeys.length - 1].toLowerCase();
+    if (tabErrorCounter === 1) {
+      onTabErrorChanged(name, true);
+    }
+  }, [tabErrorCounter]);
 
-    // clear the prior errors
-    this.setState({ errorMessages: {} }, () => {
-      // Check if it has a valid modifier
-      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"
-        );
-        return;
-      }
+  // update local state if parent updates
+  useEffect(() => {
+    setTabState({ ...hotkeyDefinitions });
+  }, [hotkeyDefinitions]);
 
-      /*
-       * Check if it has some conflict
-       */
-      const conflictedCommand = this.getConflictingCommand(commandName, keys);
-      if (conflictedCommand) {
-        this.updateHotKeysState(commandName, '');
-        this.updateErrorsState(
-          commandName,
-          `"${conflictedCommand.label}" is already using the "${keys}" shortcut.`
-        );
-        return;
-      }
-
-      /*
-       * Check if is a valid combination
-       */
-      const modifierCommand = pressedKeys
-        .slice(0, pressedKeys.length - 1)
-        .join('+')
-        .toLowerCase();
-
-      const disallowedCombination = disallowedCombinations[modifierCommand];
-      const hasDisallowedCombinations = disallowedCombination
-        ? disallowedCombination.includes(lastPressedKey)
-        : false;
-
-      if (hasDisallowedCombinations) {
-        this.updateHotKeysState(commandName, '');
-        this.updateErrorsState(
-          commandName,
-          `"${pressedKeys.join('+')}" shortcut combination is not allowed`
-        );
-        return;
-      }
-    });
-  }
-
-  renderRow({ commandName, label, keys }) {
-    return (
-      <tr key={commandName}>
-        <td className="text-right p-r-1">{label}</td>
-        <td width="200">
-          <label
-            className={`wrapperLabel ${
-              this.state.errorMessages[commandName] !== undefined
-                ? 'state-error'
-                : ''
-            } `}
-            ref={input => (this[commandName] = input)}
-            data-key="defaultTool"
-          >
-            <input
-              readOnly={true}
-              type="text"
-              value={keys[0]}
-              vali="true"
-              className="form-control hotkey text-center"
-              onKeyDown={event => this.onInputKeyDown(event, commandName)}
-              onKeyUp={event => this.onChange(event, commandName)}
-            />
-            <span className="wrapperText" />
-            <span className="errorMessage">
-              {this.state.errorMessages[commandName]}
-            </span>
-          </label>
-        </td>
-      </tr>
-    );
-  }
-
-  render() {
-    const halfWayThough = Math.floor(this.state.hotKeys.length / 2);
-    const firstHalfHotkeys = this.state.hotKeys.slice(0, halfWayThough);
-    const secondHalfHotkeys = this.state.hotKeys.slice(
-      halfWayThough,
-      this.state.hotKeys.length
-    );
-
-    return this.state.hotKeys.length > 0 ? (
-      <div className="HotKeysPreferences">
-        {/* <!-- Column 1 --> */}
-        <div className="column">
-          <table className="full-width">
-            <thead>
-              <tr>
-                <th className="text-right p-r-1">Function</th>
-                <th className="text-center">Shortcut</th>
-              </tr>
-            </thead>
-            <tbody>
-              {firstHalfHotkeys.map(hotkeyDefinition =>
-                this.renderRow(hotkeyDefinition)
-              )}
-            </tbody>
-          </table>
-        </div>
-        {/* <!-- Column 2 --> */}
-        <div className="column">
-          <table className="full-width">
-            <thead>
-              <tr>
-                <th className="text-right p-r-1">Function</th>
-                <th className="text-center">Shortcut</th>
-              </tr>
-            </thead>
-            <tbody>
-              {secondHalfHotkeys.map(hotkeyDefinition =>
-                this.renderRow(hotkeyDefinition)
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    ) : (
-      <p>{`No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.`}</p>
-    );
-  }
+  return (
+    <div className="HotKeysPreferences">
+      {splittedHotKeys.length > 0
+        ? splittedHotKeys.map((columnHotKeys, index) => {
+            return (
+              <div className="column" key={index}>
+                <table className="full-width">
+                  <thead>
+                    <tr>
+                      <th className="text-right p-r-1">Function</th>
+                      <th className="text-center">Shortcut</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.entries(columnHotKeys).map(
+                      hotkeyDefinitionTuple => (
+                        <HotKeyPreferencesRow
+                          key={hotkeyDefinitionTuple[0]}
+                          commandName={hotkeyDefinitionTuple[0]}
+                          hotkeys={hotkeyDefinitionTuple[1].keys}
+                          label={hotkeyDefinitionTuple[1].label}
+                          originalHotKeys={tabState}
+                          tabError={tabError}
+                          onSuccessChanged={keys =>
+                            onHotKeyChanged(
+                              hotkeyDefinitionTuple[0],
+                              hotkeyDefinitionTuple[1],
+                              keys
+                            )
+                          }
+                          onFailureChanged={onErrorChanged}
+                        ></HotKeyPreferencesRow>
+                      )
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            );
+          })
+        : null}
+    </div>
+  );
 }
+
+HotKeysPreferences.propTypes = {
+  hotkeyDefinitions: PropTypes.any,
+  name: PropTypes.string,
+  tabError: PropTypes.bool,
+  onTabStateChanged: PropTypes.func,
+  onTabErrorChanged: PropTypes.func,
+};
+
+export { HotKeysPreferences };

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

@@ -10,7 +10,7 @@ export class UserPreferences extends Component {
   static defaultProps = {
     hotkeyDefinitions: [],
     windowLevelData: {},
-    generalData: {},
+    generalPreferences: {},
   };
 
   // TODO: Make this more generic. Tabs should not be restricted to these entries
@@ -23,7 +23,8 @@ export class UserPreferences extends Component {
       })
     ).isRequired,
     windowLevelData: PropTypes.object.isRequired,
-    generalData: PropTypes.object.isRequired,
+    generalPreferences: PropTypes.object.isRequired,
+    updatePropValue: PropTypes.func.isRequired,
   };
 
   state = {
@@ -64,7 +65,10 @@ export class UserPreferences extends Component {
     return (
       <form className="form-themed themed">
         <div className="form-content">
-          <GeneralPreferences generalData={this.props.generalData} />
+          <GeneralPreferences
+            generalPreferences={this.props.generalPreferences}
+            updatePropValue={this.props.updatePropValue}
+          />
         </div>
       </form>
     );

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

@@ -1,101 +1,219 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSnackbarContext } from '@ohif/ui';
+
 import './UserPreferencesForm.styl';
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from '../../contextProviders';
+import { useTranslation } from 'react-i18next';
 
-import cloneDeep from 'lodash.clonedeep';
-import isEqual from 'lodash.isequal';
-import { UserPreferences } from './UserPreferences';
+// Tabs Component wrapper
+import { UserPreferencesTabs } from './UserPreferencesTabs';
 
-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.arrayOf(
-      PropTypes.shape({
-        commandName: PropTypes.string,
-        keys: PropTypes.arrayOf(PropTypes.string),
-        label: PropTypes.string,
-      })
-    ).isRequired,
-    t: PropTypes.func,
+// Tabs
+import { HotKeysPreferences } from './HotKeysPreferences';
+import { WindowLevelPreferences } from './WindowLevelPreferences';
+import { GeneralPreferences } from './GeneralPreferences';
+
+/**
+ @typedef TabObject
+ @type {Object}
+ @property {string} name Name for given tab
+ @property {ReactComponent} Component React component for given tab.
+ @property {object} props Props State for given tab component
+ @property {boolean} [hidden] To hidden tab or not
+ */
+
+/**
+ * Create tabs obj.
+ * @returns {TabObject[]} Array of TabObjs.
+ */
+const createTabs = () => {
+  return [
+    {
+      name: 'Hotkeys',
+      Component: HotKeysPreferences,
+      props: {},
+    },
+    {
+      name: 'General',
+      Component: GeneralPreferences,
+      props: {},
+    },
+    {
+      name: 'Window Level',
+      Component: WindowLevelPreferences,
+      props: {},
+      hidden: true,
+    },
+  ];
+};
+
+/**
+ * Main form component to render preferences tabs and buttons
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.hotkeyDefinitions Hotkeys Data
+ * @param {object} props.windowLevelData Window level data
+ * @param {function} props.onSave Callback function when saving
+ * @param {function} props.onClose Callback function when closing
+ * @param {function} props.onResetToDefaults Callback function when resetting
+ */
+function UserPreferencesForm({
+  onClose,
+  onSave,
+  onResetToDefaults,
+  windowLevelData,
+  hotkeyDefinitions,
+  generalPreferences,
+  hotkeysManager,
+  defaultLanguage,
+  hotkeyDefaults,
+}) {
+  const [tabs, setTabs] = useState(createTabs());
+
+  const createTabsState = (
+    windowLevelData,
+    hotkeyDefinitions,
+    generalPreferences
+  ) => {
+    return {
+      Hotkeys: { hotkeyDefinitions },
+      'Window Level': { windowLevelData },
+      General: { generalPreferences },
+    };
   };
 
-  constructor(props) {
-    super(props);
+  const [tabsState, setTabsState] = useState(
+    createTabsState(windowLevelData, hotkeyDefinitions, generalPreferences)
+  );
 
-    this.state = {
-      windowLevelData: cloneDeep(props.windowLevelData),
-      hotkeyDefinitions: cloneDeep(props.hotkeyDefinitions),
-    };
-  }
+  const [tabsError, setTabsError] = useState(
+    tabs.reduce((acc, tab) => {
+      acc[tab.name] = false;
+      return acc;
+    }, {})
+  );
 
-  save = () => {
-    this.props.onSave({
-      windowLevelData: this.state.windowLevelData,
-      hotkeyDefinitions: this.state.hotkeyDefinitions,
+  const snackbar = useSnackbarContext();
+
+  const { t, ready: translationsAreReady } = useTranslation(
+    'UserPreferencesModal'
+  );
+
+  const onTabStateChanged = (tabName, newState) => {
+    setTabsState({ ...tabsState, [tabName]: newState });
+  };
+
+  const onTabErrorChanged = (tabName, hasError) => {
+    setTabsError({ ...tabsError, [tabName]: hasError });
+  };
+
+  const hasAnyError = () => {
+    return Object.values(tabsError).reduce((acc, value) => acc || value);
+  };
+
+  const onResetPreferences = () => {
+    const defaultHotKeyDefitions = {};
+
+    hotkeyDefaults.map(item => {
+      const { commandName, ...values } = item;
+      defaultHotKeyDefitions[commandName] = { ...values };
+    });
+
+    // update local state
+    setTabsState({
+      ...tabsState,
+      Hotkeys: { hotkeyDefinitions: defaultHotKeyDefitions },
+      General: { generalPreferences: { language: defaultLanguage } },
+    });
+
+    // update tabs state
+    setTabs(createTabs(windowLevelData, hotkeyDefinitions, generalPreferences));
+
+    // reset errors
+    setTabsError(
+      tabs.reduce((acc, tab) => {
+        acc[tab.name] = false;
+        return acc;
+      }, {})
+    );
+
+    snackbar.show({
+      message: (
+        <div dangerouslySetInnerHTML={{ __html: t('ResetDefaultMessage') }} />
+      ),
+      type: 'info',
     });
   };
 
-  componentDidUpdate(prev, next) {
-    const newStateData = {};
+  const onSavePreferences = event => {
+    const toSave = Object.values(tabsState).reduce((acc, tabState) => {
+      return { ...acc, ...tabState };
+    }, {});
 
-    if (!isEqual(prev.windowLevelData, next.windowLevelData)) {
-      newStateData.windowLevelData = prev.windowLevelData;
-    }
+    onSave(toSave);
+    snackbar.show({
+      message: t('SaveMessage'),
+      type: 'success',
+    });
+  };
 
-    if (!isEqual(prev.hotkeyDefinitions, next.hotkeyDefinitions)) {
-      newStateData.hotkeyDefinitions = prev.hotkeyDefinitions;
-    }
+  // update local state if prop values changes
+  useEffect(() => {
+    setTabsState(
+      createTabsState(windowLevelData, hotkeyDefinitions, generalPreferences)
+    );
+  }, [windowLevelData, hotkeyDefinitions, generalPreferences]);
 
-    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"
-            data-cy="reset-default-btn"
-            onClick={this.props.onResetToDefaults}
+  return translationsAreReady ? (
+    <div className="UserPreferencesForm">
+      <UserPreferencesTabs
+        tabs={tabs}
+        tabsState={tabsState}
+        tabsError={tabsError}
+        onTabStateChanged={onTabStateChanged}
+        onTabErrorChanged={onTabErrorChanged}
+      />
+      <div className="footer">
+        <button
+          className="btn btn-danger pull-left"
+          data-cy="reset-default-btn"
+          onClick={onResetPreferences}
+        >
+          {t('Reset to Defaults')}
+        </button>
+        <div>
+          <div
+            onClick={onClose}
+            data-cy="cancel-btn"
+            className="btn btn-default"
           >
-            {this.props.t('Reset to Defaults')}
-          </button>
-          <div>
-            <div
-              onClick={this.props.onClose}
-              className="btn btn-default"
-              data-cy="cancel-btn"
-            >
-              {this.props.t('Cancel')}
-            </div>
-            <button
-              className="btn btn-primary"
-              data-cy="save-btn"
-              onClick={this.save}
-            >
-              {this.props.t('Save')}
-            </button>
+            {t('Cancel')}
           </div>
+          <button
+            className="btn btn-primary"
+            data-cy="save-btn"
+            disabled={hasAnyError()}
+            onClick={onSavePreferences}
+          >
+            {t('Save')}
+          </button>
         </div>
       </div>
-    );
-  }
+    </div>
+  ) : null;
 }
 
-const connectedComponent = withTranslation('UserPreferencesForm')(
-  UserPreferencesForm
-);
-export { connectedComponent as UserPreferencesForm };
-export default connectedComponent;
+UserPreferencesForm.propTypes = {
+  onClose: PropTypes.func,
+  onSave: PropTypes.func,
+  onResetToDefaults: PropTypes.func,
+  windowLevelData: PropTypes.object,
+  hotkeyDefinitions: PropTypes.object,
+  generalPreferences: PropTypes.object,
+  hotkeysManager: PropTypes.object,
+  defaultLanguage: PropTypes.string,
+  hotkeyDefaults: PropTypes.array,
+};
+
+export { UserPreferencesForm };

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

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import './UserPreferencesTabs.styl';
+
+/**
+ * Render tab component
+ * @param {object} tab TabObject containing tab data
+ * @param {function} onTabStateChanged Callback Function in case tab changes its state
+ * @param {function} onTabErrorChanged Callback Function in case any error on tab
+ */
+const renderTab = (
+  tab = {},
+  tabsState,
+  tabsError,
+  onTabStateChanged,
+  onTabErrorChanged
+) => {
+  const { props, Component, name, hidden = false } = tab;
+
+  const tabState = tabsState[name];
+  const tabError = tabsError[name];
+
+  return !hidden ? (
+    <form className="form-themed themed tabs">
+      <div className="form-content">
+        <Component
+          key={name}
+          {...tabState}
+          {...props}
+          name={name}
+          tabError={tabError}
+          onTabStateChanged={onTabStateChanged}
+          onTabErrorChanged={onTabErrorChanged}
+        ></Component>
+      </div>
+    </form>
+  ) : null;
+};
+
+const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
+  return tabs.length > 0
+    ? tabs.map((tab, index) => {
+        const { name, hidden = false } = tab;
+
+        const tabClass =
+          index === activeTabIndex ? 'nav-link active' : 'nav-link';
+        return !hidden ? (
+          <li
+            key={name}
+            onClick={() => {
+              onHeaderChanged(index);
+            }}
+            className={tabClass}
+          >
+            <button>{name}</button>
+          </li>
+        ) : null;
+      })
+    : null;
+};
+/**
+ * Component to render tabs based on currentActiveTabIndex
+ *
+ * In case any tab changes its state this current component tells parent through function callback
+ * @param {object} props Component props
+ */
+function UserPreferencesTabs({
+  tabs,
+  tabsState,
+  tabsError,
+  onTabStateChanged,
+  onTabErrorChanged,
+}) {
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+  return (
+    <div className="UserPreferencesTabs">
+      <div className="UserPreferencesTabs__selector">
+        <div className="dialog-separator-after">
+          <ul className="nav nav-tabs">
+            {renderTabsHeader(tabs, activeTabIndex, setActiveTabIndex)}
+          </ul>
+        </div>
+      </div>
+      {renderTab(
+        tabs[activeTabIndex],
+        tabsState,
+        tabsError,
+        onTabStateChanged,
+        onTabErrorChanged
+      )}
+    </div>
+  );
+}
+
+UserPreferencesTabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  tabsState: PropTypes.object.isRequired,
+  tabsError: PropTypes.object.isRequired,
+  onTabStateChanged: PropTypes.func.isRequired,
+  onTabErrorChanged: PropTypes.func.isRequired,
+};
+
+export { UserPreferencesTabs };

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

@@ -3,7 +3,7 @@
 @import './../../design/styles/common/state.styl'
 @import './../../design/styles/common/global.styl'
 
-.UserPreferences
+.UserPreferencesTabs
   display: flex
   flex-direction: column
 

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

@@ -1,94 +1,132 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+
 import './WindowLevelPreferences.styl';
+/**
+ * WindowLevelPreferencesRow
+ * Renders row for window level preference
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.description description for given preset
+ * @param {number} props.window window value
+ * @param {number} props.level level value
+ * @param {string} props.rowName name of given row to identify it
+ * @param {function} props.onSuccessChanged Callback function to communicate parent in case its states changes
+ */
+function WindowLevelPreferencesRow({
+  description,
+  window,
+  level,
+  rowName,
+  onSuccessChanged,
+  // onFailureChanged
+}) {
+  const [rowState, setRowState] = useState({ description, window, level });
 
-export class WindowLevelPreferences extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      data: this.props.windowLevelData,
-    };
-  }
-
-  static propTypes = {
-    windowLevelData: PropTypes.object.isRequired,
-    onChange: PropTypes.func,
+  const onInputChanged = (event, name) => {
+    const newValue = event.target.value;
+    setRowState({ ...rowState, [name]: newValue });
   };
 
-  onChange(event, key, field) {
-    const data = this.state.data;
-    const entry = data[key];
-    entry[field] = event.target.value;
-    this.setState({ data });
+  useEffect(() => {
+    onSuccessChanged(rowName, rowState);
+  }, [rowState]);
 
-    if (this.props.onChange) {
-      this.props.onChange(data);
-    }
-  }
-
-  getWLPreferencesRows(key) {
-    const entry = this.state.data[key];
+  const renderTd = (value, name, type) => {
     return (
-      <tr key={key}>
-        <td className="p-r-1 text-center">{key}</td>
-        <td className="p-r-1">
-          <label className="wrapperLabel">
-            <input
-              value={entry.description}
-              type="text"
-              className="form-control"
-              onChange={event => {
-                this.onChange(event, key, 'description');
-              }}
-            />
-          </label>
-        </td>
-        <td className="p-r-1">
-          <label className="wrapperLabel">
-            <input
-              value={entry.window}
-              type="number"
-              className="form-control"
-              onChange={event => {
-                this.onChange(event, key, 'window');
-              }}
-            />
-          </label>
-        </td>
-        <td className="p-r-1">
-          <label className="wrapperLabel">
-            <input
-              value={entry.level}
-              type="number"
-              className="form-control"
-              onChange={event => {
-                this.onChange(event, key, 'level');
-              }}
-            />
-          </label>
-        </td>
-      </tr>
+      <td className="p-r-1">
+        <label className="wrapperLabel">
+          <input
+            value={value}
+            type={type}
+            className="form-control"
+            onChange={event => {
+              onInputChanged(event, name);
+            }}
+          />
+        </label>
+      </td>
     );
-  }
+  };
 
-  render() {
-    return (
-      <table className="full-width">
-        <thead>
-          <tr>
-            <th className="p-x-1 text-center presetIndex">Preset</th>
-            <th className="p-x-1">Description</th>
-            <th className="p-x-1">Window</th>
-            <th className="p-x-1">Level</th>
-          </tr>
-        </thead>
-        <tbody>
-          {Object.keys(this.state.data).map(key => {
-            return this.getWLPreferencesRows(key);
-          })}
-        </tbody>
-      </table>
-    );
-  }
+  return (
+    <tr key={rowName}>
+      <td className="p-r-1 text-center">{rowName}</td>
+      {renderTd(rowState.description, 'description', 'text')}
+      {renderTd(rowState.window, 'window', 'number')}
+      {renderTd(rowState.level, 'level', 'number')}
+    </tr>
+  );
 }
+
+WindowLevelPreferencesRow.propTypes = {
+  description: PropTypes.string.isRequired,
+  window: PropTypes.number.isRequired,
+  level: PropTypes.number.isRequired,
+  rowName: PropTypes.string.isRequired,
+  onSuccessChanged: PropTypes.func.isRequired,
+  //onFailureChanged: PropTypes.func.isRequired,
+};
+
+/**
+ * WindowLevelPreferences tab
+ * It renders all window level presets
+ *
+ * It stores current state and whenever it changes, component messages parent of new value (through function callback)
+ * @param {object} props component props
+ * @param {string} props.name Tab`s name
+ * @param {object} props.windowLevelData Data for initial state
+ * @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
+ */
+function WindowLevelPreferences({
+  windowLevelData,
+  name,
+  onTabStateChanged /*onTabErrorChanged*/,
+}) {
+  const [tabState, setTabState] = useState(windowLevelData);
+  // TODO to be used once error handling is implemented
+  //const [tabError, setTabError] = useState(false);
+
+  const onWindowLevelChanged = (key, state) => {
+    setTabState({ ...tabState, [key]: state });
+  };
+
+  // tell parent to update its state
+  useEffect(() => {
+    onTabStateChanged(name, { windowLevelData: tabState });
+  }, [tabState]);
+
+  return (
+    <table className="full-width">
+      <thead>
+        <tr>
+          <th className="p-x-1 text-center presetIndex">Preset</th>
+          <th className="p-x-1">Description</th>
+          <th className="p-x-1">Window</th>
+          <th className="p-x-1">Level</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.keys(tabState).map(objKey => (
+          <WindowLevelPreferencesRow
+            onSuccessChanged={onWindowLevelChanged}
+            rowName={objKey}
+            key={objKey}
+            description={tabState[objKey].description}
+            window={tabState[objKey].window}
+            level={tabState[objKey].level}
+          ></WindowLevelPreferencesRow>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+WindowLevelPreferences.propTypes = {
+  windowLevelData: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  onTabStateChanged: PropTypes.func.isRequired,
+  //onTabErrorChanged: PropTypes.func.isRequired,
+};
+
+export { WindowLevelPreferences };

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

@@ -1,4 +1,4 @@
-@import './UserPreferences.styl'
+@import './UserPreferencesTabs.styl'
 
 .presetIndex
-  padding: 0px 10px 0px 10px
+  padding: 0px 10px 0px 10px

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

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

platform/ui/src/contextProviders/DialogProvider.js

@@ -34,49 +34,45 @@ const DialogProvider = ({ children, service }) => {
   }, [create, dismiss, service]);
 
   /**
-   * Creates a dialog and return its id.
+   * UI Dialog
    *
-   * @returns id
+   * @typedef {Object} DialogProps
+   * @property {string} id The dialog id.
+   * @property {DialogContent} content The dialog content.
+   * @property {Object} contentProps The dialog content props.
+   * @property {boolean} isDraggable Controls if dialog content is draggable or not.
+   * @property {boolean} showOverlay Controls dialog overlay.
+   * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+   * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
+   * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+   * @property {Function} onStop Called when dragging stops.
+   * @property {Function} onDrag Called while dragging.
    */
-  const create = useCallback(
-    ({
-      id,
-      content,
-      onSubmit,
-      onClose,
-      onDrag,
-      onStop,
-      isDraggable,
-      defaultPosition,
-      position,
-    }) => {
-      let dialogId = id;
-      if (!dialogId) {
-        dialogId = utils.guid();
-      }
 
-      const newDialog = {
-        id: dialogId,
-        content,
-        onSubmit,
-        onClose,
-        onDrag,
-        onStop,
-        isDraggable,
-        defaultPosition,
-        position,
-      };
+  /**
+   * Creates a new dialog and return its id.
+   *
+   * @param {DialogProps} props The dialog props.
+   * @returns The new dialog id.
+   */
+  const create = useCallback(props => {
+    const { id } = props;
 
-      setDialogs(dialogs => [...dialogs, newDialog]);
+    let dialogId = id;
+    if (!dialogId) {
+      dialogId = utils.guid();
+    }
 
-      return dialogId;
-    },
-    []
-  );
+    setDialogs(dialogs => [...dialogs, { ...props, id: dialogId }]);
+
+    return dialogId;
+  }, []);
 
   /**
    * Dismisses the dialog with a given id.
    *
+   * @param {Object} props -
+   * @property {string} props.id The dialog id.
    * @returns void
    */
   const dismiss = useCallback(({ id }) => {
@@ -92,18 +88,102 @@ const DialogProvider = ({ children, service }) => {
     setDialogs([]);
   };
 
+  /**
+   * Indicate if there are no dialogs present.
+   *
+   * @returns True if no dialogs are present.
+   */
+  const isEmpty = () => dialogs && dialogs.length < 1;
+
   /**
    * Moves the dialog to the foreground if clicked.
    *
+   * @param {string} id The dialog id.
+   * @returns void
+   */
+  const _bringToFront = id => {
+    setDialogs(dialogs => {
+      const topDialog = dialogs.find(dialog => dialog.id === id);
+      return topDialog
+        ? [...dialogs.filter(dialog => dialog.id !== id), topDialog]
+        : [];
+    });
+  };
+
+  const renderDialogs = () =>
+    dialogs.map(dialog => {
+      const {
+        id,
+        content: DialogContent,
+        contentProps,
+        position,
+        defaultPosition,
+        isDraggable = true,
+        onStart,
+        onStop,
+        onDrag,
+      } = dialog;
+
+      return (
+        <Draggable
+          key={id}
+          disabled={!isDraggable}
+          position={position}
+          defaultPosition={lastDialogPosition || defaultPosition}
+          bounds="parent"
+          onStart={event => {
+            const e = event || window.event;
+            const target = e.target || e.srcElement;
+            const BLACKLIST = [
+              'SVG',
+              'BUTTON',
+              'PATH',
+              'INPUT',
+              'SPAN',
+              'LABEL',
+            ];
+            if (BLACKLIST.includes(target.tagName.toUpperCase())) {
+              return false;
+            }
+
+            if (validCallback(onStart)) {
+              return onStart(event);
+            }
+          }}
+          onStop={event => {
+            setIsDragging(false);
+
+            if (validCallback(onStop)) {
+              return onStop(event);
+            }
+          }}
+          onDrag={event => {
+            setIsDragging(true);
+            _bringToFront(id);
+            _updateLastDialogPosition(id);
+
+            if (validCallback(onDrag)) {
+              return onDrag(event);
+            }
+          }}
+        >
+          <div
+            id={`draggableItem-${id}`}
+            className={classNames('DraggableItem', isDragging && 'dragging')}
+            style={{ zIndex: '999', position: 'absolute' }}
+            onClick={() => _bringToFront(id)}
+          >
+            <DialogContent {...dialog} {...contentProps} />
+          </div>
+        </Draggable>
+      );
+    });
+
+  /**
+   * Update the last dialog position to be used as the new default position.
+   *
    * @returns void
    */
-  const _reorder = id => {
-    setDialogs(dialogs => [
-      ...dialogs.filter(dialog => dialog.id !== id),
-      dialogs.find(dialog => dialog.id === id),
-    ]);
-  };
-
   const _updateLastDialogPosition = dialogId => {
     const draggableItemBounds = document
       .querySelector(`#draggableItem-${dialogId}`)
@@ -114,70 +194,36 @@ const DialogProvider = ({ children, service }) => {
     });
   };
 
+  const validCallback = callback => callback && typeof callback === 'function';
+
   return (
-    <DialogContext.Provider value={{ create, dismiss, dismissAll, dialogs }}>
+    <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
       <div className="DraggableArea">
-        {dialogs.map(dialog => {
-          const {
-            id,
-            content: Dialog,
-            position /* Position of the dialog. {{x: 0, y: 0}} */,
-            defaultPosition,
-            isDraggable = true,
-            onStart = () => {},
-            onStop = () => {},
-            onDrag = () => {},
-          } = dialog;
-
-          return (
-            <Draggable
-              key={id}
-              disabled={!isDraggable}
-              position={position}
-              defaultPosition={lastDialogPosition || defaultPosition}
-              bounds="parent"
-              onStart={event => {
-                const e = event || window.event;
-                const target = e.target || e.srcElement;
-                const BLACKLIST = ['SVG', 'BUTTON', 'PATH', 'INPUT'];
-                if (BLACKLIST.includes(target.tagName.toUpperCase())) {
-                  return false;
-                }
-
-                onStart(event);
-              }}
-              onStop={event => {
-                onStop(event);
-                setIsDragging(false);
-                return;
-              }}
-              onDrag={event => {
-                setIsDragging(true);
-                _reorder(id);
-                _updateLastDialogPosition(id);
-                onDrag(event);
-              }}
-            >
-              <div
-                id={`draggableItem-${id}`}
-                className={classNames(
-                  'DraggableItem',
-                  isDragging && 'dragging'
-                )}
-                style={{ zIndex: '999', position: 'absolute' }}
-                onClick={() => _reorder(id)}
-              >
-                <Dialog {...dialog} />
-              </div>
-            </Draggable>
-          );
-        })}
+        {dialogs.some(dialog => dialog.showOverlay) ? (
+          <div className="Overlay active">{renderDialogs()}</div>
+        ) : (
+          renderDialogs()
+        )}
       </div>
       {children}
     </DialogContext.Provider>
   );
 };
 
+/**
+ *
+ * High Order Component to use the dialog methods through a Class Component
+ *
+ */
+export const withDialog = Component => {
+  return function WrappedComponent(props) {
+    const { create, dismiss, dismissAll, isEmpty } = useDialog();
+    return (
+      <Component {...props} dialog={{ create, dismiss, dismissAll, isEmpty }} />
+    );
+  };
+};
+
 DialogProvider.defaultProps = {
   service: null,
 };
@@ -193,16 +239,4 @@ DialogProvider.propTypes = {
   }),
 };
 
-/**
- *
- * High Order Component to use the dialog methods through a Class Component
- *
- */
-export const withDialog = Component => {
-  return function WrappedComponent(props) {
-    const { create, dismiss, dismissAll } = useDialog();
-    return <Component {...props} dialog={{ create, dismiss, dismissAll }} />;
-  };
-};
-
 export default DialogProvider;

platform/ui/src/contextProviders/DialogProvider.styl

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

platform/ui/src/contextProviders/ModalProvider.js

@@ -13,14 +13,28 @@ const { Provider } = ModalContext;
 
 export const useModal = () => useContext(ModalContext);
 
+/**
+ * UI Modal
+ *
+ * @typedef {Object} ModalProps
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
+ */
+
 const ModalProvider = ({ children, modal: Modal, service }) => {
   const DEFAULT_OPTIONS = {
-    component: null /* The component instance inside the modal. */,
-    shouldCloseOnEsc: false /* Modal is dismissible via the esc key. */,
-    isOpen: 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: '' /* The custom class to style the modal. */,
+    content: null,
+    contentProps: null,
+    shouldCloseOnEsc: false,
+    isOpen: true,
+    closeButton: true,
+    title: null,
+    customClassName: '',
   };
 
   const [options, setOptions] = useState(DEFAULT_OPTIONS);
@@ -39,13 +53,12 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   /**
    * Show the modal and override its configuration props.
    *
+   * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
    * @returns void
    */
-  const show = useCallback(
-    (component, props = {}) =>
-      setOptions(Object.assign({}, options, props, { component })),
-    [options]
-  );
+  const show = useCallback(props => setOptions({ ...options, ...props }), [
+    options,
+  ]);
 
   /**
    * Hide the modal and set its properties to default.
@@ -56,23 +69,28 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     DEFAULT_OPTIONS,
   ]);
 
-  const { component: Component } = options;
+  const {
+    content: ModalContent,
+    contentProps,
+    isOpen,
+    title,
+    customClassName,
+    shouldCloseOnEsc,
+    closeButton,
+  } = options;
 
   return (
     <Provider value={{ show, hide }}>
-      {options.component && (
+      {ModalContent && (
         <Modal
-          className={classNames(
-            options.customClassName,
-            options.component.className
-          )}
-          shouldCloseOnEsc={options.keyboard}
-          isOpen={options.isOpen}
-          title={options.title}
-          closeButton={options.closeButton}
+          className={classNames(customClassName, ModalContent.className)}
+          shouldCloseOnEsc={shouldCloseOnEsc}
+          isOpen={isOpen}
+          title={title}
+          closeButton={closeButton}
           onClose={hide}
         >
-          <Component {...options} show={show} hide={hide} />
+          <ModalContent {...contentProps} show={show} hide={hide} />
         </Modal>
       )}
       {children}
@@ -80,6 +98,18 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   );
 };
 
+/**
+ * Higher Order Component to use the modal methods through a Class Component.
+ *
+ * @returns
+ */
+export const withModal = Component => {
+  return function WrappedComponent(props) {
+    const { show, hide } = useModal();
+    return <Component {...props} modal={{ show, hide }} />;
+  };
+};
+
 ModalProvider.defaultProps = {
   service: null,
 };
@@ -99,18 +129,6 @@ ModalProvider.propTypes = {
   }),
 };
 
-/**
- * Higher Order Component to use the modal methods through a Class Component.
- *
- * @returns
- */
-export const withModal = Component => {
-  return function WrappedComponent(props) {
-    const { show, hide } = useModal();
-    return <Component {...props} modal={{ show, hide }} />;
-  };
-};
-
 export default ModalProvider;
 
 export const ModalConsumer = ModalContext.Consumer;

platform/ui/src/elements/form/DropdownMenu.js

@@ -46,7 +46,7 @@ class DropdownMenu extends Component {
           <button
             key={key}
             className="dd-item"
-            data-cy="about-item-menu"
+            data-cy="dd-item-menu"
             onClick={() => this.handleOnClick(onClick)}
           >
             {icon && <Icon {...icon} className="dd-item-icon" />}

platform/ui/src/hooks/index.js

@@ -1,4 +1,4 @@
-import useMedia from './useMedia.js';
+import { useMedia } from './useMedia.js';
 import useDebounce from './useDebounce.js';
 
 export { useDebounce, useMedia };

platform/ui/src/hooks/useMedia.js

@@ -1,54 +1,178 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import isEqual from 'lodash.isequal';
+/**
+ * Get display size value for matched mediaQueryList
+ * @param {MediaQueryList[]} mediaQueryMap - Array of mappings, containing MediaQueryLists
+ * @param {Array} mediaTypesAliases - Array of strings representing each mediaQueryAlias.
+ * @param {string} defaultDisplaySize - default display size value. Fallback value.
+ */
+const getDisplaySize = (
+  mediaQueryMap,
+  mediaTypesAliases,
+  defaultDisplaySize
+) => {
+  if ((!mediaTypesAliases && !defaultDisplaySize) || !mediaQueryMap) {
+    return;
+  }
+
+  // Get index of first media query that matches
+  const index = mediaQueryMap.findIndex(mql => mql.matches);
+
+  // Return related value or defaultDisplaySize if none
+  return index >= 0 && typeof mediaTypesAliases[index] !== 'undefined'
+    ? mediaTypesAliases[index]
+    : defaultDisplaySize;
+};
+/**
+ * Map each window MediaQueryLists
+ * @param {Array} mediaQueriesStringList - array of string media queries to be parsed
+ */
+const getMediaQueryMap = mediaQueriesStringList => {
+  return (
+    mediaQueriesStringList &&
+    mediaQueriesStringList.map(q => window.matchMedia(q))
+  );
+};
+
+const getMediaTypeAlias = (mediaQuery, state) => {
+  const { media } = mediaQuery;
+  const { mediaQueriesStringList, mediaTypesAliases } = state;
+
+  const index = mediaQueriesStringList.findIndex(originalMediaQuery => {
+    const { media: toCompareMedia } = window.matchMedia(originalMediaQuery);
+    return toCompareMedia === media;
+  });
+
+  return mediaTypesAliases[index];
+};
 
 /**
+ * Hook to get current displaySize value.
+ *
+ * Its state changes and also displaySize value changes in case viewport is resized.
+ * Its state changes in case mediaQueriesStringList or mediaTypesAliases changes.
+ *
+ * Current hook only offers displayMedia size, it wont expose method to change its state.
+ * @param {Array} mediaQueriesStringList - array of string media queries to be parsed
+ * @param {Array} mediaTypesAliases - array of aliases. Each value represents one mediaQueryList from array mediaQueriesStringList
+ * @param {String} defaultMediaType - default mediaTypeAlias
+ * @returns {String} current displayMedia size based on viewport size.
+ *
+ * @example <caption>Example to getDisplayMedia Size based on viewport size</caption>
+ *
+ *    const displaySize = useMedia(
+ *    ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
+ *    // Value to return for matched media query
+ *    ['large', 'medium', 'small'],
+ *      // Default value
+ *    'medium');
+ *
+ *  const currentDisplaySize = useMedia();
  *
- * @example <caption></caption>
- * const currentViewportSize = useMedia(
- *  // Media queries
- *  ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
- *  // Value to return for matched media query
- *  ['large', 'medium', 'small'],
- *  // Default value
- *  'medium'
- * );
- * @param {string[]} queries
- * @param {*} values
- * @param {*} defaultValue
- * @returns
  */
-function useMedia(queries, values, defaultValue) {
-  // Array containing a media query list for each query
-  const mediaQueryLists = queries.map(q => window.matchMedia(q));
+const useMedia = (
+  mediaQueriesStringList,
+  mediaTypesAliases,
+  defaultMediaType
+) => {
+  // MediaQuery.state is the source of truth. This hook will be dependent on it.
+  const [state, setState] = useState(() => {
+    const _mediaQueryMap = getMediaQueryMap(mediaQueriesStringList);
+    const _displaySize = getDisplaySize(
+      _mediaQueryMap,
+      mediaTypesAliases,
+      defaultMediaType
+    );
 
-  // Function that gets value based on matching media query
-  const getValue = () => {
-    // Get index of first media query that matches
-    const index = mediaQueryLists.findIndex(mql => mql.matches);
+    return {
+      mediaQueryMap: _mediaQueryMap,
+      displaySize: _displaySize,
+      mediaQueriesStringList,
+      mediaTypesAliases,
+      defaultMediaType,
+    };
+  });
+  let mount = useRef(false);
 
-    // Return related value or defaultValue if none
-    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
+  const updateDisplaySize = displaySize => {
+    if (mount.current) {
+      setState({ ...state, displaySize });
+    }
   };
 
-  // State and setter for matched value
-  const [value, setValue] = useState(getValue);
+  const updateState = value => {
+    const {
+      mediaQueriesStringList,
+      mediaTypesAliases,
+      defaultMediaType,
+    } = value;
 
-  useEffect(
-    () => {
-      // Event listener callback
-      // Note: By defining getValue outside of useEffect we ensure that it has ...
-      // ... current values of hook args (as this hook callback is created once on mount).
-      const handler = () => setValue(getValue);
+    const mediaQueryMap = getMediaQueryMap(mediaQueriesStringList);
+    const displaySize = getDisplaySize(
+      mediaQueryMap,
+      mediaTypesAliases,
+      defaultMediaType
+    );
+    // immutable state
+    // last chance to avoid setState of unmount component
+    if (mount.current) {
+      setState({
+        ...state,
+        mediaQueriesStringList,
+        mediaTypesAliases,
+        displaySize,
+        mediaQueryMap,
+      });
+    }
+  };
 
-      // Set a listener for each media query with above handler as callback.
-      mediaQueryLists.forEach(mql => mql.addListener(handler));
+  const onMediaQueryChange = useCallback(mediaQuery => {
+    if (mediaQuery.matches) {
+      const nextDisplaySize = getMediaTypeAlias(mediaQuery, state);
+      updateDisplaySize(nextDisplaySize);
+    }
+  }, []);
 
-      // Remove listeners on cleanup
-      return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
-    },
-    [] // Empty array ensures effect is only run on mount and unmount
-  );
+  // update state of MediaQuery in case mediaQueriesStringList or mediaTypesAliases has changed
+  useEffect(() => {
+    const {
+      mediaQueriesStringList: _mediaQueriesStringList,
+      mediaTypesAliases: _mediaTypesAliases,
+    } = state;
+    if (
+      (mediaQueriesStringList &&
+        !isEqual(mediaQueriesStringList, _mediaQueriesStringList)) ||
+      (mediaTypesAliases && !isEqual(mediaTypesAliases, _mediaTypesAliases))
+    ) {
+      updateState({
+        mediaQueriesStringList,
+        mediaTypesAliases,
+      });
+    }
+  }, [mediaQueriesStringList, mediaTypesAliases]);
 
-  return value;
-}
+  // re-assign window resizing listeners
+  useEffect(() => {
+    const { mediaQueryMap } = state;
+    mediaQueryMap.forEach(mql => {
+      mql.removeListener(onMediaQueryChange);
+      mql.addListener(onMediaQueryChange);
+    });
+  }, [state.mediaQueryMap]);
 
-export default useMedia;
+  useEffect(() => {
+    mount.current = true;
+
+    return () => {
+      mount.current = false;
+      const { mediaQueryMap } = state;
+      mediaQueryMap.forEach(mql => {
+        mql.removeListener(onMediaQueryChange);
+      });
+    };
+  }, []);
+
+  return state.displaySize;
+};
+
+export { useMedia };

platform/viewer/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.2...@ohif/viewer@2.11.3) (2019-12-02)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.11.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.1...@ohif/viewer@2.11.2) (2019-11-28)
+
+
+### Bug Fixes
+
+* User Preferences Issues ([#1207](https://github.com/OHIF/Viewers/issues/1207)) ([1df21a9](https://github.com/OHIF/Viewers/commit/1df21a9e075b5e6dfc10a429ae825826f46c71b8)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
+## [2.11.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.0...@ohif/viewer@2.11.1) (2019-11-27)
+
+
+### Bug Fixes
+
+* of undefined name of project ([#1231](https://github.com/OHIF/Viewers/issues/1231)) ([e34a057](https://github.com/OHIF/Viewers/commit/e34a05726319e3e70279c43d5bf976d33cdf71f7))
+
+
+
+
+
+# [2.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.2...@ohif/viewer@2.11.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+## [2.10.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.1...@ohif/viewer@2.10.2) (2019-11-25)
+
+
+### Bug Fixes
+
+* Issue branch from danny experimental changes pr 1128 ([#1150](https://github.com/OHIF/Viewers/issues/1150)) ([a870b3c](https://github.com/OHIF/Viewers/commit/a870b3cc6056cf824af422e46f1ad674910b534e)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
 ## [2.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.0...@ohif/viewer@2.10.1) (2019-11-20)
 
 **Note:** Version bump only for package @ohif/viewer

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

@@ -270,7 +270,7 @@ describe('OHIF Study Viewer Page', function() {
     cy.get('[data-cy="options-menu"]')
       .first()
       .click();
-    cy.get('[data-cy="about-item-menu"]')
+    cy.get('[data-cy="dd-item-menu"]')
       .first()
       .click();
     cy.get('[data-cy="about-modal"]')

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

@@ -59,91 +59,89 @@ describe('OHIF User Preferences', () => {
         .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
 
       // Options menu should be translated
-      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Opciones')
+        .click();
 
-      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      //Once the issue is fixed, the following code should be uncommented
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'Acerca de');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferencias');
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'Acerca de');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferencias');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
     it('checks if user can cancel the language selection and application will be in English', function() {
-      cy.get('@userPreferencesGeneralTab')
-        .click()
-        .should('have.class', 'active');
+      // Set language to English and save
+      cy.setLanguage('English');
 
-      // Language dropdown should be displayed
-      cy.get('#language-select').should('be.visible');
+      // Set language to Spanish and cancel
+      cy.setLanguage('Spanish', false);
 
-      // Select Spanish and Cancel
-      cy.get('#language-select').select('Spanish');
-      cy.get('@cancelBtn')
+      // Header should be kept in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
+    });
+
+    it('checks if user can restore to default the language selection and application will be in English', function() {
+      // Set language to Spanish
+      cy.setLanguage('Spanish');
+
+      //Open Preferences again
+      cy.openPreferences();
+
+      // Go to general tab
+      cy.get('@userPreferencesGeneralTab').click();
+
+      cy.get('@restoreBtn')
         .scrollIntoView()
         .click();
 
-      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      // Once the issue is fixed, the following code should be uncommented
-      // // Header should be kept in English
-      // cy.get('.research-use')
-      //   .scrollIntoView()
-      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-      //
-      // // Options menu should be translated
-      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-      //
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'About');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferences');
+      // Save
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be in English
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+
+      // Close options Menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
-    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-    // Once the issue is fixed, the following code should be uncommented
-    // it('checks if user can restore to default the language selection and application will be in English', function() {
-    //   cy.get('@userPreferencesGeneralTab')
-    //     .click()
-    //     .should('have.class', 'active');
-
-    //   // Language dropdown should be displayed
-    //   cy.get('#language-select').should('be.visible');
-
-    //   // Select Spanish and Save
-    //   cy.get('#language-select').select('Spanish');
-    //   cy.get('@saveBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    //   //Open Preferences again
-    //   cy.openPreferences();
-
-    //   // Go to general tab
-    //   cy.get('@userPreferencesGeneralTab').click();
-
-    //   cy.get('@restoreBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    // Header should be in English
-    // cy.get('.research-use')
-    //   .scrollIntoView()
-    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-    //
-    // Options menu should be in English
-    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .first()
-    //     .should('have.text', 'About');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .last()
-    //     .should('have.text', 'Preferences');
-    //  });
-
     it('checks if Preferences set in Study List Page will be consistent on Viewer Page', function() {
       // Go go hotkeys tab
       cy.get('@userPreferencesHotkeysTab')
@@ -185,16 +183,12 @@ describe('OHIF User Preferences', () => {
       cy.get('[data-cy="options-menu"]')
         .should('have.text', 'Opciones')
         .click();
-      cy.get('[data-cy="about-item-menu"]')
+      cy.get('[data-cy="dd-item-menu"]')
         .first()
         .should('contain.text', 'Acerca de');
-      cy.get('[data-cy="options-menu"]').click(); //Close Options overlay
-
-      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      //Once the issue is fixed, the following code should be uncommented
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferencias');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferencias');
 
       // Check if new hotkey is working on viewport
       cy.get('body').type('{shift}Q', { release: false });
@@ -266,19 +260,49 @@ describe('OHIF User Preferences', () => {
         .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
 
       // Options menu should be translated
-      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Opciones')
+        .click();
 
-      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      //Once the issue is fixed, the following code should be uncommented
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'Acerca de');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferencias');
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'Acerca de');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferencias');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
     it('checks if user can cancel the language selection and application will be in English', function() {
+      // Set language to English and save
+      cy.setLanguage('English');
+
+      // Set language to Spanish and cancel
+      cy.setLanguage('Spanish', false);
+
+      // Header should be kept in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
+    });
+
+    it('checks if user can restore to default the language selection and application will be in English', function() {
       cy.get('@userPreferencesGeneralTab')
         .click()
         .should('have.class', 'active');
@@ -286,76 +310,51 @@ describe('OHIF User Preferences', () => {
       // Language dropdown should be displayed
       cy.get('#language-select').should('be.visible');
 
-      // Select Spanish and Cancel
+      // Select Spanish and Save
       cy.get('#language-select').select('Spanish');
-      cy.get('@cancelBtn')
+      cy.get('@saveBtn')
         .scrollIntoView()
         .click();
 
-      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-      // Once the issue is fixed, the following code should be uncommented
-      // // Header should be kept in English
-      // cy.get('.research-use')
-      //   .scrollIntoView()
-      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-      //
-      // // Options menu should be translated
-      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-      //
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .first()
-      //   .should('have.text', 'About');
-      // cy.get('[data-cy="about-item-menu"]')
-      //   .last()
-      //   .should('have.text', 'Preferences');
+      //Open Preferences again
+      cy.get('[data-cy="options-menu"]')
+        .scrollIntoView()
+        .click();
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .click();
+
+      // Go to general tab
+      cy.get('@userPreferencesGeneralTab').click();
+
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .click();
+
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be in English
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'INVESTIGATIONAL USE ONLY');
+
+      // Options menu should be in English
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Options')
+        .click();
+      cy.get('[data-cy="dd-item-menu"]')
+        .first()
+        .should('contain.text', 'About');
+      cy.get('[data-cy="dd-item-menu"]')
+        .last()
+        .should('contain.text', 'Preferences');
+
+      // Close Options menu
+      cy.get('[data-cy="options-menu"]').click();
     });
 
-    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-    // Once the issue is fixed, the following code should be uncommented
-    // it('checks if user can restore to default the language selection and application will be in English', function() {
-    //   cy.get('@userPreferencesGeneralTab')
-    //     .click()
-    //     .should('have.class', 'active');
-
-    //   // Language dropdown should be displayed
-    //   cy.get('#language-select').should('be.visible');
-
-    //   // Select Spanish and Save
-    //   cy.get('#language-select').select('Spanish');
-    //   cy.get('@saveBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    //   //Open Preferences again
-    //   cy.get('[data-cy="options-menu"]')
-    //     .scrollIntoView()
-    //     .click();
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .last()
-    //     .click();
-
-    //   // Go to general tab
-    //   cy.get('@userPreferencesGeneralTab').click();
-
-    //   cy.get('@restoreBtn')
-    //     .scrollIntoView()
-    //     .click();
-
-    // Header should be in English
-    // cy.get('.research-use')
-    //   .scrollIntoView()
-    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
-    //
-    // Options menu should be in English
-    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .first()
-    //     .should('have.text', 'About');
-    //   cy.get('[data-cy="about-item-menu"]')
-    //     .last()
-    //     .should('have.text', 'Preferences');
-    //});
-
     it('checks new hotkeys for "Rotate Right" and "Rotate Left"', function() {
       // Go go hotkeys tab
       cy.get('@userPreferencesHotkeysTab')

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

@@ -81,6 +81,7 @@ describe('OHIF VTK Extension', () => {
     );
   });
 
+  /* TODO: Non-deterministic behavior (const expectedText = 'W: 350 L: -1044';)
   it('checks WWWC tool', () => {
     cy.get('@wwwcBtn').click();
 
@@ -92,7 +93,7 @@ describe('OHIF VTK Extension', () => {
       .trigger('mousemove', 'top', { which: 1 })
       .trigger('mouseup', { which: 1 })
       .then(() => {
-        const expectedText = 'W: 350 L: -1044';
+        const expectedText = 'W: 350 L: 40';
         cy.get('.ViewportOverlay > div.bottom-right.overlay-element').should(
           'contains.text',
           expectedText
@@ -102,7 +103,7 @@ describe('OHIF VTK Extension', () => {
     // Visual comparison
     cy.screenshot('VTK WWWC tool - Canvas should be bright');
     cy.percyCanvasSnapshot('VTK WWWC tool - Canvas should be bright');
-  });
+  }); */
 
   it('checks Rotate tool', () => {
     cy.get('@rotateBtn').click();

platform/viewer/cypress/support/commands.js

@@ -427,15 +427,19 @@ Cypress.Commands.add('initPreferencesModalAliases', () => {
 Cypress.Commands.add('openPreferences', () => {
   cy.log('Open User Preferences Modal');
   // Open User Preferences modal
-  cy.get('[data-cy="options-menu"]')
-    .scrollIntoView()
-    .click()
-    .then(() => {
-      cy.get('[data-cy="about-item-menu"]')
-        .last()
+  cy.get('body').then(body => {
+    if (body.find('.OHIFModal').length === 0) {
+      cy.get('[data-cy="options-menu"]')
+        .scrollIntoView()
         .click()
-        .wait(200);
-    });
+        .then(() => {
+          cy.get('[data-cy="dd-item-menu"]')
+            .last()
+            .click()
+            .wait(200);
+        });
+    }
+  });
 });
 
 Cypress.Commands.add('resetUserHoktkeyPreferences', () => {
@@ -446,10 +450,7 @@ Cypress.Commands.add('resetUserHoktkeyPreferences', () => {
 
   cy.log('Reset to Default Preferences');
   cy.get('@restoreBtn').click();
-
-  //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
-  //Once the issue is fixed, the following code should be uncommented
-  //cy.get('@saveBtn').click();
+  cy.get('@saveBtn').click();
 });
 
 Cypress.Commands.add(
@@ -457,11 +458,34 @@ Cypress.Commands.add(
   (function_label, shortcut) => {
     // Within scopes all `.get` and `.contains` to within the matched elements
     // dom instead of checking from document
-    cy.get('.HotKeysPreferences').within(() => {
-      cy.contains(function_label) // label we're looking for
-        .parent()
-        .find('input') // closest input to that label
-        .type(shortcut, { force: true }); // Set new shortcut for that function
-    });
+    cy.get('.HotKeysPreferences')
+      .within(() => {
+        cy.contains(function_label) // label we're looking for
+          .parent()
+          .find('input') // closest input to that label
+          .type(shortcut, { force: true }); // Set new shortcut for that function
+      })
+      .blur();
   }
 );
+
+Cypress.Commands.add('setLanguage', (language, save = true) => {
+  cy.openPreferences();
+
+  cy.get('@userPreferencesGeneralTab')
+    .click()
+    .should('have.class', 'active');
+
+  // Language dropdown should be displayed
+  cy.get('#language-select').should('be.visible');
+
+  // Select Language and Save/Cancel
+  cy.get('#language-select')
+    .select(language)
+    .then(() => {
+      const toClick = save ? '@saveBtn' : '@cancelBtn';
+      cy.get(toClick)
+        .scrollIntoView()
+        .click();
+    });
+});

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.10.1",
+  "version": "2.11.3",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,20 +45,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.12.0",
+    "@ohif/core": "^1.13.2",
     "@ohif/extension-cornerstone": "^2.0.0",
-    "@ohif/extension-dicom-html": "^1.0.1",
+    "@ohif/extension-dicom-html": "^1.0.2",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.53.12",
-    "@ohif/i18n": "^0.52.1",
-    "@ohif/ui": "^0.64.1",
+    "@ohif/extension-vtk": "^0.54.2",
+    "@ohif/i18n": "^0.52.2",
+    "@ohif/ui": "^0.65.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.8.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",

platform/viewer/src/App.js

@@ -23,6 +23,7 @@ import {
   createUIModalService,
   createUIDialogService,
   utils,
+  redux as reduxOHIF
 } from '@ohif/core';
 
 import i18n from '@ohif/i18n';
@@ -45,6 +46,7 @@ import OHIFStandaloneViewer from './OHIFStandaloneViewer';
 /** Store */
 import { getActiveContexts } from './store/layout/selectors.js';
 import store from './store';
+const { setUserPreferences } = reduxOHIF.actions;
 
 /** Contexts */
 import WhiteLabellingContext from './context/WhiteLabellingContext';
@@ -221,9 +223,29 @@ function _initExtensions(extensions, hotkeys) {
   const mergedExtensions = defaultExtensions.concat(extensions);
   extensionManager.registerExtensions(mergedExtensions);
 
+  const { hotkeyDefinitions = {} } = store.getState().preferences || {};
+  let updateStore = false;
+  let hotkeysToUse = hotkeyDefinitions;
+
   // Must run after extension commands are registered
-  if (hotkeys) {
-    hotkeysManager.setHotkeys(hotkeys, true);
+  // if there is no hotkeys from localStorate set up from config
+  if (!Object.keys(hotkeyDefinitions).length) {
+    hotkeysToUse = hotkeys;
+    updateStore = true;
+  }
+
+  if (hotkeysToUse) {
+    hotkeysManager.setHotkeys(hotkeysToUse);
+    // set default based on app config
+    hotkeysManager.setDefaultHotKeys(hotkeys);
+
+    if (updateStore) {
+      const { hotkeyDefinitions } = hotkeysManager;
+      const windowLevelData = {};
+      store.dispatch(
+        setUserPreferences({ windowLevelData, hotkeyDefinitions })
+      );
+    }
   }
 }
 

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

@@ -8,6 +8,7 @@ import {
   getResetLabellingAndContextMenu,
 } from './labelingFlowCallbacks.js';
 import throttle from 'lodash.throttle';
+import { SimpleDialog } from '@ohif/ui';
 
 // TODO: This only works because we have a hard dependency on this extension
 // We need to decouple and make stuff like this possible w/o bundling this at
@@ -35,6 +36,28 @@ const MEASUREMENT_ACTION_MAP = {
  * @param {*} configuration
  */
 export default function init({ servicesManager, configuration = {} }) {
+  const { UIDialogService } = servicesManager.services;
+  const callInputDialog = (data, event, callback) => {
+    let dialogId = UIDialogService.create({
+      content: SimpleDialog.InputDialog,
+      defaultPosition: {
+        x: (event && event.currentPoints.canvas.x) || 0,
+        y: (event && event.currentPoints.canvas.y) || 0,
+      },
+      showOverlay: true,
+      contentProps: {
+        title: 'Enter your annotation',
+        label: 'New label',
+        defaultValue: data ? data.text : '',
+        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        onSubmit: value => {
+          callback(value);
+          UIDialogService.dismiss({ id: dialogId });
+        },
+      },
+    });
+  };
+
   // 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...
@@ -90,6 +113,10 @@ export default function init({ servicesManager, configuration = {} }) {
   csTools.addTool(csTools.ArrowAnnotateTool, {
     configuration: {
       getMeasurementLocationCallback: toolLabellingFlowCallback,
+      getTextCallback: (callback, eventDetails) =>
+        callInputDialog(null, eventDetails, callback),
+      changeTextCallback: (data, eventDetails, callback) =>
+        callInputDialog(data, eventDetails, callback),
     },
   });
 

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
@@ -11,114 +11,112 @@ import './Header.css';
 // Context
 import AppContext from './../../context/AppContext';
 
-class Header extends Component {
-  static contextType = AppContext;
-  static propTypes = {
-    home: PropTypes.bool.isRequired,
-    location: PropTypes.object.isRequired,
-    children: PropTypes.node,
-    t: PropTypes.func.isRequired,
-    userManager: PropTypes.object,
-    user: PropTypes.object,
-    modal: PropTypes.object,
-  };
+function Header(props) {
+  const {
+    t,
+    user,
+    userManager,
+    modal: { show },
+    home,
+    location,
+    children,
+  } = props;
 
-  static defaultProps = {
-    home: true,
-    children: OHIFLogo(),
-  };
+  const [options, setOptions] = useState([]);
 
-  constructor(props) {
-    super(props);
-    this.state = { isOpen: false };
-
-    this.loadOptions();
-  }
-
-  loadOptions() {
-    const {
-      t,
-      user,
-      userManager,
-      modal: { show },
-    } = this.props;
-    this.options = [
+  useEffect(() => {
+    const optionsValue = [
       {
         title: t('About'),
         icon: { name: 'info' },
         onClick: () =>
-          show(AboutContent, {
+          show({
+            content: AboutContent,
             title: t('OHIF Viewer - About'),
           }),
       },
       {
-        title: 'Preferences ',
+        title: t('Preferences'),
         icon: {
           name: 'user',
         },
         onClick: () =>
-          show(ConnectedUserPreferencesForm, {
+          show({
+            content: ConnectedUserPreferencesForm,
             title: t('User Preferences'),
           }),
       },
     ];
 
     if (user && userManager) {
-      this.options.push({
+      optionsValue.push({
         title: t('Logout'),
         icon: { name: 'power-off' },
         onClick: () => userManager.signoutRedirect(),
       });
     }
-  }
+
+    setOptions(optionsValue);
+  }, [setOptions, show, t, user, userManager]);
+
+  const { appConfig = {} } = AppContext;
+  const showStudyList =
+    appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
 
   // ANTD -- Hamburger, Drawer, Menu
-  render() {
-    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 ${home ? 'header-big' : ''}`}>
-          <div className="header-left-box">
-            {location && location.studyLink && (
-              <Link
-                to={location.studyLink}
-                className="header-btn header-viewerLink"
-              >
-                {t('Back to Viewer')}
-              </Link>
-            )}
+  return (
+    <>
+      <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
+      <div className={`entry-header ${home ? 'header-big' : ''}`}>
+        <div className="header-left-box">
+          {location && location.studyLink && (
+            <Link
+              to={location.studyLink}
+              className="header-btn header-viewerLink"
+            >
+              {t('Back to Viewer')}
+            </Link>
+          )}
 
-            {children}
+          {children}
 
-            {showStudyList && !home && (
-              <Link
-                className="header-btn header-studyListLinkSection"
-                to={{
-                  pathname: '/',
-                  state: { studyLink: location.pathname },
-                }}
-              >
-                {t('Study list')}
-              </Link>
-            )}
-          </div>
-
-          <div className="header-menu">
-            <span className="research-use">
-              {t('INVESTIGATIONAL USE ONLY')}
-            </span>
-            <Dropdown title={t('Options')} list={this.options} align="right" />
-          </div>
+          {showStudyList && !home && (
+            <Link
+              className="header-btn header-studyListLinkSection"
+              to={{
+                pathname: '/',
+                state: { studyLink: location.pathname },
+              }}
+            >
+              {t('Study list')}
+            </Link>
+          )}
         </div>
-      </>
-    );
-  }
+
+        <div className="header-menu">
+          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
+          <Dropdown title={t('Options')} list={options} align="right" />
+        </div>
+      </div>
+    </>
+  );
 }
 
+Header.propTypes = {
+  home: PropTypes.bool.isRequired,
+  location: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  t: PropTypes.func.isRequired,
+  userManager: PropTypes.object,
+  user: PropTypes.object,
+  modal: PropTypes.object,
+};
+
+Header.defaultProps = {
+  home: true,
+  children: OHIFLogo(),
+};
+
 export default withTranslation(['Header', 'AboutModal'])(
   withRouter(withModal(Header))
 );

platform/viewer/src/connectedComponents/ConnectedCineDialog.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { CineDialog } from '@ohif/ui';
 import OHIF from '@ohif/core';
 import csTools from 'cornerstone-tools';
+import { commandsManager } from './../App.js';
 // Our target output kills the `as` and "import" throws a keyword error
 // import { import as toolImport, getToolState } from 'cornerstone-tools';
 import cloneDeep from 'lodash.clonedeep';
@@ -16,7 +17,8 @@ const { setViewportSpecificData } = OHIF.redux.actions;
 const mapStateToProps = state => {
   // Get activeViewport's `cine` and `stack`
   const { viewportSpecificData, activeViewportIndex } = state.viewports;
-  const { cine, dom } = viewportSpecificData[activeViewportIndex] || {};
+  const { cine } = viewportSpecificData[activeViewportIndex] || {};
+  const dom = commandsManager.runCommand('getActiveViewportEnabledElement');
 
   const cineData = cine || {
     isPlaying: false,

platform/viewer/src/connectedComponents/ConnectedHeader.js

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

platform/viewer/src/connectedComponents/ConnectedUserPreferencesForm.js

@@ -1,34 +1,48 @@
 import { connect } from 'react-redux';
 import { UserPreferencesForm } from '@ohif/ui';
 import OHIF from '@ohif/core';
+import i18n from '@ohif/i18n';
+
 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);
+  const { defaultLanguage } = i18n;
+  const { hotkeyDefinitions, windowLevelData = {}, generalPreferences } =
+    state.preferences || {};
+  const { hotkeyDefaults } = hotkeysManager;
+
   return {
     onClose: ownProps.hide,
-    windowLevelData: state.preferences ? state.preferences.windowLevelData : {},
+    windowLevelData,
     hotkeyDefinitions,
+    generalPreferences,
+    hotkeysManager,
+    hotkeyDefaults,
+    defaultLanguage,
   };
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
-    onSave: ({ windowLevelData, hotkeyDefinitions }) => {
+    onSave: ({ windowLevelData, hotkeyDefinitions, generalPreferences }) => {
+      // TODO improve this strategy on windowLevel implementation
       hotkeysManager.setHotkeys(hotkeyDefinitions);
+
+      const { language } = generalPreferences;
+
+      // set new language
+      i18n.changeLanguage(language);
+
       ownProps.hide();
-      dispatch(setUserPreferences({ windowLevelData, hotkeyDefinitions }));
-    },
-    onResetToDefaults: () => {
-      hotkeysManager.restoreDefaultBindings();
-      ownProps.hide();
-      dispatch(setUserPreferences());
+      dispatch(
+        setUserPreferences({
+          windowLevelData,
+          hotkeyDefinitions,
+          generalPreferences,
+        })
+      );
     },
   };
 };

platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js

@@ -3,15 +3,16 @@ import { ViewportDownloadForm } from '@ohif/ui';
 import { utils } from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
+import { commandsManager } from './../App.js';
 
 const MINIMUM_SIZE = 100;
 const DEFAULT_SIZE = 512;
 const MAX_TEXTURE_SIZE = 10000;
 
 const mapStateToProps = (state, ownProps) => {
-  const { viewportSpecificData, activeViewportIndex } = state.viewports;
-  const { dom: activeEnabledElement } =
-    viewportSpecificData[activeViewportIndex] || {};
+  const activeEnabledElement = commandsManager.runCommand(
+    'getActiveViewportEnabledElement'
+  );
 
   return {
     onClose: ownProps.hide,

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -308,7 +308,8 @@ function _handleBuiltIn(button) {
   }
 
   if (options.behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    modal.show(ConnectedViewportDownloadForm, {
+    modal.show({
+      content: ConnectedViewportDownloadForm,
       title: t('Download High Quality Image'),
     });
   }

platform/viewer/src/googleCloud/DicomUploader.css

@@ -1,20 +1,20 @@
 .dicom-uploader .button {
-    float: left;
-    margin: 5px;
+  float: left;
+  margin: 5px;
 }
 
 .invisible-input {
-    position: absolute;
-    display: none;
-    z-index: -1000;
-    max-width: 0 !important;
-    max-height: 0 !important;
+  position: absolute;
+  display: none;
+  z-index: -1000;
+  max-width: 0 !important;
+  max-height: 0 !important;
 }
 
 .dicom-uploader .table-header {
-    color: #ffffff;
-    font-size: 16px;
-    font-weight: 28px;
-    text-align: left;
-    margin: 20px auto;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 28px;
+  text-align: left;
+  margin: 20px auto;
 }

platform/viewer/src/googleCloud/ProjectsList.js

@@ -63,9 +63,18 @@ class ProjectsList extends Component {
     if (loading) {
       return loadingIcon;
     }
+
+    const lowerCaseFilter = filter.toLowerCase();
+    const filteredProjects = projects.filter(project =>   
+      typeof project.name  === 'string' &&
+      (filter === "" || project.name.toLowerCase().includes(lowerCaseFilter))
+    );
+
     const body = (
       <tbody id="ProjectList">
-        {projects.filter(project => (project.name.toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
+        {
+          filteredProjects.map(this.renderTableRow)
+        }
       </tbody>
     );
 

platform/viewer/src/studylist/StudyListRoute.js

@@ -58,7 +58,11 @@ function StudyListRoute(props) {
   const appContext = useContext(AppContext);
   // ~~ RESPONSIVE
   const displaySize = useMedia(
-    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    [
+      '(min-width: 1750px)',
+      '(min-width: 1000px) and (max-width: 1749px)',
+      '(max-width: 999px)',
+    ],
     ['large', 'medium', 'small'],
     'small'
   );
@@ -257,6 +261,7 @@ function StudyListRoute(props) {
           filterValues={filterValues}
           onFilterChange={handleFilterChange}
           studyListDateFilterNumDays={appConfig.studyListDateFilterNumDays}
+          displaySize={displaySize}
         />
         {/* PAGINATION FOOTER */}
         <TablePagination

platform/viewer/src/variables.css

@@ -30,7 +30,7 @@
   --snackbar-info: rgba(54, 156, 199, 0.9);
 
   /** z-Index **/
-  --snackbar-zIndex: 10;
+  --snackbar-zIndex: 1075;
 
   /** DatePicker Colors **/
   --datePicker-input-background: #2c363f;

yarn.lock

@@ -1100,34 +1100,13 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
-"@babel/runtime@7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.2.tgz#81c89935f4647706fc54541145e6b4ecfef4b8e3"
-  integrity sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==
-  dependencies:
-    regenerator-runtime "^0.12.0"
-
-"@babel/runtime@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
-  integrity sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
+"@babel/runtime@7.1.2", "@babel/runtime@7.5.5", "@babel/runtime@7.6.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.3":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.6.0", "@babel/runtime@^7.6.3":
-  version "7.7.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
-  integrity sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -5993,10 +5972,10 @@ cornerstone-math@^0.1.8:
   resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.8.tgz#68ab1f9e4fdcd7c5cb23a0d2eb4263f9f894f1c5"
   integrity sha512-x7NEQHBtVG7j1yeyj/aRoKTpXv1Vh2/H9zNLMyqYJDtJkNng8C4Q8M3CgZ1qer0Yr7eVq2x+Ynmj6kfOm5jXKw==
 
-cornerstone-tools@^4.0.9:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.6.2.tgz#f46eac15ac027ed8649eced46ab0ed6f71ada982"
-  integrity sha512-YlUBkMr0B1PPA/mKPgqyedvOYHNXXLyDmH3I59ipDRi2Huuw64hOxwxPiknibPHD9mBv6SpHN1ybD9i5KOTExQ==
+cornerstone-tools@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.8.0.tgz#1972546e13e9a09b8aa25a3541ffc345283eec01"
+  integrity sha512-PO7/jYbVwc+ddF9JW/o/JXqNPFZV7y1PUTzlRATC9FeXLXNKIkSFBCF5SA1EGJoyjzRYGDBgTZuTYhfm96AlAA==
   dependencies:
     "@babel/runtime" "7.1.2"
     cornerstone-math "0.1.7"
@@ -16657,11 +16636,6 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.12.0:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
-  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
-
 regenerator-runtime@^0.13.1, regenerator-runtime@^0.13.2:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"