From 5abc13ae06b2ce7e53480340a1b9292701dc4ab5 Mon Sep 17 00:00:00 2001
From: Hao Chen
Date: Sun, 12 May 2019 06:51:20 -0500
Subject: progress working

---
 templates/index.html    |  8 +++++++-
 templates/progress.html | 44 +++++++++++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 18 deletions(-)

(limited to 'templates')

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 %}
 
-- 
cgit v1.2.3