chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.13
 - @ohif/viewer@1.10.3

README.md

@@ -26,6 +26,7 @@
 [![Netlify Status][netlify-image]][netlify-url]
 [![CircleCI][circleci-image]][circleci-url]
 [![codecov][codecov-image]][codecov-url]
+[![This project is using Percy.io for visual regression testing.][percy-image]](percy-url)
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors)
 <!-- prettier-ignore-end -->
 
@@ -288,6 +289,8 @@ MIT © [OHIF](https://github.com/OHIF)
 [docker-image-url]: https://hub.docker.com/r/ohif/viewer
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
+[percy-image]: https://percy.io/static/images/percy-badge.svg
+[percy-url]: https://percy.io/Open-Health-Imaging-Foundation/OHIF-Viewer
 <!-- Links -->
 [monorepo]: https://en.wikipedia.org/wiki/Monorepo
 [how-to-fork]: https://help.github.com/en/articles/fork-a-repo

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.12...@ohif/extension-vtk@0.52.13) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.11...@ohif/extension-vtk@0.52.12) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.52.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.10...@ohif/extension-vtk@0.52.11) (2019-10-15)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.11",
+  "version": "0.52.13",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "react-vtkjs-viewport": "^0.1.6"
+    "react-vtkjs-viewport": "^0.3.1"
   },
   "devDependencies": {
     "@ohif/core": "^1.4.0",

extensions/vtk/src/ConnectedVTKViewport.js

@@ -1,6 +1,6 @@
-import OHIF from "@ohif/core";
-import { View2D } from "react-vtkjs-viewport";
-import { connect } from "react-redux";
+import OHIF from '@ohif/core';
+import { View2D } from 'react-vtkjs-viewport';
+import { connect } from 'react-redux';
 
 const { setViewportActive, setViewportSpecificData } = OHIF.redux.actions;
 
@@ -24,7 +24,7 @@ const mapStateToProps = (state, ownProps) => {
     // Hopefully this doesn't break anything under the hood for this one
     // activeTool: activeButton && activeButton.command,
     ...dataFromStore,
-    enableStackPrefetch: isActive
+    enableStackPrefetch: isActive,
   };
 };
 
@@ -38,7 +38,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 
     setViewportSpecificData: data => {
       dispatch(setViewportSpecificData(viewportIndex, data));
-    }
+    },
   };
 };
 
@@ -63,10 +63,10 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       // Store the API details for later
       //setViewportSpecificData({ vtkApi: api });
 
-      if (afterCreation && typeof afterCreation === "function") {
+      if (afterCreation && typeof afterCreation === 'function') {
         afterCreation(api);
       }
-    }
+    },
   };
   return props;
 };

extensions/vtk/src/LoadingIndicator.css

@@ -3,15 +3,15 @@
 }
 
 .loadingIndicator {
-  background-color: rgba(0, 0, 0, 0.75);
-  font-size: 18px;
-  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 8px;
+  height: 20%;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
 
-  /* Necessary for click-through to cornerstone element below */
+  /* Necessary for click-through to vtkjs element below */
   pointer-events: none;
 }

extensions/vtk/src/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import './LoadingIndicator.css';
 
 import React, { PureComponent } from 'react';
-
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
 class LoadingIndicator extends PureComponent {
@@ -35,7 +35,8 @@ class LoadingIndicator extends PureComponent {
           <div className="imageViewerLoadingIndicator loadingIndicator">
             <div className="indicatorContents">
               <p>
-                Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw" />{' '}
+                {this.props.t('Reformatting')}...
+                <i className="fa fa-spin fa-circle-o-notch fa-fw" />
                 {percComplete}
               </p>
             </div>
@@ -46,4 +47,4 @@ class LoadingIndicator extends PureComponent {
   }
 }
 
-export default LoadingIndicator;
+export default withTranslation('Common')(LoadingIndicator);

extensions/vtk/src/OHIFVTKViewport.js

@@ -11,7 +11,6 @@ import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
 import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
 import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
-import vtkViewportSubscriptionManager from './utils/vtkViewportSubscriptionManager.js';
 
 const { StackManager } = OHIF.utils;
 
@@ -172,47 +171,45 @@ class OHIFVTKViewport extends Component {
       default:
         imageDataObject = getImageData(stack.imageIds, displaySetInstanceUid);
 
-        const loadImageDataPromise = loadImageData(imageDataObject);
-
-        return loadImageDataPromise.then(() => {
-          return {
-            data: imageDataObject.vtkImageData,
-          };
-        });
+        return imageDataObject;
     }
   };
 
