Repository files navigation

Display connections between non-adjacent regions as arcs

The WebGL implementation is inspired byMatt Deslauriers' wonderful blog post on drawing lines.

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

npm install higlass-arcs

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 tohglib.min.js. For example:

<scriptsrc="higlass-arcs.min.js"></script><scriptsrc="hglib.min.js"></script><script>  ...</script>

If you build a custom React application, importhiglass-arcs in yourindex.js as follows:

import'higlass-arcs';// This import is all you have to doimportReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./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.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 atsrc/index.html for an example. You can find the corresponding live demo athttps://higlass.github.io/higlass-arcs/.

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.

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.

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 theset

In other words, this is how the filtering is basically implemented:

segments.filter((segment)=>options.filter.set.includes(segment.fields[options.filter.field]));

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

Developmental server:npm startProduction build:npm run buildDeploy demo:npm run deploy