Merge branch 'operon-struct-type' into operon-struct-type-article

components/OperonStructure.vue

@@ -24,7 +24,7 @@ const margin = ref<PlotMargin>({
 })
 
 const snackbar = ref(false)
-
+const color = d3.scaleOrdinal(d3.schemeCategory10);
 const plotHeight = computed(() => {
     const { marginTop, marginBottom } = toValue(margin)
     return toValue(height) + marginTop + marginBottom
@@ -44,7 +44,7 @@ const xScale = computed(() => {
 
 
 const yScale = ref(d3.scaleBand()
-    .domain(['1'])
+    .domain(['img', 'gene'])
     .range([toValue(margin).marginTop, toValue(height)]));
 const gbContainer = ref(null)
 const computedContainerWidth = computed(() => {
@@ -91,7 +91,7 @@ const genesWithCoord = computed<StructureOperonGeneWithCoordinate[]>(() => {
                 ...d,
                 width: xScaleVal.bandwidth(),
                 x: xScaleVal(d.gene),
-                y: yScaleVal('1'),
+                y: yScaleVal('gene'),
                 height: yScaleVal.bandwidth()
             }
         })
@@ -122,10 +122,10 @@ function draw() {
         const xAxis = d3.axisBottom(xScale.value)
         const gx = createOrSelect(svg, 'g', 'x-axis')
         gx
-            .attr("transform", `translate(${marginLeft},${toValue(height)})`)
+            .attr("transform", `translate(${marginLeft},${toValue(height) + 5})`)
             .call(xAxis)
             .selectAll("text")
-            .attr("transform", 'rotate(45)')
+            .attr("transform", 'rotate(20)')
             .attr("text-anchor", "start")
 
         const gxTitle = createOrSelect(gx, "text", "x-axis-title")
@@ -152,12 +152,15 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) {
         .data<StructureOperonGeneWithCoordinate>(data) // sync them with our data
         .join(
             enter => {
-                const g = enter.append("g")
+
+
+                const gGene = enter.append("g")
                     .classed("gene", true);
-                g.append("path")
+
+                gGene.append("path")
                     .classed("gene", true)
 
-                g.append("image")
+                gGene.append("image")
                     .on("mouseover", function (event) {
                         d3.select(event.srcElement.previousSibling)
                             .attr("stroke-width", 4)
@@ -170,19 +173,20 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) {
                             .attr("stroke", null)
                         d3.select(event.srcElement).attr("cursor", "unset")
                     })
-                g.append("text")
+                gGene.append("text")
                     // .attr("fill", "white")
                     .classed("gene-label", true)
                     .attr("fill", "currentColor")
                     .attr("dominant-baseline", "middle")
-                g.append("title")
-                return g
+                gGene.append("title")
+                return gGene
             },
             update => update,
             exit => exit.remove()
         )
-    genesSelection.attr("transform", d => `translate(${d.x},${d.y})`)
+    genesSelection.attr("transform", d => `translate(${d.x}, 0)`)
     genesSelection.select("image")
+        .attr("transform", d => `translate(0, ${toValue(yScale)("img")})`)
         .attr("href", d => d?.structImg ?? null)
         .attr("width", d => d.width)
         .attr("height", d => d.height)
@@ -192,6 +196,8 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) {
 
         })
     genesSelection.select("path.gene")
+        .attr("transform", d => `translate(0, ${d.y})`)
+        .attr("fill", d => color(d.gene))
         .attr("d", d => drawGene(d).toString())
 }