results: Allow downloading ClusterBlast and CompaRiPPson results as TSV

Signed-off-by: Kai Blin <kblin@biosustain.dtu.dk>

Author: kblin

src/components/common/ClusterblastResults.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import { downloadTsv } from "@/utils/tsv";
+
 const props = defineProps<{
     hits: any[];
 }>();
 
 function getAreaLink(hit: any) {
     return `/area?record=${hit.s_acc}&start=${hit.s_rec_start}&end=${hit.s_rec_end}`;
 }
+
+function triggerDownload(){
+        downloadTsv(props.hits, 'clusterblast_results.tsv');
+}
 </script>
 
 <template>
     <div v-if="props.hits.length > 0">
+        <button class="dl-button" @click="triggerDownload">Download TSV</button>
         <table>
             <thead>
                 <tr>
@@ -38,4 +45,7 @@ function getAreaLink(hit: any) {
 .identity {
     text-align: right;
 }
+.dl-button {
+    float: right;
+}
 </style>

src/components/common/ComparippsonResults.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import { downloadTsv } from "@/utils/tsv";
+
 const props = defineProps<{
     hits: any[];
 }>();
 
 function getAreaLink(hit: any) {
     return `/area?record=${hit.s_acc}&start=${hit.s_rec_start}&end=${hit.s_rec_end}`;
 }
+
+function triggerDownload(){
+        downloadTsv(props.hits, 'clusterblast_results.tsv');
+}
 </script>
 
 <template>
     <div v-if="props.hits.length > 0">
+        <button class="dl-button" @click="triggerDownload">Download TSV</button>
         <table>
             <thead>
                 <tr>
@@ -40,4 +47,7 @@ function getAreaLink(hit: any) {
 .identity {
     text-align: right;
 }
+.dl-button {
+    float: right;
+}
 </style>

src/utils/tsv.ts

@@ -0,0 +1,42 @@
+export const downloadTsv = (
+	data: object[],
+	filename: string,
+	headers?: string[],
+	separator?: string,
+) => {
+	if (!data || !data.length) {
+		return;
+	}
+	if (separator === undefined) {
+		separator = "\t";
+	}
+
+	const keys: string[] = Object.keys(data[0]);
+
+	let columnHeaders: string[];
+
+	if (headers) {
+		columnHeaders = headers;
+	} else {
+		columnHeaders = keys;
+	}
+
+	const contentRows = data.map(dataItem => {
+		return keys.map(key => {
+			if (dataItem[key] === null || dataItem[key] === undefined) {
+				return "";
+			}
+			return String(dataItem[key]).replace(/\t/g, " ");
+		}).join(separator);
+	});
+
+	const tsvData = [columnHeaders.join(separator), ...contentRows].join("\n")
+
+	const blob = new Blob([tsvData], { type: "text/csv;charset=utf-8" });
+	const link = document.createElement("a");
+	link.href = window.URL.createObjectURL(blob);
+	link.download = filename;
+	link.click();
+};
+
+