-
Notifications
You must be signed in to change notification settings - Fork 66
/
demo-compound.html
174 lines (153 loc) · 7.29 KB
/
demo-compound.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE>
<html>
<head>
<title>cytoscape-cola.js demo (compound)</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="cytoscape-cola.js"></script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'cola'
},
style: [
{
selector: 'node',
css: {
'background-color': '#f92411'
}
},
{
selector: 'node:parent',
css: {
'background-opacity': 0.333
}
},
{
selector: 'edge',
css: {
'line-color': '#f92411'
}
}
],
elements: [{ group: 'nodes', data: { id: 'n0' } },
{ group: 'nodes', data: { id: 'n1' } },
{ group: 'nodes', data: { id: 'n2' } },
{ group: 'nodes', data: { id: 'n3' } },
{ group: 'nodes', data: { id: 'n4', parent: 'n37' } },
{ group: 'nodes', data: { id: 'n5' } },
{ group: 'nodes', data: { id: 'n6' } },
{ group: 'nodes', data: { id: 'n7', parent: 'n37' } },
{ group: 'nodes', data: { id: 'n8', parent: 'n37' } },
{ group: 'nodes', data: { id: 'n9', parent: 'n37' } },
{ group: 'nodes', data: { id: 'n10', parent: 'n38' } },
{ group: 'nodes', data: { id: 'n11', parent: 'n38' } },
{ group: 'nodes', data: { id: 'n12' } },
{ group: 'nodes', data: { id: 'n13' } },
{ group: 'nodes', data: { id: 'n14' } },
{ group: 'nodes', data: { id: 'n15' } },
{ group: 'nodes', data: { id: 'n16' } },
{ group: 'nodes', data: { id: 'n17' } },
{ group: 'nodes', data: { id: 'n18' } },
{ group: 'nodes', data: { id: 'n19' } },
{ group: 'nodes', data: { id: 'n20' } },
{ group: 'nodes', data: { id: 'n21' } },
{ group: 'nodes', data: { id: 'n22' } },
{ group: 'nodes', data: { id: 'n23' } },
{ group: 'nodes', data: { id: 'n24', parent: 'n39' } },
{ group: 'nodes', data: { id: 'n25', parent: 'n39' } },
{ group: 'nodes', data: { id: 'n26', parent: 'n42' } },
{ group: 'nodes', data: { id: 'n27', parent: 'n42' } },
{ group: 'nodes', data: { id: 'n28', parent: 'n42' } },
{ group: 'nodes', data: { id: 'n29', parent: 'n40' } },
{ group: 'nodes', data: { id: 'n30', parent: 'n40' } },
{ group: 'nodes', data: { id: 'n31', parent: 'n41' } },
{ group: 'nodes', data: { id: 'n32', parent: 'n41' } },
{ group: 'nodes', data: { id: 'n33', parent: 'n41' } },
{ group: 'nodes', data: { id: 'n34', parent: 'n41' } },
{ group: 'nodes', data: { id: 'n35', parent: 'n41' } },
{ group: 'nodes', data: { id: 'n36', parent: 'n41' } },
{ group: 'nodes', data: { id: 'n37' } },
{ group: 'nodes', data: { id: 'n38' } },
{ group: 'nodes', data: { id: 'n39', parent: 'n43' } },
{ group: 'nodes', data: { id: 'n40', parent: 'n42' } },
{ group: 'nodes', data: { id: 'n41', parent: 'n42' } },
{ group: 'nodes', data: { id: 'n42', parent: 'n43' } },
{ group: 'nodes', data: { id: 'n43' } },
{ group: 'nodes', data: { id: 'n44', parent: 'n38' } },
{ group: 'nodes', data: { id: 'n45', parent: 'n38' } },
{ group: 'nodes', data: { id: 'n46', parent: 'n38' } },
{ group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } },
{ group: 'edges', data: { id: 'e1', source: 'n1', target: 'n2' } },
{ group: 'edges', data: { id: 'e2', source: 'n2', target: 'n3' } },
{ group: 'edges', data: { id: 'e3', source: 'n0', target: 'n3' } },
{ group: 'edges', data: { id: 'e4', source: 'n1', target: 'n4' } },
{ group: 'edges', data: { id: 'e5', source: 'n2', target: 'n4' } },
{ group: 'edges', data: { id: 'e6', source: 'n4', target: 'n5' } },
{ group: 'edges', data: { id: 'e7', source: 'n5', target: 'n6' } },
{ group: 'edges', data: { id: 'e8', source: 'n4', target: 'n6' } },
{ group: 'edges', data: { id: 'e9', source: 'n4', target: 'n7' } },
{ group: 'edges', data: { id: 'e10', source: 'n7', target: 'n8' } },
{ group: 'edges', data: { id: 'e11', source: 'n8', target: 'n9' } },
{ group: 'edges', data: { id: 'e12', source: 'n7', target: 'n9' } },
{ group: 'edges', data: { id: 'e13', source: 'n13', target: 'n14' } },
{ group: 'edges', data: { id: 'e14', source: 'n12', target: 'n14' } },
{ group: 'edges', data: { id: 'e15', source: 'n14', target: 'n15' } },
{ group: 'edges', data: { id: 'e16', source: 'n14', target: 'n16' } },
{ group: 'edges', data: { id: 'e17', source: 'n15', target: 'n17' } },
{ group: 'edges', data: { id: 'e18', source: 'n17', target: 'n18' } },
{ group: 'edges', data: { id: 'e19', source: 'n18', target: 'n19' } },
{ group: 'edges', data: { id: 'e20', source: 'n17', target: 'n20' } },
{ group: 'edges', data: { id: 'e21', source: 'n19', target: 'n20' } },
{ group: 'edges', data: { id: 'e22', source: 'n16', target: 'n20' } },
{ group: 'edges', data: { id: 'e23', source: 'n20', target: 'n21' } },
{ group: 'edges', data: { id: 'e24', source: 'n22', target: 'n24' } },
{ group: 'edges', data: { id: 'e25', source: 'n23', target: 'n24' } },
{ group: 'edges', data: { id: 'e26', source: 'n24', target: 'n25' } },
{ group: 'edges', data: { id: 'e27', source: 'n26', target: 'n38' } },
{ group: 'edges', data: { id: 'e28', source: 'n26', target: 'n37' } },
{ group: 'edges', data: { id: 'e29', source: 'n26', target: 'n39' } },
{ group: 'edges', data: { id: 'e30', source: 'n26', target: 'n27' } },
{ group: 'edges', data: { id: 'e31', source: 'n26', target: 'n28' } },
{ group: 'edges', data: { id: 'e32', source: 'n26', target: 'n40' } },
{ group: 'edges', data: { id: 'e33', source: 'n21', target: 'n31' } },
{ group: 'edges', data: { id: 'e34', source: 'n21', target: 'n32' } },
{ group: 'edges', data: { id: 'e35', source: 'n31', target: 'n33' } },
{ group: 'edges', data: { id: 'e36', source: 'n31', target: 'n34' } },
{ group: 'edges', data: { id: 'e37', source: 'n33', target: 'n34' } },
{ group: 'edges', data: { id: 'e38', source: 'n32', target: 'n35' } },
{ group: 'edges', data: { id: 'e39', source: 'n32', target: 'n36' } },
{ group: 'edges', data: { id: 'e40', source: 'n16', target: 'n40' } },
]
});
});
</script>
</head>
<body>
<h1>cytoscape-cola demo (compound)</h1>
<div id="cy"></div>
</body>
</html>