modifications for paper

compomics · Sep 25, 2017 · 464d6f3 · 464d6f3
1 parent 6c1e59f
commit 464d6f3
Show file tree

Hide file tree

Showing 23 changed files with 669 additions and 70 deletions.
diff --git a/WebContent/data.xhtml b/WebContent/data.xhtml
@@ -146,6 +146,8 @@ $(document).ready(function()
               <a target="_blank" href="https://thebiogrid.org/" style="font-size: 90%;">BioGRID</a>
               <a>, </a>
               <a target="_blank" href="http://www.disgenet.org/" style="font-size: 90%;">DisGeNet</a>
+              ,
+              <a target="_blank" href="http://www.proteinatlas.org/" style="font-size: 90%;">The Human Protein Atlas</a>
             	</div>
             	<br/>
             	<div>
@@ -213,8 +215,8 @@ $(document).ready(function()
             </div>
             <div class="col-sm-1">
               <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml" class="text-muted">Help</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#documentation" class="text-sub">Documentation</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#sourceCode" class="text-sub">Source Code  &amp; Api</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#faq" class="text-sub">FAQ</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#userGuide" class="text-sub">User Guide</a></p>
               <p class="credit"><a href="/tabloidproteome/help.xhtml#contact" class="text-sub">Contact</a></p>
             </div>
           </div>

diff --git a/WebContent/dataTable.xhtml b/WebContent/dataTable.xhtml
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core" 
+xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
 <f:metadata>
   <f:event listener="#{graphDbManagedBean.load}" type="preRenderView" />
 </f:metadata>
 
-<head>
+<h:head>
 
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -48,7 +49,50 @@ body {
   ga('send', 'pageview');
 
 </script>
-</head>
+<script>
+$(function() {
+
+	if (document.getElementById('jacc').value != null &amp;&amp; document.getElementById('jacc').value != "") {
+
+		document.getElementById("modifyButton").style.display = 'block';
+		document.getElementById("modifyInput").style.display = 'block';
+		document.getElementById("modifyLabel").style.display = 'block';
+	} else{
+		document.getElementById("modifyButton").style.display = 'none';
+		document.getElementById("modifyInput").style.display = 'none';
+		document.getElementById("modifyLabel").style.display = 'none';
+	}
+
+
+});
+function modifySearch(){
+	var jacc = document.getElementById("modifyInput").value;
+	var acc1 = document.getElementById('acc1').value;
+	var acc2 = document.getElementById('acc2').value;
+	var array1 = document.getElementById('array1').value;
+
+	if(acc2 != null &amp;&amp; acc2 != ""){
+		window.location = '/tabloidproteome/dataTable.xhtml?accession1=' + acc1
+    	+ '&amp;accession2=' + acc2 + '&amp;jaccard=' + jacc;
+	}else if(array1 != null &amp;&amp; array1 != ""){
+		passProteinsJSONToJSFManagedBean ([ {
+            name : 'jacc',
+            value :  jacc
+        }
+         ]);
+
+	}else{
+		window.location = '/tabloidproteome/dataTable.xhtml?accession='+ acc1
+		+ '&amp;jaccard=' + jacc;
+	}
+
+}
+
+function clickButton(){
+	window.location = '/tabloidproteome/dataTable.xhtml';
+}
+</script>
+</h:head>
 
 <body>
   <div id="wrapper">
@@ -81,14 +125,24 @@ body {
     <div class="container" id="content">
       <input type="hidden" id="control" value="#{graphDbManagedBean.control}" />
       <input type="hidden" id="msg" value="#{graphDbManagedBean.multiSearchMessage}" />
+      <input type="hidden" id="acc1" value="#{graphDbManagedBean.accession1}" />
+      <input type="hidden" id="acc2" value="#{graphDbManagedBean.accession2}" />
+      <input type="hidden" id="jacc" value="#{graphDbManagedBean.jaccScore}" />
+      <input type="hidden" id="array1" value="#{graphDbManagedBean.array1}" />
       <h1></h1>
       <a href="/tabloidproteome/graph.xhtml?graph=proteinView" style="float: right;">
       <button type="button"  class="btn btn-default">
           <img src="/tabloidproteome/resources/images/graphIcon.png" style="height: 15px; width: 15px" />
           Graph View
       </button>
       </a>
+      <h:form id="remoteCommandForm">
+        <p:remoteCommand name="passProteinsJSONToJSFManagedBean"
+                    action="#{graphDbManagedBean.updateListofProteinSearch}" process="@this"
+                    oncomplete="clickButton();" />
+      </h:form>
       <h:form prependId="false">
+
         <div class="dropdown" style="float: right">
           <button class="btn btn-default dropdown-toggle" type="button" id="download" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true">
@@ -100,13 +154,26 @@ body {
           </ul>
         </div>
       </h:form>
-      <p style="font-weight: bold;">Total number of protein pairs found: #{graphDbManagedBean.proteinDTOS.size()}</p>
-      <div id="multiSearchMessage" style="display: none;">
-        <p style="font-weight: bold;">#{graphDbManagedBean.multiSearchMessage} Click <a target="_blank"  href="/tabloidproteome/pairs.xhtml">here</a> to see the pair(s)</p>
+      <div class="row" style="margin: 0;">
+        <div class = "col-md-3">
+          <p>Total number of protein pairs found: <a style="font-weight: bold; color: black;">#{graphDbManagedBean.proteinDTOS.size()}</a></p>
+          <p>with Jaccard Similarity Threshold: <a style="font-weight: bold; color: black;">#{graphDbManagedBean.jaccScore}</a></p>
+          <div id="multiSearchMessage" style="display: none;">
+            <p style="font-weight: bold;">#{graphDbManagedBean.multiSearchMessage} Click <a target="_blank"  href="/tabloidproteome/pairs.xhtml">here</a> to see the pair(s)</p>
+          </div>
+        </div>
+        <div class = "col-md-2">
+          <p id="modifyLabel">Modify Jaccard Similarity Threshold</p>
+          <div class="input-group" id="modifyRegion" >
+            <input type="text" class="form-control" id="modifyInput" value="#{graphDbManagedBean.jaccScore}"/>
+            <span class="input-group-btn">
+            <button class="btn btn-default" type="button" id="modifyButton" onclick="modifySearch();">Search</button>
+            </span>
+          </div>
+        </div>
       </div>
 
-      <p style="color:grey; font-style: italic;">Please click on the protein pair of interest</p>
-      <h3 style="text-align: center;">Protein Association Data Table</h3>
+      <h3 style="text-align: center;">Protein Association Data Table</h3><p style="color:grey; font-style: italic; float: right;">Please click on the protein pair of interest</p>
       <table class="table table-hover table-expandable table-sticky-header table-custom" id="mainTable">
         <thead>
           <tr>
@@ -452,7 +519,7 @@ body {
 	  			if(control == ""){
 	  				var dialogInstance = new BootstrapDialog();
 	                dialogInstance.setTitle('INFORMATION');
-	                dialogInstance.setMessage('There is no link between two proteins.');
+	                dialogInstance.setMessage('There is no link between two proteins. You can modify Jaccard Threshold and search again');
 	                dialogInstance.setType(BootstrapDialog.TYPE_INFO);
 	                dialogInstance.open();
 	                $('#control').val("do not show dialog again!");
@@ -541,8 +608,8 @@ body {
             </div>
             <div class="col-sm-1">
               <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml" class="text-muted">Help</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#documentation" class="text-sub">Documentation</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#sourceCode" class="text-sub">Source Code  &amp; Api</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#faq" class="text-sub">FAQ</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#userGuide" class="text-sub">User Guide</a></p>
               <p class="credit"><a href="/tabloidproteome/help.xhtml#contact" class="text-sub">Contact</a></p>
             </div>
           </div>

diff --git a/WebContent/detailedSearch.xhtml b/WebContent/detailedSearch.xhtml
@@ -52,10 +52,16 @@ body {
 			$(function() {
 				if (window.location.search == "?pathway") {
 					document.getElementById("diseaseRegion").style.display = 'none';
+					document.getElementById("tissueRegion").style.display = 'none';
 					document.getElementById("pathwayRegion").style.display = 'block';
 				} else if (window.location.search == "?disease") {
 					document.getElementById("pathwayRegion").style.display = 'none';
+					document.getElementById("tissueRegion").style.display = 'none';
 					document.getElementById("diseaseRegion").style.display = 'block';
+				}else if (window.location.search == "?tissue") {
+					document.getElementById("pathwayRegion").style.display = 'none';
+					document.getElementById("diseaseRegion").style.display = 'none';
+					document.getElementById("tissueRegion").style.display = 'block';
 				}
 			});
 		</script>
@@ -131,7 +137,7 @@ body {
                       <th style="width: 5%">Jaccard Similarity</th>
                     </tr>
                   </table>
-                  <div class="inner_table">
+                  <div class="inner_table_large">
                     <table>
                       <ui:repeat var="proteinDTO" value="#{pathway.proteinDTOs}">
                         <tr >
@@ -194,7 +200,7 @@ body {
                       <th style="width: 5%">Jaccard Similarity</th>
                     </tr>
                   </table>
-                  <div class="inner_table">
+                  <div class="inner_table_large">
                     <table>
                       <ui:repeat var="proteinDTO" value="#{disease.proteinDTOs}">
                         <tr>
@@ -218,6 +224,44 @@ body {
         </tbody>
       </table>
     </div>
+
+    <div id="tissueRegion" style="display: none;">
+    <h1></h1>
+      <p>Jaccard similarity threshold is set as 0.4 for this search. If you want to see more results with lower threshold, please contact us.</p>
+      <p style="font-weight: bold;">Total number of protein pairs found: #{controlBean.proteinDTOs.size()}</p>
+
+      <table class="table table-hover table-sticky-header table-custom">
+        <thead>
+          <tr>
+            <th></th>
+            <th>1st Uniprot Accession</th>
+            <th>1st Protein Name</th>
+            <th>2nd Uniprot Accession</th>
+            <th>2nd Protein Name</th>
+            <th>Jaccard Similarity</th>
+            <th>Tissue Name</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <ui:repeat var="proteinDTO" value="#{controlBean.proteinDTOs}">
+            <tr>
+              <td><a href="/tabloidproteome/dataTable.xhtml?accession1=#{proteinDTO.protein1.uniprotAccession}&amp;accession2=#{proteinDTO.protein2.uniprotAccession}&amp;jaccard=#{proteinDTO.associate[0].jaccSimScore}">
+               <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+               </a></td>
+              <td>#{proteinDTO.protein1.uniprotAccession}</td>
+              <td>#{proteinDTO.protein1.proteinName}</td>
+              <td>#{proteinDTO.protein2.uniprotAccession}</td>
+              <td>#{proteinDTO.protein2.proteinName}</td>
+              <td>#{proteinDTO.associate[0].jaccSimScore}</td>
+              <td>#{proteinDTO.tissueName}</td>
+            </tr>
+          </ui:repeat>
+        </tbody>
+      </table>
+    </div>
+
+
     </div>
     <div id="footer">
           <div class="container">
@@ -258,8 +302,8 @@ body {
             </div>
             <div class="col-sm-1">
               <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml" class="text-muted">Help</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#documentation" class="text-sub">Documentation</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#sourceCode" class="text-sub">Source Code  &amp; Api</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#faq" class="text-sub">FAQ</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#userGuide" class="text-sub">User Guide</a></p>
               <p class="credit"><a href="/tabloidproteome/help.xhtml#contact" class="text-sub">Contact</a></p>
             </div>
           </div>

diff --git a/WebContent/graph.xhtml b/WebContent/graph.xhtml
@@ -675,8 +675,8 @@
             </div>
             <div class="col-sm-1">
               <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml" class="text-muted">Help</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#documentation" class="text-sub">Documentation</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#sourceCode" class="text-sub">Source Code  &amp; Api</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#faq" class="text-sub">FAQ</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#userGuide" class="text-sub">User Guide</a></p>
               <p class="credit"><a href="/tabloidproteome/help.xhtml#contact" class="text-sub">Contact</a></p>
             </div>
           </div>

diff --git a/WebContent/help.xhtml b/WebContent/help.xhtml
@@ -106,18 +106,14 @@ $(document).ready(function()
         <h2>Help</h2>
         <div class="col-sm-3">
           <ul class="nav nav-pills brand-pills nav-stacked">
-            <li class="active"><a href="#documentation" data-toggle="tab">Documentation</a></li>
-            <li><a href="#sourceCode" data-toggle="tab">Source Code &amp; Api</a></li>
+            <li class="active"><a href="#faq" data-toggle="tab">FAQ</a></li>
+            <li><a href="#userGuide" data-toggle="tab">User Guide</a></li>
             <li><a href="#contact" data-toggle="tab">Contact</a></li>
           </ul>
         </div>
         <div class="col-sm-9">
           <div class="tab-content" id="tabs">
-            <div class="tab-pane active" id="documentation">
-              <p>Click 
-              <a target="_blank" href="http://genesis.ugent.be/uvpublicdata/Tabloid_Proteome/TabloidProteome1.2_documentation.pdf">here </a>
-              for documentation (pdf)</p>
-
+            <div class="tab-pane active" id="faq">
               <div>
                 <h3>Frequently Asked Questions</h3>
                 <div class="panel panel-default">
@@ -191,17 +187,26 @@ $(document).ready(function()
                 </div>
               </div>
             </div>
-            <div class="tab-pane" id="sourceCode">
-              <p>Source code is available on 
-              <a target="_blank" href="https://github.com/compomics/tabloidProteome">GitHub</a>
-              </p>
+            <div class="tab-pane" id="userGuide">
+              <h3>Documentation</h3>
+              <p>You can find documentation (pdf) link 
+              <a target="_blank" href="http://genesis.ugent.be/uvpublicdata/Tabloid_Proteome/TabloidProteome1.3_documentation.pdf">here </a>.</p>
+              <h3>API</h3>
               <p>Tabloid Proteome provides REST (Representational State Transfer) API which enables you to get the data without using the graphical user interface of the web page. 
-              This can be used to programmatically access some information without downloading entire dataset. Please click 
+              This can be used to programmatically access some information without downloading entire dataset. </p>
+              <br/>
+              <p>Please click 
               <a target="_blank" href="http://iomics.ugent.be/tabloidproteome/tabloidApi.html">here </a>
-              for api information</p>
+              for api information.</p>
+              <p><a target="_blank" href="http://genesis.ugent.be/uvpublicdata/Tabloid_Proteome/access_for_API.txt">Here </a> you can see an example of using RESTful web services for
+               Python and Java.</p>
+              <h3>Developer Guide</h3>
+              <p>Source code is available on 
+              <a target="_blank" href="https://github.com/compomics/tabloidProteome">GitHub</a>.
+              </p>
             </div>
             <div class="tab-pane" id="contact">
-              <p>For any further questions, feedback or suggestions, you can send mail to one of the following person:</p>
+              <p>For any further questions, feedback or suggestions, you can send mail to one of the following persons:</p>
               <p>Surya Gupta <a href="mailto:[email protected]" style="text-decoration: underline;">[email protected]</a></p>
               <p>Demet Turan <a href="mailto:[email protected]" style="text-decoration: underline;">[email protected]</a></p>
               <p>Lennart Martens <a href="mailto:[email protected]" style="text-decoration: underline;">[email protected]</a></p>
@@ -267,8 +272,8 @@ $(document).ready(function()
             </div>
             <div class="col-sm-1">
               <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml" class="text-muted">Help</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#documentation" class="text-sub">Documentation</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#sourceCode" class="text-sub">Source Code &amp; Api</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#faq" class="text-sub">FAQ</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#userGuide" class="text-sub">User Guide</a></p>
               <p class="credit"><a href="/tabloidproteome/help.xhtml#contact" class="text-sub">Contact</a></p>
             </div>
           </div>

diff --git a/WebContent/information.xhtml b/WebContent/information.xhtml
@@ -157,6 +157,7 @@ $(document).ready(function()
             <div class="tab-pane" id="version">
               <p>Tabloid Proteome version 1.1 01 June 2017</p>
               <p>Tabloid Proteome version 1.2 02 August 2017</p>
+              <p>Tabloid Proteome version 1.3 01 September 2017 --- Tissue annotation is added</p>
             </div>
             <div class="tab-pane" id="licence">
               <p><img border="0" src="/tabloidproteome/resources/images/licence.png" width="88px" height="31px"/> This work is licenced under the Creative Commons Attribution-ShareAlike 4.0 License.</p>
@@ -206,8 +207,8 @@ $(document).ready(function()
             </div>
             <div class="col-sm-1">
               <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml" class="text-muted">Help</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#documentation" class="text-sub">Documentation</a></p>
-              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#sourceCode" class="text-sub">Source Code  &amp; Api</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#faq" class="text-sub">FAQ</a></p>
+              <p class="credit" style="margin-bottom: 15px;"><a href="/tabloidproteome/help.xhtml#userGuide" class="text-sub">User Guide</a></p>
               <p class="credit"><a href="/tabloidproteome/help.xhtml#contact" class="text-sub">Contact</a></p>
             </div>
           </div>