Home

Creating a new Panel

A new panel is constructed using the constructor new MLVPanel(track_configs,panel_config) and passing the following parameters:-

tracks_config An array of track configs. The bare minimum in each config is the url pointing to the track.

panel_config A config to describe user interaction with the panel. This is optional and if not supplied, default settings will be used.

To create a panel from an existing div specify it in the panel config (see example 1)

<div id="panel-1" style="height:500px;width:800px">
</div>
<script>
    var panel = new MLVPanel([{url:"http://path/to/track.bb}],
                              {div:"panel-1"});
    panel.update("chr16",1,1000000);
</script>

If no div is supplied in the panel config then one will be created with default height and width of 200 and 400 respectively. Height and width can also be specified in the config. In this case, the div will not be attached to the dom, but can be obtained with the getDiv method and attached to a parent.

<script>
   var panel = new MLVPanel([{url:"http://path/to/track.bb}]);
   panel.getDiv().appendTo("body")
   panel.update("chr16",1,1000000);
</script>

Updating the View

To update the view to a particular location use the following method

panel.update(chromosome,start,end,no_propogation);

if no_propogation is true then listeners will not be informed of the update (useful to stop recursive loops), otherwise this parameter can be ignored

Calling update without any parameters will simply redraw the current view. This is used if a tracks's settings have been altered e.g color/height or the panel has been altered e.g.resized. This way manipulations can be batched, with update called at the end to prevent multiple re-drawing of the panel.

Adding/Removing Tracks

Tracks can be added using addTrack(), supplying the track config. A call to Update() then needs to be made in order to update the view.

panel.addTrack({url:"https://path/to/track/track.bw",color:"red",track_id:"tarck2"});
panel.update();

By default tracks are added at the bottom of the panel , however a second optional argument index will add the track at that index e.g. to add the track at the top of the panel:-

panel.addTrack({url:"https://path/to/track/track.bw"},0);
panel.update();

The panel can be emptied with removeAllTracks() or specific tracks removed using their id

panel.removeTrack("track2");
panel.update();

Resizing the Panel

The panel's div should not be resized explicitly, instead use the following code:-

panel.setHeight(heigth);
panel.setWidth(width);
panel.update()

This code should be called if the panels container or the window is resized.

Altering Tracks

Tracks should be altered with setTrackAttribute(track_id,attribute,value) or many attributes at once with setTrackAttributes(track_id,attributes). These methods will alter the track's config and deal with any other state that needs to be changed. Calling update() will alter the panel's view to reflect the changes

Highlighting Regions

See example 11. Regions can be highlighted with different colors using the the following method:-

panel.setHighlightedRegion(
    {chr:chr,start:start,end:end},
    "region_1",
    "red"
);
panel.update();

The highlighted region can be removed using:

panel1.removeHighlightedRegion("region_1");

Filtering Features

See example12 Feature are filtered by passing the track id and a function to the method setTrackFeatureFilter. For example, to hide features less than 10kb use the following code:-

panel.setTrackFeatureFilter("gene_track",function(feature){
    if (feature.end-feature.start<10000){
        return false;
    }
    return true;
});

Feature Colors

To set the color of all features use the setTrackAttribute e.g.

setTrackAttribute("gene_track","color","red");

To set the color dynamically use the method setTrackColorFunction - see example12. For example to color genes >20kb green and those <20kb red use the following:-

panel.setTrackColorFunction("gene_track",function(feature){
    if (feature.end-feature.start<20000){
        return "red";
    }
    return "green";
});