higlass / higlass-multivec Goto Github PK

Multivec Tracks for Higlass

License: MIT License

JavaScript 49.06% HTML 50.94%

higlass-multivec's Introduction

Introduction

HiGlass is a web-based viewer for datasets too large to view at once. It features synchronized navigation of multiple views as well as continuous zooming and panning for navigation across genomic loci and resolutions. It supports visual comparison of genomic (e.g., Hi-C, ChIP-seq, or bed annotations) and other data (e.g., geographic maps, gigapixel images, or abstract 1D and 2D sequential data) from different experimental conditions and can be used to efficiently identify salient outcomes of experimental perturbations, generate new hypotheses, and share the results with the community.

A live instance can be found at https://higlass.io. A Docker container is available for running an instance locally, although we recommend using the higlass-manage package to start, stop and configure local instances.

For documentation about how to use and install HiGlass, please visit https://docs.higlass.io.

Citation

Kerpedjiev, P., Abdennur, N., Lekschas, F., McCallum, C., Dinkla, K., Strobelt, H., ... & Gehlenborg, N. HiGlass: Web-based Visual Exploration and Analysis of Genome Interaction Maps. Genome Biology (2018): 19:125. https://doi.org/10.1186/s13059-018-1486-1

Example

Development

To run higlass from its source code simply run the following:

npm clean-install // use --legacy-peer-deps if you get peer dependency errors
npm run start

This starts a server in development mode at http://localhost:5173/.

Warning The following examples need to be migrated to the latest build. Once started, a list of the examples can be found at http://localhost:8080/examples.html. Template viewconfs located at /docs/examples/viewconfs can viewed directly at urls such as http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json.

Tests

The tests for the React components and API functions are located in the test directory. Tests are run with web-test-runner, which you can learn more about the CLI in the documentation.

Useful commands:

Run all tests: npm test
Run all tests in interactive "watch" mode: npm test -- --watch
Run a specific test or "glob" of tests: npm test -- test/APITests.js [--watch]
Manually run individual tests in an open browser window: npm test -- --manual

Troubleshooting:

If the installation fails due to sharp > node-gyp try installing the node packages using python2:
```
npm ci --python=/usr/bin/python2 && rm -rf node_modules/node-sass && npm ci
```

API

HiGlass provides an API for controlling the component from with JavaScript. Below is a minimal working example to get started and the complete documentation is availabe at docs.higlass.io.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Minimal Working Example &middot; HiGlass</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/hglib.css">

  <style type="text/css">
    html, body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
  </style>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/pixi.js@5/dist/pixi.min.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/dist/react-bootstrap.min.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/dist/hglib.min.js"></script>
</head>
<body></body>
<script>
const hgApi = window.hglib.viewer(
  document.body,
  'https://higlass.io/api/v1/viewconfs/?d=default',
  { bounded: true },
);
</script>
</html>

HiGlass Clodius - Package that provides implementations for aggregation and tile generation for many common 1D and 2D data types
HiGlass Python - Python bindings to the HiGlass for tile serving, view config generation, and Jupyter Notebook + Lab integration.
HiGlass Manage - Easy to use interface for deploying a local HiGlass instance
HiGlass Docker - Build an image containing all the components necessary to deploy HiGlass
HiGlass Server - Server component for serving multi-resolution data
HiGlass App - The code for the web application hosted at https://higlass.io
Cooler - Package for efficient storage of and access to sparse 2D data

License

HiGlass is provided under the MIT License.

higlass-multivec's People

Contributors

Stargazers

Watchers

Forkers

pkerpedjiev daniellenguyen flekschas alexpreynolds pkerpedjiev-zymergen sehilyi

higlass-multivec's Issues

Epilogos track occasionally drags behind other tracks on pan event

Issue

I observe an issue with higlass-multivec pan events, where the epilogos/stacked-bar track will occasionally not align correctly with the other tracks.

Pieces of the track will either disappear and/or be shifted horizontally, taking them out of alignment with other tracks.

A subsequent pan or zoom event by the user seems to "reset" the view, bringing the track back into alignment.

Here is an animation showing the effect:

The red peak is shifted to the right, upstream of where it should be, leaving a gap upstream. A subsequent pan event redraws the tiles and positions them correctly.

Observed

