From 09753981a4722e85430761af9953719550622356 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 3 Apr 2024 13:57:30 +0200
Subject: [PATCH] create a on function based on @fil example
---
components/content/pdockqMatrix.vue | 85 ++++++++++++++++++++++++++---
1 file changed, 76 insertions(+), 9 deletions(-)
diff --git a/components/content/pdockqMatrix.vue b/components/content/pdockqMatrix.vue
index 881deb31..893f9f39 100644
--- a/components/content/pdockqMatrix.vue
+++ b/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`
--
GitLab