diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html index 50881477dc63319433dd796d2a561af899f89cf4..0b5e16987e5434758153d2506b52955a9ccf81ba 100644 --- a/src/app/components/info-tile/info-tile.component.html +++ b/src/app/components/info-tile/info-tile.component.html @@ -40,7 +40,7 @@ </div> <app-toggle - *ngIf="wrapper.type !== 'drug'" + *ngIf="wrapper.data.netexId && wrapper.data.netexId.startsWith('p')" [value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle" (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Selected" textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle> diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts index bed1808d32a7c035107bb80f86be321c73644f40..9f75b4566bff9a9327de2bcf7272ef65dae148ba 100644 --- a/src/app/interfaces.ts +++ b/src/app/interfaces.ts @@ -26,11 +26,13 @@ export interface NodeInteraction { from: string; to: string; group?: string; + label?: string; } export interface NetworkEdge { from: string; to: string; + label: string; } export interface Task { diff --git a/src/app/main-network.ts b/src/app/main-network.ts index b0d1dcc6b54c58e528e375a17472b651f08c8c2d..d82c6348fb9821a1e58cd5a83ba562ba7a9293f3 100644 --- a/src/app/main-network.ts +++ b/src/app/main-network.ts @@ -51,12 +51,13 @@ export class ProteinNetwork { if (typeof group === 'undefined' || typeof config.nodeGroups[group] === 'undefined') { group = 'default'; } + console.log(config.nodeGroups[group]) let node = JSON.parse(JSON.stringify(config.nodeGroups[group])); // update the node with custom node properties, including values fetched from backend node = { - ... node, - ... customNode + ...node, + ...customNode } // label is only used for network visualization @@ -80,13 +81,23 @@ export class ProteinNetwork { if (typeof group === 'undefined' || typeof config.edgeGroups[group] === 'undefined') { group = 'default'; } - const edge = JSON.parse(JSON.stringify(config.edgeGroups[group])); - edge.from = customEdge.from; - edge.to = customEdge.to; + let edge = JSON.parse(JSON.stringify(config.edgeGroups[group])); + console.log("edge") + + console.log(edge) + + console.log("customEdge") + console.log(customEdge) + + + edge = { + ...edge, + ...customEdge + } return edge; } - public mapDataToNodes(config: IConfig): { nodes: any[], edges: any[]; } { + public mapDataToNetworkInput(config: IConfig): { nodes: any[], edges: any[]; } { const nodes = []; const edges = []; diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index 769115d8fe638ab31f844ce6d08d290af50eb357..b8077ce5a03a0488477161219f0947250963ccef 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -273,7 +273,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { this.proteinData = new ProteinNetwork(this.proteins, this.edges); this.proteinData.linkNodes(); - const {nodes, edges} = this.proteinData.mapDataToNodes(this.myConfig); + const {nodes, edges} = this.proteinData.mapDataToNetworkInput(this.myConfig); this.nodeData.nodes = new vis.DataSet(nodes); this.nodeData.edges = new vis.DataSet(edges); @@ -286,6 +286,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { const nodeId = nodeIds[0]; const node = this.nodeData.nodes.get(nodeId); const wrapper = getWrapperFromNode(node); + if (wrapper.data.netexId === undefined || !wrapper.data.netexId.startsWith('p')) { + // skip if node is not a protein mapped to backend + return + } if (this.analysis.inSelection(node)) { this.analysis.removeItems([wrapper]); } else { diff --git a/src/index.html b/src/index.html index 5b34b758f39df3c6fc7e424f835198d9d784d980..9a425110c4f518144c215206b6ab486a6f522c29 100644 --- a/src/index.html +++ b/src/index.html @@ -38,13 +38,22 @@ <network-expander id="netexp1" config='{ - "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patient_group": {"type": "patient", "color": "red", "groupName": "patient group", "shape": "circle"}}, - "edgeGroups": {"dashes": {"color": "black", "groupName": "Dashes Group", "dashes": [1, 2]}}, - "identifier": "symbol" + "nodeGroups":{ + "0.5":{"type":"gene","color":"#CCFF33FF","groupName":"0.5","shape":"circle"}, + "1.5":{"type":"gene","color":"#66FF33FF","groupName":"1.5","shape":"circle"}, + "2.0":{"type":"gene","color":"#33CC33FF","groupName":"2.0","shape":"circle"}, + "patient_group":{"type":"gene","color":"#FF0000FF","groupName":"-2.0","shape":"circle"} + }, + "edgeGroups":{ + "custom":{"color":"black","groupName":"Custom Group"} + }, + "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": [{"from": "TP53","to": "C5","group": "dashes"}] + "nodes":[{"id":"TP53","group":"0.5"},{"id":"C5","group":"0.5"},{"id":"Patient","group":"patient_group"},{"label":"PTEN","id":"PTEN","group":0.5}], + "edges":[] }' style="height: 100%; width: 100vw; display: block;" ></network-expander>