From 453233baa591e97547617499aa91a5c608007e5c Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Tue, 30 Apr 2024 13:42:03 +0200
Subject: [PATCH] add some title to display
---
components/OperonStructure.vue | 56 ++++++++++------------------------
1 file changed, 16 insertions(+), 40 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index ed32f13b..eb54ee2d 100644
--- a/components/OperonStructure.vue
+++ b/components/OperonStructure.vue
@@ -220,19 +220,8 @@ function draw() {
if (svgRef.value !== null) {
const svg = d3.select<SVGElement, any>(svgRef.value);
const { marginLeft, marginTop } = toValue(margin)
- // const xAxis = d3.axisBottom(xScaleGenes.value)
const gx = createOrSelect<SVGGElement, SVGElement>(svg, 'g', 'x-axis')
- // gx
- // .attr("transform", `translate(${marginLeft},${toValue(height) + marginTop})`)
- // .call(xAxis)
-
- // gx.call(g => g.select(".domain")
- // .remove())
- // .selectAll("text")
- // .attr("transform", 'rotate(20)')
- // .attr("text-anchor", "start")
-
- let gOperon = createOrSelect<SVGGElement, SVGElement>(svg, "g", "operon")
+ const gOperon = createOrSelect<SVGGElement, SVGElement>(svg, "g", "operon")
gOperon
.attr("transform", `translate(${marginLeft},0)`)
.call(drawLinks)
@@ -266,17 +255,6 @@ function drawLinks(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
const structureNodeVal = toValue(structureNodes)
-
- // const totalSize = domainGenes.value[1]
- // const structureLinks = adjacentlinks(structures)
- // const sim = d3.forceSimulation(structureNodeVal)
- // .force("link", d3.forceLink(structureLinks))
- // .force("collide", d3.forceCollide((d) => d.r))
- // .stop()
- // .tick(10);
- // sim.tick()
-
-
const structureSelection = operonGroup
.selectAll("g.structure") // get all "existing" lines in svg
.data<StructureOperonGeneWithCoordinate>(structureNodeVal) // sync them with our data
@@ -324,12 +302,12 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
const genesWithCoordVal = toValue(geneNodes)
const genes = genesWithCoordVal
const genesSelection = operonGroup
- .selectAll("g.operon-item") // get all "existing" lines in svg
+ .selectAll("g.gene-grp") // get all "existing" lines in svg
.data<StructureOperonGeneWithCoordinate>(genes) // sync them with our data
.join(
enter => {
- const gOperonItem = enter.append("g")
- .classed("operon-item", true)
+ const gGene = enter.append("g")
+ .classed("gene-grp", true)
.on("click", function (event) {
const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
structureBasket.set(data.map(s => s?.structPath ?? ''))
@@ -339,41 +317,32 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
const node = srcSelection.data()
geneToHighlight.value = node[0].gene
})
-
.on("mouseout", function (event) {
geneToHighlight.value = null
})
- // gene grp
- const gGene = gOperonItem.append("g")
- .classed("gene-grp", true)
gGene
.append("path")
.classed("gene", true)
-
- gOperonItem.append("text")
+ gGene.append("title")
+ gGene.append("text")
// .attr("fill", "white")
.classed("gene-label", true)
.attr("fill", "currentColor")
.attr("dominant-baseline", "middle")
- gOperonItem.append("line")
- gOperonItem.append("title")
- return gOperonItem
+
+ return gGene
},
update => update,
exit => exit.remove()
)
genesSelection
- .select("g.gene-grp")
.attr("cursor", d => d.highlight ? "pointer" : null)
.attr("transform", d => `translate(${d.x}, 0)`)
-
-
const genePathSelection = genesSelection
- .select("g.gene-grp")
.select("path.gene")
// .attr("stroke", d => d?.highlight ? d3.color(color(d.system))?.darker() : null)
.attr("stroke-width", d => d?.highlight ? 4 : 0)
@@ -385,7 +354,7 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
genePathSelection
.attr("d", d => drawGene(d).toString())
-
+ genesSelection.select("title").text(d => `${d.gene} | ${d.size} aa${geneTitle(d)}`)
function drawGene({ width, height }) {
const context = d3.path()
context.moveTo(0, 0)
@@ -397,6 +366,13 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
}
}
+function geneTitle(d: StructureOperonGeneWithCoordinate) {
+ if (d?.exchangeables && d.exchangeables?.length > 0) {
+ return `\nExchangeables: ${d.exchangeables.map(d => d.split("__")[1]).join(", ")}`
+ }
+ return ''
+}
+
function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
const genes = toValue(genesLabel)
const updateSelection = operonGroup
--
GitLab