Add propTypes, sliceNormal prop

swederik · swederik · commit 6de3536ecbec · 2019-03-01T10:24:59.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -18,3 +18,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .idea
+.yalc
+yalc.lock
+package-lock.json
diff --git a/package.json b/package.json
@@ -84,6 +84,6 @@
   "dependencies": {
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "vtk.js": "^8.3.10"
+    "vtk.js": "^8.3.11"
   }
 }
diff --git a/src/Custom/VTKMPRViewport.js b/src/Custom/VTKMPRViewport.js
@@ -1,5 +1,5 @@
-import React from 'react';
-
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';
 import vtkWidgetManager from 'vtk.js/Sources/Widgets/Core/WidgetManager';
 import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
@@ -10,16 +10,19 @@ import vtkPaintWidget from 'vtk.js/Sources/Widgets/Widgets3D/PaintWidget';
 import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
 import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';
 
+import ViewportOverlay from '../ViewportOverlay/ViewportOverlay.js';
 import { ViewTypes } from 'vtk.js/Sources/Widgets/Core/WidgetManager/Constants';
-
 import { createSub } from './util';
 
 function createPipeline() {
-  const mapper = vtkVolumeMapper.newInstance();
-  const actor = vtkVolume.newInstance();
-  actor.setMapper(mapper);
+  const data = {
+    mapper: vtkVolumeMapper.newInstance(),
+    actor: vtkVolume.newInstance()
+  };
+
+  data.actor.setMapper(data.mapper);
 
-  return { mapper, actor };
+  return data;
 }
 
 function createLabelPipeline() {
@@ -44,7 +47,23 @@ function createLabelPipeline() {
   return labelMap;
 }
 
-export default class VtkMpr extends React.Component {
+export default class VtkMpr extends Component {
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    painting: PropTypes.bool.isRequired,
+    labelmap: PropTypes.object,
+    onPaint: PropTypes.func,
+    onPaintStart: PropTypes.func,
+    onPaintEnd: PropTypes.func,
+    sliceNormal: PropTypes.array.isRequired,
+    dataDetails: PropTypes.object
+  };
+
+  static defaultProps = {
+    painting: false,
+    sliceNormal: [0, 0, 1]
+  };
+
   constructor(props) {
     super(props);
 
@@ -99,6 +118,7 @@ export default class VtkMpr extends React.Component {
     this.renderWindow = this.genericRenderer.getRenderWindow();
 
     const istyle = vtkInteractorStyleMPRSlice.newInstance();
+    this.istyle = istyle;
     this.renderWindow.getInteractor().setInteractorStyle(istyle);
 
     this.pipeline = createPipeline();
@@ -143,6 +163,7 @@ export default class VtkMpr extends React.Component {
 
         if (!prevProps.data && this.props.data) {
           this.renderer.addVolume(this.pipeline.actor);
+
           // re-render if data has updated
           this.subs.data.sub(
             this.props.data.onModified(() => this.renderWindow.render())
@@ -221,6 +242,16 @@ export default class VtkMpr extends React.Component {
         this.viewWidget = null;
       }
     }
+
+    if (prevProps.sliceNormal !== this.props.sliceNormal) {
+      const istyle = this.istyle;
+      istyle.setSliceNormal(...this.props.sliceNormal);
+
+      const range = istyle.getSliceRange();
+      istyle.setSlice((range[0] + range[1]) / 2);
+
+      this.renderWindow.render();
+    }
   }
 
   componentWillUnmount() {
@@ -231,6 +262,31 @@ export default class VtkMpr extends React.Component {
 
   render() {
     const style = { width: '100%', height: '100%' };
-    return <div ref={this.container} style={style} />;
+
+    let voi = {
+      windowCenter: 0,
+      windowWidth: 0
+    };
+    if (this.pipeline) {
+      const actor = this.pipeline.actor;
+
+      // Note: This controls window/level
+      const rgbTransferFunction = actor.getProperty().getRGBTransferFunction(0);
+      const range = rgbTransferFunction.getMappingRange();
+      const windowWidth = range[0] + range[1];
+      const windowCenter = range[0] + windowWidth / 2;
+
+      voi = {
+        windowCenter,
+        windowWidth
+      };
+    }
+
+    return (
+      <div style={style}>
+        <div ref={this.container} style={style} />
+        <ViewportOverlay {...this.props.dataDetails} voi={voi} />
+      </div>
+    );
   }
 }
diff --git a/src/ViewportOverlay/ViewportOverlay.css b/src/ViewportOverlay/ViewportOverlay.css
@@ -0,0 +1,53 @@
+:root {
+  --viewport-tag-padding: 20px;
+}
+
+.ViewportOverlay {
+  color: #9ccef9;
+
+  .overlay-element {
+    position: absolute;
+    font-weight: 400;
+    text-shadow: 1px 1px black;
+    pointer-events: none;
+  }
+
+  .top-left {
+    top: var(--viewport-tag-padding);
+    left: var(--viewport-tag-padding);
+  }
+
+  .top-center {
+    top: var(--viewport-tag-padding);
+    padding-top: var(--viewport-tag-padding);
+    width: 100%;
+    text-align: center;
+  }
+
+  .top-right {
+    top: var(--viewport-tag-padding);
+    right: var(--viewport-tag-padding);
+    text-align: right;
+  }
+
+  .bottom-left {
+    bottom: var(--viewport-tag-padding);
+    left: var(--viewport-tag-padding);
+  }
+
+  .bottom-right {
+    bottom: var(--viewport-tag-padding);
+    right: var(--viewport-tag-padding);
+    text-align: right;
+  }
+
+  svg {
+    color: #9ccef9;
+    fill: #9ccef9;
+    stroke: #9ccef9;
+    background-color: transparent;
+    margin: 2px;
+    width: 18px;
+    height: 18px;
+  }
+}
diff --git a/src/ViewportOverlay/ViewportOverlay.js b/src/ViewportOverlay/ViewportOverlay.js
@@ -0,0 +1,74 @@
+import { PureComponent } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { helpers } from '../helpers/index.js';
+import './ViewportOverlay.css';
+
+const {
+  formatPN,
+  formatDA,
+  formatNumberPrecision,
+  formatTM,
+  isValidNumber
+} = helpers;
+
+class ViewportOverlay extends PureComponent {
+  static propTypes = {
+    voi: PropTypes.object.isRequired,
+    studyDate: PropTypes.string,
+    studyTime: PropTypes.string,
+    studyDescription: PropTypes.string,
+    patientName: PropTypes.string,
+    patientId: PropTypes.string,
+    seriesNumber: PropTypes.string,
+    seriesDescription: PropTypes.string
+  };
+
+  static defaultProps = {
+    voi: {
+      windowWidth: 0,
+      windowCenter: 0
+    }
+  };
+
+  render() {
+    const {
+      studyDate,
+      studyTime,
+      studyDescription,
+      patientName,
+      patientId,
+      seriesNumber,
+      seriesDescription,
+      voi
+    } = this.props;
+    const { windowWidth, windowCenter } = voi;
+    const wwwc = `W: ${windowWidth.toFixed(0)} L: ${windowCenter.toFixed(0)}`;
+
+    return (
+      <div className="ViewportOverlay">
+        <div className="top-left overlay-element">
+          <div>{formatPN(patientName)}</div>
+          <div>{patientId}</div>
+        </div>
+        <div className="top-right overlay-element">
+          <div>{studyDescription}</div>
+          <div>
+            {formatDA(studyDate)} {formatTM(studyTime)}
+          </div>
+        </div>
+        <div className="bottom-right overlay-element">
+          <div>{wwwc}</div>
+        </div>
+        <div className="bottom-left overlay-element">
+          <div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
+          <div>
+            <div>{seriesDescription}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ViewportOverlay;
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,15 @@
 import VTKViewport from './VTKViewport/VTKViewport';
+import ViewportOverlay from './ViewportOverlay/ViewportOverlay.js';
 import VTKMPRViewport from './Custom/VTKMPRViewport';
 import getImageData from './lib/getImageData.js';
 import loadImageData from './lib/loadImageData.js';
 
-export { VTKViewport, VTKMPRViewport, getImageData, loadImageData };
+export {
+  VTKViewport,
+  VTKMPRViewport,
+  ViewportOverlay,
+  getImageData,
+  loadImageData
+};
 
 export default VTKViewport;
diff --git a/yarn.lock b/yarn.lock
@@ -3719,7 +3719,7 @@ debug@~4.1.0:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -6373,7 +6373,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -7644,11 +7644,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -7657,33 +7652,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -7754,11 +7727,6 @@ lodash.map@^4.5.1:
   resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
   integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
@@ -10704,7 +10672,7 @@ readable-stream@~2.0.6:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
   integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c=
@@ -13079,10 +13047,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vtk.js@^8.3.10:
-  version "8.3.10"
-  resolved "https://registry.yarnpkg.com/vtk.js/-/vtk.js-8.3.10.tgz#d5f99940ea46b7f54de49bce3482b9afb7c3ca83"
-  integrity sha512-pF71oKAjfMNKiP3RNw49dgT3Y50zSwAfCqM4Z1+ggx+So8Nf/0XZZe7I8SV+t/QntX8NaSzvbRDxG/fqnRrZ8w==
+vtk.js@^8.3.11:
+  version "8.3.11"
+  resolved "https://registry.yarnpkg.com/vtk.js/-/vtk.js-8.3.11.tgz#a9fba3995bb4db805ec18a3275428dd857d0a229"
+  integrity sha512-XoFbR9KYuk0oSYzmcEQvwIs3L+kN+gny+cqRZV1mP8r7B/5JyQhWKIogYBYSZaGU/fCsROKk/ZtfyqV/idI+HQ==
   dependencies:
     base64-js "1.2.1"
     blueimp-md5 "2.10.0"

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,6 @@`
`84`	`84`	`"dependencies": {`
`85`	`85`	`"cornerstone-core": "^2.2.8",`
`86`	`86`	`"cornerstone-math": "^0.1.8",`
`87`		`- "vtk.js": "^8.3.10"`
	`87`	`+ "vtk.js": "^8.3.11"`
`88`	`88`	`}`
`89`	`89`	`}`