Team:Dundee/dnaApp.js

From 2011.igem.org

(Difference between revisions)
 
(25 intermediate revisions not shown)
Line 1: Line 1:
-
var sequenceFrame=1;window.onload=function(){hideTabs();document.getElementById("dnaFunctions").style.display="block";initCanvas();document.getElementById("firstFrameCheck").checked="true";document.getElementById("secondFrameCheck").checked=false;document.getElementById("thirdFrameCheck").checked=false;sequenceFrame=1;};function setFrame(num){sequenceFrame=num;if(num==1){document.getElementById("secondFrameCheck").checked=false;document.getElementById("thirdFrameCheck").checked=false;}
+
/* Globals */
-
else if(num==2){document.getElementById("firstFrameCheck").checked=false;document.getElementById("thirdFrameCheck").checked=false;}
+
var sequenceFrame = 1;
-
else if(num==3){document.getElementById("firstFrameCheck").checked=false;document.getElementById("secondFrameCheck").checked=false;}}
+
 
-
function showTab(e,tabName){hideTabs();document.getElementById(tabName).style.display="block";document.getElementById("frameOptions").style.display="none";document.getElementsByClassName("currentTab")[0].className="";e.className="currentTab";if(tabName=="aminoToCodon"){document.getElementById("aminoAcidInput").focus();}
+
window.onload = function() {
-
else if(tabName=="dnaToProtein"){document.getElementById("sequence").focus();document.getElementById("frameOptions").style.display="block";}
+
hideTabs();
-
else if(tabName=="backTranslate"){document.getElementById("proteinChain").focus();}}
+
document.getElementById("dnaFunctions").style.display = "block";
-
function hideTabs(){var tabs=document.getElementsByClassName("tabDiv");for(var i=0;i<tabs.length;i++){tabs[i].style.display="none";}}
+
-
var dnaCodonTable={TTT:"(Phe/F) Phenylalinine",TTC:"(Phe/F) Phenylalinine",TTA:"(Leu/L) Leucine",TTG:"(Leu/L) Leucine",CTT:"(Leu/L) Leucine",CTC:"(Leu/L) Leucine",CTA:"(Leu/L) Leucine",CTG:"(Leu/L) Leucine",ATT:"(IIe/I) Isoleucine",ATC:"(IIe/I) Isoleucine",ATA:"(IIe/I) Isoleucine",ATG:"(Met/M) Methionine/Start",GTT:"(Val/V) Valine",GTC:"(Val/V) Valine",GTA:"(Val/V) Valine",GTG:"(Val/V) Valine",TCT:"(Ser/S) Serine",TCC:"(Ser/S) Serine",TCA:"(Ser/S) Serine",TCG:"(Ser/S) Serine",CCT:"(Pro/P) Proline",CCC:"(Pro/P) Proline",CCA:"(Pro/P) Proline",CCG:"(Pro/P) Proline",ACT:"(Thr/T) Threonine",ACC:"(Thr/T) Threonine",ACA:"(Thr/T) Threonine",ACG:"(Thr/T) Threonine",GCT:"(Ala/A) Alanine",GCC:"(Ala/A) Alanine",GCA:"(Ala/A) Alanine",GCG:"(Ala/A) Alanine",TAT:"(Thr/Y) Tyrosine",TAC:"(Thr/Y) Tyrosine",TAA:"Stop (Ochre)",TAG:"Stop (Amber)",CAT:"(His/H) Histidine",CAC:"(His/H) Histidine",CAA:"(Gln/Q) Glutamine",CAG:"(Gln/Q) Glutamine",AAT:"(Asn/N) Asparagine",AAC:"(Asn/N) Asparagine",AAA:"(Lys/K) Lysine",AAG:"(Lys/K) Lysine",GAT:"(Asp/D) Aspartic acid",GAC:"(Asp/D) Aspartic acid",GAA:"(Glu/E) Glutamic acid",GAG:"(Glu/E) Glutamic acid",TGT:"(Cys/C) Cysteine",TGC:"(Cys/C) Cysteine",TGA:"Stop (Opal)",TGG:"(Trp/W) Tryptophan",CGT:"(Arg/R) Arginine",CGC:"(Arg/R) Arginine",CGA:"(Arg/R) Arginine",CGG:"(Arg/R) Arginine",AGT:"(Ser/S) Serine",AGC:"(Ser/S) Serine",AGA:"(Arg/R) Arginine",AGG:"(Arg/R) Arginine",GGT:"(Gly/G) Glycine",GGC:"(Gly/G) Glycine",GGA:"(Gly/G) Glycine",GGG:"(Gly/G) Glycine"}
+
// Canvas
-
var inputs=[document.getElementById("firstInput"),document.getElementById("secondInput"),document.getElementById("thirdInput")];function moveInput(field,nextField){var v=field.value;if(!validateInput(v)){field.value="";return;}
+
initCanvas();
-
if(v.length>=field.maxLength){document.getElementById(nextField).focus();}}
+
-
function validateInput(i){i=i.toUpperCase();if(i!="G"&&i!="A"&&i!="T"&&i!="C"){return false;}
+
// Frame check
-
return true;}
+
document.getElementById("firstFrameCheck").checked = "true";
-
function updateInputCodons(){var v=document.getElementById("thirdInput").value.toUpperCase();if(!validateInput(v)){document.getElementById("thirdInput").value="";return;}
+
document.getElementById("secondFrameCheck").checked = false;
-
var button=document.createElement("button");button.className="codon";var codon=document.getElementById("firstInput").value+
+
document.getElementById("thirdFrameCheck").checked = false;
-
document.getElementById("secondInput").value+
+
sequenceFrame = 1;
-
document.getElementById("thirdInput").value;if(codon.length==3){button.innerHTML=codon.toUpperCase();document.getElementById("firstInput").value="";document.getElementById("secondInput").value="";document.getElementById("thirdInput").value="";document.getElementById("firstInput").focus();updateResults(codon.toUpperCase());}}
+
};
-
function updateResults(codon){if(codon.length != 3){return;}var paras=document.getElementById("functions").getElementsByTagName("p");var normal=(paras[0].innerHTML||"")+codon;var reverse=paras[1].innerHTML||"";var comp=paras[2].innerHTML||"";var reverseComp="";reverse=codon.split("").reverse().join("")+reverse;comp=normal.split("").map(complementDNA).join("");reverseComp=reverse.split("").map(complementDNA).join("");paras[0].innerHTML=normal;paras[1].innerHTML=reverse;paras[2].innerHTML=comp;paras[3].innerHTML=reverseComp;if(activeFunction=="normal"){addToTable({number:1,codon:codon.toUpperCase(),aminoAcid:dnaCodonTable[codon.toUpperCase()]});}
+
 
-
else{mapToAminoAcids("normal");}
+
/* Frame Check */
 +
function setFrame(num) {
 +
sequenceFrame = num;
 +
 +
if(num == 1) {
 +
document.getElementById("secondFrameCheck").checked = false;
 +
document.getElementById("thirdFrameCheck").checked = false;
 +
}
 +
else if(num == 2) {
 +
document.getElementById("firstFrameCheck").checked = false;
 +
document.getElementById("thirdFrameCheck").checked = false;
 +
}
 +
else if(num == 3) {
 +
document.getElementById("firstFrameCheck").checked = false;
 +
document.getElementById("secondFrameCheck").checked = false;
 +
}
 +
}
 +
 
 +
// Tabs
 +
function showTab(e, tabName) {
 +
hideTabs();
 +
document.getElementById(tabName).style.display = "block";
 +
document.getElementById("frameOptions").style.display = "none";
 +
 +
// Update current tab button
 +
document.getElementsByClassName("currentTab")[0].className = "";
 +
e.className = "currentTab";
 +
 +
if(tabName == "aminoToCodon") {
 +
document.getElementById("aminoAcidInput").focus();
 +
}
 +
else if(tabName == "dnaToProtein") {
 +
document.getElementById("sequence").focus();
 +
document.getElementById("frameOptions").style.display = "block";
 +
}
 +
else if(tabName == "backTranslate") {
 +
document.getElementById("proteinChain").focus();
 +
}
 +
}
 +
 
 +
function hideTabs() {
 +
var tabs = document.getElementsByClassName("tabDiv");
 +
for(var i = 0; i < tabs.length; i++) {
 +
tabs[i].style.display = "none";
 +
}
 +
}
 +
 
 +
/* DNA Codon table */
 +
var dnaCodonTable = {
 +
// TT
 +
TTT: "(Phe/F) Phenylalinine",
 +
TTC: "(Phe/F) Phenylalinine",
 +
TTA: "(Leu/L) Leucine",
 +
TTG: "(Leu/L) Leucine",
 +
// TC
 +
CTT: "(Leu/L) Leucine",
 +
CTC: "(Leu/L) Leucine",
 +
CTA: "(Leu/L) Leucine",
 +
CTG: "(Leu/L) Leucine",
 +
// TA
 +
ATT: "(IIe/I) Isoleucine",
 +
ATC: "(IIe/I) Isoleucine",
 +
ATA: "(IIe/I) Isoleucine",
 +
ATG: "(Met/M) Methionine/Start",
 +
// TG
 +
GTT: "(Val/V) Valine",
 +
GTC: "(Val/V) Valine",
 +
GTA: "(Val/V) Valine",
 +
GTG: "(Val/V) Valine",
 +
// CT
 +
TCT: "(Ser/S) Serine",
 +
TCC: "(Ser/S) Serine",
 +
TCA: "(Ser/S) Serine",
 +
TCG: "(Ser/S) Serine",
 +
// CC
 +
CCT: "(Pro/P) Proline",
 +
CCC: "(Pro/P) Proline",
 +
CCA: "(Pro/P) Proline",
 +
CCG: "(Pro/P) Proline",
 +
// CA
 +
ACT: "(Thr/T) Threonine",
 +
ACC: "(Thr/T) Threonine",
 +
ACA: "(Thr/T) Threonine",
 +
ACG: "(Thr/T) Threonine",
 +
// CG
 +
GCT: "(Ala/A) Alanine",
 +
GCC: "(Ala/A) Alanine",
 +
GCA: "(Ala/A) Alanine",
 +
GCG: "(Ala/A) Alanine",
 +
// AT
 +
TAT: "(Thr/Y) Tyrosine",
 +
TAC: "(Thr/Y) Tyrosine",
 +
TAA: "Stop (Ochre)",
 +
TAG: "Stop (Amber)",
 +
// AC
 +
CAT: "(His/H) Histidine",
 +
CAC: "(His/H) Histidine",
 +
CAA: "(Gln/Q) Glutamine",
 +
CAG: "(Gln/Q) Glutamine",
 +
// AA
 +
AAT: "(Asn/N) Asparagine",
 +
AAC: "(Asn/N) Asparagine",
 +
AAA: "(Lys/K) Lysine",
 +
AAG: "(Lys/K) Lysine",
 +
// AG
 +
GAT: "(Asp/D) Aspartic acid",
 +
GAC: "(Asp/D) Aspartic acid",
 +
GAA: "(Glu/E) Glutamic acid",
 +
GAG: "(Glu/E) Glutamic acid",
 +
// GT
 +
TGT: "(Cys/C) Cysteine",
 +
TGC: "(Cys/C) Cysteine",
 +
TGA: "Stop (Opal)",
 +
TGG: "(Trp/W) Tryptophan",
 +
// GC
 +
CGT: "(Arg/R) Arginine",
 +
CGC: "(Arg/R) Arginine",
 +
CGA: "(Arg/R) Arginine",
 +
CGG: "(Arg/R) Arginine",
 +
// GA
 +
AGT: "(Ser/S) Serine",
 +
AGC: "(Ser/S) Serine",
 +
AGA: "(Arg/R) Arginine",
 +
AGG: "(Arg/R) Arginine",
 +
// GG
 +
GGT: "(Gly/G) Glycine",
 +
GGC: "(Gly/G) Glycine",
 +
GGA: "(Gly/G) Glycine",
 +
GGG: "(Gly/G) Glycine"
 +
}
 +
 
 +
var inputs = [document.getElementById("firstInput"), document.getElementById("secondInput"), document.getElementById("thirdInput")];
 +
 
 +
function moveInput(field, nextField) {
 +
var v = field.value;
 +
if(!validateInput(v)) {
 +
field.value = "";
 +
return;
 +
}
 +
if(v.length >= field.maxLength) {
 +
document.getElementById(nextField).focus();
 +
}
 +
}
 +
 
 +
function validateInput(i) {
 +
i = i.toUpperCase();
 +
if(i != "G" && i != "A" && i != "T" && i != "C") {
 +
return false;
 +
}
 +
return true;
 +
}
 +
 
 +
function updateInputCodons() {
 +
var v = document.getElementById("thirdInput").value.toUpperCase();
 +
if(!validateInput(v)) {
 +
document.getElementById("thirdInput").value = "";
 +
return;
 +
}
 +
var button = document.createElement("button");
 +
button.className = "codon";
 +
var codon = document.getElementById("firstInput").value +
 +
document.getElementById("secondInput").value +
 +
document.getElementById("thirdInput").value;
 +
 +
if(codon.length == 3) {
 +
button.innerHTML = codon.toUpperCase();
 +
//document.getElementById("inputCodons").appendChild(button);
 +
document.getElementById("firstInput").value = "";
 +
document.getElementById("secondInput").value = "";
 +
document.getElementById("thirdInput").value = "";
 +
document.getElementById("firstInput").focus();
 +
updateResults(codon.toUpperCase());
 +
}
 +
}
 +
 
 +
function updateResults(codon) {
 +
var paras = document.getElementById("functions").getElementsByTagName("p");
 +
var normal = paras[0].innerHTML || "";
 +
        normal += codon;
 +
var reverse = paras[1].innerHTML || "";
 +
var comp = paras[2].innerHTML || "";
 +
var reverseComp = "";
 +
reverse = normal.split("").reverse().join("");
 +
comp = normal.split("").map(complementDNA).join("");
 +
reverseComp = comp.split("").reverse("").join("");
 +
 +
paras[0].innerHTML = normal;
 +
paras[1].innerHTML = reverse;
 +
paras[2].innerHTML = comp;
 +
paras[3].innerHTML = reverseComp;
 +
 +
// Amino Acids
 +
if(activeFunction == "normal") {
 +
addToTable({number:1, codon:codon.toUpperCase(), aminoAcid:dnaCodonTable[codon.toUpperCase()]});
 +
}
 +
else {
 +
mapToAminoAcids("normal");
 +
}
 +
 +
// Canvas
 +
//updateCanvas(codon.toUpperCase());
 +
}
 +
 
 +
function complementDNA(base) {
 +
if(base == "G") return "C";
 +
if(base == "A") return "T";
 +
if(base == "T") return "A";
 +
if(base == "C") return "G";
 +
}
 +
 
 +
var activeFunction = "normal";
 +
function mapToAminoAcids(fName) {
 +
document.getElementById(activeFunction).getElementsByTagName("h1")[0].className = "";
 +
document.getElementById(fName).getElementsByTagName("h1")[0].className = "activeFunction";
 +
activeFunction = fName;
 +
var sequence = document.getElementById(fName + "-p").innerHTML;
 +
var codons = sequence.match(/.{1,3}/g);
 +
document.getElementById("tBody").innerHTML = "";
 +
numAminos = 0;
 +
var aminos = codons.map(function(codon) {
 +
addToTable({number:1, codon:codon.toUpperCase(), aminoAcid:dnaCodonTable[codon.toUpperCase()]});
 +
});
 +
}
 +
 
 +
var numAminos = 0;
 +
function addToTable(o) {
 +
var num = ++numAminos;
 +
var codon = o.codon;
 +
var aminoAcid = o.aminoAcid;
 +
 +
// Check if current row is full
 +
var rows = document.getElementById("tBody").getElementsByTagName("tr");
 +
if(rows.length > 0) {
 +
// If not first row
 +
var currentRow = rows[rows.length - 1];
 +
var numInRow = currentRow.getElementsByTagName("td").length;
 +
if(numInRow < 9) {
 +
var numberTd = document.createElement("td");
 +
var codonTd = document.createElement("td");
 +
var aminoAcidTd = document.createElement("td");
 +
 +
// Set text
 +
numberTd.innerHTML = num;
 +
codonTd.innerHTML = codon;
 +
aminoAcidTd.innerHTML = aminoAcid;
 +
 +
// Append to current row
 +
currentRow.appendChild(numberTd);
 +
currentRow.appendChild(codonTd);
 +
currentRow.appendChild(aminoAcidTd);
 +
}
 +
else {
 +
// Add new row
 +
document.getElementById("tBody").appendChild(createNewRow());
 +
}
 +
}
 +
else {
 +
// Append row to tbody
 +
document.getElementById("tBody").appendChild(createNewRow());
 +
}
 +
 +
function createNewRow() {
 +
var newRow = document.createElement("tr");
 +
var numberTd = document.createElement("td");
 +
var codonTd = document.createElement("td");
 +
var aminoAcidTd = document.createElement("td");
 +
 +
// Set text
 +
numberTd.innerHTML = num;
 +
codonTd.innerHTML = codon;
 +
aminoAcidTd.innerHTML = aminoAcid;
 +
 +
// Append td elements to row
 +
newRow.appendChild(numberTd);
 +
newRow.appendChild(codonTd);
 +
newRow.appendChild(aminoAcidTd);
 +
return newRow;
 +
}
 +
}
 +
 
 +
function clearDNA() {
 +
//document.getElementById("inputCodons").innerHTML = "";
 +
document.getElementById("normal-p").innerHTML = "";
 +
document.getElementById("comp-p").innerHTML = "";
 +
document.getElementById("reverse-p").innerHTML = "";
 +
document.getElementById("reverseComp-p").innerHTML = "";
 +
document.getElementById("tBody").innerHTML = "";
 +
//mapToAminoAcids("normal");
 +
numAminos = 0;
 +
 +
// Canvas
 +
clearCanvas();
 +
}
 +
 
 +
function showPasteArea() {
 +
document.getElementById("pasteArea").style.display = "block";
 +
document.getElementById("pasteArea").focus();
 +
document.getElementById("pasteArea").value = "";
 +
}
 +
 
 +
function hidePasteArea() {
 +
document.getElementById("pasteArea").style.display = "none";
 +
}
 +
 
 +
var pasted = "";
 +
function pasteDNA() {
 +
var sequence = document.getElementById("pasteArea").value;
 +
        sequence = sequence.replace(/\./g, "");
 +
        sequence = sequence.replace("/\s+/g", "");
 +
        sequence = sequence.replace("/\n/g", "");
 +
        document.getElementById("pasteArea").value = sequence;
 +
        if(sequence == pasted) return;
 +
clearDNA();
 +
var dnaWorker = new Worker("dnaCodonWorker.js?action=raw&amp;ctype=text/js");
 +
dnaWorker.addEventListener("message", function(e) {
 +
updateResults(e.data);
 +
}, false);
 +
 +
dnaWorker.postMessage(sequence);
 +
        pasted = sequence;
 +
}
 +
 
 +
// DNA Codon Table
 +
function showAminoAcid(t) {
 +
// Clear currently highlighted cells
 +
var currentCells = document.getElementsByClassName("highlightedCell");
 +
var tempCells = [];
 +
for(var i = 0; i < currentCells.length; i++) {
 +
tempCells.push(currentCells[i]);
 +
}
 +
for(var i = 0; i < tempCells.length; i++) {
 +
tempCells[i].className = tempCells[i].className.replace("highlightedCell", "").replace(/\s+/g, "");
 +
}
 +
var inputText = t.toLowerCase();
 +
 +
var highlightCells = document.getElementsByClassName("ac-" + inputText.substr(0, 2));
 +
for(var i = 0; i < highlightCells.length; i++) {
 +
highlightCells[i].className += " highlightedCell";
 +
}
}
}
-
function complementDNA(base){if(base=="G")return"C";if(base=="A")return"T";if(base=="T")return"A";if(base=="C")return"G";}
 
