diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/cytoscape.html | 97 | ||||
| -rw-r--r-- | templates/index.html | 4 | ||||
| -rw-r--r-- | templates/layout.html | 2 | ||||
| -rw-r--r-- | templates/sentences.html | 9 |
4 files changed, 72 insertions, 40 deletions
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 %} + + + |