Skip to content
Snippets Groups Projects
Commit e16d5307 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

dirty way to display structure when clicking on plot cell

parent 369358c7
No related branches found
No related tags found
No related merge requests found
Pipeline #127601 waiting for manual action with stages
in 6 minutes and 55 seconds
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment