Graph

A React component to create a Graph View easily, you can just pass data and render methods.

Examples#

function MyGraph() {
  const [data, setData] = React.useState({
    nodes: [
      { id: "1", position: { x: 10, y: 10 } },
      { id: "2", position: { x: 300, y: 100 } },
    ],
    edges: [{ id: "edge:1", source: "1", target: "2" }],
  });
  return (
    <Graph
      style={{ width: "100%", height: 250 }}
      onPress={({ position }) => {
        setData({
          nodes: [
            ...data.nodes,
            { id: "" + (Math.random() * 1000).toFixed(0), position },
          ],
          edges: data.edges,
        });
      }}
      nodes={data.nodes}
      edges={data.edges}
    />
  );
}

Reference#

Props#

Name	Type	Description
`children?`	`ReactNode`	-
`config?`	`GraphConfig`	All graph config for nodes and edges
`drawLine?`	`DrawLine`	The function to draw line for edge connection vectors
`edges`	`EdgeData`[]	Edge data list to render
`extraData?`	`any`	To rerender the graph when the extra data changes
`nodes`	`NodeData`[]	Node data list to render
`onBoxSelection?`	`OnBoxSelection`	Event handler for box selection event. It gives the selected nodes
`onPress?`	`ViewportOnPress`	Event handler for graph canvas background
`renderClusterNode?`	`RenderClusterNode`	It returns a PIXI.DisplayObject instance as React.Node for the cluster node
`renderEdge?`	`RenderEdge`	It returns a PIXI.DisplayObject instance as React.Node for the edge
`renderNode?`	`RenderNode`	It returns a PIXI.DisplayObject instance as React.Node for the node
`selectedElementIds?`	`string`[]	It gives the selected nodes. It is used for selected node highlighting and DataBar
`style?`	`ViewProps`[`"style"`]	Style for graph container view