-
var activeFunction="normal";function mapToAminoAcids(fName){document.getElementById(activeFunction).getElementsByTagName("h1")[0].className="";document.getElementById(fName).getElementsByTagName("h1")[0].className="activeFunction";activeFunction=fName;var sequence=document.getElementById(fName+"-p").innerHTML;var codons=sequence.match(/.{1,3}/g);document.getElementById("tBody").innerHTML="";numAminos=0;var aminos=codons.map(function(codon){addToTable({number:1,codon:codon.toUpperCase(),aminoAcid:dnaCodonTable[codon.toUpperCase()]});});}
 
-
var numAminos=0;function addToTable(o){var num=++numAminos;var codon=o.codon;var aminoAcid=o.aminoAcid;var rows=document.getElementById("tBody").getElementsByTagName("tr");if(rows.length>0){var currentRow=rows[rows.length-1];var numInRow=currentRow.getElementsByTagName("td").length;if(numInRow<9){var numberTd=document.createElement("td");var codonTd=document.createElement("td");var aminoAcidTd=document.createElement("td");numberTd.innerHTML=num;codonTd.innerHTML=codon;aminoAcidTd.innerHTML=aminoAcid;currentRow.appendChild(numberTd);currentRow.appendChild(codonTd);currentRow.appendChild(aminoAcidTd);}
 
-
else{document.getElementById("tBody").appendChild(createNewRow());}}
 
-
else{document.getElementById("tBody").appendChild(createNewRow());}
 
-
function createNewRow(){var newRow=document.createElement("tr");var numberTd=document.createElement("td");var codonTd=document.createElement("td");var aminoAcidTd=document.createElement("td");numberTd.innerHTML=num;codonTd.innerHTML=codon;aminoAcidTd.innerHTML=aminoAcid;newRow.appendChild(numberTd);newRow.appendChild(codonTd);newRow.appendChild(aminoAcidTd);return newRow;}}
 
