Select Git revision
MolstarPdbePlugin.vue

Remi PLANEL authored
MolstarPdbePlugin.vue 1.34 KiB
<script setup lang="ts">
import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'
export interface Props {
height?: number
dataUrl: string
}
const refinedDataUrl = computed(() => {
if (props.dataUrl?.startsWith('/') && !props.dataUrl.startsWith('//')) {
const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
if (_base !== '/' && !props.dataUrl.startsWith(_base)) {
return joinURL(_base, props.dataUrl)
}
}
return props.dataUrl
})
const props = withDefaults(defineProps<Props>(), {
height: 600,
})
useHead({
link: [
{
rel: 'stylesheet',
href: 'https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.0.css'
},
],
script: [
{
type: "text/javascript",
src: "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.0.js",
tagPosition: 'bodyClose'
}
]
})
</script>
<template>
<v-card flat color="transparent" :min-height="height" position="relative" class="my-3">
<pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" alphafold-view="true" landscape="true"
hide-expand-icon sequence-panel></pdbe-molstar>
</v-card>
</template>