Make structure DB work with new ServerDbTable api

components/Nav/Navbar.vue

@@ -32,7 +32,7 @@ watchEffect(() => {
 const sections = ref([
   {
     id: "webservice",
-    label: "webservice",
+    label: "Web service",
     href: runtimeConfig.public.defenseFinderWebservice,
   },
   { id: "wiki", label: "Wiki", to: '/', },

components/ServerDbTable.vue

@@ -149,7 +149,7 @@ const computedFilter = computed(() => {
         if (tmpFilterItems.length % 4 === 0) {
             tmpFilterItems.splice(-1)
         }
-        filtersStr = tmpFilterItems.map((it, index) => {
+        filtersStr = "(" + tmpFilterItems.map((it, index) => {
             const sanitizedValue = it.value.split("-").slice(0, -1).join("-")
             if ((index + 1) % 4 === 3) {
                 return `"${sanitizedValue}"`
@@ -160,7 +160,7 @@ const computedFilter = computed(() => {
                 return `${sanitizedValue}`
             }
 
-        }).join("")
+        }).join("") + ")"
 
     }
 

components/content/RefseqDb.vue

@@ -10,13 +10,11 @@ import { useDownloadBlob } from '@/composables/useDownloadBlob';
 
 import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue"
 import type { ComponentPublicInstance } from 'vue'
-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([])
 
 
 
@@ -61,7 +59,7 @@ const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
 const computedAutocompleteMeiliFacetsProps = computed(() => {
     const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution
     const toValFacets = toValue(autocompleteMeiliFacetsProps).facets
-    if (toValFacetDistribution !== undefined) {
+    if (toValFacetDistribution !== undefined && toValFacets !== undefined) {
         return {
             ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => {
                 if (facet.type === "facet") {
@@ -153,10 +151,6 @@ async function getAllHits(params: { index: string, params: Record<string, any>,
 }
 
 
-const plotHeight = computed(() => {
-    return computedWidth.value / 3;
-    // return 500
-});
 
 const defaultDataTableServerProps = ref({
     showExpand: false

components/content/StructureDb.vue

 <script setup lang="ts">
 import * as Plot from "@observablehq/plot";
 import PlotFigure from "~/components/PlotFigure";
-import type { SortItem } from "@/components/ServerDbTable.vue"
+import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue"
 import { useNumericalFilter } from "@/composables/useNumericalfilter"
 import type { FacetInputItem } from '@/components/AutocompleteMeiliFacets.vue'
 import { ServerDbTable } from "#components"
 
 
+
+
 const sortBy: Ref<SortItem[]> = ref([{ key: 'System', order: "asc" }])
 const itemValue = ref("id");
 const dbName = ref("structure")
@@ -22,28 +24,47 @@ onBeforeMount(async () => {
             hitsPerPage: 25,
         }
     })
-    console.log(toValue(data))
-    facetDistribution.value = toValue(data)?.facetDistribution
+    autocompleteMeiliFacetsProps.value.facetDistribution = 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 autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
+    db: toValue(dbName),
+    facets: [
+        { 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" },
+    ],
+    facetDistribution: undefined
+})
+
+
+
+const computedAutocompleteMeiliFacetsProps = computed(() => {
+    const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution
+    const toValFacets = toValue(autocompleteMeiliFacetsProps).facets
+    if (toValFacetDistribution !== undefined && toValFacets !== undefined) {
+        return {
+            ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => {
+                if (facet.type === "facet") {
+                    const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined
+
+                    return count ? { ...facet, count } : { ...facet }
+                }
+                else {
+                    return { ...facet }
+                }
+            })
+        }
+    }
+    else {
+        return toValue(autocompleteMeiliFacetsProps)
+    }
 })
 
 
@@ -68,7 +89,6 @@ const headers: Ref<Object[]> = ref([
 
 ])
 
-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)
@@ -107,33 +127,10 @@ function pdbNameToCif(pdbPath: string) {
     return `${cifPath}.cif`
 }
 
-function toSystemName(rawName: string) {
-    // Does it work if it's a list of system genes ? 
-    // split on __ for systeme_vgenes
-    return rawName.split("__")[0].toLocaleLowerCase()
-
-}
-
-
-
-const plddtDistribution = computed(() => {
-    if (toValue(msResult)?.facetDistribution?.plddts) {
-        return Object.entries(toValue(msResult).facetDistribution.plddts).map(([key, value]) => { })
-    }
-})
-
-
-
-
-
 </script>
 <template>
-    <ServerDbTable title="Predicted Structures" :db="dbName" :sortBy="sortBy" :facets="computedFacets"
-        :data-table-server-props="dataTableServerProps" :facet-distribution="facetDistribution"
-        :numerical-filters="numericalFilters">
-
-
-
+    <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps"
+        :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" :numerical-filters="numericalFilters">
         <template #numerical-filters="{ search }">
             <v-row>
                 <v-col cols="12" md="12" lg="4">