https://github.com/higlass/higlass-arcs
HiGlass track for displaying arcs between disconnected regions
https://github.com/higlass/higlass-arcs
arcs arcs-track higlass
Last synced: about 1 year ago
JSON representation
HiGlass track for displaying arcs between disconnected regions
- Host: GitHub
- URL: https://github.com/higlass/higlass-arcs
- Owner: higlass
- License: mit
- Created: 2018-06-11T20:42:00.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T21:52:00.000Z (over 3 years ago)
- Last Synced: 2025-03-25T19:48:40.691Z (about 1 year ago)
- Topics: arcs, arcs-track, higlass
- Language: JavaScript
- Homepage: https://higlass.github.io/higlass-arcs/
- Size: 2.78 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Arcs Track for HiGlass
> Display connections between non-adjacent regions as arcs
[](http://higlass.io)
[](https://www.npmjs.com/package/higlass-arcs)
[](https://github.com/higlass/higlass-arcs/actions?query=workflow%3Abuild)
[](https://bundlephobia.com/result?p=higlass-arcs)
[](https://github.com/prettier/prettier)
[](https://higlass.github.io/higlass-arcs/)
The WebGL implementation is inspired by [Matt Deslauriers' wonderful blog post on drawing lines](https://mattdesl.svbtle.com/drawing-lines-is-hard).
**Live demo:** https://higlass.github.io/higlass-arcs/
**Note**: This is the source code for the arcs 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-arcs
```
## Usage
The live script can be found at:
- https://unpkg.com/higlass-arcs/dist/higlass-arcs.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-arcs` in your `index.js` as follows:
```javascript
import 'higlass-arcs'; // 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.beddb',
uid: 'some-uid',
type: '1d-arcs',
options: {
labelColor: 'red',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
name: 'Arcs for me and you!',
},
},
...
}
```
Take a look at [`src/index.html`](src/index.html) for an example. You can find the corresponding live demo at https://higlass.github.io/higlass-arcs/.
## Custom Options
#### startField
By default, a segments x1 start value is used as the start position. You can customize this behavior by specifying another column. Useful when drawing arcs from bedpe data.
#### endField
By default, a segments x1 end value is used as the end position. You can customize this behavior by specifying another column. Useful when drawing arcs from bedpe data.
#### filter
An object with the following properties to filter segments.
**Properties:**
- `set`: a list of values that will allow segments to be included, i.e., rendered
- `field`: an integer defining the segment field column number that should be used to check against the `set`
In other words, this is how the filtering is basically implemented:
```javascript
segments.filter((segment) =>
options.filter.set.includes(segment.fields[options.filter.field])
);
```
## Development
### Installation
```bash
$ git clone https://github.com/higlass/higlass-arcs && higlass-arcs
$ npm install
```
### Commands
**Developmental server**: `npm start`
**Production build**: `npm run build`
**Deploy demo**: `npm run deploy`