From ac5dc2dfec1501a5a08bd75362c76979f1939c5d Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 5 Jan 2024 12:48:57 +0100
Subject: [PATCH] callonce to get facetDistri
---
components/AutocompleteMeiliFacets.vue | 39 +++++++++++++++++---------
components/ServerDbTable.vue | 19 +++++++++++--
components/content/RefseqDb.vue | 27 +++++++++++++++---
3 files changed, 64 insertions(+), 21 deletions(-)
diff --git a/components/AutocompleteMeiliFacets.vue b/components/AutocompleteMeiliFacets.vue
index 2133accd..edeac607 100644
--- a/components/AutocompleteMeiliFacets.vue
+++ b/components/AutocompleteMeiliFacets.vue
@@ -24,6 +24,7 @@ export interface Props {
db: string
modelValue: string | undefined
facets: MaybeRef<FacetInputItem[]>
+ facetDistribution: MaybeRef<Record<string, Record<string, number>> | undefined>
}
const emit = defineEmits(['update:modelValue'])
@@ -31,26 +32,18 @@ const props = withDefaults(defineProps<Props>(), {
modelValue: ""
});
const filterItems = ref<FilterItem[] | undefined>(undefined)
-const { result: msResult } = useMeiliSearch(props.db)
+// const { result: msResult } = useMeiliSearch(props.db)
const isAutocompleteFocused = ref<boolean>(false)
+const facetDistribution: Ref<Record<string, Record<string, number>>> = useState('facetDistribution')
const computedFacets = computed(() => {
- const toValMsResult = toValue(msResult)
- if (toValMsResult?.facetDistribution) {
- return Object.keys(toValMsResult?.facetDistribution)
+ const toValFacetDistri = toValue(facetDistribution)
+ if (toValFacetDistri) {
+ return Object.keys(toValFacetDistri)
}
else { return undefined }
})
-const allFacets = ref(undefined)
-onMounted(() => {
-
- // get the facets and keep it
- const toValMsResult = toValue(msResult)
- if (toValMsResult?.facetDistribution) {
- allFacets.value = { ...toValMsResult?.facetDistribution }
- }
-})
const filterStep = computed(() => {
@@ -115,7 +108,7 @@ const autocompleteItems = computed(() => {
const sanitizedValue = value.split("-")[0]
// console.log("compute new facets")
// const facetDistri = msResult.value?.facetDistribution
- const facetDistri = allFacets.value
+ const facetDistri = toValue(facetDistribution)
// console.log(facetDistri)
return facetDistri?.[sanitizedValue] ? Object.entries(facetDistri[sanitizedValue]).map(([key, val]) => {
return {
@@ -193,7 +186,21 @@ function clearFilters() {
filterItems.value = undefined
emitUpdateModelValue()
}
+function deleteOneFilter(index: number) {
+ const toValFilterItems = toValue(filterItems)
+ // check if the next item is an outeroperator
+ const nextFilterItem = toValFilterItems?.slice(index + 1, index + 2)
+ if (nextFilterItem?.length === 1 && nextFilterItem[0].type === 'outerOperator') {
+ toValFilterItems?.splice(index - 2, 4)
+
+ }
+ else {
+ toValFilterItems?.splice(index - 2, 3)
+ }
+
+ // filterItems.value?.splice(index - 2, 2)
+}
</script>
<template>
<v-autocomplete v-model:model-value="filterItems" :items="autocompleteItems" auto-select-first chips clearable multiple
@@ -206,6 +213,10 @@ function clearFilters() {
</v-list-item>
</template>
+ <template #chip="{ props, item, index }">
+ <v-chip v-bind="props" :text="item.raw.title" :closable="item.props.deletable"
+ @click:close="item.props.type === deleteOneFilter(index)"></v-chip>
+ </template>
<template #append>
<v-btn variant="text" icon="md:filter_alt" @click="emitUpdateModelValue" :disabled="!isValidFilters"></v-btn>
</template>
diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index 4135b068..a11c7e8d 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -30,6 +30,7 @@ export interface Props {
numericalFilters?: MaybeRef<string | undefined>
dataTableServerProps: Record<string, any>
columnsToDownload?: MaybeRef<string[] | undefined>
+ facetDistribution: MaybeRef<Record<string, Record<string, number>>>
}
export interface FilterItem {
@@ -48,6 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
sortBy: () => [{ key: "type", order: "asc" }],
numericalFilters: undefined
+
});
@@ -75,6 +77,9 @@ const computedTableHeight = computed(() => {
const pendingDownloadData = ref(false)
+
+
+
const filterInputValues = computed(() => {
if (filterOrSearch.value != null) {
return filterOrSearch.value.filter(({ props }) => props.type !== 'text')
@@ -118,9 +123,12 @@ watch([paginationParams, msSortBy, page], ([newParams, newSort, newPage]) => {
})
+
onMounted(async () => {
searchOrFilter()
emitRefreshRes()
+
+
})
const msFilterCompo = ref<string | undefined>(undefined)
@@ -209,6 +217,10 @@ function clearFilterOrSearch() {
const totalHits = computed(() => {
return toValue(msResult)?.totalHits ?? toValue(msResult)?.estimatedTotalHits ?? 0
})
+const msFacetDistributionParams = computed(() => {
+ return { index: props.db, query: "", params: { ...paginationParams.value } }
+})
+
// watch(filterInputValues, (newSoF) => {
// if (isFilter.value && filterInputValues.value !== null && filterInputValues.value?.length % 3 === 0) {
@@ -356,7 +368,7 @@ function focusedOrBlur(isFocused: boolean) {
prepend-inner-icon="mdi-magnify" single-line clearable :disabled="pendingDownloadData"
class="mx-2" @update:focused="focusedOrBlur"></v-text-field>
</v-toolbar>
- <v-toolbar>
+ <!-- <v-toolbar>
<v-autocomplete ref="autocompleteInput" hide-details v-model:model-value="filterOrSearch"
auto-select-first chips clearable label="Filter results..." :items="autocompleteItems"
single-line item-value="value" item-title="title" multiple return-object
@@ -375,10 +387,10 @@ function focusedOrBlur(isFocused: boolean) {
</v-list-item>
</template>
</v-autocomplete>
- </v-toolbar>
+ </v-toolbar> -->
<v-toolbar>
<AutocompleteMeiliFacets v-model="msFilterCompo" :db="props.db" :facets="$props.facets"
- @update:modelValue="emitRefreshRes">
+ :facet-distribution="msResult?.value?.facetDistribution" @update:modelValue="emitRefreshRes">
</AutocompleteMeiliFacets>
</v-toolbar>
</template>
@@ -420,6 +432,7 @@ function focusedOrBlur(isFocused: boolean) {
</v-card>-->
<v-card variant="flat" color="transparent" :min-width="500" class="mx-2" :rounded="false">
<AutocompleteMeiliFacets v-model="msFilterCompo" :db="props.db" :facets="props.facets"
+ :facet-distribution="msResult?.value?.facetDistribution"
@update:modelValue="emitRefreshRes">
</AutocompleteMeiliFacets>
</v-card>
diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue
index 4dea5562..f461c433 100644
--- a/components/content/RefseqDb.vue
+++ b/components/content/RefseqDb.vue
@@ -15,8 +15,26 @@ import type { FacetInputItem } from '@/components/AutocompleteMeiliFacets.vue'
const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }])
const itemValue = ref("id");
const { width } = useDisplay();
+const dbName = ref("refseq")
const scaleTransform: Ref<string[]> = ref([])
+const facetDistribution: Ref<Record<string, Record<string, number>>> = useState(`${toValue(dbName)}FacetDistribution`)
+await callOnce(async () => {
+
+ console.log("dans le call once")
+ const { data } = await useAsyncMeiliSearch({
+ index: toValue(dbName), query: "", params: {
+ facets: ["*"],
+ filter: [],
+ page: 1,
+ hitsPerPage: 25,
+ }
+ })
+ console.log(data)
+
+
+ facetDistribution.value = toValue(data)?.facetDistribution
+})
const { serialize } = useSerialize()
const { rasterize } = useRasterize()
@@ -75,7 +93,7 @@ const computedHeaders = computed(() => {
}
})]
})
-const { result: msResult } = useMeiliSearch('refseq')
+const { result: msResult } = useMeiliSearch(toValue(dbName))
const computedWidth = computed(() => {
const currentWidth = fullWidth.value ? width.value : width.value / 2
@@ -89,7 +107,7 @@ const allHits: Ref<Record<string, any> | undefined> = ref(undefined)
const pendingAllHits = ref(false)
async function getAllHits(params: { index: string, params: Record<string, any>, query: string }) {
console.log(params.index)
- if (params.index === 'refseq') {
+ if (params.index === toValue(dbName)) {
console.log("get all hits in function ")
console.log(params)
pendingAllHits.value = true
@@ -410,8 +428,9 @@ async function downloadPng(component: ComponentPublicInstance | null, filename:
</v-expansion-panel>
</v-expansion-panels>
- <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :facets="facets"
- :data-table-server-props="dataTableServerProps" @refresh:search="(params) => getAllHits(params)">
+ <ServerDbTable title="RefSeq" :db="dbName" :sortBy="sortBy" :facets="facets"
+ :facet-ditribution="facetDistribution" :data-table-server-props="dataTableServerProps"
+ @refresh:search="(params) => getAllHits(params)">
<template #[`item.accession_in_sys`]="{ item }">
<CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)">
--
GitLab