chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.4.2
 - @ohif/extension-vtk@1.2.23
 - @ohif/ui@1.3.2
 - @ohif/viewer@3.7.7

.vscode/settings.json

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

docs/latest/extensions/modules/panel.md

@@ -40,6 +40,10 @@ export default {
           from: 'right',
           // The target component to toggle open/close
           target: 'target-component-id',
+          // UI Hint; If the target panel is in a "disabled" state
+          isDisabled: studies => {
+            return false;
+          },
           // Overrides `defaultContext`, if specified
           context: ['ACTIVE_VIEWPORT:MAGIC'],
         },

extensions/_example/src/index.js

@@ -21,7 +21,6 @@ export default {
   /**
    * MODULE GETTERS
    */
-
   getViewportModule() {
     return '... react component ...';
   },
@@ -98,6 +97,9 @@ const panelModule = {
       icon: 'th-list',
       label: 'Segments',
       target: 'segment-panel',
+      isDisabled: studies => {
+        return false;
+      },
     },
   ],
   components: [

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.4.1...@ohif/extension-cornerstone@2.4.2) (2020-03-09)
+
+
+### Bug Fixes
+
+* Remove Eraser and ROI Window ([6c950a9](https://github.com/OHIF/Viewers/commit/6c950a9669f7fbf3c46e48679fa26ee514824156))
+
+
+
+
+
+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.4.0...@ohif/extension-cornerstone@2.4.1) (2020-03-03)
+
+
+### Bug Fixes
+
+* bump react-cornerstone-viewport version to address critical issue ([#1473](https://github.com/OHIF/Viewers/issues/1473)) ([ee80e02](https://github.com/OHIF/Viewers/commit/ee80e026610442e94caf5e4e3e4d193220cd0ece))
+
+
+
+
+
 # [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.3.1...@ohif/extension-cornerstone@2.4.0) (2020-02-20)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -52,6 +52,6 @@
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "query-string": "^6.8.3",
-    "react-cornerstone-viewport": "2.x.x"
+    "react-cornerstone-viewport": "^2.3.6"
   }
 }

extensions/cornerstone/src/init.js

@@ -18,7 +18,7 @@ function fallbackMetaDataProvider(type, imageId) {
   const wadoRoot = window.store.getState().servers.servers[0].wadoRoot;
   const wadoRsImageId = `wadors:${wadoRoot}/studies/${qs.studyUID}/series/${
     qs.seriesUID
-    }/instances/${qs.objectUID}/frames/${qs.frame || 1}`;
+  }/instances/${qs.objectUID}/frames/${qs.frame || 1}`;
 
   return cornerstone.metaData.get(type, wadoRsImageId);
 }
@@ -81,7 +81,6 @@ export default function init({ servicesManager, configuration }) {
     touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
     annotations: [
       csTools.ArrowAnnotateTool,
-      csTools.EraserTool,
       csTools.BidirectionalTool,
       csTools.LengthTool,
       csTools.AngleTool,
@@ -189,7 +188,9 @@ export default function init({ servicesManager, configuration }) {
 
 const _initMeasurementService = measurementService => {
   /* Initialization */
-  const { toAnnotation, toMeasurement } = measurementServiceMappingsFactory(measurementService);
+  const { toAnnotation, toMeasurement } = measurementServiceMappingsFactory(
+    measurementService
+  );
   const csToolsVer4MeasurementSource = measurementService.createSource(
     'CornerstoneTools',
     '4'
@@ -214,7 +215,9 @@ const _initMeasurementService = measurementService => {
 };
 
 const _connectToolsToMeasurementService = measurementService => {
-  const csToolsVer4MeasurementSource = _initMeasurementService(measurementService);
+  const csToolsVer4MeasurementSource = _initMeasurementService(
+    measurementService
+  );
   const {
     id: sourceId,
     addOrUpdate,
@@ -242,7 +245,8 @@ const _connectToolsToMeasurementService = measurementService => {
             );
             console.log('Mapped annotation:', annotation);
           }
-        });
+        }
+      );
 
       measurementService.subscribe(
         MEASUREMENT_UPDATED,

extensions/cornerstone/src/toolbarModule.js

@@ -215,15 +215,6 @@ const definitions = [
         commandName: 'setToolActive',
         commandOptions: { toolName: 'Bidirectional' },
       },
-      {
-        id: 'Eraser',
-        label: 'Eraser',
-        icon: 'eraser',
-        //
-        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Eraser' },
-      },
       {
         id: 'Download',
         label: 'Download',
@@ -245,7 +236,7 @@ const definitions = [
     type: TOOLBAR_BUTTON_TYPES.COMMAND,
     commandName: 'setCornerstoneLayout',
     context: 'ACTIVE_VIEWPORT::VTK',
-  }
+  },
 ];
 
 export default {

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.22...@ohif/extension-vtk@1.2.23) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.21...@ohif/extension-vtk@1.2.22) (2020-03-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.2.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.20...@ohif/extension-vtk@1.2.21) (2020-02-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [1.2.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.2.19...@ohif/extension-vtk@1.2.20) (2020-02-21)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.2.20",
+  "version": "1.2.23",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "react-vtkjs-viewport": "^0.8.3"
   },
   "devDependencies": {
-    "@ohif/core": "^2.5.1",
-    "@ohif/ui": "^1.3.0",
+    "@ohif/core": "^2.5.2",
+    "@ohif/ui": "^1.3.2",
     "cornerstone-tools": "^4.12.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3",

platform/core/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.
 
+## [2.5.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.5.1...@ohif/core@2.5.2) (2020-03-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
 ## [2.5.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.5.0...@ohif/core@2.5.1) (2020-02-21)
 
 

platform/core/package.json

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

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

@@ -13,7 +13,7 @@ import RetrieveMetadataLoaderAsync from './retrieveMetadataLoaderAsync';
  */
 async function RetrieveMetadata(server, studyInstanceUid, filters = {}) {
   const RetrieveMetadataLoader =
-    server.enableStudyLazyLoad !== false
+    server.enableStudyLazyLoad != false
       ? RetrieveMetadataLoaderAsync
       : RetrieveMetadataLoaderSync;
 

platform/ui/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.3.1...@ohif/ui@1.3.2) (2020-03-09)
+
+
+### Bug Fixes
+
+* Remove Eraser and ROI Window ([6c950a9](https://github.com/OHIF/Viewers/commit/6c950a9669f7fbf3c46e48679fa26ee514824156))
+
+
+
+
+
+## [1.3.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.3.0...@ohif/ui@1.3.1) (2020-02-29)
+
+
+### Bug Fixes
+
+* prevent the native context menu from appearing when right-clicking on a measurement or angle (https://github.com/OHIF/Viewers/issues/1406) ([#1469](https://github.com/OHIF/Viewers/issues/1469)) ([9b3be9b](https://github.com/OHIF/Viewers/commit/9b3be9b0c082c9a5b62f2a40f42e59381860fe73))
+
+
+
+
+
 # [1.3.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.2.1...@ohif/ui@1.3.0) (2020-02-20)
 
 

platform/ui/package.json

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

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

@@ -1,11 +1,10 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-
+import React from 'react';
 import './ContextMenu.css';
 
 const ContextMenu = ({ items, onClick }) => {
   return (
-    <div className="ContextMenu">
+    <div className="ContextMenu" onContextMenu={e => e.preventDefault()}>
       <ul>
         {items.map((item, index) => (
           <li key={index}>

platform/ui/src/elements/Icon/getIcon.js

@@ -30,11 +30,11 @@ import edit from './icons/edit.svg';
 import ellipseCircle from './icons/ellipse-circle.svg';
 import ellipseH from './icons/ellipse-h.svg';
 import ellipseV from './icons/ellipse-v.svg';
-import eraser from './icons/eraser.svg';
 import exclamationCircle from './icons/exclamation-circle.svg';
 import exclamationTriangle from './icons/exclamation-triangle.svg';
 import fastBackward from './icons/fast-backward.svg';
 import fastForward from './icons/fast-forward.svg';
+import stop from './icons/stop.svg';
 import info from './icons/info.svg';
 import inlineEdit from './icons/inline-edit.svg';
 import level from './icons/level.svg';
@@ -73,7 +73,6 @@ import squareO from './icons/square-o.svg';
 import star from './icons/star.svg';
 import stepBackward from './icons/step-backward.svg';
 import stepForward from './icons/step-forward.svg';
-import stop from './icons/stop.svg';
 import sun from './icons/sun.svg';
 import th from './icons/th.svg';
 import thLarge from './icons/th-large.svg';
@@ -114,7 +113,6 @@ const ICONS = {
   'create-comment': createComment,
   'create-screen-capture': createScreenCapture,
   edit,
-  eraser,
   'fast-backward': fastBackward,
   'fast-forward': fastForward,
   'object-group': objectGroup,

platform/viewer/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.6...@ohif/viewer@3.7.7) (2020-03-09)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.7.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.5...@ohif/viewer@3.7.6) (2020-03-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.7.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.4...@ohif/viewer@3.7.5) (2020-03-05)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.7.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.3...@ohif/viewer@3.7.4) (2020-03-03)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.7.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.2...@ohif/viewer@3.7.3) (2020-03-02)
+
+
+### Bug Fixes
+
+* GCloud dataset picker dialog broken ([#1453](https://github.com/OHIF/Viewers/issues/1453)) ([64dfbea](https://github.com/OHIF/Viewers/commit/64dfbeab7af98277efefadd334df14db79e32a4f))
+
+
+
+
+
+## [3.7.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.1...@ohif/viewer@3.7.2) (2020-02-29)
+
+
+### Bug Fixes
+
+* prevent the native context menu from appearing when right-clicking on a measurement or angle (https://github.com/OHIF/Viewers/issues/1406) ([#1469](https://github.com/OHIF/Viewers/issues/1469)) ([9b3be9b](https://github.com/OHIF/Viewers/commit/9b3be9b0c082c9a5b62f2a40f42e59381860fe73))
+
+
+
+
+
 ## [3.7.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.7.0...@ohif/viewer@3.7.1) (2020-02-21)
 
 **Note:** Version bump only for package @ohif/viewer

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

@@ -421,44 +421,6 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
   });
 
-  it('checks if Eraser tool will remove the measurements added in the viewport', () => {
-    //Add measurements in the viewport
-    cy.addLengthMeasurement();
-    cy.addAngleMeasurement();
-
-    //Verify if measurement annotation was added into the measurements panel
-    cy.get('@measurementsBtn').click();
-    cy.get('.measurementItem')
-      .its('length')
-      .should('be.eq', 2);
-    cy.get('@measurementsBtn')
-      .click()
-      .wait(2000);
-    //cy.isNotInViewport('@measurementsPanel'); //TO DO: check this intermittent behaviour
-
-    //Click More button
-    cy.get('@moreBtn').click();
-    //Verify if overlay is displayed
-    cy.get('.tooltip-toolbar-overlay')
-      .should('be.visible')
-      .then(() => {
-        //Click Eraser button
-        cy.get('[data-cy="eraser"]').click({ force: true });
-      });
-
-    //Erase measurement #1 and Verify if it was removed from the measurements panel
-    const [x1, y1] = [150, 100];
-    cy.get('@viewport').click(x1, y1, { force: true });
-    cy.get('.measurementItem')
-      .its('length')
-      .should('be.eq', 1);
-
-    //Erase measurement #2 and Verify if it was removed from the measurements panel
-    const [x2, y2] = [180, 390];
-    cy.get('@viewport').click(x2, y2, { force: true });
-    cy.get('.measurementItem').should('not.exist');
-  });
-
   it('check if Invert tool will change the colors of the image in the viewport', () => {
     // Click on More button
     cy.get('@moreBtn').click();

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "3.7.1",
+  "version": "3.7.7",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -47,15 +47,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^2.5.1",
-    "@ohif/extension-cornerstone": "^2.4.0",
+    "@ohif/core": "^2.5.2",
+    "@ohif/extension-cornerstone": "^2.4.2",
     "@ohif/extension-dicom-html": "^1.1.0",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.1",
     "@ohif/extension-lesion-tracker": "^0.2.0",
-    "@ohif/extension-vtk": "^1.2.20",
+    "@ohif/extension-vtk": "^1.2.23",
     "@ohif/i18n": "^0.52.6",
-    "@ohif/ui": "^1.3.0",
+    "@ohif/ui": "^1.3.2",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/src/connectedComponents/ToolContextMenu.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { commandsManager } from './../App.js';
-
 import { ContextMenu } from '@ohif/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { commandsManager } from './../App.js';
 
 const toolTypes = [
   'Angle',
@@ -94,7 +93,7 @@ const ToolContextMenu = ({
 
   return (
     <div className="ToolContextMenu">
-      <ContextMenu items={dropdownItems} onClick={onClickHandler} />;
+      <ContextMenu items={dropdownItems} onClick={onClickHandler} />
     </div>
   );
 };

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -25,9 +25,17 @@ class ToolbarRow extends Component {
     isRightSidePanelOpen: PropTypes.bool.isRequired,
     selectedLeftSidePanel: PropTypes.string.isRequired,
     selectedRightSidePanel: PropTypes.string.isRequired,
-    handleSidePanelChange: PropTypes.func,
+    handleSidePanelChange: PropTypes.func.isRequired,
     activeContexts: PropTypes.arrayOf(PropTypes.string).isRequired,
     studies: PropTypes.array,
+    t: PropTypes.func.isRequired,
+    // NOTE: withDialog, withModal HOCs
+    dialog: PropTypes.any,
+    modal: PropTypes.any,
+  };
+
+  static defaultProps = {
+    studies: [],
   };
 
   constructor(props) {
@@ -50,30 +58,30 @@ class ToolbarRow extends Component {
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
+
     this.buttonGroups = {
-      left: [
-        // TODO: This should come from extensions, instead of being baked in
-        {
-          value: 'studies',
-          icon: 'th-large',
-          bottomLabel: this.props.t('Series'),
-        },
-      ],
+      left: [],
       right: [],
     };
 
+    // ~ FIND MENU OPTIONS
     panelModules.forEach(panelExtension => {
       const panelModule = panelExtension.module;
       const defaultContexts = Array.from(panelModule.defaultContext);
 
-      // MENU OPTIONS
       panelModule.menuOptions.forEach(menuOption => {
         const contexts = Array.from(menuOption.context || defaultContexts);
-
-        const activeContextIncludesAnyPanelContexts = this.props.activeContexts.some(
-          actx => contexts.includes(actx)
+        const hasActiveContext = this.props.activeContexts.some(actx =>
+          contexts.includes(actx)
         );
-        if (activeContextIncludesAnyPanelContexts) {
+
+        // It's a bit beefy to pass studies; probably only need to be reactive on `studyInstanceUIDs` and activeViewport?
+        // Note: This does not cleanly handle `studies` prop updating with panel open
+        const isDisabled =
+          typeof menuOption.isDisabled === 'function' &&
+          menuOption.isDisabled(this.props.studies);
+
+        if (hasActiveContext && !isDisabled) {
           const menuOptionEntry = {
             value: menuOption.target,
             icon: menuOption.icon,
@@ -85,6 +93,13 @@ class ToolbarRow extends Component {
         }
       });
     });
+
+    // TODO: This should come from extensions, instead of being baked in
+    this.buttonGroups.left.unshift({
+      value: 'studies',
+      icon: 'th-large',
+      bottomLabel: this.props.t('Series'),
+    });
   }
 
   componentDidUpdate(prevProps) {
@@ -222,6 +237,10 @@ function _getButtonComponents(toolbarButtons, activeButtons) {
 }
 
 /**
+ * TODO: DEPRECATE
+ * This is used exclusively in `extensions/cornerstone/src`
+ * We have better ways with new UI Services to trigger "builtin" behaviors
+ *
  * A handy way for us to handle different button types. IE. firing commands for
  * buttons, or initiation built in behavior.
  *
@@ -273,7 +292,7 @@ function _getVisibleToolbarButtons() {
 
 function _handleBuiltIn(button) {
   /* TODO: Keep cine button active until its unselected. */
-  const { dialog, modal, t } = this.props;
+  const { dialog, t } = this.props;
   const { dialogId } = this.state;
   const { id, options } = button;
 

platform/viewer/src/connectedComponents/Viewer.js

@@ -18,45 +18,30 @@ import WhiteLabellingContext from '../context/WhiteLabellingContext.js';
 import UserManagerContext from '../context/UserManagerContext';
 
 import './Viewer.css';
-/**
- * Inits OHIF Hanging Protocol's onReady.
- * It waits for OHIF Hanging Protocol to be ready to instantiate the ProtocolEngine
- * Hanging Protocol will use OHIF LayoutManager to render viewports properly
- */
-/*const initHangingProtocol = () => {
-    // When Hanging Protocol is ready
-    HP.ProtocolStore.onReady(() => {
-
-        // Gets all StudyMetadata objects: necessary for Hanging Protocol to access study metadata
-        const studyMetadataList = OHIF.viewer.StudyMetadataList.all();
-
-        // Instantiate StudyMetadataSource: necessary for Hanging Protocol to get study metadata
-        const studyMetadataSource = new OHIF.studies.classes.OHIFStudyMetadataSource();
-
-        // Get prior studies map
-        const studyPriorsMap = OHIF.studylist.functions.getStudyPriorsMap(studyMetadataList);
-
-        // Creates Protocol Engine object with required arguments
-        const ProtocolEngine = new HP.ProtocolEngine(layoutManager, studyMetadataList, studyPriorsMap, studyMetadataSource);
-
-        // Sets up Hanging Protocol engine
-        HP.setEngine(ProtocolEngine);
-    });
-};*/
-
-/*const viewportUtils = OHIF.viewerbase.viewportUtils;
-
-OHIF.viewer.functionList = {
-    toggleCineDialog: viewportUtils.toggleCineDialog,
-    toggleCinePlay: viewportUtils.toggleCinePlay,
-    clearTools: viewportUtils.clearTools,
-    resetViewport: viewportUtils.resetViewport,
-    invert: viewportUtils.invert
-};*/
 
 class Viewer extends Component {
   static propTypes = {
-    studies: PropTypes.array,
+    studies: PropTypes.arrayOf(
+      PropTypes.shape({
+        studyInstanceUid: PropTypes.string.isRequired,
+        studyDate: PropTypes.string,
+        displaySets: PropTypes.arrayOf(
+          PropTypes.shape({
+            displaySetInstanceUid: PropTypes.string.isRequired,
+            seriesDescription: PropTypes.string,
+            seriesNumber: PropTypes.number,
+            instanceNumber: PropTypes.number,
+            numImageFrames: PropTypes.number,
+            modality: PropTypes.string.isRequired,
+            images: PropTypes.arrayOf(
+              PropTypes.shape({
+                getImageId: PropTypes.func.isRequired,
+              })
+            ),
+          })
+        ),
+      })
+    ),
     studyInstanceUids: PropTypes.array,
     activeServer: PropTypes.shape({
       type: PropTypes.string,

platform/viewer/src/googleCloud/DatasetPicker.js

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

platform/viewer/src/googleCloud/DatasetSelector.js

@@ -122,10 +122,7 @@ class DatasetSelector extends Component {
       <>
         {projectBreadcrumbs}
         {!project && (
-          <ProjectPicker
-            accessToken={accessToken}
-            onSelect={onProjectSelect}
-          />
+          <ProjectPicker accessToken={accessToken} onSelect={onProjectSelect} />
         )}
 
         {project && !location && (

platform/viewer/src/googleCloud/DicomStorePicker.js

@@ -10,13 +10,13 @@ export default class DicomStorePicker extends Component {
     loading: true,
     stores: [],
     locations: [],
-    filterStr: ""
+    filterStr: '',
   };
 
   static propTypes = {
     dataset: PropTypes.object,
     onSelect: PropTypes.func,
-    accessToken: PropTypes.string.isRequired
+    accessToken: PropTypes.string.isRequired,
   };
 
   async componentDidMount() {
@@ -44,10 +44,11 @@ export default class DicomStorePicker extends Component {
 
     return (
       <div>
-        <input class="form-control gcp-input"
-            type="text"
-            value={ filterStr }
-            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        <input
+          className="form-control gcp-input"
+          type="text"
+          value={filterStr}
+          onChange={e => this.setState({ filterStr: e.target.value })}
         />
         <DicomStoreList
           stores={stores}

platform/viewer/src/googleCloud/DicomStorePickerModal.js

@@ -1,57 +1,56 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap-modal';
 import DatasetSelector from './DatasetSelector';
 import './googleCloud.css';
 import { withTranslation } from 'react-i18next';
 import * as GoogleCloudUtilServers from './utils/getServers';
 
-class DicomStorePickerModal extends Component {
-  static propTypes = {
-    url: PropTypes.string,
-    user: PropTypes.object.isRequired,
-    setServers: PropTypes.func.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    onClose: PropTypes.func,
+import { servicesManager } from './../App.js';
+
+function DicomStorePickerModal({
+  isOpen = false,
+  setServers,
+  onClose,
+  user,
+  url,
+  t,
+}) {
+  const { UIModalService } = servicesManager.services;
+
+  const showDicomStorePickerModal = () => {
+    const handleEvent = data => {
+      const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
+      setServers(servers);
+
+      // Force auto close
+      UIModalService.hide();
+      onClose();
+    };
+
+    if (UIModalService) {
+      UIModalService.show({
+        content: DatasetSelector,
+        title: t('Google Cloud Healthcare API'),
+        contentProps: {
+          setServers: handleEvent,
+          user,
+          url,
+        },
+      });
+    }
   };
 
-  static defaultProps = {
-    isOpen: false,
-  };
-
-  handleEvent = data => {
-    const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
-    this.props.setServers(servers);
-    // Force auto close
-    this.props.onClose();
-  };
-
-  render() {
-    return (
-      <Modal
-        show={this.props.isOpen}
-        onHide={this.props.onClose}
-        aria-labelledby="ModalHeader"
-        className="modal fade themed in"
-        backdrop={false}
-        size={'md'}
-        keyboard={true}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>
-            {this.props.t('Google Cloud Healthcare API')}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <DatasetSelector
-            setServers={this.handleEvent}
-            user={this.props.user}
-            url={this.props.url}
-          />
-        </Modal.Body>
-      </Modal>
-    );
-  }
+  return (
+    <React.Fragment>{isOpen && showDicomStorePickerModal()}</React.Fragment>
+  );
 }
 
+DicomStorePickerModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  setServers: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  user: PropTypes.object.isRequired,
+  url: PropTypes.string,
+};
+
 export default withTranslation('Common')(DicomStorePickerModal);

platform/viewer/src/googleCloud/LocationPicker.js

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

platform/viewer/src/googleCloud/ProjectPicker.js

@@ -30,7 +30,7 @@ export default class ProjectPicker extends Component {
 
     this.setState({
       projects: response.data.projects || [],
-      filterStr: "",
+      filterStr: '',
       loading: false,
     });
   }
@@ -40,10 +40,11 @@ export default class ProjectPicker extends Component {
     const { onSelect } = this.props;
     return (
       <div>
-        <input class="form-control gcp-input"
-            type="text"
-            value={ filterStr }
-            onChange={ e => this.setState({ filterStr: e.target.value }) } 
+        <input
+          className="form-control gcp-input"
+          type="text"
+          value={filterStr}
+          onChange={e => this.setState({ filterStr: e.target.value })}
         />
         <ProjectsList
           projects={projects}

yarn.lock

@@ -15202,10 +15202,10 @@ react-codemirror2@^6.0.0:
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-6.0.0.tgz#180065df57a64026026cde569a9708fdf7656525"
   integrity sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==
 
-react-cornerstone-viewport@2.x.x:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.1.0.tgz#1f353e3b0a57c45add70e5040b819290d9f55f4b"
-  integrity sha512-HahonGn2ZSud/yMSClWL3YDlh74hE46OMyTeTI7i80EWYPXO1eKeHajwyFvfl2wWXycuotpyhUlwIfQY1h4jRw==
+react-cornerstone-viewport@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.6.tgz#1c76bd37c95284254767296952845bacd3b810a4"
+  integrity sha512-MBs1Mgl0g0YswkhgoaYlaPoPDVs/HZQ3Z89thHxVytvJsgnQvhc3YrR48iRaUfQj0eYoazh7AL/lLCfd8veFKA==
   dependencies:
     classnames "^2.2.6"
     date-fns "^2.2.1"