[Urgent!] Unable to load images using the Streaming Image Volume Loader

[ibrahim-io]

Demo Repository: here

What I am trying to do is create a webapp which loads a volume dicom and renders it along with other tools. The way I currently go about this is to load the files into the cornerstoneWADOImageLoader fileManager after the user has inputted the files. Then when I would like to render the files, I extract the metadata manually using the dicomParser library and use that to render the Dicoms using the StreamingImageVolumeLoader. However, the current error I receive is:

I suspect it has something to do with the fact that the StreamingImageVolumeLoader doesn’t store/access metadata the same way the cornerstoneWADOImageLoader does and so can’t access information regarding the dicoms when trying to render, however I am very new to this and so I’m not really sure what is going on.

Any guidance would be really appreciated!! Thanks in advance.

What steps can we follow to reproduce the bug?

Go to the repo and try to run it.

[jbocce]

Hello @ibrahim-io. Welcome to the OHIF community forum.

I cloned your repo but was not able to run it. Could you please provide more detailed instructions on how to run it? Thanks.

As a sanity check, verify that your original DICOM does indeed have the Pixel Representation attribute.

[ibrahim-io]

Hi @jbocce , and thanks for the reply.

To run the repo all you would need to do is run the command:

npm i

in the command line at the root directory of the repository, followed by the command:

npm run dev

The dicom files I used are found within the dicom_data folder, found inside assets/. You can drag and drop that folder into the dropzone, when prompted to. This will then try and render the inputted dicoms. One thing to note is that the folder structure should be as shown in the dicom_data folder. The code will not work otherwise.

Also, when logging the cleanedMetadata variable I get the following output, which shows that the dicom files actually have pixel representation:

[jbocce]

Hello @ibrahim-io,

So the first thing that would need to be addressed is to no longer use cornerstoneWadoImageLoader and to instead use dicomImageLoader. The good news is that I managed to make various changes so that I could see the images loaded and I was successful.

I just had one aim and that was to see the images. So I am sure a few of the changes made were not correct, but I will leave the rest to you. Below I have included the patch file with the diffs of the changes I made. I hope this helps.

diff --git a/package.json b/package.json
index 6a7111c..2451e2b 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.1.6",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.1.6",
-    "@cornerstonejs/tools": "^1.1.6",
+    "@cornerstonejs/core": "^1.2.6",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.2.6",
+    "@cornerstonejs/tools": "^1.2.6",
+    "@cornerstonejs/dicom-image-loader": "^1.2.6",
     "@mantine/core": "^6.0.13",
     "@mantine/hooks": "^6.0.13",
-    "cornerstone-wado-image-loader": "^4.13.1",
     "dcmjs": "^0.29.6",
     "dicom-parser": "^1.8.21",
     "react": "^18.2.0",
