vixis / angularplasmid Goto Github PK
View Code? Open in Web Editor NEWDNA Plasmid Visualization Component using AngularJS
Home Page: angularplasmid.vixis.com
License: MIT License
DNA Plasmid Visualization Component using AngularJS
Home Page: angularplasmid.vixis.com
License: MIT License
Excerpting from email
Just to follow this up, I have two more questions:
1. Is there a built-in method for spatially distributing markerlabels so they do not overlap?
2. With regard to displaying a plasmid map upon selecting a plasmid from a list in browser, do you know if there is a preferred method in Angular for inserting the AngularPlasmid HTML template into a specific DOM element?
Thanks again!
Kevin
On Wed, Apr 15, 2015 at 11:37 PM, Kevin LeShane <[email protected]> wrote:
Test screenshot.
Inline image 1
On Wed, Apr 15, 2015 at 11:36 PM, Kevin LeShane <[email protected]> wrote:
Thanks for getting back to me so quickly!
I'll keep an eye out for more examples and new additions, sounds great. The API doc has also been a big source of help while learning the tool.
To clarify what I'm asking, I attached a screenshot of a plasmid I'm using for testing below. What I'd like to be able to do is click and drag "handles", like the trackmarkers flanking the yellow highlighted region in the image, and use them to expand and contract the highlighted region dynamically. Maybe the library already supports this and I just don't know yet. But I thought I'd check with you on it.
Thanks again,
Kevin
On Fri, Apr 10, 2015 at 3:19 PM, Rehan Chawdry <[email protected]> wrote:
Thanks for the comments! I'm looking at adding a couple more examples/documentation to demonstrate how to work with interactivity with the library. You're right that Angular provides the ability to do this. There may be some changes to the library to help with this as well.
I do plan on continuing enhancement/fixes to the tool, in fact, there are a couple of pending additions that I'm testing right now that allows someone to declare templates that can be inherited by trackmarkers, etc.
Just from a clarification standpoint, something that you might be interested in would be to have the trackmarker perhaps respond to mousemove/over events and change the position/size of a trackmarker on a given track (i.e. drag and drop moving of one/both ends of a trackmarker)?
Thanks.
Sincerely,
Rehan Chawdry
Founder
Vixis, LLC
614-522-9273
[email protected]
On Fri, Apr 10, 2015 at 1:49 PM, Kevin LeShane <[email protected]> wrote:
Hi Rehan,
Excellent work with the AngularPlasmid library. Really clean and super useful.
I know this is still a fairly young project but I'm already wondering how to build on top of it.
I like the dynamic control you demonstrate on the home page but I'm having a difficult time incorporating interactivity. In particular I would i like to start with the ability to use a trackmarker as a handle to dynamically change the highlighted region (the Sequencing Region).
I'm still new to Angular, so perhaps that's where I need to begin. But I was wondering if you plan to continue production/maintenance of this tool?
Thanks,
Kevin
When we add text sequence on plasmid , so after certain zoom the text is not aligned with interval , as well as there is gap between end seq text and start seq text.
Hey,
I want to learn the advanced part of the AngularPlasmid tool, but I found that the Usage Advanced page of the AngularPlasmid website only displays "Common Soon..." after opening, what should I do?
Thanks in advance,
Jiawei Wu
Hi, I have problem displaying a trackmarker with 0 as starting position. Works if I change start to 1 or 0.1.
Hi,
I put a div in my page and I want to dynamicly create this plasmid part, based on the value input on the page, I want to rebuild the div content and refresh. But when I replace the content, it doesn't work. Do I need to use some method to recompile it?
I tried copy the rebuilt content directly and paste it in the page and after refresh the page, I actually see the picture.
Can you help me with that?
Many thanks
Shirley
Hey,
Great job!
I was wondering if it's possible to display the labels radially? It would help me a lot with thin regions and may help with overlapping issues.
Thanks in advance,
Thibault
AngularPlasmid should be able to import GenBank annotations. Excerpting the following email:
Hi,
The genbank file below should be properly formatted (it was generated) with Biopython.
The ApEinfo feature qualifiers were added by the ApE plasmid editor and are not part of the standard genbank def.
thanks for your interest,
/Bjorn
LOCUS pYPKpw 5603 bp ds-DNA circular 11-MAY-2015
DEFINITION Product_866_pYPKpwF (39-mer)_865_pYPKpwR (39-mer)
cSEGUID_WeyovdMmqwA4bc9EqEwUDmbo3Lg_2015-05-09T10:30:58.803112
ACCESSION 5603bp JO7UX-i90Ro9Utv-iuquXF-NL60
VERSION 5603bp JO7UX-i90Ro9Utv-iuquXF-NL60
KEYWORDS .
SOURCE .
ORGANISM . .
COMMENT
COMMENT ApEinfo:methylated:1
FEATURES Location/Qualifiers
primer_bind complement(458..486)
/note="865_pYPKpwR"
/label=865_pYPKpwR
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
misc complement(458..496)
/label=865_pYPKpwR(1)
/ApEinfo_label=865_pYPKpwR
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
misc 497..535
/label=866_pYPKpwF
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
primer_bind 506..535
/note="866_pYPKpwF"
/label=866_pYPKpwF(1)
/ApEinfo_label=866_pYPKpwF
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
overlap 1120..1819
/note="olp_lQPmXhrpcJP0VhkB1gXCrZVyjqA"
/chksum="lQPmXhrpcJP0VhkB1gXCrZVyjqA"
/label=olp_lQPmXhrpcJP0VhkB1gXCrZVyjqA
/ApEinfo_fwdcolor=#C1F3B1
/ApEinfo_revcolor=#C1F3B1
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
rep_origin 1154..1154
/direction=BOTH
/label=feat1
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
misc complement(1898..2701)
/label=URA3
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
CDS complement(4550..5208)
/label=AmpR
/ApEinfo_fwdcolor=pink
/ApEinfo_revcolor=pink
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
overlap 4651..4854
/note="olp_KFRCKsb-YIAV0bzDHHxIssmW6qY"
/chksum="KFRCKsb-YIAV0bzDHHxIssmW6qY"
/label=olp_KFRCKsb-YIAV0bzDHHxIssmW6qY
/ApEinfo_fwdcolor=#E0E3B5
/ApEinfo_revcolor=#E0E3B5
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
overlap 5182..5426
/note="olp_PrH6fFQ_Xlj09X_ymVtJGXI9hx0"
/chksum="PrH6fFQ_Xlj09X_ymVtJGXI9hx0"
/label=olp_PrH6fFQ_Xlj09X_ymVtJGXI9hx0
/ApEinfo_fwdcolor=#D3D0D8
/ApEinfo_revcolor=#D3D0D8
/ApEinfo_graphicformat=arrow_data {{0 1 2 0 0 -1} {} 0}
width 5 offset 0
ORIGIN
1 tcgcgcgttt cggtgatgac ggtgaaaacc tctgacacat gcagctcccg gagacggtca
61 cagcttgtct gtaagcggat gccgggagca gacaagcccg tcagggcgcg tcagcgggtg
121 ttggcgggtg tcggggctgg cttaactatg cggcatcaga gcagattgta ctgagagtgc
181 accatagatc ctgaggatcg gggtgataaa tcagtctgcg ccacatcggg ggaaacaaaa
241 tggcgcgaga tctaaaaaaa aaggctccaa aaggagcctt tcgcgctacc aggtaacgcg
301 ccactccgac gggattaacg agtgccgtaa acgacgatgg ttttaccgtg tgcggagatc
361 aggttctgat cctcgagcat cttaagaatt cgtcccacgg tttgtctaga gcagccgaca
421 atctggccaa tttcctgacg ggtaattttg atttgcatgc cgtccgggtg agtcatagcg
481 tctggtgacg tcatgcgcat gatatcttca caggcggttt tcgcacgtac ccatgcgcta
541 cgttcctggc cctcttcaaa caggcccagt tcgccaataa aatcaccctg attcagatag
601 gagaggatca tttctttacc ctcttcgtct ttgatcagca ctgccacaga gcctttaacg
661 atgtagtaca gcgtttccgc tttttcaccc tggtgaataa gcgtgctctt ggatgggtac
721 ttatgaatgt ggcaatgaga caagaaccat tcgagagtag gatccgtttg aggtttacca
781 agtaccataa gatccttaaa tttttattat ctagctagat gataatatta tatcaagaat
841 tgtacctgaa agcaaataaa ttttttatct ggcttaacta tgcggcatca gagcagattg
901 tactgagagt gcaccatatg cggtgtgaaa taccgcacag atgcgtaagg agaaaatacc
961 gcatcaggcg ctcttccgct tcctcgctca ctgactcgct gcgctcggtc gttcggctgc
1021 ggcgagcggt atcagctcac tcaaaggcgg taatacggtt atccacagaa tcaggggata
1081 acgcaggaaa gaacatgtga gcaaaaggcc agcaaaaggc caggaaccgt aaaaaggccg
1141 cgttgctggc gtttttccat aggctccgcc cccctgacga gcatcacaaa aatcgacgct
1201 caagtcagag gtggcgaaac ccgacaggac tataaagata ccaggcgttt ccccctggaa
1261 gctccctcgt gcgctctcct gttccgaccc tgccgcttac cggatacctg tccgcctttc
1321 tcccttcggg aagcgtggcg ctttctcata gctcacgctg taggtatctc agttcggtgt
1381 aggtcgttcg ctccaagctg ggctgtgtgc acgaaccccc cgttcagccc gaccgctgcg
1441 ccttatccgg taactatcgt cttgagtcca acccggtaag acacgactta tcgccactgg
1501 cagcagccac tggtaacagg attagcagag cgaggtatgt aggcggtgct acagagttct
1561 tgaagtggtg gcctaactac ggctacacta gaaggacagt atttggtatc tgcgctctgc
1621 tgaagccagt taccttcgga aaaagagttg gtagctcttg atccggcaaa caaaccaccg
1681 ctggtagcgg tggttttttt gtttgcaagc agcagattac gcgcagaaaa aaaggatctc
1741 aagaagatcc tttgatcttt tctacggggt ctgacgctca gtggaacgaa aactcacgtt
1801 aagggatttt ggtcatgagg ggtaataact gatataatta aattgaagct ctaatttgtg
1861 agtttagtat acatgcattt acttataata cagtttttta gttttgctgg ccgcatcttc
1921 tcaaatatgc ttcccagcct gcttttctgt aacgttcacc ctctacctta gcatcccttc
1981 cctttgcaaa tagtcctctt ccaacaataa taatgtcaga tcctgtagag accacatcat
2041 ccacggttct atactgttga cccaatgcgt ctcccttgtc atctaaaccc acaccgggtg
2101 tcataatcaa ccaatcgtaa ccttcatctc ttccacccat gtctctttga gcaataaagc
2161 cgataacaaa atctttgtcg ctcttcgcaa tgtcaacagt acccttagta tattctccag
2221 tagataggga gcccttgcat gacaattctg ctaacatcaa aaggcctcta ggttcctttg
2281 ttacttcttc tgccgcctgc ttcaaaccgc taacaatacc tgggcccacc acaccgtgtg
2341 cattcgtaat gtctgcccat tctgctattc tgtatacacc cgcagagtac tgcaatttga
2401 ctgtattacc aatgtcagca aattttctgt cttcgaagag taaaaaattg tacttggcgg
2461 ataatgcctt tagcggctta actgtgccct ccatggaaaa atcagtcaaa atatccacat
2521 gtgtttttag taaacaaatt ttgggaccta atgcttcaac taactccagt aattccttgg
2581 tggtacgaac atccaatgaa gcacacaagt ttgtttgctt ttcgtgcatg atattaaata
2641 gcttggcagc aacaggacta ggatgagtag cagcacgttc cttatatgta gctttcgaca
2701 tgatttatct tcgtttcctg caggtttttg ttctgtgcag ttgggttaag aatactgggc
2761 aatttcatgt ttcttcaaca ctacatatgc gtatatatac caatctaagt ctgtgctcct
2821 tccttcgttc ttccttctgt tcggagatta ccgaatcaaa aaaatttcaa agaaaccgaa
2881 atcaaaaaaa agaataaaaa aaaaatgatg aattgaattg aaaagctagc ttatcgatga
2941 taagctgtca aagatgagaa ttaattccac ggactataga ctatactaga tactccgtct
3001 actgtacgat acacttccgc tcaggtcctt gtcctttaac gaggccttac cactcttttg
3061 ttactctatt gatccagctc agcaaaggca gtgtgatcta agattctatc ttcgcgatgt
3121 agtaaaacta gctagaccga gaaagagact agaaatgcaa aaggcacttc tacaatggct
3181 gccatcatta ttatccgatg tgacgctgca gcttctcaat gatattcgaa tacgctttga
3241 ggagatacag cctaatatcc gacaaactgt tttacagatt tacgatcgta cttgttaccc
3301 atcattgaat tttgaacatc cgaacctggg agttttccct gaaacagata gtatatttga
3361 acctgtataa taatatatag tctagcgctt tacggaagac aatgtatgta tttcggttcc
3421 tggagaaact attgcatcta ttgcataggt aatcttgcac gtcgcatccc cggttcattt
3481 tctgcgtttc catcttgcac ttcaatagca tatctttgtt aacgaagcat ctgtgcttca
3541 ttttgtagaa caaaaatgca acgcgagagc gctaattttt caaacaaaga atctgagctg
3601 catttttaca gaacagaaat gcaacgcgaa agcgctattt taccaacgaa gaatctgtgc
3661 ttcatttttg taaaacaaaa atgcaacgcg acgagagcgc taatttttca aacaaagaat
3721 ctgagctgca tttttacaga acagaaatgc aacgcgagag cgctatttta ccaacaaaga
3781 atctatactt cttttttgtt ctacaaaaat gcatcccgag agcgctattt ttctaacaaa
3841 gcatcttaga ttactttttt tctcctttgt gcgctctata atgcagtctc ttgataactt
3901 tttgcactgt aggtccgtta aggttagaag aaggctactt tggtgtctat tttctcttcc
3961 ataaaaaaag cctgactcca cttcccgcgt ttactgatta ctagcgaagc tgcgggtgca
4021 ttttttcaag ataaaggcat ccccgattat attctatacc gatgtggatt gcgcatactt
4081 tgtgaacaga aagtgatagc gttgatgatt cttcattggt cagaaaatta tgaacggttt
4141 cttctatttt gtctctatat actacgtata ggaaatgttt acattttcgt attgttttcg
4201 attcactcta tgaatagttc ttactacaat ttttttgtct aaagagtaat actagagata
4261 aacataaaaa atgtagaggt cgagtttaga tgcaagttca aggagcgaaa ggtggatggg
4321 taggttatat agggatatag cacagagata tatagcaaag agatactttt gagcaatgtt
4381 tgtggaagcg gtattcgcaa tgggaagctc caccccggtt gataatcaga aaagccccaa
4441 aaacaggaag attattatca aaaaggatct tcacctagat ccttttaaat taaaaatgaa
4501 gttttaaatc aatctaaagt atatatgagt aaacttggtc tgacagttac caatgcttaa
4561 tcagtgaggc acctatctca gcgatctgtc tatttcgttc atccatagtt gcctgactcc
4621 ccgtcgtgta gataactacg atacgggagc gcttaccatc tggccccagt gctgcaatga
4681 taccgcgaga cccacgctca ccggctccag atttatcagc aataaaccag ccagccggaa
4741 gggccgagcg cagaagtggt cctgcaactt tatccgcctc catccagtct attaattgtt
4801 gccgggaagc tagagtaagt agttcgccag ttaatagttt gcgcaacgtt gttggcattg
4861 ctacaggcat cgtggtgtca ctctcgtcgt ttggtatggc ttcattcagc tccggttccc
4921 aacgatcaag gcgagttaca tgatccccca tgttgtgcaa aaaagcggtt agctccttcg
4981 gtcctccgat cgttgtcaga agtaagttgg ccgcagtgtt atcactcatg gttatggcag
5041 cactgcataa ttctcttact gtcatgccat ccgtaagatg cttttctgtg actggtgagt
5101 actcaaccaa gtcattctga gaatagtgta tgcggcgacc gagttgctct tgcccggcgt
5161 caatacggga taatagtgta tcacatagca gaactttaaa agtgctcatc attggaaaac
5221 gttcttcggg gcgaaaactc tcaaggatct taccgctgtt gagatccagt tcgatgtaac
5281 ccactcgtgc acccaactga tcttcagcat cttttacttt caccagcgtt tctgggtgag
5341 caaaaacagg aaggcaaaat gccgcaaaaa agggaataag ggcgacacgg aaatgttgaa
5401 tactcatact cttccttttt caatattatt gaagcattta tcagggttat tgtctcatga
5461 gcggatacat atttgaatgt atttagaaaa ataaacaaat aggggttccg cgcacatttc
5521 cccgaaaagt gccacctgct aagaaaccat tattatcatg acattaacct ataaaaatag
5581 gcgtatcacg aggccctttc gtc
//
Dear vixis,
First to say this is a piece of nice work, making drawing plasmid an easy task. However, when I try to add many marklabels for restriction sites, they will overlap with each other. This is no problem if I manually draw the maps. But when I try to leave the job to a script that will probably draw many hundreds of plasmids, I can't figure out what is the best way to propagate the marklabels. Can you please shed some light on this issue?
Many thanks,
logust
While the ng-mouse events from AngularJS are supported, the mouse events don't provide a reference to the specific plasmid element that was acted upon. This would probably be nice so that when people hover over a marker, you can use the API to get information about a marker (i.e. begin/end) as well call functions on the exposed APIs.
When arrowendlength or arrowstartlength is there with annotation length less then 20 ... then the arrow got distrected.
As a designer, I'd love a way to add a hyperlink to an element, so I can attach a bootstrap popover, or send someone to another page with more info.
I naively tried to add an tag around the element that I want. While the element appeared to still be in the DOM, it disappeared from the page.
<plasmid id="p1" sequencelength='1000'>
<plasmidtrack radius='75' style='fill:#f0f0f0;stroke:#ccc'>
<a href="http://www.example.com" target="_top">
<tracklabel text='pUIC' style='font-size:25px;font-weight:bold'></tracklabel>
</a>
<trackmarker id='sec' start="40" end="85" style="fill:#fc0" data-content="Awesome content">
<markerlabel text="MCS" vadjust="-40"/>
</trackmarker>
</plasmidtrack>
Is it something in Angular that doesn't know what to do if we put an element in the middle of what it generates?
Can you make linear plasmid map with this program. I would like to show primers on the DNA sequence and I can't do that with a circular map due to the sizes of the primers
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.