diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
index 1338be8d84d06841eb38a9145076517a03bef406..5bcad6b35f5683fd884b69abb5896ad9a91eaec1 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/src/app/components/analysis-window/analysis-window.component.html
@@ -44,8 +44,10 @@
</div>
<div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
<div class="card-image">
- <div class="network center" #network>
- <button class="button is-loading center">Loading</button>
+ <div class="parent" id="1">
+ <div class="network center" #network>
+ <button class="button is-loading center">Loading</button>
+ </div>
</div>
</div>
<footer class="card-footer toolbar">
@@ -61,7 +63,7 @@
</button>
</p>
<p class="control">
- <button class="button is-primary is-rounded" [disabled]="true">
+ <button (click)="screenshot()" class="button is-primary is-rounded" >
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index 0b3035d8752438586870d600ab30cec6d01747fe..0c6abbf22c5a008543d3d48cbd1bd169fc8f0db5 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -13,6 +13,7 @@ import {HttpClient} from '@angular/common/http';
import {environment} from '../../../environments/environment';
import {AnalysisService} from '../../analysis.service';
import {Protein, Task, NodeType, ViralProtein, Drug} from '../../interfaces';
+import html2canvas from 'html2canvas';
declare var vis: any;
@@ -30,6 +31,8 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
public task: Task | null = null;
+ public indexscreenshot = 1;
+
@ViewChild('network', {static: false}) networkEl: ElementRef;
@@ -295,5 +298,16 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
this.nodeData.nodes.add(this.drugNodes);
}
}
+ public screenshot() {
+ const elem = document.getElementById(this.indexscreenshot.toString());
+ html2canvas(elem).then((canvas) => {
+ const generatedImage1 = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
+ const a = document.createElement('a');
+ a.href = generatedImage1;
+ a.download = `Resulting_Network.png`;
+ a.click();
+
+ });
+}
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index efdfcc9971f40895869a711da9fc1e973e0abbbd..42055cf36964aba417f12adc8d86a61f13663222 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -16,7 +16,8 @@
<a (click)="collabsData = !collabsData" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsData" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsData" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
@@ -41,8 +42,8 @@
<a (click)="collabsOverview= !collabsOverview" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <i *ngIf="collabsOverview" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsOverview" class="fas fa-angle-down" aria-hidden="true"></i> </span>
</a>
</header>
<div *ngIf="collabsOverview">
@@ -81,7 +82,8 @@
<a (click)="collabsQuery = !collabsQuery" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsQuery" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsQuery" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
@@ -107,7 +109,8 @@
<a (click)="collabsDFilter = !collabsDFilter" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsDFilter" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsDFilter" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
@@ -203,7 +206,8 @@
<a (click)="collabsDetails = !collabsDetails" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsDetails" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsDetails" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
@@ -274,7 +278,8 @@
<a (click)="collabsAnalysis = !collabsAnalysis" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsAnalysis" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsAnalysis" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
@@ -322,7 +327,8 @@
<a (click)="collabsTask = !collabsTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
@@ -355,7 +361,8 @@
<a (click)="collabsSelection = !collabsSelection" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>