Itk.js support in react

[rushikeshsp25]

I am referring to this example for creating a dicom image viewer on the web. Now in this example after reading the dicom file using itk.js readImageFile, the function call :

createViewer(container, {
    image: imageData,
    use2D: !is3D,
})

is heaviely dependent on dom interaction. here is the code for createViewer. Is there any way I can implement this in react? Also, I am not able to find the proper documentation for itk.js react.

[thewtex]

@rushikeshsp25 yes, it will be wonderful to have a React component wrapper around itk-vtk-viewer. createViewer. createViewer would be called on a React Ref, then the createViewer publicAPI.set<propName> methods in createViewer.js would be called with the value of the component props. Would you like to give it a crack?

[rushikeshsp25]

thanks @thewtex, that thing worked. I am able to create the viewer in react using reference.

[ahojukka5]

Would you mind sharing a minimal working example?

[booleanBoy]

A minimal working example would be really helpful for me to!

[Sneha-pk]

Hello, Is there any working example of itk.js in react? Thanks.

[booleanBoy]

@Sneha-pk This is how I got VTK files loading via ITK in React, I think. It's old code that I abandoned, but I'm sure the file loaded and displayed...

import { View, GeometryRepresentation, PolyData, PointData, DataArray } from 'react-vtk-js';
import VTKFile from './1_surface.vtk';
import readPolyDataFile from 'itk/readPolyDataFile';

const localFileReader = async file => {
  return await fetch(file).then(response => response.blob());
};

const StateRendererVTKJS = () => {
  const geoRep = useRef(null);
  const [data, setData] = useState(null);
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      const res = await localFileReader(VTKFile);
      const file = new File([res], 'name.vtk', { lastModified: 1534584790000 });
      const { polyData, webWorker } = await readPolyDataFile(null, file);
      webWorker.terminate();
      const newPoints = polyData.points.values.map(el => el * 10000);
      setData({ points: newPoints, polys: polyData.polys.values });
    })();
  }, []);
  return (
    <View style={{ height: 500, width: 500 }}>
      <GeometryRepresentation ref={geoRep}>
        {data && (
          <PolyData points={data.points} polys={data.polys}>
            {/* <PointData>
              <DataArray registration="setScalars" name="temperature" values={[0, 0.5, 1]} />
            </PointData> */}
          </PolyData>
        )}
      </GeometryRepresentation>
    </View>
  );
};