Barbell Track for HiGlass

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

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

• HiGlass viewer: https://github.com/higlass/higlass
• HiGlass server: https://github.com/higlass/higlass-server
• HiGlass docker: https://github.com/higlass/higlass-docker

Installation

npm install higlass-barbell

Usage

The live script can be found at:

• https://unpkg.com/higlass-barbell/dist/higlass-barbell.min.js

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'));

2. 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