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
Compare
and
Show latest version
3 files
+ 96
− 15
Compare changes
  • Side-by-side
  • Inline
Files
3
components/content/MolstarPdbePlugin.vue
+ 95
− 12
@@ -115,23 +115,27 @@ watch(selectedPaePath, async (newPaePath) => {
const sanitizedPaeData = computed(() => {
return paeData.value.reduce((acc, curr, index) => {
const scoredResidu = index
for (const [alignedResidu, value] of Object.entries(curr)) {
const scoredResidue = index
for (const [alignedResidue, value] of Object.entries(curr)) {
// console.log(value)
acc.push({ alignedResidu: parseInt(alignedResidu), scoredResidu: parseInt(scoredResidu), value: parseFloat(value) })
acc.push({ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) })
}
return acc
}, [])
})
const extend = computed(() => {
return d3.extend(sanitizedPaeData.value.map(it => it.value))
})
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: "scoredResidu", y: "alignedResidu", stroke: "value" })
Plot.dot(sanitizedPaeData.value, { x: "scoredResidue", y: "alignedResidue", stroke: "value" })
]
}
})
@@ -177,15 +181,89 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
</v-toolbar>
<v-card-text>
<v-row>
<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="cif"></pdbe-molstar>
</v-sheet>
<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="cif"></pdbe-molstar>
</v-sheet>
</v-col>
<v-col v-if="sanitizedPaeData?.length > 0">
<PlotFigure defer :options="plotPaeOptions"></PlotFigure>
<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>
@@ -200,4 +278,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