-
function clearDNA(){document.getElementById("normal-p").innerHTML="";document.getElementById("comp-p").innerHTML="";document.getElementById("reverse-p").innerHTML="";document.getElementById("reverseComp-p").innerHTML="";document.getElementById("tBody").innerHTML="";numAminos=0;clearCanvas();}
 
-
function showPasteArea(){document.getElementById("pasteArea").style.display="block";document.getElementById("pasteArea").focus();document.getElementById("pasteArea").value="";}
 
-
function hidePasteArea(){document.getElementById("pasteArea").style.display="none";}
 
-
function pasteDNA(){var sequence=document.getElementById("pasteArea").value;clearDNA();var dnaWorker=new Worker("dnaCodonWorker.js?action=raw&amp;ctype=text/js");dnaWorker.addEventListener("message",function(e){updateResults(e.data);},false);dnaWorker.postMessage(sequence);}
 
-
function showAminoAcid(t){var currentCells=document.getElementsByClassName("highlightedCell");var tempCells=[];for(var i=0;i<currentCells.length;i++){tempCells.push(currentCells[i]);}
 
-
for(var i=0;i<tempCells.length;i++){tempCells[i].className=tempCells[i].className.replace("highlightedCell","").replace(/\s+/g,"");}
 
-
var inputText=t.toLowerCase();var highlightCells=document.getElementsByClassName("ac-"+inputText.substr(0,2));for(var i=0;i<highlightCells.length;i++){highlightCells[i].className+=" highlightedCell";}}
 
