diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 8 | ||||
| -rw-r--r-- | templates/progress.html | 44 |
2 files changed, 34 insertions, 18 deletions
diff --git a/templates/index.html b/templates/index.html index 6d50a63..0771787 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,7 +3,7 @@ <p> <br> {{ message | safe }} - <form action="/search"> + <form action="/progress"> <input name="query" class="form-control form-control-lg" type="search" placeholder="Rgma Nrxn3" aria-label="search" value=""> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> @@ -13,6 +13,12 @@ <br> Searches are conducted through PubMed to get relevant PMIDs, which are then used to retrieve the abstracts from a <a href="https://dataguide.nlm.nih.gov/edirect/archive.html">local archive</a>. The gene-keyword relationships are presented as an interactive <a href="https://js.cytoscape.org" >cytoscape</a> graph. The nodes can be moved to better reveal the connections. Tap on the links will bring up the corresponding sentences in a new browser window. <p> + + <form action="/gene_gene"> + <input name="gene" class="form-control form-control-lg" type="search" placeholder="Rgma Nrxn3" aria-label="search" value="Nrxn1"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + <hr> <a href="https://github.com/chen42/ratspub"> Source code </a> diff --git a/templates/progress.html b/templates/progress.html index 322604d..7b4a9d0 100644 --- a/templates/progress.html +++ b/templates/progress.html @@ -3,25 +3,35 @@ <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> - <script> - var source = new EventSource("/search"); - source.onmessage = function(event) { - $('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data); - $('.progress-bar-label').text(event.data+'%'); - - if(event.data == 100){ - window.location.replace("/cytoscape") - source.close() - } - } - </script> +<script> + + +var r = Math.floor(Math.random() * Math.floor(125)); +var g = Math.floor(Math.random() * Math.floor(125)); +var b = Math.floor(Math.random() * Math.floor(125)); +document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.1)' - <div id="progs" class="progress" style="width: 50%; margin: 50px;"> - <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> - <span class="progress-bar-label">0%</span> - </div> +var source = new EventSource("/search"); +source.onmessage = function(event) { + $('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data); + $('.progress-bar-label').text(event.data+'%'); + var alpha = event.data/150 + document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.3)'.replace(/[^,]+(?=\))/, alpha) + + if(event.data == 100){ + window.location.replace("/cytoscape") + source.close() + } +} +</script> +<br> +<b> We hope this won't take too long ... </b> +<div id="progs" class="progress" style="width: 50%; margin: 50px;"> + <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> + <span class="progress-bar-label">0%</span> </div> - +</div> + {% endblock %} |