Dnyamic node height position y axis

[charlesnoqx]

const getLayoutedElements = (nodes, edges, useNodeHeight = false, direction = 'TB') => {
  const isHorizontal = direction === 'LR'

  const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}))
  dagreGraph.setGraph({ rankdir: direction })

  let newNodes = nodes.map((node) => ({ ...node }))

  newNodes.forEach((node) => {
    return dagreGraph.setNode(node.id, {
      width: nodeWidth,
      height: (useNodeHeight ? node.height : nodeHeight) + nodeHeight / 2
    })
  })

  edges.forEach((edge) => {
    dagreGraph.setEdge(edge.source, edge.target)
  })

  dagre.layout(dagreGraph)

  newNodes = newNodes.map((node) => {
    const nodeWithPosition = dagreGraph.node(node.id)
    node.targetPosition = isHorizontal ? 'left' : 'top'
    node.sourcePosition = isHorizontal ? 'right' : 'bottom'

    console.log(
      nodeWithPosition,
      '<<nodeWithPosition.height',
      nodeWithPosition.y - nodeWithPosition.height / 2
    )
    node.position = {
      x: nodeWithPosition.x - nodeWidth / 2,
      y: nodeWithPosition.y - nodeWithPosition.height / 2
    }

    return node
  })

  return { nodes: newNodes, edges }
}


  const nodesInitialized = useNodesInitialized({})
  
 useEffect(() => {
    if (nodesInitialized) {
      const { nodes: layoutNodes, edges: layoutEdges } = getLayoutedElements(
        getNodes(),
        activeGraph.edges || [],
        true
      )

      setNodes(layoutNodes)
      setEdges(layoutEdges)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [nodesInitialized])
  

I used useNodesInitialized to recalculate the height and position, based on the actual height of the node

My problem is each rank/heirarchy doesnt go on the same position y,

Is it possible? the 1, 2 and 3 should have the same position.y
same with January and 1.1

Thanks in advance