-
var backTranslateTable={A:"GCG",C:"UGC",D:"GAU",E:"GAA",F:"UUU",G:"GGC",H:"CAU",I:"AUU",K:"AAA",L:"CUG",M:"AUG",N:"AAC",P:"CCG",Q:"CAG",R:"CGC",S:"AGC",T:"ACC",V:"GUG",W:"UGG",Y:"UAU"};function backTranslate(chain){var aminoAcids=chain.split("");var sequence="";for(var i=0;i<aminoAcids.length;i++){sequence+=backTranslateTable[aminoAcids[i].toUpperCase()]||"(invalid)";}
 
-
document.getElementById("backTranslateResults").innerHTML=sequence;}
 
-
function initCanvas(){var canvas=document.getElementById("dnaVis");var context=canvas.getContext("2d");for(var x=15.5;x<canvas.width;x+=5){context.moveTo(x,0);context.lineTo(x,150);}
 
-
for(var y=0.5;y<150;y+=37){context.moveTo(15.5,y);context.lineTo(canvas.width,y);}
 
-
context.strokeStyle="#eee";context.stroke();context.font="12px 'Droid Sans Mono'";context.fillText("A",1,23);context.fillText("C",1,60);context.fillText("G",1,100);context.fillText("T",1,135);}
 
