Error when adding rectangle widget to react-vtkjs-viewport

Web
1

Hello,

I am trying to expand on the current react-vtkjs-viewport created by OHIF found here: GitHub - OHIF/react-vtkjs-viewport: VTK.js image viewport component in React, which currently allows for a basic paintWidget to be viewed, such as in this example: @vtk-viewport

I’d like to expand the number of wdigets available in this viewport, to more closely match the example provided by vtk.js found here: vtk.js

I’ve began adding the rectangleWidget to the react-vtkjs-viewport by following vtkjs’s example linked above. I can create a new instance of vtkRectangleWidget along with the pre-existing paintWidget like so:

    this.paintWidget = vtkPaintWidget.newInstance();
    this.rectangleWidget = vtkRectangleWidget.newInstance({
      resetAfterPointPlacement: true,
    });

and create a manipulator for the rectangleWidget. However, when I try adding the widget to the widget manager using the following code:

  this.rectangleHandle = this.widgetManager.addWidget(
          this.rectangleWidget,
          ViewTypes.SLICE
        );

I receive the following error:

macro.js:64 Error compiling shader '#version 300 es

along with a bunch of source code which looks to be GLSL and webGL code written by kitware.

I also receive the following error:

index.js:383 Uncaught TypeError: Cannot read properties of null (reading 'isAttributeUsed')
    at Object.publicAPI.setMapperShaderParameters (index.js:383)
    at Object.publicAPI.updateShaders (index.js:367)
    at Object.publicAPI.renderPieceDraw (index.js:918)
    at Object.publicAPI.renderPiece (index.js:1037)
    at publicAPI.volumePass (index.js:74)
    at Object.publicAPI.apply (index.js:44)
    at Object.publicAPI.traverse (index.js:32)
    at publicAPI.traverseVolumePass (index.js:49)
    at Object.publicAPI.traverse (index.js:27)
    at Object.publicAPI.traverse (index.js:35)

I’m having a hard time pinpointing where the problem is in my code. If I log this.rectangleHandle to my console after assigning it, it appears to have been properly initialized. Am I missing a step to add this widget? Thank you for any advice you can offer.

2

react-vtkjs-viewport is using an older version of vtk.js, so I’m not entirely sure what the underlying issue is. In any case, this could be a bundling issue (shaders are incorrectly being transpiled). Does anything in the scene get rendered, or does this error only happen when you try to add the widget?

3

Thanks for the response Forrest,

The scene renders without errors before adding the widget to the widget manager. If you look at the live example which I am altering here @vtk-viewport, you will see a radio button that says “paint”

When that button is pressed, the following code is ran:

if (prevProps.painting !== this.props.painting) {
      if (this.props.painting) {
        this.viewWidget = this.widgetManager.addWidget(
          this.paintWidget,
          ViewTypes.SLICE
        );

        ...
      }       
}

which is what throws the errors when paintWidget is replaced with rectangleWidget

Do you think it may be worth trying to update the version of VTK in the repository?

4

I vaguely remember that updating VTK.js causes some part of react-vtkjs-viewport to break, but you can certainly try it to verify. Otherwise, this would need some digging in order to figure out why there is a shader error.