From cd948b1ccf6781c17c9e4b4899ada9d654f16e83 Mon Sep 17 00:00:00 2001
From: Hao Chen
Date: Wed, 8 May 2019 09:18:21 -0500
Subject: showing sentences

---
 templates/cytoscape.html | 97 ++++++++++++++++++++++++++++++------------------
 templates/index.html     |  4 +-
 templates/layout.html    |  2 +-
 templates/sentences.html |  9 +++++
 4 files changed, 72 insertions(+), 40 deletions(-)
 create mode 100644 templates/sentences.html

(limited to 'templates')

diff --git a/templates/cytoscape.html b/templates/cytoscape.html
index 24c18c1..ab30562 100644
--- a/templates/cytoscape.html
+++ b/templates/cytoscape.html
@@ -2,45 +2,68 @@
 {% block content %}
 
 <script type="text/javascript" src="{{ url_for('static', filename='cytoscape.min.js') }}"></script>
-
-
-    <div id="cy"></div>
-    <script>
-      var cy = cytoscape({
-        container: document.getElementById('cy'),
-
-		style: [
-			{ selector: 'node',
-			  css: {
-				'content': 'data(id)',
-				'text-valign': 'center',
-				'text-halign': 'center',
-                'background-color': 'data(nodecolor)',
-				'font-weight': 'data(fontweight)'
-			  }
-			},
-		
-			{ selector: 'edge',
-			  css: {
-				'content': 'data(sentCnt)',
-				'curve-style': 'bezier',
-    			"opacity": "0.4",
-			  }
+	<div id="cy"></div>
+	<script>
+		var cy = cytoscape({
+			container: document.getElementById('cy'),
+			style: [
+				{ selector: 'node',
+					css: {
+						'content': 'data(id)',
+						'text-valign': 'center',
+						'text-halign': 'center',
+						'background-color': 'data(nodecolor)',
+						'font-weight': 'data(fontweight)',
+						'font-size': '20%'
+					}
+				},
+				{ selector: 'edge',
+					css: {
+						'content': 'data(sentCnt)',
+						'curve-style': 'bezier'
+					}
+				},
+			{ selector: 'node.highlight',
+            style: {
+                'border-color': '#FFF',
+                'border-width': '2px'
+            }
+        },
+        {
+            selector: 'node.semitransp',
+            style:{ 'opacity': '0.5' }
+        },
+        {
+            selector: 'edge.highlight',
+            style: { 'mid-target-arrow-color': '#FFF' }
+        },
+        {
+            selector: 'edge.semitransp',
+            style:{ 'opacity': '0.2' }
+        }
+			],
+			elements:[ {{ elements | safe }} ], 
+			layout: {
+				name: 'circle'
 			}
-		],
-	    elements:[ {{ elements | safe }} ], 
-	
-	    layout: {
-			name: 'concentric',
-			concentric: function( node ){
-			  return node.degree();
-        	},
-			levelWidth: function( nodes ){
-			  return 2;
+		});
+		cy.on('tap', 'edge', function(){
+			try { // your browser may block popups
+				window.open( this.data('url') );
+			} catch(e){ // fall back on url change
+				window.location.href = this.data('url');
 			}
-      	},
-
-	  });
+	  	});
+		cy.on('mouseover', 'node', function(e){
+			var sel = e.target;
+			cy.elements().difference(sel.outgoers()).not(sel).addClass('semitransp');
+			sel.addClass('highlight').outgoers().addClass('highlight');
+		});
+		cy.on('mouseout', 'node', function(e){
+			var sel = e.target;
+			cy.elements().removeClass('semitransp');
+			sel.removeClass('highlight').outgoers().removeClass('highlight');
+		});
     </script>
 
 {% endblock %}
diff --git a/templates/index.html b/templates/index.html
index c7bafcd..4f19269 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,8 +3,8 @@
 
 
 <h3> Searching PubMed to find sentences related to addiction</h3>
-    <form class="form-inline my-2 my-lg-0" action="/network" method="POST">
-      <input name="query" class="form-control mr-sm-2" type="search" placeholder="Nrxn1" aria-label="search" value="Nrxn1">
+    <form class="form-inline my-2 my-lg-0" action="/search">
+      <input name="query" class="form-control mr-sm-2" type="search" placeholder="Rgma Nrxn3" aria-label="search" value="Rgma Nrxn3">
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
 
diff --git a/templates/layout.html b/templates/layout.html
index 2887e2f..421798e 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -15,7 +15,7 @@
 <body>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand" href="#">GatPub</a>
+  <a class="navbar-brand" href="#">RatsPub</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
diff --git a/templates/sentences.html b/templates/sentences.html
new file mode 100644
index 0000000..c481817
--- /dev/null
+++ b/templates/sentences.html
@@ -0,0 +1,9 @@
+{% extends "layout.html" %}
+{% block content %}
+
+{{ sentences | safe }}
+    
+{% endblock %}
+
+
+
-- 
cgit v1.2.3