From 47320c547f1a96bd262f38b07f9de0bc05e8779c Mon Sep 17 00:00:00 2001
From: gunturkunhakan
Date: Sun, 6 Jun 2021 03:19:21 -0500
Subject: changes in custom ontology and search

---
 templates/index.html     | 27 +++++++++++--------
 templates/layout.html    |  2 +-
 templates/ontology.html  | 37 +++++++++++++-------------
 templates/tableview.html | 69 +++++++++++++++++++++++++++++++++++++++++++++---
 4 files changed, 101 insertions(+), 34 deletions(-)

(limited to 'templates')

diff --git a/templates/index.html b/templates/index.html
index 5849be9..501cdef 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,7 @@
 {% block content %}
 {{ message | safe }}
 
-<h3> Mining Gene Relationships  from PubMed using  Custom Ontologies </h3>
+<h3> Mining PubMed for Gene Relationships using Custom Ontologies </h3>
 
 <div class="row">
 	<div class="col-md-9">
@@ -14,11 +14,12 @@
 		<!--Gene alias often include non-specific words and are thus not included in the initial search. 
 			However, a list of alias can be found by clicking on the gene symbol in the results section. 
 			These alias then can be searched with a single click. --> 
-		As an example, we present a curated ontology for drug addiction with over <a href="/ontology"> 300 keywords organized into seven categories.
-		</a> A user account (free) is needed to create custom ontologies and save the search results.
+		As an example, we present a curated ontology for drug addiction with over <a href="/ontology"> 300 keywords organized into seven categories.</a> 
+		Furthermore, <b>deep learning </b> is used to distinguish automatically the sentences describing systemic stress from those describing cellular stress. 
+		A user account (free) is needed to create custom ontologies and save the search results.
 		</p>
 
-		<p>Example: </b><a href=/progress?type=GWAS&type=addiction&type=drug&type=brain&type=stress&type=psychiatric&type=cell&type=function&query=Rgma+Nrxn3>Rgma Nrxn3</a>.</p>
+		<p>Example: </b><a href=/progress?type=GWAS&type=addiction&type=drug&type=brain&type=stress&type=psychiatric&type=cell&type=function&query=Rgma+Penk>Rgma Penk</a>.</p>
 		
 		{%if ("name" not in session) %}
 			By default, the <a href="/ontology">addiction</a> ontology is used. Custom ontologies can be created in user accounts. 
@@ -34,14 +35,18 @@
 		{% else %}	
 			Welcome back, <b> {{session['name']}}</b>. Your <a href="/userarchive"> previous searches </a> 
 			and <a href="/ontoarchive"> custom ontologies </a> are available from the links.
-
+			<br>
+			Please select an ontology to use for the new search
 			<form action="/index_ontology">
-				<div id="onto_selection">Please select an ontology to use for the new search</div>
-				<button type="submit" class="btn btn-secondary btn-sm">Select</button>
+				<table><td>
+					<div id="onto_selection"></div>
+				</td><td>
+					<button type="submit" class="btn btn-secondary btn-sm">Select</button>
+				</td></table>
 			</form>
-			
-			The <font color="tomato"> <strong>{{ontol}}</strong> </font> ontology is selected. Please choose categories to be included in the search. 
-			Expect a longer wait time when you include <b>Human GWAS</b> category.
+			<br>
+			The <font size="5em" color="tomato"> <strong>{{ontol}}</strong> </font> ontology is selected. Please choose categories to be included in the search. 
+			Expect a longer wait time when you include <b>GWAS</b> category.
 
 			<form action="/progress">
 				<div id="check_selection"></div>
@@ -69,7 +74,7 @@
 	{%for ky in dict_onto.keys()%}
 		checkbox += '<strong><input type="checkbox" name="type" value="{{ky}}" checked> {{ky}}&nbsp &nbsp </strong>';
 	{% endfor %}
-	checkbox += ' <strong><input type="checkbox" name="type" value="GWAS" checked> Human GWAS&nbsp &nbsp </strong><strong><input type="checkbox" onClick="toggle(this)"/> (Un)select all'
+	checkbox += '<strong><input type="checkbox" onClick="toggle(this)"/> (Un)select all'
 	newdiv.innerHTML = "<inout name='type' id='onto'> "+checkbox + " </input> ";
 	document.getElementById('check_selection').appendChild(newdiv);
 </script>
diff --git a/templates/layout.html b/templates/layout.html
index 00674af..20dbcbe 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -18,7 +18,7 @@
 <!-- Navigation bar -->
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="col-1">
-		<div class='img'><img src="/static/white_logo.png" class="img-fluid", style="width:60%"></div>
+		<a href="/"><div class='img'><img src="/static/white_logo.png" class="img-fluid", style="width:60%"></div></a>
 	</div>
   
   <a class="navbar-brand" href="/">GeneCup</a>
