Cannot destructure property 'pixelRepresentation'

When I use wadouri in volume type and then invoke volumeLoader.createAndCacheVolume , it will throw this error. Stack type is okay

[JamesAPetts]

I mean I want to display local dicom files by using wadouri prefix, not wadors , is there any way to get these UID?(studyInstanceUID, seriesInstanceUID)

WADO-URI or just “DICOM Part 10 over HTTP” isn’t supported out the of box by the Cornerstone3D libraries.

You need to use a WADO-RS compliant endpoint to fetch the metadata ahead of time, and then WADO-RS retrieve frames for the URLs.

Or you could write your own loader for all of this, but its not recommended for MPR for the reasons outlined here.

[JwRicauter]

Yep, it match 😢

this is the first imageId resulting of createImageIdsAndCacheMetaData function

and this is the imageIds object of makeVolumeMetadata

I will attach the run function, but it’s the same of one of the examples.

/*                   -- VOLUME --                  */

const viewportId1 = 'CT_AXIAL';
const viewportId2 = 'CT_SAGITTAL';
const viewportId3 = 'CT_CORONAL';

const viewportColors = {
  [viewportId1]: 'rgb(200, 0, 0)', [viewportId2]: 'rgb(200, 200, 0)', [viewportId3]: 'rgb(0, 200, 0)',
};

const viewportReferenceLineControllable = [
  viewportId1, viewportId2, viewportId3,
];

const viewportReferenceLineDraggableRotatable = [
  viewportId1, viewportId2, viewportId3,
];

const viewportReferenceLineSlabThicknessControlsOn = [
  viewportId1, viewportId2, viewportId3,
];

const getReferenceLineColor = (viewportId) => {
  return viewportColors[viewportId];
}

const getReferenceLineControllable = (viewportId) => {
  const index = viewportReferenceLineControllable.indexOf(viewportId);
  return index !== -1;
}

const getReferenceLineDraggableRotatable = (viewportId) => {
  const index = viewportReferenceLineDraggableRotatable.indexOf(viewportId);
  return index !== -1;
}

const getReferenceLineSlabThicknessControlsOn = (viewportId) => {
  const index =
    viewportReferenceLineSlabThicknessControlsOn.indexOf(viewportId);
  return index !== -1;
}


const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
const ctVolumeName = 'CT_VOLUME_ID'; // Id of the volume less loader prefix
const volumeId = `${volumeLoaderScheme}:${ctVolumeName}`; // VolumeId with loader id + volume id

export const runVolume = async (
  cornerstone3D,
  cornerstone3DTools,
  imageId,
  caseId,
  viewerRef1,
  viewerRef2,
  viewerRef3
) => {

  const {
    CONSTANTS, RenderingEngine, setVolumesForViewports, volumeLoader, metaData
  } = cornerstone3D;
  const {
    ToolGroupManager, StackScrollMouseWheelTool, CrosshairsTool, Enums: csToolsEnums, WindowLevelTool, PanTool, ZoomTool
  } = cornerstone3DTools;
  
  const { MouseBindings } = csToolsEnums;
  const { ViewportType } = cornerstone3D.Enums;
  const { ORIENTATION } = CONSTANTS;
  const toolGroupId = 'TOOLGROUP_ID';



  await initProviders();
  await initCornerstoneWADOImageLoader()
  await initVolumeLoader()
  await cornerstone3D.init();
  await cornerstone3DTools.init();




  const imageIds = await createImageIdsAndCacheMetaData({
    StudyInstanceUID: caseId,
    SeriesInstanceUID: imageId,
    wadoRsRoot: process.env.REACT_APP_WADO_RS_ROOT,
    type: 'VOLUME',
  });


  // Define a volume in memory
  const volume = await volumeLoader.createAndCacheVolume(volumeId, {
    imageIds,
  });

  // Instantiate a rendering engine
  const renderingEngineId = 'myRenderingEngine';
  const renderingEngine = new RenderingEngine(renderingEngineId);

  // Create the viewports
  if (
    viewerRef1.current && viewerRef2.current && viewerRef3.current
  ) {
    const viewportInputArray = [
      {
        viewportId: viewportId1,
        type: ViewportType.ORTHOGRAPHIC,
        element: viewerRef1.current,
        defaultOptions: {
          orientation: ORIENTATION.AXIAL,
          background: [0, 0, 0],
        },
      },
      {
        viewportId: viewportId2,
        type: ViewportType.ORTHOGRAPHIC,
        element: viewerRef2.current,
        defaultOptions: {
          orientation: ORIENTATION.SAGITTAL,
          background: [0, 0, 0],
        },
      },
      {
        viewportId: viewportId3,
        type: ViewportType.ORTHOGRAPHIC,
        element: viewerRef3.current,
        defaultOptions: {
          orientation: ORIENTATION.CORONAL,
          background: [0, 0, 0],
        },
      },
    ];
  
    renderingEngine.setViewports(viewportInputArray);
  }


  // Set the volume to load
  volume.load();

  // Set volumes on the viewports
  await setVolumesForViewports(
    renderingEngine,
    [
      {
        volumeId,
        callback: setCtTransferFunctionForVolumeActor,
      },
    ],
    [viewportId1, viewportId2, viewportId3]
  );

  
  let toolGroup = ToolGroupManager.getToolGroup(toolGroupId);
  if (!toolGroup) { 
    toolGroup =  ToolGroupManager.createToolGroup(toolGroupId); 
  }
  // For the crosshairs to operate, the viewports must currently be
  // added ahead of setting the tool active. This will be improved in the future.
  toolGroup.addViewport(viewportId1, renderingEngineId);
  toolGroup.addViewport(viewportId2, renderingEngineId);
  toolGroup.addViewport(viewportId3, renderingEngineId);

  // Manipulation Tools
  toolGroup.addTool(StackScrollMouseWheelTool.toolName);
  toolGroup.addTool(WindowLevelTool.toolName);
  toolGroup.addTool(PanTool.toolName);
  toolGroup.addTool(ZoomTool.toolName);

  // Add Crosshairs tool and configure it to link the three viewports
  // These viewports could use different tool groups. See the PET-CT example
  // for a more complicated used case.
  toolGroup.addTool(CrosshairsTool.toolName, {
    getReferenceLineColor,
    getReferenceLineControllable,
    getReferenceLineDraggableRotatable,
    getReferenceLineSlabThicknessControlsOn,
  });

  toolGroup?.setToolActive(CrosshairsTool.toolName, {
    bindings: [{ mouseButton: MouseBindings.Primary }],
  });
  // As the Stack Scroll mouse wheel is a tool using the `mouseWheelCallback`
  // hook instead of mouse buttons, it does not need to assign any mouse button.
  toolGroup?.setToolActive(StackScrollMouseWheelTool.toolName);

  // Render the image
  await renderingEngine.renderViewports([viewportId1, viewportId2, viewportId3]);
}