higlass / higlass/higlass-multivec

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

Open
#42 1 comment 0 reactions 0 assignees View on GitHub
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):

![multivecMobileTest mov](https://user-images.githubusercontent.com/33584/84578083-cc169680-ad76-11ea-80dc-2a291dcb2b22.gif)

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:

Screen Shot 2020-06-13 at 1 18 44 PM

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.