Skip to content

Commit f52608a

Browse files
sayalaruanosayalaruano
committed
Add cyjs and html as network formats and include the logic to render them in a streamlit report
1 parent 6d26cb0 commit f52608a

File tree

6 files changed

+695
-9
lines changed

6 files changed

+695
-9
lines changed

‎example_data/MicW2Graph/ckg_network.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
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: 1000px;
36+
height: 800px;
37+
background-color: #ffffff;
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": "#6d77f0", "id": "AFM", "label": "AFM", "shape": "dot"}, {"color": "#6d77f0", "id": "CNDP1", "label": "CNDP1", "shape": "dot"}, {"color": "#6d77f0", "id": "F13A1", "label": "F13A1", "shape": "dot"}, {"color": "#6d77f0", "id": "IGFBP2", "label": "IGFBP2", "shape": "dot"}, {"color": "#abb1f6", "id": "dementia", "label": "dementia", "shape": "dot"}, {"color": "#abb1f6", "id": "Lewy body dementia", "label": "Lewy body dementia", "shape": "dot"}, {"color": "#abb1f6", "id": "schizophrenia", "label": "schizophrenia", "shape": "dot"}, {"color": "#abb1f6", "id": "bipolar disorder", "label": "bipolar disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "vascular dementia", "label": "vascular dementia", "shape": "dot"}, {"color": "#abb1f6", "id": "mood disorder", "label": "mood disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "psychotic disorder", "label": "psychotic disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "transient global amnesia", "label": "transient global amnesia", "shape": "dot"}, {"color": "#abb1f6", "id": "phobic disorder", "label": "phobic disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "post-traumatic stress disorder", "label": "post-traumatic stress disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "separation anxiety disorder", "label": "separation anxiety disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "atypical depressive disorder", "label": "atypical depressive disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "schizoaffective disorder", "label": "schizoaffective disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "melancholia", "label": "melancholia", "shape": "dot"}, {"color": "#abb1f6", "id": "generalized anxiety disorder", "label": "generalized anxiety disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "mental depression", "label": "mental depression", "shape": "dot"}, {"color": "#abb1f6", "id": "bipolar I disorder", "label": "bipolar I disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "schizophreniform disorder", "label": "schizophreniform disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "major depressive disorder", "label": "major depressive disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "delusional disorder", "label": "delusional disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "obsessive-compulsive disorder", "label": "obsessive-compulsive disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "agoraphobia", "label": "agoraphobia", "shape": "dot"}, {"color": "#abb1f6", "id": "panic disorder", "label": "panic disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "anxiety disorder", "label": "anxiety disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "cyclothymic disorder", "label": "cyclothymic disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "neurotic disorder", "label": "neurotic disorder", "shape": "dot"}, {"color": "#abb1f6", "id": "dysthymic disorder", "label": "dysthymic disorder", "shape": "dot"}, {"color": "#6d77f0", "id": "ALCAM", "label": "ALCAM", "shape": "dot", "x": 50, "y": 100}, {"color": "#6d77f0", "id": "F13B", "label": "F13B", "shape": "dot", "x": 100, "y": 100}]);
92+
edges = new vis.DataSet([{"color": "#999999", "from": "AFM", "title": "Evidence type: compiled, score: 1.186", "to": "dementia", "value": 1.186}, {"color": "#FC7634", "from": "AFM", "title": "Evidence type: befree, score: 0.01", "to": "Lewy body dementia", "value": 0.01}, {"color": "#FC7634", "from": "AFM", "title": "Evidence type: befree, score: 0.01", "to": "schizophrenia", "value": 0.01}, {"color": "#999999", "from": "CNDP1", "title": "Evidence type: compiled, score: 0.541", "to": "bipolar disorder", "value": 0.541}, {"color": "#999999", "from": "CNDP1", "title": "Evidence type: compiled, score: 1.287", "to": "dementia", "value": 1.287}, {"color": "#999999", "from": "CNDP1", "title": "Evidence type: compiled, score: 0.889", "to": "vascular dementia", "value": 0.889}, {"color": "#999999", "from": "CNDP1", "title": "Evidence type: compiled, score: 0.55", "to": "mood disorder", "value": 0.55}, {"color": "#999999", "from": "F13A1", "title": "Evidence type: compiled, score: 0.787", "to": "schizophrenia", "value": 0.787}, {"color": "#999999", "from": "F13A1", "title": "Evidence type: compiled, score: 0.783", "to": "psychotic disorder", "value": 0.783}, {"color": "#999999", "from": "F13A1", "title": "Evidence type: compiled, score: 0.66", "to": "transient global amnesia", "value": 0.66}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.008", "to": "phobic disorder", "value": 1.008}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.767", "to": "post-traumatic stress disorder", "value": 0.767}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.856", "to": "separation anxiety disorder", "value": 0.856}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.941", "to": "atypical depressive disorder", "value": 0.941}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.94", "to": "psychotic disorder", "value": 1.94}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.417", "to": "schizoaffective disorder", "value": 1.417}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.663", "to": "melancholia", "value": 0.663}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.537", "to": "generalized anxiety disorder", "value": 0.537}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.71", "to": "mood disorder", "value": 1.71}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.322", "to": "mental depression", "value": 1.322}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.119", "to": "bipolar I disorder", "value": 1.119}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.945", "to": "schizophreniform disorder", "value": 0.945}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.355", "to": "dementia", "value": 1.355}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.301", "to": "major depressive disorder", "value": 1.301}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.923", "to": "schizophrenia", "value": 1.923}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.576", "to": "delusional disorder", "value": 0.576}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.533", "to": "obsessive-compulsive disorder", "value": 1.533}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.073", "to": "agoraphobia", "value": 1.073}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.581", "to": "panic disorder", "value": 0.581}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.537", "to": "anxiety disorder", "value": 1.537}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.946", "to": "cyclothymic disorder", "value": 0.946}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 0.597", "to": "vascular dementia", "value": 0.597}, {"color": "#999999", "from": "IGFBP2", "title": "Evidence type: compiled, score: 1.658", "to": "bipolar disorder", "value": 1.658}, {"color": "#FC7634", "from": "IGFBP2", "title": "Evidence type: befree, score: 0.01", "to": "neurotic disorder", "value": 0.01}, {"color": "#FC7634", "from": "IGFBP2", "title": "Evidence type: befree, score: 0.01", "to": "dysthymic disorder", "value": 0.01}]);
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+
"stabilization": {
124+
"enabled": true,
125+
"fit": true,
126+
"iterations": 1000,
127+
"onlyDynamicEdges": false,
128+
"updateInterval": 50
129+
}
130+
}
131+
};
132+
133+
134+
135+
136+
137+
138+
network = new vis.Network(container, data, options);
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
return network;
150+
151+
}
152+
drawGraph();
153+
</script>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)