aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/index.html8
-rw-r--r--templates/progress.html44
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 %}