From e16d530776dfb5c48469dfcd5ca2f21cd9728229 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 3 Apr 2024 11:30:09 +0200
Subject: [PATCH] dirty way to display structure when clicking on plot cell
---
components/content/pdockqMatrix.vue | 58 +++++++++++++++++++++--------
1 file changed, 43 insertions(+), 15 deletions(-)
diff --git a/components/content/pdockqMatrix.vue b/components/content/pdockqMatrix.vue
index 37105ee1..78dd66a9 100644
--- a/components/content/pdockqMatrix.vue
+++ b/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
--
GitLab