diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index 62d0e12652cd42060dfcde6adad488d9b349a95e..2758ada8b933e3596da2d1a03c39b716dbba8da5 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -14,8 +14,6 @@ export interface Props {
db?: string
sortBy?: SortItem[]
facets: string[]
- headers: { title: string, key: string }[]
- itemValue: string
dataTableServerProps: { [key: string]: any; }
}
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index a23a23bc993687733cfc327265941677d0764d16..6e2b4dd413cad51813075fc9cb3195210c3a1a5d 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -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);">
+ </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>
+ <!-- <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);"> </span><span _ngcontent-ykv-c96=""
+ class="legendlabel">Very high (pLDDT > 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);"> </span><span
+ _ngcontent-ykv-c96="" class="legendlabel">High (90 > pLDDT > 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);"> </span><span
+ _ngcontent-ykv-c96="" class="legendlabel">Low (70 > pLDDT > 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);"> </span><span
+ _ngcontent-ykv-c96="" class="legendlabel">Very low (pLDDT < 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