feat: 🎸 Update react-vtkjs-viewport usage to use requestPool (#1984)

* feat: 🎸 Update react-vtkjs-viewport usage to use requestPool

* Fix import of react-vtkjs-viewport to cornerstone-tools path.

* Increase maximum load time of MPR test now we are throttling requests.

* Remove debugger

Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>

extensions/cornerstone/package.json

@@ -34,7 +34,7 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dcmjs": "0.16.0",
     "dicom-parser": "^1.8.3",

extensions/dicom-rt/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "dcmjs": "0.16.0",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",

extensions/dicom-segmentation/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "dcmjs": "0.16.0",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",

extensions/vtk/package.json

@@ -33,7 +33,7 @@
     "@ohif/i18n": "^0.50.0",
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dcmjs": "0.16.0",
     "dicom-parser": "^1.8.3",
@@ -50,12 +50,12 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.9.0"
+    "react-vtkjs-viewport": "^0.10.3"
   },
   "devDependencies": {
     "@ohif/core": "^2.9.14",
     "@ohif/ui": "^1.5.3",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dicom-parser": "^1.8.3",
     "gh-pages": "^2.0.1",

extensions/vtk/src/OHIFVTKViewport.js

@@ -49,7 +49,7 @@ class OHIFVTKViewport extends Component {
   state = {
     volumes: null,
     paintFilterLabelMapImageData: null,
-    paintFilterBackgroundImageData: null
+    paintFilterBackgroundImageData: null,
   };
 
   static propTypes = {
@@ -69,7 +69,7 @@ class OHIFVTKViewport extends Component {
   };
 
   static defaultProps = {
-    onScroll: () => { },
+    onScroll: () => {},
   };
 
   static id = 'OHIFVTKViewport';
@@ -156,9 +156,11 @@ class OHIFVTKViewport extends Component {
       const { activeLabelmapIndex } = brushStackState;
       const labelmap3D = brushStackState.labelmaps3D[activeLabelmapIndex];
 
-      this.segmentsDefaultProperties = labelmap3D.segmentsHidden.map(isHidden => {
+      this.segmentsDefaultProperties = labelmap3D.segmentsHidden.map(
-        return { visible: !isHidden };
+        isHidden => {
-      });
+          return { visible: !isHidden };
+        }
+      );
 
       const vtkLabelmapID = `${firstImageId}_${activeLabelmapIndex}`;
 
@@ -349,7 +351,7 @@ class OHIFVTKViewport extends Component {
 
     if (
       displaySet.displaySetInstanceUID !==
-      prevDisplaySet.displaySetInstanceUID ||
+        prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
       displaySet.frameIndex !== prevDisplaySet.frameIndex
     ) {
@@ -360,34 +362,35 @@ class OHIFVTKViewport extends Component {
   loadProgressively(imageDataObject) {
     loadImageData(imageDataObject);
 
-    const { isLoading, insertPixelDataPromises } = imageDataObject;
+    const { isLoading, imageIds } = imageDataObject;
-
-    const NumberOfFrames = insertPixelDataPromises.length;
 
     if (!isLoading) {
       this.setState({ isLoaded: true });
       return;
     }
 
-    insertPixelDataPromises.forEach(promise => {
+    const NumberOfFrames = imageIds.length;
-      promise.then(numberProcessed => {
-        const percentComplete = Math.floor(
-          (numberProcessed * 100) / NumberOfFrames
-        );
 
-        if (percentComplete !== this.state.percentComplete) {
+    const onPixelDataInsertedCallback = numberProcessed => {
-          this.setState({
+      const percentComplete = Math.floor(
-            percentComplete,
+        (numberProcessed * 100) / NumberOfFrames
-          });
+      );
-        }
-      });
-    });
 
-    Promise.all(insertPixelDataPromises).then(() => {
+      if (percentComplete !== this.state.percentComplete) {
+        this.setState({
+          percentComplete,
+        });
+      }
+    };
+
+    const onAllPixelDataInsertedCallback = () => {
       this.setState({
         isLoaded: true,
       });
-    });
+    };
+
+    imageDataObject.onPixelDataInserted(onPixelDataInsertedCallback);
+    imageDataObject.onAllPixelDataInserted(onAllPixelDataInsertedCallback);
   }
 
   render() {
@@ -435,7 +438,7 @@ class OHIFVTKViewport extends Component {
                 segmentsDefaultProperties: this.segmentsDefaultProperties,
                 onNewSegmentationRequested: () => {
                   this.setStateFromProps();
-                }
+                },
               }}
               onScroll={this.props.onScroll}
             />

platform/core/package.json

@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dicom-parser": "^1.8.3"
   },

platform/viewer/cypress/support/commands.js

@@ -114,7 +114,7 @@ Cypress.Commands.add('waitVTKLoading', () => {
   });
 
   // Wait for finish loading
-  cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
+  cy.get('[data-cy="viewprt-grid"]', { timeout: 90000 }).should($grid => {
     expect($grid).not.to.contain.text('Loading');
   });
 });

platform/viewer/package.json

@@ -65,7 +65,7 @@
     "core-js": "^3.2.1",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "^4.20.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dcmjs": "0.16.0",
     "dicom-parser": "^1.8.3",

yarn.lock

@@ -5950,10 +5950,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.15.1:
+cornerstone-tools@^4.20.1:
-  version "4.15.1"
+  version "4.20.1"
-  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.15.1.tgz#f0b1026da9c7758defc088bb2f1e78426a23d91e"
+  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.20.1.tgz#90f6c28356622eac037683b19f9175f85d33dff7"
-  integrity sha512-fJuTUJW/NDSD520jPB++tX//Kq80jPDngChHZrhx2xjj/9dCnexD9kmTX30Z0WUq0a2JEHZ6FlcOX38kSmw1hQ==
+  integrity sha512-SyQsrg3bnGHUvWGZpUq7ia7/gj12S9zQFK2VMhpyAYxK9pWz+PRv8HBi0eEe/fWGAo/Vc62IRkdP3uF9MJlqiQ==
   dependencies:
     "@babel/runtime" "7.1.2"
     cornerstone-math "0.1.7"
@@ -16047,10 +16047,10 @@ react-transition-group@^4.1.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-vtkjs-viewport@^0.9.0:
+react-vtkjs-viewport@^0.10.3:
-  version "0.9.0"
+  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.9.0.tgz#5a7890643e511946f960db6b05142318be2dfe80"
+  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.10.3.tgz#8eaa8bc558057215b648ad6ce17092d68cf5354b"
-  integrity sha512-kjpNr1n+eW0nU736HH07IsSYQXphxfn/RBvKtpBer9tNsl+FyLH8h+uY8KWdv8kVBHkEoaH6/srxB0JBa8l+jA==
+  integrity sha512-9aXuBrAlKa79Q1qPSWmPflSgpG2sm5jyKresdqUUvqYVJQJx83Xkkh4XfgOfLHY/nEwpTI8dr3FwtH2dzrBkoA==
   dependencies:
     date-fns "^2.2.1"
     gl-matrix "^3.1.0"