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

Closes #132 (closed)

components/content/MolstarPdbePlugin.vue

 <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,8 +54,8 @@ 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(() => {
@@ -90,6 +97,49 @@ const pdbeMolstarComponent = ref(null)
 // const selectedPdb = ref("/wiki/avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb")
 const selectedPdb = ref(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) {
+        const data = await d3.tsv(newPaePath);
+        // console.log(data)
+        paeData.value = data
+    } else {
+        paeData.value = []
+    }
+
+})
+
+const sanitizedPaeData = computed(() => {
+    return paeData.value.reduce((acc, curr, index) => {
+        const scoredResidue = index
+        for (const [alignedResidue, value] of Object.entries(curr)) {
+            // console.log(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: "scoredResidue", y: "alignedResidue", stroke: "value" })
+        ]
+    }
+})
+
 watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
     if (selectedPdb !== null) {
         dialog.value = true
@@ -130,13 +180,92 @@ 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="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>
 
             </v-card>
@@ -149,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