clean

components/content/pdockqMatrix.vue

@@ -55,7 +55,6 @@ onMounted(async () => {
     }
 
 
-    // attachEventHandler()
 
 })
 
@@ -140,33 +139,6 @@ const computedPDocksMatrixPlotOptions = computed(() => {
         }
     })
 })
-function getDataLabelFromCell(elem) {
-    const parent = elem.parentNode.parentNode.parentNode.parentNode
-    return parent.dataset.label
-}
-
-function attachEventHandler() {
-    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") }
-    })
-
-}
 
 
 // this function is adapted from https://observablehq.com/@fil/plot-onclick-experimental-plugin (@Fil)
@@ -186,57 +158,16 @@ function on(mark) {
         // 🌶 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`