<!doctype html>
<html lang="en">
<head>
<style>
.my-legend-1{
width: 10%;
}
</style>
<meta charset="utf-8">
<title>Network Expander</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/ico" href="assets/covex_logo_small.png">
<script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</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('{"showFilter":'+this.checked+'}') /> Show filter<br>
<input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show sidebar<br>
<br>
<button onclick="changeConfig()">Hide sidebar</button>
<button onclick="setNetwork('netexp1')">Add proteins</button>
<div style="border: 3px solid red">
<network-expander id="netexp1" config='{"legendClass": "my-legend-1", "showQuery": false, "showFilter": false}' onload="init1()" style="height: 100vh"></network-expander>
</div>
<!--
<div> <div style="border: 3px solid red">
<network-expander id="netexp2" config='{"legendUrl": "https://i.pinimg.com/originals/ff/72/80/ff72801189f650f11672915cda0f1bdf.png", "legendClass": "my-legend-2"}'></network-expander>
</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) {
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: "SIRT5",
proteinAc: "Q9NXA8",
proteinName: "NAD-dependent protein deacylase sirtuin-5"
},
{
name: "RPL36",
proteinAc: "Q9Y3U8",
proteinName: "60S ribosomal protein L36"
},
{
name: "G3BP2",
proteinAc: "Q9UN86",
proteinName: "Ras GTPase-activating protein-binding protein 2"
}
],
edges: [
{
from: 'Q9NXA8',
to: 'Q9Y3U8',
},
{
from: 'Q9Y3U8',
to: 'Q9UN86',
}
]
}));
}
</script>
</body>
</html>