callonce to get facetDistri

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>

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>

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)">