diff --git a/apps/phoenix/src/App.tsx b/apps/phoenix/src/App.tsx index f39ea8b..20b66de 100644 --- a/apps/phoenix/src/App.tsx +++ b/apps/phoenix/src/App.tsx @@ -1,19 +1,29 @@ -import { readImageDicomFileSeries } from "@itk-wasm/dicom"; +import { + readImageDicomFileSeries, + structuredReportToHtml, +} from "@itk-wasm/dicom"; import vtkITKHelper from "@kitware/vtk.js/Common/DataModel/ITKHelper"; import vtkVolume from "@kitware/vtk.js/Rendering/Core/Volume"; import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow"; import "@kitware/vtk.js/Rendering/Profiles/Volume"; -import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor"; import { useEffect, useRef, useState } from "react"; import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer"; import vtkVolumeMapper from "@kitware/vtk.js/Rendering/Core/VolumeMapper"; +import vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow"; function App() { const [files, setFiles] = useState([]); + const inputRef = useRef(null); const rendererRef = useRef(); - const mapperRef = useRef(); - const actorRef = useRef(); - const renderWindowRef = useRef(); + const mapperRef = useRef(); + const actorRef = useRef(); + const renderWindowRef = useRef(); + + useEffect(() => { + if (inputRef.current) { + inputRef.current.webkitdirectory = true; + } + }, []); useEffect(() => { if (files.length > 0) { @@ -21,24 +31,31 @@ function App() { rendererRef.current = fullScreenRenderer.getRenderer(); renderWindowRef.current = fullScreenRenderer.getRenderWindow(); actorRef.current = vtkVolume.newInstance(); - mapperRef.current = vtkVolumeMapper.newInstance({ sampleDistance: 1.1}); + mapperRef.current = vtkVolumeMapper.newInstance({ sampleDistance: 1.1 }); readImageDicomFileSeries(null, { inputImages: files, }).then((image) => { const vtkImage = vtkITKHelper.convertItkToVtkImage(image.outputImage); - - mapperRef.current.setInputData(vtkImage); - actorRef.current.setMapper(mapperRef.current); - - rendererRef.current?.addVolume(actorRef.current) - rendererRef.current.resetCamera(); - renderWindowRef.current.render(); + mapperRef.current?.setInputData(vtkImage); + mapperRef.current && actorRef.current?.setMapper(mapperRef.current); + actorRef.current && rendererRef.current?.addVolume(actorRef.current); + rendererRef.current?.resetCamera(); + renderWindowRef.current?.render(); }); + + return () => { + actorRef.current = undefined; + mapperRef.current = undefined; + rendererRef.current = undefined; + renderWindowRef.current = undefined; + }; } }, [files]); - const handleFolderUpload = async (event: Event) => { + const handleFolderUpload = async ( + event: React.ChangeEvent + ) => { const target = event.target as HTMLInputElement; if (!target.files) return; const files = [...target.files].filter((file) => @@ -52,7 +69,7 @@ function App() {