[OHIF/Viewers: IDC-1957] Switch to using request pool manager.

examples/VTKCornerstonePaintingSyncExample.js

@@ -145,7 +145,8 @@ class VTKCornerstonePaintingSyncExample extends Component {
       };
 
       loadImageData(imageDataObject);
-      Promise.all(imageDataObject.insertPixelDataPromises).then(() => {
+
+      const onAllPixelDataInsertedCallback = () => {
         const { actor } = createActorMapper(imageDataObject.vtkImageData);
 
         const rgbTransferFunction = actor
@@ -166,7 +167,9 @@ class VTKCornerstonePaintingSyncExample extends Component {
           globalOpacity: segmentationModule.configuration.fillAlpha,
           outlineThickness: segmentationModule.configuration.outlineThickness,
         });
-      });
+      };
+
+      imageDataObject.onAllPixelDataInserted(onAllPixelDataInsertedCallback);
     });
   }
 
@@ -321,6 +324,7 @@ class VTKCornerstonePaintingSyncExample extends Component {
                   colorLUT,
                   globalOpacity,
                   outlineThickness,
+                  segmentsDefaultProperties: [],
                   visible: true,
                   renderOutline: true,
                 }}

examples/VTKCrosshairsExample.js

@@ -77,7 +77,7 @@ class VTKCrosshairsExample extends Component {
 
     const ctImageDataObject = loadDataset(ctImageIds, 'ctDisplaySet');
 
-    Promise.all(ctImageDataObject.insertPixelDataPromises).then(() => {
+    const onAllPixelDataInsertedCallback = () => {
       const ctImageData = ctImageDataObject.vtkImageData;
 
       const range = ctImageData
@@ -97,7 +97,9 @@ class VTKCrosshairsExample extends Component {
       this.setState({
         volumes: [ctVol],
       });
-    });
+    };
+
+    ctImageDataObject.onAllPixelDataInserted(onAllPixelDataInsertedCallback);
   }
 
   storeApi = viewportIndex => {

examples/VTKFusionExample.js

@@ -332,34 +332,32 @@ class VTKFusionExample extends Component {
 
     loadImageData(imageDataObject);
 
-    const { insertPixelDataPromises } = imageDataObject;
+    const numberOfFrames = imageIds.length;
 
-    const numberOfFrames = insertPixelDataPromises.length;
-
-    // TODO -> Maybe the component itself should do this.
-    insertPixelDataPromises.forEach(promise => {
-      promise.then(numberProcessed => {
-        const percentComplete = Math.floor(
-          (numberProcessed * 100) / numberOfFrames
-        );
+    const onPixelDataInsertedCallback = numberProcessed => {
+      const percentComplete = Math.floor(
+        (numberProcessed * 100) / numberOfFrames
+      );
 
-        if (this.state.percentComplete !== percentComplete) {
-          const stateUpdate = {};
+      if (this.state.percentComplete !== percentComplete) {
+        const stateUpdate = {};
 
-          stateUpdate[percentageCompleteStateName] = percentComplete;
+        stateUpdate[percentageCompleteStateName] = percentComplete;
 
-          this.setState(stateUpdate);
-        }
+        this.setState(stateUpdate);
+      }
 
-        if (percentComplete % 20 === 0) {
-          this.rerenderAll();
-        }
-      });
-    });
+      if (percentComplete % 20 === 0) {
+        this.rerenderAll();
+      }
+    };
 
-    Promise.all(insertPixelDataPromises).then(() => {
+    const onAllPixelDataInsertedCallback = () => {
       this.rerenderAll();
-    });
+    };
+
+    imageDataObject.onPixelDataInserted(onPixelDataInsertedCallback);
+    imageDataObject.onAllPixelDataInserted(onAllPixelDataInsertedCallback);
 
     return imageDataObject;
   }

examples/VTKLoadImageDataExample.js

@@ -109,16 +109,15 @@ class VTKLoadImageDataExample extends Component {
 
         loadImageData(imageDataObject);
 
-        const { insertPixelDataPromises } = imageDataObject;
-        insertPixelDataPromises.forEach(promise => {
-          promise.then(numberProcessed => {
-            const percentComplete = Math.floor(
-              (numberProcessed * 100) / insertPixelDataPromises.length
-            );
-
-            console.log(`Processing: ${percentComplete}%`);
-          });
-        });
+        const onPixelDataInsertedCallback = numberProcessed => {
+          const percentComplete = Math.floor(
+            (numberProcessed * 100) / imageIds.length
+          );
+
+          console.log(`Processing: ${percentComplete}%`);
+        };
+
+        imageDataObject.onPixelDataInserted(onPixelDataInsertedCallback);
 
         const { actor } = createActorMapper(imageDataObject.vtkImageData);
 
@@ -154,9 +153,11 @@ class VTKLoadImageDataExample extends Component {
 
       istyle.setSliceOrientation(slicePlaneNormal, sliceViewUp);
 
-      this.imageDataObject.insertPixelDataPromises.forEach(promise => {
-        promise.then(() => renderWindow.render());
-      });
+      const onPixelDataInsertedCallback = () => {
+        renderWindow.render();
+      };
+
+      this.imageDataObject.onPixelDataInserted(onPixelDataInsertedCallback);
 
       renderWindow.render();
     };

examples/VTKVolumeRenderingExample.js

@@ -299,30 +299,28 @@ class VTKFusionExample extends Component {
 
     loadImageData(imageDataObject);
 
-    const { insertPixelDataPromises } = imageDataObject;
+    const numberOfFrames = imageIds.length;
 
-    const numberOfFrames = insertPixelDataPromises.length;
+    const onPixelDataInsertedCallback = numberProcessed => {
+      const percentComplete = Math.floor(
+        (numberProcessed * 100) / numberOfFrames
+      );
 
-    // TODO -> Maybe the component itself should do this.
-    insertPixelDataPromises.forEach(promise => {
-      promise.then(numberProcessed => {
-        const percentComplete = Math.floor(
-          (numberProcessed * 100) / numberOfFrames
-        );
+      if (this.state.percentComplete !== percentComplete) {
+        this.setState({ percentComplete });
+      }
 
-        if (this.state.percentComplete !== percentComplete) {
-          this.setState({ percentComplete });
-        }
+      if (percentComplete % 20 === 0) {
+        this.rerenderAll();
+      }
+    };
 
-        if (percentComplete % 20 === 0) {
-          this.rerenderAll();
-        }
-      });
-    });
-
-    Promise.all(insertPixelDataPromises).then(() => {
+    const onAllPixelDataInsertedCallback = () => {
       this.rerenderAll();
-    });
+    };
+
+    imageDataObject.onPixelDataInserted(onPixelDataInsertedCallback);
+    imageDataObject.onAllPixelDataInserted(onAllPixelDataInsertedCallback);
 
     return imageDataObject;
   }

package.json

@@ -24,7 +24,8 @@
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "vtk.js": "^11.14.0"
+    "vtk.js": "^11.14.0",
+    "cornerstone-tools": "^4.11.0"
   },
   "dependencies": {
     "date-fns": "^2.2.1",

src/lib/getImageData.js

@@ -69,12 +69,31 @@ export default function getImageData(imageIds, displaySetInstanceUid) {
 
   imageData.setDimensions(xVoxels, yVoxels, zVoxels);
   imageData.setSpacing(xSpacing, ySpacing, zSpacing);
-
   imageData.setDirection(direction);
-
   imageData.setOrigin(...origin);
   imageData.getPointData().setScalars(scalarArray);
 
+  const _publishPixelDataInserted = count => {
+    imageDataObject.subscriptions.onPixelDataInserted.forEach(callback => {
+      callback(count);
+    });
+  };
+
+  const _publishAllPixelDataInseted = () => {
+    imageDataObject.subscriptions.onAllPixelDataInserted.forEach(callback => {
+      callback();
+    });
+    imageDataObject.isLoading = false;
+    imageDataObject.loaded = true;
+    imageDataObject.vtkImageData.modified();
+
+    // Remove all subscriptions on completion.
+    imageDataObject.subscriptions = {
+      onPixelDataInserted: [],
+      onAllPixelDataInserted: [],
+    };
+  };
+
   const imageDataObject = {
     imageIds,
     metaData0,
@@ -87,6 +106,18 @@ export default function getImageData(imageIds, displaySetInstanceUid) {
     metaDataMap,
     sortedDatasets,
     loaded: false,
+    subscriptions: {
+      onPixelDataInserted: [],
+      onAllPixelDataInserted: [],
+    },
+    onPixelDataInserted: callback => {
+      imageDataObject.subscriptions.onPixelDataInserted.push(callback);
+    },
+    onAllPixelDataInserted: callback => {
+      imageDataObject.subscriptions.onAllPixelDataInserted.push(callback);
+    },
+    _publishPixelDataInserted,
+    _publishAllPixelDataInseted,
   };
 
   imageDataCache.set(displaySetInstanceUid, imageDataObject);

src/lib/loadImageData.js

@@ -1,4 +1,5 @@
 import cornerstone from 'cornerstone-core';
+import { requestPoolManager } from 'cornerstone-tools';
 import insertSlice from './data/insertSlice.js';
 import getPatientWeightAndCorrectedDose from './data/getPatientWeightAndCorrectedDose.js';
 
@@ -16,7 +17,7 @@ export default function loadImageDataProgressively(imageDataObject) {
     metaDataMap,
     sortedDatasets,
   } = imageDataObject;
-  const loadImagePromises = imageIds.map(cornerstone.loadAndCacheImage);
+
   const imageId0 = imageIds[0];
 
   const seriesModule = cornerstone.metaData.get(
@@ -55,60 +56,66 @@ export default function loadImageDataProgressively(imageDataObject) {
   let reRenderTarget = reRenderFraction;
 
   const insertPixelData = image => {
-    return new Promise(resolve => {
-      const { imagePositionPatient } = metaDataMap.get(image.imageId);
+    const { imagePositionPatient } = metaDataMap.get(image.imageId);
 
-      const sliceIndex = sortedDatasets.findIndex(
-        dataset => dataset.imagePositionPatient === imagePositionPatient
-      );
+    const sliceIndex = sortedDatasets.findIndex(
+      dataset => dataset.imagePositionPatient === imagePositionPatient
+    );
 
-      const { max, min } = insertSlice(
-        vtkImageData,
-        sliceIndex,
-        image,
-        modality,
-        modalitySpecificScalingParameters
-      );
+    const { max, min } = insertSlice(
+      vtkImageData,
+      sliceIndex,
+      image,
+      modality,
+      modalitySpecificScalingParameters
+    );
 
-      if (max > range.max) {
-        range.max = max;
-      }
+    if (max > range.max) {
+      range.max = max;
+    }
 
-      if (min < range.min) {
-        range.min = min;
-      }
+    if (min < range.min) {
+      range.min = min;
+    }
 
-      const dataArray = vtkImageData.getPointData().getScalars();
+    const dataArray = vtkImageData.getPointData().getScalars();
 
-      dataArray.setRange(range, 1);
-      numberProcessed++;
+    dataArray.setRange(range, 1);
+    numberProcessed++;
 
-      if (numberProcessed > reRenderTarget) {
-        reRenderTarget += reRenderFraction;
+    if (numberProcessed > reRenderTarget) {
+      reRenderTarget += reRenderFraction;
 
-        vtkImageData.modified();
+      vtkImageData.modified();
+    }
 
-        // rerender
-      }
+    imageDataObject._publishPixelDataInserted(numberProcessed);
 
-      resolve(numberProcessed);
-    });
+    if (numberProcessed === numberOfFrames) {
+      // Done loading, publish complete and remove all subscriptions.
+      imageDataObject._publishAllPixelDataInseted();
+    }
   };
 
-  const insertPixelDataPromises = [];
-
-  loadImagePromises.forEach(promise => {
-    const insertPixelDataPromise = promise.then(insertPixelData);
+  prefetchImageIds(imageIds, imageDataObject, insertPixelData);
+}
 
-    insertPixelDataPromises.push(insertPixelDataPromise);
-  });
+const requestType = 'prefetch';
+const preventCache = false;
 
-  Promise.all(insertPixelDataPromises).then(() => {
-    imageDataObject.isLoading = false;
-    imageDataObject.loaded = true;
+function prefetchImageIds(imageIds, imageDataObject, insertPixelData) {
+  const noop = () => {};
 
-    vtkImageData.modified();
+  imageIds.forEach(imageId => {
+    requestPoolManager.addRequest(
+      {},
+      imageId,
+      requestType,
+      preventCache,
+      insertPixelData,
+      noop
+    );
   });
 
-  imageDataObject.insertPixelDataPromises = insertPixelDataPromises;
+  requestPoolManager.startGrabbing();
 }