try add matrix-pdock auto

components/ServerDbTable.vue

@@ -126,32 +126,7 @@ onBeforeMount(async () => {
 const msFilterCompo = ref<FilterItem[] | undefined>(undefined)
 
 
-const computedFilterStr = computed(() => {
-    const toValFilters = toValue(msFilterCompo)
-    let filtersStr: string | undefined = undefined
-    if (toValFilters !== undefined && toValFilters.length > 0) {
-        const tmpFilterItems = [...toValFilters]
-        if (tmpFilterItems.length % 4 === 0) {
-            tmpFilterItems.splice(-1)
-        }
-        filtersStr = "(" + tmpFilterItems.map((it, index) => {
-            const sanitizedValue = it.value.split("-").slice(0, -1).join("-")
-            if ((index + 1) % 4 === 3) {
-                return `"${sanitizedValue}"`
-            } else if ((index + 1) % 4 === 0) {
-                return ` ${sanitizedValue} `
-            }
-            else {
-                return `${sanitizedValue}`
-            }
-
-        }).join("") + ")"
 
-    }
-
-    return [filtersStr, props.numericalFilters].filter(f => f !== undefined && f !== null).join(" AND ")
-
-})
 
 
 const computedF = computed(() => toValue(props.numericalFilters))

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

content/3.defense-systems/dazbog.md

@@ -59,6 +59,7 @@ dataUrls:
 
 ---
 ::
+
 ##### Example 2
 
 ::molstar-pdbe-plugin

content/3.defense-systems/pago.md

@@ -100,7 +100,9 @@ Proportion of genome encoding the pAgo system for the 14 phyla with more than 50
 
 
 ## Structure
+
 ### pAgo
+
 ##### Example 1
 
 ::molstar-pdbe-plugin

nuxt.config.ts

 import { md3 } from 'vuetify/blueprints'
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+  ssr: true,
   modules: [
     '@unocss/nuxt',
     '@nuxt/content',

server/plugins/content.ts

@@ -69,6 +69,21 @@ export default defineNitroPlugin((nitroApp) => {
 
 
                 }
+
+                // add pdock matrix
+
+                // find structure 
+
+                const index = file.body.children.findIndex(child => child.tag === "h2" && child.props.id === "structure")
+                console.log(index)
+                if (index !== -1) {
+                    file.body.children.splice(index, 0, {
+                        type: "element",
+                        tag: 'matrix-pdock',
+                        props: {},
+                        children: []
+                    })
+                }
             }
         })
 })
\ No newline at end of file