diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue index 03689717de70342291bb98dbeb82650fbcb2b809..ca79f591f39d11a91bc30e8ad6bb784d3d157e1f 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 cf2ae87b0beba4259d9d3712487237e469cda8a0..f391d3e6d2af6536e1136778d7390afa96e1e67e 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>