MLVPanel (Multi Locus View) is a flexible lightwight JavaScript component, allowing the visualization of multiple genomic locations simultaneously. It is heavily based on the excellent igv.js browser,but has the following functionality:-
- Multiple tracks of different types can be displayed compactly in the same panel.
- Multiple panels displaying different genomic locations can be displayed on the same page.
- Panels can be linked together through callbacks.
- Tracks are easily extensible, making creation of custom tracks straight forward.
- Command line tool (node.js) for generating multiple images (svg, pdf or png) from a list of locations
Just copy dist/mvl_panel.js and put the dist/images directory in the same directory as your html page. Then just import mlv_panel.js in a <script> tag - see example1. Older browsers may also require polyfills.
MLVPanel is written in pure ES6 javascript and hence will work in modern browsers without the need to build from the source code - see example 2. Although not practical for production, this does allow you to edit the the code in realtime in the browser.
The source files are bundled together, minified and converted to legacy javascript using webpack. For a standard build cd to the base directory and use the following command (assuming you have webpack installed)
webpack --config mlv_panel_config.js
The index file specified in the config simply imports the required css files and javascript modules and exposes certain modules by attaching them to the window object.
Documentation can be found on the wiki and examples along wih source code here.