From 5a43b28551e8802a0cd717e17294277379672fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Sat, 4 Apr 2020 14:21:58 +0200
Subject: [PATCH] Add analysis window
---
package-lock.json | 15 ++
src/app/app.module.ts | 4 +-
.../analysis-window.component.html | 34 +++
.../analysis-window.component.scss | 5 +
.../analysis-window.component.spec.ts | 25 ++
.../analysis-window.component.ts | 29 ++
.../explorer-page.component.html | 251 +++++++++---------
.../explorer-page/explorer-page.component.ts | 188 +++++++------
src/styles.scss | 57 +++-
9 files changed, 384 insertions(+), 224 deletions(-)
create mode 100644 src/app/components/analysis-window/analysis-window.component.html
create mode 100644 src/app/components/analysis-window/analysis-window.component.scss
create mode 100644 src/app/components/analysis-window/analysis-window.component.spec.ts
create mode 100644 src/app/components/analysis-window/analysis-window.component.ts
diff --git a/package-lock.json b/package-lock.json
index df6e4b4a..8e433e51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1464,6 +1464,21 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@creativebulma/bulma-collapsible": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@creativebulma/bulma-collapsible/-/bulma-collapsible-1.0.4.tgz",
+ "integrity": "sha512-aNqSwyuJxshoIc4oD3wJ3eRqOANRweYfpzqmef/fj5tf0Yn7UVx99yh8ovY6vhB8Il31bFcc7f/eRfJvEMNUPw==",
+ "requires": {
+ "bulma": "^0.8.1"
+ },
+ "dependencies": {
+ "bulma": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.8.1.tgz",
+ "integrity": "sha512-Afi2zv4DKmNSYfmx55V+Mtnt8+WfR8Rs65kWArmzEuWP7vNr7dSAEDI+ORZlgOR1gueNZwpKaPdUi4ZiTNwgPA=="
+ }
+ }
+ },
"@fortawesome/angular-fontawesome": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.6.1.tgz",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8d162a28..93855b98 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,7 +14,8 @@ import {HttpClientModule} from '@angular/common/http';
import {QueryComponent} from './components/query/query.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ProteinAnalysisComponent} from './components/protein-analysis/protein-analysis.component';
-import { SelectDatasetComponent } from './components/select-dataset/select-dataset.component';
+import {SelectDatasetComponent} from './components/select-dataset/select-dataset.component';
+import {AnalysisWindowComponent} from './components/analysis-window/analysis-window.component';
@NgModule({
@@ -26,6 +27,7 @@ import { SelectDatasetComponent } from './components/select-dataset/select-datas
QueryComponent,
ProteinAnalysisComponent,
SelectDatasetComponent,
+ AnalysisWindowComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
new file mode 100644
index 00000000..8321b431
--- /dev/null
+++ b/src/app/components/analysis-window/analysis-window.component.html
@@ -0,0 +1,34 @@
+<div class="card analysis">
+ <header class="card-header">
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-flask" aria-hidden="true"></i>
+ </span>
+ Analysis
+ </p>
+ <a (click)="closeAnalysisWindow()" class="card-header-icon" aria-label="more options">
+ <span class="icon">
+ <i class="fas fa-times" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
+ <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+ <br>
+ <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ </div>
+ </div>
+ <footer class="card-footer">
+ <button [disabled]="true" (click)="export()" class="card-footer-item button is-primary"><span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span><span>Export</span></button>
+ <button [disabled]="true" (click)="discard()" class="card-footer-item button is-danger"><span>Discard</span><span class="icon">
+ <i class="fas fa-trash" aria-hidden="true"></i>
+ </span></button>
+ <button (click)="closeAnalysisWindow()" class="card-footer-item button"><span>Close</span> <span class="icon">
+ <i class="fas fa-times" aria-hidden="true"></i>
+ </span></button>
+ </footer>
+</div>
diff --git a/src/app/components/analysis-window/analysis-window.component.scss b/src/app/components/analysis-window/analysis-window.component.scss
new file mode 100644
index 00000000..4888ec89
--- /dev/null
+++ b/src/app/components/analysis-window/analysis-window.component.scss
@@ -0,0 +1,5 @@
+.analysis {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
diff --git a/src/app/components/analysis-window/analysis-window.component.spec.ts b/src/app/components/analysis-window/analysis-window.component.spec.ts
new file mode 100644
index 00000000..9ce1f4a0
--- /dev/null
+++ b/src/app/components/analysis-window/analysis-window.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnalysisWindowComponent } from './analysis-window.component';
+
+describe('AnalysisWindowComponent', () => {
+ let component: AnalysisWindowComponent;
+ let fixture: ComponentFixture<AnalysisWindowComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AnalysisWindowComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AnalysisWindowComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
new file mode 100644
index 00000000..1c6e12d3
--- /dev/null
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -0,0 +1,29 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+
+@Component({
+ selector: 'app-analysis-window',
+ templateUrl: './analysis-window.component.html',
+ styleUrls: ['./analysis-window.component.scss']
+})
+export class AnalysisWindowComponent implements OnInit {
+
+ @Input() analysisWindow: boolean;
+ @Output() closeWindow = new EventEmitter<boolean>();
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ closeAnalysisWindow() {
+ this.closeWindow.emit(this.analysisWindow);
+ }
+
+ discard() {
+
+ }
+
+ export() {
+
+ }
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 82a5c4c2..714bcb89 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -2,128 +2,148 @@
<div class="content explorer">
- <div class="content bar-left">
+ <div class="content left-window">
+ <div>
+ <div class="content bar-left">
- <div class="card bar">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card bar-small">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-database" aria-hidden="true"></i>
</span> Choose Dataset
- </p>
- </header>
- <div class="card-content">
- <div class="content">
- <app-select-dataset [datasetItems]="datasetItems" (selectDataset)="createNetwork($event)"></app-select-dataset>
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <app-select-dataset [datasetItems]="datasetItems"
+ (selectDataset)="createNetwork($event)"></app-select-dataset>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="card bar">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card bar-medium">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-info" aria-hidden="true"></i>
- </span> Info
- </p>
- </header>
- <div class="card-content">
- <div class="content">
- <nav class="level" *ngIf="proteinData">
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Viral Proteins</p>
- <p class="title"> {{ proteinData.effects.length }}</p>
- </div>
- </div>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Host Proteins</p>
- <p class="title">{{ proteinData.proteins.length }}</p>
- </div>
- </div>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Interactions</p>
- <p class="title">{{ proteinData.edges.length }}</p>
- </div>
+ </span> Network Overview
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <nav class="level" *ngIf="proteinData">
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Viral<br>Proteins</p>
+ <p class="title"> {{ proteinData.effects.length }}</p>
+ </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Host<br>Proteins</p>
+ <p class="title">{{ proteinData.proteins.length }}</p>
+ </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Virus-Host<br>Interactions</p>
+ <p class="title">{{ proteinData.edges.length }}</p>
+ </div>
+ </div>
+ </nav>
</div>
- </nav>
+ </div>
</div>
- </div>
- </div>
- <div class="card bar">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card bar-small">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-search" aria-hidden="true"></i>
</span> Query Protein
- </p>
- </header>
- <div class="card-content">
- <div class="content">
- <div class="field">
- <div class="control">
- <app-query-component [queryItems]="queryItems"
- (selectProtein)="openSummary($event, true)"></app-query-component>
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <div class="field">
+ <div class="control">
+ <app-query-component [queryItems]="queryItems"
+ (selectProtein)="openSummary($event, true)"></app-query-component>
+ </div>
+ </div>
</div>
</div>
</div>
- </div>
- </div>
- <div class="card bar">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card bar-large">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Filter Viral Proteins
- </p>
- </header>
- <div class="card-content">
- <div class="content">
- <div class="bait-frame">
- <div *ngFor="let bait of viralProteinCheckboxes">
- <label class="checkbox">
- <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
- (ngModelChange)="bait.checked = $event; filterNodes()">
- {{ bait.data.effectName }}
- </label>
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <div class="bait-frame">
+ <div *ngFor="let bait of viralProteinCheckboxes">
+ <label class="checkbox">
+ <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
+ (ngModelChange)="bait.checked = $event; filterNodes()">
+ {{ bait.data.effectName }}
+ </label>
+ </div>
+ </div>
</div>
</div>
+ <footer class="card-footer">
+ <button (click)="reset($event);" class="card-footer-item button is-danger">
+ Reset
+ </button>
+ </footer>
</div>
</div>
- <footer class="card-footer">
- <button (click)="reset($event);" class="card-footer-item button is-danger">
- Reset
- </button>
- </footer>
- </div>
- <div class="card bar">
- <header class="card-header">
- <p class="card-header-title">
- <span class="icon">
- <i class="fas fa-cog" aria-hidden="true"></i>
- </span> Settings
- </p>
- </header>
- <div class="card-content">
- <div class="content">
- <label class="checkbox">
- <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
- (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
- Physics enabled
- </label>
+ <div class="content network">
+
+ <div class="card network">
+ <header class="card-header">
+ <p class="card-header-title">
+ Protein-Protein Interaction Network
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="card-image" id="0">
+ <div class="network center" #network>
+ <button class="button is-loading center">Loading</button>
+ </div>
+ </div>
+ <footer class="card-footer">
+ <button (click)="toCanvas()" class="card-footer-item button is-primary">
+ <span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span>
+ </button>
+ <label class="checkbox">
+ <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
+ (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
+ Physics enabled
+ </label>
+ </footer>
+ </div>
</div>
</div>
</div>
+
+ <div class="analysis-view" [hidden]="!analysisWindow">
+ <app-analysis-window (closeWindow)="closeAnalysisWindow()"></app-analysis-window>
+ </div>
</div>
<div class="content bar-right">
- <div class="card bar">
+ <div class="card bar-medium">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
@@ -143,29 +163,24 @@
{{ proteinAc }}
</a>
</p>
- <button class="button is-primary" *ngIf="!inSelection(currentProteinAc)"
- (click)="addToSelection(currentProteinAc)">Add to Analysis
- </button>
- <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
- (click)="removeFromSelection(currentProteinAc)">Remove from Analysis
- </button>
</div>
<div *ngIf="!showDetails">
Please select a node for further information.
+ <a (click)="showAnalysisWindow()"> Open Analysis Window </a>
</div>
</div>
</div>
- <div class="card bar">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card bar-medium">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Summary
- </p>
- </header>
+ </p>
+ </header>
<div *ngIf="showDetails" class="card-content">
<div class="content">
<figure class="image">
@@ -175,7 +190,7 @@
</div>
</div>
- <div class="card bar">
+ <div class="card bar-medium">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
@@ -184,8 +199,13 @@
</p>
</header>
<div class="card-content">
- <p>Hold down the CTRL button to select multiple proteins.</p>
-
+ <button class="button is-success" *ngIf="!inSelection(currentProteinAc)"
+ (click)="addToSelection(currentProteinAc)">Add to Analysis
+ </button>
+ <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
+ (click)="removeFromSelection(currentProteinAc)">Remove from Analysis
+ </button>
+ <p></p>
<button (click)="showAnalysisDialog = true"
class="button"
[class.is-info]="!analysis.getTask()"
@@ -234,29 +254,4 @@
</div>
- <div class="content network">
-
- <div class="card network">
- <header class="card-header">
- <p class="card-header-title">
- Protein-Protein Interaction Network
- </p>
- </header>
- <div class="card-content">
- <div id= "0" class="card-image">
- <div class="network center" #network>
- <button class="button is-loading center">Loading</button>
- </div>
- </div>
- <footer class="card-footer">
- <button (click)="toCanvas()" class="card-footer-item button is-primary">
- <span class="icon">
- <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
- </span>
- </button>
- </footer>
- </div>
- </div>
- </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 d1f19161..0704eac8 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -1,4 +1,13 @@
-import {AfterViewInit, Component, ElementRef, OnInit, ViewChild, Output, EventEmitter, HostListener} from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ OnInit,
+ ViewChild,
+ Output,
+ EventEmitter,
+ HostListener
+} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Edge, Effect, getDatasetFilename, Protein, ProteinNetwork} from '../protein-network';
import {HttpClient} from '@angular/common/http';
@@ -9,7 +18,6 @@ import html2canvas from 'html2canvas';
declare var vis: any;
-
@Component({
selector: 'app-explorer-page',
templateUrl: './explorer-page.component.html',
@@ -17,6 +25,78 @@ declare var vis: any;
})
export class ExplorerPageComponent implements OnInit, AfterViewInit {
+ public showDetails = false;
+ public currentProteinAc = '';
+ public geneNames: Array<string> = [];
+ public proteinNames: Array<string> = [];
+ public proteinAcs: Array<string> = [];
+ public watcher = 0;
+
+ public viralProteinCheckboxes: Array<{ checked: boolean; data: Effect }> = [];
+
+ public proteinData: ProteinNetwork;
+
+ public proteins: any;
+ public effects: any;
+ public edges: any;
+
+ private network: any;
+ private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
+
+ private seed = 1; // TODO: Remove this
+
+ private dumpPositions = false;
+ public physicsEnabled = false;
+
+ public queryItems = [];
+ public showAnalysisDialog = false;
+
+ public analysisWindow = false;
+
+ public currentDataset = [];
+ private array = [0];
+
+ public datasetItems: Array<{ label: string, datasets: string, data: Array<[string, string]> }> = [
+ {label: 'All', datasets: 'TUM & Krogan', data: [['TUM', 'HCoV'], ['TUM', 'SARS-CoV2'], ['Krogan', 'SARS-CoV2']]},
+ {label: 'HCoV', datasets: 'TUM', data: [['TUM', 'HCoV']]},
+ {label: 'CoV2', datasets: 'TUM & Krogan', data: [['TUM', 'SARS-CoV2'], ['Krogan', 'SARS-CoV2']]},
+ {label: 'CoV2', datasets: 'Krogan', data: [['Krogan', 'SARS-CoV2']]},
+ {label: 'CoV2', datasets: 'TUM', data: [['TUM', 'SARS-CoV2']]}];
+
+ @ViewChild('network', {static: false}) networkEl: ElementRef;
+
+ @HostListener('window:keydown', ['$event'])
+ handleKeyboardEvent1(event: KeyboardEvent) {
+
+ const keyName = event.key;
+
+ if (keyName === 'Control') {
+ this.watcher = 1;
+ // console.log(this.watcher);
+
+ }
+ }
+
+ @HostListener('window:keyup', ['$event'])
+ handleKeyboardEvent(event: KeyboardEvent) {
+
+ const keyName1 = event.key;
+ if (keyName1 === 'Control') {
+ this.watcher = 0;
+ // console.log(this.watcher);
+
+ }
+ }
+
+ closeAnalysisWindow() {
+ this.analysisWindow = false;
+ }
+
+ showAnalysisWindow() {
+ this.analysisWindow = true;
+ }
+
+
constructor(private http: HttpClient,
private route: ActivatedRoute,
private router: Router,
@@ -75,84 +155,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
}
- public showDetails = false;
- public currentProteinAc = '';
- public geneNames: Array<string> = [];
- public proteinNames: Array<string> = [];
- public proteinAcs: Array<string> = [];
- public watcher = 0;
-
- public viralProteinCheckboxes: Array<{ checked: boolean; data: Effect }> = [];
-
- public proteinData: ProteinNetwork;
-
- public proteins: any;
- public effects: any;
- public edges: any;
-
- private network: any;
- private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
-
- private seed = 1; // TODO: Remove this
-
- private dumpPositions = false;
- public physicsEnabled = false;
-
- public queryItems = [];
- public showAnalysisDialog = false;
-
- public currentDataset = [];
- private array = [0];
-
- public datasetItems: Array<{ label: string, datasets: string, data: Array<[string, string]> }> = [
- {label: 'All', datasets: 'TUM & Krogan', data: [['TUM', 'HCoV'], ['TUM', 'SARS-CoV2'], ['Krogan', 'SARS-CoV2']]},
- {label: 'HCoV', datasets: 'TUM', data: [['TUM', 'HCoV']]},
- {label: 'CoV2', datasets: 'TUM & Krogan', data: [['TUM', 'SARS-CoV2'], ['Krogan', 'SARS-CoV2']]},
- {label: 'CoV2', datasets: 'Krogan', data: [['Krogan', 'SARS-CoV2']]},
- {label: 'CoV2', datasets: 'TUM', data: [['TUM', 'SARS-CoV2']]}];
-
-
- @ViewChild('network', {static: false}) networkEl: ElementRef;
-
-
-
- public toCanvas() {
- this.array.forEach((key, index) => {
- const elem = document.getElementById(index.toString());
- // tslint:disable-next-line:only-arrow-functions
- html2canvas(elem).then(function(canvas) {
- const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
- const a = document.createElement('a');
- a.href = generatedImage;
- a.download = `Network.png`;
- a.click();
- });
- });
- }
-
- @HostListener('window:keydown', ['$event'])
- handleKeyboardEvent1(event: KeyboardEvent) {
-
- const keyName = event.key;
-
- if (keyName === 'Control') {
- this.watcher = 1;
- // console.log(this.watcher);
-
- }
- }
-
- @HostListener('window:keyup', ['$event'])
- handleKeyboardEvent(event: KeyboardEvent) {
-
- const keyName1 = event.key;
- if (keyName1 === 'Control') {
- this.watcher = 0;
- // console.log(this.watcher);
-
- }
- }
-
ngOnInit() {
}
@@ -255,16 +257,16 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.openSummary(protein, false);
// tslint:disable-next-line:no-console
console.log(this.currentProteinAc);
- if (this.watcher === 1 ) {
+ if (this.watcher === 1) {
if (this.inSelection(protein.proteinAc) === true) {
// tslint:disable-next-line:no-console
- console.log(this.removeFromSelection(protein.proteinAc));
+ console.log(this.removeFromSelection(protein.proteinAc));
} else {
// tslint:disable-next-line:no-console
- console.log(this.addToSelection(protein.proteinAc));
- // console.log(this.removeFromSelection(this.currentProteinAc));
+ console.log(this.addToSelection(protein.proteinAc));
+ // console.log(this.removeFromSelection(this.currentProteinAc));
// tslint:disable-next-line:no-console
- console.log(this.analysis.getCount());
+ console.log(this.analysis.getCount());
}
}
} else {
@@ -456,4 +458,20 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.analysis.removeProtein(protein);
}
+ public toCanvas() {
+ this.array.forEach((key, index) => {
+ const elem = document.getElementById(index.toString());
+ // tslint:disable-next-line:only-arrow-functions
+ html2canvas(elem).then(function(canvas) {
+ const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
+ const a = document.createElement('a');
+ a.href = generatedImage;
+ a.download = `Network.png`;
+ a.click();
+ });
+ });
+ }
+
+
+
}
diff --git a/src/styles.scss b/src/styles.scss
index 21670134..a90f8428 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,14 @@
$family-sans-serif: "Varela Round", sans-serif;
@import "~bulma/bulma.sass";
+html {
+ overflow: hidden;
+}
+
+body {
+ overflow: hidden;
+}
+
.hero.is-primary {
background-color: #118AB2;
background-image: url("assets/logo.png"), linear-gradient(to left, #f2fcfe, #118AB2);
@@ -54,35 +62,53 @@ input.checkbox {
div.content.bar-left {
float: left;
- width: 15%;
- height: calc(100vh - 30%);
+ width: 350px;
+ height: calc(100vh - 102px);
}
div.content.bar-right {
float: right;
- width: 15%;
+ width: 350px;
}
-div.card.bar {
- margin-bottom: 21px;
+div.card.bar-small {
+ margin-bottom: 15px;
word-wrap: break-word;
+ height: 130px;
+}
+
+div.card.bar-medium {
+ margin-bottom: 15px;
+ word-wrap: break-word;
+ height: 170px;
+}
+
+div.card.bar-large {
+ margin-bottom: 15px;
+ height: calc(100vh - 660px);
}
+div.content.left-window {
+ float: left;
+ width: calc(100vw - 350px - 2 * 20px);
+ height: 100%;
+}
div.content.network {
- width: 68%;
+ width: calc(100% - 350px - 40px);
height: calc(100vh - 100px);
- margin-left: auto;
- margin-right: auto;
+ margin-left: 20px;
+ margin-right: 20px;
+ float: right;
}
div.card.network {
width: 100%;
- height: calc(100vh - 80px);
+ height: calc(100vh - 85px);
}
div.network {
- height: calc(100vh - 200px);
+ height: calc(100vh - 210px);
}
div.center {
@@ -93,9 +119,20 @@ div.center {
div.content.explorer {
+ height: calc(100vh - 90px);
margin-left: 20px;
margin-right: 20px;
}
+div.analysis-view {
+ height: 100%;
+ width: calc(100% - 20px);
+ position: relative;
+ margin-top: 0;
+ /* Just for looks*/
+ z-index: 1000;
+ padding: 0;
+}
+
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
--
GitLab