<!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>
<script src="https://kit.fontawesome.com/3ad4fe992f.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 left sidebar<br>
<input type="checkbox" onclick=changeConfigStr('{"showRightSidebar":'+this.checked+'}') checked /> Show right 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('{"showFooter":'+this.checked+'}') checked /> Show Footer<br>
<input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
<input id="new_color" type="text" /> <button onclick=changeColor(document.getElementById("new_color").value) >Set Color </button> <br>
<button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br>
<button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br>
<button onclick=changeConfigStr('{"interactions":"omnipath"}') >Get Omnipath Interactions </button> <br>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
<br>
<button onclick="setNetwork('netexp1')">Add nodes</button>
<div style="height: 700px; width: 1300px;">
<network-expander id="netexp1"
config='{
"nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "1.5": {"type": "gene", "color": "rgb(102, 255, 51)", "name": "1.5", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}},
"edgeGroups": {"custom": {"color": "black", "name": "Custom Group"}},
"identifier": "ensg",
"legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
}'
network='{
"nodes": [{"id": "ENSG00000171862", "group": "0.5"}, {"label": "ENSG00000284792", "id": "ENSG00000284792", "group": 0.5}],
"edges": []
}'
style="height: 100%; width: 100vw; display: block;"
></network-expander>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function changeConfig() {
const netexp = document.getElementById('netexp1');
netexp.setAttribute('config', '{"showLeftSidebar": false}');
}
function changeConfigStr(config) {
console.log(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: "ENSG00000171862",
id: "ENSG00000171862",
group: "genes"
}
],
edges: [
]
}));
}
function changeColor(hexacode) {
console.log(hexacode)
const elements_background_color = document.getElementsByClassName('is-primary');
for(var i = 0; i < elements_background_color.length; i++){
elements_background_color[i].setAttribute('style', `background-color: ${hexacode} !important; color: white !important; border-color: ${hexacode} !important`);
}
const elements_text = document.getElementsByClassName('has-text-primary');
for(var i = 0; i < elements_text.length; i++){
elements_text[i].setAttribute('style', `color: ${hexacode} !important`);
}
}
</script>
</body>
</html>