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

add download and view structure btn

parent 7b08fd54
No related branches found
No related tags found
3 merge requests!229Draft: Modify all articles with article struct,!228Uniq molstar plugin per page,!226Resolve "Design of the structure section in a system's page"
Pipeline #127249 waiting for manual action with stages
in 8 minutes and 42 seconds
......@@ -5,6 +5,7 @@ import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
const { page } = useContent();
// get the structures
const structures = ref()
const msIndexName = ref<string>("structure")
const stuctureUrls = ref<string[] | undefined>(undefined)
const headers = ref<Record<string, any>[]>([
......@@ -29,6 +30,14 @@ const groupBy = ref([
])
onBeforeMount(() => {
fetchStructures()
})
onMounted(() => {
fetchStructures()
})
function namesToCollapsibleChips(names: string[], systemDir: string, file: string | null = null) {
if (file === null) {
return names.filter((it) => it !== "").map(it => ({ title: it.split("__")[1] }))
......@@ -41,26 +50,41 @@ function pdbNameToCif(pdbPath: string) {
return `${cifPath}.cif`
}
function displayStructure(item) {
stuctureUrls.value = [`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`]
stuctureUrls.value = item.structuresUrls
}
const sanitizedStructures = computed(() => {
const toValStructures = toValue(structures)
if (toValStructures?.hits?.length > 0) {
// ==================================================================================
// ASYNC PART
const { data: structures, error, refresh } = await useAsyncMeiliSearch({
index: toValue(msIndexName),
query: "",
params: {
facets: ["*"],
filter: [`System='${toValue(page).title}'`, "completed='true'"],
return toValStructures.hits.map(item => {
return { ...item, structuresUrls: [`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`] }
})
}
return []
})
if (error.value) {
throw createError(`Cannot get structure for system: ${page.title}`)
}
// ==================================================================================
// ASYNC PART
async function fetchStructures() {
const { data, error, refresh } = await useAsyncMeiliSearch({
index: toValue(msIndexName),
query: "",
params: {
facets: ["*"],
filter: [`System='${toValue(page).title}'`, "completed='true'"],
}
})
structures.value = data.value
if (error.value) {
throw createError(`Cannot get structure for system: ${page.title}`)
}
}
// watch(page() => {
......@@ -68,10 +92,12 @@ if (error.value) {
// refresh()
// })
console.log(structures)
</script>
<template>
<v-card flat>
<v-data-table :headers="headers" :items="structures.hits" :group-by="groupBy">
<v-data-table :headers="headers" :items="sanitizedStructures" :group-by="groupBy">
<template #[`item.proteins_in_the_prediction`]="{ item }">
<CollapsibleChips
:items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.System_name_ok, item.fasta_file)">
......@@ -92,8 +118,25 @@ console.log(structures)
</tr>
</template>
<template #[`item.structure`]="{ item }">
<v-row no-gutters align="center">
<v-btn v-if="item?.pdb && item.pdb !== 'na'" @click="displayStructure(item)">view</v-btn>
<v-row justify="space-between" dense no-gutters align="center">
<v-col>
<v-btn size="x-small" variant="text" icon="md:visibility"
@click="displayStructure(item)"></v-btn>
</v-col>
<v-col>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn :disabled="item.structuresUrls?.length < 1" size="x-small" variant="text"
icon="md:download" class="ml-1" v-bind="props"></v-btn>
</template>
<v-list>
<v-list-item v-for="(url, index) in item.structuresUrls" :key="index" :value="index"
:href="url">
<v-list-item-title>{{ url.split('.').slice(-1)[0] }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</template>
</v-data-table>
......
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