updated netexId fields to drugstoneId

src/app/components/analysis-panel/analysis-panel.component.ts

@@ -198,12 +198,12 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
 
         this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options);
 
-        this.tableDrugs = nodes.filter( e => e.netexId && e.netexId.startsWith('d'));
+        this.tableDrugs = nodes.filter( e => e.drugstoneId && e.drugstoneId.startsWith('d'));
         this.tableDrugs.forEach((r) => {
           r.rawScore = r.score;
         });
 
-        this.tableProteins = nodes.filter( e => e.netexId && e.netexId.startsWith('p'));
+        this.tableProteins = nodes.filter( e => e.drugstoneId && e.drugstoneId.startsWith('p'));
         this.tableSelectedProteins = [];
         this.tableProteins.forEach((r) => {
           r.rawScore = r.score;
@@ -234,7 +234,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
           if (nodeIds.length > 0) {
             const nodeId = nodeIds[0];
             const node = this.nodeData.nodes.get(nodeId);
-            if (node.nodeType === 'drug' || node.netexId === undefined || !node.netexId.startsWith('p')) {
+            if (node.nodeType === 'drug' || node.drugstoneId === undefined || !node.drugstoneId.startsWith('p')) {
               return;
             }
             const wrapper = getWrapperFromNode(node);
@@ -307,7 +307,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
             this.nodeData.nodes.forEach((node) => {
               // let drugType;
               // let drugInTrial;
-              // if (node.netexId && node.netexId.startsWith('d')) {
+              // if (node.drugstoneId && node.drugstoneId.startsWith('d')) {
               //   drugType = node.status;
               //   drugInTrial = node.inTrial;
               // }
@@ -429,7 +429,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   //       }
   //       for (const disorder of response.disorders) {
   //         disorder.group = 'defaultDisorder';
-  //         disorder.id = disorder.netexId;
+  //         disorder.id = disorder.drugstoneId;
   //         this.adjacentProteinDisorderList.push(mapCustomNode(disorder, this.myConfig))
   //       }
   //       this.saveAddNodes(this.adjacentProteinDisorderList);
@@ -457,7 +457,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   //       }
   //       for (const disorder of response.disorders) {
   //         disorder.group = 'defaultDisorder';
-  //         disorder.id = disorder.netexId;
+  //         disorder.id = disorder.drugstoneId;
   //         this.adjacentDrugDisorderList.push(mapCustomNode(disorder, this.myConfig));
   //       }
   //       this.saveAddNodes(this.adjacentDrugDisorderList);
@@ -496,9 +496,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   public inferNodeGroup(wrapper: Wrapper): string {
     if (wrapper.data.group !== undefined) {
       return wrapper.data.group;
-    } else if (wrapper.data.netexId !== undefined && wrapper.data.netexId.startsWith('d')) {
+    } else if (wrapper.data.drugstoneId !== undefined && wrapper.data.drugstoneId.startsWith('d')) {
       return 'drug';
-    } else if (wrapper.data.netexId !== undefined && wrapper.data.netexId.startsWith('p')) {
+    } else if (wrapper.data.drugstoneId !== undefined && wrapper.data.drugstoneId.startsWith('p')) {
       return 'protein';
     }
   }
@@ -555,14 +555,14 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
       // convert id to netex Id if exists
       const nodeDetails = details[node];
 
-      nodeDetails.id = nodeDetails.id ? nodeDetails.id : nodeDetails.netexId;
-      if (nodeDetails.netexId && nodeDetails.netexId.startsWith('p')) {
+      nodeDetails.id = nodeDetails.id ? nodeDetails.id : nodeDetails.drugstoneId;
+      if (nodeDetails.drugstoneId && nodeDetails.drugstoneId.startsWith('p')) {
         // node is protein from database, has been mapped on init to backend protein from backend
         // or was found during analysis
         nodeDetails.group = nodeDetails.group ? nodeDetails.group : 'foundNode';
         nodeDetails.label = nodeDetails.label ? nodeDetails.label : nodeDetails[identifier];
         this.proteins.push(nodeDetails);
-      } else if (nodeDetails.netexId && nodeDetails.netexId.startsWith('d')) {
+      } else if (nodeDetails.drugstoneId && nodeDetails.drugstoneId.startsWith('d')) {
         // node is drug, was found during analysis
         nodeDetails.type = 'Drug';
         nodeDetails.group = 'foundDrug';
@@ -587,7 +587,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   // hasDrugsLoaded(): boolean {
   //   if (this.nodeData == null || this.nodeData.nodes == null)
   //     return false;
-  //   return this.nodeData.nodes.get().filter((node: Node) => node.drugId && node.netexId.startsWith('dr')).length > 0;
+  //   return this.nodeData.nodes.get().filter((node: Node) => node.drugId && node.drugstoneId.startsWith('dr')).length > 0;
   // }
 
   // public updateAdjacentDrugs(bool: boolean) {
@@ -685,7 +685,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   //     this.selectedTissue = null;
   //     const updatedNodes = [];
   //     for (const item of this.proteins) {
-  //       if (item.netexId === undefined) {
+  //       if (item.drugstoneId === undefined) {
   //         // nodes that are not mapped to backend remain untouched
   //         continue;
   //       }
@@ -719,7 +719,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   //     // filter out non-proteins, e.g. drugs
   //     const proteinNodes = [];
   //     this.nodeData.nodes.forEach(element => {
-  //       if (element.id.startsWith('p') && element.netexId !== undefined) {
+  //       if (element.id.startsWith('p') && element.drugstoneId !== undefined) {
   //         proteinNodes.push(element);
   //       }
   //     });
@@ -729,17 +729,17 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   //       // mapping from netex IDs to network IDs, TODO check if this step is necessary
   //       const networkIdMappping = {}
   //       this.nodeData.nodes.forEach(element => {
-  //         networkIdMappping[element.netexId] = element.id
+  //         networkIdMappping[element.drugstoneId] = element.id
   //       });
   //       const maxExpr = Math.max(...Object.values(this.expressionMap));
-  //       for (const [netexId, expressionlvl] of Object.entries(this.expressionMap)) {
-  //         const networkId = networkIdMappping[netexId]
+  //       for (const [drugstoneId, expressionlvl] of Object.entries(this.expressionMap)) {
+  //         const networkId = networkIdMappping[drugstoneId]
   //         const node = this.nodeData.nodes.get(networkId);
   //         if (node === null) {
   //           continue;
   //         }
   //         const wrapper = getWrapperFromNode(node)
-  //         this.gradientMap[netexId] = expressionlvl !== null ? (Math.pow(expressionlvl / maxExpr, 1 / 3) * (1 - minExp) + minExp) : -1;
+  //         this.gradientMap[drugstoneId] = expressionlvl !== null ? (Math.pow(expressionlvl / maxExpr, 1 / 3) * (1 - minExp) + minExp) : -1;
   //         const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([networkId]);
   //         node.x = pos[networkId].x;
   //         node.y = pos[networkId].y;
@@ -750,7 +750,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   //             this.myConfig,
   //             isSeed,
   //             this.analysis.inSelection(wrapper),
-  //             this.gradientMap[netexId]));
+  //             this.gradientMap[drugstoneId]));
   //         node.shape = 'custom';
   //         node.ctxRenderer = pieChartContextRenderer;
   //         updatedNodes.push(node);

src/app/components/info-tile/info-tile.component.html

@@ -101,7 +101,7 @@
   </div>
 
   <app-toggle
-    *ngIf="wrapper.data.netexId && wrapper.data.netexId.startsWith('p')"
+    *ngIf="wrapper.data.drugstoneId && wrapper.data.drugstoneId.startsWith('p')"
     [value]="analysis.inSelection(wrapper)"
     (valueChange)="
       $event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])

src/app/components/network/network-menu-left/network-menu-left.component.html

@@ -143,8 +143,8 @@
                   (click)="networkHandler.activeNetwork.selectTissue(tissue)"
                   [class.is-active]="
                     networkHandler.activeNetwork.selectedTissue &&
-                    tissue.netexId ===
-                      networkHandler.activeNetwork.selectedTissue.netexId
+                    tissue.drugstoneId ===
+                      networkHandler.activeNetwork.selectedTissue.drugstoneId
                   "
                   class="dropdown-item"
                 >

src/app/components/network/network-menu/network-menu.component.html

@@ -143,8 +143,8 @@
                   (click)="networkHandler.activeNetwork.selectTissue(tissue)"
                   [class.is-active]="
                     networkHandler.activeNetwork.selectedTissue &&
-                    tissue.netexId ===
-                      networkHandler.activeNetwork.selectedTissue.netexId
+                    tissue.drugstoneId ===
+                      networkHandler.activeNetwork.selectedTissue.drugstoneId
                   "
                   class="dropdown-item"
                 >

src/app/components/network/network.component.ts

@@ -73,7 +73,7 @@ export class NetworkComponent implements OnInit {
   public highlightSeeds = false;
   public seedMap: NodeAttributeMap = {};
 
-  // keys are node netexIds
+  // keys are node drugstoneIds
   public expressionMap: NodeAttributeMap = {};
   public gradientMap: NodeAttributeMap = {};
 
@@ -118,7 +118,7 @@ export class NetworkComponent implements OnInit {
         }
         for (const disorder of response.disorders) {
           disorder.group = 'defaultDisorder';
-          disorder.id = disorder.netexId;
+          disorder.id = disorder.drugstoneId;
           this.adjacentProteinDisorderList.push(mapCustomNode(disorder, this.drugstoneConfig.config))
         }
         this.saveAddNodes(this.adjacentProteinDisorderList);
@@ -146,7 +146,7 @@ export class NetworkComponent implements OnInit {
         }
         for (const disorder of response.disorders) {
           disorder.group = 'defaultDisorder';
-          disorder.id = disorder.netexId;
+          disorder.id = disorder.drugstoneId;
           this.adjacentDrugDisorderList.push(mapCustomNode(disorder, this.drugstoneConfig.config));
         }
         this.saveAddNodes(this.adjacentDrugDisorderList);
@@ -266,7 +266,7 @@ export class NetworkComponent implements OnInit {
       const updatedNodes = [];
       // for (const item of this.proteins) {
       for (const item of this.currentViewProteins) {
-        if (item.netexId === undefined) {
+        if (item.drugstoneId === undefined) {
           // nodes that are not mapped to backend remain untouched
           continue;
         }
@@ -298,7 +298,7 @@ export class NetworkComponent implements OnInit {
       // filter out non-proteins, e.g. drugs
       const proteinNodes = [];
       this.nodeData.nodes.forEach(element => {
-        if (element.id.startsWith('p') && element.netexId !== undefined) {
+        if (element.id.startsWith('p') && element.drugstoneId !== undefined) {
           proteinNodes.push(element);
         }
       });
@@ -308,11 +308,11 @@ export class NetworkComponent implements OnInit {
         // mapping from netex IDs to network IDs, TODO check if this step is necessary
         const networkIdMappping = {}
         this.nodeData.nodes.forEach(element => {
-          networkIdMappping[element.netexId] = element.id
+          networkIdMappping[element.drugstoneId] = element.id
         });
         const maxExpr = Math.max(...Object.values(this.expressionMap));
-        for (const [netexId, expressionlvl] of Object.entries(this.expressionMap)) {
-          const networkId = networkIdMappping[netexId]
+        for (const [drugstoneId, expressionlvl] of Object.entries(this.expressionMap)) {
+          const networkId = networkIdMappping[drugstoneId]
           const node = this.nodeData.nodes.get(networkId);
           if (node === null) {
             continue;
@@ -344,7 +344,7 @@ export class NetworkComponent implements OnInit {
   public hasDrugsLoaded(): boolean {
     if (this.nodeData == null || this.nodeData.nodes == null)
       return false;
-    return this.nodeData.nodes.get().filter((node: Node) => node.drugId && node.netexId.startsWith('dr')).length > 0;
+    return this.nodeData.nodes.get().filter((node: Node) => node.drugId && node.drugstoneId.startsWith('dr')).length > 0;
   }
 
   public setLegendContext() {
@@ -371,7 +371,7 @@ export class NetworkComponent implements OnInit {
     this.highlightSeeds = bool;
     const updatedNodes = [];
     for (const item of this.currentViewProteins) {
-      if (item.netexId === undefined) {
+      if (item.drugstoneId === undefined) {
         // nodes that are not mapped to backend remain untouched
         continue;
       }

src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts

@@ -39,7 +39,7 @@ export class AddExpressedProteinsComponent implements OnChanges {
   public async addProteins() {
     this.loading = true;
     const result = await this.http.post<any>(`${environment.backend}query_tissue_proteins/`,
-      {tissueId: this.selectedTissue.netexId, threshold: this.threshold}).toPromise();
+      {tissueId: this.selectedTissue.drugstoneId, threshold: this.threshold}).toPromise();
     const items = [];
     for (const detail of result) {
       items.push(getWrapperFromNode(detail));
@@ -59,7 +59,7 @@ export class AddExpressedProteinsComponent implements OnChanges {
     if (!this.currentViewProteins || this.expressionMap === undefined) {
       return;
     }
-    this.proteins = this.currentViewProteins.filter(p => this.expressionMap[p.netexId] >= threshold);
+    this.proteins = this.currentViewProteins.filter(p => this.expressionMap[p.drugstoneId] >= threshold);
   }
 
   public close() {

src/app/dialogs/launch-analysis/launch-analysis.component.ts

@@ -104,8 +104,8 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
   }
 
   public async startTask() {
-    // all nodes in selection have netexId, hence exist in the backend
-    const seeds = this.analysis.getSelection().map((item) => item.data.netexId)
+    // all nodes in selection have drugstoneId, hence exist in the backend
+    const seeds = this.analysis.getSelection().map((item) => item.data.drugstoneId)
     const seedsFiltered = seeds.filter(function (el) {
       return el != null;
     });

src/app/interfaces.ts

@@ -5,7 +5,7 @@ export interface Node {
   symbol: string;
   id: string;
   type: string;
-  netexId?: string;
+  drugstoneId?: string;
   drugId?:string;
   uniprotAc?: string;
   ensg?: Array<string>;
@@ -28,7 +28,7 @@ export interface Node {
 }
 
 export interface Tissue {
-  netexId: number;
+  drugstoneId: number;
   name: string;
 }
 
@@ -42,7 +42,7 @@ export type NetworkType = 'explorer' | 'analysis'
 export type LegendContext = 'explorer' | 'adjacentDrugs' | 'drug' | 'drugTarget' |
 'drugTargetAndSeeds' | 'drugAndSeeds' | 'adjacentDisorders' | 'adjacentDrugsAndDisorders';
 
-/// netexId to expressionlvl
+/// drugstoneId to expressionlvl
 export type NodeAttributeMap = { string: number } | {};
 
 export interface NetexInteraction {
@@ -125,21 +125,21 @@ export function getDrugNodeId(drug: Drug) {
   /**
    * Returns backend_id of Drug object
    */
-  return drug.netexId
+  return drug.drugstoneId
 }
 
 // export function getDisorderNodeId(disorder: Disorder) {
 //   /**
 //    * Returns backend_id of Drug object
 //    */
-//   return disorder.netexId
+//   return disorder.drugstoneId
 
 export function getNodeId(node: Node) {
   /**
    * Returns backend_id of Gene object
    */
-  //  if ('netexId' in node) {
-  //    return node['netexId']
+  //  if ('drugstoneId' in node) {
+  //    return node['drugstoneId']
   //  } else {
   //    return node.id
   //  }
@@ -150,7 +150,7 @@ export function getNetworkId(node: Node) {
   /**
    * Returns ID of a network node
    */
-  return node.netexId
+  return node.drugstoneId
 }
 
 export function getId(gene: Node) {
@@ -182,7 +182,7 @@ export interface Wrapper {
     label: string;
     type?: string;
     symbol?: string;
-    netexId?: string;
+    drugstoneId?: string;
     ensg?: Array<string>;
     shape?: string;
     color?: string;
@@ -215,7 +215,7 @@ export interface Drug {
   inTrial: boolean;
   inLiterature: boolean;
   trialLinks: string[];
-  netexId: string;
+  drugstoneId: string;
   group: string;
 }
 

src/app/pages/explorer-page/explorer-page.component.ts

@@ -278,7 +278,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
       if (nodeIds != null && nodeIds.length > 0) {
         const nodeId = nodeIds[0];
         const node = this.nodeData.nodes.get(nodeId);
-        if (node.netexId === undefined || !node.netexId.startsWith('p')) {
+        if (node.drugstoneId === undefined || !node.drugstoneId.startsWith('p')) {
           // skip if node is not a protein mapped to backend
           return;
         }
@@ -350,17 +350,17 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
     if (this.drugstoneConfig.config.identifier === 'ensg') {
       // remove possible duplicate IDs
-      network.nodes = removeDuplicateObjectsFromList(network.nodes, 'netexId');
+      network.nodes = removeDuplicateObjectsFromList(network.nodes, 'drugstoneId');
     }
 
     // at this point, we have nodes synched with the backend
-    // use netexIds where posssible, but use original id as node name if no label given
+    // use drugstoneIds where posssible, but use original id as node name if no label given
     const nodeIdMap = {};
     network.nodes.forEach((node) => {
       // set node label to original id before node id will be set to netex id
       node.label = node.label ? node.label : node.id;
 
-      nodeIdMap[node.id] = node.netexId ? node.netexId : node.id;
+      nodeIdMap[node.id] = node.drugstoneId ? node.drugstoneId : node.id;
       node.id = nodeIdMap[node.id];
     });
 
@@ -499,9 +499,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   }
 
   gProfilerLink(): string {
-    // nodes in selection have netexId
+    // nodes in selection have drugstoneId
     const queryString = this.analysis.getSelection()
-      .filter(wrapper => wrapper.data.netexId.startsWith('p'))
+      .filter(wrapper => wrapper.data.drugstoneId.startsWith('p'))
       .map(wrapper => wrapper.data.uniprotAc)
       .join('%0A');
     return 'http://biit.cs.ut.ee/gprofiler/gost?' +

src/app/services/netex-controller/netex-controller.service.ts

@@ -89,9 +89,9 @@ export class NetexControllerService {
      * Returns the expression in the given tissue for given nodes and cancerNodes
      */
       // slice prefix of netex id away for direct lookup in db, if node not mapped to db, replace by undefined
-    const genesBackendIds = nodes.map((node: Node) => node.netexId ? node.netexId.slice(1) : undefined);
+    const genesBackendIds = nodes.map((node: Node) => node.drugstoneId ? node.drugstoneId.slice(1) : undefined);
     const params = new HttpParams()
-      .set('tissue', tissue.netexId)
+      .set('tissue', tissue.drugstoneId)
       .set('proteins', JSON.stringify(genesBackendIds));
     return this.http.get(`${environment.backend}tissue_expression/`, {params});
   }
@@ -101,10 +101,10 @@ export class NetexControllerService {
     const params = {};
     if (nodeType === 'proteins') {
       // @ts-ignore
-      params.proteins = nodes.map((node: Node) => node.netexId && node.netexId.startsWith('p') ? node.netexId.slice(1) : undefined).filter(id => id != null);
+      params.proteins = nodes.map((node: Node) => node.drugstoneId && node.drugstoneId.startsWith('p') ? node.drugstoneId.slice(1) : undefined).filter(id => id != null);
     } else if (nodeType === 'drugs') {
       // @ts-ignore
-      params.drugs = nodes.map((node: Node) => node.drugId && node.netexId.startsWith('dr') ? node.netexId.slice(2) : undefined).filter(id => id != null);
+      params.drugs = nodes.map((node: Node) => node.drugId && node.drugstoneId.startsWith('dr') ? node.drugstoneId.slice(2) : undefined).filter(id => id != null);
     }
     return this.http.post<any>(`${environment.backend}adjacent_disorders/`, params);
   }
@@ -114,7 +114,7 @@ export class NetexControllerService {
      * Returns the expression in the given tissue for given nodes and cancerNodes
      */
       // slice prefix of netex id away for direct lookup in db, if node not mapped to db, replace by undefined
-    const genesBackendIds = nodes.map((node: Node) => node.netexId && node.netexId.startsWith('p') ? node.netexId.slice(1) : undefined).filter(id => id != null);
+    const genesBackendIds = nodes.map((node: Node) => node.drugstoneId && node.drugstoneId.startsWith('p') ? node.drugstoneId.slice(1) : undefined).filter(id => id != null);
     const params = {
       pdi_dataset: pdiDataset,
       proteins: genesBackendIds

src/index_remote_test.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Network Expander</title>
+  <base href="/">
+  <script src="https://cdn.drugst.one/latest/drugstone.js"></script>
+  <link rel="stylesheet" href="https://cdn.drugst.one/latest/styles.css">
+  <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" type="text/css" href="./stylesheets/theme.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('{"showSidebar":'+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>
+<input type="checkbox" onclick=changeConfigStr('{"showNetworkMenuButtonScreenshot":'+this.checked+'}') checked /> Show Screenshot button<br>
+<input type="checkbox" onclick=changeConfigStr('{"showNetworkMenuButtonExportGraphml":'+this.checked+'}') checked /> Show Export As Graphml Button<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>
+<button onclick=changeConfigStr('{"showSidebar":false}') > Hide sidebar</button><br>
+<button onclick=changeConfigStr('{"showSidebar":"left"}') > Mode sidebar to left</button><br>
+<button onclick=changeConfigStr('{"showSidebar":"right"}') > Move sidebr to right</button><br>
+<button onclick=changeConfigStr('{"showNetworkMenu":false}') > Hide networkMenu</button><br>
+<button onclick=changeConfigStr('{"showNetworkMenu":"left"}') > Mode networkMenu to left</button><br>
+<button onclick=changeConfigStr('{"showNetworkMenu":"right"}') > Move networkMenu to right</button><br>
+<button onclick="initTaskEventListener()">Init Task-Eventlistener</button> <br>
+
+<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) class="button is-primary" >Load TaskID</button> <br>
+
+
+<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
+
+<br>
+
+<button onclick="setNetwork('netexp1')">Add nodes</button>
+
+<div style="max-width: 80vw">
+
+  <drugst-one id="netexp1"
+                    pluginId="2"
+                    config='{"physicsOn":true, "showLeftSidebar": true, "showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#ffffff"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590"},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
+                    network='{"nodes":[{"id":"patient-1","group":"patient","x":592,"y":446},{"id":"patient-2","group":"patient","x":235,"y":87},{"id":"patient-3","group":"patient","x":105,"y":369},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316},{"id":"subtype-1","label":"Subtype 1","group":"condition","x":556,"y":171},{"id":"subtype-2","label":"Subtype 2","group":"condition","x":-87,"y":221}],"edges":[{"from":"BRCA1","to":"BRCA2","group":"ggi"},{"from":"ATM","to":"BARD1","group":"ggi"},{"from":"BRCA1","to":"CHEK2","group":"ggi"},{"from":"RAD51C","to":"RAD51D","group":"ggi"},{"from":"STK11","to":"TP53","group":"ggi"},{"from":"TP53","to":"PALB2","group":"ggi"},{"from":"TP53","to":"RAD51D","group":"ggi"},{"from":"TP53","to":"NF1","group":"ggi"},{"from":"TP53","to":"BRCA1","group":"ggi"},{"from":"TP53","to":"BRCA2","group":"ggi"},{"from":"PTEN","to":"BRCA1","group":"ggi"},{"from":"PTEN","to":"BRCA2","group":"ggi"},{"from":"TP53","to":"PTEN","group":"ggi"},{"from":"ATM","to":"PTEN","group":"ggi"},{"from":"CDH1","to":"RAD51D","group":"ggi"},{"from":"CDH1","to":"PALB2","group":"ggi"},{"from":"NBN","to":"BRIP1","group":"ggi"},{"from":"BRIP1","to":"PTEN","group":"ggi"},{"from":"patient-1","to":"BRCA1","group":"genotype"},{"from":"patient-1","to":"TP53","group":"genotype"},{"from":"patient-1","to":"BRCA2","group":"genotype"},{"from":"patient-1","to":"PTEN","group":"genotype"},{"from":"patient-2","to":"TP53","group":"genotype"},{"from":"patient-2","to":"NF1","group":"genotype"},{"from":"patient-2","to":"BARD1","group":"genotype"},{"from":"patient-3","to":"TP53","group":"genotype"},{"from":"patient-3","to":"PTEN","group":"genotype"},{"from":"patient-3","to":"NBN","group":"genotype"},{"from":"patient-1","to":"subtype-1","group":"has-condition"},{"from":"patient-2","to":"subtype-1","group":"has-condition"},{"from":"patient-3","to":"subtype-2","group":"has-condition"}]}'>
+  </drugst-one>
+</div>
+
+<!--<div >-->
+
+<!--  <network-expander id="netexp2"-->
+<!--                    pluginId="2"-->
+<!--                    config='{}' network='{"nodes":[], "edges":[]}'></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 initTaskEventListener(){
+    document.getElementsByTagName("network-expander")[0].addEventListener("taskEvent",(event)=>{console.log(event.detail)})
+  }
+
+
+  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('text-primary');
+    for(var i = 0; i < elements_text.length; i++){
+      elements_text[i].setAttribute('style', `color: ${hexacode} !important`);
+    }
+  }
+
+  function loadTaskID(token){
+    console.log("Trying to load "+token)
+    const netexp = document.getElementById('netexp1');
+    netexp.setAttribute('task-id', token);
+
+  }
+
+</script>
+</body>
+</html>