Mercurial > repos > pablocarb > synbiodesign
comparison rpviz/new_html/template2.html @ 16:fe78fd6b315a draft
planemo upload commit 87db86a34f2d92eb2c9756bf9ee53ae2970554d5
| author | pablocarb |
|---|---|
| date | Tue, 11 Jun 2019 11:42:40 -0400 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| 15:785b6253af1f | 16:fe78fd6b315a |
|---|---|
| 1 <!doctype html> | |
| 2 | |
| 3 <html> | |
| 4 | |
| 5 <head> | |
| 6 <meta charset='utf-8'></meta> | |
| 7 <title>Viewer</title> | |
| 8 <script id="elements"></script> | |
| 9 <script id="svg"></script> | |
| 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| 11 <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.7.0/cytoscape.min.js"></script> | |
| 12 <script> | |
| 13 function displaynet(network){ | |
| 14 var cy = cytoscape({ | |
| 15 container: $('#cy'), | |
| 16 | |
| 17 elements:network | |
| 18 , | |
| 19 | |
| 20 layout: { | |
| 21 name: 'breadthfirst', | |
| 22 //roots: "node[category = 'reactant']" | |
| 23 }, | |
| 24 | |
| 25 style: [ | |
| 26 { | |
| 27 selector: "node", | |
| 28 style: { | |
| 29 "background-color": '#80D0D0', | |
| 30 "label": "data(name)", | |
| 31 "font-size": "7px" | |
| 32 } | |
| 33 }, | |
| 34 {selector: "node[category='reactions']", | |
| 35 style: { | |
| 36 'background-color': '#FA8072', | |
| 37 'shape': 'roundrectangle' | |
| 38 }}, | |
| 39 {selector: "node[category='reactant']", | |
| 40 style: { | |
| 41 'background-color': '#52be80', | |
| 42 }}, | |
| 43 { | |
| 44 selector: 'edge', | |
| 45 style: { | |
| 46 'curve-style': 'bezier', | |
| 47 'width': '3px', | |
| 48 'target-arrow-shape': 'triangle', | |
| 49 } | |
| 50 }] | |
| 51 }); | |
| 52 | |
| 53 cy.on('mouseover','node',function(e){ | |
| 54 var node_select=e.target; | |
| 55 molecule=node_select.data("image"); | |
| 56 if(molecule){ | |
| 57 $("#molecule").attr('src',molecule); | |
| 58 $("#molecule").css( | |
| 59 {"width":"200px", | |
| 60 "height":"200px"});} | |
| 61 }); | |
| 62 cy.on('mouseout','node',function(e){ | |
| 63 $("#molecule").attr('src',""); | |
| 64 $("#molecule").css({ | |
| 65 "width":"", | |
| 66 "height":""}); | |
| 67 }); | |
| 68 | |
| 69 cy.on('tap','node',function(e){ | |
| 70 var node_select=e.target; | |
| 71 console.log(node_select.data("name")); | |
| 72 link=node_select.data("link"); | |
| 73 if(link){ | |
| 74 window.open(link) | |
| 75 }; | |
| 76 }); | |
| 77 }; | |
| 78 | |
| 79 $(function() { | |
| 80 }); | |
| 81 </script> | |
| 82 </head> | |
| 83 | |
| 84 <style> | |
| 85 #cy { | |
| 86 width: 80%; | |
| 87 height: 100%; | |
| 88 position: absolute; | |
| 89 left : 20%; | |
| 90 } | |
| 91 | |
| 92 | |
| 93 #molecule{ | |
| 94 position : absolute; | |
| 95 } | |
| 96 | |
| 97 </style> | |
| 98 | |
| 99 <body> | |
| 100 <div id="cy"></div> | |
| 101 <img id="molecule" src="" /> | |
| 102 <form> | |
| 103 Choose a pathway : | |
| 104 </form> | |
| 105 </body> | |
| 106 </html> |