diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index cab710918aae2e8119af91f77de6af7a438b6893..96fdec804fd0941ae442e96ded310be04f0e2ac2 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -2,6 +2,8 @@
// import type { FacetDistribution } from "meilisearch";
import { useDisplay } from "vuetify";
import { useFacetsStore, type Facets } from '~~/stores/facets'
+
+
import { useMeiliSearch } from "#imports"
interface SortItem {
key: string,
@@ -59,6 +61,7 @@ const computedTableHeight = computed(() => {
return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
})
+const { pending: pendingDownloadData, downloadCsv } = useCsvDownload(props.db, `df-${props.db}`)
const filterInputValues = computed(() => {
// console.log("recompouted FILTER value")
@@ -106,19 +109,20 @@ const msSortBy = computed(() => {
const reactiveParams = reactive({
- hitsPerPage: 25,
- page: 1,
- limit: 1000,
facets: ["*"],
filter: [],
sort: ["type:asc"],
- // prefix_length: 3,
- // attributesToHighlight: ["*"]
+})
+const paginationParams = computed(() => {
+ return { ...reactiveParams, page: toValue(page), hitsPerPage: toValue(hitsPerPage), limit: 500 }
})
+const notPaginatedParams = computed(() => {
+ return { ...reactiveParams, limit: 500000 }
+})
-watch([reactiveParams, msSortBy, page], ([newParams, newSort, newPage]) => {
+watch([paginationParams, msSortBy, page], ([newParams, newSort, newPage]) => {
searchOrFilter()
})
@@ -134,12 +138,18 @@ const msError = computed(() => {
} else { return false }
})
-async function searchOrFilter() {
+async function searchOrFilter(pagination = true) {
try {
loading.value = true
// const q = queryInputValue.value === null ? "" : queryInputValue.value
const q = search.value
- await msSearch(q, { ...reactiveParams, filter: msFilter.value, sort: msSortBy.value })
+ if (pagination) {
+ await msSearch(q, { ...paginationParams.value, filter: msFilter.value, sort: msSortBy.value })
+ }
+ else {
+ await msSearch(q, { ...notPaginatedParams.value, filter: msFilter.value, sort: msSortBy.value })
+ }
+
} catch (error: any) {
filterError.value = error
console.log(error)
@@ -169,6 +179,10 @@ watch(msResult, (newRes) => {
+const totalHits = computed(() => {
+ return toValue(msResult)?.totalHits ?? toValue(msResult)?.estimatedTotalHits ?? null
+})
+
watch(filterInputValues, (newSoF) => {
if (isFilter.value && filterInputValues.value !== null && filterInputValues.value?.length % 3 === 0) {
msFilter.value = filterInputValues.value.map((it, index) => {
@@ -323,7 +337,9 @@ function namesToAccessionChips(names: string[]) {
return { ...it, href: new URL(it.title, "http://toto.pasteur.cloud").toString() }
})
}
-
+function downloadData() {
+ downloadCsv(search, msFilter, msSortBy, notPaginatedParams)
+}
</script>
<template>
@@ -363,11 +379,22 @@ function namesToAccessionChips(names: string[]) {
</v-col>
</v-row>
</v-card-text>
- <v-data-table-server v-if="!msError" v-model:page="reactiveParams.page" color="primary"
- v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded"
- fixed-header :loading="loading" :headers="headers" :items="msResult?.hits ?? []"
- :items-length="msResult?.totalHits ?? 0" :item-value="itemValue" density="compact" :height="computedTableHeight"
- class="elevation-1 mt-2">
+ <v-data-table-server v-if="!msError" v-model:page="page" color="primary" v-model:items-per-page="hitsPerPage"
+ v-model:sortBy="sortByRef" v-model:expanded="expanded" fixed-header :loading="loading" :headers="headers"
+ :items="msResult?.hits ?? []" :items-length="totalHits" :item-value="itemValue" density="compact"
+ :height="computedTableHeight" class="elevation-1 mt-2">
+ <template #top>
+ <v-toolbar><v-toolbar-title class="text-capitalize">
+ {{ props.db }}
+ </v-toolbar-title><v-spacer></v-spacer>
+ <v-toolbar-item>
+
+ <v-btn :loading="pendingDownloadData" :disabled="totalHits > 10000" @click="downloadData" icon variant="text"
+ class="text-none mr-15">
+ <v-badge :content="totalHits" color="info" floating>
+ <v-icon>md:download</v-icon></v-badge></v-btn>
+ </v-toolbar-item></v-toolbar>
+ </template>
<template #[`item.accession_in_sys`]="{ item }">
<CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips>
</template>
diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue
index 148235802245ef61934d89436f7b914b457318ef..6e674595f21301ac6c7452cb407cd9d167878e6e 100644
--- a/components/content/RefseqDb.vue
+++ b/components/content/RefseqDb.vue
@@ -74,7 +74,6 @@ const plotHeight = computed(() => {
// return 500
});
-
const defaultBarPlotOptions = computed(() => {
const y = logTransform.value ? { nice: true, grid: true, type: 'symlog' } : { nice: true, grid: true, type: "linear" }
// const y = { nice: true, grid: true }
@@ -152,6 +151,7 @@ function capitalize([first, ...rest]) {
}
+
</script>
<template>
diff --git a/composables/useCsvDownload.ts b/composables/useCsvDownload.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9534544a1654e9d66d4bf0888787fa55152ed0b0
--- /dev/null
+++ b/composables/useCsvDownload.ts
@@ -0,0 +1,48 @@
+import { ref } from 'vue';
+import Papa from 'papaparse';
+import { saveAs } from "file-saver";
+
+export function useCsvDownload(index: MaybeRef<string>, baseName: MaybeRef<string> = "df"
+) {
+ const pending = ref(false)
+ const { search: msSearch, result: msResult } = useMeiliSearch(toValue(index))
+ const filename = ref(`${toValue(baseName)}-data.csv`)
+ const downloadCsv = async (
+
+ query: MaybeRef<string>,
+ filter: MaybeRef<string>,
+ sortBy: MaybeRef<string[]>,
+ params: MaybeRef<Record<string, any>>,
+ ) => {
+
+
+ filename.value = `${toValue(baseName)}-${toValue(filter)}.csv`
+ pending.value = true
+ try {
+ await msSearch(
+ toValue(query),
+ {
+ ...toValue(params),
+ filter: toValue(filter),
+ sort: toValue(sortBy)
+ })
+ const csvContent = Papa.unparse(toValue(msResult).hits);
+ // console.log(csvContent)
+ const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+ saveAs(blob, `${toValue(filename)}`);
+ } finally {
+ pending.value = false
+ }
+
+
+ }
+ // watch(msResult, (newRes) => {
+ // console.log("save file !!!!!!")
+
+
+ // })
+
+ return {
+ pending, downloadCsv,
+ };
+}
diff --git a/composables/useDownloadCsv.ts b/composables/useDownloadCsv.ts
deleted file mode 100644
index 724fd797b3f5bbbaec0b44a24dc3e31026bd6f48..0000000000000000000000000000000000000000
--- a/composables/useDownloadCsv.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ref } from 'vue';
-import Papa from 'papaparse';
-
-export default function useCsvDownload() {
- const downloadCsv = (data: Record<string, any>[], fileName: string): void => {
- const csvContent = Papa.unparse(data);
- const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-
- const link = document.createElement('a');
- if (link.download !== undefined) {
- const url = URL.createObjectURL(blob);
- link.setAttribute('href', url);
- link.setAttribute('download', fileName);
- link.style.visibility = 'hidden';
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
- };
-
- return {
- downloadCsv,
- };
-}
diff --git a/package-lock.json b/package-lock.json
index 1af801a6ce39a5081b8214f8278680b702277453..4e6dfc38ca84a2428e39f5875920f24e01695090 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,11 @@
"@observablehq/plot": "^0.6.11",
"@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",
"pinia": "^2.1.6",
- "vue-json-csv": "^2.1.0",
"yaml": "^2.3.3"
},
"devDependencies": {
@@ -5704,7 +5705,8 @@
},
"node_modules/file-saver": {
"version": "2.0.5",
- "license": "MIT"
+ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+ "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/file-uri-to-path": {
"version": "1.0.0",
@@ -7441,10 +7443,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/lodash.mapkeys": {
- "version": "4.6.0",
- "license": "MIT"
- },
"node_modules/lodash.memoize": {
"version": "4.1.2",
"dev": true,
@@ -7458,10 +7456,7 @@
},
"node_modules/lodash.pick": {
"version": "4.4.0",
- "license": "MIT"
- },
- "node_modules/lodash.pickby": {
- "version": "4.6.0",
+ "dev": true,
"license": "MIT"
},
"node_modules/lodash.uniq": {
@@ -11064,7 +11059,8 @@
},
"node_modules/papaparse": {
"version": "5.4.1",
- "license": "MIT"
+ "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+ "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
},
"node_modules/parent-module": {
"version": "1.0.1",
@@ -14830,17 +14826,6 @@
}
}
},
- "node_modules/vue-json-csv": {
- "version": "2.1.0",
- "dependencies": {
- "file-saver": "^2.0.5",
- "lodash.mapkeys": "^4.6.0",
- "lodash.pick": "^4.4.0",
- "lodash.pickby": "^4.6.0",
- "papaparse": "^5.3.2",
- "vue": "^3.2"
- }
- },
"node_modules/vue-router": {
"version": "4.2.5",
"dev": true,
diff --git a/package.json b/package.json
index 98ec1f344441f3a1ef5e8f569e877e7f1b7d99fd..597fb17082ec773708665582feae89a867300dfe 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,11 @@
"@observablehq/plot": "^0.6.11",
"@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",
"pinia": "^2.1.6",
- "vue-json-csv": "^2.1.0",
"yaml": "^2.3.3"
}
}