jameshadfield / phandango Goto Github PK

http://sanger-pathogens.github.io/Roary/

inputs: csv file, tree (eventually optional)

• annotation parsing is from the csv file as well as the block parsing
• output is similar to https://github.com/sanger-pathogens/Roary/blob/master/contrib/roary_plots/roary_plots.py
• gene reordering [not yet]
• plot is the same as gubbins

The drag on the overview canvas in the top left should be switched so you drag the gray box rather than pulling the genome. It would also be nice to improve the look of that canvas too, as it looks a bit dull.

create overlay graph for the subset of tree currently selected on the fly

Like this: http://locuszoom.sph.umich.edu/locuszoom/
http://i1.rgstatic.net/figure/250924167_fig3_GWAS-of-plasma-CFH-and-CFHR1-concentrations-in-the-Croatian-cohort-(n--1004)-including/ddt33603

Input would be rows of variants, with columns with position on genome, p-val (or could be -log_10 p-val, which is what should be plotted) and optionally r^2 value which points are coloured by. If easy, point size could be proportional to effect size

Can you please check the set_y_values() function inside the Taxa_Locations store.

For given taxa (names) I'm trying to get two y-values from phylocanvas which will define the gubbins block boundaries. These Y values should be in pixels relative to the canvas.

The pixel ratio is not currently implemented which causes it to break on non-retina screens, but there are probably more things that i'm overlooking...

@jyothishnt @richardgoater

Should be http://jameshadfield.github.io/JScandy/intro.html

Text looks blurry on screen for gubbins and annotation blocks. Is this to do with css?

If you open the Gubbins example, then return to the landing page with l and try to open the Roary example it doesn't open properly. The same is true the other way around.

If you click on one node in the tree the region is highlighted on the gubbins canvas. If you then click directly on another node without clicking off, the highlighting on the gubbins canvas fails to change.

Find a good place to place settings menu on the page

Dragging a new tree onto the browser doesn't replace the current one

Add in a new div to display metadata dropped on in CSV format

• Items need to be checked against tree taxa and gubbins taxa
• Where does the key go?
• hovering over a block / column will give some info on it
• clicking / right-clicking a column can colour the tree accordingly (Jyo has this code)
• columns can be removed, and somehow added back in

I'm pretty sure the blocks are not being displayed correctly, and it changes while interacting with the canvases.

What's the best way to identify the problem? Design a custom set of blocks and check them visually?

• When the metacanvas is turned off then on it doesn't come back despite the canvas being re-created and the constituent component staying alive (i.e. ctx is maintained) and the render command being run... it's probably something to do with the (old) component not being linked to the new canvas. Maybe we should destroy everything then start a new instance?
• Upon loading with no metadata the canvas is rendered (i.e. takes up space) and the settings panel is locked to the "on" position

Displays information similar to when clicking on an annotation feature.

Should also update RegionSelectedStore, gubbins will pick up this change and highlight the background accordingly.

• Resize divs/canvas elements by dragging at the edges
• Dynamic resizing of elements when the screen size changes
• Vertical resizing so that we fill 100% of available screen space (this is done for widths currently, but heights are hardcoded in pixels in the css)
• Close a div/canvas by clicking an x at the top right (and they will come back by dropping an appropriate file back onto the screen?) (LOWEST PRIORITY)

List of known things that are able to be sped up

• Gubbins blocks -> line graph calculations can be put on the Event Loop
• Finding max / min -> code can either be shifted into the calculation (gubbins.parser) or this block of code -> event loop

simon's example is clearly wrong

Zooming closer than 1000bp should be allowed and the annotation track should show bases (potentially amino acids in CDS).

Related to #24 as SNPs can then be seen in context

• margins (padding?) on main page
• setting panel margins have disapeared

The three files (genome annotation gff, gubbins gff, tree) are currently hardcoded.

Assign a listener to the entire document, pick up dropped files and parse accordingly (e.g. how genome2.html and presumably http://www.microreact.org/ do it).

Somehow maintain a hardcoded copy (in a dedicated store?) for testing purposes -- maybe it can be loaded on a button press / loaded by default while testing.

Any better ideas?

@simonrharris

At the moment there's a (very slow and incorrect) method by which blocks are drawn if a tree is not present. www.github.com/jameshadfield/JScandy/js/canvas/gubbins/trim_blocks.gubbins.js

This should be made much faster by either moving it to www.github.com/jameshadfield/JScandy/js/stores/Taxa_Locations.js (where y values are queried from anyway), or by having a precomputed function in the gubbins code. This will have to fall back to our old way of calculating a block for every leaf as the concept of blocks at nodes doesn't make sense without a tree.

For labelling purposes we could create a flat tree from the taxa in the block file? Thoughts @richardgoater @jyothishnt

Add a tooltip for metadata mouseover

Create a generalised method to display error / helper messages onto the screen.

Something like http://materializecss.com/modals.html or http://materializecss.com/dialogs.html

(I prefer modals as error messages should require user interaction, where as helpers are better suited to dialogs, imo)

Examples:

• File was dropped on but was not parsed by anything -- tell the user this!
• Isolates in ROARY/gubbins/VCF don't match the tree
• Genome lengths don't agree

Code already written in genome2.html

Allows people to be able to click on those blocks on each branch. I would also set alpha to 1 for those blocks and change their colour/change colour of other blocks.

Move default data to AJAX queries of files (i.e. requiring a server to run!)

Have a settings panel to show this

N.B. default data in the bundle is broken as of commit bf3b0a1

• Bar charts
• multiple plots w. toggles in settings
• Turn GWAS parser to generic .plot parser
• Parse TRADIS files -> 2 bar charts
• Methylation data

It would be great to be able to e.g. right click and ask phylocanvas to zoom both horizontally and vertically to best fit the canvas space.

Tree coloring based on metadata either by clicking the metadata header or from settings panel

• default data links
• key codes to use
• link to gh-pages

When you drag along the genome with a block or gene selected they fail to drag off the screen and instead remain selected wrongly at the edge of the canvas.

I would find it really handy if we could load vcfs into this viewer. I think a modified version of the code to show manhattan plots might do the trick.
Multiple samples (columns after the first 9) should display on different rows. Could just hack the y-coordinate of the plot to do this

Optionally: have the same SNP colours as artemis

Canvas creation is currently a mess.

Canvases are currently given a height (in pixels) and a width (in %) via css. The canvas element is then assigned this value in the React componentDidMount block. If these values change (e.g. resize causes css % to change) react does not currently update the canvas element so the css scales it and it doesn't look good.

A better system for initiating canvases (via react), and ensuring they line up, is needed. In the future users should be able to drag the border of an element to resize it, but this is a low priority.

@jyothishnt

help wanted for the best ways to interact with these features

• search for gene name (similar to artemis??)
• subset tree on metadata trait(s) (but keep the non-matching isolates for context?)
• subset tree from node ID

currently we are importing the entire materialize CSS library

perhaps we should be using http://www.getmdl.io/started/index.html instead

anyhow we should trim to only the rules we actually use!

Allow saving output to pdf. Possibly via jsPDF?