<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Static navbar --> <!--<nav class="navbar navbar-default">--> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Similar Data</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://cistrome.org/db/#/">Back to CistromeDB</a></li> </ul> </div> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <h2>Similar data seaching on CistromeDB</h2> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p> <a class="btn btn-lg btn-primary" href="#" role="button">Learn more »</a> </p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">File choosing and parameters setting</h3> </div> <div class="panel-body"> <div class="container"> <form class="form-group" enctype="multipart/form-data" method="post"> {% csrf_token %} <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-4"> <div class="form-group"> <label class="row col-form-label"> <label for="species">Species</label> </label> <div class="row"> <select class="form-control" name="species" id="species"> <option selected value="hg38">Human</option> <option value="mm10">Mouse</option> </select> </div> </div> <div class="form-group"> <label class="row col-form-label"> <label for="peak">Peak file</label> </label> <div class="row"> <input type="file" name="peak" id="peak"> </div> </div> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <div class="form-group"> <label class="row col-form-label"> <label for="method">Method</label> </label> <div class="form-group"> <div class="row"> <select class="form-control" name="met" id="met" onchange="metChang()"> <option selected value="neighbor">N_nearest_neighbors</option> <option value="range">Within_range</option> </select> </div> </div> <div class="form-group"> <label class="row col-form-label"> <label for="par">Neighbor number or range threshold</label> </label> <div class="form-group"> <div class="row"> <input id="pars" class="form-control" type="number" step="1" min="1" max="100" name="par" value="20" placeholder="1~100"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-5"></div> <div class="col-md-2"> <input class="btn btn-primary" type="submit" vlaue="Upload"> <!-- <botton class="btn btn-primary" type="submit" value="upload">Upload</botton> --> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Results</h2> </div> <div class="panel-body"> {% if wns %} <b>{{ wns }}</b> {% else %} <table class="table table-bordered table-hover"> <thead> <tr> <th>ID</th> <th>Species</th> <th>GSM ID</th> <th>Cell Line</th> <th>Cell Type</th> <th>Tissue</th> <th>Factor</th> <th>JDIST</th> <th>QC</th> </tr> </thead> <tbody> {% for item in items %} <tr onclick="getQc({{item.0}})"> {% for i in item %} <td>{{i}}</td> {% endfor %} <!--<td><a href="http://10.10.196.55:5000/getqc/?id={{item.0}}" target="_blank">QC_REPORTS</a></td>--> </tr> {% endfor %} </tbody> </table> <a class="btn btn-primary" href="http://10.10.196.55:5000/download/?fname={{fname}}" target="_blank">Download</a> {% endif %} </div> </div> </div> </div> </div> {% if qc %} {% include "qc2.html" %} {% else %} <p></p> {% endif %}

body { padding-top: 20px; padding-bottom: 20px; } .navbar { margin-bottom: 20px; }

function metChange(){ var index = document.getElementById("met").selectedIndex; var met = document.getElementById("met").options[index].value; if (met == "range") { document.getElementById("pars").step = "0.01"; document.getElementById("pars").min = "0.01"; document.getElementById("pars").max = "0.95"; document.getElementById("pars").value = "0.9"; document.getElementById("pars").placeholder = "0.01~0.95"; }else{ document.getElementById("pars").step = "1"; document.getElementById("pars").min = "1"; document.getElementById("pars").max = "100"; document.getElementById("pars").value = "20"; document.getElementById("pars").placeholder = "1~100"; } } function getQc(ids){ var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "http://10.10.196.55:5000/getqc/, true) xmlhttp.setRequestHeader("Content_type", "application/json") xmlhttp.send("ids="+ids) }