Download button

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",

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",

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

@@ -243,13 +243,13 @@
         </p>
       </header>
       <div  class="card-content">
-        <div class="card-image">
+        <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>

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() {
   }