This is observed on a local test site running the current versions of higlass/higlass-multivec 1.9.5/0.2.4. I also observe this issue when bringing the test viewconf into higlass.io.

Input

Here is a link to a test viewconf:

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

I believe this might be a regression from an older (pre-0.2.0) version of higlass-multivec. Unfortunately, I was not able to find any commit that references this or a potential fix.

Implement mouseover in both multivec line and multivec bar tracks

Can use the same object we store data for exporting to SVG for values.
Follow example in scaled stacked bar track.

HiGlass 1.9.0 breaks StackedBarTrack

Implement (or reimplement) different background colors for all multivec tracks.

I would either try to attach background as another one of tile.graphics's children or using PIXI's background implementation.

Export to SVG does not work for any multivec track.

This is because the object used to export values to the method drawing SVG either doesn't exist or has incorrect values.
This issue is linked to mouseover being incorrect for unscaled stacked bar track. The values in the object to be exported to SVG MUST be scaled to match how rescaleTiles() scales the whole tile.

Draw multivec bar track using textures.

Create a new graphics object in renderTile and draw all rectangles to it.
Make a texture and then a sprite from this new graphics object, then add the sprite as a new child to tile.graphics.
Make sure to remove all children from tile.graphics when rerendering.

Exposing barBorder property or attributes in track options menu

Wouter noted that the black border around multivec track elements makes the component elements more difficult to view when narrow.

I think can go into the view configuration JSON and specify it manually, and I was able to disable it by manually editing the local copy of the multivec plugin, but to help him explore different combinations I'd like to ask if the barBorder property could perhaps be exposed in the dropdown options menu for the multivec track, to either enable/disable it (true/false) or to expose color and/or opacity?

Bar track is misaligned on the y axis.

When new tiles are loaded, for each row, all sprites' y coordinates should move to align with the tile that has the greatest value.
The code for this should go in rescaleTiles(); implement this in the bar track class.

Some tiles are clipped on the top and bottom in unscaled stacked bar track

I suspect it has to do with rescaleTiles() and where and when the new global max and min (this.maxAndMin) are updated.

Create option to allow vector tracks to switch to any multivec track.

Make bar track less blurry.

The track is blurry because something is wrong with proportions for each rectangle in renderTile.
Check out how width and height are calculated for each rectangle in StackedBarTrack.

For line track, if value in row is NaN or is otherwise nonexistent, the space allotted for the value should be blank, not a flat line.

Fix this in renderTile. Should cut off line at value right before NaN value and moveTo() the next available value in the row.

When there is no custom array of colors in options, make the default color for all multivec tracks black.

Line track should have all black lines
Bar track should be all black bars
Think of way to solve this in both stacked bar tracks...

Write tests for all multivec tracks.

Make generated data sets that cover all edge cases.

OneDimensionalMixin and options for multivec tracks should be in higlass-multivec repo.

Last row in line track gets cut off slightly on the bottom as well as on the top provided the values are large enough.

Not sure why, but it might have to do with how thin the line is and the fact the whole height of the track is used in the calculation of how much space each row should get.
Crude solution: move every y value in the track up by 2px.

Create option for all multivec tracks to allow switching to any other multivec track.

Deprecation Warning

Deprecation Warning: graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture

Create two options for y axis in bar and line tracks:

Equal amount of vertical track space for all rows, but values in every row must be scaled according to the largest global value.
Vertical track space is assigned depending on how large the largest value in the row is compared to the global max value.

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

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:

Mouseover does not work in unscaled stacked bar track.

(Mouseover is implemented and is working for scaled stacked bar track)
Coordinates made for mouseover don't get scaled in rescaleTiles(). They must be scaled according to how the sprites are rescaled in rescaleTiles().
There are two ways to go about doing this: the better solution is to invest time into using PIXI mouseover, and the other solution is to reverse engineer and apply the same scaling as in rescaleTiles().
If we choose reverse engineering the scaling, we also have to align the y value so that the column sits in the correct place along the zero line defined by the new max tile.

Realign unscaled stacked bar track to be fully visible.

The track was skewed because of newly implemented scaling in OneDimensionalMatrix (initTile, updateTile).
Check in either rescaleTiles() or drawVerticalBars() though I suspect it's in the latter because the error is there right when the tiles are initially drawn.