{% extends 'base.html' %}
{% block content %}
    <div class="row">
    <div class="col-1 text-right">
        <b>Query:</b>
    </div>
    <div class="col-11">
        <textarea rows="1" style="min-width: 90%" id='query'>TMPRSS2</textarea><br>
    </div>
  </div>
  <div class="row">
      <div class="col-5"></div>
      <div class="col-2">
          <button id='run'>Run</button>
      </div>
      <div class="col-5"></div>
  </div>
  <br>
  <div class="row">
      <div class="col">
          <pre><code id='api-code'>curl -X POST '{{api_url}}enrich/' -H 'accept: application/json' -H 'Content-Type: application/json' -d '{ "query": "TMPRSS2"}'</code></pre>
      </div>
  </div>
  <div class="row">
    <table class="display compact nowrap" style="width:60%" align="center">
        <tr><td></td><td><b>query</b></tr>
        <tr>
            <td><a class="example-call" href="#" id='TMPRSS2'>Example 1</a></td>
            <td>TMPRSS2</td>
        </tr>
        <tr>
            <td><a class="example-call" href="#" id='MLH1'>Example 2</a></td>
            <td>MLH1</td>
        </tr>
        <tr>
            <td><a class="example-call" href="#" id='Sleep duration'>Example 3</a></td>
            <td>Sleep duration</td>
        </tr>

    </table>
    </div>
    </div>
    <div id='div1'>
    <table id="results" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Query</th>
                <th>PMIDs</th>
                <th>Count</th>
                <th>Pval</th>
                <th>Subject</th>
                <th>Predicate</th>
                <th>Object</th>
            </tr>
        </thead>
    </table>
    </div>

{% endblock %}
{% block javascript %}
<style>
    pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

thead input {
        width: 100%;
    }
</style>
<script>
    $(document).ready(function() {
        $(".example-call").on('click', function(event){
            console.log(this.id);
            a = this.id;
            $("#query").val(a);
            document.getElementById('api-code').innerHTML='curl -X POST \'{{api_url}}enrich/\' -H \'accept: application/json\' -H \'Content-Type: application/json\' -d \'{ "query":  "'+a+'" }\'';
        })
        var res_table = $('#results').DataTable( {
            dom: 'Bfrtip',
            columnDefs: [
            {
                "targets": [ 1 ],
                "visible": false
            },
            {"targets": [1],
                render(v){
                    var i;
                    var data=''
                    var d = v.split(" ")
                    for (i = 0; i < d.length; i++) {
                        //p = '<a href="https://pubmed.ncbi.nlm.nih.gov/'+d[i]+'/" target="_blank">'+d[i]+'</a>'
                        p = '<a href="/app/sentence/'+d[i]+'/">'+d[i]+'</a>'
                        data=data+p+' '
                    }
                    return data
                }
            },
            {
                "targets": [3],
                render(v){
                    num = parseFloat(v).toPrecision(4);
                    return Number(num)
                }
            }
            ],
            buttons: [
            {
                extend: 'colvis',
                columns: ':not(.noVis)'
            },
                'copy', 'csv', 'excel'
            ],
            "scrollY": "300px",
            //"paging": false,
            "processing": true,
            "order": [[3,"asc"]],
            //"serverSide": true,
            "ajax":{
                "type": "POST",
                //set dataSrc to "" to deal with no "data" key in json
                "dataSrc": "",
                "url": "/api/enrich/",
                data:function(d){
                    if (document.getElementById("query").value.length>0){
                        console.log(document.getElementById("query").value.trim())
                        return JSON.stringify(
                        {   
                            'query': document.getElementById("query").value.trim(),
                        });
                    }else{
                        console.log('empty')
                        return JSON.stringify([])
                    }
                }
            },
            "columns": [
              {"data":"query"},
              {"data":"pmids"},
              {"data":"localCount"},
              {"data":"pval"},
              {"data":"subject_name"},
              {"data":"predicate"},
              {"data":"object_name"},
            ]
        } );

        $("button").click(function(){
            console.log('update')
            res_table.ajax.reload()
            });

        $(".example-call").click(function(){
            res_table.ajax.reload()
            });

        $("#query").on('change keydown paste input', function(){
          console.log('change')
          var x=$("#query").val()
          console.log(x)
          document.getElementById('api-code').innerHTML='curl -X POST \'{{api_url}}enrich/\' -H \'accept: application/json\' -H \'Content-Type: application/json\' -d \'{ "query": "'+x+'" }\''
        });

    } );
</script>
{% endblock %}