https://github.com/higlass/higlass-barbell
https://github.com/higlass/higlass-barbell
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/higlass/higlass-barbell
- Owner: higlass
- License: mit
- Created: 2021-08-14T03:49:06.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-21T03:13:00.000Z (about 4 years ago)
- Last Synced: 2025-01-25T07:27:32.523Z (over 1 year ago)
- Language: JavaScript
- Size: 1.34 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Barbell Track for HiGlass
> Display BEDPE data as barbells (two filled regions joined by a line)
[](http://higlass.io)
[](https://www.npmjs.com/package/higlass-barbell)
[](https://bundlephobia.com/result?p=higlass-arcs)
[](https://github.com/prettier/prettier)
**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:
```html
...
```
If you build a custom React application, import `higlass-barbell` in your `index.js` as follows:
```javascript
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(, document.getElementById('root'));
```
2. Now, configure the track in your view config and be happy! Cheers 🎉
```javascript
{
...
{
server: 'http://localhost:8001/api/v1',
tilesetUid: 'my-aggregated-bedfile.bedpe',
uid: 'some-uid',
type: 'barbell',
options: {
...
},
},
...
}
```
Take a look at [`src/index.html`](src/index.html) for an example.
### Expected data
This track expects bedpe style data served from either a higlass server or [local tile values](https://docs.higlass.io/view_config.html#raw-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
```json
{
"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": "there",
"fields": [
"chr3",
34637670,
34644196,
"chr3",
34742746,
34756782
]
}
```
## Development
### Installation
```bash
$ 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`