diff --git a/src/components/ImageTrio.tsx b/src/components/ImageTrio.tsx
index c9fb6ac..75f69ed 100644
--- a/src/components/ImageTrio.tsx
+++ b/src/components/ImageTrio.tsx
@@ -109,16 +109,16 @@ const DICOMImageTrioComponent = (props: {
     (viewportId: string) => {
       switch (viewportId) {
         case imageKeys[0]:
-          return theme.colors.status[1];
+          return theme.colors.blue[1];
         case imageKeys[1]:
-          return theme.colors.status[2];
+          return theme.colors.blue[2];
         case imageKeys[2]:
-          return theme.colors.status[0];
+          return theme.colors.blue[0];
         default:
-          return theme.colors.status[1];
+          return theme.colors.blue[1];
       }
     },
-    [imageKeys, theme.colors.status],
+    [imageKeys, theme.colors.blue],
   );
 
   if (fetchError !== undefined && fetchError !== null && fetchError !== '') {
diff --git a/src/containers/Upload.tsx b/src/containers/Upload.tsx
index c90d214..aa9c8e9 100644
--- a/src/containers/Upload.tsx
+++ b/src/containers/Upload.tsx
@@ -42,7 +42,7 @@ const UploadInstructions = ({ onClick, onDragNDrop, message, dicomsLoaded, image
     },
   });
   const { ref, height, width } = useElementSize();
-  const minDim = Math.min((height - 20) * 0.85, (width * 0.95) / 1.5);
+  const minDim = 300;//Math.min((height - 20) * 0.85, (width * 0.95) / 1.5);
   console.log(imageIds);
   
 
diff --git a/src/contexts/ImageContext.tsx b/src/contexts/ImageContext.tsx
index d2e5875..f9f8377 100644
--- a/src/contexts/ImageContext.tsx
+++ b/src/contexts/ImageContext.tsx
@@ -3,11 +3,11 @@ import '../App.css';
 import { useSetState } from '@mantine/hooks';
 import dicomParser from 'dicom-parser';
 import * as cornerstone from '@cornerstonejs/core';
-import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
+import dicomImageLoader from '@cornerstonejs/dicom-image-loader';
 import { getDicomMetadata } from '../utils/imgLoadUtils';
 
-cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
-cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
+dicomImageLoader.external.cornerstone = cornerstone;
+dicomImageLoader.external.dicomParser = dicomParser;
 
 const ImageContext = createContext<
   | {
@@ -51,10 +51,10 @@ export function ImageProvider({ children }: TImageProviderProps) {
   const uploadImages = (files: any, name: string) => {
     const ogImageIds = files.map((filestack: any) =>
       filestack.map((file: any) => {
-        const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
+        const imageId = dicomImageLoader.wadouri.fileManager.add(file);
 
         getDicomMetadata(file).then((metadata) => {
-          cornerstoneWADOImageLoader.wadors.metaDataManager.add(imageId, metadata);
+          dicomImageLoader.wadors.metaDataManager.add(imageId, metadata);
         });
 
         return imageId;
diff --git a/src/contexts/cornerstoneHelpers/CornerstoneCoreFunctions.tsx b/src/contexts/cornerstoneHelpers/CornerstoneCoreFunctions.tsx
index 3532425..9a1d422 100644
--- a/src/contexts/cornerstoneHelpers/CornerstoneCoreFunctions.tsx
+++ b/src/contexts/cornerstoneHelpers/CornerstoneCoreFunctions.tsx
@@ -8,7 +8,6 @@ import {
 
 import { ptScalingMetaDataProvider } from './MetadataProviders';
 
-import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import dcmjs from 'dcmjs';
 
 import { calibratedPixelSpacingMetadataProvider } from '@cornerstonejs/core/dist/esm/utilities';
@@ -24,6 +23,7 @@ import { MouseBindings } from '@cornerstonejs/tools/dist/esm/enums';
 import { CalibratedPixelValue } from '@cornerstonejs/core/dist/esm/utilities/calibratedPixelSpacingMetadataProvider';
 import { imageMetadataProvider } from './imageMetadataProvider';
 import { getDicomMetadata } from '../../utils/imgLoadUtils';
+import dicomImageLoader from '@cornerstonejs/dicom-image-loader';
 const { DicomMetaDictionary } = dcmjs.data;
 
 export const removeInvalidTags = (srcMetadata: { [tagId: string]: any }) => {
@@ -61,7 +61,7 @@ const isErrorRequest = (
 export const loadAndCacheMetadata = (imageIds: string[]) => {
   imageIds.map((imageId) => {
     
-    const metadata = cornerstoneWADOImageLoader.wadors.metaDataManager.get(imageId);
+    const metadata = dicomImageLoader.wadors.metaDataManager.get(`${imageId}`);
     console.log(metadata);
     
 
@@ -109,9 +109,9 @@ export const initializeCornerstone = async () => {
 
   // Initialise cornerstone WADO image loader
   const { preferSizeOverAccuracy, useNorm16Texture } = cornerstone.getConfiguration().rendering;
-  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
-  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
-  cornerstoneWADOImageLoader.configure({
+  dicomImageLoader.external.cornerstone = cornerstone;
+  dicomImageLoader.external.dicomParser = dicomParser;
+  dicomImageLoader.configure({
     useWebWorkers: true,
     decodeConfig: {
       convertFloatPixelDataToInt: false,
@@ -133,7 +133,7 @@ export const initializeCornerstone = async () => {
       },
     },
   };
-  cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
+  dicomImageLoader.webWorkerManager.initialize(config);
 
   cornerstone.setUseSharedArrayBuffer(false);
   // Initialise Volume Rendering
@@ -157,10 +157,10 @@ export const initializeCornerstone = async () => {
 const uploadImages = (files: any, name: string, setImageIds: (strings: string[]) => void) => {
   const fileImageIds = files.map((filestack: any) =>
     filestack.map((file: any) => {
-      const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
+      const imageId = dicomImageLoader.wadouri.fileManager.add(file);
 
       getDicomMetadata(file).then((metadata: any) => {
-        cornerstoneWADOImageLoader.wadors.metaDataManager.add(imageId, metadata);
+        dicomImageLoader.wadors.metaDataManager.add(imageId, metadata);
       });
 
       return imageId;
@@ -486,7 +486,7 @@ export const fetchAndRenderVolumeDICOMData = async (
 
   if (cachedVolume === undefined) {
     const volume = await cornerstone.volumeLoader.createAndCacheVolume(volumeId, {
-      imageIds: imageIds.map((id) => 'wadors:'+id),
+      imageIds: imageIds.map((id) => id),
     });
     await volume.load();
   }

[ibrahim-io]

Thanks a lot @jbocce. I have been able to get it to work!