Add multi-chromosome viewer to the phenotype labs page

nathandunn commented 9 years ago

In reference to this piece: Reference: https://github.com/pparsons/angular-chromosome-vis/

http://pparsons.github.io/angular-chromosome-vis/

[x] get to work on the page as-is
[x] add ceontromere
[x] view feature variants (phenotypes, diseases)
- [x] create callback for click / hover
- [x] create styling / callback
- [ ] call variants remotely
[ ] call bands remotely (scigraph / golr)
- [ ] call feature variants remotely
[ ] remove DAS code
[ ] make the multi-chromosome browser vertical

JBrowse / Apollo worked well-enough for a single gene region (though there seems to be some duplication issues):

http://tartini.crbs.ucsd.edu/labs/gene/NCBIGene:80331 (see the last tab)

However, it is completely horrible for multiple genes:

http://tartini.crbs.ucsd.edu/labs/phenotype/HP:0007335#jbrowse

BioJS, however has some really nice components for viewing multiple components:

http://biojs.io/d/biojs-vis-chromosome http://biojs.io/d/cyto-chromosome-vis

These could provide callbacks into JBrowse / Apollo for rending specific genes, wiggle tracks, etc. and callback to monarch view facets.

nathandunn commented 9 years ago

Need this to do efficiently: https://github.com/SciCrunch/SciGraph/issues/66

nathandunn commented 9 years ago

added here: http://localhost:8080/labs/phenotype/HP:0007335#jbrowse

based on: http://biojs.io/d/biojs-vis-chromosome

and here: http://jsbin.com/takixe/1/

Some issues with the navbar, as well.

nathandunn commented 9 years ago

@kshefchek @nlwashington I think that this is blocked on the scigraph side, but there are some weird CSS / JS interactions that make some of the stuff harder to work with. Anyway, I am fairly certain that this is just D3 anyway. Should be fairly trivial to implement. Once you know what you want and you register callbacks I can help link those to JBRowse / Apollo.

nathandunn commented 9 years ago

Note, this will be student project for the summer:

http://www.ncbi.nlm.nih.gov/projects/genome/assembly/grc/human/issues/?filters=fix-version:grch38p3,grch38p2,grch38p1+scaffold-type:novel,fix

Worst-case, we can start the student off with this as a baseline, which is the code that I already sort of developed but with the angular library added:

http://pparsons.github.io/angular-chromosome-vis/ http://joelin.ca/cyto-chromosome-vis/

The student will need to (thanks for taking such good notes Nicole): _pulling pieces of data from scigraph adding relevant views into golr pulling from golr injecting data into d3 chr viewer _show chr bands _decorate some attribute (gene, or snp, or phenotype) on chromosome (what this library does not do yet) _facet on some attribute to grid view *_organism/taxon _zooming *table selection add hooks into apollo

@kshefchek - create a blank page (no included CSS / JS) in Monarch with some sample GOLR ajax queries, answer student questions @nathandunn - answer questions, help with any Apollo integration @nlwashington - coordinate with Chris C and make sure that scigraph is dumping out proper views into GOLR and provide a sample scigraph query to get variants and phenotypes out

nathandunn commented 9 years ago

Reference: https://github.com/pparsons/angular-chromosome-vis/

nlwashington commented 9 years ago

fyi, static (non-interactive) version does live at ensembl: http://uswest.ensembl.org/Rattus_norvegicus/Phenotype/Locations?ph=2461, but with no semantics or faceting.

kshefchek commented 9 years ago

Empty static page added, see http://beta.monarchinitiative.org/labs/chromosome-vis-demo

nathandunn commented 9 years ago

@kshefchek In-case there are any other issues (jQuery, CSS, etc.) , is it possible for it to also have one wihtout any of the headers / included CSS / JS, as well?

Thanks.

kshefchek commented 9 years ago

Sure thing, should be a blank slate now.

Kent

On Sun, May 31, 2015 at 2:07 PM, Nathan Dunn notifications@github.com wrote:

@kshefchek https://github.com/kshefchek In-case there are any other issues (jQuery, CSS, etc.) , is it possible for it to also have one wihtout any of the headers / included CSS / JS, as well?

Thanks.

— Reply to this email directly or view it on GitHub https://github.com/monarch-initiative/monarch-app/issues/653#issuecomment-107246591 .

nathandunn commented 9 years ago

Thanks!

Nathan

On May 31, 2015, at 4:39 PM, Kent Shefchek notifications@github.com wrote:

Sure thing, should be a blank slate now.

Kent

On Sun, May 31, 2015 at 2:07 PM, Nathan Dunn notifications@github.com wrote:

