diff --git a/components/content/ArticleStructure.vue b/components/content/ArticleStructure.vue index de117c4ce99d98dd6cb022498d21b60ee11ffc76..be8525eee834d802c488da460c568c26a38f36ad 100644 --- a/components/content/ArticleStructure.vue +++ b/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 diff --git a/components/content/PdbeMolstarPlugin.vue b/components/content/PdbeMolstarPlugin.vue index 5fd1b3fa5fa357505a51a073a48ffbca074f4ea6..6a082cdddb0f94d613f21a899ee9195133b88ae8 100644 --- a/components/content/PdbeMolstarPlugin.vue +++ b/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>