React Sigma components
npm install @visdauas/react-sigma-v2A set of react components to display graphs with Sigma v2.
You can find some online examples here : https://sim51.github.io/react-sigma-v2/examples/
Or test it on cocdesanbox with this link: https://githubbox.com/sim51/react-sigma-v2/tree/main/demo
This library shares the same philosophy as react-leaflet, it just provides some bindings (and helpers) between React and Sigma.
The main component, ie. SigmaContainer create a Sigma instance with an empty graph. If its option initialSettings or graphOptions is updated, the instance is killed and re-created.
I recommend you to NOT UPDATE those options to avoid performance issues.
Sigma (& graphology) comes with methods that allow users to update the settings.
You should treat it as an immutable component.
Every child has access to the sigma instance (and so the graph instance) via the React context created by the SigmaContainer.
In your components, you can use the hook const sigma = useSigma() that gives you the sigma instance (and so the underlying graph with sigma.getGraph())
This is an example of how to display a graph :
``javascript
// Component that creates the graph
const MyCustomGraph = () => {
const sigma = useSigma();
const graph = sigma.getGraph();
graph.addNode("Jessica", { label: "Jessica", x: 1, y: 1, color: "#FF0", size: 10 });
graph.addNode("Truman", { label: "Truman", x: 0, y: 0, color: "#00F", size: 5 });
graph.addEdge("Jessica", "Truman", { color: "#CCC", size: 1 });
return null;
};
// Put your component as a child of SigmaContainer`
ReactDOM.render(
document.getElementById("root"),
);
You need to install this library and its peer dependencies :
`bash`
$> npm install sigma graphology graphology-layout-forceatlas2 react-sigma-v2
Package is composed of a _css file_ and a _list of react components & hooks_.
For the js part, everything is export in the package entrypoint, so you can do this
`javascript`
import { SigmaContainer, ...} from "react-sigma-v2";
For the css, you need to import the file ./lib/react-sigma-v2.css.
`javascript`
import "react-sigma-v2/lib/react-sigma-v2.css";
You can also import just the components you need, they are exposed under the folder ./lib/esm :
`javascript`
import { SigmaContainer, ...} from "react-sigma-v2/lib/esm/SigmaContainer";
- npm run build : Build the projectnpm run examples
- : Run the examples on
`javascript
import React, { ReactNode, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { UndirectedGraph } from "graphology";
import erdosRenyi from "graphology-generators/random/erdos-renyi";
import randomLayout from "graphology-layout/random";
import chroma from "chroma-js";
import faker from "faker";
import {
ControlsContainer,
ForceAtlasControl,
useSigma,
useRegisterEvents,
useLoadGraph,
useSetSettings,
SearchControl,
SigmaContainer,
ZoomControl,
} from "../src/index";
import "../src/assets/index.scss";
import { Attributes, NodeKey } from "graphology-types";
interface MyCustomGraphProps {
children?: ReactNode;
}
export const MyCustomGraph: React.FC
const sigma = useSigma();
const registerEvents = useRegisterEvents();
const loadGraph = useLoadGraph();
const setSettings = useSetSettings();
const [hoveredNode, setHoveredNode] = (useState < NodeKey) | (null > null);
useEffect(() => {
// Create the graph
const graph = erdosRenyi(UndirectedGraph, { order: 100, probability: 0.2 });
randomLayout.assign(graph);
graph.nodes().forEach(node => {
graph.mergeNodeAttributes(node, {
label: faker.name.findName(),
size: Math.max(4, Math.random() * 10),
color: chroma.random().hex(),
});
});
loadGraph(graph);
// Register the events
registerEvents({
enterNode: event => setHoveredNode(event.node),
leaveNode: () => setHoveredNode(null),
});
}, []);
useEffect(() => {
setSettings({
nodeReducer: (node, data) => {
const graph = sigma.getGraph();
const newData: Attributes = { ...data, highlighted: data.highlighted || false };
if (hoveredNode) {
if (node === hoveredNode || graph.neighbors(hoveredNode).includes(node)) {
newData.highlighted = true;
} else {
newData.color = "#E2E2E2";
newData.highlighted = false;
}
}
return newData;
},
edgeReducer: (edge, data) => {
const graph = sigma.getGraph();
const newData = { ...data, hidden: false };
if (hoveredNode && !graph.extremities(edge).includes(hoveredNode)) {
newData.hidden = true;
}
return newData;
},
});
}, [hoveredNode]);
return <>{children}>;
};
ReactDOM.render(
document.getElementById("root"),
);
`
This error comes from Sigma it self.
To work, Sigma requires that its _div container_ has a height.
Per default in the CSS of this project, _SigmaContainer_ is configured to take 100% (height & width) of its parent.
To resolve this issue, the easiest way is to add an _height_ on the _SigmaContainer_ like that :
``
...
This project can be used with Next.js, but only for client rendering, not for server side.
If you encounter the error ReferenceError: window is not defined, it's because you try to use react-sigmav2window
for server and client side and obviously is not define on service side.
To fix that, you have to check that you are on client side, and then do a dynamic import :
`
...
const isBrowser = () => typeof window !== "undefined"
if(isBrowser) {
const SigmaContainer = dynamic(import("react-sigma-v2").then(mod => mod.SigmaContainer), {ssr: false});
const MyGraph = dynamic(import("../components/graph").then(mod => mod.NetworkGraph), {ssr: false});
return (
)
}
else return (
NOT AVAILABLE
)