fix: 🐛 Update examples to use Float32Arrays for segmentations (#89)

Update examples to use Float32Arrays for segmentations, as well as use a
new cornerstoneTools release for the cornerstone-sync example.

Author: JamesAPetts

examples/VTKCornerstonePaintingSyncExample.js

@@ -31,7 +31,7 @@ function setupSyncedBrush(imageDataObject) {
 
   // If you want to load a segmentation labelmap, you would want to load
   // it into this array at this point.
-  const threeDimensionalPixelData = new Uint16Array(numVolumePixels);
+  const threeDimensionalPixelData = new Float32Array(numVolumePixels);
 
   const buffer = threeDimensionalPixelData.buffer;
   const imageIds = imageDataObject.imageIds;
@@ -41,6 +41,9 @@ function setupSyncedBrush(imageDataObject) {
     throw new Error('Depth should match the number of imageIds');
   }
 
+  // Use Float32Arrays in cornerstoneTools for interoperability.
+  segmentationModule.configuration.arrayType = 1;
+
   segmentationModule.setters.labelmap3DByFirstImageId(
     imageIds[0],
     buffer,
@@ -324,6 +327,7 @@ class VTKCornerstonePaintingSyncExample extends Component {
               />
             )}
           </div>
+
           <div className="col-xs-12 col-sm-6" style={{ height: '512px' }}>
             {this.state.cornerstoneViewportData && (
               <CornerstoneViewport

examples/VTKMPRPaintingExample.js

@@ -64,7 +64,7 @@ function createLabelMapImageData(backgroundImageData) {
   labelMapData.setDimensions(backgroundImageData.getDimensions());
   labelMapData.computeTransforms();
 
-  const values = new Uint16Array(backgroundImageData.getNumberOfPoints());
+  const values = new Float32Array(backgroundImageData.getNumberOfPoints());
   const dataArray = vtkDataArray.newInstance({
     numberOfComponents: 1, // labelmap with single component
     values,
@@ -162,7 +162,7 @@ class VTKMPRPaintingExample extends Component {
   clearLabelMap = () => {
     const labelMapImageData = this.state.paintFilterLabelMapImageData;
     const numberOfPoints = labelMapImageData.getNumberOfPoints();
-    const values = new Uint8Array(numberOfPoints);
+    const values = new Float32Array(numberOfPoints);
     const dataArray = vtkDataArray.newInstance({
       numberOfComponents: 1, // labelmap with single component
       values,

package.json

@@ -47,7 +47,7 @@
     "copy-webpack-plugin": "^5.0.4",
     "cornerstone-core": "^2.3.0",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.5.2",
+    "cornerstone-tools": "^4.11.0",
     "cornerstone-wado-image-loader": "^3.0.5",
     "cross-env": "^5.2.0",
     "css-loader": "^3.0.0",

src/VTKViewport/View2D.js

@@ -440,6 +440,7 @@ export default class View2D extends Component {
       this.subs.labelmap.unsubscribe();
 
       const labelmapImageData = this.props.paintFilterLabelMapImageData;
+
       const labelmap = createLabelPipeline(
         this.props.paintFilterBackgroundImageData,
         labelmapImageData,

yarn.lock

@@ -3458,10 +3458,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.5.2:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.8.1.tgz#a821c503886c384f3321e895ddd4c3350eb7d355"
-  integrity sha512-TPB2imrlHf/miVpnbP+QCjqlf3tKcwXdLpr7A6M6Q6vPEmJUW8p8h5rfZQrJcfmxi2zz0VGxNlVRHBt/lgo0JQ==
+cornerstone-tools@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.11.0.tgz#746839ec318510150c8d196a9b6d029138de1cbb"
+  integrity sha512-2HuPcZ9or93OItOrG1QbF8JMWaAWTPpAC/1ahHJdM4SP5kzzOO1GJMuuUFTOmeWfwezq9ZyoQm/KBMXg4yOIWQ==
   dependencies:
     "@babel/runtime" "7.1.2"
     cornerstone-math "0.1.7"