From e03acd2ff2d4a493099837487ce60aa551e57851 Mon Sep 17 00:00:00 2001
From: "Hartung, Michael" <michael.hartung@uni-hamburg.de>
Date: Tue, 23 Aug 2022 14:56:12 +0200
Subject: [PATCH] bugfix: hide unnecessary legend border when no edge groups
are supplied by the user
---
.../network-legend.component.html | 18 +++++++++---------
.../network-legend/network-legend.component.ts | 15 ++++++++++++---
src/index.html | 2 +-
3 files changed, 22 insertions(+), 13 deletions(-)
diff --git a/src/app/components/network/network-legend/network-legend.component.html b/src/app/components/network/network-legend/network-legend.component.html
index 9958f3dd..c758036e 100644
--- a/src/app/components/network/network-legend/network-legend.component.html
+++ b/src/app/components/network/network-legend/network-legend.component.html
@@ -1,13 +1,13 @@
<div
class="legend"
- [class.right]="this.config.legendPos === 'right'"
+ [class.right]="config.legendPos === 'right'"
[ngClass]="{ 'legend-small': drugstoneConfig.smallStyle }"
>
<div class="legend-background"></div>
<!-- default legend in html -->
- <table *ngIf="!this.config.legendUrl.length" class="legend-table">
- <ng-container *ngIf="this.config.showLegendNodes">
- <ng-container *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue">
+ <table *ngIf="!config.legendUrl.length" class="legend-table">
+ <ng-container *ngIf="config.showLegendNodes">
+ <ng-container *ngFor="let nodeGroup of config.nodeGroups | keyvalue">
<tr
class="list-item"
*ngIf="nodeGroup.key && checkNodeGroupContext(nodeGroup.key)"
@@ -86,9 +86,9 @@
</ng-container>
</ng-container>
- <ng-container *ngIf="this.config.showLegendEdges">
+ <ng-container *ngIf="config.showLegendEdges && _emptyEdgeConfig">
<tr
- *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue"
+ *ngFor="let edgeGroup of config.edgeGroups | keyvalue"
class="list-item"
>
<ng-container
@@ -114,8 +114,8 @@
<!-- custom legend image if url given by user -->
<img
- *ngIf="this.config.legendUrl.length"
- [src]="this.config.legendUrl"
- [ngClass]="this.config.legendClass"
+ *ngIf="config.legendUrl.length"
+ [src]="config.legendUrl"
+ [ngClass]="config.legendClass"
/>
</div>
diff --git a/src/app/components/network/network-legend/network-legend.component.ts b/src/app/components/network/network-legend/network-legend.component.ts
index 8c8c89b5..faa8c53f 100644
--- a/src/app/components/network/network-legend/network-legend.component.ts
+++ b/src/app/components/network/network-legend/network-legend.component.ts
@@ -10,7 +10,12 @@ import {IConfig} from '../../../config';
})
export class NetworkLegendComponent implements OnInit {
- @Input() context: LegendContext;
+ _context = 'explorer';
+ _emptyEdgeConfig = false;
+ @Input() set context (value: LegendContext) {
+ this._context = value;
+ this._emptyEdgeConfig = this.checkIfEdgeConfigEmpty();
+ };
@Input() config: IConfig;
private contextNodeGroupsToDelete = {
@@ -40,11 +45,15 @@ export class NetworkLegendComponent implements OnInit {
// selected node is not supposed to appear in legend
return false;
}
- return !this.contextNodeGroupsToDelete[this.context].includes(nodeGroupKey);
+ return !this.contextNodeGroupsToDelete[this._context].includes(nodeGroupKey);
}
public checkEdgeGroupContext(edgeGroupKey) {
- return !this.contextEdgeGroupsToDelete[this.context].includes(edgeGroupKey);
+ return !this.contextEdgeGroupsToDelete[this._context].includes(edgeGroupKey);
+ }
+
+ public checkIfEdgeConfigEmpty() {
+ return Object.keys(this.config.edgeGroups).some(key => this.checkEdgeGroupContext(key));
}
constructor(public drugstoneConfig: DrugstoneConfigService) { }
diff --git a/src/index.html b/src/index.html
index 0831745e..d2552a76 100644
--- a/src/index.html
+++ b/src/index.html
@@ -92,7 +92,7 @@
<drugst-one id="netexp1"
pluginId="2"
- groups='{"nodeGroups":{"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle"}}}'
+ groups='{"edgeGroups":{"genotype":{"color":"#000000","groupName":"Relevant Gene"}},"nodeGroups":{"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle"}}}'
config='{"showSimpleAnalysis": true, "licensedDatasets": false, "physicsOn":false,"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"showLegend":true}'
network='{"nodes":[{"id":"FOXP3","label":"FOXP3","group":"gene"},{"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}]}'
>
--
GitLab