An AngularJS (1.x) directive, wrapping the Genoverse genome browser.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
36Apr 20, 2018Feb 1, 2017Minified + gzip package size for angularjs-genoverse in KB


AngularJS - Genoverse

Build Status npm version Bower version

An AngularJS (1.x) directive, wrapping the Genoverse genome browser version 3.

Read more about how to use the browser here:


A complete example is available at:

Use this directive as a "web component" in your HTML:

<genoverse genome="genome" chromosome="chromosome" start="start" end="end" example-locations="exampleLocations">
    <genoverse-track name="'Sequence'" model="Genoverse.Track.Model.Sequence.Ensembl" view="Genoverse.Track.View.Sequence" controller="Genoverse.Track.Controller.Sequence" url="urls.sequence" resizable="'auto'" auto-height="true" extra="{100000: false}"></genoverse-track>
    <genoverse-track name="'Genes'" labels="true" info="'Ensembl API genes'" model="Genoverse.Track.Model.Gene.Ensembl" view="Genoverse.Track.View.Gene.Ensembl" url="urls.genes" resizable="'auto'" auto-height="true"></genoverse-track>
    <genoverse-track name="'Transcripts'" labels="true" info="'Ensembl API transcripts'" model="Genoverse.Track.Model.Transcript.Ensembl" view="Genoverse.Track.View.Transcript.Ensembl" url="urls.transcripts" resizable="'auto'" auto-height="true"></genoverse-track>

Installation and requirements

This package is available at NPM and Bower.

We don't provide wrappers for AMD, CommonJS or ECMA6 modules, so you might need a shim for Webpack, Browserify, SystemJS or RequireJS.

To include the script with this directive in your HTML, use:

<!-- Uglified version -->
<script src=".../angularjs-genoverse/dist/angularjs-genoverse.min.js"></script>

<!-- Concatenated, but non-obfuscated source -->
<script src=".../angularjs-genoverse/dist/angularjs-genoverse.all.js"></script>

You'll also need the Genoverse browser itself (both JS and CSS). You can either download it directly from github, or use the version, included in this repository's lib folder:

<!-- CSS -->
<link rel="stylesheet" href="/lib/Genoverse/css/genoverse.css">
<link rel="stylesheet" href="/lib/Genoverse/css/controlPanel.css">
<link rel="stylesheet" href="/lib/Genoverse/css/fileDrop.css">
<link rel="stylesheet" href="/lib/Genoverse/css/karyotype.css">
<link rel="stylesheet" href="/lib/Genoverse/css/resizer.css">
<link rel="stylesheet" href="/lib/Genoverse/css/trackControls.css">
<link rel="stylesheet" href="/lib/Genoverse/css/tooltips.css">

<!-- Javascript -->
<script src=".../angularjs-genoverse/lib/Genoverse/js/genoverse.combined.js"></script>
<script src=".../angularjs-genoverse/lib/Genoverse/js/genomes/grch38.js"></script>

To use it in your AngularJS module, you need to specify Genoverse module as a dependency, e.g.

angular.module("Example", ["Genoverse"]);

AngularJS-Genoverse depends on angular.js and jquery. Don't forget to include them as well.


We have 2 directives in this package: <genoverse> and <genoverse-track>.

Below is the full description of their attributes that you can use to configure them.

Note that all attributes are interpolated, i.e. use 2-way data-binding. So if you try passing an attribute as <genoverse attr="val">, angular will look for variable, called "val", not a string "val". If you want just to pass a literal, use another pair of quotes like: <genoverse attr="'literal'".


Global configuration of the browser. To specify tracks, use nested <genoverse-track> tags within genoverse.

For more details, see: (:warning: This fork of Genoverse contains latest documentation, but obsolete codebase).

