From 996787e87f1c6919ecd09c3696d592698b37d489 Mon Sep 17 00:00:00 2001
From: Mhaned Oubounyt <m.oubounyt@tum.de>
Date: Sat, 4 Apr 2020 12:05:25 +0200
Subject: [PATCH] Download button
---
package-lock.json | 23 +++
package.json | 1 +
.../explorer-page.component.html | 6 +-
.../explorer-page/explorer-page.component.ts | 135 ++++++++++--------
4 files changed, 104 insertions(+), 61 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index f9e9191e..df6e4b4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3583,6 +3583,21 @@
"timsort": "^0.3.0"
}
},
+ "css-line-break": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+ "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+ "requires": {
+ "base64-arraybuffer": "^0.2.0"
+ },
+ "dependencies": {
+ "base64-arraybuffer": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+ "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+ }
+ }
+ },
"css-parse": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz",
@@ -5499,6 +5514,14 @@
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"dev": true
},
+ "html2canvas": {
+ "version": "1.0.0-rc.5",
+ "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
+ "integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
+ "requires": {
+ "css-line-break": "1.1.1"
+ }
+ },
"htmlhint": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/htmlhint/-/htmlhint-0.11.0.tgz",
diff --git a/package.json b/package.json
index 3f7a3f6d..8197d632 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ng-select/ng-select": "^3.7.3",
"bulma": "^0.8.1",
+ "html2canvas": "^1.0.0-rc.5",
"python": "0.0.4",
"python-shell": "^1.0.8",
"rxjs": "~6.5.4",
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 274dced2..82a5c4c2 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -242,14 +242,14 @@
Protein-Protein Interaction Network
</p>
</header>
- <div class="card-content">
- <div class="card-image">
+ <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 class="card-footer-item button is-primary">
+ <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>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 84a9b0d1..d1f19161 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -4,6 +4,7 @@ import {Edge, Effect, getDatasetFilename, Protein, ProteinNetwork} from '../prot
import {HttpClient} from '@angular/common/http';
import {ApiService} from '../../api.service';
import {AnalysisService} from '../../analysis.service';
+import html2canvas from 'html2canvas';
declare var vis: any;
@@ -16,6 +17,64 @@ declare var vis: any;
})
export class ExplorerPageComponent implements OnInit, AfterViewInit {
+ constructor(private http: HttpClient,
+ private route: ActivatedRoute,
+ private router: Router,
+ private api: ApiService,
+ public analysis: AnalysisService) {
+ this.geneNames.push('IFI16');
+ this.proteinNames.push('Gamma-interface-inducible protein 16');
+ this.proteinAcs.push('Q16666');
+
+ this.route.queryParams.subscribe(async (params) => {
+ this.dumpPositions = params.dumpPositions;
+ this.physicsEnabled = !!this.dumpPositions;
+
+ const protein = params.protein;
+ if (!protein) {
+ // In this case, the URL is just `/explorer`
+ // Therefore, we do not show a modal
+ this.showDetails = false;
+ return;
+ }
+
+ // In this case, the URL is `/explorer/<protein>`
+
+ if (this.currentProteinAc === protein) {
+ // The protein group is the same as before, so we do not need to do anything
+ // TODO Also highlight node when reloading the page/sharing the URL
+ return;
+ }
+
+ // We have a new protein id, so we need to load it and show the modal...
+
+ this.currentProteinAc = protein;
+
+ // TODO: Perform call here for 'protein'...
+ // this.zoomToNode(protein)
+ this.showDetails = true;
+ });
+
+ this.analysis.subscribe((protein, selected) => {
+ const nodeId = `pg_${protein.proteinAc}`;
+ const node = this.nodeData.nodes.get(nodeId);
+ const pos = this.network.getPositions([nodeId]);
+ node.x = pos[nodeId].x;
+ node.y = pos[nodeId].y;
+ if (selected) {
+ if (node) {
+ node.color = '#c42eff';
+ this.nodeData.nodes.update(node);
+ }
+ } else {
+ if (node) {
+ node.color = '#e2b600';
+ this.nodeData.nodes.update(node);
+ }
+ }
+ });
+ }
+
public showDetails = false;
public currentProteinAc = '';
public geneNames: Array<string> = [];
@@ -43,6 +102,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
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']]},
@@ -51,8 +111,25 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
{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) {
@@ -76,64 +153,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
}
- constructor(private http: HttpClient,
- private route: ActivatedRoute,
- private router: Router,
- private api: ApiService,
- public analysis: AnalysisService) {
- this.geneNames.push('IFI16');
- this.proteinNames.push('Gamma-interface-inducible protein 16');
- this.proteinAcs.push('Q16666');
-
- this.route.queryParams.subscribe(async (params) => {
- this.dumpPositions = params.dumpPositions;
- this.physicsEnabled = !!this.dumpPositions;
-
- const protein = params.protein;
- if (!protein) {
- // In this case, the URL is just `/explorer`
- // Therefore, we do not show a modal
- this.showDetails = false;
- return;
- }
-
- // In this case, the URL is `/explorer/<protein>`
-
- if (this.currentProteinAc === protein) {
- // The protein group is the same as before, so we do not need to do anything
- // TODO Also highlight node when reloading the page/sharing the URL
- return;
- }
-
- // We have a new protein id, so we need to load it and show the modal...
-
- this.currentProteinAc = protein;
-
- // TODO: Perform call here for 'protein'...
- // this.zoomToNode(protein)
- this.showDetails = true;
- });
-
- this.analysis.subscribe((protein, selected) => {
- const nodeId = `pg_${protein.proteinAc}`;
- const node = this.nodeData.nodes.get(nodeId);
- const pos = this.network.getPositions([nodeId]);
- node.x = pos[nodeId].x;
- node.y = pos[nodeId].y;
- if (selected) {
- if (node) {
- node.color = '#c42eff';
- this.nodeData.nodes.update(node);
- }
- } else {
- if (node) {
- node.color = '#e2b600';
- this.nodeData.nodes.update(node);
- }
- }
- });
- }
-
ngOnInit() {
}
--
GitLab