Dagre auto-layout not working properly after editing the layout ( delete node, and insert new node in-between nodes )

Describe the Bug

I’m building a binary tree structure node visualisation web-app I want to be able to re-render all nodes with the new position after deleting a node

Current behaviour On adding a new node after deleting a node, the new node jumps to a new position as the deleted node is still present

code sample

const CustomNodeFlow = () => {
  const dispatch = useAppDispatch();
  const { elements } = useAppSelector((state) => state.flowgraphSlice);

  const layeredElements = useMemo(
    () => getLayoutedElements(elements, 'LR'),
    [elements]
  );

  const onElementClick = (
    event: React.MouseEvent<Element, MouseEvent>,
    element: Node | Edge
  ) => {
    if (element.type === NodeTypesEnum.DecisionNode) return;
    dispatch(setSelectedNode(element as Node));
  };

  return (
    <ReactFlow
      elements={layeredElements}
      nodeTypes={nodeTypes}
      onElementClick={onElementClick}
      defaultZoom={0.75}
    >
      <Background variant={BackgroundVariant.Dots} gap={24} size={0.5} />
      <Controls />
    </ReactFlow>
  );
};

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

On adding a new node after deleting a node, the new node jumps to a new position as the deleted node is still present

Expected behavior

The graph should re-render nodes with newly calculated position

Screenshots or Videos

https://www.loom.com/share/e918c73a3e534e1f8c7fb72b159fff16

Platform

• OS: macOS
• Browser: Chrome, Safari, Firefox
• Version: 10

Additional context

No response

[jayanthbondi]

Hi @dexkode4 , I’m facing the similar issue, could you please share the codesandbox link if you have it.

[raarts]

Seen this happen in my setup too, but it wasn’t an issue for me. My guess: you will have to study dagre internals if you want to sort this out.