From cd57686739c9b748ba32ad6e87727414de83e7fa Mon Sep 17 00:00:00 2001
From: "Hartung, Michael" <michael.hartung@uni-hamburg.de>
Date: Mon, 27 Mar 2023 17:44:03 +0200
Subject: [PATCH] ibd use case as example in playground
---
.gitignore | 2 +
.../datapanel/datapanel.component.html | 2 +-
.../datapanel/datapanel.component.ts | 6 +-
.../examples/examples/examples.component.ts | 7 +-
.../examples/examples/cystic_fibrosis.json | 5 +-
.../examples/inflammatory_bowel_disease.json | 94 +++++++++++++++++++
.../playground/playground.component.html | 1 +
.../pages/playground/playground.component.ts | 15 ++-
8 files changed, 121 insertions(+), 11 deletions(-)
create mode 100644 src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json
diff --git a/.gitignore b/.gitignore
index 1a4ef22..5e34fef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,6 @@
node_modules
dist/
+.prettierrc
+
.DS_Store
\ No newline at end of file
diff --git a/src/app/components/playground/datapanel/datapanel.component.html b/src/app/components/playground/datapanel/datapanel.component.html
index 49ebc44..ae9e83f 100644
--- a/src/app/components/playground/datapanel/datapanel.component.html
+++ b/src/app/components/playground/datapanel/datapanel.component.html
@@ -34,7 +34,7 @@
<app-dropdown
[items]="diseaseExamples"
label="Examples"
- (onChange)="updateNodeImport($event)"
+ (onChange)="loadExample($event)"
tooltip="Choose genes from a list of example diseases."
></app-dropdown>
</div>
diff --git a/src/app/components/playground/datapanel/datapanel.component.ts b/src/app/components/playground/datapanel/datapanel.component.ts
index 9069c62..be38c9d 100644
--- a/src/app/components/playground/datapanel/datapanel.component.ts
+++ b/src/app/components/playground/datapanel/datapanel.component.ts
@@ -69,7 +69,11 @@ export class DatapanelComponent implements OnInit {
this.setNodesEvent.emit(this.jsonData)
}
- public updateNodeImport(genes: any) {
+ public loadExample(genes: any) {
+ this._updateNodeImport(genes);
+ }
+
+ private _updateNodeImport(genes: any) {
this.rawData = genes.join(',');
}
}
diff --git a/src/app/components/playground/examples/examples/examples.component.ts b/src/app/components/playground/examples/examples/examples.component.ts
index d1e83fb..a50cc17 100644
--- a/src/app/components/playground/examples/examples/examples.component.ts
+++ b/src/app/components/playground/examples/examples/examples.component.ts
@@ -1,7 +1,9 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { ExampleConfig } from 'src/interfaces';
// @ts-ignore
-import cystic_fibrosis_example from './examples/cystic_fibrosis.json'
+import cystic_fibrosis_example from './examples/cystic_fibrosis.json';
+// @ts-ignore
+import ibd_example from './examples/inflammatory_bowel_disease.json';
@Component({
selector: 'app-examples',
@@ -19,7 +21,8 @@ export class ExamplesComponent implements OnInit {
public drugstOneExamples: ExampleConfig[] = [
{label: 'None', value: 'none', config: {}, groups: {}, network: {}, styles: {}},
- cystic_fibrosis_example
+ cystic_fibrosis_example,
+ ibd_example
];
public changeDrugstOneExample($event: string) {
diff --git a/src/app/components/playground/examples/examples/examples/cystic_fibrosis.json b/src/app/components/playground/examples/examples/examples/cystic_fibrosis.json
index 1bef4da..00dfcce 100644
--- a/src/app/components/playground/examples/examples/examples/cystic_fibrosis.json
+++ b/src/app/components/playground/examples/examples/examples/cystic_fibrosis.json
@@ -1,11 +1,12 @@
{
- "label": "Cystic Fibrosis (from article)",
+ "label": "Cystic Fibrosis",
"value": "cystic_fibrosis",
"config": {
"activateNetworkMenuButtonAdjacentDisorders": false,
"activateNetworkMenuButtonAdjacentDrugs": false,
"activateNetworkMenuButtonAdjacentDisorderDrugs": false,
- "licensedDatasets": true
+ "licensedDatasets": true,
+ "physicsOn": true
},
"groups": {
"nodeGroups": {
diff --git a/src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json b/src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json
new file mode 100644
index 0000000..7851908
--- /dev/null
+++ b/src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json
@@ -0,0 +1,94 @@
+{
+ "label": "IBD",
+ "value": "ibd",
+ "config": {
+ "activateNetworkMenuButtonAdjacentDisorders": false,
+ "activateNetworkMenuButtonAdjacentDrugs": false,
+ "activateNetworkMenuButtonAdjacentDisorderDrugs": false,
+ "licensedDatasets": true,
+ "physicsOn": true,
+ "autofillEdges": true,
+ "interactionProteinProtein": "NeDRex",
+ "interactionDrugProtein": "NeDRex"
+ },
+ "groups": {
+ "nodeGroups": {
+ "protein": {
+ "type": "protein",
+ "color": "#00008b",
+ "font": { "color": "#f0f0f0" },
+ "groupName": "Protein",
+ "shape": "circle"
+ },
+ "foundDrug": {
+ "type": "drug",
+ "color": "#F12590",
+ "font": { "color": "#000000" },
+ "groupName": "Drug",
+ "shape": "diamond"
+ },
+ "connectorNode": {
+ "type": "protein",
+ "color": "#d29034",
+ "font": { "color": "#f0f0f0" },
+ "groupName": "Connector Proteins",
+ "shape": "circle"
+ }
+ },
+ "edgeGroups": {
+ "default": { "color": "#000000", "groupName": "default edge" }
+ }
+ },
+ "network": {
+ "nodes": [
+ { "id": "ATG16L1", "group": "protein", "label": "ATG16L1" },
+ { "id": "ICAM1", "group": "protein", "label": "ICAM1" },
+ { "id": "TNF", "group": "protein", "label": "TNF" },
+ { "id": "SFRP2", "group": "protein", "label": "SFRP2" },
+ { "id": "APC2", "group": "protein", "label": "APC2" },
+ { "id": "IL10", "group": "protein", "label": "IL10" },
+ { "id": "CUL2", "group": "protein", "label": "CUL2" },
+ { "id": "SFRP1", "group": "protein", "label": "SFRP1" },
+ { "id": "TNFSF15", "group": "protein", "label": "TNFSF15" },
+ { "id": "ITGA4", "group": "protein", "label": "ITGA4" },
+ { "id": "DEFA5", "group": "protein", "label": "DEFA5" },
+ { "id": "MUC19", "group": "protein", "label": "MUC19" },
+ { "id": "SLAMF8", "group": "protein", "label": "SLAMF8" },
+ { "id": "APC", "group": "protein", "label": "APC" },
+ { "id": "IL6", "group": "protein", "label": "IL6" },
+ { "id": "INAVA", "group": "protein", "label": "INAVA" },
+ { "id": "CARD9", "group": "protein", "label": "CARD9" },
+ { "id": "ITGB8", "group": "protein", "label": "ITGB8" },
+ { "id": "IL23R", "group": "protein", "label": "IL23R" },
+ { "id": "NOD2", "group": "protein", "label": "NOD2" },
+ { "id": "RASSF1", "group": "protein", "label": "RASSF1" },
+ { "id": "SLC11A1", "group": "protein", "label": "SLC11A1" },
+ { "id": "IL18RAP", "group": "protein", "label": "IL18RAP" },
+ { "id": "TGFB1", "group": "protein", "label": "TGFB1" },
+ { "id": "IRGM", "group": "protein", "label": "IRGM" },
+ { "id": "PLCG2", "group": "protein", "label": "PLCG2" },
+ { "id": "PTPN22", "group": "protein", "label": "PTPN22" },
+ { "id": "PTGS2", "group": "protein", "label": "PTGS2" },
+ { "id": "VNN1", "group": "protein", "label": "VNN1" },
+ { "id": "ITGAL", "group": "protein", "label": "ITGAL" }
+ ],
+ "edges": []
+ },
+ "styles": {
+ "--drgstn-primary": "#4285F4",
+ "--drgstn-secondary": "#303030",
+ "--drgstn-success": "#48C774",
+ "--drgstn-warning": "#f5f5f5",
+ "--drgstn-danger": "#ff2744",
+ "--drgstn-background": "#ffffff",
+ "--drgstn-panel": "#ededed",
+ "--drgstn-info": "#61c43d",
+ "--drgstn-text-primary": "#151515",
+ "--drgstn-text-secondary": "#ebecf0",
+ "--drgstn-border": "rgba(0, 0, 0, 0.2)",
+ "--drgstn-tooltip": "rgba(74,74,74,0.9)",
+ "--drgstn-panel-secondary": "#f5f5f5",
+ "--drgstn-height": "600px",
+ "--drgstn-font-family": "Helvetica Neue, sans-serif"
+ }
+}
diff --git a/src/app/pages/playground/playground.component.html b/src/app/pages/playground/playground.component.html
index 5873475..2bf6f5c 100644
--- a/src/app/pages/playground/playground.component.html
+++ b/src/app/pages/playground/playground.component.html
@@ -21,6 +21,7 @@
<app-examples (activateExampleEvent)="activateExamplePlayground($event)"></app-examples>
<h2>Drugst.One Plugin</h2>
<app-drugstonepanel
+ *ngIf="config && groups && network"
class="p-1"
[id]="id"
[config]="config"
diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts
index 64afc44..752abc5 100644
--- a/src/app/pages/playground/playground.component.ts
+++ b/src/app/pages/playground/playground.component.ts
@@ -174,16 +174,21 @@ export class PlaygroundComponent implements OnInit {
}
public activateExamplePlayground(example: ExampleConfig) {
- this.network.edges = [];
- this.network.nodes = [];
+ // this.network.edges = [];
+ // this.network.nodes = [];
+ this.network = undefined;
- this.groups = example.groups;
+ this.changeGroup(example.groups);
+ this.changeConfig(example.config);
+ // this.groups = example.groups;
this.changeStyle(example.styles);
+ // drugstone is removed with *ngIf until network is set
+ // start in next cycle to avoid race conditions
setTimeout(() => {
- this.config = example.config;
this.network = example.network;
- }, 500);
+ this.updateCode()
+ });
}
}
--
GitLab