From 745bb13ce7823d6831586d325da6f5451e6a3706 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 1 Feb 2024 10:31:44 +0100
Subject: [PATCH] Improve ui
---
components/content/MolstarPdbePlugin.vue | 17 +++++++++-----
components/content/StructureDb.vue | 28 ++++++++++--------------
2 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index 03689717..ca79f591 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -13,6 +13,7 @@ export interface Props {
dataUrls?: string[]
dataUrl?: string
uniq?: boolean
+ format?: "pdb" | "cif"
}
const { mobile } = useDisplay()
@@ -52,7 +53,8 @@ const refinedDataUrls = computed(() => {
// const selectedPdb = ref(refinedDataUrls.value?.length > 0 ? refinedDataUrls.value[0] : null)
const props = withDefaults(defineProps<Props>(), {
height: 600,
- uniq: false
+ uniq: false,
+ format: 'pdb'
})
const { width, height } = useDisplay()
@@ -158,10 +160,15 @@ const moleculeFormat: Ref<string> = ref("pdb")
<template>
<template v-if="uniq">
- <v-row>
- <v-btn size="x-small" variant="text" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
- <v-btn :disabled="!structureToDownload" size="x-small" variant="text" icon="md:download" class="ml-1"
- :href="structureToDownload"></v-btn>
+ <v-row justify="space-between" dense no-gutters align="center">
+ <v-col>{{ $props.format }}</v-col>
+ <v-col>
+ <v-btn size="x-small" variant="text" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
+ </v-col>
+ <v-col>
+ <v-btn :disabled="!structureToDownload" size="x-small" variant="text" icon="md:download" class="ml-1"
+ :href="structureToDownload"></v-btn>
+ </v-col>
</v-row>
</template>
<v-row v-else>
diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue
index cf2ae87b..f391d3e6 100644
--- a/components/content/StructureDb.vue
+++ b/components/content/StructureDb.vue
@@ -71,7 +71,7 @@ const computedAutocompleteMeiliFacetsProps = computed(() => {
const headers: Ref<Object[]> = ref([
- { title: 'Structure', key: 'structure', sortable: false, removable: false },
+ { title: 'Structure', key: 'structure', sortable: false, removable: false, fixed: true, minWidth: "130px" },
{ title: 'Foldseek', key: 'Foldseek_name', sortable: false },
{ title: "System", key: "System", removable: false },
{ title: "Gene name", key: "gene_name", removable: false },
@@ -212,22 +212,16 @@ const { refinedUrl: downloadAllCifUrl } = useRefinedUrl("/df-all-cifs.tar.gz")
<CollapsibleChips :items="namesToCollapsibleChips(item.system_genes, item.System_name_ok)"></CollapsibleChips>
</template>
<template #[`item.structure`]="{ item }">
- <v-list>
- <v-list-item>
- <v-list-item-title>cif</v-list-item-title>
- <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'"
- :data-urls="[`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`]" uniq>
- </MolstarPdbePlugin>
-
- </v-list-item>
- <v-list-item>
- <v-list-item-title>pdb</v-list-item-title>
- <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'"
- :data-urls="[`/${item.System_name_ok}/${item.pdb}`]" uniq>
- </MolstarPdbePlugin>
- </v-list-item>
- </v-list>
-
+ <v-row no-gutters align="center">
+ <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'"
+ :data-urls="[`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`]" uniq format="cif">
+ </MolstarPdbePlugin>
+ </v-row>
+ <v-row no-gutters align="center">
+ <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'"
+ :data-urls="[`/${item.System_name_ok}/${item.pdb}`]" uniq format="pdb">
+ </MolstarPdbePlugin>
+ </v-row>
--
GitLab