Skip to content
Snippets Groups Projects
Select Git revision
  • 0707157a5ebafe95e21fdb2ce91014a40291428c
  • master default protected
  • csv_export
  • ndex
  • v1.1.18-rc2
  • v1.1.17
  • v1.1.16
  • v1.1.16-rc12
  • v1.1.16-rc11
  • v1.1.16-rc10
  • v1.1.16-rc9
  • v1.1.16-rc8
  • v1.1.16-rc7
  • v1.1.16-rc4
  • v1.1.16-rc3
  • v1.1.16-rc1
  • v1.1.6-rc1
  • v1.1.15
  • v1.1.15-rc7
  • v1.1.15-rc6
  • v1.1.15-rc3
  • v1.1.15-rc1
  • v1.1.14
  • v1.1.13
24 results

index.html

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    index.html 4.87 KiB
    <!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": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}},
                          "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                          "identifier": "symbol","legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
                        }'
                        network='{
                          "nodes": [{"id": "MYC", "label": "node w/o group"}, {"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient No. 5", "group": "patientgroup"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],
                          "edges": [
                          {"from": "TP53","to": "C5","group": "dashes", "label": "this is a label", "title": "this is a title"},
                          {"from": "Patient No. 5","to": "C5","label": "w/o group"}
                          ]
                        }'
                        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>