Attribute Type Required Default Description
genome Object true Name of genome to display with lowercase letters and underscore, e.g. 'homo_sapiens'
chr String true Ensembl-style chromosome name, e.g. 'X' or '1' or '3R' or 'III'
start Number true Current genome location, where viewport starts
end Number true Current genome location, where viewport ends
example-locations Object false What location to display, when switching to another species e.g. {'homo_sapiens': {'chr': 'X', 'start': 73819307, 'end': 73856333}}
highlights Array false [] Array of regions to highlight, in the form { "start": 100, "end", 200, "label": "My highlight", "removable": false }
plugins Array false ['controlPanel', 'karyotype', 'resizer', 'fileDrop'] Array of plugins to use (chosen from Genoverse/js/plugins) ! Default different from original Genoverse
url-param-template String/Boolean false false Replace url upon browser drags with this template interpolation ! Default different from original Genoverse
useHash Boolean/undefined false undefined How URL is updated upon navigation (options: true=window.location.hash, false=window.history.pushState, undefined=HTML5history if available or fallback to hash, if not)
drag-action String false "scroll" Action performed on mouse drag (options: "scroll", "select", "off")
wheel-action String false "off" Action performed on wheel spin (options: "zoom", "off")
is-static Boolean false false If true, will stop drag, select and zoom actions occuring
saveable Boolean false false If true, track configuration and ordering will be saved in sessionStorage/localStorage
storage-type String false "sessionStorage" Storage to use to save track configuration (options: "sessionStorage", "localStorage")
save-key String false undefined Default key, used in configuration storage is "genoverse". saveKey will be appended to it, if defined
auto-hide-messages Boolean false true Determines, whether to collapse popups with messages on tracks by default
track-auto-height Boolean/undefined false true Determines, whether to auto-resize tracks to show all feauteres (can be overridden per-track by track's auto-height)
hide-empty-tracks Boolean/undefined false true Determines, whether to auto-hide tracks with no features in viewport (can be overridden per-track with track's hide-empty)


Configuration of a single track. Note that you don't have to create Scalebar track - it's present by default.

For more details, see: (:warning: This fork of Genoverse contains latest documentation, but obsolete codebase).

Attribute Type Required Default Description
model Object true Genoverse.Track.Model subclass
model-extra Object false Extra parameters to extend your model with: model.extend(modelExtra)
view Object true Genoverse.Track.View subclass
view-extra Object false Extra parameters to extend your view with: view.extend(viewExtra)
controller Object false Genoverse.Track.Controller subclass
controller-extra Object false Extra parameters to extend your controller with: controller.extend(controllerExtra)
extra Object false Extra parameters to extend your track's configuration, e.g. track.extend(extra)
name String true Track name
height Number false 12 Initial height of track in pixels
resizable Boolean/String false true If track's able to change height (options: true, false, "auto")
auto-height Boolean/undefined false browser.trackAutoHeight If track automatically resizes to keep features visible (options: true, false, undefined for default)
hide-empty Boolean/undefined false browser.hideEmptyTracks If track is hidden if there are no features to display in viewport (options: true, false, undefined for default)
margin Number false 2 Space in pixels below the track and next track
border Boolean false true If true, track has a border under it
unsortable Boolean false false If true, track re-ordering can't touch this track
url String/Function true ! Different from original Genoverse: String template OR function that returns string template that track uses to download features data to display.

E.g. ''.

Note that it uses __ASSEMBLY__, __CHR__, __START__ and __END__ variables, but doesn't support a variable for species/genome.
url-params Object false undefined Object of query params, added to url, e.g. {'foo': 'bar', 'x': 'y'} -> /?foo=bar&x=y
data false undefined Instead of loading feautures with AJAX, pass them pre-defined.
all-data Boolean false false If all data are loaded in a single request and consequent AJAX calls are not required upon scrolling.
data-request-limit Number false undefined
data-type String false undefined dataType setting to be used in the jQuery.ajax for getting data ! Different from original Genoverse: default undefined, not "json"
xhr-fields PlainObject false undefined xhrFieds setting to be used in the jQuery.ajax for getting data
feature-height Number false track.height Height of each feature
feature-margin Object false { top: 3, right: 1, bottom: 1, left: 0 } Space in pixels around each feature, when positioning on canvas and for bumping
color String false "#000000" Color of each feature
font-color String false feature.color (if any) or track.color Default color for feature labels
font-weight String/Number false "normal" Font weight
font-height Number false 10 Font height
font-family String false "sans-serif" Font family
labels Boolean/String false true Determines, how labels are drawn (options: true, "overlay", "separate" or false)
repeat-labels Boolean false false If true, label is repeated along the length of feature
bump Boolean/String false false If features are moved vertically within the track so that they don't overlap (options: true, false, "labels")
depth Number false undefined Maximum bumping depth for features in track, if required depth for a features is greater, it's not drawn
threshold Number false Infinity If threshold is exceeded, features on track are not drawn
click-tolerance Number false 0 By how many pixels at most you can drag the mouse, so that it's still considered a click (showing a popup), not a drag.
id String false

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from