AngularJS - Genoverse

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

Read more about how to use the browser here: http://wtsi-web.github.io/Genoverse/.

Example

A complete example is available at: https://RNAcentral.github.io/angularjs-genoverse/

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>
</genoverse>

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.

Configuration

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'".

genoverse

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

For more details, see: https://github.com/simonbrent/Genoverse/blob/master/docs/configuration.md (: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)

genoverseTrack

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

For more details, see: https://github.com/simonbrent/Genoverse/blob/master/docs/tracks/configuration.md (: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. 'https://rest.ensemblgenomes.org/sequence/region/homo_sapiens/CHR:START-END?content-type=text/plain'.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 | |