Handle pdb and cif inputs

components/LayoutWrapper.vue

 <script lang="ts" setup>
+
+import { useDisplay } from 'vuetify'
+
+const { mobile } = useDisplay()
 export interface Props {
   fluid?: boolean
   toc?: boolean
@@ -31,7 +35,7 @@ function onScroll() {
       <v-container v-scroll="onScroll" :fluid="fluid">
         <v-row justify="center">
           <v-col cols="auto">
-            <v-card flat color="transparent" :max-width="fluid ? undefined : 1280">
+            <v-card flat color="transparent" :min-width="mobile ? undefined : 900" :max-width="fluid ? undefined : 1500">
               <slot />
               <EditGitlab v-if="edit" />
               <NavPrevNext v-if="edit" />

components/content/MolstarPdbePlugin.vue

@@ -62,11 +62,11 @@ const computedHeight = computed(() => {
     return height.value - 250
 })
 
+const paeError: Ref<string | null> = ref(null)
+
 function closeStructure() {
     selectedPdb.value = null
     dialog.value = false
-
-
 }
 
 
@@ -107,11 +107,19 @@ watch(selectedPaePath, async (newPaePath) => {
         try {
             const data = await d3.tsv(newPaePath);
             console.log(data.length)
+            console.log(data[0][0])
+            console.log(data?.[0]?.[0] !== undefined)
             if (data.length > 500) {
+                paeError.value = "The PAE is too large to be displayed"
+                paeData.value = []
+            }
+            else if (data?.[0]?.[0] === undefined) {
+                paeError.value = "The PAE cannot be downloaded"
                 paeData.value = []
             }
             else {
                 paeData.value = data
+                paeError.value = null
             }
 
         }
@@ -151,15 +159,19 @@ const plotPaeOptions = computed(() => {
     }
 })
 
-watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
-    if (selectedPdb !== null) {
+watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
+    if (newSelectedPdb !== null) {
         dialog.value = true
+        const format = toValue(newSelectedPdb)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
+        console.log(toValue(newSelectedPdb)?.split(".").slice(-1))
+        console.log(format)
+        moleculeFormat.value = format
         if (pdbeMolstarComponent.value?.viewerInstance) {
             const viewerInstance = pdbeMolstarComponent.value.viewerInstance
 
             // show.value = true
 
-            const customData = { url: selectedPdb, format: "pdb", binary: false }
+            const customData = { url: newSelectedPdb, format: format, binary: false }
 
             viewerInstance.visual.update({ customData })
 
@@ -168,6 +180,10 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
     }
 })
 
+// const moleculeFormat = computed(() => {
+//     return toValue(selectedPdb)?.split(".")?.[-1]?.toLowerCase() ?? "pdb"
+// })
+const moleculeFormat: Ref<string> = ref("pdb")
 </script>
 
 
@@ -198,12 +214,13 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
                                 :height="computedHeight" :width="computedWidth" position="relative">
                                 <pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true"
                                     :custom-data-url="selectedPdb" alphafold-view="true"
-                                    custom-data-format="cif"></pdbe-molstar>
+                                    :custom-data-format="moleculeFormat"></pdbe-molstar>
                             </v-sheet>
                         </v-col>
-                        <v-col >
-                            <PlotFigure v-if="sanitizedPaeData?.length > 0" defer :options="plotPaeOptions"></PlotFigure>
-                            <v-alert type="warning">The PAE is to large</v-alert>
+                        <v-col>
+                            <PlotFigure v-if="sanitizedPaeData?.length > 0 && paeError === null" defer
+                                :options="plotPaeOptions"></PlotFigure>
+                            <v-alert v-else type="warning">{{ paeError }}</v-alert>
                             <v-card flat color="transparent">
 
                                 <v-card-title>Model Confidence</v-card-title>