Improve ui

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>

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>