From ce39689a34da23486b56d49d241ce73e711cf476 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 8 Dec 2023 17:31:11 +0100
Subject: [PATCH] pass slots and props to data-table-server from refseqDb and
strutcutreDb component
---
components/ServerDbTable.vue | 50 ++++++------------------------
components/content/RefseqDb.vue | 27 ++++++++++++++--
components/content/StructureDb.vue | 43 +++++++++++++++++++++++--
3 files changed, 76 insertions(+), 44 deletions(-)
diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index cab71091..62d0e126 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -1,5 +1,6 @@
<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>
diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue
index fcf345d0..3d31c2b1 100644
--- a/components/content/RefseqDb.vue
+++ b/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
diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue
index 577ae7f4..a78517a0 100644
--- a/components/content/StructureDb.vue
+++ b/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
--
GitLab