Skip to content
Snippets Groups Projects
Commit 14e44897 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Make molstar plugin a bit more responsive

parent a0cdcbeb
No related branches found
No related tags found
1 merge request!9Resolve "Add Js plugin to render 3D protein structure"
Pipeline #112028 passed
...@@ -19,18 +19,40 @@ const refinedDataUrl = computed(() => { ...@@ -19,18 +19,40 @@ const refinedDataUrl = computed(() => {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
height: 600, height: 600,
}) })
const { width } = useDisplay()
const maxWidth = ref(1300)
const computedWidth = computed(() => {
if (width > maxWidth) return maxWidth
return width
})
useHead({ useHead({
link: [ link: [
{ {
rel: 'stylesheet', rel: 'stylesheet',
href: 'https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.0.css' href: 'https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.2.css'
}, },
], ],
script: [ script: [
// Required for IE11
{
src: "https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"
},
{
src: "https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
},
{ {
type: "text/javascript", type: "text/javascript",
src: "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.0.js", src: "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.2.js",
tagPosition: 'bodyClose' // tagPosition: 'bodyClose'
} }
] ]
}) })
...@@ -39,10 +61,11 @@ useHead({ ...@@ -39,10 +61,11 @@ useHead({
<template> <template>
<v-card flat color="transparent" :min-height="height" position="relative" class="my-3"> <v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" height="500"
<pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" alphafold-view="true" landscape="true" :max-width="1300" :width="computedWidth - 950" position="relative">
hide-expand-icon sequence-panel></pdbe-molstar> <pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" hide-expand-icon="true"
</v-card> hide-controls="true"></pdbe-molstar>
</v-sheet>
</template> </template>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment