wip: need to refactor but working

components/ServerDbTable.vue

@@ -37,7 +37,7 @@ export interface AutocompleteMeiliFacetProps {
 export interface Props {
     title?: string
     sortBy?: SortItem[]
-    numericalFilters?: MaybeRef<string[] | undefined>
+    numericalFilters?: Ref<string[] | undefined>
     dataTableServerProps: Record<string, any>
     columnsToDownload?: MaybeRef<string[] | undefined>
     autocompleteMeiliFacetsProps: AutocompleteMeiliFacetProps
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
     title: '',
     columnsToDownload: undefined,
     sortBy: () => [{ key: "type", order: "asc" }],
-    numericalFilters: undefined,
+    numericalFilters: () => ref(undefined),
     autocompleteMeiliFacetsProps: () => {
         return {
             db: 'refseq',
@@ -86,7 +86,7 @@ const computedTableHeight = computed(() => {
 
 const pendingDownloadData = ref(false)
 
-
+const toRefNumericalFilters = toRef(props.numericalFilters)
 // const meiliFilters = ref<string | undefined>(undefined)
 
 const filterInputValues = computed(() => {
@@ -170,7 +170,8 @@ const computedFilterStr = computed(() => {
 })
 
 
-const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo, toRef(props.numericalFilters))
+const computedF = computed(() => toValue(props.numericalFilters))
+const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo, computedF)
 // const computedFilter = computed(() => {
 //     const toValFilters = toValue(msFilterCompo)
 //     if (toValFilters !== undefined && toValFilters.length > 0) {

components/content/MolstarPdbePlugin.vue

@@ -192,7 +192,7 @@ const moleculeFormat: Ref<string> = ref("pdb")
                             class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
                             :height="computedHeight" :width="computedWidth" position="relative">
                             <pdbe-molstar ref="pdbeMolstarComponent" landscape="true" hide-controls="true"
-                                :custom-data-url="selectedPdb" alphafold-view="true"
+                                :custom-data-url="selectedPdb" alphafold-view="true" sequence-panel
                                 :custom-data-format="moleculeFormat"></pdbe-molstar>
                         </v-sheet>
                     </v-col>

components/content/StructureDb.vue

@@ -100,7 +100,9 @@ function isString(item: Ref<string | undefined>): item is Ref<string> {
 }
 
 const numericalFilters = computed(() => {
+    console.log("je compute mes numerical filters")
     const listFilters = [plddtsFilter, iptmFilter, pdockqFilter].filter(isString).map(f => toValue(f))
+    console.log(listFilters)
     return listFilters.length > 0 ? listFilters : undefined
 })
 
@@ -136,7 +138,7 @@ function pdbNameToCif(pdbPath: string) {
 </script>
 <template>
     <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps"
-        :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" :numerical-filters="numericalFilters">
+        :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" :numerical-filters="toRef(numericalFilters)">
         <template #numerical-filters="{ search }">
             <v-list>
                 <v-list-item>

composables/useMeiliFilters.ts

@@ -2,13 +2,24 @@ import type { FilterItem } from '@/components/AutocompleteMeiliFacets.vue'
 import { filter } from '@observablehq/plot'
 import type { Filter } from "meilisearch"
 
-export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, numericalFilters: MaybeRef<string[] | undefined>) {
+export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, numericalFilters: Ref<string[] | undefined>) {
 
+  const arrayFilters = ref<Filter | undefined>(undefined)
+  const nf = toRef(numericalFilters)
 
-  const arrayFilters: ComputedRef<Filter | undefined> = computed(() => {
+  watch(nf, () => {
+    console.log("mon nf", nf)
+  })
+
+
+  watch(numericalFilters,() => {
+    console.log("je watch numerical filter", numericalFilters)
+  })
+
+  watchEffect(() => {
     console.log("dans le computed de useMeilisFilter")
     const toValFilters = toValue(filters)
-    const toValNumericalFilter = toValue(numericalFilters)
+    const toValNumericalFilter = toValue(nf)
     console.log(toValNumericalFilter)
     let categoricalFilters: FilterItem[] | undefined = undefined
     if (toValFilters !== undefined && toValFilters.length >= 3) {
@@ -21,7 +32,7 @@ export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, num
 
 
       let previousOperator: 'AND' | 'OR' | undefined = undefined
-      const arrayFilters = cachedFilters.reduce((acc, curr, index) => {
+      const arrayFilters = cachedFilters.reduce<FilterItem[]>((acc, curr, index) => {
         const sanitizedValue = curr.value.split("-").slice(0, -1).join("-")
         const position = index + 1
         switch (position % 4) {
@@ -29,6 +40,7 @@ export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, num
             // if this is the first time pass by an outeroperator
             if (previousOperator === undefined) {
               const newFilter = acc.splice(-3).join("")
+              console.log("newFilter: ", newFilter)
               if (sanitizedValue === 'OR') {
                 acc = [[newFilter]]
               }
@@ -49,10 +61,15 @@ export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, num
               if (Array.isArray(previousElem)) {
                 acc.slice(-1)[0].push(newFilter)
               }
-              else {
+              else if (previousElem !== undefined) {
                 const previousElem = acc.splice(-1)[0]
+                console.log("previousElem: ", previousElem)
+                console.log("newFilter: ", newFilter)
                 acc.push([previousElem, newFilter])
               }
+              else {
+                acc.push(newFilter)
+              }
             }
             break
           default:
@@ -61,32 +78,36 @@ export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, num
         }
         return acc
       }, [])
-      categoricalFilters = arrayFilters
+      categoricalFilters = arrayFilters.length > 0 ? arrayFilters : undefined
     }
 
-    function isFilterItem(item: FilterItem[] | undefined): item is FilterItem[] {
+    function isFilterItem(item: FilterItem[] | string[] | undefined): item is FilterItem[] | string[] {
       return item !== undefined
 
     }
     console.log(categoricalFilters)
-    const filterItemArray = [categoricalFilters, toValNumericalFilter].filter(isFilterItem).reduce((acc, curr) => [...acc, ...curr], [])
+    const filterItemArray = [categoricalFilters, toValNumericalFilter].filter(isFilterItem).flat()
     console.log(filterItemArray)
-    const returnArr = filterItemArray.reduce<FilterItem[] | undefined>((acc, curr) => {
-      const toValCurr = toValue(curr)
-      if (toValCurr === undefined) {
-        return acc
-      }
-      else {
-        if (acc !== undefined) {
-          return [...acc, ...toValCurr]
-        }
-        else { return [...toValCurr] }
-      }
-    }, undefined)
-    console.log(returnArr)
-    
-    return returnArr
+    // const returnArr = filterItemArray.reduce<FilterItem | string | undefined>((acc, curr) => {
+    //   const toValCurr = toValue(curr)
+    //   if (toValCurr === undefined) {
+    //     return acc
+    //   }
+    //   else {
+    //     if (acc !== undefined) {
+    //       return [...acc, ...toValCurr]
+    //     }
+    //     else { return [...toValCurr] }
+    //   }
+    // }, undefined)
+    // console.log(returnArr)
+
+    // return returnArr
+    arrayFilters.value = filterItemArray
   })
 
+  // const arrayFilters: ComputedRef<Filter | undefined> = computed(() => {
+  // })
+
   return { arrayFilters }
 }