dirty way to display structure when clicking on plot cell

components/content/pdockqMatrix.vue

@@ -4,6 +4,8 @@ import * as Plot from "@observablehq/plot";
 import PlotFigure from "@/components/PlotFigure";
 // import { useMeiliSearchRef } from 'nuxt-meilisearch'
 import type { SearchResponse } from 'meilisearch'
+import { useRefinedUrl } from "@/composables/useRefinedUrl"
+
 
 export interface Props {
     system?: MaybeRef<string | null>
@@ -15,6 +17,8 @@ const filterBase = ref<string[]>([
     "prediction_type='multimer(dimer)'",
     "completed='true'"
 ])
+const structureTitle = ref("Structure")
+const stuctureUrls = ref<string[] | undefined>(undefined)
 
 export interface PlotMargin {
     marginTop: number,
@@ -32,7 +36,7 @@ const margin = ref<PlotMargin>({
 
 const data = ref<SearchResponse | undefined>(undefined)
 const client = useMeiliSearchRef()
-
+const matrixPlot = ref()
 onMounted(async () => {
     try {
         const d = await client.index(toValue(dbName)).search("", {
@@ -129,26 +133,50 @@ const computedPDocksMatrixPlotOptions = computed(() => {
         }
     })
 })
+function getDataLabelFromCell(elem) {
+    const parent = elem.parentNode.parentNode.parentNode.parentNode
+    return parent.dataset.label
+}
+watch(matrixPlot, () => {
+    const cells = d3.selectAll(".pdockq-plot").selectAll("rect")
+    cells.on("click", function (event) {
+        const key = getDataLabelFromCell(this)
+        const toValGroupedPdock = toValue(groupedPdocks)
+        const index = d3.select(event.srcElement).data()[0]
+        const data = toValGroupedPdock.find(d => {
+            return d[0] === key
+        })
+        if (data) {
+            displayStructure(data[1][index])
+        }
+        else { console.log("no data found") }
+    })
+
+})
+function pdbNameToCif(pdbPath: string) {
+    const cifPath = pdbPath.split(".").slice(0, -1).join(".")
+    return `${cifPath}.cif`
+}
+function buildStructureUrl(item) {
+    return [`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`]
+}
 
-// 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")
-// }
+function displayStructure(item) {
+    stuctureUrls.value = buildStructureUrl(item).map(url => {
+        return toValue(useRefinedUrl(url).refinedUrl)
+    })
+    structureTitle.value = item.proteins_in_the_prediction.join(" / ")
+
+}
 </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>
+            <PlotFigure ref="matrixPlot" :options="unref(option)" defer class="pdockq-plot"
+                :data-label="option.legend.label"></PlotFigure>
         </v-card-text>
+        <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" />
+
     </v-card>
 </template>
\ No newline at end of file