pass slots and props to data-table-server from refseqDb and strutcutreDb component

components/ServerDbTable.vue

 <script setup lang="ts">
 // import type { FacetDistribution } from "meilisearch";
+import { useSlots } from 'vue'
 import { useDisplay } from "vuetify";
 import { useFacetsStore, type Facets } from '~~/stores/facets'
 import { useMeiliSearch } from "#imports"
@@ -15,6 +16,7 @@ export interface Props {
     facets: string[]
     headers: { title: string, key: string }[]
     itemValue: string
+    dataTableServerProps: { [key: string]: any; }
 }
 
 export interface FilterItem {
@@ -36,8 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
     db: 'refseq',
     sortBy: () => [{ key: "type", order: "asc" }],
 });
-
-
+const slots = useSlots()
+console.log(slots)
 const sortByRef = ref(toValue(props.sortBy))
 const facetsRef = toRef(() => props.facets)
 
@@ -314,15 +316,8 @@ function runTextSearch() {
     }
 }
 
-function namesToCollapsibleChips(names: string[]) {
-    return names.filter((it) => it !== "").map(it => ({ title: it }))
-}
 
-function namesToAccessionChips(names: string[]) {
-    return namesToCollapsibleChips(names).map(it => {
-        return { ...it, href: new URL(it.title, "http://toto.pasteur.cloud").toString() }
-    })
-}
+
 
 
 </script>
@@ -364,37 +359,12 @@ function namesToAccessionChips(names: string[]) {
             </v-row>
         </v-card-text>
         <v-data-table-server v-if="!msError" v-model:page="reactiveParams.page" color="primary"
-            v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded"
-            fixed-header :loading="loading" :headers="headers" :items="msResult?.hits ?? []"
-            :items-length="msResult?.totalHits ?? 0" :item-value="itemValue" density="compact" :height="computedTableHeight"
+            v-bind="dataTableServerProps" v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef"
+            v-model:expanded="expanded" fixed-header :loading="loading" :items="msResult?.hits ?? []"
+            :items-length="msResult?.totalHits ?? 0" density="compact" :height="computedTableHeight"
             class="elevation-1 mt-2">
-            <template #[`item.accession_in_sys`]="{ item }">
-                <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips>
-            </template>
-            <template #[`item.proteins_in_the_prediction`]="{ item }">
-                <CollapsibleChips :items="namesToCollapsibleChips(item.proteins_in_the_prediction)"></CollapsibleChips>
-            </template>
-            <template #[`item.system_genes`]="{ item }">
-                <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes)"></CollapsibleChips>
-            </template>
-
-            <template #[`item.completed`]="{ item }">
-                <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>
-                <v-icon v-else color="warning" icon="md:dangerous"></v-icon>
-            </template>
-
-            <template #expanded-row="{ columns, item }">
-                <tr>
-                    <td :colspan="columns.length">
-                        <v-card flat color="transparent">
-                            <v-card-text>
-                                <MolstarPdbePlugin
-                                    :data-urls="['/avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb', '/avs/AVAST_I, AVAST_I__Avs1A, 0, V - plddts_85.07081.pdb']">
-                                </MolstarPdbePlugin>
-                            </v-card-text>
-                        </v-card>
-                    </td>
-                </tr>
+            <template v-for="(slot, index) of Object.keys(slots)" :key="index" v-slot:[slot]="data">
+                <slot :name="slot" v-bind="data"></slot>
             </template>
 
         </v-data-table-server>

components/content/RefseqDb.vue

@@ -73,7 +73,17 @@ const plotHeight = computed(() => {
     // return 500
 });
 
+const defaultDataTableServerProps = ref({
+    showExpand: false
+})
 
+const dataTableServerProps = computed(() => {
+    return {
+        ...defaultDataTableServerProps.value,
+        headers: computedHeaders.value,
+        itemValue: itemValue.value
+    }
+})
 const defaultBarPlotOptions = computed(() => {
     const y = logTransform.value ? { nice: true, grid: true, type: 'symlog' } : { nice: true, grid: true, type: "linear" }
     // const y = { nice: true, grid: true }
@@ -150,6 +160,16 @@ function capitalize([first, ...rest]) {
     return first.toUpperCase() + rest.join('').toLowerCase();
 }
 
+function namesToCollapsibleChips(names: string[]) {
+    return names.filter((it) => it !== "").map(it => ({ title: it }))
+}
+
+function namesToAccessionChips(names: string[]) {
+    return namesToCollapsibleChips(names).map(it => {
+        return { ...it, href: new URL(it.title, "http://toto.pasteur.cloud").toString() }
+    })
+}
+
 
 </script>
 
@@ -186,7 +206,10 @@ function capitalize([first, ...rest]) {
         </v-row>
     </v-card>
 
-    <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :headers="computedHeaders" :item-value="itemValue"
-        :facets="facets">
+    <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :facets="facets"
+        :data-table-server-props="dataTableServerProps">
+        <template #[`item.accession_in_sys`]="{ item }">
+            <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips>
+        </template>
     </ServerDbTable>
 </template>
\ No newline at end of file

components/content/StructureDb.vue

@@ -5,6 +5,8 @@ const facets: Ref<string[]> = ref(["system", "completed",
     "plddts",])
 const headers: Ref<Object[]> = ref([
     { title: "System", key: "system" },
+    { title: "pdb file", key: "pdb" },
+    { title: "fasta", key: "fasta_file" },
     { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false },
     { title: "System genes", key: "system_genes", sortable: false },
     { title: "Sys id", key: "nb_sys" },
@@ -18,9 +20,46 @@ const headers: Ref<Object[]> = ref([
     { title: "Type", key: "type" }
 ])
 
+const defaultDataTableServerProps = ref({
+    showExpand: true
+})
+
+const dataTableServerProps = computed(() => {
+    return {
+        ...defaultDataTableServerProps.value,
+        headers: headers.value,
+        itemValue: itemValue.value
+    }
+})
+
+function namesToCollapsibleChips(names: string[]) {
+    return names.filter((it) => it !== "").map(it => ({ title: it }))
+}
 </script>
 <template>
-    <ServerDbTable title="Predicted Structures" db="structure" :sortBy="sortBy" :headers="headers" :item-value="itemValue"
-        :facets="facets">
+    <ServerDbTable title="Predicted Structures" db="structure" :sortBy="sortBy" :facets="facets"
+        :data-table-server-props="dataTableServerProps">
+        <template #[`item.proteins_in_the_prediction`]="{ item }">
+            <CollapsibleChips :items="namesToCollapsibleChips(item.proteins_in_the_prediction)"></CollapsibleChips>
+        </template>
+        <template #[`item.system_genes`]="{ item }">
+            <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes)"></CollapsibleChips>
+        </template>
+        <template #expanded-row="{ columns, item }">
+            <tr>
+                <td :colspan="columns.length">
+                    <v-card flat color="transparent">
+                        <v-card-text>
+                            <MolstarPdbePlugin :data-urls="[`/${item.system.toLowerCase()}/${item.pdb}`]">
+                            </MolstarPdbePlugin>
+                        </v-card-text>
+                    </v-card>
+                </td>
+            </tr>
+        </template>
+        <template #[`item.completed`]="{ item }">
+            <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>
+            <v-icon v-else color="warning" icon="md:dangerous"></v-icon>
+        </template>
     </ServerDbTable>
 </template>
\ No newline at end of file