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();
}
