diff --git a/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts b/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts index bc73f14..330fedb 100644 --- a/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts +++ b/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts @@ -446,15 +446,13 @@ function renderPersons( .attr('fill', 'none'); } - // Label (positioned below connection lines) - // Vertical lines to children end at childY - halfSymbol = parentY + verticalSpacing - 20 = parentY + 80 - // So label must be > 80 to avoid overlap. Using 85. + // Label (positioned just below the symbol, above connection lines) if (options.showLabels && person.metadata.label) { personGroup .append('text') .attr('class', 'person-label') .attr('x', 0) - .attr('y', options.symbolSize / 2 + 65) + .attr('y', options.symbolSize / 2 + 15) .attr('text-anchor', 'middle') .attr('font-size', '12px') .attr('font-family', 'sans-serif') @@ -467,7 +465,7 @@ function renderPersons( .append('text') .attr('class', 'person-id') .attr('x', 0) - .attr('y', options.symbolSize / 2 + 65) + .attr('y', options.symbolSize / 2 + 15) .attr('text-anchor', 'middle') .attr('font-size', '11px') .attr('font-family', 'sans-serif') diff --git a/src/core/renderer/ConnectionRenderer.ts b/src/core/renderer/ConnectionRenderer.ts index 0c6c439..4489e01 100644 --- a/src/core/renderer/ConnectionRenderer.ts +++ b/src/core/renderer/ConnectionRenderer.ts @@ -22,7 +22,7 @@ export interface ConnectionConfig { export const DEFAULT_CONNECTION_CONFIG: ConnectionConfig = { lineWidth: 2, doubleLineGap: 4, - childDropHeight: 30, + childDropHeight: 50, // Increased to leave room for labels above the connection lines symbolSize: 40, };