-
var numBases=0;function updateCanvas(codon){var canvas=document.getElementById("dnaVis");var context=canvas.getContext("2d");for(var i=0;i<codon.length;i++){var x=numBases*5+15.5;var y=0;if(codon[i]=="C")y+=37;else if(codon[i]=="G")y+=74;else if(codon[i]=="T")y+=111;if(x+5>canvas.width){canvas.width+=800;initCanvas();}
 
-
context.fillRect(x,y,5,37);numBases++;}}
 
-
function clearCanvas(){var canvas=document.getElementById("dnaVis");var context=canvas.getContext("2d");context.clearRect(0,0,canvas.width,canvas.height);var w=canvas.width;canvas.width=1;canvas.width=w;}
 
-
var dnaCodonTable2={TTT:"F",TTC:"F",TTA:"L",TTG:"L",CTT:"L",CTC:"L",CTA:"L",CTG:"L",ATT:"I",ATC:"I",ATA:"I",ATG:"M",GTT:"V",GTC:"V",GTA:"V",GTG:"V",TCT:"S",TCC:"S",TCA:"S",TCG:"S",CCT:"P",CCC:"P",CCA:"P",CCG:"P",ACT:"T",ACC:"T",ACA:"T",ACG:"T",GCT:"A",GCC:"A",GCA:"A",GCG:"A",TAT:"Y",TAC:"Y",TAA:"Stop (Ochre)",TAG:"Stop (Amber)",CAT:"H",CAC:"H",CAA:"Q",CAG:"Q",AAT:"N",AAC:"N",AAA:"K",AAG:"K",GAT:"D",GAC:"D",GAA:"E",GAG:"E",TGT:"C",TGC:"C",TGA:"Stop (Opal)",TGG:"W",CGT:"R",CGC:"R",CGA:"R",CGG:"R",AGT:"S",AGC:"S",AGA:"R",AGG:"R",GGT:"G",GGC:"G",GGA:"G",GGG:"G"};function getAminoChain(sequence){var codons=sequence.match(/.{1,3}/g);var aminoChain=codons.reduce(function(chain,codon){return chain+dnaCodonTable2[codon];},"");return aminoChain;}
 
