Keithaiken (Talk | contribs) |
Chris.isaac (Talk | contribs) |
||
Line 7: | Line 7: | ||
<br><br> | <br><br> | ||
<img src="https://static.igem.org/mediawiki/2018/5/58/T--Lethbridge--banner_Software.png" width=100% alt="Software Banner Image"> | <img src="https://static.igem.org/mediawiki/2018/5/58/T--Lethbridge--banner_Software.png" width=100% alt="Software Banner Image"> | ||
− | <div class="content"> <!--everything added for content goes after this line--> | + | <div class="content"> <!--everything added for content goes after this line CHRISISAAC--> |
− | </div> <!--this closes off the content div--> | + | <div style="height: 25px;"></div> |
+ | <div class="container"> | ||
+ | <h3>Protein Nanocompartment Designer</h3> | ||
+ | <h5>Lethbridge iGEM 2018</h5> | ||
+ | </div> | ||
+ | |||
+ | <form> <!-- BEGIN USER INPUTS --> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm"> <!-- Target --> | ||
+ | <div class="form-group"> | ||
+ | <label for="target">Target</label> | ||
+ | <select class="form-control" id="target"> | ||
+ | <option value=1>Mammal</option> | ||
+ | <option value=2>Bacteria</option> | ||
+ | <option value=3>Plant</option> | ||
+ | </select> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm"> <!-- Size Range --> | ||
+ | <div class="form-group"> | ||
+ | <label for="cargo">Size Range</label> | ||
+ | <select class="form-control" id="size"> | ||
+ | <option value="1">15-30nm</option> | ||
+ | <option value="2">30-60nm</option> | ||
+ | <option value="3">>60nm</option> | ||
+ | </select> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm"> <!-- Cargo Sequence --> | ||
+ | <div class="form-group"> | ||
+ | <label for="sequence">Cargo Sequence</label> | ||
+ | <input type="text" class="form-control" id="sequence" placeholder="Sequence in FASTA format"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Submit button activates the JS --> | ||
+ | <button onclick="submitData()" type="button" class="btn btn-primary">Submit</button> | ||
+ | <script> | ||
+ | function submitData() { //MAIN FUNCTION CALLS ALL | ||
+ | data = getValues(); //Extract from the HTML forms | ||
+ | code = pickPNC(data.sequenceType, data.targetType, data.sizeType); //What PNC suits the user needs? | ||
+ | showhide(); | ||
+ | writeProtocols(code); | ||
+ | } | ||
+ | |||
+ | function showhide() { | ||
+ | var x = document.getElementById("recommend"); | ||
+ | if (x.style.display === "none") { | ||
+ | x.style.display = "block"; | ||
+ | } else { | ||
+ | x.style.display = "block"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function getValues() { //Extract Values from the Form | ||
+ | var target = document.getElementById('target').value; | ||
+ | var size = document.getElementById('size').value; | ||
+ | var sequence = sequenceCheck(document.getElementById('sequence').value); | ||
+ | var userInput = { | ||
+ | targetType:target, | ||
+ | sizeType:size, | ||
+ | sequenceType:sequence | ||
+ | }; | ||
+ | return userInput | ||
+ | } | ||
+ | |||
+ | function pickPNC(a, b, c) { // CargoSeq - Target - Size | ||
+ | const PNC = { | ||
+ | 1: { //Protein | ||
+ | 1: { // Mammal | ||
+ | 1: "NONE", // S 111 | ||
+ | 2: "NONE", // M 112 | ||
+ | 3: "NONE" // L 113 | ||
+ | }, | ||
+ | 2: { // Bacteria | ||
+ | 1: "MS2", // S 121 | ||
+ | 2: "NONE", // M 122 | ||
+ | 3: "P22" // L 123 | ||
+ | }, | ||
+ | 3: { // Plant | ||
+ | 1: "BMV", // S 131 | ||
+ | 2: "NONE", // M 132 | ||
+ | 3: "NONE" // L 133 | ||
+ | } | ||
+ | }, | ||
+ | |||
+ | 2: { //DNA | ||
+ | 1: { // Mammal | ||
+ | 1: "NONE", // S 211 | ||
+ | 2: "JCV", // M 212 | ||
+ | 3: "NONE" // L 213 | ||
+ | }, | ||
+ | 2: { // Bacteria | ||
+ | 1: "VP8", // S 221 | ||
+ | 2: "NONE", // M 222 | ||
+ | 3: "P22" // L 223 | ||
+ | }, | ||
+ | 3: { // Plant | ||
+ | 1: "NONE", // S 231 | ||
+ | 2: "NONE", // M 232 | ||
+ | 3: "NONE" // L 233 | ||
+ | } | ||
+ | }, | ||
+ | |||
+ | 3: { //RNA | ||
+ | 1: { // Mammal | ||
+ | 1: "NONE", // S 311 | ||
+ | 2: "ARC", // M 312 | ||
+ | 3: "NONE" // L 313 | ||
+ | }, | ||
+ | 2: { // Bacteria | ||
+ | 1: "PDE2", // S 321 | ||
+ | 2: "NONE", // M 322 | ||
+ | 3: "NONE" // L 323 | ||
+ | }, | ||
+ | 3: { // Plant | ||
+ | 1: "CCMV", // S 331 | ||
+ | 2: "NONE", // M 332 | ||
+ | 3: "NONE" // L 333 | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | return PNC[a][b][c] //Returns the PNC Code | ||
+ | } | ||
+ | |||
+ | function sequenceCheck(sequence) { //REGEX for Type | ||
+ | var PRO = /^[GALMFWKQESPVICYHRNDT]+$/gmi //Code 1 | ||
+ | var DNA = /^[ATCG]+$/gmi //Code 2 | ||
+ | var RNA = /^[AUCG]+$/gmi //Code 3 | ||
+ | //Testing | ||
+ | if (RNA.test(sequence)) { | ||
+ | result = 3; | ||
+ | } else if (DNA.test(sequence)) { | ||
+ | result = 2; | ||
+ | } else if (PRO.test(sequence)) { | ||
+ | result = 1; | ||
+ | } else { | ||
+ | result = 1; | ||
+ | } | ||
+ | //Return result | ||
+ | return result | ||
+ | } | ||
+ | |||
+ | function writeProtocols(code) { | ||
+ | const dataSheet = { | ||
+ | MS2: { | ||
+ | name: "MS2", | ||
+ | full: "Bacteriophage MS2 Capsid", | ||
+ | sequence: "MASNFTQFVLVDNGGTGDVTVAPSNFANGVAEWISSNSRSQAYKVTCSVRQSSAQNRKYTIKVEVPKVATQTVGGVELPVAAWRSYLNMELTIPIFATNSDCELIVKAMQGLLKDGNPIPSAIAANSGIY", | ||
+ | pdb: "1MSC", | ||
+ | radius: "Outer: 27nm Inner: 15nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/f/f2/T--Lethbridge--MS2_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | FF: { | ||
+ | name: "FF", | ||
+ | full: "E.coli Filementus Phage Capsid", | ||
+ | sequence: "MKKLLFAIPLVVPFYSHSAETVESCLAKPHTENSFTNVWKDDKTLDRYANYEGCLWNATGVVVCTGDETQCYGTWVPIGLAIPENEGGGSEGGGSEGGGSEGGGTKPPEYGDTPIPGYTYINPLDGTYPPGTEQNPANPNPSLEESQPLNTFMFQNNRFRNRQGALTVYTGTVTQGTDPVKTYYQYTPVSSKAMYDAYWNGKFRDCAFHSGFNEDPFVCEYQGQSSDLPQPPVNAGGGSGGGSGGGSEGGGSEGGGSEGGGSEGGGSGGGSGSGDFDYEKMANANKGAMTENADENALQSDAKGKLDSVATDYGAAIDGFIGDVSGLANGNGATGDFAGSNSQMAQVGDGDNSPLMNNFRQYLPSLPQSVECRPYVFGAGKPYEFSIDCDKINLFRGVFAFLLYVATFMYVFSTFANILRNKES", | ||
+ | pdb: "P03661", | ||
+ | radius: "So many nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/c/ce/T--Lethbridge--Ff_phage_datasheet.pdf" | ||
+ | }, | ||
+ | P22: { | ||
+ | name: "P22", | ||
+ | full: "Bacteriophage P22 Capsid", | ||
+ | sequence: "atggctttgaacgaaggtcaaattgttacactggcggtagatgaaatcatcgaaaccatctccgcaatcactccaatggcgcagaaagccaagaaatacaccccgcctgctgcttctatgcagcgctccagcaataccatctggatgcctgtagagcaagagtcacccactcaggagggctgggatttaactgataaagcgacagggttactggaacttaacgtcgcggtaaacatgggagagccggataacgacttcttccagttgcgtgctgatgacttgcgagacgaaactgcgtatcgtcgccgcatccagtctgccgctcgcaagctggcgaacaacgttgagttgaaagtcgcaaacatggccgccgagatgggttcgctggttatcacctcccctgatgccatcggcactaataccgcagacgcctggaactttgtggccgacgcagaagaaatcatgttctcccgcgaacttaacccgacatggggacatcgtacttcttcaaccctcaggactacaaaaaagcgggttacgacctgaccaagcgtgacatcttcgggcgtattcctgaagaagcataccgagatggcaccattcagcgtcaggtcgctggcttcgatgatgtcctgcgctctccgaaacttcctgtgctgaccaaatccaccgcaactggcatcactgtatccggtgcgcagtccttcaagcctgtcgcatggcaactggataacgatggcaacaaagttaacgttgataaccgttttgctaccgtcaccctgtctgcaactaccggcatgaaacgcggcgacaaaatttcgtttgctggcgttaagttccttggtcagatggctaagaacgtactggctcaggatgcgactttctccgtagtccgcgttgttgacggtactcatgttgaaatcacgccgaagccggtagcgctggatgatgtttccctgtctccggagcgcgtgcctacgccaacgttaacacctcgctggctgatgcaatggcagtgaacattctgaacgttaaagacgctcgcactaatgtgttctgggctgacgatgctattcgtatcgtgtctcagccgattccggctaaccatgaactttttgcaggtatgaaaactacctcattcagcatccctgatgttggcctgaacggtatcttcgctacgcagggtgatatttccaccctgtccggcctgtgccgtattgcgctgtggtacggcgtaaacgcgacacgaccggaggcaatcggtgttggcctgcctggtcagactgcg", | ||
+ | pdb: "", | ||
+ | radius: "60nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/b/b2/T--Lethbridge--P22_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | CCMV: { | ||
+ | name: "CCMV", | ||
+ | full: "Cowpea Chlorotic Mottle Virus Capsid", | ||
+ | sequence: "MSTVGTGKLTRAQRRAAARKNKRNTRVVQPVIVEPIASGQGKAIKAWTGYSVSKWTASCAAAEAKVTSAITISLPNELSSERNKQLKVGRVLLWLGLLPSVSGTVKSCVTETQTTAAASFQVALAVADNSKDVVAAMYPEAFKGITLEQLTADLTIYLYSSAALTEGDVIVHLEVEHVRPTFDDSFTPVY", | ||
+ | pdb: "P03601", | ||
+ | radius: "Outer: 24nm, Inner: 18nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/d/df/T--Lethbridge--CCMV_data_datasheet.pdf" | ||
+ | }, | ||
+ | BMV: { | ||
+ | name: "BMV", | ||
+ | full: "Brome Mosaic Virus Capsid", | ||
+ | sequence: "MSTSGTGKMTRAQRRAAARRNRWTARVQPVIVEPLAAGQGKAIKAIAGYSISKWEASSDAITAKATNAMSITLPHELSSEKNKELKVGRVLLWLGLLPSVAGRIKACVAEKQAQAEAAFQVALAVADSSKEVVAAMYTDAFRGATLGDLLNLQIYLYASEAVPAKAVVVHLEVEHVRPTFDDFFTPVYR", | ||
+ | pdb: "P03602", | ||
+ | radius: "30nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/5/5e/T--Lethbridge--BMV_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | VP8: { | ||
+ | name: "VP1/VP8", | ||
+ | full: "Murine Polyomarius Capsid", | ||
+ | sequence: "APKRKAGVSKCETKCTKACPRPAPVPKLLIKGGMEVLDLVTGPDSVTEIEAFLNPRMGQPPTPESLTEGGQYYGWSRGINLATSDTEDSPGNNTLPTWSMAKLQLPMLNEDLTCDTLQMWEAVSVKTEVVGSGSLLDVHGFNKPTDTVNTKGISTPVEGSQYHVFAVGGEPLDLQGLVTDARTKYKEEGVVTIKTITKKDMVNKDQVLNPISKAKLDKDGMYPVEIWHPDPAKNENTRYFGNYTGGTTTPPVLQFTNTLTTVLLDENGVGPLCKGEGLYLSCVDIMGWRVTRNYDVHHWRGLPRYFKITLRKRWVKNPYPMASLISSLFNNMLPQVQGQPMEGENTQVEEVRVYDGTEPVPGDPDMTRYVDRFGKTKTVFPGN", | ||
+ | pdb: "P11196", | ||
+ | radius: "", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/b/b6/T--Lethbridge--VP1-VP8_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | JCV: { | ||
+ | name: "JCV", | ||
+ | full: "John Cunningham Virus (Similar to SV40)", | ||
+ | sequence: "MAPTKRKGERKDPVQVPKLLIRGGVEVLEVKTGVDSITEVECFLTPEMGDPDEHLRGFSKSISISDTFESDSPNRDMLPCYSVARIPLPNLNEDLTCGNILMWEAVTLKTEVIGVTSLMNVHSNGQATHDNGAGKPVQGTSFHFFSVGGEALELQGVLFNYRTKYPDGTIFPKNATVQSQVMNTEHKAYLDKNKAYPVECWVPDPTRNENTRYFGTLTGGENVPPVLHITNTATTVLLDEFGVGPLCKGDNLYLSAVDVCGMFTNRSGSQWRGLSRYFKVQLRKRRVKNPYPISFLLTDLINRRTPRVDGQPMYGMDAQVEEVRVFEGTEELPGDPDMMRYVDKYGQLQTKML", | ||
+ | pdb: "", | ||
+ | radius: "45nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/b/b7/T--Lethbridge--JCV_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | PDE2: { | ||
+ | name: "PDE2", | ||
+ | full: "Pyruvate Dehydrogenase Complex", | ||
+ | sequence: "MAFEFKLPDIGEGIHEGEIVKWFVKPGDEVNEDDVLCEVQNDKAVVEIPSPVKGKVLEILVPEGTVATVGQTLITLDAPGYENMTFKGQEQEEAKKEEKTETVSKEEKVDAVAPNAPAAEAEAGPNRRVIAMPSVRKYAREKGVDIRLVQGTGKNGRVLKEDIDAFLAGGAKPAPAAAEEKAAPAAAKPATTEGEFPETREKMSGIRRAIAKAMVHSKHTAPHVTLMDEADVTKLVAHRKKFKAIAAEKGIKLTFLPYVVKALVSALREYPVLNTSIDDETEEIIQKHYYNIGIAADTDRGLLVPVIKHADRKPIFALAQEINELAEKARDGKLTPGEMKGASCTITNIGSAGGQWFTPVINHPEVAILGIGRIAEKPIVRDGEIVAAPMLALSLSFDHRMIDGATAQKALNHIKRLLSDPELLLMEA", | ||
+ | pdb: "P11961", | ||
+ | radius: "24nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/1/1f/T--Lethbridge--PDE2_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | ARC: { | ||
+ | name: "Arc-Gag", | ||
+ | full: "Arc-Gag", | ||
+ | sequence: "AUG", | ||
+ | pdb: "P12497", | ||
+ | radius: "30nm", | ||
+ | error: "able", | ||
+ | protocol: "https://static.igem.org/mediawiki/2018/e/e2/T--Lethbridge--Arc-Gag_VLP_datasheet.pdf" | ||
+ | }, | ||
+ | NONE: { | ||
+ | name: "None", | ||
+ | full: "a protein nanocompartment", | ||
+ | sequence: "CCTGGTGTGGATACACAGATCTTCGAGGACCCACGGGAGTTCCTGAGCCACCTGGAAGAGTACCTGCGGCAGGTGGGTGGCTCTGAAGAATATTGGCTGTCCCAGATCCAGAACCACATGAATGGGCCAGCCAAGAAGTGGTGGGAGTTCAAGCAGGGCTCGGTGAAGAACTGGGTGGAGTTCAAGAAGGAGTTTCTGCAATACAGTGAGGGTACACTCTCCCGTGAAGCCATTCAGCGGGAGCTGGAGCTGCCGCAGAAGCAGGGTGAACCACTCGACCAGTTCCTCTGGCGCAAGCGGGACCTGTACCAGACACTGTATGTGGACGCTGAGGAGGAGGAGATCATTCAGTATGTGGTGGGCACCCTGCAGCCCAAACTCAAGCGCTTTCTGCGCCACCCACTCCCCAAGACCCTGGAGCAGCTTATCCAGAGGGGTATGGAAGTGCAGGACGGCCTGGAGCAGGCAGCTGAGCCTTCTGGCACCCCACTG", | ||
+ | pdb: "", | ||
+ | radius: "", | ||
+ | error: "unable", | ||
+ | protocol: "" | ||
+ | } | ||
+ | } | ||
+ | //Change the HTML Content | ||
+ | document.getElementById('pnc_code').innerHTML = "Result: " + dataSheet[code].name; | ||
+ | document.getElementById('pnc_error').innerHTML = dataSheet[code].error; | ||
+ | document.getElementById('pnc_full').innerHTML = dataSheet[code].full; | ||
+ | document.getElementById("pnc_download").href= dataSheet[code].protocol; | ||
+ | // | ||
+ | // | ||
+ | // | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | </div> | ||
+ | </form> | ||
+ | |||
+ | <!-- Spacing for the Results --> | ||
+ | <div style="height: 25px;"></div> | ||
+ | <hr /> | ||
+ | <div style="height: 25px;"></div> | ||
+ | |||
+ | <!-- RESULTS RETURNED --> | ||
+ | <div class="container" id="recommend" style="display: none;"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm"> | ||
+ | <h2 id="pnc_code"></h2> | ||
+ | <p>Based on your input we were | ||
+ | <a id="pnc_error"></a> to recommend | ||
+ | <a id="pnc_full"></a> | ||
+ | for your application. | ||
+ | </p> | ||
+ | <p> | ||
+ | Remember, biology is a team sport. When people aren't careful with the biology they do, it can have long lasting effects on everyone else. Accordingly, you should be on your best behavior. Only use this tool for justice and just purposes. Love, Lethbridge. | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm"> | ||
+ | <a href="" download="" id="pnc_download"> | ||
+ | <button type="button" class="btn btn-primary">Download</button> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> <!--this closes off the content div CHRISISAAC--> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 23:30, 15 October 2018