diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue index 72a05af162f6c15fc66583242dff8291158cced9..b3e09b3a02244ae1d85a02b51e336a69a09b219e 100644 --- a/components/content/RefseqDb.vue +++ b/components/content/RefseqDb.vue @@ -36,37 +36,6 @@ const facetDistribution: Ref<Record<string, Record<string, number>> | undefined> // facetDistribution.value = toValue(data)?.facetDistribution // }) -onUpdated(async () => { - console.log("dans le mounted refseq") - const { data } = await useAsyncMeiliSearch({ - index: toValue(dbName), query: "", params: { - facets: ["*"], - filter: [], - page: 1, - hitsPerPage: 25, - } - }) - console.log(toValue(data)) - facetDistribution.value = toValue(data)?.facetDistribution - -}) - - -onMounted(async () => { - console.log("dans le mounted refseq") - const { data } = await useAsyncMeiliSearch({ - index: toValue(dbName), query: "", params: { - facets: ["*"], - filter: [], - page: 1, - hitsPerPage: 25, - } - }) - console.log(toValue(data)) - facetDistribution.value = toValue(data)?.facetDistribution - -}) - onBeforeMount(async () => { console.log("dans le mounted refseq") @@ -80,7 +49,6 @@ onBeforeMount(async () => { }) console.log(toValue(data)) facetDistribution.value = toValue(data)?.facetDistribution - }) const { serialize } = useSerialize() diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue index e12e202ca241fee3b46b4365d029562a1c086c27..afc80298f956882f78e36fb060510a99d7f3dc36 100644 --- a/components/content/StructureDb.vue +++ b/components/content/StructureDb.vue @@ -3,12 +3,50 @@ import * as Plot from "@observablehq/plot"; import PlotFigure from "~/components/PlotFigure"; import type { SortItem } from "@/components/ServerDbTable.vue" import { useNumericalFilter } from "@/composables/useNumericalfilter" +import type { FacetInputItem } from '@/components/AutocompleteMeiliFacets.vue' +import { ServerDbTable } from "#components" -import { ServerDbTable } from "#components" const sortBy: Ref<SortItem[]> = ref([{ key: 'System', order: "asc" }]) const itemValue = ref("id"); -const facets: Ref<string[]> = ref(["System", "subtype", "gene_name", "completed", "prediction_type",]) +const dbName = ref("structure") +const facetDistribution: Ref<Record<string, Record<string, number>> | undefined> = ref(undefined) + +onBeforeMount(async () => { + console.log("dans le mounted refseq") + const { data } = await useAsyncMeiliSearch({ + index: toValue(dbName), query: "", params: { + facets: ["*"], + filter: [], + page: 1, + hitsPerPage: 25, + } + }) + console.log(toValue(data)) + facetDistribution.value = toValue(data)?.facetDistribution + +}) +const facets = ref<FacetInputItem[]>([ + { title: "Defense System", type: "subheader" }, + { title: "System", value: "System", type: "facet", icon: "mdi-virus-outline", }, + { title: "Subsystem", value: "subtype", type: "facet", icon: "mdi-virus-outline" }, + { type: "divider" }, + { title: "Gene name", value: "gene_name", type: "facet", icon: "mdi-dna" }, + { title: "Completed", value: "completed", type: "facet", icon: "md:done" }, + { title: "Prediction type", value: "prediction_type", type: "facet", icon: "mdi-molecule" }, +]) + +const computedFacets = computed(() => { + const toValFacetDistribution = toValue(facetDistribution) + console.log(toValFacetDistribution) + return toValue(facets).map(facet => { + const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined + + return count ? { ...facet, count } : { ...facet } + }) +}) + + const headers: Ref<Object[]> = ref([ { title: 'Structure', key: 'structure', sortable: false, removable: false }, { title: "System", key: "System", removable: false }, @@ -30,7 +68,7 @@ const headers: Ref<Object[]> = ref([ ]) -const { search: msSearch, result: msResult } = useMeiliSearch('structure') +const { search: msSearch, result: msResult } = useMeiliSearch(toValue(dbName)) const { range: plddtsRange, stringifyFilter: plddtsFilter, reset: plddtsReset } = useNumericalFilter("plddts", 0, 100) const { range: iptmRange, stringifyFilter: iptmFilter, reset: iptmReset } = useNumericalFilter("iptm+ptm", 0, 1) const { range: pdockqRange, stringifyFilter: pdockqFilter, reset: pdockqReset } = useNumericalFilter("pDockQ", 0, 1) @@ -90,8 +128,9 @@ const plddtDistribution = computed(() => { </script> <template> - <ServerDbTable title="Predicted Structures" db="structure" :sortBy="sortBy" :facets="facets" - :data-table-server-props="dataTableServerProps" :numerical-filters="numericalFilters"> + <ServerDbTable title="Predicted Structures" :db="dbName" :sortBy="sortBy" :facets="computedFacets" + :data-table-server-props="dataTableServerProps" :facet-distribution="facetDistribution" + :numerical-filters="numericalFilters">