feat(@ohif/extension-vtk): Update app to include basic MPR with VTK (#557)

package.json

@@ -61,93 +61,84 @@
     }
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
+    "react": "^16.8.6",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react-dom": "^16.8.6"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.2.5",
+    "@babel/runtime": "^7.4.5",
-    "@babel/runtime": "^7.2.0",
+    "@ohif/extension-cornerstone": "0.0.36",
-    "@ohif/extension-cornerstone": "0.0.34",
     "@ohif/extension-dicom-microscopy": "0.0.6",
-    "@ohif/extension-vtk": "0.0.2",
+    "@ohif/extension-vtk": "0.0.4",
     "@ohif/i18n": "0.0.4",
     "classnames": "^2.2.6",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^3.11.0",
+    "cornerstone-tools": "^3.13.0",
     "cornerstone-wado-image-loader": "^2.2.3",
-    "dcmjs": "^0.3.8",
+    "dcmjs": "^0.4.7",
     "dicom-parser": "^1.8.3",
-    "dicomweb-client": "^0.4.2",
+    "dicomweb-client": "^0.4.4",
     "hammerjs": "^2.0.8",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
     "lodash.isequal": "4.5.0",
     "moment": "^2.24.0",
-    "ohif-core": "0.5.8",
+    "ohif-core": "0.5.9",
     "ohif-dicom-html-extension": "^0.0.2",
     "ohif-dicom-pdf-extension": "^0.0.6",
     "oidc-client": "1.7.x",
-    "prop-types": "^15.6.2",
+    "prop-types": "^15.7.2",
-    "react-bootstrap-modal": "^4.2.0",
-    "react-dnd": "^7.0.2",
-    "react-dnd-html5-backend": "^7.0.2",
     "react-i18next": "^10.11.0",
-    "react-redux": "^6.0.0",
+    "react-redux": "^7.1.0",
-    "react-resize-detector": "^3.4.0",
+    "react-resize-detector": "^4.2.0",
-    "react-router": "^4.3.1",
+    "react-router": "^5.0.1",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.0.1",
-    "react-viewerbase": "0.7.1",
+    "react-viewerbase": "0.9.0",
-    "react-vtkjs-viewport": "^0.0.7",
     "redux": "^4.0.1",
     "redux-oidc": "3.1.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.4.5",
-    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@semantic-release/exec": "3.3.2",
+    "@semantic-release/exec": "3.3.3",
-    "@svgr/rollup": "^4.1.0",
+    "@svgr/rollup": "^4.3.0",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^10.0.1",
-    "codecov": "3.3.0",
+    "codecov": "3.5.0",
     "commitizen": "3.1.x",
     "cpx": "1.5.0",
     "cross-env": "^5.2.0",
     "cz-conventional-changelog": "2.1.0",
-    "eslint": "5.12.0",
+    "eslint": "5.16.0",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-node": "^8.0.0",
+    "eslint-plugin-node": "^9.1.0",
-    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-promise": "^4.1.1",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react": "^7.13.0",
     "gh-pages": "2.0.1",
-    "husky": "1.3.x",
+    "husky": "2.4.x",
     "identity-obj-proxy": "3.0.x",
-    "jest-canvas-mock": "2.0.0",
+    "jest-canvas-mock": "2.1.0",
-    "jest-junit": "6.3.x",
+    "jest-junit": "6.4.x",
-    "lint-staged": "^8.1.0",
+    "lint-staged": "^8.2.1",
     "lodash": "4.17.11",
     "lodash.clonedeep": "4.5.0",
-    "prettier": "1.15.x",
+    "prettier": "1.18.x",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-scripts": "^2.1.5",
+    "react-scripts": "^3.0.1",
-    "react-test-renderer": "^16.8.6",
+    "rollup": "^1.15.5",
-    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-babel": "^4.2.0",
+    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-json": "^3.1.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-url": "^2.1.0",
+    "rollup-plugin-url": "^2.2.2",
     "semantic-release": "15.13.x",
-    "stylelint": "^9.9.0",
+    "stylelint": "^10.1.0"
-    "stylelint-config-recommended": "^2.1.0",
-    "stylus": "^0.54.5"
   }
 }

rollup.config.js

@@ -43,7 +43,7 @@ export default {
     url(),
     svgr(),
     json(),
-    resolve(),
+    resolve({preferBuiltins: true}),
     babel({
       exclude: 'node_modules/**',
       runtimeHelpers: true,
@@ -66,6 +66,7 @@ export default {
           'cornerstoneTools',
         ],
         'node_modules/dcmjs/build/dcmjs.js': ['data', 'adapters'],
+        'node_modules/prop-types/index.js': ['bool', 'number', 'string', 'shape', 'func', 'any', 'node']
       },
     }),
     builtins(),

src/App.js

