TypeError: Cannot read properties of undefined (reading 'traverse')

Web
1

Since yesterday I am getting the following error.
TypeError: Cannot read properties of undefined (reading 'traverse')

I cannot see anything that I have changed in the code for this to occur. I have also gone so far as to reclone my repo from months ago and run the previously working code from that but am still getting the same issue.

Issue is not dependent on browser (tried on Chrome/Safari/Firefox) and OS (tried on MacOS and on Azure VM)

I am completely at a loss about what to even try next. And pointers would be greatly appreciated.

Screenshot 2022-02-09 at 11.49.48
Screenshot 2022-02-09 at 11.49.48718×168 24.9 KB

2

Did you try with various version of vtk.js? Was it your machine that was working before but not anymore? Did you restart your browser? Did you load the proper rendering profiles?

Can you provide more context?

3

Are the vtk.js examples online working for you?

4

hey @Sebastien_Jourdain. Thanks for the pointer regarding the version. This error shows when using the latest version of vtk.js 22.5.1 (and also all versions after 22.4.1). However, the system seems to operate as expected using version 22.4.0.

I have now locked in the version to use.
<script type="text/javascript" src="https://unpkg.com/vtk.js@22.4.0/vtk.js"></script>

Do you know of anything changed between 22.4.0 and 22.4.1 which might have affected this? Or why this only might have raised its head now?

Just to answer your questions:

  • I am using the same machine as I always was for this development
  • I have restarted the browser and the whole machine
  • This was tested on Chrome, Safari and Firefox
  • Tested on MacOS and Azure VM
  • The basic online example of the cone is working for me with the newest version.
5

Maybe you are providing a custom layout for the scalarbar and that MR will probably break it (depends on the custom function but very likely) Should be a quick fix if that is the case.

See the changes to scalarbaractor here

6

If that is not it let me know and I’ll dig deeper.

7

Thanks for that Ken. I appreciate you pointing this out to me.

Below is a snippit of part of my code which uses a scalarBarActor. Would you be able to point me towards the areas that may need changing.

       ...
        var lookupTable = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
        this.lutActor = vtk.Rendering.Core.vtkScalarBarActor.newInstance()

        // Get the scalar we want to colour by
        let colorByArrayName = activeScalar.toLowerCase()
        const scalarArray = this.vtkData.getPointData().getArrayByName(colorByArrayName.toLowerCase());

        // Create the color Map used for the VTK
        let colorMap = this.create_colorMap()
        // colorMap = {
        //      "ColorSpace": "Diverging",
        //      "Name": "blue to yellow through green",
        //      "NanColor": [1, 0, 0],
        //      "RGBPoints": rgb
        //  }

        // Update the Look Up Table
        lookupTable.applyColorMap(colorMap);
        lookupTable.setMappingRange(scalarArray.getRange()[0], scalarArray.getRange()[1]);
        lookupTable.updateRange();

        // Updates the Lookup Table actor with a title and ensures that it is visible
        this.lutActor.setAxisLabel(activeScalar);
        this.lutActor.setVisibility(true);
        
        // Mapper for the collection of Spheres
        this.mapper = vtk.Rendering.Core.vtkGlyph3DMapper.newInstance({
            colorByArrayName,
            colorMode: 1,  // vtk.Rendering.Core.Mapper.ColorMode.MAP_SCALARS;,
            interpolateScalarsBeforeMapping: true,
            scalarMode: 3, // vtk.Rendering.Core.Mapper.Constants.ScalarMode.USE_POINT_FIELD_DATA
            scalarVisibility: true,
            useLookupTableScalarRange: true,
            lookupTable,
        });

        this.actor.getProperty().setOpacity(1.0);

        /* ---------- */

        this.actor.setMapper(this.mapper);
        this.mapper.setInputData(this.vtkData, 0)
        this.mapper.setInputConnection(this.source.getOutputPort(), 1)

        this.lutActor.setScalarsToColors(this.mapper.getLookupTable());

       ...
8

You are missing an import of the OpenGLScalarBarActor somewhere (or I am). @Sebastien_Jourdain I added the opengl scalar bar actor to the All and Geometry profiles but not to the OpenGL\index.js file as it is a private class (but needs to be added to the factory. My assumption is that the profiles would handle that but maybe people are not relying on them?

9

e.g.

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import ‘vtk.js/Sources/Rendering/Profiles/Geometry’;

or

import ‘vtk.js/Sources/Rendering/OpenGL/Profiles/Geometry’;

10

The prebuilt version are importing the profile, so I would think it should work. Let me double check the import path to make sure it get bundled in Kevin’s case.

11

Actually, the pre-built is not using profiles. It rely solely on the various import in the index.js tree.

@ken-martin for private class, you will still need to import them in those .../OpenGL /index.js because of the registration but you don’t need to export them.

You can just add import './ScalarBarActor';

12

@Kevin_Sweeney should be fixed now once the next automated build finishes

13

Thanks very much @ken-martin & @Sebastien_Jourdain .
I can confirm that my code now works again with the new build. Appreciate the help and the speed of the fix

1 Like