Skip to content
Snippets Groups Projects
Select Git revision
  • a0cdcbebe0910764fe709c980adb53199ed357bc
  • main default protected
  • marochef-main-patch-84880
  • df-esm protected
  • insantos-main-patch-26719
  • ldunands-main-patch-06034
  • alroubau-main-patch-20822
  • kkoule-main-patch-53237
  • ekorotae-main-patch-05559
  • frthibau-main-patch-06305
  • crohel-main-patch-09648
  • hcibla-main-patch-01375
  • tgardais-main-patch-10011
  • dev protected
  • tclabby-main-patch-26246
  • operon-struct-type
  • operon-struct-type-article
  • remove-duplicate-structure-Lamassu-Fam_PDDEXK
  • operon-struct-type-article-update
  • system-distribution-plot
  • update-article-auto-sections
21 results

MolstarPdbePlugin.vue

Blame
  • 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>