Showing DICOMs using vtk.js and itk-wasm

Web
1

I am trying to build an MPR DICOM viewer. Similar to the quad view example, but with React (and MUI).

  1. For now decided to focus on just one view. The volumetric one.
  2. I figured that to load a folder with dcm files I need to use itk-wasm.

So, currently my react component looks like below. The reader seem to be working as expected
and printing imageData.getDimensions() to the console shows [512, 512, 120].
The problem is that I see nothing showing up in my container DIV and no errors or other messages in the console of the browser.

import { readImageDicomFileSeries} from '@itk-wasm/dicom';
import vtkImageReslice from '@kitware/vtk.js/Imaging/Core/ImageReslice';
import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper';
import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';

// other imports

export default function QuadView({ dicomFiles }) {
    const rootContainerRef = useRef(null);
    const [imageData, setImageData] = useState(null);

    const readDICOM = async () => {
        const { outputImage, webWorkerPool } = await readImageDicomFileSeries({ inputImages: dicomFiles });
        webWorkerPool.terminateWorkers();
        const vtkImageData = vtkITKHelper.convertItkToVtkImage(outputImage);
        setImageData(vtkImageData);
    };
	
	const setupRendering = async () => {

        const container = rootContainerRef.current;

        const genericRenderWindow = vtkGenericRenderWindow.newInstance();
        genericRenderWindow.setContainer(rootContainerRef.current);
        genericRenderWindow.resize();

        const renderer = genericRenderWindow.getRenderer();
        const renderWindow = genericRenderWindow.getRenderWindow();

        const actor = vtkVolume.newInstance();
        const mapper = vtkVolumeMapper.newInstance();
        
        mapper.setSampleDistance(0.7);
        actor.setMapper(mapper);
                
        mapper.setInputData(imageData);
        console.log(imageData.getClassName());
        console.log(imageData.getDimensions());

        renderer.addVolume(actor);

        renderer.resetCamera();
        renderer.getActiveCamera().zoom(1.5);
        renderer.getActiveCamera().elevation(70);
        renderer.updateLightsGeometryToFollowCamera();
        renderWindow.render();

    };
	
	    useEffect(() => {

        const doStuff = async () => {
            readDICOM();
        }

        if (dicomFiles.length > 0) {
            doStuff();
        }
    }, [dicomFiles]);

    useEffect(() => {
        if (rootContainerRef.current && imageData) {
            setupRendering();
        }
    }, [rootContainerRef.current, imageData])
	return(
	    <>
            <div id="rootCont" ref={rootContainerRef} style={{ height: '500px', width: '100%' }} />
        </>
	)
}

here are my dependencies from package.json

  "dependencies": {
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@itk-wasm/dicom": "^7.1.0",
    "@itk-wasm/image-io": "^1.2.1",
    "@itk-wasm/mesh-io": "^1.2.1",
    "@kitware/vtk.js": "^32.1.0",
    "@mui/icons-material": "^5.16.6",
    "@mui/material": "^5.16.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "itk-wasm": "^1.0.0-b.177",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
2

Hello,

Did you import any profile, for example:

import '@kitware/vtk.js/Rendering/Profiles/Volume';
3

Thank you for your quick response.
My mistake - I did not.