Mercurial > repos > pablocarb > synbiodesign

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