# Showing DICOMs using vtk.js and itk-wasm

**URL:** https://discourse.vtk.org/t/showing-dicoms-using-vtk-js-and-itk-wasm/14461
**Category:** Web
**Created:** [August 22, 2024, 5:38pm UTC](https://discourse.vtk.org/t/showing-dicoms-using-vtk-js-and-itk-wasm/14461 "2024-08-22T17:38:21Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Aram\_Hovhannisyan](https://discourse.vtk.org/user_avatar/discourse.vtk.org/aram_hovhannisyan/32/9206_2.png) [@Aram\_Hovhannisyan](https://discourse.vtk.org/u/Aram_Hovhannisyan)
#### Post date: [August 22, 2024, 5:38pm UTC](https://discourse.vtk.org/t/showing-dicoms-using-vtk-js-and-itk-wasm/14461/1 "2024-08-22T17:38:21Z")

</div>

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.

```auto
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`

```auto
  "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"
  },

```

---

<div class="post-metadata">

### Author: ![Thibault\_Bruyere](https://discourse.vtk.org/user_avatar/discourse.vtk.org/thibault_bruyere/32/6585_2.png) [@Thibault\_Bruyere](https://discourse.vtk.org/u/Thibault_Bruyere)
#### Post date: [August 23, 2024, 7:39am UTC](https://discourse.vtk.org/t/showing-dicoms-using-vtk-js-and-itk-wasm/14461/2 "2024-08-23T07:39:55Z")

</div>

Hello,

Did you import any profile, for example:

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

```

---

<div class="post-metadata">

### Author: ![Aram\_Hovhannisyan](https://discourse.vtk.org/user_avatar/discourse.vtk.org/aram_hovhannisyan/32/9206_2.png) [@Aram\_Hovhannisyan](https://discourse.vtk.org/u/Aram_Hovhannisyan)
#### Post date: [August 23, 2024, 2:56pm UTC](https://discourse.vtk.org/t/showing-dicoms-using-vtk-js-and-itk-wasm/14461/3 "2024-08-23T14:56:50Z")

</div>

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