diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
deleted file mode 100644
index dc6457047fd354959fdd4125ca96a5bf3ffa82d5..0000000000000000000000000000000000000000
--- a/components/content/MolstarPdbePlugin.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<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);">
- </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);">
- </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);">
- </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);">
- </div>
- </template>
- <v-list-item-title>
- Very low (pLDDT < 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>