diff options
Diffstat (limited to 'gn2/wqflask/templates/snp_browser.html')
| -rw-r--r-- | gn2/wqflask/templates/snp_browser.html | 582 |
1 files changed, 582 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/snp_browser.html b/gn2/wqflask/templates/snp_browser.html new file mode 100644 index 00000000..b9aea570 --- /dev/null +++ b/gn2/wqflask/templates/snp_browser.html @@ -0,0 +1,582 @@ +{% extends "base.html" %} +{% block css %} + <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" /> + <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonsBootstrap/css/buttons.bootstrap.css') }}" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/typeahead-bootstrap.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/snp_browser.css" /> +{% endblock %} +{% block content %} + + <div class="container-fluid"> + <h2>Variant Browser <a class="btn btn-primary" href="http://genenetwork.org/snpbrowser.html" role="button">Info</a></h2> + <hr style="height: 1px; background-color: #A9A9A9;"> + <div class="container" style="border-style: double; position: relative; width: 950px; padding-top: 10px; padding-right: 40px;"> + <form id="snp_browser_form" method="get" action="/snp_browser"> + <input type="hidden" name="first_run" value="{{ first_run }}"> + <input type="hidden" name="chosen_strains_mouse" value="{{ chosen_strains_mouse|join(",") }}"> + <input type="hidden" name="chosen_strains_rat" value="{{ chosen_strains_rat|join(",") }}"> + <div class="col-xs-4" style="width: 260px; padding-left: 30px; padding-right: 0px;"> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="snp_or_indel" style="text-align: right;" class="col-xs-4 col-form-label"><b>Type:</b></label> + <div class="col-xs-8"> + <select name="variant"> + <option value="SNP" {% if variant_type == "SNP" %}selected{% endif %}>SNP</option> + <option value="InDel" {% if variant_type == "InDel" %}selected{% endif %}>InDel</option> + </select> + </div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="species" style="text-align: right;" class="col-xs-4 col-form-label"><b>Species:</b></label> + <div class="col-xs-8"> + <select id="species_select" name="species"> + <option value="Mouse" {% if species_name == "Mouse" %}selected{% endif %}>Mouse</option> + <option value="Rat" {% if species_name == "Rat" %}selected{% endif %}>Rat</option> + <option value="Human" disabled>Human</option> + </select> + </div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="gene_or_id" style="text-align: right;" class="col-xs-4 col-form-label"><b>Gene or ID:</b></label> + <div class="col-xs-8"> + <input type="text" name="gene_name" size="12" value="{{ gene_name }}"> + </div> + </div> + <div class="form-group row"> + <div style="text-align: center;"><b><font color="red">Or select</font></b></div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="chr" style="text-align: right;" class="col-xs-4 col-form-label"><b>Chr:</b></label> + <div class="col-xs-8"> + <select id="chr_select" name="chr"> + {% for item in this_chr_list %} + <option value="{{ item }}" {% if item == chr %}selected{% endif %}>{{ item }}</option> + {% endfor %} + </select> + </div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="start_mb" style="text-align: right;" class="col-xs-4 col-form-label"><b>Mb:</b></label> + <div class="col-xs-8"> + <input type="text" name="start_mb" size="10" value="{{ start_mb }}"> + </div> + </div> + <div class="form-group row"> + <label for="end_mb" style="text-align: right;" class="col-xs-4 col-form-label">to</label> + <div class="col-xs-8"> + <input type="text" name="end_mb" size="10" value="{{ end_mb }}"> + </div> + </div> + <hr> + <div class="form-group row"> + <label class="col-xs-4 col-form-label"></label> + <div class="col-xs-8"> + <button class="btn btn-primary" type="submit">Search</button> + </div> + </div> + </div> + <div class="col-xs-4" style="width: 310px; padding-left: 0px; padding-right: 20px;"> + <div class="form-group row" style="margin-bottom: 10px;"> + <label for="strains" style="text-align: right;" class="col-xs-4 col-form-label"><b>Strains:</b></label> + <div class="col-xs-8"> + <select id="strain_select" name="strains" style="width: 70%;"> + {% if species_name == "Mouse" %} + {% for strain in strain_lists['mouse'] %} + <option value="{{ strain }}" {% if loop.index == 1 %}selected{% endif %}>{{ strain }}</option> + {% endfor %} + {% elif species_name == "Rat" %} + {% for strain in strain_lists['rat'] %} + <option value="{{ strain }}" {% if loop.index == 1 %}selected{% endif %}>{{ strain }}</option> + {% endfor %} + {% endif %} + </select> + <div style="float: right; line-height: 20px;"> + <input class="btn btn-primary" type="button" name="add_strain" value="Add" style="vertical-align: middle;"> + </div> + </div> + </div> + <div class="form-group row"> + <label for="chosen_strains_select" style="text-align: right;" class="col-xs-4 col-form-label"><b><font color="red">Limit to:</font></b> <input type="checkbox" name="limit_strains" {% if limit_strains == "true" %}checked{% endif %} size="100"></label> + <div class="col-xs-8"> + <select id="chosen_strains_select" size="11" style="width: 70%;"> + {% for strain in chosen_strains %} + <option value="{{ strain }}">{{ strain }}</option> + {% endfor %} + </select> + <div style="float: right; line-height: 189px;"> + <input class="btn btn-primary" type="button" name="remove_strain" value="Cut" style="vertical-align: middle;"> + </div> + </div> + </div> + <div class="form-group row"> + <label class="col-xs-4 col-form-label"></label> + <div class="col-xs-8" style="margin-top: 65px;"> + <input class="btn btn-primary" type="button" name="export_csv" value="Export to CSV"> + </div> + </div> + </div> + <div class="col-xs-4" style="width: 310px; padding-left: 20px;"> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="domain" style="text-align: right;" class="col-xs-4 col-form-label"><b>Domain:</b></label> + <div class="col-xs-8"> + <select name="domain" size="4"> + <option value="All" {% if domain == "All" %}selected{% endif %}>All</option> + <option value="Exon" {% if domain == "Exon" %}selected{% endif %}>Exon</option> + <option value="5' UTR" {% if domain == "5' UTR" %}selected{% endif %}> 5' UTR</option> + <option value="Coding" {% if domain == "Coding" %}selected{% endif %}> Coding Region</option> + <option value="3' UTR" {% if domain == "3' UTR" %}selected{% endif %}> 3' UTR</option> + <option value="Intron" {% if domain == "Intron" %}selected{% endif %}>Intron</option> + <option value="Splice Site" {% if domain == "Splice Site" %}selected{% endif %}> Splice Site</option> + <option value="Nonsplice Site" {% if domain == "Nonsplice Site" %}selected{% endif %}> Nonsplice Site</option> + <option value="Upstream" {% if domain == "Upstream" %}selected{% endif %}>Upstream</option> + <option value="Downstream" {% if domain == "Downstream" %}selected{% endif %}>Downstream</option> + <option value="Intergenic" {% if domain == "Intergenic" %}selected{% endif %}>Intergenic</option> + </select> + </div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="function" style="text-align: right;" class="col-xs-4 col-form-label"><b>Function:</b></label> + <div class="col-xs-8"> + <select name="function" size="3"> + <option value="All" {% if function == "All" %}selected{% endif %}>All</option> + <option value="Nonsynonymous" {% if function == "Nonsynonymous" %}selected{% endif %}>Nonsynonymous</option> + <option value="Synonymous" {% if function == "Synonymous" %}selected{% endif %}>Synonymous</option> + <option value="Start Gained" {% if function == "Start Gained" %}selected{% endif %}>Start Gained</option> + <option value="Start Lost" {% if function == "Start Lost" %}selected{% endif %}>Start Lost</option> + <option value="Stop Gained" {% if function == "Stop Gained" %}selected{% endif %}>Stop Gained</option> + <option value="Stop Lost" {% if function == "Stop Lost" %}selected{% endif %}>Stop Lost</option> + </select> + </div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label for="source" style="text-align: right;" class="col-xs-4 col-form-label"><b>Source:</b></label> + <div class="col-xs-8"> + <select name="source"> + <option value="All" {% if source == "All" %}selected{% endif %}>All</option> + <option value="None" {% if source == "None" %}selected{% endif %}>None</option> + <option value="dbSNP" {% if source == "dbSNP" %}selected{% endif %}>dbSNP</option> + <option value="dbSNP (release 149)" {% if source == "dbSNP (release 149)" %}selected{% endif %}>dbSNP (release 149)</option> + <option value="Sanger/UCLA" {% if source == "Sanger/UCLA" %}selected{% endif %}>Sanger/UCLA</option> + <option value="UTHSC_CITG" {% if source == "UTHSC_CITG" %}selected{% endif %}>UTHSC_CITG</option> + </select> + </div> + </div> + <div class="form-group row"> + <label for="criteria" style="text-align: right;" class="col-xs-4 col-form-label"><b>ConScore:</b></label> + <div class="col-xs-8"> + <select name="criteria" size="1"> + <option value=">=" {% if criteria == ">=" %}selected{% endif %}>>=</option> + <option value="==" {% if criteria == "==" %}selected{% endif %}>=</option> + <option value="<=" {% if criteria == "<=" %}selected{% endif %}><=</option> + </select> + <input type="text" name="score" value="{{ score }}" size="5"> + </div> + </div> + <div class="form-group row" style="margin-bottom: 5px;"> + <label style="text-align: right;" class="col-xs-4 col-form-label"><input type="checkbox" name="redundant" {% if redundant == "true" %}checked{% endif %}></label> + <div class="col-xs-8"> + Non-redundant SNP Only + </div> + </div> + <div class="form-group row"> + <label style="text-align: right;" class="col-xs-4 col-form-label"><input type="checkbox" name="diff_alleles" {% if diff_alleles == "true" %}checked{% endif %}></label> + <div class="col-xs-8"> + Different Alleles Only + </div> + </div> + </div> + </form> + </div> + + <div style="margin-top: 20px;"> + {% if table_rows is defined %} + <table class="dataTable cell-border nowrap" id="results_table" style="float: left;"> + <thead> + <tr> + <th></th> + {% if header_fields|length == 2 %} + {% for header in header_fields[0] %} + <th data-export="{{ header }}" name="{{ header }}">{{ header }}</th> + {% endfor %} + {% for strain in header_fields[1] %} + <th data-export="{{ strain }}" name="{{ strain }}" style="align: center; text-align: center; line-height: 12px;">{% for letter in strain|reverse %}<div style="transform: rotate(270deg);">{{ letter }}</div>{% endfor %}</th> + {% endfor %} + {% else %} + {% for header in header_fields %} + <th data-export="{{ header }}" name="{{ header }}">{{ header }}</th> + {% endfor %} + {% endif %} + </tr> + </thead> + <tbody> + <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td> + </tbody> + </table> + {% endif %} + </div> + </div> + +{% endblock %} +{% block js %} + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='typeahead/typeahead.bundle.js') }}"></script> + + <script language="javascript" type="text/javascript" src="/static/new/javascript/typeahead_rn6.json"></script> + + <script type='text/javascript'> + var empty_columns = {{ empty_columns|safe }}; + + var remain_field_count = 15 - {{ empty_field_count|safe }}; + var total_field_count = 15 - {{ empty_field_count|safe }} + {{ allele_list|safe|length }}; + </script> + + <script language="javascript"> + + var getParams = function(url) { + let parser = document.createElement('a'); + parser.href = url; + let params = parser.search.substring(1); + if(params.length > 0) { + return ('?'+params); + } + return params; + }; + + var substringMatcher = function(strs) { + return function findMatches(q, cb) { + var matches, substringRegex; + + // an array that will be populated with substring matches + matches = []; + + // regex used to determine if a string contains the substring `q` + substrRegex = new RegExp(q, 'i'); + + // iterate through the pool of strings and for any string that + // contains the substring `q`, add it to the `matches` array + $.each(strs, function(i, str) { + if (substrRegex.test(str)) { + matches.push(str); + } + }); + + cb(matches); + }; + }; + + $('input[name=gene_name]').typeahead({ + minLength: 2, + hint: true, + highlight: true + }, + { + name: 'rn6-genes', + source: substringMatcher(rat_genes) + }); + + {% if table_rows is defined %} + $("#results_table").DataTable( { + {% if variant_type == "SNP" %} + 'columns': [ + { + 'data': null, + 'className': 'dt-body-center', + 'orderable': false, + 'render': function(data, type, row, meta) { + return '<input type="checkbox" class="checkbox" id="variant_checkbox" onchange="onVarinatCheck(this)" name="trait_check">' + } + }, { + 'data': 'index', + 'className': 'dt-body-right' + }, { + 'data': null, + 'render': function(data, type, row, meta) { + if (data.rs != "") { + return '<b><a href="' + data.snp_url + '">' + data.snp_name + '</a></b>' + } else { + return '<a href="' + data.snp_url + '">' + data.snp_name + '</a>' + } + } + }, { + 'data': 'chr', + 'className': 'dt-body-center' + }, { + 'data': 'mb_formatted', + 'className': 'dt-body-right' + }, { + 'data': 'alleles' + }, {% if empty_columns['snp_source'] == "true" %}{ + 'data': null, + 'render': function(data, type, row, meta) { + if (data.snp_source == "Sanger/UCLA") { + return '<a href="' + data.source_urls[0] + '">Sanger</a>, <a href="' + data.source_urls[1] + '">UCLA</a>' + } else { + return data.snp_source + } + } + }, {% endif %} {% if empty_columns['conservation_score'] == "true" %}{ + 'data': 'conservation_score', + 'className': 'dt-body-right' + }, {% endif %} {% if empty_columns['gene_name'] == "true" %}{ + 'data': null, + 'render': function(data, type, row, meta) { + if (data.gene_name != "") { + return '<i>' + data.gene_name + '</i>, <a href="' + data.gene_link + '">NCBI</a>' + } else { + return data.gene_name + } + } + }, {% endif %} {% if empty_columns['transcript'] == "true" %}{ + 'data': null, + 'render': function(data, type, row, meta) { + if (data.transcript != "") { + return '<a href="' + data.transcript_link + '">' + data.transcript + '</a>' + } else { + return data.transcript + } + } + }, {% endif %} {% if empty_columns['exon'] == "true" %}{ + 'data': 'exon' + }, {% endif %}{ + 'data': 'domain_1' + }, {% if empty_columns['domain_2'] == "true" %}{ + 'data': 'domain_2' + }, {% endif %} {% if empty_columns['function'] == "true" %}{ + 'data': 'function' + }, {% endif %} {% if empty_columns['function_details'] == "true" %}{ + 'data': 'function_details' + }, {% endif %} {% for item in allele_list %} { + 'data': null, + 'orderable': false, + 'className': 'dt-body-center', + 'render': function(data, type, row, meta) { + if (typeof data.allele_value_list[{{ loop.index - 1 }}][0] !== "undefined") { + return data.allele_value_list[{{ loop.index - 1 }}][0] + } else { + return '' + } + } + }{% if loop.index < allele_list|length %},{% endif %}{% endfor %} + ], + 'createdRow': function(row, data, dataIndex) { + for (i = remain_field_count; i < total_field_count; i++) { + var this_allele = $('td', row).eq(i).text(); + switch (this_allele) { + case "A": + $('td', row).eq(i).addClass('A_allele_color'); + break; + case "C": + $('td', row).eq(i).addClass('C_allele_color'); + break; + case "T": + $('td', row).eq(i).addClass('T_allele_color'); + break; + case "G": + $('td', row).eq(i).addClass('G_allele_color'); + break; + case "t": + $('td', row).eq(i).addClass('t_allele_color'); + break; + case "c": + $('td', row).eq(i).addClass('c_allele_color'); + break; + case "a": + $('td', row).eq(i).addClass('a_allele_color'); + break; + case "g": + $('td', row).eq(i).addClass('g_allele_color'); + break; + default: + $('td', row).eq(i).addClass('default_allele_color'); + } + } + }, + {% else %} + 'columns': [ + { + 'data': null, + 'render': function(data, type, row, meta) { + return '<input type="checkbox" class="checkbox" id="variant_checkbox" onchange="onVarinatCheck(this)" name="trait_check">' + } + }, { + 'data': 'index', + 'className': 'dt-body-right' + }, { + 'data': 'indel_name' + }, { + 'data': 'indel_type' + }, { + 'data': 'indel_chr', + 'className': 'dt-body-center' + }, { + 'data': 'indel_mb_s', + 'className': 'dt-body-right' + }, { + 'data': 'indel_mb_e', + 'className': 'dt-body-right' + }, { + 'data': 'indel_strand' + }, { + 'data': 'indel_size', + 'className': 'dt-body-right' + }, { + 'data': 'indel_sequence' + }, { + 'data': 'source_name' + } + ], + {% endif %} + 'order': [[1, "asc" ]], + 'sDom': "rtip", + 'iDisplayLength': 100, + 'bServerSide': true, + 'sAjaxSource': '/snp_browser_table'+getParams(window.location.href), + 'infoCallback': function(settings, start, end, max, total, pre) { + return "Showing " + start + " to " + (start + this.api().data().length - 1) + " of " + total + " entries"; + } + }); + {% endif %} + + function onVarinatCheck(checkboxElem) { + if (checkboxElem.checked) { + if (!checkboxElem.parentElement.parentElement.classList.contains('selected')) { + checkboxElem.parentElement.parentElement.classList.add('selected') + } + } + else { + if (checkboxElem.parentElement.parentElement.classList.contains('selected')) { + checkboxElem.parentElement.parentElement.classList.remove('selected') + } + } + } + + $("#species_select").change(function() { + this_species = $(this).val(); + $("#strain_select").empty() + $("#chosen_strains_select").empty() + $("#chr_select").empty() + + if (this_species == "Mouse") { + {% for strain in strain_lists["mouse"] %} + var option = $('<option></option>').attr("value", "{{ strain }}").text("{{ strain }}"); + $("select[name=strains]").append(option); + {% endfor %} + + {% for chr in mouse_chr_list %} + var option = $('<option></option>').attr("value", "{{ chr }}").text("{{ chr }}"); + $("select[name=chr]").append(option); + {% endfor %} + + chosen_strains = $("input[name=chosen_strains_mouse]").val().split(",") + } else if (this_species == "Rat") { + {% for strain in strain_lists["rat"] %} + var option = $('<option></option>').attr("value", "{{ strain }}").text("{{ strain }}"); + $("select[name=strains]").append(option); + {% endfor %} + + {% for chr in rat_chr_list %} + var option = $('<option></option>').attr("value", "{{ chr }}").text("{{ chr }}"); + $("select[name=chr]").append(option); + {% endfor %} + + chosen_strains = $("input[name=chosen_strains_rat]").val().split(",") + } + + for (i=0; i < chosen_strains.length; i++) { + var option = $('<option></option>').attr("value", chosen_strains[i]).text(chosen_strains[i]); + $("#chosen_strains_select").append(option) + } + }); + + $("input[name=add_strain]").click(function() { + var selected_strain = $("select[name=strains] option:selected").val(); + + var current_species = $("#species_select").val(); + if (current_species == "Mouse") { + stored_strains = $("input[name=chosen_strains_mouse]").val().split(",") + if (!(stored_strains.includes(selected_strain))){ + stored_strains.push(selected_strain) + $("input[name=chosen_strains_mouse]").val(stored_strains.join(",")) + $("#chosen_strains_select").append("<option value='" + selected_strain + "'>" + selected_strain + "</option>"); + } + } else if (current_species == "Rat") { + stored_strains = $("input[name=chosen_strains_rat]").val().split(",") + if (!(stored_strains.includes(selected_strain))){ + stored_strains.push(selected_strain) + $("input[name=chosen_strains_rat]").val(stored_strains.join(",")) + $("#chosen_strains_select").append("<option value='" + selected_strain + "'>" + selected_strain + "</option>"); + } + } + }); + + $("input[name=remove_strain]").click(function() { + var selected_strain = $("#chosen_strains_select option:selected").val(); + $("#chosen_strains_select option[value='" + selected_strain + "']").remove(); + + var current_species = $("#species_select").val(); + + if (current_species == "Mouse") { + stored_strains = $("input[name=chosen_strains_mouse]").val().split(",") + for (i=0; i < stored_strains.length; i++) { + if (stored_strains[i] == selected_strain) { + stored_strains.splice(i, 1); + break; + } + } + $("input[name=chosen_strains_mouse]").val(stored_strains.join(",")) + } else if (current_species == "Rat") { + stored_strains = $("input[name=chosen_strains_rat]").val().split(",") + for (i=0; i < stored_strains.length; i++) { + if (stored_strains[i] == selected_strain) { + stored_strains.splice(i, 1); + break; + } + } + $("input[name=chosen_strains_rat]").val(stored_strains.join(",")) + } + }); + + $("#snp_browser_form").submit(function() { + var strain_list = []; + $("#chosen_strains_select option").each(function() { + strain_list.push($(this).val()); + }); + $("input[name=chosen_strains]").val(strain_list.join(",")); + }); + + + + $("input[name=export_csv]").click(function() { + var csv = []; + var rows = document.querySelectorAll("table tr"); + + var headers = []; + var col_header = rows[0].querySelectorAll("th"); + for(let i = 1; i < col_header.length; i++) { + headers.push(col_header[i].getAttribute("name")); + } + csv.push(headers.join(",")); + + for (let i = 1; i < rows.length; i++) { + var row = [], cols = rows[i].querySelectorAll("td"); + var checkBox = rows[i].querySelector("input"); + + if(checkBox.checked == true) { + for (let j = 1; j < cols.length; j++) + row.push(cols[j].innerText); + + csv.push(row.join(",")); + } + } + + var csvFile = new Blob([csv.join("\n")], {type: "text/csv"}); + var downloadLink = document.createElement("a"); + downloadLink.download = "variant_data.csv"; + downloadLink.href = window.URL.createObjectURL(csvFile); + downloadLink.style.display = "none"; + document.body.appendChild(downloadLink); + downloadLink.click(); + }); + </script> +{% endblock %} + |