Difference between revisions of "Team:Heidelberg/Toolbox"

Line 231: Line 231:
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
 +
<script>
 +
                                    //init
 +
                                    $(function () {
 +
                                        var promotorChoice = $("#input_promotor_select")
 +
                                            .change(function () {
 +
                                                if ($(this).val() == 'upload') {
 +
                                                    //show upload interface
 +
                                                    $('#input_promotor_upload').slideDown();
 +
                                                    $('#input_promotor_paste').slideUp();
 +
                                                } else if ($(this).val() == 'paste') {
 +
                                                    //show text field to paste sequence
 +
                                                    $('#input_promotor_upload').slideUp();
 +
                                                    $('#input_promotor_paste').slideDown();
 +
                                                } else {
 +
                                                    //hide again
 +
                                                    $('#input_promotor_paste').slideUp();
 +
                                                    $('#input_promotor_upload').slideUp();
 +
                                                }
 +
                                            })
 +
 +
                                        var additionalChoice = $("#input_additional_select")
 +
                                            .change(function () {
 +
                                                if ($(this).val() == 'upload') {
 +
                                                    //show upload interface
 +
                                                    $('#input_additional_upload').slideDown();
 +
                                                    $('#input_additional_paste').slideUp();
 +
                                                } else if ($(this).val() == 'paste') {
 +
                                                    //show text field to paste sequence
 +
                                                    $('#input_additional_upload').slideUp();
 +
                                                    $('#input_additional_paste').slideDown();
 +
                                                } else {
 +
                                                    //hide again
 +
                                                    $('#input_additional_paste').slideUp();
 +
                                                    $('#input_additional_upload').slideUp();
 +
                                                }
 +
                                            })
 +
                                    });
 +
                                </script>
 +
                               
 +
 +
                                <script type='text/javascript'>
 +
                                   
 +
                                    //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:01, 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