From c995bea82c122073458868846120c14a6e33dd69 Mon Sep 17 00:00:00 2001 From: AndiMajore <andi.majore@googlemail.com> Date: Fri, 21 Oct 2022 17:46:18 +0200 Subject: [PATCH] fixed rendering issues --- .../analysis-panel.component.ts | 5 +- .../components/network/network.component.ts | 11 ++-- .../launch-analysis.component.ts | 1 - src/app/network-settings.ts | 63 +++++++++++-------- .../explorer-page/explorer-page.component.ts | 35 +++-------- 5 files changed, 56 insertions(+), 59 deletions(-) diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts index 313e18f5..ca9d637f 100644 --- a/src/app/components/analysis-panel/analysis-panel.component.ts +++ b/src/app/components/analysis-panel/analysis-panel.component.ts @@ -200,7 +200,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit this.nodeData.edges = new vis.DataSet(edges); const container = this.networkHandler.activeNetwork.networkEl.nativeElement; const isBig = nodes.length > 100 || edges.length > 100; - const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.myConfig.physicsOn); + const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.myConfig); // @ts-ignore options.groups = this.drugstoneConfig.config.nodeGroups; // @ts-ignore @@ -208,7 +208,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit // @ts-ignore delete g.renderer } - console.log(options) this.drugstoneConfig.config.physicsOn = !isBig; this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options); this.networkHandler.activeNetwork.networkInternal.on('stabilizationIterationsDone', () => { @@ -321,6 +320,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit const updatedNodes = []; this.nodeData.nodes.forEach((node) => { const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false; + if (!isSeed) + return const nodeStyled = NetworkSettings.getNodeStyle( node, this.myConfig, diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts index 97766ba6..331fc3bb 100644 --- a/src/app/components/network/network.component.ts +++ b/src/app/components/network/network.component.ts @@ -107,9 +107,10 @@ export class NetworkComponent implements OnInit { updateQueryItems() { this.queryItems = []; - this.currentViewNodes.forEach((protein) => { - this.queryItems.push(getWrapperFromNode(protein)); - }); + if (this.currentViewNodes) + this.currentViewNodes.forEach((protein) => { + this.queryItems.push(getWrapperFromNode(protein)); + }); } public saveAddNodes(nodeList: Node[]) { @@ -364,7 +365,7 @@ export class NetworkComponent implements OnInit { NetworkSettings.getNodeStyle( node, this.drugstoneConfig.config, - false, + node.isSeed && this.networkHandler.activeNetwork.highlightSeeds, this.analysis.inSelection(getWrapperFromNode(node)), 1.0, this.nodeRenderer @@ -428,7 +429,7 @@ export class NetworkComponent implements OnInit { NetworkSettings.getNodeStyle( node, this.drugstoneConfig.config, - node.isSeed, + node.isSeed && this.networkHandler.activeNetwork.highlightSeeds, this.analysis.inSelection(wrapper), gradient, this.nodeRenderer)); diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.ts b/src/app/dialogs/launch-analysis/launch-analysis.component.ts index 752cdf6e..132a99d7 100644 --- a/src/app/dialogs/launch-analysis/launch-analysis.component.ts +++ b/src/app/dialogs/launch-analysis/launch-analysis.component.ts @@ -116,7 +116,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges { config: this.drugstoneConfig.config, input_network: this.networkHandler.activeNetwork.inputNetwork }; - console.log(parameters) parameters.ppi_dataset = this.drugstoneConfig.config.interactionProteinProtein; parameters.pdi_dataset = this.drugstoneConfig.config.interactionDrugProtein; parameters.licenced = this.drugstoneConfig.config.licensedDatasets; diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts index 2041d20f..01d0b927 100644 --- a/src/app/network-settings.ts +++ b/src/app/network-settings.ts @@ -60,24 +60,29 @@ export class NetworkSettings { stabilization: true }; - static getOptions(network: 'main' | 'analysis' | 'analysis-big', physicsOn) { + static getOptions(network: 'main' | 'analysis' | 'analysis-big', config) { + const physicsOn = config.physicsOn; + const groups = config.nodeGroups; if (network === 'main') { return { layout: this.mainLayout, edges: this.mainEdges, physics: physicsOn || this.mainPhysics, + groups, }; } else if (network === 'analysis') { return { layout: this.analysisLayout, edges: this.analysisEdges, physics: physicsOn || this.analysisPhysics, + groups, }; } else if (network === 'analysis-big') { return { layout: this.analysisLayout, edges: this.analysisEdges, physics: physicsOn || this.analysisBigPhysics, + groups, }; } } @@ -92,15 +97,6 @@ export class NetworkSettings { // delete possible old styles Object.keys(config.nodeGroups.default).forEach(e => delete node[e]); - // set group styles - // if (node.group === 'default') { - // node = merge(node, config.nodeGroups.default); - // } else { - // node = merge(node, config.nodeGroups[node.group]); - // if (node.label === 'F11R' || node.label === 'GNAI1') - // console.log(node) - // } - // note that seed and selected node style are applied after the node style is fetched. // this allows to overwrite only attributes of interest, therefore in e.g. seedNode group // certain attributes like shape can remain undefined @@ -109,6 +105,17 @@ export class NetworkSettings { if (node._group) // @ts-ignore node.group = node._group + // @ts-ignore + if (node._shadow) { // @ts-ignore + node.shadow = node._shadow + }else{ + if (config.nodeGroups[node.group].shadow) { + node.shadow = {enabled: config.nodeGroups[node.group].shadow} + node.shadow.color = 'rgba(0,0,0,0.5)' + } else { + node.shadow = {color: 'rgba(0,0,0,0.5)'} + } + } if (isSeed) { // apply seed node style to node // @ts-ignore @@ -121,42 +128,46 @@ export class NetworkSettings { node._group = node.group // apply selected node style to node node.group = 'selectedNode' + if (config.nodeGroups[node.group].shadow) { + node.shadow = {enabled: config.nodeGroups[node.group].shadow} + node.shadow.color = '#000000' + } else { + node.shadow = {color: '#000000'} + } } + // show image if image url is given. If seed nodes are highlighted, ignore image property if (node.image && !isSeed) { node.shape = 'image'; } - // use opactiy as gradient - // if (gradient === null) { - // node.opacity = 0 - // } else { - // node.opacity = gradient - // } + // custom ctx renderer for e.g. pie chart if (renderer !== null) { // @ts-ignore - node._shape = node.shape node.shape = 'custom'; node.color = {opacity: gradient} node.opacity = gradient + if (isSeed) { + // apply seed node style to node + // @ts-ignore + node.color = config.nodeGroups[node.group].color + }else{ + delete node.color + } // @ts-ignore + node._shadow = node.shadow if (config.nodeGroups[node.group].shadow) { node.shadow = {enabled: config.nodeGroups[node.group].shadow} - node.shadow.color = '#000000' + node.shadow.color = 'rgba(0,0,0,0.5)' } else { - node.shadow = {color: '#000000'} + node.shadow = {color: 'rgba(0,0,0,0.5)'} } node.ctxRenderer = renderer; } else { node.opacity = undefined - // @ts-ignore - if (node._shape) { - // @ts-ignore - node.shape = node._shape; - } else - delete node.shape - delete node.ctxRenderer + delete node.ctxRenderer; } + return node; } } diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index 6a521aff..cb51e27b 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -24,8 +24,8 @@ import {NetexControllerService} from 'src/app/services/netex-controller/netex-co import {removeDuplicateObjectsFromList} from '../../utils'; import * as merge from 'lodash/fp/merge'; import * as JSON5 from 'json5'; -import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service'; -import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service'; +import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service'; +import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service'; declare var vis: any; @@ -164,19 +164,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { updatedNodes.push(nodeStyled); } this.nodeData.nodes.update(updatedNodes); - } else { - const updatedNodes = []; - this.nodeData.nodes.forEach((node) => { - // const nodeSelected = this.analysis.idInSelection(node.id); - // if (node.group == 'default') { - // Object.assign(node, this.drugstoneConfig.config.nodeGroups.default); - // } else { - // Object.assign(node, this.drugstoneConfig.config.nodeGroups[node.group]); - // }; - Object.assign(node, this.drugstoneConfig.config.nodeGroups[node.group]); - - }); - this.nodeData.nodes.update(updatedNodes); } }); } @@ -261,8 +248,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { this.networkHandler.activeNetwork.selectedWrapper = null; // getNetwork synchronizes the input network with the database await this.getNetwork(); - this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes,this.networkHandler.activeNetwork.inputNetwork.edges); - + this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes, this.networkHandler.activeNetwork.inputNetwork.edges); if (this.networkHandler.activeNetwork.networkPositions) { this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions); } @@ -302,16 +288,16 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { return true }) - // @ts-ignore + // @ts-ignore if (!this.drugstoneConfig.selfReferences) { - edges = edges.filter(el => el.from !== el.to); - } + edges = edges.filter(el => el.from !== el.to); + } this.nodeData.nodes = new vis.DataSet(nodes); this.nodeData.edges = new vis.DataSet(edges); const container = this.networkHandler.activeNetwork.networkEl.nativeElement; - const options = NetworkSettings.getOptions('main', this.drugstoneConfig.config.physicsOn); + const options = NetworkSettings.getOptions('main', this.drugstoneConfig.config); this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options); @@ -410,7 +396,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { 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; - }); // adjust edge labels accordingly and filter @@ -574,14 +559,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { //TODO change to access through network service @ViewChild('analysisPanel') analysisPanel; - getNodes() :any { + getNodes(): any { if (this.selectedAnalysisToken && this.analysisPanel) return this.analysisPanel.getResultNodes() return this.networkHandler.activeNetwork.inputNetwork.nodes; } - getEdges() :any { - if(this.selectedAnalysisToken && this.analysisPanel) + getEdges(): any { + if (this.selectedAnalysisToken && this.analysisPanel) return this.analysisPanel.getResultEdges() return this.networkHandler.activeNetwork.inputNetwork.edges } -- GitLab