-  getOrCreateVolume(data, displaySetInstanceUid) {
+  getOrCreateVolume(imageDataObject, displaySetInstanceUid) {
     if (volumeCache[displaySetInstanceUid]) {
       return volumeCache[displaySetInstanceUid];
     }
 
+    const { vtkImageData, imageMetaData0 } = imageDataObject;
+    const { windowWidth, windowCenter, modality } = imageMetaData0;
+
+    let lower;
+    let upper;
+
+    if (modality === 'PT') {
+      // For PET just set the range to 0-5 SUV
+      lower = 0;
+      upper = 5;
+    } else {
+      lower = windowCenter - windowWidth / 2.0;
+      upper = windowCenter + windowWidth / 2.0;
+    }
+
     const volumeActor = vtkVolume.newInstance();
     const volumeMapper = vtkVolumeMapper.newInstance();
 
     volumeActor.setMapper(volumeMapper);
-    volumeMapper.setInputData(data);
+    volumeMapper.setInputData(vtkImageData);
 
-    const range = data
-      .getPointData()
-      .getScalars()
-      .getRange();
-
-    // TODO: For PET we might want to just set this to 0-5 SUV
     volumeActor
       .getProperty()
       .getRGBTransferFunction(0)
-      .setRange(range[0], range[1]);
+      .setRange(lower, upper);
 
-    // TODO: Should look into implementing autoAdjustSampleDistance in vtk
-    const sampleDistance =
-      1.2 *
-      Math.sqrt(
-        data
-          .getSpacing()
-          .map(v => v * v)
-          .reduce((a, b) => a + b, 0)
-      );
+    const spacing = vtkImageData.getSpacing();
+    // Set the sample distance to half the mean length of one side. This is where the divide by 6 comes from.
+    // https://github.com/Kitware/VTK/blob/6b559c65bb90614fb02eb6d1b9e3f0fca3fe4b0b/Rendering/VolumeOpenGL2/vtkSmartVolumeMapper.cxx#L344
+    const sampleDistance = (spacing[0] + spacing[1] + spacing[2]) / 6;
 
     volumeMapper.setSampleDistance(sampleDistance);
 
@@ -221,7 +218,7 @@ class OHIFVTKViewport extends Component {
     return volumeActor;
   }
 
-  async setStateFromProps() {
+  setStateFromProps() {
     const { studies, displaySet } = this.props.viewportData;
     const {
       studyInstanceUid,
@@ -238,8 +235,7 @@ class OHIFVTKViewport extends Component {
     }
 
     const sopClassUid = sopClassUids[0];
-
-    let { data, labelmap } = await this.getViewportData(
+    const imageDataObject = this.getViewportData(
       studies,
       studyInstanceUid,
       displaySetInstanceUid,
@@ -248,29 +244,51 @@ class OHIFVTKViewport extends Component {
       frameIndex
     );
 
+    this.imageDataObject = imageDataObject;
+
     // TODO: Temporarily disabling this since it is not yet
     // being used and hurts performance significantly.
     /*if (!labelmap) {
       labelmap = createLabelMapImageData(data);
     }*/
 
-    const volumeActor = this.getOrCreateVolume(data, displaySetInstanceUid);
+    const volumeActor = this.getOrCreateVolume(
+      imageDataObject,
+      displaySetInstanceUid
+    );
 
     this.setState({
-      volumes: [volumeActor],
-      paintFilterBackgroundImageData: data,
-      paintFilterLabelMapImageData: labelmap,
+      paintFilterBackgroundImageData: imageDataObject.vtkImageData,
+      paintFilterLabelMapImageData: null, // TODO
+      percentComplete: 0,
     });
+
+    this.setState(
+      {
+        paintFilterBackgroundImageData: imageDataObject.vtkImageData,
+        paintFilterLabelMapImageData: null, // TODO
+        percentComplete: 0,
+      },
+      () => {
+        this.loadProgressively(imageDataObject);
+
+        // TODO: There must be a better way to do this.
+        // We do this so that if all the data is available the react-vtkjs-viewport
+        // Will render _something_ before the volumes are set and the volume
+        // Construction that happens in react-vtkjs-viewport locks up the CPU.
+        setTimeout(() => {
+          this.setState({
+            volumes: [volumeActor],
+          });
+        }, 200);
+      }
+    );
   }
 
   componentDidMount() {
     this.setStateFromProps();
   }
 
-  componentWillUnmount() {
-    vtkViewportSubscriptionManager.unsubscribe(this.props.viewportIndex);
-  }
-
   componentDidUpdate(prevProps) {
     const { studies, displaySet } = this.props.viewportData;
     const prevDisplaySet = prevProps.viewportData.displaySet;
@@ -285,6 +303,37 @@ class OHIFVTKViewport extends Component {
     }
   }
 
+  loadProgressively(imageDataObject) {
+    loadImageData(imageDataObject);
+
+    const { isLoading, insertPixelDataPromises } = imageDataObject;
+
+    const numberOfFrames = insertPixelDataPromises.length;
+
+    if (!isLoading) {
+      this.setState({ isLoaded: true });
+      return;
+    }
+
+    insertPixelDataPromises.forEach(promise => {
+      promise.then(numberProcessed => {
+        const percentComplete = Math.floor(
+          (numberProcessed * 100) / numberOfFrames
+        );
+
+        if (percentComplete !== this.state.percentComplete) {
+          this.setState({
+            percentComplete,
+          });
+        }
+      });
+    });
+
+    Promise.all(insertPixelDataPromises).then(() => {
+      this.setState({ isLoaded: true });
+    });
+  }
+
   render() {
     let childrenWithProps = null;
 
@@ -302,21 +351,23 @@ class OHIFVTKViewport extends Component {
 
     return (
       <>
-        {this.state.volumes ? (
-          <ConnectedVTKViewport
-            volumes={this.state.volumes}
-            paintFilterLabelMapImageData={
-              this.state.paintFilterLabelMapImageData
-            }
-            paintFilterBackgroundImageData={
-              this.state.paintFilterBackgroundImageData
-            }
-            viewportIndex={this.props.viewportIndex}
-          />
-        ) : (
-          <div style={style}>
-            <LoadingIndicator />
-          </div>
+        <div style={style}>
+          {!this.state.isLoaded && (
+            <LoadingIndicator percentComplete={this.state.percentComplete} />
+          )}
+          {this.state.volumes && (
+            <ConnectedVTKViewport
+              volumes={this.state.volumes}
+              paintFilterLabelMapImageData={
+                this.state.paintFilterLabelMapImageData
+              }
+              paintFilterBackgroundImageData={
+                this.state.paintFilterBackgroundImageData
+              }
+              viewportIndex={this.props.viewportIndex}
+            />
+          )}
+        </div>
         )}
         {childrenWithProps}
       </>

extensions/vtk/src/commandsModule.js

@@ -4,66 +4,16 @@ import {
   vtkInteractorStyleMPRSlice,
   vtkInteractorStyleMPRRotate,
   vtkSVGCrosshairsWidget,
-  vtkSVGWidgetManager,
 } from 'react-vtkjs-viewport';
 
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
-import vtkViewportSubscriptionManager from './utils/vtkViewportSubscriptionManager.js';
-import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
-import vtkMath from 'vtk.js/Sources/Common/Core/Math';
-import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
 
 const { BlendMode } = Constants;
 
 // TODO: Put this somewhere else
 let apis = {};
-let currentSlabThickness = 0.1;
-let defaultSlabThickness = 0.1;
-
-function getCrosshairCallbackForIndex(index) {
-  return ({ worldPos }) => {
-    // Set camera focal point to world coordinate for linked views
-    apis.forEach((api, viewportIndex) => {
-      if (viewportIndex !== index) {
-        // We are basically doing the same as getSlice but with the world coordinate
-        // that we want to jump to instead of the camera focal point.
-        // I would rather do the camera adjustment directly but I keep
-        // doing it wrong and so this is good enough for now.
-        const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-        const istyle = renderWindow.getInteractor().getInteractorStyle();
-        const sliceNormal = istyle.getSliceNormal();
-        const transform = vtkMatrixBuilder
-          .buildFromDegree()
-          .identity()
-          .rotateFromDirections(sliceNormal, [1, 0, 0]);
-
-        const mutatedWorldPos = worldPos.slice();
-        transform.apply(mutatedWorldPos);
-        const slice = mutatedWorldPos[0];
-
-        istyle.setSlice(slice);
-
-        renderWindow.render();
-      }
-
-      const renderer = api.genericRenderWindow.getRenderer();
-      const wPos = vtkCoordinate.newInstance();
-      wPos.setCoordinateSystemToWorld();
-      wPos.setValue(worldPos);
-
-      const displayPosition = wPos.getComputedDisplayValue(renderer);
-      const { svgWidgetManager } = api;
-      api.svgWidgets.crosshairsWidget.setPoint(
-        displayPosition[0],
-        displayPosition[1]
-      );
-      svgWidgetManager.render();
-    });
-  };
-}
 
 async function _getActiveViewportVTKApi(viewports) {
   const {
@@ -105,8 +55,6 @@ async function _getActiveViewportVTKApi(viewports) {
 
 function _setView(api, sliceNormal, viewUp) {
   const renderWindow = api.genericRenderWindow.getRenderWindow();
-  const renderer = api.genericRenderWindow.getRenderer();
-  const camera = renderer.getActiveCamera();
   const istyle = renderWindow.getInteractor().getInteractorStyle();
   istyle.setSliceNormal(...sliceNormal);
   istyle.setViewUp(...viewUp);
@@ -114,41 +62,6 @@ function _setView(api, sliceNormal, viewUp) {
   renderWindow.render();
 }
 
-function switchMPRInteractors(api, istyle) {
-  const renderWindow = api.genericRenderWindow.getRenderWindow();
-  const renderer = api.genericRenderWindow.getRenderer();
-  const camera = renderer.getActiveCamera();
-  const currentIStyle = renderWindow.getInteractor().getInteractorStyle();
-
-  let currentViewport;
-  if (currentIStyle.getViewport && istyle.getViewport) {
-    currentViewport = currentIStyle.getViewport();
-  }
-
-  let currentSlabThickness;
-  if (currentIStyle.getSlabThickness && istyle.getSlabThickness) {
-    currentSlabThickness = currentIStyle.getSlabThickness();
-    defaultSlabThickness = currentSlabThickness;
-  }
-
-  renderWindow.getInteractor().setInteractorStyle(istyle);
-
-  // TODO: Not sure why this is required the second time this function is called
-  istyle.setInteractor(renderWindow.getInteractor());
-
-  if (currentViewport) {
-    istyle.setViewport(currentViewport);
-  }
-
-  if (istyle.getVolumeMapper() !== api.volumes[0]) {
-    if (currentSlabThickness) {
-      istyle.setSlabThickness(currentSlabThickness);
-    }
-
-    istyle.setVolumeMapper(api.volumes[0]);
-  }
-}
-
 const actions = {
   axial: async ({ viewports }) => {
     const api = await _getActiveViewportVTKApi(viewports);
@@ -175,52 +88,48 @@ const actions = {
     apis.forEach(api => {
       const istyle = vtkInteractorStyleMPRRotate.newInstance();
 
-      switchMPRInteractors(api, istyle);
+      api.setInteractorStyle({ istyle });
     });
   },
   enableCrosshairsTool: () => {
-    apis.forEach((api, index) => {
+    apis.forEach((api, apiIndex) => {
       const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
 
-      switchMPRInteractors(api, istyle);
-
-      istyle.setCallback(getCrosshairCallbackForIndex(index));
+      api.setInteractorStyle({
+        istyle,
+        configuration: { apis, apiIndex },
+      });
     });
   },
   enableLevelTool: () => {
+    const callbacks = {
+      setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
+        apis.forEach(api => {
+          const renderWindow = api.genericRenderWindow.getRenderWindow();
+
+          renderWindow.render();
+
+          api.updateVOI(windowWidth, windowCenter);
+        });
+      },
+    };
+
     apis.forEach(api => {
       const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
 
-      switchMPRInteractors(api, istyle);
+      api.setInteractorStyle({ istyle, callbacks });
     });
   },
   setSlabThickness: ({ slabThickness }) => {
-    currentSlabThickness = slabThickness;
-
     apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
-
-      if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(currentSlabThickness);
-      }
-
-      renderWindow.render();
+      api.setSlabThickness(slabThickness);
     });
   },
   changeSlabThickness: ({ change }) => {
-    currentSlabThickness += change;
-    currentSlabThickness = Math.max(currentSlabThickness, 0.1);
-
     apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
+      const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
 
-      if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(currentSlabThickness);
-      }
-
-      renderWindow.render();
+      api.setSlabThickness(slabThickness);
     });
   },
   setBlendModeToComposite: () => {
@@ -228,13 +137,15 @@ const actions = {
       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(defaultSlabThickness);
+        istyle.setSlabThickness(slabThickness);
       }
       renderWindow.render();
     });
@@ -252,7 +163,6 @@ const actions = {
   setBlendMode: ({ blendMode }) => {
     apis.forEach(api => {
       const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
 
       api.volumes[0].getMapper().setBlendMode(blendMode);
 
@@ -260,78 +170,60 @@ const actions = {
     });
   },
   mpr2d: async ({ viewports }) => {
+    // TODO push a lot of this backdoor logic lower down to the library level.
     const displaySet =
       viewports.viewportSpecificData[viewports.activeViewportIndex];
 
-    let apiByViewport;
+    // 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 {
-      apiByViewport = await setMPRLayout(displaySet);
+      apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
     } catch (error) {
       throw new Error(error);
     }
 
-    apis = apiByViewport;
+    if (cornerstoneVOI) {
+      setVOI(cornerstoneVOI);
+    }
 
-    const rgbTransferFunction = apiByViewport[0].volumes[0]
-      .getProperty()
-      .getRGBTransferFunction(0);
-
-    const onModifiedSubscription = rgbTransferFunction.onModified(() => {
-      apiByViewport.forEach(a => {
-        const renderWindow = a.genericRenderWindow.getRenderWindow();
-
-        renderWindow.render();
-      });
-    });
-
-    vtkViewportSubscriptionManager.pushSubscription(0, onModifiedSubscription);
-
-    apiByViewport.forEach((api, index) => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const renderer = api.genericRenderWindow.getRenderer();
-      const camera = renderer.getActiveCamera();
+    // Add widgets and set default interactorStyle of each viewport.
+    apis.forEach((api, apiIndex) => {
+      api.addSVGWidget(
+        vtkSVGCrosshairsWidget.newInstance(),
+        'crosshairsWidget'
+      );
 
       const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
-      renderWindow.getInteractor().setInteractorStyle(istyle);
 
-      istyle.setVolumeMapper(api.volumes[0]);
-      istyle.setCallback(getCrosshairCallbackForIndex(index));
-
-      const svgWidgetManager = vtkSVGWidgetManager.newInstance();
-      svgWidgetManager.setRenderer(renderer);
-      svgWidgetManager.setScale(1);
-
-      const crosshairsWidget = vtkSVGCrosshairsWidget.newInstance();
-
-      svgWidgetManager.addWidget(crosshairsWidget);
-      svgWidgetManager.render();
-
-      api.svgWidgetManager = svgWidgetManager;
-      api.svgWidgets = {
-        crosshairsWidget,
-      };
-
-      switch (index) {
-        default:
-        case 0:
-          //Axial
-          istyle.setSliceNormal(0, 0, 1);
-          istyle.setViewUp(0, -1, 0);
-
-          break;
-        case 1:
-          // sagittal
-          istyle.setSliceNormal(1, 0, 0);
-          istyle.setViewUp(0, 0, 1);
-          break;
-        case 2:
-          // Coronal
-          istyle.setSliceNormal(0, 1, 0);
-          istyle.setViewUp(0, 0, 1);
-          break;
-      }
-
-      renderWindow.render();
+      api.setInteractorStyle({
+        istyle,
+        configuration: { apis, apiIndex },
+      });
     });
   },
 };
@@ -421,3 +313,41 @@ export default {
   definitions,
   defaultContext: 'ACTIVE_VIEWPORT::VTK',
 };
+
+function getVOIFromCornerstoneViewport(displaySet) {
+  const cornerstoneElement = cornerstone.getEnabledElement(displaySet.dom);
+
+  if (cornerstoneElement) {
+    const imageId = cornerstoneElement.image.imageId;
+
+    const { modality } = cornerstone.metaData.get(
+      'generalSeriesModule',
+      imageId
+    );
+
+    if (modality !== 'PT') {
+      const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
+
+      return {
+        windowWidth,
+        windowCenter,
+      };
+    }
+  }
+}
+
+function setVOI(voi) {
+  const { windowWidth, windowCenter } = voi;
+  const lower = windowCenter - windowWidth / 2.0;
+  const upper = windowCenter + windowWidth / 2.0;
+
+  const rgbTransferFunction = apis[0].volumes[0]
+    .getProperty()
+    .getRGBTransferFunction(0);
+
+  rgbTransferFunction.setRange(lower, upper);
+
+  apis.forEach(api => {
+    api.updateVOI(windowWidth, windowCenter);
+  });
+}

extensions/vtk/src/utils/setMPRLayout.js

@@ -1,11 +1,23 @@
 import setLayoutAndViewportData from './setLayoutAndViewportData.js';
 
-export default function setMPRLayout(displaySet) {
+export default function setMPRLayout(
+  displaySet,
+  viewportPropsArray,
+  numRows = 1,
+  numColumns = 1
+) {
   return new Promise((resolve, reject) => {
     const viewports = [];
-    const numRows = 1;
-    const numColumns = 3;
     const numViewports = numRows * numColumns;
+
+    if (viewportPropsArray && viewportPropsArray.length !== numViewports) {
+      reject(
+        new Error(
+          'viewportProps is supplied but its length is not equal to numViewports'
+        )
+      );
+    }
+
     const viewportSpecificData = {};
 
     for (let i = 0; i < numViewports; i++) {
@@ -17,8 +29,8 @@ export default function setMPRLayout(displaySet) {
     const apis = [];
     viewports.forEach((viewport, index) => {
       apis[index] = null;
+      const viewportProps = viewportPropsArray[index];
       viewports[index] = Object.assign({}, viewports[index], {
-        // plugin: 'vtk',
         vtk: {
           mode: 'mpr', // TODO: not used
           afterCreation: api => {
@@ -28,6 +40,7 @@ export default function setMPRLayout(displaySet) {
               resolve(apis);
             }
           },
+          ...viewportProps,
         },
       });
     });

extensions/vtk/src/utils/vtkViewportSubscriptionManager.js

@@ -1,28 +0,0 @@
-const subscriptions = [];
-
-// This is pretty hacky right now, but it makes sure we don't keep adding subscriptions.
-// TODO -> Nuke this and move it up a layer once we have more vigorous layout support.
-
-const vtkViewportSubscriptionManager = {
-  subscriptions,
-  pushSubscription(viewportIndex, subscription) {
-    if (!Array.isArray(subscriptions[viewportIndex])) {
-      subscriptions[viewportIndex] = [];
-    }
-
-    subscriptions[viewportIndex].push(subscription);
-  },
-  unsubscribe(viewportIndex) {
-    if (!subscriptions[viewportIndex]) {
-      return;
-    }
-
-    while (subscriptions[viewportIndex].length) {
-      subscriptions[viewportIndex].pop().unsubscribe();
-    }
-
-    subscriptions[viewportIndex] = null;
-  },
-};
-
-export default vtkViewportSubscriptionManager;

platform/viewer/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.2...@ohif/viewer@1.10.3) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [1.10.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.1...@ohif/viewer@1.10.2) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
 ## [1.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.0...@ohif/viewer@1.10.1) (2019-10-16)
 
 **Note:** Version bump only for package @ohif/viewer

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

@@ -17,7 +17,11 @@ describe('OHIF VTK Extension', () => {
     cy.get('.PluginSwitch > .toolbar-button')
       .as('twodmprBtn')
       .should('be.visible')
-      .click();
+      .then(btn => {
+        if (!btn.text().includes('Exit')) {
+          btn.click();
+        }
+      });
 
     cy.initVTKToolsAliases();
     cy.wait(1000);

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "@ohif/extension-dicom-html": "^1.0.0",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.52.11",
+    "@ohif/extension-vtk": "^0.52.13",
     "@ohif/i18n": "^0.51.0",
     "@ohif/ui": "^0.55.0",
     "@tanem/react-nprogress": "^1.1.25",
@@ -82,7 +82,7 @@
     "redux-oidc": "3.1.x",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "vtk.js": "^11.0.1"
+    "vtk.js": "^11.6.0"
   },
   "devDependencies": {
     "cypress": "^3.3.1",