Mobile device orientation change w/viewconf update causes pixijs exception to be thrown

[alexpreynolds]

Issue

On the Chrome mobile device emulator (accessible within Chrome Developer Tools) or on an iPhone (iOS 13.4) running Chrome, changing the device orientation — from portrait to landscape, or vice versa — raises a TypeError exception when rendering the epilogos/stacked-bar track.

This test is using stock higlass/higlass-multivec (1.9.5/0.2.4):

Here is the test viewconf:

https://gist.github.com/alexpreynolds/2e3c3be9fa8784a27070469d4acef558

This effect is not observed on the higlass.io site. However, on mobile device rotation, higlass.io does not resize the heights of tracks to fill the vertical space.

On orientation change, our test site listens for the orientationchange event, and then updates the React HiGlassComponent component viewConfig property with a new viewconf containing adjusted track heights.

I have debugged the adjusted track heights and they are correctly calculated to reflect the desired portrait- or landscape-specific layout.

Essentially, we have something like the following:

  componentDidMount() {
    let self = this;
    window.addEventListener("orientationchange", function() {
      setTimeout(() => {
        self.updateViewportDimensions();
      }, 0);
    });

The updateViewportDimensions function is bound to the parent component that contains the HiGlassComponent.

This function collects information about device/viewport dimensions and updates the viewconf track height values accordingly, including the height of the epilogos track.

This same function is also used for the desktop test site. In componentDidMount, we add a listener for the resize event and call the same function.

Here is the exception that is thrown, reported in the Console, which appears to reference an issue with data in the StackedBarTrackClass instance (the epilogos track):

Uncaught (in promise) TypeError: Cannot read property 'length' of null
    at Runner.emit (runner.es.js:83)
    at Renderer.render (core.es.js:10534)
    at Renderer.generateTexture (core.es.js:10202)
    at StackedBarTrackClass.drawVerticalBars (higlass-multivec.js:5383)
    at StackedBarTrackClass.renderTile (higlass-multivec.js:5062)
    at StackedBarTrackClass.initTile (higlass-multivec.js:4998)
    at StackedBarTrackClass.addMissingGraphics (TiledPixiTrack.js:788)
    at StackedBarTrackClass.synchronizeTilesAndGraphics (TiledPixiTrack.js:833)
    at StackedBarTrackClass.receivedTiles (TiledPixiTrack.js:983)
    at eval (DataFetcher.js:302)

Here is a snapshot of the exception, with more detail:

[alexpreynolds]

Perhaps due to an asynchronous step, some data do not appear to be ready at the time that the StackedBarTrackClass function renderTile is called.

During debugging, I tried investigating the values of matrix, tileX, and so on, which are passed to this function.

These variables contained non-null data, with one exception: tile.mouseOverData, which was null just before the TypeError is thrown.

When not null, this variable contains an Array, and so perhaps the exception results from trying to get the length property of this variable when it is null.

Wrapping this part of the function in a try...catch block seems to work, insofar as this lets the plugin keep running until data become available:

    renderTile(tile) {  
      // ...
      try {
        // creates a sprite containing all of the rectangles in this tile
        this.drawVerticalBars(this.mapOriginalColors(matrix), tileX, tileWidth,
          this.maxAndMin.max, this.maxAndMin.min, tile);
  
        graphics.addChild(tile.sprite);
        this.makeMouseOverData(tile);
      }
      catch(err) {
        // do nothing
      }
    }

I'm not sure why an orientation change triggers this, but hopefully this gets closer to the cause.