React Flow + Dagre layout issue when node content size varies

import dagre from 'dagre';
import { Node, Edge, Position } from 'reactflow';

export default function layoutDAG(
  nodes: Node[],
  edges: Edge[],
  dagType: 'T' | 'I' | 'D'
): { nodes: Node[]; edges: Edge[] } {
  const defaultWidth = 286;
  const defaultHeight = 152;

  function getNodeSizes(
    nodes: Node[]
  ): Record<string, { width: number; height: number }> {
    const sizes: Record<string, { width: number; height: number }> = {};
    nodes.forEach(node => {
      let el = document.querySelector(`[data-id="${node.id}"]`);
      if (!el) {
        const reactFlowContainer = document.querySelector('.react-flow');
        if (reactFlowContainer) {
          el = reactFlowContainer.querySelector(`[data-id="${node.id}"]`);
        }
      }
      if (!el) {
        el = document.querySelector(`[data-node-id="${node.id}"]`);
      }
      if (el) {
        const contentEl =
          el.querySelector('.p-1.pt-3') ||
          el.querySelector('[style*="minWidth"]') ||
          el.querySelector('[style*="min-width"]') ||
          el.firstElementChild;
        const targetEl = contentEl || el;
        const rect = targetEl.getBoundingClientRect();
        const computedStyle = window.getComputedStyle(targetEl);
        const minWidth = parseFloat(computedStyle.minWidth) || 0;
        const minHeight = parseFloat(computedStyle.minHeight) || 0;
        const actualWidth = Math.max(rect.width, minWidth || defaultWidth);
        const actualHeight = Math.max(rect.height, minHeight || defaultHeight);
        sizes[node.id] = {
          width: Math.max(actualWidth, defaultWidth),
          height: Math.max(actualHeight, defaultHeight),
        };
      } else {
        const label = node.data?.label || '';
        const contentLength = typeof label === 'string' ? label.length : 0;
        const estimatedWidth = Math.max(
          defaultWidth,
          Math.min(600, contentLength * 10)
        );
        const estimatedHeight = Math.max(
          defaultHeight,
          Math.min(400, (contentLength / 50) * 20)
        );
        sizes[node.id] = { width: estimatedWidth, height: estimatedHeight };
      }
    });
    return sizes;
  }

  const sizes = getNodeSizes(nodes);
  const dagreGraph = new dagre.graphlib.Graph({ compound: true });
  dagreGraph.setDefaultEdgeLabel(() => ({}));
  const maxNodeWidth = Math.max(
    ...Object.values(sizes).map(s => s.width || defaultWidth)
  );
  const maxNodeHeight = Math.max(
    ...Object.values(sizes).map(s => s.height || defaultHeight)
  );

  const minNodeSep = 100;
  const maxNodeSep = 200;
  const minRankSep = 100;
  const nodeSep = Math.min(
    maxNodeSep,
    Math.max(minNodeSep, maxNodeWidth * 0.6)
  );
  const rankSep = Math.max(minRankSep, maxNodeHeight * 2.0);

  dagreGraph.setGraph({
    rankdir: getRankDir(dagType),
    nodesep: nodeSep,
    ranksep: rankSep,
    edgesep: 10,
    ranker: 'network-simplex',
  });

  function childCount(parentId: string, nodes: Node[]) {
    return nodes.filter(n => n.parentNode === parentId).length;
  }

  nodes.forEach(node => {
    if (node.type === 'group') {
      dagreGraph.setNode(node.id, {
        width: Math.min(1200, 200 + 60 * childCount(node.id, nodes)),
        height: Math.min(1000, 200 + 40 * childCount(node.id, nodes)),
      });
    } else {
      const { width, height } = sizes[node.id];
      dagreGraph.setNode(node.id, { width, height });
    }
  });

  nodes.forEach(node => {
    if (node.parentNode) {
      dagreGraph.setParent(node.id, node.parentNode);
    }
  });

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

  const parentPositions = new Map<string, { x: number; y: number }>();
  const layoutedNodes: Node[] = [];

  nodes.forEach(node => {
    if (node.type === 'group') {
      const dagreNode = dagreGraph.node(node.id);
      if (dagreNode) {
        const { x, y, width: dagreWidth, height: dagreHeight } = dagreNode;
        const parentX = x - (dagreWidth || defaultWidth) / 2;
        const parentY = y - (dagreHeight || defaultHeight) / 2;
        parentPositions.set(node.id, { x: parentX, y: parentY });

        layoutedNodes.push({
          ...node,
          type: 'group',
          position: { x: parentX, y: parentY },
          sourcePosition: dagType === 'I' ? Position.Top : Position.Bottom,
          targetPosition: dagType === 'I' ? Position.Bottom : Position.Top,
          style: {
            ...node.style,
            width: dagreWidth || defaultWidth,
            height: dagreHeight || defaultHeight,
            backgroundColor: '#dae7fa',
            border: '2px solid #438af5',
            opacity: 0.7,
          },
          draggable: true,
        });
      } else {
        layoutedNodes.push({
          ...node,
          sourcePosition: dagType === 'I' ? Position.Top : Position.Bottom,
          targetPosition: dagType === 'I' ? Position.Bottom : Position.Top,
          draggable: true,
        });
      }
    }
  });
  nodes.forEach(node => {
    if (node.type !== 'group') {
      const dagreNode = dagreGraph.node(node.id);
      const { width = defaultWidth, height = defaultHeight } = sizes[node.id];
      if (!dagreNode) {
        layoutedNodes.push({
          ...node,
          type: getNodeType(dagType),
          sourcePosition: dagType === 'I' ? Position.Top : Position.Bottom,
          targetPosition: dagType === 'I' ? Position.Bottom : Position.Top,
          draggable: true,
        });
        return;
      }

      const { x, y } = dagreNode;
      const nodeX = x - width / 2;
      const nodeY = y - height / 2;

      if (node.parentNode && parentPositions.has(node.parentNode)) {
        const parentPos = parentPositions.get(node.parentNode)!;
        layoutedNodes.push({
          ...node,
          type: getNodeType(dagType),
          position: { x: nodeX - parentPos.x, y: nodeY - parentPos.y },
          sourcePosition: dagType === 'I' ? Position.Top : Position.Bottom,
          targetPosition: dagType === 'I' ? Position.Bottom : Position.Top,
          draggable: true,
        });
      } else {
        layoutedNodes.push({
          ...node,
          type: getNodeType(dagType),
          position: { x: nodeX, y: nodeY },
          sourcePosition: dagType === 'impala' ? Position.Top : Position.Bottom,
          targetPosition: dagType === 'impala' ? Position.Bottom : Position.Top,
          draggable: true,
        });
      }
    }
  });

  return { nodes: layoutedNodes, edges };

  function getRankDir(type: string): string {
    return type === 'I' ? 'BT' : 'TB';
  }

  function getNodeType(type: string): string {
    switch (type) {
      case 'T':
        return 'tezNode';
      case 'I':
        return 'impalaNode';
      default:
        return 'dotNode';
    }
  }
}