-
function lookup(){var sequence=document.getElementById("sequence").value.toUpperCase().substr(sequenceFrame-1);var codons=sequence.match(/.{1,3}/g);var geneStarted=false;sequence=codons.reduce(function(previousValue,currentValue){if(currentValue=="ATG"&&!geneStarted){currentValue="(start)";geneStarted=true;}
 
-
else if(currentValue=="TAA"||currentValue=="TAG"||currentValue=="TGA"){currentValue="(end)";geneStarted=false;}
 
-
return previousValue+=currentValue;},"");var genes=sequence.match(/\(start\)[ACTG]+\(end\)/g);genes=genes.map(function(gene){return gene.replace(/\(start\)([GATC]+)\(end\)/,"ATG$1");});var chains=[];for(var i=0;i<genes.length;i++){chains.push(getAminoChain(genes[i]));}
 
-
document.getElementById("dnaToProteinResults").innerHTML="";for(var i=0;i<chains.length;i++){var p=document.createElement("p");p.innerHTML=i+1+": "+chains[i];document.getElementById("dnaToProteinResults").appendChild(p);}}
 

Latest revision as of 09:17, 29 July 2011

/* Globals */ var sequenceFrame = 1;

window.onload = function() { hideTabs(); document.getElementById("dnaFunctions").style.display = "block";

// Canvas initCanvas();

// Frame check document.getElementById("firstFrameCheck").checked = "true"; document.getElementById("secondFrameCheck").checked = false; document.getElementById("thirdFrameCheck").checked = false; sequenceFrame = 1; };

/* Frame Check */ function setFrame(num) { sequenceFrame = num;

if(num == 1) { document.getElementById("secondFrameCheck").checked = false; document.getElementById("thirdFrameCheck").checked = false; } else if(num == 2) { document.getElementById("firstFrameCheck").checked = false; document.getElementById("thirdFrameCheck").checked = false; } else if(num == 3) { document.getElementById("firstFrameCheck").checked = false; document.getElementById("secondFrameCheck").checked = false; } }

// Tabs function showTab(e, tabName) { hideTabs(); document.getElementById(tabName).style.display = "block"; document.getElementById("frameOptions").style.display = "none";

// Update current tab button document.getElementsByClassName("currentTab")[0].className = ""; e.className = "currentTab";

if(tabName == "aminoToCodon") { document.getElementById("aminoAcidInput").focus(); } else if(tabName == "dnaToProtein") { document.getElementById("sequence").focus(); document.getElementById("frameOptions").style.display = "block"; } else if(tabName == "backTranslate") { document.getElementById("proteinChain").focus(); } }

