Template:Heidelberg/toolbox generator/JS
//Gibson Overlaps
var Gibson_Overlaps = {};
Gibson_Overlaps.g0_forward = "TGAAATTCTGGGCCCTGCATTACGAGAACTGA";
Gibson_Overlaps.g1_reverse = "TACTGCACCTGTAGGTCGACGATGATCTGATA";
Gibson_Overlaps.g1_forward = "TATCAGATCATCGTCGACCTACAGGTGCAGTA";
Gibson_Overlaps.g2_reverse = "TTAGTACTACTCGAGTTGATAGGCACCGACCA";
Gibson_Overlaps.g2_forward = "TGGTCGGTGCCTATCAACTCGAGTAGTACTAA";
Gibson_Overlaps.g3_reverse = "TGGTACTTCAAATGCGGCTTGGCTCCAGACAA";
Gibson_Overlaps.g3_forward = "TTGTCTGGAGCCAAGCCGCATTTGAAGTACCA";
Gibson_Overlaps.g4_reverse = "TGAAATTCTGGGCCCTGCATTACGAGAACTGA";
Gibson_Overlaps.g4_forward = "TCAGTTCTCGTAATGCAGGGCCCAGAATTTCA";
Gibson_Overlaps.g0_reverse = "TTATCCACTGGCGAGCTCTGTAACGAAACGTA";
//load instructions text
var spec_mapping = ["ori","rbs","mrk","pro","add"];
var toolbox_instructions = "";
$.ajax({ url: "rsrc/toolbox_instructions.txt",})
.done(function(file_content) {
toolbox_instructions = file_content.replace(/[\n\r]+/g,"");
}
);
String.prototype.specFormat = function() {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + spec_mapping[i] + '\\}', 'gm'), arguments[i]);
}
return s;
};
//populate resistance gene list
var library;
var library_data = {};
$.getJSON('https://2017.igem.org/Team:Heidelberg/Toolbox_JSON?action=raw', function (responseJSON) {
library = responseJSON;
//populate resistance genes (w/ groups)
for (var group in library.resistance) {
var $select = $("#input_origin_select");
var optgroup = $('<optgroup label="' + group + '">\n');
for (var item in library.resistance[group]) {
var opt = document.createElement("option");
opt.value = item;
opt.text = library.resistance[group][item].name;
optgroup.append(opt);
getSeqFromDatabase(library.resistance[group][item].file, item);
}
$select.append(optgroup);
}
//populate rbs genes
for (var item in library.rbs) {
var $select = $("#input_rbs_select");
var opt = document.createElement("option");
opt.value = item;
opt.text = library.rbs[item].name;
$select.append(opt);
getSeqFromDatabase(library.rbs[item].file, item);
}
//populate marker genes
for (var item in library.marker) {
var $select = $("#input_marker_select");
var opt = document.createElement("option");
opt.value = item;
opt.text = library.marker[item].name;
$select.append(opt);
getSeqFromDatabase(library.marker[item].file, item);
}
//populate promotor genes
for (var item in library.promotor) {
var $select = $("#input_promotor_select");
var opt = document.createElement("option");
opt.value = item;
opt.text = library.promotor[item].name;
$select.append(opt);
getSeqFromDatabase(library.promotor[item].file, item);
}
$("#input_promotor_select").append(
'<option value="upload">Upload sequence file...</option>');
$("#input_promotor_select").append(
'<option value="paste">Paste raw sequence...</option>');
//populate additional genes
for (var item in library.additional) {
var $select = $("#input_additional_select");
var opt = document.createElement("option");
opt.value = item;
opt.text = library.additional[item].name;
$select.append(opt);
getSeqFromDatabase(library.additional[item].file, item);
}
$("#input_additional_select").append(
'<option value="upload">Upload sequence file...</option>');
$("#input_additional_select").append(
'<option value="paste">Paste raw sequence...</option>');
});
var upload_data = [];
var databasePath = "data";
var seqs = {};
var opts = {};
var mapping_order = ["origin", "promotor", "rbs", "marker", "additional"];
var html = "";
var y = 0;
var angularLoaded=false;
//Process
function registerProtocols(opts, partdict) {
var staticfwd = "";
var staticrev = "";
var originname = opts["origin"];
var getOri = "Get the part containing the origin (" + originname + ") ";
getOri += "with ID " + partdict[originname].id + ".";
var promotername = opts["promotor"];
var getPromoter = "Get the part containing the promoter (" + promotername + ") ";
getPromoter += "with ID " + partdict[promotername].id + ".";
var rbsname = opts["rbs"];
var getRbs = "Get the part containing the RBS (" + rbsname + ") ";
getRbs += "with ID " + partdict[rbsname].id + ".";
var markername = opts["marker"];
var getMarker = "Get the part containing the marker (" + markername + ") ";
getMarker += "with ID " + partdict[markername].id + ".";
var additionalname = opts["additional"];
var getAdditional = "Get the part containing the additional sequence (" + rbsname + ") ";
getAdditional += "with ID " + partdict[additional].id + ".";
var getMessage = [getOri, getPromoter, getRbs,
getMarker, getAdditional].join(" ");
var clonify = "Transform all of the above into E. coli. ";
clonify += "Extract and purify the resulting plasmids. ";
clonify += "Digest with BglII and extract the correct fragment from an agarose gel.";
var design = "Design primers with forward overhang: " + staticfwd + " ";
design += "and reverse overhang: " + staticrev + " for your construct.";
design += "PCR with the designed primers and check fragment length on ";
design += "agarose gel.";
var referTo = "Refer to our Methods for more information.";
var completeMessage = [getMessage, clonify, design, referTo].join(" ");
$("#instructions").text(completeMessage);
}
function submit_p1() {
//remove old plasmid image
upload_data = [];
seqs = {};
opts = {};
html = "";
y = 0;
opts["origin"] = document.getElementById("input_origin_select").value;
opts["promotor"] = document.getElementById("input_promotor_select").value;
opts["rbs"] = document.getElementById("input_rbs_select").value;
opts["marker"] = document.getElementById("input_marker_select").value;
opts["additional"] = document.getElementById("input_additional_select").value;
seqs["origin"] = library_data[opts["origin"]];
seqs["rbs"] = library_data[opts["rbs"]];
seqs["marker"] = library_data[opts["marker"]];
registerProtocol(opts);
//Promotor
if (opts.promotor == 'upload') {
Initialize($('#input_promotor_file'));
$('#input_promotor_file').trigger('submit');
setTimeout(function () {
if ($('#input_overlaps_promotor_upload').is(':checked')) {
seqs["promotor"] = upload_data[0].replace(/(>.*)/,"").replace(/[\n\r]+/g,"");
} else {
seqs["promotor"] = upload_data[0].replace(/(>.*)/,"").replace(/[\n\r]+/g,"")
.concat(Gibson_Overlaps['g4_forward']);
}
submit_p2();
}, 1000);
} else if ($("#input_promotor_select").val() == 'paste') {
if ($('#input_overlaps_promotor_paste').is(':checked')) {
seqs["promotor"] = $("#input_promotor_paste_text")
.val()
.replace(/(>.*)/,"").replace(/[\n\r]+/g,"");
submit_p2();
} else {
seqs["promotor"] = $("#input_promotor_paste_text")
.val()
.replace(/(>.*)/,"").replace(/[\n\r]+/g,"")
.concat(Gibson_Overlaps['g4_forward']);
submit_p2();
}
} else {
//sequence from list
seqs["promotor"] = library_data[opts["promotor"]].concat(Gibson_Overlaps['g0_forward']);
setTimeout(submit_p2(), 250);
}
}
function submit_p2(){
//Additional sequence
if (opts.additional == 'upload') {
Initialize($('#input_additional_file'));
$('#input_additional_file').trigger('submit');
setTimeout(function () {
var ind = 0;
if(opts.promotor == 'upload'){
ind = 1;
}
if ($('#input_overlaps_additional_upload').is(':checked')) {
seqs["additional"] = upload_data[ind].replace(/(>.*)/,"").replace(/[\n\r]+/g,"");
} else {
seqs["additional"] = upload_data[ind].replace(/(>.*)/,"").replace(/[\n\r]+/g,"")
.concat(Gibson_Overlaps['g4_forward']);
}
setTimeout(Mapper(seqs, opts),100);
}, 500);
} else if ($("#input_additional_select").val() == 'paste') {
setTimeout(function () {
if ($('#input_overlaps_additional_paste').is(':checked')) {
seqs["additional"] = $("#input_additional_paste_text")
.val()
.replace(/(>.*)/,"").replace(/[\n\r]+/g,"");
} else {
seqs["additional"] = $("#input_additional_paste_text")
.val()
.replace(/(>.*)/,"").replace(/[\n\r]+/g,"")
.concat(Gibson_Overlaps['g4_forward']);
}
setTimeout(Mapper(seqs, opts),100);
}, 250);
} else {
//sequence from list
seqs["additional"] = library_data[opts["additional"]].concat(Gibson_Overlaps['g0_forward']);
}
setTimeout(Mapper(seqs, opts), 100);
}
var getSeqFromDatabase = function(file_content, item){
library_data[item] = file_content.split(" ")[file_content.split(" ").length-1];
}
function Initialize(element) {
if (isAPIAvailable()) {
element.on('submit', handleFileSelect);
}
};
function isAPIAvailable() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
return true;
} else {
// source: File API availability - http://caniuse.com/#feat=fileapi
// source: <output> availability - http://html5doctor.com/the-output-element/
document.writeln(
'The HTML5 APIs used in this form are only available in the following browsers:
'
);
// 6.0 File API & 13.0 <output>
document.writeln(' - Google Chrome: 13.0 or later
');
// 3.6 File API & 6.0 <output>
document.writeln(' - Mozilla Firefox: 6.0 or later
');
// 10.0 File API & 10.0 <output>
document.writeln(
' - Internet Explorer: Not supported (partial support expected in 10.0)
'
);
// ? File API & 5.1 <output>
document.writeln(' - Safari: Not supported
');
// ? File API & 9.2 <output>
document.writeln(' - Opera: Not supported');
return false;
}
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
file = files[0];
printTable(file);
}
function printTable(file_input) {
var reader = new FileReader();
reader.readAsText(file_input);
reader.onload = function (event) {
if (y == 0) {
upload_data[0] = event.target.result;
clearTimeout(y);
} else {
upload_data.push(event.target.result);
clearTimeout(y);
}
y += 1;
}
}
function Mapper(seqs, opts) {
var ops = [];
var ops_name = [];
mapping_order.forEach(function(seq){
ops.push(seqs[seq]);
if (opts[seq] == "paste" || opts[seq] == "upload"){
ops_name.push("custom "+seq);
} else {
ops_name.push(opts[seq]);
}
});
var data_length = ops[4].length;
if(angularLoaded==false){
$.getScript("https://2017.igem.org/Template:Heidelberg/angularplasmidmin/JS?action=raw&ctype=text/javascript");
angularLoaded = true;
}
var a = 0;
for (var k = 0; k < 5; k++) {
window['Standard' + k] = ops[k].length;
};
var array_inserts = [0, Standard0, Standard0, Standard0 + Standard1, Standard0 +
Standard1, Standard0 + Standard1 + Standard2, Standard0 + Standard1 +
Standard2, Standard0 + Standard1 + Standard2 + Standard3, Standard0 +
Standard1 + Standard2 + Standard3, Standard0 + Standard1 + Standard2 +
Standard3 + Standard4
];
for (var i = 0; i < 5; i++) {
window['marker' + i] = ops_name[i];
for (var j = 0; j < 2; j++) {
window['track' + i + j] = array_inserts[a];
a += 1;
}
}
// concatenate strings
var Concat_Ops = "";
for (var l = 0; l < 5; l++) {
Concat_Ops += ops[l];
}
var inst_names = {};
mapping_order.forEach(function(seq){
if (opts[seq] == "paste" || opts[seq] == "paste"){
inst_names[seq] = "your custom "+seq+" sequence";
} else {
inst_names[seq] = opts[seq];
}
});
document.getElementById("instructions").innerHTML = toolbox_instructions.specFormat(inst_names.origin,
inst_names.promotor,
inst_names.rbs,
inst_names.marker,
inst_names.additional);
download('plasmid.fa', ">"+ops_name.join(separator="|")+"|custom plasmid designed using the Heidelberg iGEM 2017 team toolbox\n"+Concat_Ops);
var sequencelength = ops[0].length + ops[1].length + ops[2].length + ops[3].length +
ops[4].length;
var tracklabel_up = 'Your circuit';
var tracklabel_down = sequencelength.toString();
html = '<plasmid sequencelength="' + sequencelength +
'" plasmidheight="600" plasmidwidth="600" id="plasmid_svg">' +
'<plasmidtrack trackstyle="fill:#ccc" width="5" radius="220"></plasmidtrack>' +
'<plasmidtrack trackstyle="fill:rgba(225,225,225,0.5)" radius="210">' +
'<tracklabel text="' + tracklabel_up +
'" labelstyle="font-size:40px;font-weight:400;" id="tracklabel_up"></tracklabel>' +
'<tracklabel text="' + tracklabel_down +
' bp" labelstyle="font-size:20px;" vadjust="20" id="tracklabel_down"></tracklabel>' +
+
'<trackmarker start="' + track00 + '" end="' + track01 +
'" markerstyle="fill:#ffd700" arrowendlength="3" arrowstartlength="-3">' +
'<markerlabel type="path" class="mdlabel white" text="' + marker0 +
'"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track10 + '" end="' + track11 +
'" markerstyle="fill:#fbb74b" arrowendlength="3" arrowstartlength="-3">' +
'<markerlabel type="path" class="mdlabel white" text="' + marker1 +
'"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track20 + '" end="' + track21 +
'" markerstyle="fill:#bb5651" arrowendlength="3" arrowstartlength="-3">' +
'<markerlabel type="path" class="mdlabel white" text="' + marker2 +
'"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track30 + '" end="' + track31 +
'" markerstyle="fill:#66BDBE" arrowendlength="3" arrowstartlength="-3">' +
'<markerlabel type="path" class="mdlabel white" text="' + marker3 +
'"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track40 + '" end="' + track41 +
'" markerstyle="fill:#6698BE" arrowendlength="3" arrowstartlength="-3">' +
'<markerlabel type="path" class="mdlabel white" text="' + marker4 +
'"></markerlabel>' +
'</trackmarker>' +
+
'<trackmarker start="' + track00 + '" wadjust="20" id="track00">' +
'<markerlabel class="smlabel gold" text="' + track00 +
'bp" vadjust="30" id="marker00"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track01 + '" wadjust="20" id="track10">' +
'</trackmarker>' +
'<trackmarker start="' + track10 + '" wadjust="20" id="track01">' +
'<markerlabel class="smlabel purple" text="' + track10 +
'bp" vadjust="40" id="marker01"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track11 + '" wadjust="20" id="track11">' +
'</trackmarker>' +
'<trackmarker start="' + track20 +
'" class="boundary" wadjust="20" id="track02">' +
'<markerlabel class="smlabel blue" text="' + track20 +
'bp" vadjust="50" id="marker02"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track21 + '" wadjust="20" id="track12">' +
'</trackmarker>' +
'<trackmarker start="' + track30 + '" wadjust="20" id="track03">' +
'<markerlabel class="smlabel blue" text="' + track30 +
'bp" vadjust="40" id="marker03"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track31 + '" wadjust="20" id="track13">' +
'</trackmarker>' +
'<trackmarker start="' + track40 + '" wadjust="20" id="track04">' +
'<markerlabel class="smlabel gold" text="' + track40 +
'bp" vadjust="40" id="marker04"></markerlabel>' +
'</trackmarker>' +
'<trackmarker start="' + track41 + '" wadjust="20" id="track14">' +
'</trackmarker>' +
+
'<trackscale interval="100" style="stroke:#999" direction="in" ticksize="3"></trackscale>' +
'<trackscale interval="100" style="stroke:#999" ticksize="3"></trackscale>' +
'<trackscale interval="400" style="stroke:#393939" direction="in" showlabels="1" labelstyle="fill:#999;stroke:none;text-anchor:middle;alignment-baseline:middle;font-size:10px"></trackscale>' +
'</plasmidtrack>' +
'</plasmid>';
$("#plasmid_container").append(html);
$("#results_area").slideDown();
}
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