@@ -41,6 +41,9 @@ const commandsManagerConfig = {
 const commandsManager = new CommandsManager(commandsManagerConfig);
 const hotkeysManager = new HotkeysManager(commandsManager);
 
+// TODO: @dannyrb will fix this
+window.commandsManager = commandsManager;
+
 // TODO: Should be done in extensions w/ commandsModule
 // ~~ ADD COMMANDS
 appCommands.init(commandsManager);
@@ -69,7 +72,7 @@ const children = {
 /** TODO: extensions should be passed in as prop as soon as we have the extensions as separate packages and then registered by ExtensionsManager */
 extensions.ExtensionManager.registerExtensions(store, [
   new OHIFCornerstoneExtension({ children }),
-  new OHIFVTKExtension(),
+  new OHIFVTKExtension({ commandsManager }),
   new OHIFDicomPDFExtension(),
   new OHIFDicomHtmlExtension(),
   new OHIFDicomMicroscopyExtension(),

src/connectedComponents/ConnectedLayoutButton.js

@@ -22,6 +22,7 @@ const mapDispatchToProps = dispatch => {
         viewports.push({
           height: `${100 / rows}%`,
           width: `${100 / columns}%`,
+          plugin: 'cornerstone', // Temporary because right now switching back from VTK breaks things
         });
       }
       const layout = {

src/connectedComponents/ConnectedPluginSwitch.js

@@ -5,10 +5,11 @@ import OHIF from 'ohif-core';
 const { setLayout } = OHIF.redux.actions;
 
 const mapStateToProps = state => {
-  const { activeViewportIndex, layout } = state.viewports;
+  const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
 
   return {
     activeViewportIndex,
+    viewportSpecificData,
     layout,
   };
 };
@@ -21,23 +22,23 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-function setSingleLayoutData(originalArray, viewportIndex, data) {
+/*function setSingleLayoutData(originalArray, viewportIndex, data) {
   const viewports = originalArray.slice();
   const layoutData = Object.assign({}, viewports[viewportIndex], data);
 
   viewports[viewportIndex] = layoutData;
 
   return viewports;
-}
+}*/
 
 const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
-  const { activeViewportIndex, layout } = propsFromState;
+  //const { activeViewportIndex, layout } = propsFromState;
-  const { setLayout } = propsFromDispatch;
+  //const { setLayout } = propsFromDispatch;
 
   // TODO: Do not display certain options if the current display set
   // cannot be displayed using these view types
   const buttons = [
-    {
+    /*{
       text: 'Acquired',
       type: 'command',
       icon: 'bars',
@@ -59,22 +60,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       icon: 'cube',
       active: false,
       onClick: () => {
-        console.warn('Axial');
+        window.commandsManager.runCommand('axial', {}, 'vtk');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: 'mpr',
-            sliceNormal: [0, 0, 1],
-          },
-        };
-
-        const layoutData = setSingleLayoutData(
-          layout.viewports,
-          activeViewportIndex,
-          data
-        );
-
-        setLayout({ viewports: layoutData });
       },
     },
     {
@@ -82,22 +68,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       icon: 'cube',
       active: false,
       onClick: () => {
-        console.warn('Sagittal');
+        window.commandsManager.runCommand('sagittal', {}, 'vtk');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: 'mpr',
-            sliceNormal: [1, 0, 0],
-          },
-        };
-
-        const layoutData = setSingleLayoutData(
-          layout.viewports,
-          activeViewportIndex,
-          data
-        );
-
-        setLayout({ viewports: layoutData });
       },
     },
     {
@@ -105,41 +76,17 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       icon: 'cube',
       active: false,
       onClick: () => {
-        console.warn('Coronal');
+        window.commandsManager.runCommand('coronal', {}, 'vtk');
-        const data = {
+      },
-          plugin: 'vtk',
+    },*/
-          vtk: {
+    {
-            mode: 'mpr',
+      text: '2D MPR',
-            sliceNormal: [0, 1, 0],
+      icon: 'cube',
-          },
+      active: false,
-        };
+      onClick: () => {
-
+        window.commandsManager.runCommand('mpr2d', {}, 'vtk');
-        const layoutData = setSingleLayoutData(
-          layout.viewports,
-          activeViewportIndex,
-          data
-        );
-
-        setLayout({ viewports: layoutData });
       },
     },
-    /*{
-      text: '3D',
-      icon: `#cube`,
-      onClick: (click) => {
-        console.warn('3D Perspective');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: '3d',
-          }
-        };
-
-        const layoutData = setSingleLayoutData(layout.viewports, activeViewportIndex, data);
-
-        setLayout({ viewports: layoutData });
-      }
-    }*/
   ];
 
   return {

src/connectedComponents/ViewerMain.js

@@ -10,8 +10,9 @@ import React from 'react';
 class ViewerMain extends Component {
   static propTypes = {
     activeViewportIndex: PropTypes.number.isRequired,
-    layout: PropTypes.object,
+    studies: PropTypes.array.isRequired,
-    viewportSpecificData: PropTypes.object,
+    viewportSpecificData: PropTypes.object.isRequired,
+    layout: PropTypes.object.isRequired,
     setViewportSpecificData: PropTypes.func.isRequired,
     clearViewportSpecificData: PropTypes.func.isRequired,
   };

src/log.js

@@ -1,6 +0,0 @@
-import loglevel from 'loglevel';
-
-const log = loglevel.getLogger('OHIFViewer');
-log.setLevel('info');
-
-export default log;