From f3bd6728b26bc4f61ffb60e7452867b5988969fa Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 14 Dec 2023 10:51:18 +0100
Subject: [PATCH] Handle pdb and cif inputs
---
components/LayoutWrapper.vue | 6 +++-
components/content/MolstarPdbePlugin.vue | 35 ++++++++++++++++++------
2 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/components/LayoutWrapper.vue b/components/LayoutWrapper.vue
index 40ad7c20..4dcbe4d7 100644
--- a/components/LayoutWrapper.vue
+++ b/components/LayoutWrapper.vue
@@ -1,4 +1,8 @@
<script lang="ts" setup>
+
+import { useDisplay } from 'vuetify'
+
+const { mobile } = useDisplay()
export interface Props {
fluid?: boolean
toc?: boolean
@@ -31,7 +35,7 @@ function onScroll() {
<v-container v-scroll="onScroll" :fluid="fluid">
<v-row justify="center">
<v-col cols="auto">
- <v-card flat color="transparent" :max-width="fluid ? undefined : 1280">
+ <v-card flat color="transparent" :min-width="mobile ? undefined : 900" :max-width="fluid ? undefined : 1500">
<slot />
<EditGitlab v-if="edit" />
<NavPrevNext v-if="edit" />
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index 731bccde..1e6da0d4 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -62,11 +62,11 @@ const computedHeight = computed(() => {
return height.value - 250
})
+const paeError: Ref<string | null> = ref(null)
+
function closeStructure() {
selectedPdb.value = null
dialog.value = false
-
-
}
@@ -107,11 +107,19 @@ watch(selectedPaePath, async (newPaePath) => {
try {
const data = await d3.tsv(newPaePath);
console.log(data.length)
+ console.log(data[0][0])
+ console.log(data?.[0]?.[0] !== undefined)
if (data.length > 500) {
+ paeError.value = "The PAE is too large to be displayed"
+ paeData.value = []
+ }
+ else if (data?.[0]?.[0] === undefined) {
+ paeError.value = "The PAE cannot be downloaded"
paeData.value = []
}
else {
paeData.value = data
+ paeError.value = null
}
}
@@ -151,15 +159,19 @@ const plotPaeOptions = computed(() => {
}
})
-watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
- if (selectedPdb !== null) {
+watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
+ if (newSelectedPdb !== null) {
dialog.value = true
+ const format = toValue(newSelectedPdb)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
+ console.log(toValue(newSelectedPdb)?.split(".").slice(-1))
+ console.log(format)
+ moleculeFormat.value = format
if (pdbeMolstarComponent.value?.viewerInstance) {
const viewerInstance = pdbeMolstarComponent.value.viewerInstance
// show.value = true
- const customData = { url: selectedPdb, format: "pdb", binary: false }
+ const customData = { url: newSelectedPdb, format: format, binary: false }
viewerInstance.visual.update({ customData })
@@ -168,6 +180,10 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
}
})
+// const moleculeFormat = computed(() => {
+// return toValue(selectedPdb)?.split(".")?.[-1]?.toLowerCase() ?? "pdb"
+// })
+const moleculeFormat: Ref<string> = ref("pdb")
</script>
@@ -198,12 +214,13 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
:height="computedHeight" :width="computedWidth" position="relative">
<pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true"
:custom-data-url="selectedPdb" alphafold-view="true"
- custom-data-format="cif"></pdbe-molstar>
+ :custom-data-format="moleculeFormat"></pdbe-molstar>
</v-sheet>
</v-col>
- <v-col >
- <PlotFigure v-if="sanitizedPaeData?.length > 0" defer :options="plotPaeOptions"></PlotFigure>
- <v-alert type="warning">The PAE is to large</v-alert>
+ <v-col>
+ <PlotFigure v-if="sanitizedPaeData?.length > 0 && paeError === null" defer
+ :options="plotPaeOptions"></PlotFigure>
+ <v-alert v-else type="warning">{{ paeError }}</v-alert>
<v-card flat color="transparent">
<v-card-title>Model Confidence</v-card-title>
--
GitLab