From 9cb35d92b8e6656c03c4a68e9ff182bb541cd17e Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 2 May 2024 17:35:28 +0200
Subject: [PATCH] change gene fill color + add background line
---
components/OperonStructure.vue | 46 +++++++++++++++++++++++++---------
1 file changed, 34 insertions(+), 12 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index af8a5f61..19b45f82 100644
--- a/components/OperonStructure.vue
+++ b/components/OperonStructure.vue
@@ -23,27 +23,28 @@ const svgRef = ref<SVGElement | null>(null)
const structureHeight = ref(130)
const geneHeight = ref(40)
const linkHeight = ref(20)
+const geneColor = ref("#faf4e6")
const margin = ref<PlotMargin>({
marginTop: 5,
- marginRight: 7,
+ marginRight: 20,
marginBottom: 5,
- marginLeft: 7,
+ marginLeft: 20,
})
const gbContainer = ref(null)
const geneToHighlight = ref<string | null>(null)
const snackbar = ref(false)
-const color = d3.scaleOrdinal(d3.schemeCategory10);
+// const color = d3.scaleOrdinal(d3.schemeCategory10);
const domain = computed(() => {
const genes = toValue(computedGenes)
return genes?.map(d => { return d.gene })
})
-const innerPadding = ref<number>(8)
+const innerPadding = ref<number>(30)
const totalGeneLength = computed(() => {
const genes = toValue(computedGenes)
return genes.reduce((acc, curr) => {
- return acc + (curr?.size ?? 10) + innerPadding.value
- }, 0)
+ return acc + (curr?.size ?? 10)
+ }, 0) + innerPadding.value * (genes.length - 1)
})
@@ -75,7 +76,7 @@ const computedGenes = computed<StructureOperonGene[]>(() => {
const genes = toValue(genesProps)
if (genes !== null && genes?.length > 0) {
let currentSumSize = 0
- return genes.map((d) => {
+ return genes.map((d,i) => {
const size = d?.size ?? 10
const position = currentSumSize
currentSumSize = position + size + innerPadding.value
@@ -255,16 +256,31 @@ function draw() {
if (svgRef.value !== null) {
const svg = d3.select<SVGElement, any>(svgRef.value);
- const { marginLeft, marginTop } = toValue(margin)
- const gx = createOrSelect<SVGGElement, SVGElement>(svg, 'g', 'x-axis')
+ const { marginLeft, marginRight } = toValue(margin)
+ // const gx = createOrSelect<SVGGElement, SVGElement>(svg, 'g', 'x-axis')
const gOperon = createOrSelect<SVGGElement, SVGElement>(svg, "g", "operon")
+ const yScaleVal = toValue(yScale)
+ const geneHeightVal = toValue(geneHeight)
+
+
+ const gOperonLine = createOrSelect<SVGLineElement, SVGGElement>(gOperon, "line", "chromosome-line")
+ gOperonLine
+ .attr("x1", -marginLeft)
+ .attr("y1", yScaleVal.gene + geneHeightVal / 2)
+ .attr("x2", computedPlotWidth.value + marginRight)
+ .attr("y2", yScaleVal.gene + geneHeightVal / 2)
+ .attr("stroke", "black")
+ .attr("stroke-width", "2px")
+
gOperon
.attr("transform", `translate(${marginLeft},0)`)
+
.call(drawLinks)
.call(drawGenes)
.call(drawStructure)
.call(drawGenesLabel)
+
}
}
@@ -340,6 +356,11 @@ 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
@@ -360,6 +381,7 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
geneToHighlight.value = null
})
+
gGene
.append("path")
.classed("gene", true)
@@ -383,11 +405,11 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
const genePathSelection = genesSelection
.select("path.gene")
- // .attr("stroke", d => d?.highlight ? d3.color(color(d.system))?.darker() : null)
- .attr("stroke-width", d => d?.highlight ? 4 : 0)
+ .attr("stroke", "black")
+ .attr("stroke-width", 2)
genePathSelection
.transition()
- .attr("fill", d => d?.highlight ? d3.color(color(d.system))?.brighter() : color(d.system))
+ .attr("fill", d => d?.highlight ? d3.color(geneColor.value)?.darker() : geneColor.value)
genePathSelection
.attr("d", d => drawGene(d).toString())
--
GitLab