diff --git a/src/app/config.ts b/src/app/config.ts index efa5056de1ca3f4f0e0f31486692bb411090494b..b284320c5490c8962a1166aecedac58e57ac7311 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -17,6 +17,8 @@ export interface NodeGroup { export interface EdgeGroup { name: string; color: string; + // see https://visjs.github.io/vis-network/docs/network/edges.html + dashes?: false | Array<number>; } export type Identifier = 'symbol'|'uniprot'|'ensg'; diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index 81f1d9038cb342bfc1ce10a49afd2e1a1c627269..5cba20c5613ba3d6fcd8312e70e6f05f098468cc 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -51,12 +51,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { const configObj = JSON.parse(config); for (const key of Object.keys(configObj)) { - if (key === 'nodeGroups' || key === 'edgeGroups') { - this.myConfig[key] = {...this.myConfig[key], ...configObj[key]}; - continue; - } else if (key === 'interactions') { + if (key === 'nodeGroups' ) { + this.setConfigNodeGroup(key, configObj[key]); + } else if (key === 'edgeGroups') { + this.setConfigEdgeGroup(key, configObj[key]) + } + else if (key === 'interactions') { this.getInteractions(); - continue; } else if (key === 'showLeftSidebar') { if (configObj[key]) { // shrink main column @@ -74,7 +75,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { document.getElementById('main-column').classList.add('rightgone'); } } - console.log(key) this.myConfig[key] = configObj[key]; } } @@ -342,12 +342,33 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { }); } - public setConfigEdgeGroup(key: string, values: EdgeGroup) { - // make sure all keys are set - + /** + * Function to set the node group attribute in config + * Handles setting defaults + * @param key + * @param values + */ + public setConfigNodeGroup(key: string, values: Array<NodeGroup>) { this.myConfig[key] = {...this.myConfig[key], ...values}; } + /** + * Function to set the edge group attribute in config + * Handles setting defaults + * @param key + * @param values + */ + public setConfigEdgeGroup(key: string, edgeGroups: Array<EdgeGroup>) { + // make sure all keys are set + Object.entries(edgeGroups).forEach(([key, value]) => { + if (!('dashes' in value)) { + // dashes defaults to 'false' if not set + value['dashes'] = false; + } + }) + this.myConfig[key] = {...this.myConfig[key], ...edgeGroups}; + } + public toCanvas() { html2canvas(this.networkEl.nativeElement).then((canvas) => { const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); diff --git a/src/index.html b/src/index.html index 15df6aafbe35e3361391d8cf039524079863257b..70da15eb8d66c0d4b6108cd6b5f480afc44d82ce 100644 --- a/src/index.html +++ b/src/index.html @@ -39,13 +39,13 @@ <network-expander id="netexp1" config='{ "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "patient_group": {"type": "patient", "color": "red", "name": "patient group", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}}, - "edgeGroups": {"custom": {"color": "black", "name": "Custom Group"}}, + "edgeGroups": {"dashes": {"color": "black", "name": "Custom Group", "dashes": [1, 2]}}, "identifier": "symbol", "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png" }' network='{ "nodes": [{"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}], - "edges": [] + "edges": [{"from": "TP53","to": "C5","group": "dashes"}] }' style="height: 100%; width: 100vw; display: block;" ></network-expander>