function hideTabs() { var tabs = document.getElementsByClassName("tabDiv"); for(var i = 0; i < tabs.length; i++) { tabs[i].style.display = "none"; } }

/* DNA Codon table */ var dnaCodonTable = { // TT TTT: "(Phe/F) Phenylalinine", TTC: "(Phe/F) Phenylalinine", TTA: "(Leu/L) Leucine", TTG: "(Leu/L) Leucine", // TC CTT: "(Leu/L) Leucine", CTC: "(Leu/L) Leucine", CTA: "(Leu/L) Leucine", CTG: "(Leu/L) Leucine", // TA ATT: "(IIe/I) Isoleucine", ATC: "(IIe/I) Isoleucine", ATA: "(IIe/I) Isoleucine", ATG: "(Met/M) Methionine/Start", // TG GTT: "(Val/V) Valine", GTC: "(Val/V) Valine", GTA: "(Val/V) Valine", GTG: "(Val/V) Valine", // CT TCT: "(Ser/S) Serine", TCC: "(Ser/S) Serine", TCA: "(Ser/S) Serine", TCG: "(Ser/S) Serine", // CC CCT: "(Pro/P) Proline", CCC: "(Pro/P) Proline", CCA: "(Pro/P) Proline", CCG: "(Pro/P) Proline", // CA ACT: "(Thr/T) Threonine", ACC: "(Thr/T) Threonine", ACA: "(Thr/T) Threonine", ACG: "(Thr/T) Threonine", // CG GCT: "(Ala/A) Alanine", GCC: "(Ala/A) Alanine", GCA: "(Ala/A) Alanine", GCG: "(Ala/A) Alanine", // AT TAT: "(Thr/Y) Tyrosine", TAC: "(Thr/Y) Tyrosine", TAA: "Stop (Ochre)", TAG: "Stop (Amber)", // AC CAT: "(His/H) Histidine", CAC: "(His/H) Histidine", CAA: "(Gln/Q) Glutamine", CAG: "(Gln/Q) Glutamine", // AA AAT: "(Asn/N) Asparagine", AAC: "(Asn/N) Asparagine", AAA: "(Lys/K) Lysine", AAG: "(Lys/K) Lysine", // AG GAT: "(Asp/D) Aspartic acid", GAC: "(Asp/D) Aspartic acid", GAA: "(Glu/E) Glutamic acid", GAG: "(Glu/E) Glutamic acid", // GT TGT: "(Cys/C) Cysteine", TGC: "(Cys/C) Cysteine", TGA: "Stop (Opal)", TGG: "(Trp/W) Tryptophan", // GC CGT: "(Arg/R) Arginine", CGC: "(Arg/R) Arginine", CGA: "(Arg/R) Arginine", CGG: "(Arg/R) Arginine", // GA AGT: "(Ser/S) Serine", AGC: "(Ser/S) Serine", AGA: "(Arg/R) Arginine", AGG: "(Arg/R) Arginine", // GG GGT: "(Gly/G) Glycine", GGC: "(Gly/G) Glycine", GGA: "(Gly/G) Glycine", GGG: "(Gly/G) Glycine" }

var inputs = [document.getElementById("firstInput"), document.getElementById("secondInput"), document.getElementById("thirdInput")];

function moveInput(field, nextField) { var v = field.value; if(!validateInput(v)) { field.value = ""; return; } if(v.length >= field.maxLength) { document.getElementById(nextField).focus(); } }

function validateInput(i) { i = i.toUpperCase(); if(i != "G" && i != "A" && i != "T" && i != "C") { return false; } return true; }

function updateInputCodons() { var v = document.getElementById("thirdInput").value.toUpperCase(); if(!validateInput(v)) { document.getElementById("thirdInput").value = ""; return; } var button = document.createElement("button"); button.className = "codon"; var codon = document.getElementById("firstInput").value + document.getElementById("secondInput").value + document.getElementById("thirdInput").value;

if(codon.length == 3) { button.innerHTML = codon.toUpperCase(); //document.getElementById("inputCodons").appendChild(button); document.getElementById("firstInput").value = ""; document.getElementById("secondInput").value = ""; document.getElementById("thirdInput").value = ""; document.getElementById("firstInput").focus(); updateResults(codon.toUpperCase()); } }

function updateResults(codon) { var paras = document.getElementById("functions").getElementsByTagName("p"); var normal = paras[0].innerHTML || ""; 

       normal += codon;

var reverse = paras[1].innerHTML || ""; var comp = paras[2].innerHTML || ""; var reverseComp = ""; reverse = normal.split("").reverse().join(""); comp = normal.split("").map(complementDNA).join(""); reverseComp = comp.split("").reverse("").join("");

paras[0].innerHTML = normal; paras[1].innerHTML = reverse; paras[2].innerHTML = comp; paras[3].innerHTML = reverseComp;

// Amino Acids if(activeFunction == "normal") { addToTable({number:1, codon:codon.toUpperCase(), aminoAcid:dnaCodonTable[codon.toUpperCase()]}); } else { mapToAminoAcids("normal"); }

// Canvas //updateCanvas(codon.toUpperCase()); }

function complementDNA(base) { if(base == "G") return "C"; if(base == "A") return "T"; if(base == "T") return "A"; if(base == "C") return "G"; }

var activeFunction = "normal"; function mapToAminoAcids(fName) { document.getElementById(activeFunction).getElementsByTagName("h1")[0].className = ""; document.getElementById(fName).getElementsByTagName("h1")[0].className = "activeFunction"; activeFunction = fName; var sequence = document.getElementById(fName + "-p").innerHTML; var codons = sequence.match(/.{1,3}/g); document.getElementById("tBody").innerHTML = ""; numAminos = 0; var aminos = codons.map(function(codon) { addToTable({number:1, codon:codon.toUpperCase(), aminoAcid:dnaCodonTable[codon.toUpperCase()]}); }); }

var numAminos = 0; function addToTable(o) { var num = ++numAminos; var codon = o.codon; var aminoAcid = o.aminoAcid;

// Check if current row is full var rows = document.getElementById("tBody").getElementsByTagName("tr"); if(rows.length > 0) { // If not first row var currentRow = rows[rows.length - 1]; var numInRow = currentRow.getElementsByTagName("td").length; if(numInRow < 9) { var numberTd = document.createElement("td"); var codonTd = document.createElement("td"); var aminoAcidTd = document.createElement("td");

// Set text numberTd.innerHTML = num; codonTd.innerHTML = codon; aminoAcidTd.innerHTML = aminoAcid;

// Append to current row currentRow.appendChild(numberTd); currentRow.appendChild(codonTd); currentRow.appendChild(aminoAcidTd); } else { // Add new row document.getElementById("tBody").appendChild(createNewRow()); } } else { // Append row to tbody document.getElementById("tBody").appendChild(createNewRow()); }

function createNewRow() { var newRow = document.createElement("tr"); var numberTd = document.createElement("td"); var codonTd = document.createElement("td"); var aminoAcidTd = document.createElement("td");

// Set text numberTd.innerHTML = num; codonTd.innerHTML = codon; aminoAcidTd.innerHTML = aminoAcid;

// Append td elements to row newRow.appendChild(numberTd); newRow.appendChild(codonTd); newRow.appendChild(aminoAcidTd); return newRow; } }

function clearDNA() { //document.getElementById("inputCodons").innerHTML = ""; document.getElementById("normal-p").innerHTML = ""; document.getElementById("comp-p").innerHTML = ""; document.getElementById("reverse-p").innerHTML = ""; document.getElementById("reverseComp-p").innerHTML = ""; document.getElementById("tBody").innerHTML = ""; //mapToAminoAcids("normal"); numAminos = 0;

// Canvas clearCanvas(); }

function showPasteArea() { document.getElementById("pasteArea").style.display = "block"; document.getElementById("pasteArea").focus(); document.getElementById("pasteArea").value = ""; }

function hidePasteArea() { document.getElementById("pasteArea").style.display = "none"; }

var pasted = ""; function pasteDNA() { var sequence = document.getElementById("pasteArea").value; 

       sequence = sequence.replace(/\./g, "");
       sequence = sequence.replace("/\s+/g", "");
       sequence = sequence.replace("/\n/g", "");
       document.getElementById("pasteArea").value = sequence;
       if(sequence == pasted) return;

clearDNA(); var dnaWorker = new Worker("dnaCodonWorker.js?action=raw&ctype=text/js"); dnaWorker.addEventListener("message", function(e) { updateResults(e.data); }, false);

dnaWorker.postMessage(sequence); 

       pasted = sequence;

}

// DNA Codon Table function showAminoAcid(t) { // Clear currently highlighted cells var currentCells = document.getElementsByClassName("highlightedCell"); var tempCells = []; for(var i = 0; i < currentCells.length; i++) { tempCells.push(currentCells[i]); } for(var i = 0; i < tempCells.length; i++) { tempCells[i].className = tempCells[i].className.replace("highlightedCell", "").replace(/\s+/g, ""); } var inputText = t.toLowerCase();

var highlightCells = document.getElementsByClassName("ac-" + inputText.substr(0, 2)); for(var i = 0; i < highlightCells.length; i++) { highlightCells[i].className += " highlightedCell"; } }

Retrieved from "http://2011.igem.org/Team:Dundee/dnaApp.js"