csv export in frontend

.gitignore

@@ -22,6 +22,7 @@ speed-measure-plugin*.json
 *.launch
 .settings/
 *.sublime-workspace
+.vscode/
 
 # IDE - VSCode
 .vscode/*
@@ -48,6 +49,7 @@ Thumbs.db
 .idea
 drugsTone-build
 package-lock.json
+netex/
 
 .ipynb_checkpoints/
 *.ipynb

src/app/components/analysis-panel/analysis-panel.component.html

@@ -397,8 +397,8 @@
             </div>
             <div class="column">
               <div class="field has-addons is-pulled-right m-1">
-                <a
-                  [href]="downloadLink('drugs')"
+                <button
+                  (click)="downloadNodes('drug')"
                   class="button is-primary control is-outlined is-rounded is-pulled-right is-small"
                 >
                   <app-fa-solid-icon
@@ -406,7 +406,7 @@
                     title="download resulting drugs"
                   ></app-fa-solid-icon>
                   <span>Download</span>
-                </a>
+                </button>
               </div>
 
               <div
@@ -482,8 +482,8 @@
 
             <div class="column">
               <div class="field has-addons is-pulled-right m-1 control">
-                <a
-                  [href]="downloadLink('proteins')"
+                <button
+                  (click)="downloadNodes('protein')"
                   class="button is-primary is-rounded is-outlined is-pulled-right is-small"
                 >
                   <app-fa-solid-icon
@@ -491,7 +491,7 @@
                     title="download resulting proteins"
                   ></app-fa-solid-icon>
                   <span>Download</span>
-                </a>
+                </button>
               </div>
               <div
                 class="field has-addons is-pulled-right m-1"

src/app/components/analysis-panel/analysis-panel.component.ts

@@ -32,6 +32,7 @@ import {NetworkHandlerService} from 'src/app/services/network-handler/network-ha
 import {LegendService} from 'src/app/services/legend-service/legend-service.service';
 import {LoadingScreenService} from 'src/app/services/loading-screen/loading-screen.service';
 import {version} from '../../../version';
+import {downloadCSV} from 'src/app/utils'
 
 declare var vis: any;
 
@@ -457,8 +458,16 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
     }
   }
 
-  public downloadLink(view: string): string {
-    return `${this.netex.getBackend()}task_result/?token=${this.token}&view=${view}&fmt=csv`;
+  public downloadNodes(view: string) {
+    const data = [];
+    const nodes = this.nodeData.nodes.get();
+    nodes.forEach((node) => {
+      if (node.drugstoneType === view) {
+        data.push(node);
+      }
+    })
+    const columns = ['label', 'symbol', 'uniprot', 'ensg', 'entrez', 'proteinName', 'isSeed', 'score', 'rank', 'status'];
+    downloadCSV(data, columns, `drugstone_${view}`);
   }
 
   /**

src/app/components/network/network-menu/download-button/download-button.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
 import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
-import { downLoadFile } from 'src/app/utils';
+import { downLoadFile, downloadCSV } from 'src/app/utils';
 import {NetworkHandlerService} from "../../../../services/network-handler/network-handler.service";
 
 @Component({
@@ -21,6 +21,7 @@ export class DownloadButtonComponent implements OnInit {
 
   public downloadLink(fmt) {
     const data = {nodes: this.nodeData.nodes.get(), edges: this.nodeData.edges.get(), fmt: fmt};
+    
     this.netex.graphExport(data).subscribe(response => {
       return downLoadFile(response, `application/${fmt}`, fmt);
     });

src/app/utils.ts

 // From https://stackoverflow.com/a/27709336/3850564
-
 import {ɵisListLikeIterable} from '@angular/core';
 import {Node} from './interfaces';
 
+
 export function getGradientColor(startColor: string, endColor: string, percent: number) {
   // strip the leading # if it's there
   startColor = startColor.replace(/^\s*#|\s*$/g, '');
@@ -133,11 +133,11 @@ export function removeDuplicateObjectsFromList(nodes: Node[], attribute: string)
  * @param data - Array Buffer data
  * @param type - type of the document.
  */
-export function downLoadFile(data: any, type: string, fmt: string) {
+export function downLoadFile(data: any, type: string, fmt: string, label: string = 'drugstone_network') {
   let blob = new Blob([data], {type: type});
   var a = document.createElement('a');
   a.href = URL.createObjectURL(blob);
-  a.download = `drugstone_network_${new Date().getTime()}.${fmt}`;
+  a.download = `${label}_${new Date().getTime()}.${fmt}`;
   a.click();
 }
 
@@ -326,3 +326,37 @@ export function pieChartContextRenderer({ctx, x, y, state: {selected, hover}, st
   };
 }
 
+export const downloadCSV = function(array: any[], columns: string[], label: string = 'drugstone_csv') {
+  // test which columns occur in array elements, function should not fail if columns do not occur
+  const headerColumns = [];
+  columns.forEach((col) => {
+    if (col in array[0]) {
+      headerColumns.push(col);
+    }
+  })
+
+  // headerColumns has all attributes from 'columns' that appear in the elements of 'array'
+  let output = headerColumns.join(",") + "\n";
+  // fetch data from array, consider only attributes in headerColumns
+  array.forEach(el => {
+    const row = [];
+    headerColumns.forEach(col => {
+      let value = el[col];
+      if (value instanceof Array) {
+        value = value.join('|');
+      }
+      if (!(typeof value == 'string' || value instanceof String)) {
+        value = String(value);
+      }
+      if (value.includes(',')) {
+        value = `"${value}"`;
+      }
+      row.push(value);
+    })
+    output += row.join(',');
+    output += "\n";
+  });
+  const fmt = 'csv';
+  downLoadFile(output, `application/${fmt}`, fmt, label);
+
+}