create a on function based on @fil example

components/content/pdockqMatrix.vue

@@ -55,7 +55,7 @@ onMounted(async () => {
     }
 
 
-    attachEventHandler()
+    // attachEventHandler()
 
 })
 
@@ -86,18 +86,19 @@ const groupedPdocks = computed(() => {
                 const sanitizedSystemGenes = system_genes.map(getSeqName)
                 const sanitizedProteins = proteins_in_the_prediction.map(getSeqName)
                 const setProteins = new Set(sanitizedProteins)
+                const key = system_genes.sort().join(" / ")
                 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] }
+                            return { key, 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] }
+                            return { key, 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] }
+                    return { key, 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} !`)
@@ -127,14 +128,14 @@ const computedPDocksMatrixPlotOptions = computed(() => {
             color: { scheme: "plasma", legend: true, reverse: true, domain: [0, 1] },
             marks: [
                 // Plot.frame(),
-                Plot.cell(toValue(matrix[1]), {
+                on(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" }
-                })
+                }))
             ]
         }
     })
@@ -167,9 +168,75 @@ function attachEventHandler() {
 
 }
 
-watch(matrixPlot, () => {
-    attachEventHandler()
-})
+
+// this function is adapted from https://observablehq.com/@fil/plot-onclick-experimental-plugin (@Fil)
+function on(mark) {
+    const render = mark.render;
+    mark.render = function (facet, { x, y }, channels) {
+        // 🌶 I'd like to be allowed to read the facet
+        // …  mutable debug = fx.domain()??
+
+        // 🌶 data[i] may or may not be the datum, depending on transforms
+        // (at this stage we only have access to the materialized channels we requested)
+        // but in simple cases it works
+
+        const data = this.data;
+        console.log(data)
+        const key = data[0].key
+        // 🌶 since a point or band scale doesn't have an inverse, create one from its domain and range
+        const g = render.apply(this, arguments);
+        const r = d3.select(g).selectChildren();
+        console.log(r)
+        r.on("click", function (event, i) {
+            const index = d3.select(event.srcElement).data()[0]
+            displayStructure(data[index])
+        })
+        // for (const [type, callback] of Object.entries(listeners)) {
+        //     r.on(type, function (event, i) {
+        //         const p = d3.pointer(event, g);
+        //         callback(event, {
+        //             type,
+        //             p,
+        //             datum: data[i],
+        //             i,
+        //             facet,
+        //             data,
+        //             ...(x && { x: x.invert(p[0]) }),
+        //             ...(y && { y: y.invert(p[1]) }),
+        //             ...(x && channels.x2 && { x2: x.invert(channels.x2[i]) }),
+        //             ...(y && channels.y2 && { y2: y.invert(channels.y2[i]) })
+        //         });
+        //     });
+        // }
+        return g;
+    };
+    return mark;
+}
+// watchEffect(() => {
+//     const cells = d3.selectAll(".pdockq-plot").selectAll("rect")
+//     console.log("cells rect on watch")
+//     console.log(cells)
+//     cells.on("click", function (event) {
+//         console.log("click on cells")
+//         const key = getDataLabelFromCell(this)
+//         console.log(key)
+//         const toValGroupedPdock = toValue(groupedPdocks)
+//         console.log(toValGroupedPdock)
+//         const index = d3.select(event.srcElement).data()[0]
+//         const data = toValGroupedPdock.find(d => {
+//             console.log(d)
+//             return d[0] === key
+//         })
+//         if (data) {
+//             displayStructure(data[1][index])
+//         }
+//         else { console.log("no data found") }
+//     })
+// })
+
+// watch(matrixPlot, () => {
+//     attachEventHandler()
+// })
 function pdbNameToCif(pdbPath: string) {
     const cifPath = pdbPath.split(".").slice(0, -1).join(".")
     return `${cifPath}.cif`