centre genes and structure

components/OperonStructure.vue

@@ -98,20 +98,24 @@ const domainGenes = computed(() => {
 const structureRange = computed(() => {
     const genes = toValue(computedGenes)
     const minStructureWidth = genes.length * 100
-
+    let maxRange = 0
+    let minRange = 0
     // get genes width
     const genesWidth = xScaleGenes.value(totalGeneLengthWithPadding.value)
 
     if (genesWidth > minStructureWidth) {
-        return [0, genesWidth]
+        maxRange = genesWidth
     }
     else {
-        if (minStructureWidth > toValue(computedPlotWidth)) return [0, toValue(computedPlotWidth)]
-        return [0, minStructureWidth]
+        if (minStructureWidth > toValue(computedPlotWidth)) {
+            maxRange = toValue(computedPlotWidth)
+        }
+        else {
+            maxRange = minStructureWidth
+        }
     }
-
-
-
+    minRange = computedPlotWidth.value / 2 - maxRange / 2
+    return [minRange, minRange + maxRange]
 })
 
 const xScaleStructure = computed(() => {
@@ -164,14 +168,15 @@ const structureVersion = computed(() => {
 
 const geneNodes = computed<StructureOperonGeneWithCoordinate[]>(() => {
     const genes = toValue(computedGenes)
-    const xScaleVal = toValue(xScaleGenes)
+    const xScaleGenesVal = toValue(xScaleGenes)
+
     const innerPaddingpPerGeneVal = toValue(paddingPerGene)
     if (genes !== null) {
-        let currentSumSize = props.subsystems.length > 1 ? 0 : innerPaddingpPerGeneVal / 2
+        let currentSumSize = xScaleGenesVal.domain()[1] / 2 - toValue(totalGeneLengthWithPadding) / 2
         return genes.map((d) => {
-            const width = xScaleVal(d.size)
+            const width = xScaleGenesVal(d.size)
             const position = currentSumSize
-            const x = xScaleVal(position)
+            const x = xScaleGenesVal(position)
             currentSumSize = position + d.size + innerPaddingpPerGeneVal
             return {
                 ...d,