diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index b6acb9c4d52264def2222c67ce99ecce0d8c52ce..95a2402f5e385fc21c7be9e0725cf64eb4a079a5 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -1,5 +1,6 @@
<script setup lang="ts">
// import type { FacetDistribution } from "meilisearch";
+import { useCsvDownload } from "@/composables/useCsvDownload"
import { useSlots } from 'vue'
import { useDisplay } from "vuetify";
import * as Plot from "@observablehq/plot";
@@ -7,6 +8,8 @@ import PlotFigure from "~/components/PlotFigure";
import * as d3 from "d3";
import { useThrottleFn } from '@vueuse/core'
import { useMeiliSearch } from "#imports"
+// import { saveAs } from "file-saver";
+import { useFileSystemAccess } from '@vueuse/core'
export interface SortItem {
key: string,
order: boolean | 'asc' | 'desc'
@@ -59,11 +62,9 @@ const computedTableHeight = computed(() => {
return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
})
const plddtRange = ref([0, 100])
-
-// const { pending: pendingDownloadData, downloadCsv } = useCsvDownload(props.db, `df-${props.db}`)
+const pendingDownloadData = ref(false)
const filterInputValues = computed(() => {
- // console.log("recompouted FILTER value")
if (filterOrSearch.value != null) {
return filterOrSearch.value.filter(({ props }) => props.type !== 'text')
} else {
@@ -71,24 +72,6 @@ const filterInputValues = computed(() => {
}
})
-// const queryInputValue = computed(() => {
-// if (filterOrSearch.value !== null) {
-// const phrase = filterOrSearch.value
-// .filter((f) => {
-// return f.props.type === 'text'
-// })
-// .map((f) => {
-// return f.value
-// })
-// if (phrase.length > 1) {
-// return `${phrase.join(" ")}`
-// }
-// else { return phrase[0] }
-// } else {
-// return null
-// }
-// })
-
const isFilter = computed(() => {
return Array.isArray(filterOrSearch.value)
})
@@ -315,23 +298,19 @@ function clearSearch() {
search.value = ""
}
-const { pending: pendingDownloadData, downloadCsv } = useCsvDownload(props.db)
-
-
-
-// const groupSortDomain = computed(() => {
-// console.log(msResult.value)
-// return msResult.value ? d3.groupSort(msResult.value?.hits?.filter((d) => d.phylum), (g) => d3.median(g, (d) => d.phylum), (d) => d.type) : []
-// })
-
+async function downloadData() {
+ pendingDownloadData.value = true
+ try {
+ const { data } = await useAsyncMeiliSearch({
+ index: props.db,
+ params: { ...toValue(notPaginatedParams), filter: toValue(computedFilter), sort: toValue(msSortBy) },
+ query: toValue(search),
+ })
-function downloadData() {
- downloadCsv(
- props.db,
- toValue(search), { ...toValue(notPaginatedParams), filter: toValue(computedFilter), sort: toValue(msSortBy) },
- props.columnsToDownload
-
- )
+ useCsvDownload(data, props.columnsToDownload, props.title)
+ } finally {
+ pendingDownloadData.value = false
+ }
}
</script>
<template>
@@ -366,8 +345,9 @@ function downloadData() {
<template #top>
<v-toolbar floating><v-toolbar-title class="text-capitalize">
<v-badge :content="totalHits" color="primary" inline>
- <v-btn prepend-icon="md:download" variant="text" color="primary" @click="downloadData()">{{
- props.title }}
+ <v-btn prepend-icon="md:download" :loading="pendingDownloadData" variant="text" color="primary"
+ @click="downloadData()">{{
+ props.title }}
</v-btn>
</v-badge>
</v-toolbar-title>
diff --git a/composables/useCsvDownload.ts b/composables/useCsvDownload.ts
index 3fb7d1f0fb7d1dc5db202704d6fd814ea7670bb1..a84e6ad90db80aaf3a27d3f9c0acef621fc25b26 100644
--- a/composables/useCsvDownload.ts
+++ b/composables/useCsvDownload.ts
@@ -1,66 +1,40 @@
-import { ref } from 'vue';
import Papa from 'papaparse';
-import { saveAs } from "file-saver";
-import { column } from '@observablehq/plot';
+// import { saveAs } from "file-saver";
-export function useCsvDownload(baseName: MaybeRef<string> = "df"
+export function useCsvDownload(
+ rawData: MaybeRef<Record<string, any>>,
+ columns: MaybeRef<string[] | undefined> = undefined,
+ baseName: MaybeRef<string> = 'data'
) {
- const pending = ref(false)
-
- // const { search: msSearch, result: msResult } = useMeiliSearch(toValue(index))
- const filename = ref(`${toValue(baseName)}-data.csv`)
- const downloadCsv = async (
- index: MaybeRef<string>,
- query: MaybeRef<string>,
- params: MaybeRef<Record<string, any>>,
- columns: MaybeRef<string[] | undefined> = undefined
- ) => {
-
-
- const toValueParams = toValue(params)
- const filterName = toValueParams?.filter ? toValueParams.filter.replaceAll('\"', "") : ''
- filename.value = `${toValue(baseName)}-${filterName}.csv`
- pending.value = true
-
- try {
- const { data, error } = await useAsyncMeiliSearch({
- index: toValue(index),
- params: toValueParams,
- query: toValue(query)
- })
-
- if (toValue(data)?.hits?.length > 0) {
- const sanitizedData = toValue(data).hits.map(row => {
- let sanitizedRow = { ...row }
- if (sanitizedRow?.PFAM?.length > 0) {
- sanitizedRow = {
- ...sanitizedRow,
- PFAM: sanitizedRow.PFAM.map(({ AC }) => AC).join(", ")
- }
-
- }
- if (sanitizedRow?.contributors?.length > 0) {
- sanitizedRow = {
- ...sanitizedRow,
- contributors: sanitizedRow.contributors.join(", ")
- }
- }
- return sanitizedRow
-
- })
- const csvContent = Papa.unparse(sanitizedData, { columns: toValue(columns) });
- const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
- saveAs(blob, `${toValue(filename)}`);
+ const filename = ref(`df-${toValue(baseName)}.csv`)
+ const data = ref()
+ const blob = ref()
+ if (toValue(rawData)?.hits?.length > 0) {
+ data.value = toValue(rawData).hits.map(row => {
+ let sanitizedRow = { ...row }
+ if (sanitizedRow?.PFAM?.length > 0) {
+ sanitizedRow = {
+ ...sanitizedRow,
+ PFAM: sanitizedRow.PFAM.map(({ AC }) => AC).join(", ")
+ }
+ }
+ if (sanitizedRow?.contributors?.length > 0) {
+ sanitizedRow = {
+ ...sanitizedRow,
+ contributors: sanitizedRow.contributors.join(", ")
+ }
}
- } finally {
- pending.value = false
- }
+ return sanitizedRow
+ })
+ const csvContent = Papa.unparse(toValue(data), { columns: toValue(columns) });
+ blob.value = new Blob([csvContent], { type: "text/csv" });
+ var a = document.createElement("a");
+ a.href = URL.createObjectURL(blob.value);
+ a.download = filename.value;
+ a.click();
+ URL.revokeObjectURL(a.href);
}
-
-
- return {
- pending, downloadCsv,
- };
+ return { data, filename }
}
diff --git a/deploy/df-wiki/templates/pvc-structure.yaml b/deploy/df-wiki/templates/pvc-structure.yaml
index acbe7073e7a77902ee95ab2b60fcbede0353a6f4..29334d59b0efa7867b171bd746ac6a536615d267 100644
--- a/deploy/df-wiki/templates/pvc-structure.yaml
+++ b/deploy/df-wiki/templates/pvc-structure.yaml
@@ -9,6 +9,6 @@ spec:
- ReadWriteMany
resources:
requests:
- storage: 30Gi
+ storage: 35Gi
storageClassName: isilon
volumeMode: Filesystem
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index db81ba7dee9d57a906c9b44fd256bcc57aa1be44..4796f6d6d72f6920cc876d96509f496ae7876f09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
"@observablehq/plot": "^0.6.13",
"@pinia/nuxt": "^0.5.1",
"d3": "^7.8.5",
- "file-saver": "^2.0.5",
"meilisearch": "^0.36.0",
"mermaid": "^10.6.1",
"papaparse": "^5.4.1",
diff --git a/package.json b/package.json
index a45f22d73d4c9a0b78363f37736be7080d390062..d1dcd76fdcd518f015043bf684e1d0776ba82c8c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
"@observablehq/plot": "^0.6.13",
"@pinia/nuxt": "^0.5.1",
"d3": "^7.8.5",
- "file-saver": "^2.0.5",
"meilisearch": "^0.36.0",
"mermaid": "^10.6.1",
"papaparse": "^5.4.1",