Mercurial > repos > pablocarb > synbiodesign

comparison rpviz/new_html/output.html @ 16:fe78fd6b315a draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <title>
6 Viewer
7 </title>
8 <script id="elements">
9 var rp_3={'nodes': [{'data': {'category': 'reactions', 'id': '<Reaction RP2>', 'value': '<Reaction RP2>', 'name': '<Reaction RP2>'}}, {'data': {'category': 'reactions', 'id': '<Reaction RP1>', 'value': '<Reaction RP1>', 'name': '<Reaction RP1>'}}, {'data': {'category': 'reactions', 'id': '<Reaction RP0>', 'value': '<Reaction RP0>', 'name': '<Reaction RP0>'}}, {'data': {'category': 'reactions', 'id': '<Reaction targetSink>', 'value': '<Reaction targetSink>', 'name': '<Reaction targetSink>'}}, {'data': {'category': 'reactant', 'name': '4-hydroxybenzoate', 'link': 'http://identifiers.org/metanetx.chemical/MNXM164', 'id': 'MNXM164__64__MNXC3', 'value': 'MNXM164__64__MNXC3'}}, {'data': {'category': 'reactant', 'name': 'H2O', 'link': 'http://identifiers.org/metanetx.chemical/MNXM2', 'id': 'MNXM2__64__MNXC3', 'value': 'MNXM2__64__MNXC3'}}, {'data': {'category': 'product', 'smiles': '[H]OC(=O)c1c([H])c([H])c([H])c([H])c1[H]', 'id': 'CMPD_0000000007__64__MNXC3', 'value': 'CMPD_0000000007__64__MNXC3', 'name': 'CMPD_0000000007__64__MNXC3'}}, {'data': {'category': 'reactant', 'name': 'NADH', 'link': 'http://identifiers.org/metanetx.chemical/MNXM10', 'id': 'MNXM10__64__MNXC3', 'value': 'MNXM10__64__MNXC3'}}, {'data': {'category': 'reactant', 'name': 'O2', 'link': 'http://identifiers.org/metanetx.chemical/MNXM4', 'id': 'MNXM4__64__MNXC3', 'value': 'MNXM4__64__MNXC3'}}, {'data': {'category': 'product', 'smiles': '[H]Oc1c([H])c([H])c([H])c([H])c1O[H]', 'id': 'CMPD_0000000003__64__MNXC3', 'value': 'CMPD_0000000003__64__MNXC3', 'name': 'CMPD_0000000003__64__MNXC3'}}, {'data': {'category': 'product', 'smiles': '[H]OC(=O)C([H])=C([H])C([H])=C([H])C(=O)O[H]', 'id': 'TARGET_0000000001__64__MNXC3', 'value': 'TARGET_0000000001__64__MNXC3', 'name': 'TARGET_0000000001__64__MNXC3'}}], 'edges': [{'data': {'source': '<Reaction RP2>', 'target': 'CMPD_0000000007__64__MNXC3'}}, {'data': {'source': '<Reaction RP1>', 'target': 'CMPD_0000000003__64__MNXC3'}}, {'data': {'source': '<Reaction RP0>', 'target': 'TARGET_0000000001__64__MNXC3'}}, {'data': {'source': 'MNXM164__64__MNXC3', 'target': '<Reaction RP2>'}}, {'data': {'source': 'MNXM2__64__MNXC3', 'target': '<Reaction RP2>'}}, {'data': {'source': 'CMPD_0000000007__64__MNXC3', 'target': '<Reaction RP1>'}}, {'data': {'source': 'MNXM10__64__MNXC3', 'target': '<Reaction RP1>'}}, {'data': {'source': 'MNXM4__64__MNXC3', 'target': '<Reaction RP1>'}}, {'data': {'source': 'MNXM4__64__MNXC3', 'target': '<Reaction RP0>'}}, {'data': {'source': 'CMPD_0000000003__64__MNXC3', 'target': '<Reaction RP0>'}}, {'data': {'source': 'TARGET_0000000001__64__MNXC3', 'target': '<Reaction targetSink>'}}]}
10 var rp_7={'nodes': [{'data': {'category': 'reactions', 'id': '<Reaction RP2>', 'value': '<Reaction RP2>', 'name': '<Reaction RP2>'}}, {'data': {'category': 'reactions', 'id': '<Reaction RP1>', 'value': '<Reaction RP1>', 'name': '<Reaction RP1>'}}, {'data': {'category': 'reactions', 'id': '<Reaction RP0>', 'value': '<Reaction RP0>', 'name': '<Reaction RP0>'}}, {'data': {'category': 'reactions', 'id': '<Reaction targetSink>', 'value': '<Reaction targetSink>', 'name': '<Reaction targetSink>'}}, {'data': {'category': 'reactant', 'name': 'L-tyrosine', 'link': 'http://identifiers.org/metanetx.chemical/MNXM76', 'id': 'MNXM76__64__MNXC3', 'value': 'MNXM76__64__MNXC3'}}, {'data': {'category': 'product', 'smiles': '[H]Oc1c([H])c([H])c([H])c([H])c1[H]', 'id': 'CMPD_0000000009__64__MNXC3', 'value': 'CMPD_0000000009__64__MNXC3', 'name': 'CMPD_0000000009__64__MNXC3'}}, {'data': {'category': 'reactant', 'name': 'O2', 'link': 'http://identifiers.org/metanetx.chemical/MNXM4', 'id': 'MNXM4__64__MNXC3', 'value': 'MNXM4__64__MNXC3'}}, {'data': {'category': 'product', 'smiles': '[H]Oc1c([H])c([H])c([H])c([H])c1O[H]', 'id': 'CMPD_0000000003__64__MNXC3', 'value': 'CMPD_0000000003__64__MNXC3', 'name': 'CMPD_0000000003__64__MNXC3'}}, {'data': {'category': 'product', 'smiles': '[H]OC(=O)C([H])=C([H])C([H])=C([H])C(=O)O[H]', 'id': 'TARGET_0000000001__64__MNXC3', 'value': 'TARGET_0000000001__64__MNXC3', 'name': 'TARGET_0000000001__64__MNXC3'}}], 'edges': [{'data': {'source': '<Reaction RP2>', 'target': 'CMPD_0000000009__64__MNXC3'}}, {'data': {'source': '<Reaction RP1>', 'target': 'CMPD_0000000003__64__MNXC3'}}, {'data': {'source': '<Reaction RP0>', 'target': 'TARGET_0000000001__64__MNXC3'}}, {'data': {'source': 'MNXM76__64__MNXC3', 'target': '<Reaction RP2>'}}, {'data': {'source': 'CMPD_0000000009__64__MNXC3', 'target': '<Reaction RP1>'}}, {'data': {'source': 'MNXM4__64__MNXC3', 'target': '<Reaction RP1>'}}, {'data': {'source': 'MNXM4__64__MNXC3', 'target': '<Reaction RP0>'}}, {'data': {'source': 'CMPD_0000000003__64__MNXC3', 'target': '<Reaction RP0>'}}, {'data': {'source': 'TARGET_0000000001__64__MNXC3', 'target': '<Reaction targetSink>'}}]}
11 </script>
12 <script id="svg">
13 </script>
14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
15 </script>
16 <script src="cytoscape.min.js">
17 </script>
18 <script>
19 function displaynet(network){
20 var cy = cytoscape({
21 container: $('#cy'),
22
23 elements:network
24 ,
25
26 layout: {
27 name: 'breadthfirst',
28 //roots: "node[category = 'reactant']"
29 },
30
31 style: [
32 {
33 selector: "node",
34 style: {
35 "background-color": '#80D0D0',
36 "label": "data(name)",
37 "font-size": "7px"
38 }
39 },
40 {selector: "node[category='reactions']",
41 style: {
42 'background-color': '#FA8072',
43 'shape': 'roundrectangle'
44 }},
45 {selector: "node[category='reactant']",
46 style: {
47 'background-color': '#52be80',
48 }},
49 {
50 selector: 'edge',
51 style: {
52 'curve-style': 'bezier',
53 'width': '3px',
54 'target-arrow-shape': 'triangle',
55 }
56 }]
57 });
58
59 cy.on('mouseover','node',function(e){
60 var node_select=e.target;
61 molecule=node_select.data("image");
62 if(molecule){
63 $("#molecule").attr('src',molecule);
64 $("#molecule").css(
65 {"width":"200px",
66 "height":"200px"});}
67 });
68 cy.on('mouseout','node',function(e){
69 $("#molecule").attr('src',"");
70 $("#molecule").css({
71 "width":"",
72 "height":""});
73 });
74
75 cy.on('tap','node',function(e){
76 var node_select=e.target;
77 console.log(node_select.data("name"));
78 link=node_select.data("link");
79 if(link){
80 window.open(link)
81 };
82 });
83 };
84
85 $(function() {
86 });
87 </script>
88 </head>
89 <style>
90 #cy {
91 width: 80%;
92 height: 100%;
93 position: absolute;
94 left : 20%;
95 }
96
97
98 #molecule{
99 position : absolute;
100 }
101 </style>
102 <body>
103 <div id="cy">
104 </div>
105 <img id="molecule" src=""/>
106 <form>
107 Choose a pathway :
108 <input onclick="displaynet(rp_3)" type="button" value="rp_3"/>
109 <input onclick="displaynet(rp_7)" type="button" value="rp_7"/>
110 </form>
111 </body>
112 </html>