label clickable as well

components/OperonStructure.vue

@@ -283,21 +283,21 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
         .join(
             enter => {
                 const gStructure = enter.append("g")
-                    .classed("structure", true);
-                // img group
-                gStructure
-                    .append("image")
-                    .on("mouseover", function (event) {
+                    .classed("structure", true)
+                    .on("click", function (event) {
+                        const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
+                        structureBasket.set(data.map(s => s?.structPath ?? ''))
+                    }).on("mouseover", function (event) {
                         const srcSelection = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(event.srcElement)
                         const node = srcSelection.data()
                         geneToHighlight.value = node[0].gene
                     })
-
                     .on("mouseout", function (event) {
                         geneToHighlight.value = null
-
                     })
-
+                // img group
+                gStructure
+                    .append("image")
                 return gStructure
             },
             update => update,
@@ -315,11 +315,7 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
         .attr("width", d => d.width)
         .attr("height", d => d.height)
         .attr("preserveAspectRatio", "xMidYMid meet")
-        .on("click", function (event) {
-            const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
-            structureBasket.set(data.map(s => s?.structPath ?? ''))
 
-        })
 
 
 }
@@ -369,7 +365,10 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
             update => update,
             exit => exit.remove()
         )
-    genesSelection.select("g.gene-grp").attr("transform", d => `translate(${d.x}, 0)`)
+    genesSelection
+        .select("g.gene-grp")
+        .attr("cursor", d => d.highlight ? "pointer" : null)
+        .attr("transform", d => `translate(${d.x}, 0)`)
 
 
 
@@ -408,6 +407,10 @@ function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
                 const labelSelection = enter
                     .append("g")
                     .classed("gene-label", true)
+                    .on("click", function (event) {
+                        const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
+                        structureBasket.set(data.map(s => s?.structPath ?? ''))
+                    })
                     .on("mouseover", function (event) {
                         const srcSelection = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(event.srcElement)
                         const node = srcSelection.data()
@@ -429,7 +432,9 @@ function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
             exit => exit.remove()
         )
 
-    updateSelection.select("text")
+    updateSelection
+        .attr("cursor", d => d.highlight ? "pointer" : null)
+        .select("text")
         .attr("transform", d => `translate(${d.x + d.width / 2},${d.y}) rotate(40) `)
         .attr("style", d => d.highlight ? "font-weight: 700" : null)
         .text(d => d.gene)