[Cornerstone3D] StackViewport does not change segmentation as I scroll through it

Support Development
1

Describe Your Question

  • I have a viewport of type ViewportType.STACK where I
    • load CT images (using viewport.setStack()
    • and a labelmap (using imageLoader.createAndCacheDerivedLabelmapImage(), segmentation.addSegmentations() and segmentation.addSegmentationRepresentations())

However, as I scroll through the slices (=N), my CT images change, however all the N segmentations show up on the same slice. How do I resolve this?

  • I am using "@cornerstonejs/core": "^3.24.0","@cornerstonejs/tools": "^3.24.0"

What steps can we follow to reproduce the bug?

My code rougly looks like

import { segmentation, Enums as ToolEnums} from '@cornerstonejs/tools';
import { IImage, IStackViewport} from '@cornerstonejs/core/dist/esm/types';


// Step 1 - Some constants
const imageIds = // list of imageIds
const maskImageIds = // list of maskImageIds
const maskImages = //<custom object containing mask data>
const segmentationId = //some string

// Step 2 - Get derived images (for mask)
const derivedImages: IImage[] = [];
for (let i = 0; i < imageIds.length; i++) {
  const derivedImage = imageLoader.createAndCacheDerivedLabelmapImage(imageIds[i], {
    imageId: maskImageIds[i],
    instanceNumber: i + 1, // I though this would make a difference
  });
  derivedImages.push(derivedImage);
}

// Step 3 - Assign data to derived images
var i = 0;
for (var derivedImage of derivedImages) {
  const imagePromise = maskImages.images.get(i);
  var imageData = await imagePromise.promise;
  var pixelData = derivedImage.getPixelData();
  pixelData.set(imageData.data); // I have checked that there is data in derivedImages[i].getPixelData()
  i++;
}

// Step 4 - Add segmentation
segmentation.addSegmentations([
  {
    segmentationId: segmentationId,
    representation: {
      type: ToolEnums.SegmentationRepresentations.Labelmap,
      data: {
        referencedImageIds: imageIds,
        imageIds: maskImageIds
      }
    }
  }
]);

// Step 5 - Add segmentation representation to viewport
segmentation.addSegmentationRepresentations(viewportId, [
  {
    segmentationId: segmentationId,
    type: ToolEnums.SegmentationRepresentations.Labelmap,
    config: {
      colorLUTOrIndex: LabelmapColorLUT
    }
  }
]);

// Step 6 - Render the viewport
viewport.render();

Other points

  • I know that an alternative is to use volume viewports, but for historical reasons I still need to use the stack viewport