|
|
Line 271: |
Line 271: |
| | | |
| | | |
− | <script type='text/javascript'> | + | |
− |
| + | <script src="https://2017.igem.org/Template:Heidelberg/toolbox_generator/JS?action=raw&ctype=text/javascript"></script> |
− | //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>');
| + | |
− | | + | |
− | });
| + | |
− | | + | |
− | </script>
| + | |
− | <script>
| + | |
− | | + | |
− | 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 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"]];
| + | |
− | | + | |
− | //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:<br />'
| + | |
− | );
| + | |
− | // 6.0 File API & 13.0 <output>
| + | |
− | document.writeln(' - Google Chrome: 13.0 or later<br />');
| + | |
− | // 3.6 File API & 6.0 <output>
| + | |
− | document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
| + | |
− | // 10.0 File API & 10.0 <output>
| + | |
− | document.writeln(
| + | |
− | ' - Internet Explorer: Not supported (partial support expected in 10.0)<br />'
| + | |
− | );
| + | |
− | // ? File API & 5.1 <output>
| + | |
− | document.writeln(' - Safari: Not supported<br />');
| + | |
− | // ? 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>' +
| + | |
− | | + | |
− | '<!-- draw the main markers and labels -->' +
| + | |
− | '<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>' +
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | '<!-- draw the region boundaries lines for each marker -->' +
| + | |
− | '<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>' +
| + | |
− | | + | |
− | '<!-- draw the scales -->' +
| + | |
− | '<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);
| + | |
− | }
| + | |
− | </script>
| + | |
| </html> | | </html> |
| | | |
| | | |
| {{Heidelberg/footer}} | | {{Heidelberg/footer}} |