dynamic title for structure

components/content/ArticleStructure.vue

@@ -6,6 +6,7 @@ import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
 const { page } = useContent();
 // get the structures
 const structures = ref()
+const structureTitle = ref("Structure")
 const msIndexName = ref<string>("structure")
 const stuctureUrls = ref<string[] | undefined>(undefined)
 const headers = ref<Record<string, any>[]>([
@@ -51,6 +52,8 @@ function pdbNameToCif(pdbPath: string) {
 }
 function displayStructure(item) {
     stuctureUrls.value = item.structuresUrls
+    console.log(item)
+    structureTitle.value = `${item.subtype} - ${item.gene_name}`
 
 }
 
@@ -145,6 +148,6 @@ console.log(structures)
                 </v-row>
             </template>
         </v-data-table>
-        <PdbeMolstarPlugin v-model="stuctureUrls" />
+        <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" />
     </v-card>
 </template>
\ No newline at end of file

components/content/PdbeMolstarPlugin.vue

@@ -45,6 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const dataUrls = defineModel()
+const title = defineModel('title')
 const pdbeMolstarComponent = ref(null)
 
 const dialog = ref(false)
@@ -62,15 +63,7 @@ const computedHeight = computed(() => {
     return height.value - 250
 })
 
-function refinedUrl(url: string) {
-    if (url?.startsWith('/') && !url.startsWith('//')) {
-        const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
-        if (_base !== '/' && !url.startsWith(_base)) {
-            return joinURL(_base, url)
-        }
-    }
-    return url
-}
+
 function viewPdb(pdbPath: string | null) {
     if (pdbPath !== null) {
         dialog.value = true
@@ -85,20 +78,10 @@ function viewPdb(pdbPath: string | null) {
     }
 }
 
-const refinedDataUrls = computed(() => {
-    const toValDataUrls = toValue(dataUrls)
-    if (toValDataUrls !== undefined && toValDataUrls.length > 0) {
-        return toValDataUrls.map((dataUrl) => {
-            return refinedUrl(dataUrl)
-            // return dataUrl
-        })
-    }
-    return toValDataUrls
-
 
-})
 function closeStructure() {
     selectedPdb.value = null
+    dataUrls.value = undefined
     dialog.value = false
 }
 watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
@@ -107,9 +90,10 @@ watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
 })
 
 watchEffect(() => {
-    const toValUrl = toValue(refinedDataUrls)
+    const toValUrl = toValue(dataUrls)
     if (toValUrl?.length > 0) {
         dialog.value = true
+        selectedPdb.value = dataUrls.value[0]
     }
     else {
         dialog.value = false
@@ -121,9 +105,8 @@ watchEffect(() => {
     <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
         <v-card flat :rounded="false">
             <v-toolbar>
-                <v-toolbar-title>Structures</v-toolbar-title>
-                <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
-                    hide-details="auto"></v-select>
+                <v-toolbar-title>{{ title }}</v-toolbar-title>
+                <v-select v-model="selectedPdb" label="Select PDB" :items="dataUrls" hide-details="auto"></v-select>
                 <v-spacer></v-spacer>
 
                 <v-btn :disabled="!selectedPdb" icon="md:download" :href="structureToDownload"></v-btn>