Skip to main content

Project structure

React Sigma is composed of one core module, and several others for managing graph layouts.

Core​

The core is the main one with components and hooks that help you to display a graph with react.

npm install @react-sigma/core

Layout modules​

There is one module per graphology layout, plus one for the genericity (layout-core).

In graphology, there are two types of layout :

  • None iterative layouts that just need to be call to compute once for all the spatialisation (ex: random, circle).
  • Iterative layouts, that need to spawn a web worker to continuously run the algo (ex: forceatlas2)

None iterative layouts​

Description​

For those layouts, in the corresponding module we export a hook that you can call to :

  • compute the new nodes position (the positions function)
  • compute the new nodes position and assign it to the sigma graph (the assign function)

How to use it​

  1. Install the module
npm install @react-sigma/layout-circular graphology-layout
  1. Import the useLayoutCircular hook
import { useLayoutCircular } from "@react-sigma/layout-circular";
  1. Initialize the hook in your component (that must be a child of SigmaContainer)
const {positions, assign} = useLayoutCircular(...);
  1. Use the positions function
import { animateNodes } from "sigma/utils/animate";
...
useEffect(() => {
  animateNodes(sigma.getGraph(), positions(), { duration: 1000 });
}, [positions, sigma]);
  1. Or use the assign function
useEffect(() => {
  assign(sigma.getGraph());
}, [assign, sigma]);

Available layouts​

Iterative layouts​

Description​

For those layouts, in the corresponding module we export :

  • the same hook than for none iterative layouts (it run a fix number of iteration of the algo that can be configured in the hook: useLayoutForceAtlas2({ iterations: 100 })
  • A hook to manage the worker layout : const {stop, start, kill, isRunning} = useWorkerLayoutForceAtlas2(...)
  • A control component that use the above hook, to display a stop/start button on the graph

How to use it​

  1. Install the module
npm install @react-sigma/layout-forceatlas2 graphology-layout-forceatlas2
  1. Inside the SigmaContainer just add the component :
import { LayoutForceAtlas2Control } from "@react-sigma/layout-forceatlas2";
...
<SigmaContainer>
  <MyGraph />
  <ControlsContainer position={"bottom-right"}>
    <LayoutForceAtlas2Control />
  </ControlsContainer>
</SigmaContainer>

Available layouts​