From d6d864a1034e0b049346cf47757010e9efae421e Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 2 May 2024 18:51:40 +0200
Subject: [PATCH] handle inner padding better
---
components/OperonStructure.vue | 59 +++++++++++++++++++++-------------
1 file changed, 37 insertions(+), 22 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index 8f0e1bb3..a64d775c 100644
--- a/components/OperonStructure.vue
+++ b/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()
}
})
}
--
GitLab