path: root/gn2/wqflask/templates/snp_browser.html

{% 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 %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5' UTR</option>
                <option value="Coding" {% if domain == "Coding" %}selected{% endif %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Coding Region</option>
                <option value="3' UTR" {% if domain == "3' UTR" %}selected{% endif %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3' UTR</option>
                <option value="Intron" {% if domain == "Intron" %}selected{% endif %}>Intron</option>
                <option value="Splice Site" {% if domain == "Splice Site" %}selected{% endif %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Splice Site</option>
                <option value="Nonsplice Site" {% if domain == "Nonsplice Site" %}selected{% endif %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 %}>&gt;=</option>
                <option value="==" {% if criteria == "==" %}selected{% endif %}>=</option>
                <option value="<=" {% if criteria == "<=" %}selected{% endif %}>&lt;=</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 %}