add some title to display

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