Skip to content
Snippets Groups Projects

Resolve "Table with all PDB files, to make them available to download"

Merged Resolve "Table with all PDB files, to make them available to download"
table-structure-with-molstar into dev
Merged Remi PLANEL requested to merge table-structure-with-molstar into dev
Viewing commit 4ec146d7
Prev Next
Show latest version
2 files
+ 68
− 11
Compare changes
  • Side-by-side
  • Inline
Files
2
components/content/MolstarPdbePlugin.vue
+ 175
− 14
<script setup lang="ts">
import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'
import * as d3 from "d3";
import * as Plot from "@observablehq/plot";
import PlotFigure from "~/components/PlotFigure";
export interface Props {
height?: number
dataUrls?: string[]
@@ -47,19 +54,19 @@ const dialog = ref(false)
// const show = ref(false)
const computedWidth = computed(() => {
if (width > maxWidth) return maxWidth
return width
// if (toValue(width) > toValue(maxWidth)) return toValue(maxWidth) / 1.5
return toValue(width) / 1.5
})
const computedHeight = computed(() => {
return height.value - 250
})
const paeError: Ref<string | null> = ref(null)
function closeStructure() {
selectedPdb.value = null
dialog.value = false
}
@@ -90,15 +97,79 @@ const pdbeMolstarComponent = ref(null)
// const selectedPdb = ref("/wiki/avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb")
const selectedPdb = ref(null)
watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
if (selectedPdb !== null) {
const selectedPaePath = computed(() => {
return selectedPdb.value ? `${selectedPdb.value.split(".").slice(0, -1).join('.')}.tsv` : null
})
const paeData = ref([])
watch(selectedPaePath, async (newPaePath) => {
if (newPaePath !== null) {
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 (${data.length} residus)`
paeData.value = []
}
else if (data?.[0]?.[0] === undefined) {
paeError.value = "The PAE cannot be downloaded"
paeData.value = []
}
else {
paeData.value = data
paeError.value = null
}
}
catch (error) {
console.log(error)
}
} else {
paeData.value = []
}
})
const sanitizedPaeData = computed(() => {
return paeData.value.reduce((acc, curr, index) => {
const scoredResidue = index
// let newAcc = [...acc]
for (const [alignedResidue, value] of Object.entries(curr)) {
// console.log(value)
acc.push({ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) })
// newAcc = [...newAcc, ...[{ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) }]]
}
return acc
}, [])
})
const plotPaeOptions = computed(() => {
return {
width: 640,
height: 640,
color: { scheme: "Greens", legend: true, reverse: true, label: "Expected position error (Ångströms)" },
y: { reverse: true },
marks: [
Plot.dot(sanitizedPaeData.value, { x: "scoredResidue", y: "alignedResidue", stroke: "value" })
]
}
})
watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
if (newSelectedPdb !== null) {
dialog.value = true
const format = toValue(newSelectedPdb)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
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 })
@@ -107,6 +178,10 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
}
})
// const moleculeFormat = computed(() => {
// return toValue(selectedPdb)?.split(".")?.[-1]?.toLowerCase() ?? "pdb"
// })
const moleculeFormat: Ref<string> = ref("pdb")
</script>
@@ -130,13 +205,94 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
</v-toolbar>
<v-card-text>
<v-sheet v-if="selectedPdb"
class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
:height="computedHeight" :max-width="maxWidth" :width="computedWidth" position="relative">
<pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true" :custom-data-url="selectedPdb" alphafold-view="true"
custom-data-format="pdb"></pdbe-molstar>
</v-sheet>
<v-row>
<v-col cols="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" position="relative">
<pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true"
:custom-data-url="selectedPdb" alphafold-view="true"
:custom-data-format="moleculeFormat"></pdbe-molstar>
</v-sheet>
</v-col>
<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>
<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>
<!-- <div _ngcontent-ykv-c96="" class="confidenceWrapper">
<div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
_ngcontent-ykv-c96="" class="legendColor"
style="background-color: rgb(0, 83, 214);">&nbsp;</span><span _ngcontent-ykv-c96=""
class="legendlabel">Very high (pLDDT &gt; 90)</span></div>
<div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
_ngcontent-ykv-c96="" class="legendColor"
style="background-color: rgb(101, 203, 243);">&nbsp;</span><span
_ngcontent-ykv-c96="" class="legendlabel">High (90 &gt; pLDDT &gt; 70)</span></div>
<div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
_ngcontent-ykv-c96="" class="legendColor"
style="background-color: rgb(255, 219, 19);">&nbsp;</span><span
_ngcontent-ykv-c96="" class="legendlabel">Low (70 &gt; pLDDT &gt; 50)</span></div>
<div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
_ngcontent-ykv-c96="" class="legendColor"
style="background-color: rgb(255, 125, 69);">&nbsp;</span><span
_ngcontent-ykv-c96="" class="legendlabel">Very low (pLDDT &lt; 50)</span></div> -->
<!---->
<!-- </div> -->
<!-- <div _ngcontent-ykv-c96="" class="column legendDesc"> AlphaFold produces a per-residue model
confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be unstructured
in isolation. </div> -->
</v-col>
</v-row>
</v-card-text>
</v-card>
@@ -149,4 +305,9 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
.msp-plugin .msp-plugin-content {
color: black !important;
}
.legendColor {
height: 16px;
width: 16px;
}
</style>
\ No newline at end of file