Improve Graph Layout (Avoid Overlap of Nodes/Labels)

[Z-xus]

Environment:

• React + TypeScript
• PNPM-managed project
• DFA visualization component

Description:
The current DFA graph visualization can have overlapping nodes and labels, reducing readability for larger or complex DFAs. The layout algorithm needs improvement to automatically space nodes and labels clearly.

Expected Behavior:

• Nodes should be spaced to avoid overlap.
• Labels should remain readable without colliding with edges or other nodes.
• Layout should adapt dynamically to DFAs of different sizes.

Acceptance Criteria:

• No overlapping nodes in typical DFA graphs.
• Labels do not collide with edges or other nodes.
• Graph layout remains readable regardless of DFA complexity.

Possible Solutions / Suggestions:

• Use a graph layout library such as Dagre, Cytoscape, or react-flow’s built-in layout features.
• Implement a force-directed or hierarchical layout algorithm.
• Ensure compatibility with React + TypeScript and PNPM project setup.

[teamheaven]

Hi, I'd like to work on this issue. Please assign it to me.