diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7c2c8211fecc72e78cf44a404a502b9fb8fd1c24..5b501dc52a2068287101c6bcb6bf80eceb68e702 100644
--- 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() {}
+
}
diff --git a/src/app/config.ts b/src/app/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a58715bf958d855f2b2977efff4ee1fc0d8226be
--- /dev/null
+++ b/src/app/config.ts
@@ -0,0 +1,9 @@
+export interface IConfig {
+ legendUrl: string;
+ legendClass: string;
+}
+
+export const defaultConfig: IConfig = {
+ legendUrl: 'https://exbio.wzw.tum.de/covex/assets/leg1.png',
+ legendClass: 'legend',
+};
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 5bc2d0a8566a5e0f8ea11e2102ba7c17a7e829ed..9f04c18e7f39e3ab025f4bea46370775fb5df91e 100644
--- 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>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index f3e70f17587fafdcebd69bdebdcc0af72b3507d5..65eddc20762c38e951af45cfdb31467e9330a2ad 100644
--- 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() {
diff --git a/src/index.html b/src/index.html
index e1dc9e2e6607045e25aa9fa2f483a3425900e333..64b4c09db9667ff54105ddbb39fce47f0743d69f 100644
--- 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);
diff --git a/src/styles.scss b/src/styles.scss
index 743201bf5a5b8e7cb969aa46aad0dc83678f718f..5808fcf8afb14b75c1a686fad0f73c54bb5d47f1 100644
--- 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;
}