Difference between revisions of "Team:Heidelberg/Toolbox"

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}}

Revision as of 20:25, 26 October 2017

Welcome to our
Toolbox Guide!

Text on our Toolbox

Put explaination here

Plasmid

Resistance & Ori

RBS + geneIII

RBS + Reporter

Activator & Promoter

Choose on of our sequences or upload your own

Additional sequence

Choose on of our sequences or upload your own
Create Plasmid