change gene fill color + add background line

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())