From 2f61f169fcf5a51ee2748026d3fa0848be503d6e Mon Sep 17 00:00:00 2001
From: Michael Hartung <michi@Michaels-MacBook-Pro.local>
Date: Wed, 11 Aug 2021 16:22:58 +0200
Subject: [PATCH] export as graphml button
---
.../analysis-panel.component.html | 36 +++++++++++--------
.../analysis-panel.component.ts | 9 +++--
src/app/config.ts | 2 ++
.../explorer-page.component.html | 24 ++++++++++++-
.../explorer-page/explorer-page.component.ts | 9 ++++-
.../netex-controller.service.ts | 10 +++++-
src/app/utils.ts | 14 ++++++++
src/stylesheets/styles.scss | 2 +-
8 files changed, 85 insertions(+), 21 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index f2b31d21..27d87521 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -142,7 +142,7 @@
<div class="network-footer-toolbar-inner-container">
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
- <button class="button is-primary is-rounded has-tooltip network-footer-toolbar-element"
+ <button class="button is-primary is-rounded has-tooltip network-footer-toolbar-element footer-buttons"
pTooltip="Take a screenshot of the current network." tooltipStyleClass="drgstn" tooltipPosition="top" (click)="toImage()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
@@ -153,19 +153,27 @@
</button>
</ng-container>
- <div class="field network-footer-toolbar-element">
- <p class="control footer-buttons">
- <a [href]="graphmlLink()" class="button is-success is-rounded has-tooltip"
- pTooltip="Export this network as .graphml file." tooltipStyleClass="drgstn" tooltipPosition="top">
- <span class="icon">
- <i class="fas fa-download" aria-hidden="true"></i>
- </span>
- <span [ngClass]="{'text-normal':smallStyle}">
- Export as .graphml
- </span>
- </a>
- </p>
- </div>
+ <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
+ <button
+ (click)="graphmlLink()"
+ class="
+ button
+ is-success is-rounded
+ has-tooltip
+ network-footer-toolbar-element
+ "
+ pTooltip="Export this network as .graphml file."
+ tooltipStyleClass="drgstn"
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fas fa-download" aria-hidden="true"></i>
+ </span>
+ <span [ngClass]="{ 'text-normal': smallStyle }"
+ >Export as .graphml</span
+ >
+ </button>
+ </ng-container>
<!-- <div class="field">-->
<!-- <p class="control footer-buttons">-->
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 23ed1cd4..c912f98a 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -32,7 +32,7 @@ import {NetworkSettings} from '../../network-settings';
import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
import {defaultConfig, IConfig} from 'src/app/config';
import { mapCustomEdge, mapCustomNode } from 'src/app/main-network';
-import { removeDuplicateObjectsFromList } from 'src/app/utils';
+import { downLoadFile, removeDuplicateObjectsFromList } from 'src/app/utils';
declare var vis: any;
@@ -394,8 +394,11 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
return `${environment.backend}task_result/?token=${this.token}&view=${view}&fmt=csv`;
}
- public graphmlLink(): string {
- return `${environment.backend}graph_export/?token=${this.token}`;
+ public graphmlLink() {
+ const data = {nodes: this.nodeData.nodes.get(), edges: this.nodeData.edges.get()}
+ this.netex.graphmlLink(data).subscribe(response => {
+ return downLoadFile(response, "application/xml");
+ })
}
public inferEdgeGroup(edge: object): EdgeType {
diff --git a/src/app/config.ts b/src/app/config.ts
index 62a8ab8c..ead040c5 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -48,6 +48,7 @@ export interface IConfig {
showFooter: boolean;
showFooterButtonExpression: boolean;
showFooterButtonScreenshot: boolean;
+ showFooterButtonExportGraphml: boolean;
showLegend: boolean;
showLegendNodes: boolean;
showLegendEdges: boolean;
@@ -86,6 +87,7 @@ export const defaultConfig: IConfig = {
showLegend: true,
showFooterButtonExpression: true,
showFooterButtonScreenshot: true,
+ showFooterButtonExportGraphml: true,
identifier: 'symbol',
interactionDrugProtein: 'DrugBank',
interactionProteinProtein: 'STRING',
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index cb503e69..49c19fc8 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -175,7 +175,7 @@
<button
(click)="toImage()"
class="
- button
+ button footer-buttons
is-primary is-rounded
has-tooltip
network-footer-toolbar-element
@@ -193,6 +193,28 @@
</button>
</ng-container>
+ <ng-container *ngIf="myConfig.showFooterButtonExportGraphml">
+ <button
+ (click)="graphmlLink()"
+ class="
+ button footer-buttons
+ is-success is-rounded
+ has-tooltip
+ network-footer-toolbar-element
+ "
+ pTooltip="Export this network as .graphml file."
+ tooltipStyleClass="drgstn"
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fas fa-download" aria-hidden="true"></i>
+ </span>
+ <span [ngClass]="{ 'text-normal': smallStyle }"
+ >Export as .graphml</span
+ >
+ </button>
+ </ng-container>
+
<ng-container *ngIf="myConfig.showFooterButtonExpression">
<div
class="
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 5a1deefb..4a861930 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -25,7 +25,7 @@ import domtoimage from 'dom-to-image';
import {NetworkSettings} from '../../network-settings';
import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from '../../config';
import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
-import {removeDuplicateObjectsFromList} from '../../utils'
+import {downLoadFile, removeDuplicateObjectsFromList} from '../../utils'
import * as merge from 'lodash/fp/merge';
import { AnalysisPanelComponent } from 'src/app/components/analysis-panel/analysis-panel.component';
@@ -339,6 +339,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
}
+ public graphmlLink() {
+ const data = {nodes: this.nodeData.nodes.get(), edges: this.nodeData.edges.get()}
+ this.netex.graphmlLink(data).subscribe(response => {
+ return downLoadFile(response, "application/xml");
+ })
+ }
+
public async openSummary(item: Wrapper, zoom: boolean) {
this.selectedWrapper = item;
if (zoom) {
diff --git a/src/app/services/netex-controller/netex-controller.service.ts b/src/app/services/netex-controller/netex-controller.service.ts
index 49772e96..4992123d 100644
--- a/src/app/services/netex-controller/netex-controller.service.ts
+++ b/src/app/services/netex-controller/netex-controller.service.ts
@@ -3,7 +3,7 @@ import {environment} from '../../../environments/environment';
import {HttpClient, HttpParams} from '@angular/common/http';
import {AlgorithmType, QuickAlgorithmType} from '../analysis/analysis.service';
import { Observable } from 'rxjs';
-import { Tissue, Node} from 'src/app/interfaces';
+import { Tissue, Node, EdgeType} from 'src/app/interfaces';
import { InteractionDrugProteinDB } from 'src/app/config';
@Injectable({
@@ -107,4 +107,12 @@ export class NetexControllerService {
}
return this.http.post<any>(`${environment.backend}adjacent_drugs/`, params);
}
+
+ public graphmlLink(graph_data: {edges: EdgeType[], nodes: Node[]}) {
+ /**
+ * Sends complete graph data to backend where it is written to graphml File.
+ * The file is returned as download for the user.
+ */
+ return this.http.post(`${environment.backend}graph_export/`, graph_data, {responseType: 'text'});
+ }
}
diff --git a/src/app/utils.ts b/src/app/utils.ts
index 72b2bff4..e29a04f5 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -119,3 +119,17 @@ export function removeDuplicateObjectsFromList(nodes: Node[], attribute: string)
return filteredArray;
}
+/**
+ * Method is use to download file.
+ * @param data - Array Buffer data
+ * @param type - type of the document.
+ */
+export function downLoadFile(data: any, type: string) {
+ let blob = new Blob([data], { type: type});
+ var a = document.createElement("a");
+ a.href = URL.createObjectURL(blob);
+ a.download = 'test.graphml';
+ // start download
+ a.click();
+}
+
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 88f76a0e..6a40599b 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -226,7 +226,7 @@
}
.footer-buttons {
- margin-left: 20px;
+ margin-left: 10px;
margin-right: 10px;
}
--
GitLab