From cbde29ac1584c91b0d9add1eaafa44e42682bf77 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Thu, 23 Jun 2022 17:36:49 +0200
Subject: [PATCH] updated netexId fields to drugstoneId
---
.../analysis-panel.component.ts | 38 ++---
.../info-tile/info-tile.component.html | 2 +-
.../network-menu-left.component.html | 4 +-
.../network-menu/network-menu.component.html | 4 +-
.../components/network/network.component.ts | 22 +--
.../add-expressed-proteins.component.ts | 4 +-
.../launch-analysis.component.ts | 4 +-
src/app/interfaces.ts | 20 +--
.../explorer-page/explorer-page.component.ts | 12 +-
.../netex-controller.service.ts | 10 +-
src/index_remote_test.html | 146 ++++++++++++++++++
11 files changed, 206 insertions(+), 60 deletions(-)
create mode 100644 src/index_remote_test.html
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 7bc6f282..e1a7838e 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/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);
diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html
index 744580ef..dc8f22f3 100644
--- a/src/app/components/info-tile/info-tile.component.html
+++ b/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])
diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.html b/src/app/components/network/network-menu-left/network-menu-left.component.html
index 8dcfff7f..3793a2ba 100644
--- a/src/app/components/network/network-menu-left/network-menu-left.component.html
+++ b/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"
>
diff --git a/src/app/components/network/network-menu/network-menu.component.html b/src/app/components/network/network-menu/network-menu.component.html
index 5a9b5a1f..a3785d3f 100644
--- a/src/app/components/network/network-menu/network-menu.component.html
+++ b/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"
>
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index 40127ca8..9f327970 100644
--- a/src/app/components/network/network.component.ts
+++ b/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() {
@@ -365,13 +365,13 @@ export class NetworkComponent implements OnInit {
/**
* To highlight the seeds in the analysis network, not used in the browser network
- * @param bool
+ * @param bool
*/
public updateHighlightSeeds(bool: boolean) {
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;
}
diff --git a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts
index 634873da..c1e8a59c 100644
--- a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts
+++ b/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() {
diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.ts b/src/app/dialogs/launch-analysis/launch-analysis.component.ts
index 38ef3ecd..bf4637eb 100644
--- a/src/app/dialogs/launch-analysis/launch-analysis.component.ts
+++ b/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;
});
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index d84da4c1..59daa8bf 100644
--- a/src/app/interfaces.ts
+++ b/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;
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index a76ec4ad..b9b4d04f 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/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?' +
diff --git a/src/app/services/netex-controller/netex-controller.service.ts b/src/app/services/netex-controller/netex-controller.service.ts
index baa8a588..bce39cb1 100644
--- a/src/app/services/netex-controller/netex-controller.service.ts
+++ b/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
diff --git a/src/index_remote_test.html b/src/index_remote_test.html
new file mode 100644
index 00000000..5904613f
--- /dev/null
+++ b/src/index_remote_test.html
@@ -0,0 +1,146 @@
+<!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>
--
GitLab