D3 canvas exp2

[cmdcolin]

This is an initial demo for a reimplementation using canvas, block based rendering, and a backing d3-hierarchy tree data structure

I am interested in seeing if this is a viable proof of concept, I think it offers some beneficial features

Added this to the readme but a short summary of this

Screenshots A before and after screenshot showing collapsing a subtree, which also collapses gaps

demo viewing a large 230k node covid sample tree from ucsc, no msa but just the tree

Updated live demos with unpkg

multi-stockholm demo https://s3.amazonaws.com/jbrowse.org/code/jb2/master/index.html?config=https%3A%2F%2Funpkg.com%2Fjbrowse-plugin-msaview%2Fdist%2Fconfig.json&session=share-xuuiN6cz7c&password=JToYj

200 covid genome MSA only https://s3.amazonaws.com/jbrowse.org/code/jb2/master/index.html?config=https%3A%2F%2Funpkg.com%2Fjbrowse-plugin-msaview%2Fdist%2Fconfig.json&session=share-I0uAH935oY&password=b6Jvm

17,000 protein sequence MSA+tree https://s3.amazonaws.com/jbrowse.org/code/jb2/master/index.html?config=https%3A%2F%2Funpkg.com%2Fjbrowse-plugin-msaview%2Fdist%2Fconfig.json&session=share-LfEC59wQ7U&password=p9olF

230k COVID samples tree only https://s3.amazonaws.com/jbrowse.org/code/jb2/master/index.html?config=https%3A%2F%2Funpkg.com%2Fjbrowse-plugin-msaview%2Fdist%2Fconfig.json&session=share-VHw1-r%2B159&password=ycM0k

Features of jbrowse-plugin-msaview

• The tree or the MSA panel can be loaded separately, or
• Vertical virtualized scrolling of phylogenetic tree, rendered with canvas, so it does not suffer from too many dom nodes as with svg, and it uses block based rendering similar to jbrowse 1 to not re-render on each scroll frame
• Vertical and horizontal (2D) block based virtualized scrolling of multiple sequence alignment, with similar benefit of not re-rendering on each scroll frame
• View metadata about alignment from MSA headers (e.g. stockholm)
• Collapse subtrees with click action on branches
• The collapse subtree action hides gaps that were introduced by that subtree in the rest of the alignment
• Allows "zooming out" by setting tiny rowHeight/colWidth settings
• Allows changing color schemes, with jalview, clustal, and other color schemes
• Allows toggling the branch length rendering for the phylogenetic tree
• Can share sessions with other users which will send relevant settings and links to files to automatically open your results
• The tree or the MSA panel can be loaded separately, or browsed simultaneously

File format supports

• FASTA formatted for MSA (e.g. gaps already inserted)
• Stockholm files (e.g. .stock file, with or without embedded newick tree, uses stockholm-js parser. also supports "multi-stockholm" files with multiple alignments embedded in a single file)
• Clustal files (e.g. .aln file, uses clustal-js parser)
• Newick (tree can be loaded separately as a .nh file or embedded in the stockholm file)

Some missing TODO items

• Calculate ancestral allele/seq logo
• Ruler along top to show position
• Animate collapse/expand
• Calculate tree by neighbor joining
• "View only this subtree" option
• Display annotations
• Calculate conservation wiggle track
• Optimize scalability (data structures/algorithms), the scalability is reasonable but the only optimization was basically to add block based rendering compared with abrowse, so further work on this can be done
• 3D structure viewer
• Manual annotations e.g. wiki
• Add click-and-drag and/or custom scrollbar, currently only does wheel/touchpad scrolling