use ms client directly for strucutre list in article

components/content/ArticleStructure.vue

 <script setup lang="ts">
 import { toValue } from '@vueuse/core';
-import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
+// import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
 
 
 const { page } = useContent();
+const client = useMeiliSearchRef()
+
 // get the structures
 const structures = ref()
 const structureTitle = ref("Structure")
@@ -31,10 +33,6 @@ const groupBy = ref([
 ])
 
 
-
-onBeforeMount(() => {
-    fetchStructures()
-})
 onMounted(() => {
     fetchStructures()
 })
@@ -52,7 +50,6 @@ function pdbNameToCif(pdbPath: string) {
 }
 function displayStructure(item) {
     stuctureUrls.value = item.structuresUrls
-    console.log(item)
     structureTitle.value = `${item.subtype} - ${item.gene_name}`
 
 }
@@ -80,28 +77,19 @@ const sanitizedStructures = computed(() => {
 // ASYNC PART 
 
 async function fetchStructures() {
-    const { data, error, refresh } = await useAsyncMeiliSearch({
-        index: toValue(msIndexName),
-        query: "",
-        params: {
+
+
+    try {
+        const d = await client.index(toValue(msIndexName)).search("", {
             facets: ["*"],
             filter: [`System='${toValue(page).title}'`, "completed='true'"],
-        }
-    })
-    structures.value = data.value
-    if (error.value) {
+        })
+        structures.value = d
+    } catch (error) {
         throw createError(`Cannot get structure for system: ${page.title}`)
     }
 }
 
-// watch(page() => {
-
-
-//     refresh()
-// })
-console.log(structures)
-
-
 </script>
 <template>
     <v-card flat>

components/content/RefArticle.vue

@@ -20,13 +20,12 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <!-- <v-chip v-if="article" variant="text" :href="`#ref-${props.doi}`" class="pa-0 font-italic">{{
-        article?.author[0]?.family ?? "test" }} et al,
-        {{ article?.year }}</v-chip> -->
-    <NuxtLink v-if="article" :href="`#ref-${props.doi}`"
+
+    <NuxtLink v-if="article?.author?.length && article?.author?.length > 0" :href="`#ref-${props.doi}`"
         :class="theme.global.current.value.dark ? 'text-grey-lighten-1' : 'text-grey-darken-2'" class="pa-0 ">{{
         article?.author?.[0]?.family }} et al,
         {{ article?.year }}</NuxtLink>
+    <span v-else>N/A</span>
 </template>
 <style scoped>
 .ref-link {

components/content/pdockqMatrix.vue

@@ -34,7 +34,6 @@ const data = ref<SearchResponse | undefined>(undefined)
 const client = useMeiliSearchRef()
 
 onMounted(async () => {
-    console.log("dans le mounted")
     try {
         const d = await client.index(toValue(dbName)).search("", {
             facets: ["*"],
@@ -43,17 +42,13 @@ onMounted(async () => {
                 ...toValue(filterBase)
             ],
         })
-        console.log(d)
         data.value = d
     } catch (error) {
-        console.log(error)
         throw createError("Error while getting structure pdocks")
     }
 
 })
 
-
-
 const computedSystem = computed(() => {
     const toValPage = toValue(page)
     const toValSystem = toValue(system)
@@ -67,7 +62,6 @@ const computedSystem = computed(() => {
 
 
 const groupedPdocks = computed(() => {
-    console.log(data)
     const toValData = toValue(data)
     const getSeqName = (d) => {
         if (d.includes("__")) {
@@ -78,7 +72,6 @@ const groupedPdocks = computed(() => {
     }
     if (toValData?.hits) {
         return d3.groups(toValData.hits.flatMap(({ System_name_ok, pDockQ, pdb, nb_sys, proteins_in_the_prediction, system_genes }) => {
-            console.log(proteins_in_the_prediction)
             if (proteins_in_the_prediction.length === 2) {
                 const sanitizedSystemGenes = system_genes.map(getSeqName)
                 const sanitizedProteins = proteins_in_the_prediction.map(getSeqName)
@@ -106,9 +99,7 @@ const groupedPdocks = computed(() => {
 
 const computedPDocksMatrixPlotOptions = computed(() => {
     const { marginBottom, marginLeft, marginRight, marginTop } = toValue(margin)
-    console.log(groupedPdocks)
     return toValue(groupedPdocks).map((matrix) => {
-        console.log(matrix)
         return {
             width: matrix[1][0].system_genes.length * 75 + marginLeft + marginRight,
             height: matrix[1][0].system_genes.length * 75 + marginTop + marginBottom,