Skip to main content

Layouts

The react-sigma includes some sub-libraries for managing layouts on graphs. They provide hooks that helps you to apply/run a layout on your sigma instance.

List of available layouts​

We provide all the layouts that are part of graphology :

Two types of layouts​

There are two types of layout, the one that you call just once (ex: random or circular) and the worker one.

Regular layout​

For regular layout, we provide a hook that returns two functions :

  • positions : a function that execute the layout on the sigma's graph (but doesn't modify it) and returns you a map of position where the key is the node key.
  • assign : a function that execute the layout on the sigma's graph and save the position of nodes in it
const { positions, assign } = useLayoutCircular(...);

To use one of those hooks you firstly need to install the layout-core package and then the layout package you want to use. As an example

npm install @react-sigma/layout-core @react-sigma/layout-circular

Then you can follow this example to see how to use it :

Loading...

Worker layout​

For worker layout, we provide a hook that returns :

  • function to start the layout
  • function to stop the layout
  • function to kill the layout
  • a boolean to know if the layout is running or not
const { stop, start, kill, isRunning } = useWorkerLayoutForceAtlas2(...);

With this hook, you can implement your own component to manage the worker.

npm install @react-sigma/layout-core @react-sigma/layout-forceatlas2

Then you can follow this example to see how to use it :

Loading...

If you want to display start/stop button, you can use the control component we provide for each worker component, that display a start/stop button on the graph.

Loading...