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 23d414745c825e83552781b7460449f6c045427f..356cb1826846832cf03c2ce05cd98c519b7b08bc 100644
--- a/src/app/components/network/network-legend/network-legend.component.html
+++ b/src/app/components/network/network-legend/network-legend.component.html
@@ -1,7 +1,7 @@
<div
class="legend"
[class.right]="config.legendPos === 'right'"
- [ngClass]="{ 'legend-small': drugstoneConfig.smallStyle }"
+ [ngClass]="{ 'legend-small': drugstoneConfig.smallStyle, 'expression': networkHandler.activeNetwork.currentViewSelectedTissue }"
>
<div class="legend-background" *ngIf="!config.legendUrl.length"></div>
<!-- default legend in html -->
@@ -12,90 +12,105 @@
class="list-item"
*ngIf="nodeGroup.key && checkNodeGroupContext(nodeGroup.key)"
>
- <ng-container *ngIf="nodeGroup.value.image">
- <!-- group icon given, use icon in legend -->
+ <!-- special legend for node types concerned by expression -->
+ <ng-container *ngIf="networkHandler.activeNetwork.nodeGroupsWithExpression.has(nodeGroup.key)">
<th>
- <img [src]="nodeGroup.value.image" class="legend-icon" />
- </th>
- <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
- </ng-container>
-
- <ng-container
- *ngIf="!nodeGroup.value.image"
- [ngSwitch]="nodeGroup.value.shape"
- >
- <!-- no image given, create icon programmatically -->
- <th *ngSwitchCase="'text'">
- <span class="node text"> text </span>
- </th>
- <th *ngSwitchCase="'hexagon'">
- <span
- class="node hexagon"
- [style.color]="nodeGroup.value.color.background"
- >
- ⬣
- </span>
- </th>
- <th *ngSwitchCase="'triangle'">
- <span
- class="node triangle"
- [style.border-bottom-color]="nodeGroup.value.color.background"
- >
- </span>
- </th>
- <th *ngSwitchCase="'triangleDown'">
- <span
- class="node triangleDown"
- [style.border-top-color]="nodeGroup.value.color.background"
- >
- </span>
- </th>
- <th *ngSwitchCase="'diamond'">
<span
- class="node diamond"
+ class="node dot expression-style"
[style.background-color]="nodeGroup.value.color.background"
>
</span>
</th>
- <th *ngSwitchCase="'star'">
- <span
- class="node star"
- [style.border-bottom-color]="nodeGroup.value.color.background"
- [style.color]="nodeGroup.value.color.background"
- >
- </span>
- </th>
- <th *ngSwitchCase="'circle'">
- <span
- class="node circle"
- [style.background-color]="nodeGroup.value.color.background"
- [style.color]="nodeGroup.value.font.color"
- >
- <span style="padding-top: 1px">
- ...
- </span>
- </span>
- </th>
- <th *ngSwitchCase="'ellipse'">
- <span
- class="node ellipse"
- [style.background-color]="nodeGroup.value.color.background"
- >
- </span>
- </th>
- <th *ngSwitchDefault>
- <span
- class="node {{ nodeGroup.value.shape }}"
- [style.background-color]="nodeGroup.value.color.background"
- >
- </span>
- </th>
- <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
+ <td class="group-name"> {{ nodeGroup.value.groupName }} (exprs)</td>
+ </ng-container>
+
+ <!-- normal legend without expression -->
+ <ng-container *ngIf="!networkHandler.activeNetwork.nodeGroupsWithExpression.has(nodeGroup.key)">
+ <ng-container *ngIf="nodeGroup.value.image">
+ <!-- group icon given, use icon in legend -->
+ <th>
+ <img [src]="nodeGroup.value.image" class="legend-icon" />
+ </th>
+ <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
+ </ng-container>
+
+ <ng-container
+ *ngIf="!nodeGroup.value.image"
+ [ngSwitch]="nodeGroup.value.shape"
+ >
+ <!-- no image given, create icon programmatically -->
+ <th *ngSwitchCase="'text'">
+ <span class="node text"> text </span>
+ </th>
+ <th *ngSwitchCase="'hexagon'">
+ <span
+ class="node hexagon"
+ [style.color]="nodeGroup.value.color.background"
+ >
+ ⬣
+ </span>
+ </th>
+ <th *ngSwitchCase="'triangle'">
+ <span
+ class="node triangle"
+ [style.border-bottom-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'triangleDown'">
+ <span
+ class="node triangleDown"
+ [style.border-top-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'diamond'">
+ <span
+ class="node diamond"
+ [style.background-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'star'">
+ <span
+ class="node star"
+ [style.border-bottom-color]="nodeGroup.value.color.background"
+ [style.color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'circle'">
+ <span
+ class="node circle"
+ [style.background-color]="nodeGroup.value.color.background"
+ [style.color]="nodeGroup.value.font.color"
+ >
+ <span style="padding-top: 1px">
+ ...
+ </span>
+ </span>
+ </th>
+ <th *ngSwitchCase="'ellipse'">
+ <span
+ class="node ellipse"
+ [style.background-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchDefault>
+ <span
+ class="node {{ nodeGroup.value.shape }}"
+ [style.background-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
+ </ng-container>
</ng-container>
</tr>
</ng-container>
</ng-container>
-
+
<ng-container *ngIf="config.showLegendEdges && !_emptyEdgeConfig">
<tr
*ngFor="let edgeGroup of config.edgeGroups | keyvalue"
diff --git a/src/app/components/network/network-legend/network-legend.component.scss b/src/app/components/network/network-legend/network-legend.component.scss
index acd385d9e4ee6ce0d1b29e81807276c42a0101f9..6b095e055153bfb988a9c964fb70c0d0e0f9ccb6 100644
--- a/src/app/components/network/network-legend/network-legend.component.scss
+++ b/src/app/components/network/network-legend/network-legend.component.scss
@@ -85,13 +85,20 @@ div.legend {
border-radius: 50%;
display: inline-block;
}
- .dot {
+ .dot:not(.expression-style) {
background: $legend-default-background-color;
border-radius: 50%;
width: $legend-circle-size;
height: $legend-circle-size;
display: inline-block;
}
+ .dot.expression-style {
+ background: conic-gradient(rgba(255, 255, 255, .6) 0.00% 25.00%, rgba(255, 255, 255, .0) 25.00% 40.00%, rgba(255, 255, 255, .6) 40.00%);
+ border-radius: 50%;
+ width: $legend-circle-size;
+ height: $legend-circle-size;
+ display: inline-block;
+ }
.circle {
background: $legend-default-background-color;
border-radius: 50%;
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 7fc7c10b4401e87e6c924c6055d88c0acf8622b8..7db97954f5b657540dcefd913dfb105f0574eb92 100644
--- a/src/app/components/network/network-legend/network-legend.component.ts
+++ b/src/app/components/network/network-legend/network-legend.component.ts
@@ -3,6 +3,7 @@ import { LegendContext } from 'src/app/interfaces';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
import {IConfig} from '../../../config';
import {LegendService} from "src/app/services/legend-service/legend-service.service";
+import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
@Component({
selector: 'app-network-legend',
@@ -46,7 +47,7 @@ export class NetworkLegendComponent implements OnInit {
return Object.keys(this.config.edgeGroups).some(key => this.checkEdgeGroupContext(key));
}
- constructor(public drugstoneConfig: DrugstoneConfigService, public legendService: LegendService) { }
+ constructor(public drugstoneConfig: DrugstoneConfigService, public legendService: LegendService, public networkHandler: NetworkHandlerService) { }
ngOnInit(): void {
}
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index cdcee9ae5ff828862459bb395868f63a316c76c4..afed865d1b04cc43ef199c7afff18066d3878622 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -85,6 +85,8 @@ export class NetworkComponent implements OnInit {
public loading = false;
+ public nodeGroupsWithExpression: Set<string> = new Set();
+
constructor(
public legendService: LegendService,
public networkHandler: NetworkHandlerService,
@@ -448,6 +450,7 @@ export class NetworkComponent implements OnInit {
public selectTissue(tissue: Tissue | null) {
this.loadingScreen.stateUpdate(true);
+ this.nodeGroupsWithExpression = new Set();
this.expressionExpanded = false;
if (!tissue) {
// delete expression values
@@ -516,6 +519,7 @@ export class NetworkComponent implements OnInit {
const networkIdMapping = {};
this.nodeData.nodes.get().forEach(element => {
if (element.drugstoneType === 'protein') {
+ this.nodeGroupsWithExpression.add(element.group);
element.drugstoneId.forEach(id => {
if (networkIdMapping[id]) {
networkIdMapping[id].push(element.id);
diff --git a/src/index.html b/src/index.html
index 3180b42ff030a13587aac4ca6aa5ebf41632d328..dc08e199a74dd9cde978e8917dbbad5f01599de7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -113,9 +113,9 @@ menu<br>
<div style="max-width: 80vw; width: 1276px; height: 500px">
<drugst-one id="netexp1"
- config="{'activateNetworkMenuButtonAdjacentDisorders':false,'activateNetworkMenuButtonAdjacentDrugs':true, 'activateNetworkMenuButtonAdjacentDisordersDrugs': true, 'licensedDatasets':true}"
+ config="{'activateNetworkMenuButtonAdjacentDisorders':false,'activateNetworkMenuButtonAdjacentDrugs':false, 'activateNetworkMenuButtonAdjacentDisordersDrugs': false, 'licensedDatasets':true}"
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"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"default":{"color":"#000000","groupName":"default edge"}}}'
- network='{"nodes":[{"id":"CFTR","group":"gene","label":"CFTR"},{"id":"TGFB1","group":"gene","label":"TGFB1"},{"id":"TNFRSF1A","group":"gene","label":"TNFRSF1A"},{"id":"FCGR2A","group":"gene","label":"FCGR2A"},{"id":"ENG","group":"gene","label":"ENG"},{"id":"DCTN4","group":"gene","label":"DCTN4"},{"id":"CLCA4","group":"gene","label":"CLCA4"},{"id":"STX1A","group":"gene","label":"STX1A"},{"id":"SCNN1G","group":"gene","label":"SCNN1G"},{"id":"SCNN1A","group":"gene","label":"SCNN1A"},{"id":"SCNN1B","group":"gene","label":"SCNN1B"}],"edges":[{"from":"DCTN4","to":"CFTR"},{"from":"STX1A","to":"SCNN1B","group":"default"},{"from":"SCNN1A","to":"SCNN1G","group":"default"},{"from":"SCNN1B","to":"SCNN1G","group":"default"}]}'>
+ network='{"nodes":[{"id":"CFTR","group":"important","label":"CFTR"},{"id":"TGFB1","group":"gene","label":"TGFB1"},{"id":"TNFRSF1A","group":"gene","label":"TNFRSF1A"},{"id":"FCGR2A","group":"gene","label":"FCGR2A"},{"id":"ENG","group":"gene","label":"ENG"},{"id":"DCTN4","group":"gene","label":"DCTN4"},{"id":"CLCA4","group":"gene","label":"CLCA4"},{"id":"STX1A","group":"gene","label":"STX1A"},{"id":"SCNN1G","group":"gene","label":"SCNN1G"},{"id":"SCNN1A","group":"gene","label":"SCNN1A"},{"id":"SCNN1B","group":"gene","label":"SCNN1B"}],"edges":[{"from":"DCTN4","to":"CFTR"},{"from":"STX1A","to":"SCNN1B","group":"default"},{"from":"SCNN1A","to":"SCNN1G","group":"default"},{"from":"SCNN1B","to":"SCNN1G","group":"default"}]}'>
></drugst-one>
<!-- <drugst-one id="netexp1"-->