From 4f2ce63ea4e56bf12cabaf8422f7ba054ed4aaea Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Tue, 14 May 2024 14:16:22 +0200
Subject: [PATCH] hide links and highlight when no structure
---
components/OperonStructure.vue | 31 +++++++++++++++++------------
components/content/PdockqMatrix.vue | 13 ++++++++----
2 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index 45869e83..403a41d8 100644
--- a/components/OperonStructure.vue
+++ b/components/OperonStructure.vue
@@ -242,8 +242,12 @@ const plotHeight = computed(() => {
return marginTop + marginBottom + toValue(geneLabelHeight) + toValue(structureHeight) + toValue(geneHeight) + toValue(linkHeight) + 10
})
const linksGenesStruct = computed<StructureGeneLinks[]>(() => {
- const geneNodesVal = toValue(geneNodesWithY)
- const structureNodesVal = toValue(structureNodes)
+ const geneNodesVal = toValue(geneNodesWithY).filter(d => {
+ return d.structPath !== undefined
+ })
+ const structureNodesVal = toValue(structureNodes).filter(d => {
+ return d.structPath !== undefined
+ })
return d3.zip(geneNodesVal, structureNodesVal).map(([source, target]) => {
return {
@@ -362,11 +366,13 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
.classed("structure", true)
.on("click", function (event) {
const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
- structureBasket.set(data.map(s => s?.structPath ?? ''))
+ const structPaths = data.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+ if (structPaths.length > 0) structureBasket.set(structPaths)
}).on("mouseover", function (event) {
const srcSelection = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(event.srcElement)
const node = srcSelection.data()
- geneToHighlight.value = node[0].gene
+ const structPaths = node.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+ if (structPaths.length > 0) geneToHighlight.value = node[0].gene
})
.on("mouseout", function (event) {
geneToHighlight.value = null
@@ -402,11 +408,6 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
const genesWithCoordVal = toValue(geneNodesWithY)
const genes = genesWithCoordVal
-
-
-
-
-
const genesSelection = operonGroup
.selectAll("g.gene-grp") // get all "existing" lines in svg
.data<StructureOperonGeneWithCoordinate>(genes) // sync them with our data
@@ -416,12 +417,14 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
.classed("gene-grp", true)
.on("click", function (event) {
const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
- structureBasket.set(data.map(s => s?.structPath ?? ''))
+ const structPaths = data.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+ if (structPaths.length > 0) structureBasket.set(structPaths)
})
.on("mouseover", function (event) {
const srcSelection = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(event.srcElement)
const node = srcSelection.data()
- geneToHighlight.value = node[0].gene
+ const structPaths = node.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+ if (structPaths.length > 0) geneToHighlight.value = node[0].gene
})
.on("mouseout", function (event) {
geneToHighlight.value = null
@@ -496,12 +499,14 @@ function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
.classed("gene-label", true)
.on("click", function (event) {
const data = d3.select<SVGElement, StructureOperonGeneLabels>(this).data()
- structureBasket.set(data.map(s => s?.structPath ?? ''))
+ const structPaths = data.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+ if (structPaths.length > 0) structureBasket.set(structPaths)
})
.on("mouseover", function (event) {
const srcSelection = d3.select<SVGElement, StructureOperonGeneLabels>(event.srcElement)
const node = srcSelection.data()
- geneToHighlight.value = node[0].gene
+ const structPaths = node.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+ if (structPaths.length > 0) geneToHighlight.value = node[0].gene
})
.on("mouseout", function (event) {
diff --git a/components/content/PdockqMatrix.vue b/components/content/PdockqMatrix.vue
index f08cd80d..461b4efc 100644
--- a/components/content/PdockqMatrix.vue
+++ b/components/content/PdockqMatrix.vue
@@ -184,10 +184,15 @@ const operonStructurePerMatrix = computed<[string, StructureOperonGeneWithImg[]]
}
})
- const rawImgUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structImg ?? '')
- const rawStructUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structPath ?? '')
- const { refinedUrl: structImgHref } = useRefinedUrl(rawImgUrl)
- return { ...gene, gene: matchingMonomer ? matchingMonomer.proteins_in_the_prediction[0] : sanitizedGene, structImg: toValue(structImgHref), structPath: rawStructUrl }
+ if (matchingMonomer === undefined) {
+ return { ...gene, structImg: undefined, structPath: undefined }
+
+ } else {
+ const rawImgUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structImg ?? '')
+ const rawStructUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structPath ?? '')
+ const { refinedUrl: structImgHref } = useRefinedUrl(rawImgUrl)
+ return { ...gene, gene: matchingMonomer ? matchingMonomer.proteins_in_the_prediction[0] : sanitizedGene, structImg: toValue(structImgHref), structPath: rawStructUrl }
+ }
})]
}
else { return [] }
--
GitLab