Description

The visualizer component is an in-house solution that consists of two parts: 1. Algorithm for laying out nodes and edges position. It ensures that the edges have minimal crossing possible and do not cross nodes. 2. A three js-based imperative solution to draw the nodes and edges.

The idea of that project is to replace the second part of the in-house solution with the react-flow library to lower entry-level for introducing changes to that domain of the application.

Goals

Make a proof of concept of the visualizer powered by react-flow: 1. Support all node types. 2. Support all edge types. 3. Ensure that the layout is not worse than the current implementation (node crossing, on-hover animation, etc)

Resources

1. An example of the topology visualizer is here
2. The react-flow documentation.