index.html

<!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>