diff --git a/templates/ontology.html b/templates/ontology.html
index 45c7c56..3f439c9 100644
--- a/templates/ontology.html
+++ b/templates/ontology.html
@@ -4,7 +4,7 @@
 
 <h2> Custom Ontology Editor</h2>
 
-<p>The custom ontology has four layers. The <b>top layer</b> is one single keyword serves as the name of the ontology. This keyword is used to select the  ontology used for each search (i.e. via the dropdown menu). <i>A new ontology will be created if the ontology does not already exist for the use</i>. Keywords in the <b>second layer</b> describe the main concepts and are used to include/exclude groups of keywords for each search (via check boxes). All keywords under the same second layer are shown with the same color in the graphic output.  Keywords in the <b>third layer</b> are shown in the results (both graphic and tabular). Keywords in the <b>fourth layer</b> are synonyms of those in the third layer. Results from all synonyms are grouped together and shown under the parent third layer keyword. </p>
+<p>The custom ontology has four layers. The <b>top layer</b> is one single keyword serves as the name of the ontology. This keyword is used to select the  ontology used for each search (i.e. via the dropdown menu). <i>A new ontology will be created if the ontology does not already exist for the use</i>. Keywords in the <b>second layer</b> describe the main concepts and are used to include/exclude groups of keywords for each search (via check boxes). All keywords under the same second layer are shown with the same color in the graphic output.  Keywords in the <b>third layer</b> are shown in the results (both graphic and tabular).  Keywords in the <b>fourth layer</b> are used in PubMed and GWAS catalog search. These keywords will also be highlighted in the sentences. Results from all keywords in the fourth layer are grouped together and shown under their parent third layer keyword. This is useful to include synonyms and spelling variants in the fourth layer. A special second layer keyword is <font color="tomato"> <b> GWAS</b></font>. Any keyword under this branch is used to search the GWAS catalog. Similarly, third layer is used for display of the results and fourth layer is used for search. </p>
 
 {%if "name" in session %}
 	<b>{{session['name']}}</b>, your ontologies are available in the <a href="/ontoarchive"> archive </a>.
@@ -13,9 +13,14 @@
 {% endif %}
 
 {%if "email" in session %}
+<br>
+	The following ontologies are available:
 	<form action="/ontology">
-		<div id="onto_selection">The following ontologies are available:</div>
-		<button type="submit" class="btn btn-primary btn btn-info">Select</button>
+		<table><td>
+			<div id="onto_selection"></div>
+		</td><td>
+			<button type="submit" class="btn btn-primary btn btn-info">Select</button>
+		</td></table>
 	</form>
 {%else%}
 	Custom ontologies are available after <b>login</b>. 
@@ -47,12 +52,12 @@
 			</div>
 
 			<div id="div_id_secondcat" class="form-group required" style="width: 80%">
-				<label for="subcat"><b>Layer 3.</b> Keywords shown in results (e.g. <i> accumbens</i>) </label>
+				<label for="subcat"><b>Layer 3.</b> A keyword displayed in the results (e.g. <i> accumbens</i>) </label>
 				<input class="input-md  textinput textInput form-control" id="subcat" name="subcat" placeholder="subcategory" style="margin-bottom: 5%" required/>
 			</div>
 
 			<div id="div_id_thirdcat" class="form-group required">
-				<label for="keycat"><b>Layer 4.</b> Synonyms (e.g. <i>accumbal, AcbC, AcbS, NAcc <i> )  </label>
+				<label for="keycat"><b>Layer 4.</b> Keywords used for the search (Please include the word in Layer 3 and its variations, such as synonyms or alternative spellings, e.g. <i>accumbens, accumbal, AcbC, AcbS, NAcc <i> )  </label>
 				<textarea name="keycat" class="form-control form-control-lg" id="keycat" type="search" rows="4"  id="searchform" required></textarea>
 			</div>
 
@@ -63,25 +68,22 @@
 		</td>
 
 	<td style="width:45%; vertical-align:top">
-			<h3 style= "margin-top:5%; margin-left:5%">Ontology: {{namecat}}</h3>
-			<br>
+	<h3 style= "margin-top:5% ">Ontology: {{namecat}}</h3>
 			{%for ky in dict_onto.keys()%}
-				<p style="margin-left:10%">
-				<b>{{ky}}:</b> <p/style>
+			<hr style="width: 80%">
+			<ul><li>{{ky}} <!--layer2--> 
 				{%for subky in dict_onto[ky].keys()%}
