Add configuration capabilities

d95b2ecf · Julian Matschinske · 496f5a25 · d95b2ecf · d95b2ecf · d95b2ecf
Commit d95b2ecf authored 4 years ago by Julian Matschinske
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -57,4 +57,6 @@ export class AppModule {
    customElements.define('network-expander', NetworkExpander);
  }

+  ngDoBootstrap() {}
+
 }
--- a/src/app/config.ts
+++ b/src/app/config.ts
+export interface IConfig {
+  legendUrl: string;
+  legendClass: string;
+}
+
+export const defaultConfig: IConfig = {
+  legendUrl: 'https://exbio.wzw.tum.de/covex/assets/leg1.png',
+  legendClass: 'legend',
+};
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -137,9 +137,7 @@
                <div class="network center image1" #network>
                  <button class="button is-loading center" alt="loading...">Loading</button>
                </div>
-                <div class="image2">
-                  <img src="assets/leg1.png" width="180px"/>
-                </div>
+                <img class="image2" [src]="myConfig.legendUrl" [ngClass]="myConfig.legendClass"/>
              </div>
            </div>


--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -24,6 +24,7 @@ import {AnalysisService} from '../../analysis.service';
 import html2canvas from 'html2canvas';
 import {environment} from '../../../environments/environment';
 import {NetworkSettings} from '../../network-settings';
+import {defaultConfig, IConfig} from "../../config";


 declare var vis: any;
@@ -37,6 +38,24 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {

  private networkJSON = '{"nodes": [], "edges": []}';

+  public myConfig: IConfig = defaultConfig;
+
+  @Input()
+  public onload: undefined | string;
+
+  @Input()
+  public set config(config: string | undefined) {
+    if (typeof config === 'undefined') {
+      return;
+    }
+
+    const configObj = JSON.parse(config);
+    this.myConfig = JSON.parse(JSON.stringify(defaultConfig));
+    for (const key of Object.keys(configObj)) {
+      this.myConfig[key] = configObj[key];
+    }
+  }
+
  @Input()
  public set network(network: string | undefined) {
    if (typeof network === 'undefined') {
@@ -159,6 +178,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {

  async ngAfterViewInit() {
    this.createNetwork();
+
+    if (this.onload) {
+      // tslint:disable-next-line:no-eval
+      eval(this.onload);
+    }
  }

  private getNetwork() {

--- a/src/index.html
+++ b/src/index.html
@@ -14,15 +14,24 @@
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 </head>
 <body>
+<style>
+  .my-legend-2 {
+    width: 10%;
+  }
+</style>
 <button onclick="setNetwork('netexp1')">Set Network 1</button>
 <button onclick="setNetwork('netexp2')">Set Network 2</button>
 <div style="border: 3px solid red">
-  <network-expander id="netexp1"></network-expander>
+  <network-expander id="netexp1" config='{"legendClass": "my-legend-1"}' onload="init1()"></network-expander>
 </div>
 <div style="border: 3px solid red">
-  <network-expander id="netexp2"></network-expander>
+  <network-expander id="netexp2" config='{"legendUrl": "https://i.pinimg.com/originals/ff/72/80/ff72801189f650f11672915cda0f1bdf.png", "legendClass": "my-legend-2"}'></network-expander>
 </div>
 <script>
+  function init1() {
+    document.getElementsByClassName('my-legend-1')[0].onclick = function() {this.remove()};
+  }
+
  function setNetwork(nw) {
    const netexp = document.getElementById(nw);


--- a/src/styles.scss
+++ b/src/styles.scss
@@ -26,15 +26,6 @@ img.menu-icon.is-hoverable.navbar-item.logo {
  padding: 0;
 }

-.landing {
-  background-color: $primary;
-  background-image: url("assets/virus_background.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  height: calc(100vh - 60px);
-  width: 100vw;
-}
-
 div.navbar-menu {
  margin-left: 5px;
 }
@@ -62,7 +53,7 @@ input.checkbox {
 }

 div.covex.sidebar {
-  height: calc(100vh - 70px);
+  height: calc(100% - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 340px;
@@ -106,7 +97,7 @@ div.covex.left-window {

 div.covex.network {
  width: calc(100% - 350px - 40px);
-  height: calc(100vh - 100px);
+  height: calc(100% - 100px);
  margin-left: 20px;
  margin-right: 20px;
  float: right;
@@ -114,11 +105,11 @@ div.covex.network {

 div.card.network {
  width: 100%;
-  height: calc(100vh - 75px);
+  height: calc(100% - 75px);
 }

 div.network {
-  height: calc(100vh - 200px);
+  height: calc(100% - 200px);
 }

 div.parent {
@@ -129,7 +120,7 @@ div.image1 {
  position: relative;
 }

-div.image2 {
+img.image2 {
  position: absolute;
  bottom: 0px;
  right: 0px;
@@ -143,7 +134,7 @@ div.center {


 div.covex.explorer {
-  height: calc(100vh - 70px);
+  height: calc(100% - 70px);
  margin-left: 10px;
  margin-right: 10px;
 }