display exchangeables

components/OperonStructure.vue

@@ -354,7 +354,10 @@ function drawLinks(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
 
         .attr("d", d3.link(d3.curveBumpY))
 }
-
+/**
+ * Using D3, draw image structure if available
+ * @param operonGroup 
+ */
 function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
     const structureNodeVal = toValue(structureNodes)
     const structureSelection = operonGroup
@@ -404,7 +407,10 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
 
 
 }
-
+/**
+ * Using D3, draw each gene within the operon
+ * @param operonGroup 
+ */
 function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
     const genesWithCoordVal = toValue(geneNodesWithY)
     const genes = genesWithCoordVal
@@ -430,7 +436,6 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
                         geneToHighlight.value = null
 
                     })
-
                 gGene
                     .append("path")
                     .classed("gene", true)
@@ -440,9 +445,6 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
                     .classed("gene-label", true)
                     .attr("fill", "currentColor")
                     .attr("dominant-baseline", "middle")
-
-
-
                 return gGene
             },
             update => update,
@@ -482,11 +484,16 @@ function operonTitle(d: StructureOperonGeneWithCoordinate) {
 
 function geneTitle(d: StructureOperonGeneWithCoordinate) {
     if (d?.exchangeables && d.exchangeables?.length > 0) {
-        return `\nExchangeables: ${d.exchangeables.map(d => d.split("__")[1]).join(", ")}`
+        return `\nExchangeables: ${d.exchangeables.join(", ")}`
     }
     return ''
 }
 
+
+/**
+ * using d3, draw the label for each genes within operon
+ * @param operonGroup 
+ */
 function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
     const genes = toValue(genesLabel)
     const updateSelection = operonGroup