Resolve "Design of the structure section in a system's page"

Ref #137 (closed)

components/content/MatrixPdock.vue

+<script setup lang="ts">
+import * as d3 from "d3";
+import * as Plot from "@observablehq/plot";
+import PlotFigure from "~/components/PlotFigure";
+
+
+
+export interface Props {
+    system?: MaybeRef<string | null>
+}
+const { page } = useContent();
+const { system } = withDefaults(defineProps<Props>(), { system: null })
+const dbName = "structure"
+const filterBase = ref<string[]>([
+    "prediction_type='multimer(dimer)'",
+    "completed='true'"
+])
+
+export interface PlotMargin {
+    marginTop: number,
+    marginRight: number,
+    marginBottom: number,
+    marginLeft: number
+}
+
+const margin = ref<PlotMargin>({
+    marginTop: 100,
+    marginRight: 50,
+    marginBottom: 0,
+    marginLeft: 150
+})
+
+const computedSystem = computed(() => {
+    const toValPage = toValue(page)
+    const toValSystem = toValue(system)
+    if (toValSystem === null) {
+        return toValPage?.title?.toLowerCase() ?? null
+    }
+    else {
+        return toValSystem
+    }
+})
+
+
+const groupedPdocks = computed(() => {
+    const toValData = toValue(data)
+    return d3.groups(toValData.hits.flatMap(({ System_name_ok, pDockQ, pdb, nb_sys, proteins_in_the_prediction, system_genes }) => {
+
+
+        if (proteins_in_the_prediction.length === 2) {
+            const sanitizedSystemGenes = system_genes.map(d => d.split("__")[1])
+            const sanitizedProteins = proteins_in_the_prediction.map(d => d.split("__")[1])
+            const setProteins = new Set(sanitizedProteins)
+
+
+            if (setProteins.size === 2) {
+
+                return sanitizedProteins.map((prot, i) => {
+                    if (i === 0) {
+                        return { System_name_ok, system_genes: sanitizedSystemGenes, pDockQ, pdb, nb_sys, proteins_in_the_prediction: sanitizedProteins, protX: prot, protY: sanitizedProteins[i + 1] }
+                    }
+                    else {
+                        return { System_name_ok, system_genes: sanitizedSystemGenes, pDockQ, pdb, nb_sys, proteins_in_the_prediction: sanitizedProteins, protX: prot, protY: sanitizedProteins[i - 1] }
+                    }
+
+                })
+            } else {
+                return { System_name_ok, system_genes: sanitizedSystemGenes, pDockQ, pdb, nb_sys, proteins_in_the_prediction: sanitizedProteins, protX: sanitizedProteins[0], protY: sanitizedProteins[1] }
+            }
+        } else {
+            throw createError(`More than 2 proteins in a dimer structure for system ${computedSystem.value} !`)
+        }
+    }), d => d.system_genes.join("--"))
+})
+
+
+const computedPDocksMatrixPlotOptions = computed(() => {
+    const { marginBottom, marginLeft, marginRight, marginTop } = toValue(margin)
+
+    return toValue(groupedPdocks).map((matrix) => {
+        return {
+            width: matrix[1][0].system_genes.length * 75 + marginLeft + marginRight,
+            height: matrix[1][0].system_genes.length * 75 + marginTop + marginBottom,
+            title: matrix[0],
+            padding: 0,
+            marginTop,
+            marginLeft,
+            marginRight,
+            marginBottom,
+            grid: true,
+
+            x: { axis: "top", label: "Proteins", tickRotate: 45 },
+            y: { label: "Proteins" },
+            legend: { label: matrix[0] },
+            color: { scheme: "plasma", legend: true, reverse: true },
+            marks: [
+                Plot.frame(),
+                Plot.cell(toValue(matrix[1]), {
+                    x: (d) => d.protX,
+                    y: (d) => d.protY,
+                    fill: "pDockQ",
+                    inset: 0.5,
+                    tip: true,
+                    sort: { x: "x", y: "y" }
+                })
+            ]
+        }
+    })
+})
+
+const { data, error } = await useAsyncMeiliSearch({
+    index: toValue(dbName), query: "", params: {
+        facets: ["*"],
+        filter: [
+            `System='${toValue(computedSystem)}'`,
+            ...toValue(filterBase)
+        ],
+    }
+})
+
+if (error.value) {
+    throw createError("Error while getting structure pdocks")
+}
+</script>
+<template>
+    <v-card flat color="transparent">
+        <v-card-text v-if="computedSystem !== null" v-for="option in computedPDocksMatrixPlotOptions"
+            :key="option.legend.label">
+            <PlotFigure :options="unref(option)" defer></PlotFigure>
+        </v-card-text>
+    </v-card>
+</template>
\ No newline at end of file