Skip to content

Commit e49bc43

Browse files
albsantosdelalbsantosdel
committed
Adding img tools
1 parent 69a9503 commit e49bc43

File tree

2 files changed

+163
-0
lines changed

2 files changed

+163
-0
lines changed

‎public/Gi_network.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
5+
<script src="lib/bindings/utils.js"></script>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
8+
9+
10+
<center>
11+
<h1></h1>
12+
</center>
13+
14+
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
15+
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
16+
<link
17+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
18+
rel="stylesheet"
19+
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
20+
crossorigin="anonymous"
21+
/>
22+
<script
23+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
24+
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
25+
crossorigin="anonymous"
26+
></script>
27+
28+
29+
<center>
30+
<h1></h1>
31+
</center>
32+
<style type="text/css">
33+
34+
#mynetwork {
35+
width: 100%;
36+
height: 1000px;
37+
background-color: white;
38+
border: 1px solid lightgray;
39+
position: relative;
40+
float: left;
41+
}
42+
43+
44+
45+
46+
47+
48+
</style>
49+
</head>
50+
51+
52+
<body>
53+
<div class="card" style="width: 100%">
54+
55+
56+
<div id="mynetwork" class="card-body"></div>
57+
</div>
58+
59+
60+
61+
62+
<script type="text/javascript">
63+
64+
// initialize global variables.
65+
var edges;
66+
var nodes;
67+
var allNodes;
68+
var allEdges;
69+
var nodeColors;
70+
var originalNodes;
71+
var network;
72+
var container;
73+
var options, data;
74+
var filter = {
75+
item : '',
76+
property : '',
77+
value : []
78+
};
79+
80+
81+
82+
83+
84+
// This method is responsible for drawing the graph, returns the drawn network
85+
function drawGraph() {
86+
var container = document.getElementById('mynetwork');
87+
88+
89+
90+
// parsing and collecting nodes and edges from the python
91+
nodes = new vis.DataSet([{"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO78093", "label": "RabF ", "shape": "diamond", "size": 26}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000265062", "label": "RAB7A", "shape": "dot", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO77453", "label": "EDO77453", "shape": "diamond", "size": 60}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000388325", "label": "LAMB2", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000352601", "label": "LRP10", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000454071", "label": "LDLR", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000294304", "label": "LRP5", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000367888", "label": "LRP4", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000200181", "label": "ITGB4", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000379350", "label": "ITGB1", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000363827", "label": "HSPG2", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000409171", "label": "PLXNB2", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000386896", "label": "ITGA6", "shape": "dot", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000230588", "label": "MEP1A", "shape": "dot", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO81693", "label": "EDO81693", "shape": "diamond", "size": 20}, {"color": "#525252", "font": {"color": "#555555"}, "id": "9606.ENSP00000265441", "label": "WNT2", "shape": "dot", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO80456", "label": "EDO80456", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO77269", "label": "EDO77269", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO77205", "label": "EDO77205", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO82290", "label": "EDO82290", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO81514", "label": "EDO81514", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO78610", "label": "EDO78610", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO77472", "label": "EDO77472", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO81891", "label": "EDO81891", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO82416", "label": "Tenascin-37 ", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO76723", "label": "EDO76723", "shape": "diamond", "size": 20}, {"color": "#33a02c", "font": {"color": "#555555"}, "id": "5741.EDO76387", "label": "Tenascin-like ", "shape": "diamond", "size": 20}]);
92+
edges = new vis.DataSet([{"color": "#999999", "from": "5741.EDO78093", "to": "9606.ENSP00000265062", "value": 0.05, "width": 0.83}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000388325", "value": 0.05, "width": 0.934}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000352601", "value": 0.05, "width": 0.821}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000454071", "value": 0.05, "width": 0.821}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000294304", "value": 0.05, "width": 0.821}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000367888", "value": 0.05, "width": 0.821}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000200181", "value": 0.05, "width": 0.798}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000379350", "value": 0.05, "width": 0.798}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000363827", "value": 0.05, "width": 0.8}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000409171", "value": 0.05, "width": 0.748}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO77453", "to": "9606.ENSP00000230588", "value": 0.05, "width": 0.798}, {"color": "#999999", "from": "5741.EDO81693", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO81693", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO80456", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO80456", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO77269", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO77269", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO77205", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO77205", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO82290", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO82290", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO81514", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO81514", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO78610", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO78610", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO77472", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO77472", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO81891", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO81891", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO82416", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO82416", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO76723", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO76723", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}, {"color": "#999999", "from": "5741.EDO76387", "to": "9606.ENSP00000386896", "value": 0.05, "width": 0.815}, {"color": "#999999", "from": "5741.EDO76387", "to": "9606.ENSP00000265441", "value": 0.05, "width": 0.789}]);
93+
94+
nodeColors = {};
95+
allNodes = nodes.get({ returnType: "Object" });
96+
for (nodeId in allNodes) {
97+
nodeColors[nodeId] = allNodes[nodeId].color;
98+
}
99+
allEdges = edges.get({ returnType: "Object" });
100+
// adding nodes and edges to the graph
101+
data = {nodes: nodes, edges: edges};
102+
103+
var options = {
104+
"configure": {
105+
"enabled": false
106+
},
107+
"edges": {
108+
"color": {
109+
"inherit": true
110+
},
111+
"smooth": {
112+
"enabled": true,
113+
"type": "dynamic"
114+
}
115+
},
116+
"interaction": {
117+
"dragNodes": true,
118+
"hideEdgesOnDrag": false,
119+
"hideNodesOnDrag": false
120+
},
121+
"physics": {
122+
"enabled": true,
123+
"repulsion": {
124+
"centralGravity": 0.33,
125+
"damping": 0.95,
126+
"nodeDistance": 420,
127+
"springConstant": 0.1,
128+
"springLength": 110
129+
},
130+
"solver": "repulsion",
131+
"stabilization": {
132+
"enabled": true,
133+
"fit": true,
134+
"iterations": 1000,
135+
"onlyDynamicEdges": false,
136+
"updateInterval": 50
137+
}
138+
}
139+
};
140+
141+
142+
143+
144+
145+
146+
network = new vis.Network(container, data, options);
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
return network;
158+
159+
}
160+
drawGraph();
161+
</script>
162+
</body>
163+
</html>

‎public/ckg.jpeg‎

145 KB
Loading

0 commit comments

Comments
 (0)