vixis/angularplasmid

DNA Plasmid Visualization Component using AngularJS

angularplasmid's Issues

Add more specific mouse events that return references to plasmid elements

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.

? Radial Label markers ?

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

Need a way to add hyperlinks to a <tracklabel> <trackmarker> or <markerlabel>

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?

Trackmarker starting at zero

Hi, I have problem displaying a trackmarker with 0 as starting position. Works if I change start to 1 or 0.1.

overlapping marklabels

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

Add support for GenBank import

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   
//

Usage - Advanced page does not respond

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

Annotation direction short length

When arrowendlength or arrowstartlength is there with annotation length less then 20 ... then the arrow got distrected.

How to pass value to <plasmid> and refresh the div

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

Plasmid text not align with interval when zoom

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.

Linear plasmid map

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

Add more examples to the documentation that show how to interact with the plasmid.

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