Provides SVG View for Genome Features rendered with the Apollo Track Web Service via JBrowse

Usage no npm install needed!

<script type="module">
  import genomefeaturecomponent from '';



Greenkeeper badge

Travis npm package Coveralls


Make sure you have node 8 or better

npm install

npm start

View at http://localhost:3000.

Works by accessing data from an Apollo server.


[{"strand":1,"children":[[{"phase":0,"strand":1,"fmin":329332,"type":"CDS","fmax":329459},{"phase":2,"strand":1,"fmin":329849,"type":"CDS","fmax":330082},{"phase":0,"strand":1,"fmin":330165,"type":"CDS","fmax":330301},{"phase":2,"strand":1,"fmin":330375,"type":"CDS","fmax":330416},{"strand":1,"fmin":329332,"type":"exon","fmax":329459},{"strand":1,"fmin":329849,"type":"exon","fmax":330082},{"strand":1,"fmin":330165,"type":"exon","fmax":330301},{"strand":1,"fmin":330375,"type":"exon","fmax":330416}]],"name":"GB42168-RA","id":" Gene Set v3.2/Group1.1/GB42168-RA.json","fmin":329332,"type":"mRNA","fmax":330416,"selected":true}]

Example Usage

From an example ReactJS environment (also working in VueJS and demo is in VanillaJS). Height is calculated on the fly for 'global' isoform tracks.

    let transcriptTypes = getTranscriptTypes();
    const configGlobal = {
      'locale': 'global',
      'chromosome': chromosome,
      'start': fmin,
      'end': fmax,
      'tracks': [
          'id': 1,
          'genome': this.props.species,
          'type': 'ISOFORM',
          'url': [
    new GenomeFeatureViewer(configGlobal, 'genome-feature', 900, undefined);
<div id='genome-feature'></div>


Example 1

Long Term Goal

The idea is that we can have multiple interactive tracks.

This is an example of how they might be used. The controls / filters can be used to interact and the details section could be part of that interaction.

The top genomic view is the "overview", consisting of a (very sad) variant track and an isoform track, though it could be any number. The red arrow at top indicates a selected region that is linked to the scrollable track at the bottom through a separate eventing model.

alt text