TypeError: vtiReader.parseAsArrayBuffer is not a function

Development
1

Hello all,
I am very new to vtk.js and trying to recreate one of the example in react.js. I am getting this error : TypeError: vtiReader.parseAsArrayBuffer is not a function


import 'vtk.js/Sources/Rendering/Profiles/Volume';

import 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';

import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';

import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';

import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';

import vtkVolumeController from 'vtk.js/Sources/Interaction/UI/VolumeController';

import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';

const View = () => {

    const vtkContainerRef = useRef(null);

    const context = useRef(null);

    function makeRequest(method, url) {

        return new Promise(function (resolve, reject) {

          var xhr = new XMLHttpRequest();

          xhr.open(method, url);

          xhr.responseType = "blob";

          xhr.onload = function () {

            if (this.status >= 200 && this.status < 300) {

              resolve(xhr.response);

            } else {

              reject({

                status: this.status,

                statusText: xhr.statusText,

              });

            }

          };

          xhr.onerror = function () {

            reject({

              status: this.status,

              statusText: xhr.statusText,

            });

          };

          xhr.send();

        });

      }

   

    useEffect( () => {

        if (!context.current) {

            const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({

                rootContainer : vtkContainerRef.current

            });

            const createViewer = (res) => {

                const vtiReader = vtkHttpDataSetReader.newInstance();

                const renderer = fullScreenRenderer.getRenderer();

                const renderWindow = fullScreenRenderer.getRenderWindow();

                vtiReader.parseAsArrayBuffer(res);

                const source = vtiReader.getOutputData(0);

                const mapper = vtkVolumeMapper.newInstance();

                const actor = vtkVolume.newInstance();

                actor.setMapper(mapper);

                mapper.setInputData(source);

                renderer.addVolume(actor);

                const controllerWidget = vtkVolumeController.newInstance({

                    size : [400, 150], rescaleColorMap: true

                });

                controllerWidget.setContainer(vtkContainerRef);

                controllerWidget.setupContent(renderWindow, actor, true);

                fullScreenRenderer.setResizeCallback(({ width, height }) => {

                    // 2px padding + 2x1px boder + 5px edge = 14

                    if (width > 414) {

                      controllerWidget.setSize(400, 150);

                    } else {

                      controllerWidget.setSize(width - 14, 150);

                    }

                    controllerWidget.render();

                  });

         

                  renderer.resetCamera();

                  renderWindow.render();

                  global.pipeline = {

                    actor,

                    renderer,

                    renderWindow,

                    mapper,

                    source,

                    fullScreenRenderer,

                  };

         

                  context.current = {

                    fullScreenRenderer,

                    renderWindow,

                    renderer,

                    actor,

                    mapper,

                  };

            };

            makeRequest("GET","../head-binary.vti").then((res) => {

                const reader = new FileReader();

                reader.onload = function onLoad(e) {

                    createViewer(reader.result);

                };

                const file = new File([res], "head-binary.vti");

                const fileObj = { file, ext: "vti" };

                console.log(fileObj);

                reader.readAsArrayBuffer(fileObj.file);    

            })

        }

        return () => {

            if (context.current) {

              const { fullScreenRenderer, actor, mapper } = context.current;

              actor.delete();

              mapper.delete();

              fullScreenRenderer.delete();

              context.current = null;

            }

          };

    },[])

    return (

        <div ref={vtkContainerRef}>

            View

        </div>

    )

}

export default View;  ```

Please suggest  what am i doing wrong...
2

vtkHttpDataSetReader is not a VTI reader. That would be vtkXMLImageDataReader instead.

Also readers can make the network call for you if you prefer.

3

@Sebastien_Jourdain thanks for your reply. I have made the changes but there is still an error:
TypeError: model.container.appendChild is not a function

const View = () => {

    const vtkContainerRef = useRef(null);
    const context = useRef(null);
    useEffect( () => {
        if (!context.current) {
            const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
                rootContainer : vtkContainerRef.current
            });

        const vtiReader = vtkXMLImageDataReader.newInstance({ fetchGzip: true });
        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();

        const source = vtiReader.getOutputData(0);
        const mapper = vtkVolumeMapper.newInstance();
        const actor = vtkVolume.newInstance();

        vtiReader.setUrl('https://kitware.github.io/vtk-js-datasets/data/vti/LIDCFull.vti')
        // https://data.kitware.com/#item/59de9dc98d777f31ac641dc1')
        .then(() => vtiReader.loadData())
        .then(() => {
            console.log(vtiReader)
            renderer.addVolume(actor);
            renderer.resetCamera();
            vtiReader.parseAsArrayBuffer();
            renderWindow.render();

            })

        actor.setMapper(mapper);
        mapper.setInputData(source);
        renderer.addVolume(actor);

        const controllerWidget = vtkVolumeController.newInstance({
            size : [400, 150], rescaleColorMap: true
        });

        // controllerWidget.setContainer(vtkContainerRef);
        // controllerWidget.setupContent(renderWindow, actor, true);

        fullScreenRenderer.setResizeCallback(({ width, height }) => {
            if (width > 414) {
                controllerWidget.setSize(400, 150);
            } else {
                controllerWidget.setSize(width - 14, 150);
            }
            controllerWidget.render();
            });
    
            renderer.resetCamera();
            renderWindow.render();

            global.pipeline = {
            actor,
            renderer,
            renderWindow,
            mapper,
            source,
            fullScreenRenderer,
            };
    
            context.current = {
            fullScreenRenderer,
            renderWindow,
            renderer,
            actor,
            mapper,
            };
            };

        return () => {
            if (context.current) {
              const { fullScreenRenderer, actor, mapper } = context.current;
              actor.delete();
              mapper.delete();
              fullScreenRenderer.delete();
              context.current = null;
            }
          };
    },[])
    return (
        <div ref={vtkContainerRef}>
            View
        </div>
    )
}

export default View;

If i remove the following line :
controllerWidget.setContainer(vtkContainerRef);

    controllerWidget.setupContent(renderWindow, actor, true);

It gives No INPUT in the console. I don’t understand why is that. Please let me know if you see the problem. I am new to vtk.js and still in the trying to understand phase.
Appreciate your help.

4

Since you are using react to include your 3D view, you should not use fullScreenRenderer which is meant for examples and be FullScreen.

If you want to stay in the React world, then you can look at react-vtk-js View and VolumeController which get used here