add structure to refactor

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

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