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

remove lod molstar plugin

parent 9df731ca
No related branches found
No related tags found
No related merge requests found
Pipeline #130194 waiting for manual action with stages
in 8 minutes and 26 seconds
Hide whitespace changes
Inline Side-by-side
components/content/MolstarPdbePlugin.vue deleted 100644 → 0
+ 0
− 279
View file @ 9df731ca
<script setup lang="ts">
import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'
import { useDisplay } from "vuetify";
export interface Props {
height?: number
dataUrls?: string[]
dataUrl?: string | undefined
uniq?: boolean
format?: "pdb" | "cif"
}
const { mobile, width, height } = useDisplay()
const refinedDataUrls = computed(() => {
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
}
let urls: string[] = []
if (props?.dataUrls && props?.dataUrls?.length > 0) {
urls = [...props.dataUrls.map((dataUrl) => {
return refinedUrl(dataUrl)
// return dataUrl
})]
}
if (props?.dataUrl) {
urls = [
...urls,
// props.dataUrl
refinedUrl(props.dataUrl)
]
}
return urls
})
// const selectedPdb = ref(refinedDataUrls.value?.length > 0 ? refinedDataUrls.value[0] : null)
const props = withDefaults(defineProps<Props>(), {
height: 600,
uniq: false,
format: 'pdb',
dataUrl: undefined
})
const maxWidth = ref(1500)
const dialog = ref(false)
// const show = ref(false)
const computedWidth = computed(() => {
// if (toValue(width) > toValue(maxWidth)) return toValue(maxWidth) / 1.5
return toValue(width) / 1.5
})
const computedHeight = computed(() => {
return height.value - 250
})
function closeStructure() {
selectedPdb.value = null
dialog.value = false
}
useHead({
link: [
{
rel: 'stylesheet',
href: 'https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.3.css'
},
],
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",
src: "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.3.js",
// tagPosition: 'bodyClose'
}
]
})
const pdbeMolstarComponent = ref(null)
const selectedPdb: Ref<string | null> = ref(null)
const structureToDownload: Ref<string | null> = ref(null)
const selectedPaePath = computed(() => {
return selectedPdb.value ? `${selectedPdb.value.split(".").slice(0, -1).join('.')}.png` : undefined
})
watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
viewPdb(newSelectedPdb)
structureToDownload.value = newSelectedPdb
})
onMounted(() => {
const urls = toValue(refinedDataUrls)
if (props.uniq && urls.length >= 1) {
structureToDownload.value = urls[0]
}
})
function viewPdb(pdbPath: string | null) {
if (pdbPath !== null) {
dialog.value = true
const format = toValue(pdbPath)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
moleculeFormat.value = format
if (pdbeMolstarComponent.value?.viewerInstance) {
const viewerInstance = pdbeMolstarComponent.value.viewerInstance
const customData = { url: pdbPath, format: format, binary: false }
viewerInstance.visual.update({ customData })
}
}
}
function setSelectedPdbToFirst() {
const urls = toValue(refinedDataUrls)
if (urls.length >= 1) {
selectedPdb.value = urls[0]
}
}
const moleculeFormat: Ref<string> = ref("pdb")
</script>
<template>
<template v-if="uniq">
<v-row justify="space-between" dense no-gutters align="center">
<v-col>
<v-btn size="x-small" variant="text" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
</v-col>
<v-col>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn :disabled="refinedDataUrls?.length < 1" size="x-small" variant="text" icon="md:download"
class="ml-1" v-bind="props"></v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in refinedDataUrls" :key="index" :value="index" :href="item">
<v-list-item-title>{{ item.split('.').slice(-1)[0] }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</template>
<v-row v-else>
<v-col>
<span class="d-flex flex-wrap align-center justify-center">
<v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto">
</v-select>
</span>
</v-col>
</v-row>
<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-spacer></v-spacer>
<v-btn :disabled="!selectedPdb" icon="md:download" :href="structureToDownload"></v-btn>
<v-btn icon @click="closeStructure">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<v-row>
<v-col :cols="mobile ? 12 : 'auto'">
<v-sheet v-if="selectedPdb"
class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
:height="computedHeight" :width="computedWidth" style="position:relative;">
<pdbe-molstar ref="pdbeMolstarComponent" :custom-data-url="selectedPdb" alphafold-view
sequence-panel="true" landscape="false"
:custom-data-format="moleculeFormat"></pdbe-molstar>
</v-sheet>
</v-col>
<v-col v-if="moleculeFormat === 'cif'" :cols="mobile ? 12 : undefined">
<v-img :src="selectedPaePath"></v-img>
<v-card flat color="transparent">
<v-card-title>Model Confidence</v-card-title>
<v-card-text>
AlphaFold produces a per-residue model
confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be
unstructured
in isolation.
</v-card-text>
<v-list>
<v-list-item>
<template #prepend>
<div class="legendColor mr-2" style="background-color: rgb(0, 83, 214);">
&nbsp;</div>
</template>
<v-list-item-title>
Very high (pLDDT > 90)
</v-list-item-title>
</v-list-item>
<v-list-item>
<template #prepend>
<div class="legendColor mr-2" style="background-color: rgb(101, 203, 243);">
&nbsp;</div>
</template>
<v-list-item-title>
High (90 > pLDDT > 70)
</v-list-item-title>
</v-list-item>
<v-list-item>
<template #prepend>
<div class="legendColor mr-2" style="background-color: rgb(255, 219, 19);">
&nbsp;</div>
</template>
<v-list-item-title>
Low (70 > pLDDT > 50) </v-list-item-title>
</v-list-item>
<v-list-item>
<template #prepend>
<div class="legendColor mr-2" style="background-color: rgb(255, 125, 69);">
&nbsp;</div>
</template>
<v-list-item-title>
Very low (pLDDT &lt; 50) </v-list-item-title>
</v-list-item>
</v-list>
</v-card>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-dialog>
</template>
<style>
/* .msp-plugin .msp-plugin-content {
color: black !important;
} */
div.msp-plugin-content.msp-layout-expanded {
z-index: 5 !important
}
.legendColor {
height: 16px;
width: 16px;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment