handle inner padding better

components/OperonStructure.vue

@@ -33,23 +33,46 @@ const margin = ref<PlotMargin>({
 const gbContainer = ref(null)
 const geneToHighlight = ref<string | null>(null)
 const snackbar = ref(false)
+const innerPaddingRatio = ref<number>(0.1)
 // const color = d3.scaleOrdinal(d3.schemeCategory10);
 const domain = computed(() => {
     const genes = toValue(computedGenes)
     return genes?.map(d => { return d.gene })
 })
-const innerPadding = ref<number>(30)
 
 const totalGeneLength = computed(() => {
     const genes = toValue(computedGenes)
     return genes.reduce((acc, curr) => {
         return acc + (curr?.size ?? 10)
-    }, 0) + innerPadding.value * (genes.length - 1)
+    }, 0)
+})
+const innerPadding = computed(() => {
+    const totalGeneLengthVal = toValue(totalGeneLength)
+    const genes = toValue(computedGenes)
+    let innerPadding = innerPaddingRatio.value
+    if (genes.length === 1) innerPadding = 0
+    return totalGeneLengthVal * innerPadding
+})
+
+const innerPaddingpPerGene = computed(() => {
+    const genes = toValue(computedGenes)
+    const innerPaddingVal = toValue(innerPadding)
+    return innerPaddingVal / genes.length
+})
+
+
+const totalGeneLengthWithPadding = computed(() => {
+    const totalGeneLengthVal = toValue(totalGeneLength)
+    return totalGeneLengthVal + innerPadding.value
 })
 
 
+
+
+
 const domainGenes = computed(() => {
-    return [0, totalGeneLength.value]
+    return [0, totalGeneLengthWithPadding.value]
+    // return [0, totalGeneLength.value]
 })
 const xScale = computed(() => {
     return d3.scaleBand()
@@ -76,14 +99,15 @@ const computedGenes = computed<StructureOperonGene[]>(() => {
     const genes = toValue(genesProps)
     if (genes !== null && genes?.length > 0) {
         let currentSumSize = 0
-        return genes.map((d,i) => {
+        return genes.map((d, i) => {
             const size = d?.size ?? 10
-            const position = currentSumSize
-            currentSumSize = position + size + innerPadding.value
+            // const position = currentSumSize
+            // currentSumSize = position + size
+            // // + innerPaddingpPerGene.value
             return {
                 ...d,
                 size,
-                position,
+                // position,
                 highlight: geneToHighlight.value === d.gene
             }
         })
@@ -105,32 +129,23 @@ const structureVersion = computed(() => {
 const geneNodes = computed<StructureOperonGeneWithCoordinate[]>(() => {
     const genes = toValue(computedGenes)
     const xScaleVal = toValue(xScaleGenes)
+    const innerPaddingpPerGeneVal = toValue(innerPaddingpPerGene)
     // const yScaleVal = toValue(yScale)
     if (genes !== null) {
+        let currentSumSize = 0
         return genes.map(d => {
-            const x = xScaleVal(d.position)
-            // const y = yScaleVal('gene')
             const width = xScaleVal(d.size)
-            // let rotate = 0
-            // let labelWidth = (d.gene.length * textSizeRatio.value) / Math.sqrt(2)
-            // let labelHeight = labelWidth
-            // if (width < labelWidth) {
-            //     // need to increase angle
-            //     rotate = 90
-            //     labelHeight = labelWidth
-            //     labelWidth = 16
-            // }
+            const position = currentSumSize
+            const x = xScaleVal(position)
+            currentSumSize = position + d.size + innerPaddingpPerGeneVal
             return {
                 ...d,
                 width,
+                position,
                 x,
-                // rotate: 0,
-                // labelWidth,
                 labelHeight: 150,
                 y: 0,
-                // y: y === undefined ? 0 : y,
                 height: 0
-                // height: yScaleVal.bandwidth()
             }
         })
     }