higlass / higlass/higlass-multivec
Mobile device orientation change w/viewconf update causes pixijs exception to be thrown
- Dominant language
- JavaScript
- Stars
- 8
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
**Issue**
On the Chrome mobile device emulator (accessible within [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools/device-mode)) 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:
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.