From fa471d912ac3727a18f9058da99a8d754e1ca9ef Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 10 Jan 2024 17:39:42 +0100
Subject: [PATCH] wip: need to refactor but working
---
components/ServerDbTable.vue | 9 ++--
components/content/MolstarPdbePlugin.vue | 2 +-
components/content/StructureDb.vue | 4 +-
composables/useMeiliFilters.ts | 67 ++++++++++++++++--------
4 files changed, 53 insertions(+), 29 deletions(-)
diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index 940b5ec7..f6baa3d6 100644
--- a/components/ServerDbTable.vue
+++ b/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) {
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index 77df9507..03b842a8 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/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>
diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue
index 12243861..69792041 100644
--- a/components/content/StructureDb.vue
+++ b/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>
diff --git a/composables/useMeiliFilters.ts b/composables/useMeiliFilters.ts
index f88f2681..d04ec0b1 100644
--- a/composables/useMeiliFilters.ts
+++ b/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 }
}
--
GitLab