Skip to content
Snippets Groups Projects
Commit ce39689a authored by Remi PLANEL's avatar Remi PLANEL
Browse files

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

parent 38c32878
No related branches found
No related tags found
1 merge request!134Resolve "Table with all PDB files, to make them available to download"
Pipeline #117934 failed with stages
in 1 minute and 50 seconds
This commit is part of merge request !134. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
components/ServerDbTable.vue
+ 10
− 40
View file @ ce39689a
<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
+ 25
− 2
View file @ ce39689a
......@@ -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
+ 41
− 2
View file @ ce39689a
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment