{% extends 'base.html' %}
{% block content %}
    <div class="row">
    <div class="col-1 text-right">
        <b>X:</b>
    </div>
    <div class="col-11">
        <textarea rows="1" style="min-width: 90%" id='x'>TMPRSS2ERG, ERG</textarea><br>
    </div>
  </div>
  <div class="row">
      <div class="col-1 text-right">
          <b>Y:</b>
      </div>
      <div class="col-11">
          <textarea rows="1" style="min-width: 90%" id='y'>Prostate cancer</textarea>
      </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}}overlap/' -H 'accept: application/json' -H 'Content-Type: application/json' -d '{ "x": [ "TMPRSS2ERG", "ERG" ], "y": [ "Prostate cancer" ]}'</code></pre>
      </div>
  </div>
  <div class="row">
    <!--https://www.cancer.org/cancer/colon-rectal-cancer/causes-risks-prevention/what-causes.html-->
    <table class="display compact nowrap" style="width:60%" align="center">
        <tr><td></td><td><b>X</b></td><td><b>Y</b></td></tr>
        <tr>
            <td><a class="example-call" href="#" data-x="TMPRSS2ERG, ERG" data-y="Prostate cancer">Example 1</a></td>
            <td>TMPRSS2ERG, ERG</td>
            <td>Prostate cancer</td>
        </tr>
        <tr>
            <td><a class="example-call" href="#" data-x="MLH1, MSH2, MLH3, MSH6, PMS1, PMS2, APC" data-y = "Hereditary non-polyposis colon cancer">Example 2</a></td>
            <td>MLH1, MSH2, MLH3, MSH6, PMS1, PMS2, APC</td>
            <td>Hereditary non-polyposis colon cancer</td>
        </tr>
        <tr>
            <td><a class="example-call" href="#" data-x="Sleep duration" data-y = "Breast cancer">Example 3</a></td>
            <td>Sleep duration</td>
            <td>Breast cancer</td>
        </tr>

    </table>
    </div>
    </div>
    <div id='div1'>
    <table id="results" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>X</th>
                <th>X PMIDs</th>
                <th>X Count</th>
                <th>X Pval</th>
                <th>X Subject</th>
                <th>X Predicate</th>
                <th>Overlap</th>
                <th>Y Predicate</th>
                <th>Y Object</th>
                <th>Y Pval</th>
                <th>Y Count</th>
                <th>Y PMIDs</th>
                <th>Y</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>
    function populate_boxes(a,b){
        console.log(a,b)
        //document.getElementById('x').innerHTML = 'MLH1,MSH2,MLH3,MSH6,PMS1,PMS2,APC';
        document.getElementById('x').innerHTML = a;
        //document.getElementById('y').innerHTML ='Hereditary non-polyposis colon cancer, Familial adenomatous polyposis';
        document.getElementById('y').innerHTML = b;
        document.getElementById('api-code').innerHTML='curl -X POST \'{{api_url}}overlap/\' -H \'accept: application/json\' -H \'Content-Type: application/json\' -d \'{ "x": [ "'+a+'" ], "y": [ "'+b+'" ]}\''
    }
    $(document).ready(function() {
        $(".example-call").on('click', function(event){
            var a = $(this).attr('data-x');
            var b = $(this).attr('data-y');
            console.log(a,b)
            $("#x").val(a);
            $("#y").val(b);
            document.getElementById('api-code').innerHTML='curl -X POST \'{{api_url}}overlap/\' -H \'accept: application/json\' -H \'Content-Type: application/json\' -d \'{ "x": [ "'+a+'" ], "y": [ "'+b+'" ]}\'';
        })
        var res_table = $('#results').DataTable( {
            dom: 'Bfrtip',
            columnDefs: [
            {
                "targets": [ 1,2,10,11 ],
                "visible": false
            },
            {
                "targets": [3,9],
                render(v){
                    num = parseFloat(v).toPrecision(4);
                    return Number(num)
                }
            },
            {"targets": [1,11],
                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
                }
            },
            ],
            buttons: [
            {
                extend: 'colvis',
                columns: ':not(.noVis)'
            },
                'copy', 'csv', 'excel'
            ],
            "scrollY": "300px",
            //"paging": false,
            "processing": true,
            "order": [[3, "asc"],[9,"asc"], [2,"desc"], [10, "desc"]],
            //"serverSide": true,
            "ajax":{
                "type": "POST",
                "url": "/api/overlap/",
                data:function(d){
                    if (document.getElementById("x").value.length>0){
                        return JSON.stringify(
                        {
                            'x': document.getElementById("x").value.trim().split(','),
                            'y': document.getElementById("y").value.trim().split(',')
                        });
                    }else{
                        console.log('empty')
                        return JSON.stringify([])
                    }
                }
            },
            "columns": [
              {"data":"set_x"},
              {"data":"pmids_x"},
              {"data":"localCount_x"},
              {"data":"pval_x"},
              {"data":"subject_name_x"},
              {"data":"predicate_x"},
              {"data":"object_name_x"},
              {"data":"predicate_y"},
              {"data":"object_name_y"},
              {"data":"pval_y"},
              {"data":"localCount_y"},
              {"data":"pmids_y"},
              {"data":"set_y"},
            ]
        } );

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

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

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

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

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