expression style in legend

src/app/components/network/network-legend/network-legend.component.html

 <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,6 +12,20 @@
           class="list-item"
           *ngIf="nodeGroup.key && checkNodeGroupContext(nodeGroup.key)"
         >
+          <!-- special legend for node types concerned by expression -->
+          <ng-container *ngIf="networkHandler.activeNetwork.nodeGroupsWithExpression.has(nodeGroup.key)">
+            <th>
+              <span
+                class="node dot expression-style"
+                [style.background-color]="nodeGroup.value.color.background"
+              >
+              </span>
+            </th>
+            <td class="group-name">&nbsp;{{ 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>
@@ -92,6 +106,7 @@
               </th>
               <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
             </ng-container>
+          </ng-container>
         </tr>
       </ng-container>
     </ng-container>

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%;

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 {
   }

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);

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"-->