default legend

src/app/analysis.service.ts

@@ -68,7 +68,7 @@ export class AnalysisService {
     if (finishedTokens) {
       this.finishedTokens = JSON.parse(finishedTokens);
     }
-    this.startWatching();
+    // this.startWatching();
 
     this.http.get<Tissue[]>(`${environment.backend}tissues/`).subscribe((tissues) => {
       this.tissues = tissues;
@@ -269,7 +269,7 @@ export class AnalysisService {
     }).toPromise();
     this.tokens.push(resp.token);
     localStorage.setItem('tokens', JSON.stringify(this.tokens));
-    this.startWatching();
+    // this.startWatching();
 
     toast({
       message: 'Quick analysis started. This may take a while.' +
@@ -304,7 +304,7 @@ export class AnalysisService {
     }).toPromise();
     this.tokens.push(resp.token);
     localStorage.setItem('tokens', JSON.stringify(this.tokens));
-    this.startWatching();
+    // this.startWatching();
   }
 
   public isLaunchingQuick(): boolean {

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {CustomProteinsComponent} from './dialogs/custom-proteins/custom-proteins
 import {AnalysisService} from './analysis.service';
 import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/add-expressed-proteins.component';
 import {createCustomElement} from '@angular/elements';
+import { NetworkLegendComponent } from './components/network-legend/network-legend.component';
 
 
 @NgModule({
@@ -36,6 +37,7 @@ import {createCustomElement} from '@angular/elements';
     InfoTileComponent,
     CustomProteinsComponent,
     AddExpressedProteinsComponent,
+    NetworkLegendComponent,
   ],
   imports: [
     BrowserModule,

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

+<div class="legend" [class.right]="this.config.legendPos === 'right'">
+
+  <!-- default legend in html -->
+  <table *ngIf="!this.config.legendUrl.length">
+    <ng-container *ngIf="this.config.showLegendNodes">
+      <tr *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue" class="list-item">
+        <td *ngIf="nodeGroup.value.shape !== 'triangle'">
+          <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
+          </span>
+        </td>
+        <td *ngIf="nodeGroup.value.shape === 'triangle'">
+          <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
+          </span>
+        </td>
+        <td>&nbsp;{{ nodeGroup.value.name }}</td>
+      </tr>
+    </ng-container>
+
+    <ng-container *ngIf="this.config.showLegendEdges">
+      <tr *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue" class="list-item">
+        <td>
+          <hr class="edge" [style.background-color]=edgeGroup.value.color >
+        </td>
+        <td>&nbsp;{{ edgeGroup.value.name }}</td>
+      </tr>
+    </ng-container>
+  </table>
+
+
+  <!-- custom legend image if url given by user -->
+  <img *ngIf="this.config.legendUrl.length" [src]="this.config.legendUrl" [ngClass]="this.config.legendClass"/>
+</div>

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

+@import "~src/variables";
+
+div.legend {
+  position: absolute;
+  bottom: $network-footer-height;
+  &.right {
+    right: 0;
+  }
+  tr.list-item{
+    padding: 0;
+    height: 40px;
+    td{
+      height: $legend-circle-size;
+      vertical-align: middle !important;
+      padding: 0 !important;
+      .round{
+        background: $legend-default-background-color;
+        border-radius: 50%;
+        width: $legend-circle-size;
+        height: $legend-circle-size;
+        display: inline-block;
+      }
+      .triangle{
+        width: 0;
+        height: 0;
+        border-left: calc(#{$legend-circle-size} / 2) solid transparent;
+        border-right: calc(#{$legend-circle-size} / 2) solid transparent;
+        border-bottom: $legend-circle-size solid black;
+        display: inline-block;
+      }
+      .rectangle{
+        background: $legend-default-background-color;
+        border-radius: $legend-rectangle-radius;
+        width: $legend-rectangle-width;
+        height: $legend-rectangle-height;
+        margin-bottom: calc((#{$legend-rectangle-height} - #{$legend-rectangle-width}) / 2);
+        display: inline-block;
+      }
+      .edge{
+        width: $legend-edge-width;
+        height: $legend-edge-height;
+      }
+    }
+
+  }
+}
+

src/app/components/network-legend/network-legend.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NetworkLegendComponent } from './network-legend.component';
+
+describe('NetworkLegendComponent', () => {
+  let component: NetworkLegendComponent;
+  let fixture: ComponentFixture<NetworkLegendComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NetworkLegendComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NetworkLegendComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, Input, OnInit} from '@angular/core';
+import {IConfig} from '../../config';
+
+@Component({
+  selector: 'app-network-legend',
+  templateUrl: './network-legend.component.html',
+  styleUrls: ['./network-legend.component.scss']
+})
+export class NetworkLegendComponent implements OnInit {
+
+  @Input() config: IConfig;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/config.ts

@@ -6,12 +6,22 @@
 //   color: string;
 // }
 
-type NodeGroup = any;
-type EdgeGroup = any;
+export interface NodeGroup {
+  name: string;
+  color: string;
+  shape: 'round' | 'triangle' | 'rectangle';
+  type: 'gene' | 'protein' | 'drug';
+}
+
+export interface EdgeGroup {
+  name: string;
+  color: string;
+}
 
 export interface IConfig {
   legendUrl: string;
   legendClass: string;
+  legendPos: 'left' | 'right';
   taskName: string;
   showLeftSidebar: boolean;
   showOverview: boolean;
@@ -22,14 +32,21 @@ export interface IConfig {
   showTasks: boolean;
   showSelection: boolean;
   showFooter: boolean;
+  showLegend: boolean;
+  showLegendNodes: boolean;
+  showLegendEdges: boolean;
   nodeGroups: { [key: string]: NodeGroup };
   edgeGroups: { [key: string]: EdgeGroup };
+
 }
 
 export const defaultConfig: IConfig = {
-  legendUrl: 'https://exbio.wzw.tum.de/covex/assets/leg1.png',
+  legendUrl: '', // 'https://exbio.wzw.tum.de/covex/assets/leg1.png' show legend image if set, otherwise default legend
   legendClass: 'legend',
+  legendPos: 'left',
   taskName: 'Run Task X',
+  showLegendNodes: true,
+  showLegendEdges: true,
   showLeftSidebar: true,
   showOverview: true,
   showQuery: true,
@@ -39,19 +56,30 @@ export const defaultConfig: IConfig = {
   showSelection: true,
   showTasks: true,
   showFooter: true,
+  showLegend: true,
   nodeGroups: {
     default: {
-      color: 'white'
+      name: 'Default Group',
+      color: 'yellow',
+      shape: 'triangle',
+      type: 'gene',
     },
     protein: {
-      color: 'red'
+      name: 'Resulting Proteins',
+      color: 'red',
+      shape: 'round',
+      type: 'protein',
     },
     drug: {
-      color: 'green'
+      name: 'Possible Drugs',
+      color: 'green',
+      shape: 'rectangle',
+      type: 'drug',
     }
   },
   edgeGroups: {
     default: {
+      name: 'Edgy edges',
       color: 'black'
     }
   },

src/app/pages/explorer-page/explorer-page.component.ts

@@ -10,14 +10,14 @@ import {
   Node,
   Wrapper,
   getWrapperFromProtein,
-  Tissue, getNodeIdsFromI
+  Tissue
 } from '../../interfaces';
 import {ProteinNetwork} from '../../main-network';
 import {HttpClient} from '@angular/common/http';
 import {AnalysisService} from '../../analysis.service';
 import html2canvas from 'html2canvas';
 import {NetworkSettings} from '../../network-settings';
-import {defaultConfig, IConfig} from '../../config';
+import {defaultConfig, EdgeGroup, IConfig, NodeGroup} from '../../config';
 
 
 declare var vis: any;
@@ -288,6 +288,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     });
   }
 
+  public setConfigEdgeGroup(key: string, values: EdgeGroup) {
+    // make sure all keys are set
+
+    this.myConfig[key] = {...this.myConfig[key], ...values};
+  }
+
   private mapCustomNode(customNode: Node): any {
     let group = customNode.group;
     if (typeof group === 'undefined' || typeof this.myConfig.nodeGroups[group] === 'undefined') {

src/index.html

@@ -18,19 +18,35 @@
 <input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
 <input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
 <input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show sidebar<br>
+<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
+<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br>
+<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
+<input type="checkbox" onclick=changeConfigStr('{"showTasks":'+this.checked+'}') checked /> Show Tasks<br>
+<input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
+<input type="checkbox" onclick=changeConfigStr('{"showFooter":'+this.checked+'}') checked /> Show Footer<br>
+<input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
+<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
 
 <br>
 
 <button onclick="setNetwork('netexp1')">Add proteins</button>
 
+
+<!--  "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png",-->
 <div>
-  <network-expander id="netexp1" config='{"showQuery": false, "nodeGroups": {"default": {"color": "grey"}}, "edgeGroups":{"default": {"color": "grey"}, "custom": {"color": "red"}}}' onload="init1()" style="height: 100vh"></network-expander>
+  <network-expander id="netexp1" config='{
+  "showQuery": false,
+  "legendPos": "right",
+  "nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"}},
+  "edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}
+  }' onload="init1()" style="height: 100vh"></network-expander>
 </div>
 
 <!--
-<div>                                                                                                                                                                                                                                                                                  <div style="border: 3px solid red">
+<div>                                                                                                                                                                                                                                                                        <div style="border: 3px solid red">
   <network-expander id="netexp2" config='{"legendUrl": "https://i.pinimg.com/originals/ff/72/80/ff72801189f650f11672915cda0f1bdf.png", "legendClass": "my-legend-2"}'></network-expander>
 </div>
+
 -->
 
 <script>

src/styles.scss

@@ -16,7 +16,7 @@ $info: $primary;
 @import "~primeng/resources/primeng.min.css";
 @import "~primeicons/primeicons.css";
 
-$height: '1000px';
+@import "variables";
 
 nav.navbar {
   height: 60px;
@@ -36,10 +36,6 @@ span.icon {
   margin-right: 5px;
 }
 
-img {
-  margin: 10px;
-}
-
 img.inline {
   height: 30px;
   align: middle;
@@ -107,11 +103,11 @@ div.covex.network {
 
 div.card.network {
   width: 100%;
-  height: calc(100% - 75px);
+  height: calc(100% - #{$network-footer-height});
 }
 
 div.network {
-  height: calc(#{$height} - 200px);
+  height: calc(#{$height} - #{$network-footer-height} - #{$navbar-height} - 48px);
 }
 
 div.parent {
@@ -122,12 +118,6 @@ div.image1 {
   position: relative;
 }
 
-img.image2 {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-}
-
 div.center {
   display: flex;
   align-items: center;
@@ -136,7 +126,7 @@ div.center {
 
 
 div.covex.explorer {
-  height: calc(#{$height} - 70px);
+  height: calc(#{$height} - #{$navbar-height});
   margin-left: 10px;
   margin-right: 10px;
 }
@@ -221,3 +211,5 @@ body {
 .mb-3 {
   margin-bottom: 10px;
 }
+
+

src/variables.scss

+$sidebar-width: 38vw;
+$sidebar-width-max: 665px;
+$navbar-height: 80px;
+$row-data-selector-height: auto;
+$network-footer-height: 75px;
+
+$legend-default-background-color: #143d1f;
+$legend-circle-size: 35px;
+$legend-rectangle-height: 25px;
+$legend-rectangle-width: 35px;
+$legend-rectangle-radius: 5px;
+$legend-edge-width: 20px;
+$legend-edge-height: 3px;
+
+$height: 1000px;