BenjGonzaga (Talk | contribs) |
BenjGonzaga (Talk | contribs) |
||
| Line 9: | Line 9: | ||
<style> | <style> | ||
| − | + | #codonwrapper { | |
| − | + | font-family: 'Montserrat', sans-serif; | |
| + | font-size: 1vw; | ||
| + | background-color: #6AB4FB; | ||
| + | width: 90%; | ||
| + | margin: 0 auto; | ||
| + | padding: 10px; | ||
| + | border: 4px #fff solid; | ||
| + | border-radius: 10px; | ||
} | } | ||
| + | |||
.redText | .redText | ||
{ | { | ||
| Line 35: | Line 43: | ||
<body> | <body> | ||
<p class="PageHeading"> Software </p> | <p class="PageHeading"> Software </p> | ||
| − | + | <h1 class="mainH">Codon Harmoniser</h1> | |
| − | + | <div id="codonwrapper"> | |
| − | + | <p>Enter your gene sequence:</p> | |
| + | <textarea class=input type = "text" rows="5" cols="100" placeholder="Enter codon sequence." id = "inputsequence"></textarea><br> | ||
<br> | <br> | ||
| − | + | <p>Search source organism</p> | |
<!-- | <!-- | ||
| − | + | <select id="SrcType"> | |
| − | + | <option value = "Bacteria" >Bacteria</option> | |
| − | + | <option value = "Virus" >Virus</option> | |
| − | + | <option value = "Phage" >Phage</option> | |
| − | + | <option value = "Invertebrate" >Invertebrate</option> | |
| − | + | <option value = "Plant" >Plant</option> | |
| − | + | <option value = "Rodent" >Rodent</option> | |
| − | + | <option value = "Primate" >Primate</option> | |
| − | + | <option value = "Mammal-Other" >Mammal (Other)</option> | |
| − | + | <option value = "Vertebrate-Other" >Vertebrate (Other)</option> | |
| − | + | </select>--> | |
| − | + | <input type = "text" placeholder="Species name" id = "srcsearchstring"> | |
<input type = "button" onclick = "SearchSource();" name = "ok" value = "Search" /> | <input type = "button" onclick = "SearchSource();" name = "ok" value = "Search" /> | ||
<select id="sourceOrg" onchange="showSource(this)"> | <select id="sourceOrg" onchange="showSource(this)"> | ||
| − | + | <option value="">-- Select -- </option> | |
</select> | </select> | ||
<br> | <br> | ||
| Line 61: | Line 70: | ||
<br> | <br> | ||
<p>Search destination organism</p> | <p>Search destination organism</p> | ||
| − | + | <!-- <select id="DestType"> | |
| − | + | <option value = "Bacteria" >Bacteria</option> | |
| − | + | <option value = "Virus" >Virus</option> | |
| − | + | <option value = "Phage" >Phage</option> | |
| − | + | <option value = "Invertebrate" >Invertebrate</option> | |
| − | + | <option value = "Plant" >Plant</option> | |
| − | + | <option value = "Rodent" >Rodent</option> | |
| − | + | <option value = "Primate" >Primate</option> | |
| − | + | <option value = "Mammal-Other" >Mammal (Other)</option> | |
| − | + | <option value = "Vertebrate-Other" >Vertebrate (Other)</option> | |
| − | + | </select>--> | |
| − | + | <input type = "text" placeholder="Species name" id = "destsearchstring"> | |
<input type = "button" onclick = "SearchDest();" name = "ok" value = "Search" /> | <input type = "button" onclick = "SearchDest();" name = "ok" value = "Search" /> | ||
<select id="destOrg" onchange="showDest(this)"> | <select id="destOrg" onchange="showDest(this)"> | ||
| − | + | <option value="">-- Select -- </option> | |
</select> | </select> | ||
| Line 90: | Line 99: | ||
<table style="table-layout: fixed" id = "Output"></table> | <table style="table-layout: fixed" id = "Output"></table> | ||
<table id=codonRank></table> | <table id=codonRank></table> | ||
| + | |||
| + | </div> | ||
</body> | </body> | ||
| Line 107: | Line 118: | ||
/*const typeEnum = { | /*const typeEnum = { | ||
| − | + | bacteria : 0, | |
| − | + | virus : 1, | |
| − | + | phage : 2, | |
| − | + | invertebrate : 3, | |
| − | + | plant : 4, | |
| − | + | rodent : 5, | |
| − | + | primate : 6, | |
| − | + | mammal : 7, | |
| − | + | vertebrate : 8 | |
};*/ | };*/ | ||
//dataFiles = ["json/bacteria.txt", "json/virus.txt", "json/phage.txt", "json/invertebrate.txt", "json/plant.txt", "json/rodent.txt", "json/primate.txt", "json/mammal.txt", "json/vertebrate.txt"]; | //dataFiles = ["json/bacteria.txt", "json/virus.txt", "json/phage.txt", "json/invertebrate.txt", "json/plant.txt", "json/rodent.txt", "json/primate.txt", "json/mammal.txt", "json/vertebrate.txt"]; | ||
| Line 123: | Line 134: | ||
function SearchSource() | function SearchSource() | ||
{ | { | ||
| − | + | var xmlhttp = new XMLHttpRequest(); | |
var inputstring = document.getElementById('srcsearchstring').value; | var inputstring = document.getElementById('srcsearchstring').value; | ||
| − | + | xmlhttp.onreadystatechange = function() | |
| − | + | { | |
if (this.readyState == 1) | if (this.readyState == 1) | ||
{ | { | ||
| Line 133: | Line 144: | ||
errorMsg.innerHTML = 'Please be patient... checking database'; | errorMsg.innerHTML = 'Please be patient... checking database'; | ||
} | } | ||
| − | + | if (this.readyState == 4) | |
{ | { | ||
if (this.status == 200) | if (this.status == 200) | ||
| − | + | { | |
| − | + | sourceOrganismJSON = JSON.parse(this.responseText); | |
var resultList = searchJSONOnString(inputstring, sourceOrganismJSON, 'speciesName'); | var resultList = searchJSONOnString(inputstring, sourceOrganismJSON, 'speciesName'); | ||
errorMsg.innerHTML = ''; | errorMsg.innerHTML = ''; | ||
| Line 144: | Line 155: | ||
errorMsg.innerHTML = 'No results found. Please widen your search.' | errorMsg.innerHTML = 'No results found. Please widen your search.' | ||
} | } | ||
| − | + | var srcRes = document.getElementById('sourceOrg'); | |
srcRes.innerHTML = ''; | srcRes.innerHTML = ''; | ||
| − | + | sortedResults = []; | |
for (var i = 0; i < resultList.length; i++) | for (var i = 0; i < resultList.length; i++) | ||
{ | { | ||
| Line 159: | Line 170: | ||
} | } | ||
showSource(srcRes) | showSource(srcRes) | ||
| − | + | }} | |
| − | + | }; | |
| − | + | xmlhttp.open("GET", dataFile, true); | |
| − | + | xmlhttp.send(); | |
} | } | ||
function SearchDest() | function SearchDest() | ||
{ | { | ||
| − | + | var xmlhttp = new XMLHttpRequest(); | |
var inputstring = document.getElementById('destsearchstring').value | var inputstring = document.getElementById('destsearchstring').value | ||
var errorMsg = document.getElementById('errorMsg'); | var errorMsg = document.getElementById('errorMsg'); | ||
| − | + | xmlhttp.onreadystatechange = function() | |
| − | + | { | |
if (this.readyState == 1) | if (this.readyState == 1) | ||
{ | { | ||
| Line 178: | Line 189: | ||
errorMsg.innerHTML = 'Please be patient... checking database'; | errorMsg.innerHTML = 'Please be patient... checking database'; | ||
} | } | ||
| − | + | if (this.readyState == 4) | |
| − | + | { | |
if (this.status == 200) | if (this.status == 200) | ||
{ | { | ||
| − | + | destOrganismJSON = JSON.parse(this.responseText); | |
var resultList = searchJSONOnString(inputstring, destOrganismJSON, 'speciesName'); | var resultList = searchJSONOnString(inputstring, destOrganismJSON, 'speciesName'); | ||
errorMsg.innerHTML = ''; | errorMsg.innerHTML = ''; | ||
| Line 189: | Line 200: | ||
errorMsg.innerHTML = 'No results found. Please widen your search.' | errorMsg.innerHTML = 'No results found. Please widen your search.' | ||
} | } | ||
| − | + | var destRes = document.getElementById('destOrg'); | |
destRes.innerHTML = ''; | destRes.innerHTML = ''; | ||
sortedResults = []; | sortedResults = []; | ||
| Line 198: | Line 209: | ||
sortedResults.sort(function(a, b){ | sortedResults.sort(function(a, b){ | ||
return b.CDS - a.CDS}); | return b.CDS - a.CDS}); | ||
| − | + | for (var i = 0; i < sortedResults.length; i++) | |
| − | + | { | |
| − | + | destRes.innerHTML = destRes.innerHTML + | |
| − | + | '<option value = "' + sortedResults[i].speciesID + '">' + sortedResults[i].speciesName + ' (' + sortedResults[i].CDS + ' CDS)' + '</option>'; | |
| − | + | } | |
showDest(destRes); | showDest(destRes); | ||
| − | + | }} | |
| − | + | }; | |
| − | + | ||
| − | + | xmlhttp.open("GET", dataFile, true); | |
| − | + | xmlhttp.send(); | |
} | } | ||
| Line 226: | Line 237: | ||
function showSource(ele) | function showSource(ele) | ||
{ | { | ||
| − | + | var x = ele.value; | |
| − | + | sourceOrganismData = sourceOrganismJSON[ele.value]; | |
| − | + | var srcmsg = document.getElementById('srcmsg'); | |
| − | + | srcmsg.innerHTML = 'Source Species: <b>' + ele.options[ele.selectedIndex].text + '</b>\tCDS: <b>' + sourceOrganismData.CDS + '</b>\tCodons: ' + sourceOrganismData.nbCodons; | |
| − | + | showTable(); | |
} | } | ||
function showDest(ele) | function showDest(ele) | ||
{ | { | ||
| − | + | destOrganismData = destOrganismJSON[ele.value]; | |
| − | + | var destmsg = document.getElementById('destmsg'); | |
| − | + | destmsg.innerHTML = 'Destination Species: <b>' + ele.options[ele.selectedIndex].text + '</b>\tCDS: <b>' + destOrganismData.CDS + '</b>\tCodons: ' + destOrganismData.nbCodons; | |
| − | + | showTable(); | |
} | } | ||
function showTable() | function showTable() | ||
{ | { | ||
| − | + | var codonRank = document.getElementById('codonRank'); | |
| − | + | var tableText = '<tr><th>Amino Acid</th><th>Codon</th><th>Codon Usage: ' + sourceOrganismData.speciesName + ' (‰)</th><th>Codon Usage: ' + destOrganismData.speciesName + ' (‰)</th></tr>'; | |
| − | + | nbCodonsSrc = sourceOrganismData.nbCodons; | |
| − | + | nbCodonsDest = destOrganismData.nbCodons; | |
| − | + | for (aa in sourceOrganismData.AminoAcids) | |
| − | + | { | |
| − | + | tableText = tableText + '<tr><td>' + aa + '</td><td>'; | |
| − | + | for (cod in sourceOrganismData.AminoAcids[aa]) | |
| − | + | { | |
| − | + | tableText = tableText + cod + '<br>'; | |
| − | + | } | |
| − | + | tableText = tableText + '</td><td>' | |
| − | + | for (cod in sourceOrganismData.AminoAcids[aa]) | |
| − | + | { | |
| − | + | tableText = tableText + (1000*sourceOrganismData.AminoAcids[aa][cod]/nbCodonsSrc).toFixed(2)+ '<br>'; | |
| − | + | } | |
| − | + | tableText = tableText + '</td><td>' | |
| − | + | for (cod in destOrganismData.AminoAcids[aa]) | |
| − | + | { | |
| − | + | tableText = tableText + (1000*destOrganismData.AminoAcids[aa][cod]/nbCodonsDest).toFixed(2)+ '<br>'; | |
| − | + | } | |
| − | + | tableText = tableText + '</td></tr>' | |
| − | + | } | |
| − | + | codonRank.innerHTML = tableText; | |
} | } | ||
function ExecuteHarmonise() | function ExecuteHarmonise() | ||
{ | { | ||
| − | + | var srcRanks = {}; | |
| − | + | var dstRanks = {}; | |
amAcids = ''; | amAcids = ''; | ||
var inputsequence = document.getElementById('inputsequence').value; | var inputsequence = document.getElementById('inputsequence').value; | ||
| Line 286: | Line 297: | ||
errorMsg.innerHTML = '' | errorMsg.innerHTML = '' | ||
//var bCutoff = document.getElementById('CutoffActive').checked; | //var bCutoff = document.getElementById('CutoffActive').checked; | ||
| − | + | for (aa in sourceOrganismData.AminoAcids) | |
| − | + | { | |
| − | + | srcAmRanks = []; | |
| − | + | dstAmRanks = []; | |
| − | + | for (cod in sourceOrganismData.AminoAcids[aa]) | |
| − | + | { | |
| − | + | srcAmRanks.push([cod, 1000*sourceOrganismData.AminoAcids[aa][cod]/sourceOrganismData.nbCodons]); | |
| − | + | dstAmRanks.push([cod, 1000*destOrganismData.AminoAcids[aa][cod]/destOrganismData.nbCodons]); | |
| − | + | } | |
| − | + | srcAmRanks.sort(function(a, b){ | |
| − | + | return a[1] - b[1]}); | |
| − | + | dstAmRanks.sort(function(a, b){ | |
| − | + | return a[1] - b[1]}); | |
| − | + | srcRanks[aa] = srcAmRanks; | |
| − | + | dstRanks[aa] = dstAmRanks; | |
| − | + | } | |
| − | + | outputSequence = ''; | |
optimisedSequence = ''; | optimisedSequence = ''; | ||
freqHarmonised = ''; | freqHarmonised = ''; | ||
var cutoffValue = parseInt(document.getElementById('cutoff').value); | var cutoffValue = parseInt(document.getElementById('cutoff').value); | ||
| − | + | for (var i = 0; i < inputsequence.length; i+=3) | |
| − | + | { | |
| − | + | activeCodon = (inputsequence.slice(i,i+3)); | |
| − | + | var iterate = 1; | |
| − | + | var codIdx; | |
var nearestIdx; | var nearestIdx; | ||
| − | + | for (aa in sourceOrganismData.AminoAcids) | |
| − | + | { | |
| − | + | for (codIdx = 0; codIdx < srcRanks[aa].length; codIdx++) | |
| − | + | { | |
| − | + | if (srcRanks[aa][codIdx][0] == activeCodon) | |
| − | + | { | |
dstcodIdx = codIdx; | dstcodIdx = codIdx; | ||
if (doCutoff) | if (doCutoff) | ||
| Line 375: | Line 386: | ||
amAcids += acidLookup(aa); | amAcids += acidLookup(aa); | ||
| − | + | iterate = 0; | |
| − | + | break; | |
| − | + | } | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | } | |
var acidshtml = document.getElementById('InputAcids'); | var acidshtml = document.getElementById('InputAcids'); | ||
acidshtml.innerHTML = '<b>Polypeptide: </b><span class="c"> ' + amAcids + '</span>'; | acidshtml.innerHTML = '<b>Polypeptide: </b><span class="c"> ' + amAcids + '</span>'; | ||
| − | + | var output = document.getElementById('Output'); | |
| − | + | output.innerHTML = '<tr><td><b>Input Sequence:</b></td><td colspan=2 style="word-wrap: break-word"><span class="c">' + inputsequence + '</span></td></tr>'+ '<tr><td><b>Output Sequence (Optimisation)</td><td colspan=2 style="word-wrap: break-word"><span class="c">' + optimisedSequence + '</span></td><tr><td><b>Output Sequence (Rank Harmonisation)</td><td colspan=2 style="word-wrap: break-word"><span class="c">' + outputSequence + '</span></td><tr><td><b>Output Sequence (Frequency Harmonisation)</td><td colspan=2 style="word-wrap: break-word"><span class="c">' + freqHarmonised + '</span></td></tr>'; | |
Revision as of 15:28, 18 October 2019
Software
Codon Harmoniser
Enter your gene sequence:
Search source organism
Search destination organism
Set minimum codon frequency threshold per thousand