-					<ul><li>{{subky}}
-					<br>
-					<p style="text-indent: 5%;"> {{(((dict_onto[ky][subky]|string()).split('|'))|string()).replace('\"{','').replace('}\"','').replace('\"','\'').replace('[','').replace(']','').replace('\'','')}} </p>
-					</ul><hr>
+					<ul><li>{{subky}}  <!-- layer 3 -->
+							<ul> <li>{{(((dict_onto[ky][subky]|string()).split('|'))|string()).replace('\"{','').replace('}\"','').replace('\"','\'').replace('[','').replace(']','').replace('\'','')}}  <!--layer4-->
+					</ul>
+					</ul>
 				{%endfor%}
+			</ul>
 			{%endfor%}
 	</td>
 </form>
 </table>
 
-
-
-
 {%if "name" in session %}
 <script>
 	var newdiv = document.createElement('div');
@@ -96,7 +98,4 @@
   </script>
   {% endif %}
 
-
-
-
 {% endblock %}
diff --git a/templates/tableview.html b/templates/tableview.html
index 996113b..d2936ce 100644
--- a/templates/tableview.html
+++ b/templates/tableview.html
@@ -38,7 +38,6 @@
       width: 40%;
     }
     
-    /* Clear floats after the columns */
     .row:after {
       content: "";
       display: table;
@@ -49,6 +48,7 @@
 
 <div class="row">
     <div class="column left" >
+        You can click on the column header to sort by that column.
         <h4> {{ message |safe}} </h4>
         <body> 
             <table id="myTable" border="1"> 
@@ -63,15 +63,19 @@
         {}   
         var table = document.getElementById("myTable");
         var header = table.createTHead();
-        var row = header.insertRow(0);    
+        var row = header.insertRow(0);  
         var cell = row.insertCell(0);
         cell.innerHTML = "<b>Gene</b>";
+        cell.onclick = function() {sortTable(0)};
         var cell = row.insertCell(1);
         cell.innerHTML = "<b>Abstract Count</b>";
+        cell.onclick = function() {sortTable(1)};
         var cell = row.insertCell(2);
         cell.innerHTML = "<b>Keyword</b>";
+        cell.onclick = function() {sortTable(2)};
         var cell = row.insertCell(3);
         cell.innerHTML = "<b>Category</b>";
+        cell.onclick = function() {sortTable(3)};
         
         {%for p in jedges['data']%}
             var x=document.getElementById('myTable').insertRow(1);
@@ -94,7 +98,6 @@
                     this_url1 = '\\sentences?edgeID='+'{{genes_session_tmp}}'+'_snt|'+source+'|'+target;
                     this_url2 = '\\shownode?nodetype='+type+'&node='+target;
             {%endif%}
-            //genegene_url = '/startGeneGene?forTopGene='+source;
             genegene_url = '\\synonyms?node='+source;
             y.innerHTML="<a href='"+genegene_url+"'>{{p['source']}}</a>";
             y= x.insertCell(1);
@@ -106,6 +109,66 @@
         {% endfor %}
     }
     </script>
+
+<script>
+    function sortTable(n) {
+      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+      table = document.getElementById("myTable");
+      switching = true;
+      dir = "asc"; 
+      while (switching) {
+        switching = false;
+        rows = table.rows;
+        for (i = 1; i < (rows.length - 1); i++) {
+            shouldSwitch = false;
+            x =rows[i].getElementsByTagName("TD")[n]
+            if(x.innerHTML.toString().includes("a href=")) {
+                x = rows[i].getElementsByTagName("TD")[n].innerHTML.toString().split("</a>")[0].split("\">")[1];
+                y = rows[i+1].getElementsByTagName("TD")[n].innerHTML.toString().split("</a>")[0].split("\">")[1];
+                }
+            else {
+                x =rows[i].getElementsByTagName("TD")[n].innerHTML;
+                y = rows[i + 1].getElementsByTagName("TD")[n].innerHTML;
+            }
+            if (dir == "asc") {
+                if (!(isNaN(parseInt(x)))){
+                    if(parseInt(x)>parseInt(y)){
+                        shouldSwitch = true;
+                        break;
+                    }
+                }
+                else if (x.toLowerCase() > y.toLowerCase()) {
+                    shouldSwitch= true;
+                    break;
+                }
+            } else if (dir == "desc") {
+                if (!(isNaN(parseInt(x)))){
+                    if(parseInt(x)<parseInt(y)){
+                        shouldSwitch = true;
+                        break;
+                    }
+                }
+                else  if (x.toLowerCase() < y.toLowerCase()) {
+                    shouldSwitch = true;
+                    break;
+                }
+            }
+        }
+        if (shouldSwitch) {
+          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+          switching = true;
+          switchcount ++;      
+        } else {
+          if (switchcount == 0 && dir == "asc") {
+            dir = "desc";
+            switching = true;
+          }
+        }
+      }
+    }
+    </script>
+    
+
 {%endif%}
 <br>
 <a href='/tableview0/?rnd={{rnd_url}}&genequery={{genes_url}}'>Review</a> searches that have <b>zero</b> abstract counts.
-- 
cgit v1.2.3