@kshefchek https://github.com/kshefchek In-case there are any other issues (jQuery, CSS, etc.) , is it possible for it to also have one wihtout any of the headers / included CSS / JS, as well?

Thanks.

— Reply to this email directly or view it on GitHub https://github.com/monarch-initiative/monarch-app/issues/653#issuecomment-107246591 .

— Reply to this email directly or view it on GitHub.

nathandunn commented 9 years ago

@EstiiCoder here is the link to JBrowse

nathandunn commented 9 years ago

@EstiiCoder The JSON will be roughly in the format (in JSON):

Chromosome: 
    band:    id
    feature: name/label
             start
             stop 
             stain intensity
             reference # what genomic assembly, species, etc., eg. 5p22.5
             reference_closure # parent values e.g., 5p22, 5p2, 5p, 5
             type # SO:12345 insertion
             type_closure # parents in ontology
             attributes:[
                 type:  # e.g., phenotype/disease
                 name:  # e.g., blue eyes
                 closure: # parent attributes
             ]

kshefchek commented 9 years ago

@kltm is there anyway to remove or override pup_tent.set_common()? Would be nice to use puptent here but I can't clear out the common libs, see @nathandunn's comment above.

kltm commented 9 years ago

Not really--setting common sets the common libs.

A couple of choices here, but the easiest would just be to have another pup_test, just more bare bones (with the common settings in a commonly used variables, like paths, etc.).

kshefchek commented 9 years ago

works for me

nathandunn commented 9 years ago

http://geoffrey.crbs.ucsd.edu:8080/solr/feature-location/select/?q=*%3A*&wt=json

nathandunn commented 9 years ago

More resources:

GOLR (SOLR) manual: https://github.com/berkeleybop/bbop-js/wiki

kshefchek commented 9 years ago

Golr Manager docs: https://kltm.github.io/bbop-js/docs/files/golr/manager-js.html golr response docs: https://kltm.github.io/bbop-js/docs/files/golr/response-js.html example client side golr manager/response: https://github.com/monarch-initiative/monarch-app/blob/master/js/golr-table.js#L13

nathandunn commented 9 years ago

Thanks kent!

nlwashington commented 9 years ago

Some minor bugs need fixing in the table: the image below is the full screenshot. i'm using firefox. It is cutoff on the bottom. it would also be nice to include:

variant id (not the golr id, but the id that comes from scigraph)
variant label
chrom
start coord
stop coord And to align the column header divider which is offset from the table contents.

jmcmurry commented 9 years ago

This ticket is a bit stale; could I ask that someone provide a summary of where we are now with jbrowse/apollo? Thanks in advance.

nathandunn commented 9 years ago

Hey Julie,

I don’t think we’ve met . . I work with the Apollo / BBOP group.

My understanding is that this is in 2 phases:

1 - there is a multi chromosome viewer built off of angularjs / d3 that a student built. It should look something like this:

http://pparsons.github.io/angular-chromosome-vis/ http://pparsons.github.io/angular-chromosome-vis/

He had it working both vertically and horizontally and integrating with fake data. A good starting point that could be used to deliver a good interface. I’m not sure if he was still waiting on data. We haven’t really broached Apollo integration with this, but it should not be hard. I don’t have the resources to finish this, but I think that finishing integration would take a couple of weeks (but be well worth it). It was mostly implemented in the lab pages.

The most relevant code is here: https://github.com/monarch-initiative/monarch-app/blob/master/templates/labs/chromosome-vis-demo.mustache https://github.com/monarch-initiative/monarch-app/blob/master/templates/labs/chromosome-vis-demo.mustache https://github.com/monarch-initiative/monarch-app/blob/master/js/angular-chromosome-vis.js https://github.com/monarch-initiative/monarch-app/blob/master/js/angular-chromosome-vis.js

2 - WRT to Apollo, I am waiting on Monarch to get their own servers and I will move what I have there (several species) and the Monarch time can continue to refine these. Whatever page this is included on needs to have an iFrame to include Apollo (sadly) due to JBrowse. The JBrowse team is working on this.

Nathan

On Oct 8, 2015, at 10:27 AM, Julie McMurry notifications@github.com wrote:

This ticket is a bit stale; could I ask that someone provide a summary of where we are now with jbrowse/apollo? Thanks in advance.

— Reply to this email directly or view it on GitHub https://github.com/monarch-initiative/monarch-app/issues/653#issuecomment-146630915.

nathandunn commented 9 years ago

Working example: http://monarchinitiative.org/labs/chromosome-vis-demo

monarch-initiative / monarch-legacy

Add multi-chromosome viewer to the phenotype labs page #653