diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue index adbd7fe32a3868b05af23117d820a5eb84f11b5c..2fa2077f123ce3ecbe41ff46c03136c82eeb79ca 100644 --- a/components/OperonStructure.vue +++ b/components/OperonStructure.vue @@ -14,12 +14,12 @@ const structureBasket = useStructuresBasket() const props = withDefaults(defineProps<Props>(), { genes: null }); -const height = ref<number>(150) +const height = ref<number>(120) const svgRef = ref<SVGElement | null>(null) const margin = ref<PlotMargin>({ marginTop: 10, marginRight: 7, - marginBottom: 30, + marginBottom: 40, marginLeft: 7, }) @@ -124,19 +124,14 @@ function draw() { gx .attr("transform", `translate(${marginLeft},${toValue(height) + 5})`) .call(xAxis) - .selectAll("text") - .attr("transform", 'rotate(20)') - .attr("text-anchor", "start") - const gxTitle = createOrSelect(gx, "text", "x-axis-title") - gxTitle - .attr("text-anchor", "end") - .attr("fill", "currentColor") + gx.call(g => g.select(".domain") + .remove()) - gxTitle - .attr("x", toValue(computedPlotWidth)) - .attr("y", - 10) + .selectAll("text") + .attr("transform", 'rotate(20)') + .attr("text-anchor", "start") let gGenes = createOrSelect(svg, "g", "genes") gGenes @@ -160,18 +155,20 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) { gGene.append("path") .classed("gene", true) - gGene.append("image") + gGene.append("g").classed("img", true).append("image") .on("mouseover", function (event) { - d3.select(event.srcElement.previousSibling) - .attr("stroke-width", 4) - .attr("stroke", "darkred") - d3.select(event.srcElement).attr("cursor", "pointer") + const target = d3.select(event.srcElement.parentElement) + target + // .attr("stroke-width", 4) + // .attr("stroke", "darkred") + .attr("cursor", "pointer") }) .on("mouseout", function (event) { - d3.select(event.srcElement.previousSibling) - .attr("stroke-width", 0) - .attr("stroke", null) - d3.select(event.srcElement).attr("cursor", "unset") + const target = d3.select(event.srcElement.parentElement) + target + // .attr("stroke-width", 0) + // .attr("stroke", null) + .attr("cursor", "unset") }) gGene.append("text") // .attr("fill", "white") @@ -185,7 +182,7 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) { exit => exit.remove() ) genesSelection.attr("transform", d => `translate(${d.x}, 0)`) - genesSelection.select("image") + genesSelection.select("g.img").select("image") .attr("transform", d => `translate(0, ${toValue(yScale)("img")})`) .attr("href", d => d?.structImg ?? null) .attr("width", d => d.width)