Package Exports

agr_genomefeaturecomponent
agr_genomefeaturecomponent/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (agr_genomefeaturecomponent) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GenomeFeatureComponent

Instructions

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.

E.g., http://someserver.org/apollo/track/Honeybee/Official%20Gene%20Set%20v3.2/Group1.1/GB42168-RA.json

[{"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":"http://demo.genomearchitect.org/Apollo2/track/Honeybee/Official Gene Set v3.2/Group1.1/GB42168-RA.json","fmin":329332,"type":"mRNA","fmax":330416,"selected":true}]

Deploy

Bump package number.
npm run-script pack
npm login # if not already
npm publish # if not already

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,
      'transcriptTypes':transcriptTypes,
      'tracks': [
        {
          'id': 1,
          'genome': this.props.species,
          'type': 'ISOFORM',
          'url': [
            this.trackDataUrl,
            '/All%20Genes/',
            `.json${nameSuffixString}`
          ]
        },
      ]
    };
    new GenomeFeatureViewer(configGlobal, 'genome-feature', 900, undefined);

<div id='genome-feature'></div>

Result:

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