Skip to content

higlass/higlass-barbell

Repository files navigation

Barbell Track for HiGlass

Display BEDPE data as barbells (two filled regions joined by a line)

HiGlass npm version gzipped size code style prettier

Screenshot of the barbell track

Note: This is the source code for the barbell track only! You might want to check out the following repositories as well:

Installation

npm install higlass-barbell

Usage

The live script can be found at:

  1. Make sure you load this track prior to hglib.min.js. For example:
<script src="higlass-barbell.min.js"></script>
<script src="hglib.min.js"></script>
<script>
  ...
</script>

If you build a custom React application, import higlass-barbell in your index.js as follows:

import 'higlass-barbell'; // This import is all you have to do

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
  1. Now, configure the track in your view config and be happy! Cheers 🎉
{
  ...
  {
    server: 'http://localhost:8001/api/v1',
    tilesetUid: 'my-aggregated-bedfile.bedpe',
    uid: 'some-uid',
    type: 'barbell',
    options: {
      ...
    },
  },
  ...
}

Take a look at src/index.html for an example.

Expected data

This track expects bedpe style data served from either a higlass server or local tile values. If local tiles are provided, you can set the following extra properties in each data object:

  • mouseOver - Text that should appear when the mouse hovers or a barbell
  • strokeWidth - The width of the outline of each barbell
  • strokeColor - The color of the outline of each barbell
  • strokeOpacity - The opacity of the outline of each barbell
  • color - The fill color of each barbell
    {
      "uid": 1,
      "fill": "red",
      "strokeWidth": 3,
      "strokeColor": "black",
      "strokeOpacity": 1,
      "xStart": 412232865,
      "xEnd": 412239391,
      "yStart": 412337941,
      "yEnd": 412351977,
      "xChrOffset": 377585195,
      "yChrOffset": 377585195,
      "importance": 0.8289870449281151,
      "mouseOver": "<b>there</b>",
      "fields": [
        "chr3",
        34637670,
        34644196,
        "chr3",
        34742746,
        34756782
      ]
    }

Development

Installation

$ git clone https://github.com/higlass/higlass-barbell && higlass-barbell
$ npm install

Commands

Developmental server: npm start Production build: npm run build Deploy demo: npm run deploy