veg / alignment.js Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 7.0 14.44 MB

Javascript alignment viewer

License: MIT License

JavaScript 98.05% CSS 0.10% Python 1.42% SCSS 0.43%

alignment.js's People

Contributors

Stargazers

Watchers

Forkers

stevenweaver stephenshank sdwfrost g12342jn russelllab lgtm-migrator clientsidedebloating

alignment.js's Issues

Fasta Viewer Imported Into React App Issue

Hello,

I am currently testing the use of MSA Viewers for the use in a react application.
After importing alignment.js to throw away project for testing, the view appears like this:

If I import the sample CD2.fasta data that is included in this repo, I then see this:

Could this be some css/stylization issue after importing?

I am also looking for some functionality where I can pass in a FASTA file as a prop to this component instead of allowing a user to do this via the import button. Is this possible?

Thanks,
Greg

Integrate phylotree.js and alignment.js

Hello,
This library is really cool and thanks for creating this.

I have created a tree using phylotree.js and got it working to cater to different functionality. I now want to integrate the alignment information besides the nodes that are not collapsed. I tried doing this using a colored rectangles and some text but it does not work too well. My attempt is in the picture below.

Using alignment.js would be much more efficient and work much better. Is there a basic example I can refer to, to integrate phylotree.js and alignment.js together?

Thanks for your help,

Allow alignment to be used with node

15:38:44 sweaver@new-silverback gisaid-downloader master ? node translate-to-master.js /data/shares/gisaid/2020-03-29-metadata.json -o hi.json -f /data/shares/gisaid/2020-03-29.fasta 
/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1
module.exports=function(t){var n={};function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(r,i,function(n){return t[n]}.bind(null,i));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=38)

ReferenceError: window is not defined
    at r (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:182532)
    at u (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:182620)
    at t.exports (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:186192)
    at Object.<anonymous> (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:22:77756)
    at e (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:124)
    at Module.<anonymous> (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:22:234172)
    at e (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:124)
    at /data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:923
    at Object.<anonymous> (/data/shares/veg/SARS-CoV-2/gisaid-downloader/node_modules/react-phylotree/lib/bundle.js:1:933)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)

Automatically detect amino acid alignments

While there is a color scheme for amino acid alignments, the Alignment component does not automatically detect them. This can cause issues; for example, here is what happens when amino acid data is uploaded to the main application's nucleotide alignment viewer:

A similar issue occurs in HyPhy-Vision. It would be nice to have the Alignment component attempt to detect the kind of data that is being supplied, as opposed to requiring an explicit declaration with a prop.

Line plots

Add a line plot component, with support for multiple lines. Similar to BUSTED:

Command line tool for prototyping alignment.js widgets

Similar to create-react-app.

Highlight FASTA parser in documentation

Can be used without callback, which is desirable in some cases.

Fix webpack

There is an issue with the webpack build. The dev build is (of course) large, while the prod build is not including CSS.

[Safari] Scrolling fails

Dear @stephenshank,

Horizontal scrolling functionality seems to be broken in Safari.

Best,
Sergei

Large tree and guide tree components with React phylotree

Essentially reproducing what is here:
http://phylotree.hyphy.org/examples/large-tree/

Tree And MSA Not Aligning As Expected

Hello,

It looks like the tree tips and sequences are not aligning as expected:

Here is the file contents:

>art
artartartartarta
>bart
bartbartbartbart
>cady
cadycadycadycady
>daak
daakdaakdaakdaak
>gary
garygarygarygary
>ham
hamhamhamhamhamh
>kart
kartkartkartkart
>mary
marymarymarymary
>naat
naatnaatnaatnaat
>rant
rantrantrantrant
(art,((((gary,daak),(cady,bart)),(ham,((kart,(mary,(rant,naat))))))));

Thanks,
Greg

standalone javascript library

Hello!

I'm building a software called OpenGenomeBrowser, which has a MSA feature (example). Currently, I use MSAViewer, but I'm thinking about replacing it with something better that can also display phylogenetic trees.

Your tools (/fna-viewer) seems to be what I'm looking for. Can your library be used as standalone library or does it only work with node/yarn?

Best, MrTomRod