Newer
Older
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Network Expander</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<link rel="stylesheet" href="netex-build/styles.css">
<script type="text/javascript" src="netex-build/netex.js"></script>
</head>
<body>
<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
<input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
<input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show sidebar<br>
<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showTasks":'+this.checked+'}') checked /> Show Tasks<br>
<input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
<input type="checkbox" onclick=changeConfigStr('{"showNetworkMenu":'+this.checked+'}') checked /> Show Footer<br>
<input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
<button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br>
<button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
<br>
<button onclick="setNetwork('netexp1')">Add proteins</button>
<div>
<network-expander id="netexp1" config='{
"showQuery": false,
"legendPos": "right",
"nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"} },
"edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}
}' style="height: 100vh"></network-expander>
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
</div>
<script>
function init1() {
document.getElementsByClassName('my-legend-1')[0].onclick = function() {this.remove()};
}
function changeConfig() {
const netexp = document.getElementById('netexp1');
netexp.setAttribute('config', '{"showLeftSidebar": false}');
}
function changeConfigStr(config) {
const netexp = document.getElementById('netexp1');
netexp.setAttribute('config', config);
}
function setNetwork(nw) {
const netexp = document.getElementById(nw);
netexp.setAttribute('network', JSON.stringify({
nodes: [
{
name: "Protein 1",
id: "1",
access: "A",
group: "protein"
},
{
name: "Unknown type",
id: "2",
access: "B"
},
{
name: "Drug 123",
id: "3",
access: "C",
group: "drug"
},
{
name: "Gene abz",
id: "4",
access: "D",
group: "default"
}
],
edges: [
{
from: '1',
to: '2',
},
{
from: '2',
to: '3',
group: 'custom'
}
]
}));
}
</script>
</body>
</html>