Skip to content

Latest commit

 

History

History
438 lines (304 loc) · 22.1 KB

DOCS.md

File metadata and controls

438 lines (304 loc) · 22.1 KB

Usage

Install

yarn add react-sigma

Any of the following components can be imported

import {Sigma, EdgeShapes, NodeShapes, LoadJSON, LoadGEXF, Filter, ForceAtlas2,
        RelativeSize, NOverlap, NeoCypher, NeoGraphItemsProducers,
        RandomizeNodePositions, SigmaEnableWebGL} from 'react-sigma'

Dagre and ForceLink are not included intentionally in the default distribution should be imported explicitly:

import ForceLink from 'react-sigma/lib/ForceLink'
import Dagre from 'react-sigma/lib/Dagre'

Components

Sigma

src/Sigma.js:87-180

Extends React.PureComponent

Sigma - React.JS flow-typed interface for Sigma js library - fastest opensource rendering engine for network graphs. Sigma makes it easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.

Parameter types

type Sigma$Graph$Data = {
  nodes: [Sigma$Node],
  edges: [Sigma$Edge]
};

type Sigma$Node = {
  id: string,
  label?: string,
  x?: number,
  y?: number,
  size?: number,
  color?: color
};

type Sigma$Edge = {
  id: string,
  source: string,
  target: string,
  label?: string,
  color?: color
};

Parameters

  • style CSS CSS style description for main div holding graph, should be specified in React format
  • settings Sigma$Settings js object with sigma initialization options, for full list see sigma settings page
  • renderer string can be "webgl" or "canvas"
  • graph Sigma$Graph$Data js object with array of nodes and edges used to initialize sigma
  • onClickNode Sigma$EventHandler set sigma callback for "clickNode" event (see below)
  • onOverNode Sigma$EventHandler set sigma callback for "overNode" event
  • onOutNode Sigma$EventHandler set sigma callback for "outNode" event
  • onClickEdge Sigma$EventHandler set sigma callback for "clickEdge" event
  • onOverEdge Sigma$EventHandler set sigma callback for "overEdge" event
  • onOutEdge Sigma$EventHandler set sigma callback for "outEdge" event

Examples

Can be composed with sigma sub-components using JSX syntax
<Sigma renderer="webgl" style={{maxWidth:"inherit", height:"400px"}}
       settings={{drawEdges:false}}
       onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}>
       graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>
  <RelativeSize initialSize={8}/>
</Sigma>

bindHandlers

src/Sigma.js:171-179

Initialize event handlers with sigma.

Event handler function receives Sigma Event with the structure of following type:

type Sigma$Event = {
data: {
node?: Neo4j$Node, //for node events is sigma node data
edge?: Neo4j$Edge, //for edge events is sigma edge data
captor: {   // information about event handler, for instance position on the page {clientX, clientY}
clientX: number,
clientY: number
}}}

type Sigma$EventHandler = (node:Sigma$Event) => void

Parameters

  • handlers
  • sigma

Rendering

SigmaEnableWebGL

src/SigmaEnableWebGL.js:7-7

Component enables WebGL renderer, setting it as default renderer if WebGL is supported by browser.

EdgeShapes

src/EdgeShapes.js:40-50

Extends React.Component

EdgeShapes component, interface for customEdgeShapes sigma plugin. It supposes that sigma graph is already in place, therefore component should not be mounted until graph is available. It can be used within Sigma component if graph is preloaded, or within loader component, like LoadJSON.

Note! this Component requires "canvas" renderer to work.

To assign a shape renderer to an edge, simply set edge.type='shape-name' e.g. edge.type='dotted'.

<Sigma renderer="canvas" graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>
<EdgeShapes default="dotted"/>
</Sigma>

Supported shapes

type Sigma$Edge$Shapes = "line" | "arrow" | "curve" | "curvedArrow" | "dashed" | "dotted" | "parallel" | "tapered";

See plugin page for more datails on implementation.

Parameters

  • default string set default sigma edge to be applied to edges where type is not set

NodeShapes

src/NodeShapes.js:48-58

Extends React.Component

NodeShapes component, interface for customShapes sigma plugin. It supposes that sigma graph is already in place, therefore component should not be mounted until graph is available. It can be used within Sigma component if graph is preloaded, or within loader component, like LoadJSON.

Note! this Component requires "canvas" renderer to work.

Extra node properties:

  • node.type='shape-name' - node shape renderer e.g. node.type='cross'.
  • node.borderColor - e.g. node.borderColor='#FF3333' Details on shapes configuration and possibility to apply images to nodes, please refer to plugin page.

See plugin page for more datails on implementation.

Parameters

  • default string set default sigma node renderer to be applied to nodes where type is not set

Examples

    ```
    <Sigma renderer="canvas" graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>
    <NodeShapes default="star"/>
    </Sigma>
    ```
    Supported shapes
    ```
    type Sigma$Node$Shapes = "def" | "pacman" | "star" | "equilateral" | "cross" | "diamond" | "circle" | "square";
    ```

Loading graph data

LoadJSON

src/LoadJSON.js:35-80

Extends React.PureComponent

LoadJSON component, interface for parsers.json sigma plugin. Can be used within Sigma component. Can be composed with other plugins: on load it mounts all child components (e.g. other sigma plugins). Child's componentWillMount should be used to enable plugins on loaded graph.

Parameters

LoadGEXF

src/LoadGEXF.js:33-79

Extends React.PureComponent

LoadGEXF component, interface for parsers.json sigma plugin. Can be used within Sigma component. Can be composed with other plugins: on load it mounts all child components (e.g. other sigma plugins). Child's componentWillMount should be used to enable plugins on loaded graph.

Parameters

NeoCypher

src/NeoCypher.js:47-100

Extends React.PureComponent

NeoCypher component, interface for neo4j.cypher sigma plugin. Can be used within Sigma component. Can be composed with other plugins: on load it mounts all child components (e.g. other sigma plugins). Child's componentWillMount should be used to enable plugins on loaded graph.

Parameters

  • url string Neo4j instance REST API URL
  • user string Neo4j instance REST API user
  • password string Neo4j instance REST API password
  • query string Neo4j cypher query
  • producers NeoGraphItemsProducers Optional transformer for creating Sigma nodes and edges, instance compatible with NeoGraphItemsProducers
  • onGraphLoaded Function Optional callback for graph updatesee sigma plugin page for more details

Nodes distribution

ForceLink

src/ForceLink.js:88-158

Extends React.Component

ForceLink component, starts Force Atlas2 algorythm once component is mounted, it is advanced version of ForceAtlas2 plugin, but it is not included in the main distribution script react-sigma.min.js , rather should be imported explicitly:

import ForceLink from 'react-sigma/lib/ForceLink'

It accepts all the parameters of ForceLink described on its github page:

Parameters

  • barnesHutOptimize boolean Use the algorithm's Barnes-Hut to improve repulsion's scalability This is useful for large graph but harmful to small ones.
  • barnesHutTheta number
  • adjustSizes boolean
  • iterationsPerRender number
  • linLogMode boolean? (optional, default true)
  • outboundAttractionDistribution boolean
  • edgeWeightInfluence number
  • scalingRatio number
  • strongGravityMode boolean
  • gravity number
  • alignNodeSiblings boolean
  • nodeSiblingsScale number
  • nodeSiblingsAngleMin number
  • worker boolean? Use a web worker to run calculations in separate thread (optional, default true)
  • background boolean
  • easing Sigma$Easing Easing mode
  • randomize ("globally" | "locally") Randomize node positions before start
  • slowDown number
  • timeout number how long algorythm should run. default=graph.nodes().length * 10see sigma plugin page for more details

Examples

import ForceLink from 'react-sigma/lib/ForceLink'
...
<Sigma>
<LoadJSON path="/public/graph.json">
<RelativeSize initialSize={8}/>
<ForceLink background easing="cubicInOut"/>
</LoadJSON>
</Sigma>

ForceAtlas2

src/ForceAtlas2.js:63-119

Extends React.Component

ForceAtlas2 component, starts ForceAtlas2 sigma plugin once component is mounted. It supposes that sigma graph is already in place, therefore component should not be mounted while graph is unavailable. It can be used within Sigma component if graph is preloaded, or within loader component, like NeoCypher.

It accepts all the parameters of ForceAtlas2 described on its github page:

Parameters

  • worker boolean? Use a web worker to run calculations in separate thread (optional, default true)
  • barnesHutOptimize boolean Use the algorithm's Barnes-Hut to improve repulsion's scalability This is useful for large graph but harmful to small ones.
  • barnesHutTheta number
  • adjustSizes boolean
  • iterationsPerRender number
  • linLogMode boolean? (optional, default true)
  • outboundAttractionDistribution boolean
  • edgeWeightInfluence number
  • scalingRatio number
  • strongGravityMode boolean
  • gravity number
  • slowDown number
  • timeout number how long algorythm should run. default=graph.nodes().length * 10see sigma plugin page for more details

NOverlap

src/NOverlap.js:53-98

Extends React.Component

NOverlap component, starts noverlap sigma plugin once component is mounted. It supposes that sigma graph is already in place, therefore component should not be mounted while graph is unavailable. It can be used within Sigma component if graph is preloaded, or within loader component, like LoadJSON.

Parameters

  • nodeMargin number? additional minimum space to apply around each and every node (optional, default 5)
  • scaleNodes number? multiplier, larger nodes will have more space around (optional, default 1.2)
  • gridSize number? number of rows and columns to use when dividing the nodes up into cell (optional, default 20)
  • permittedExpansion number? maximum ratio to apply to the bounding box (optional, default 1.1)
  • speed number larger value increases the speed at the cost of precision
  • maxIterations number iterations to run the algorithm for before stopping it
  • easing number camera easing type for camera transition
  • duration number duration of the transition for the easing methodIt accepts all the parameters of sigma.layout.noverlap plugin described on its github page: see sigma plugin page for more details

Examples

<Sigma graph={data}>
<NOverlap gridSize={10} maxIterations={100}/>
</Sigma>

RandomizeNodePositions

src/RandomizeNodePositions.js:21-43

Extends React.PureComponent

RandomizeNodePositions component, sets random positions to all nodes. Can be used within Sigma component with predefined graph or within graph loader component.

Parameters

  • seed number? Random position seed (optional, defaults to random number between 1 and 1e6)

RelativeSize

src/RelativeSize.js:25-34

Extends React.Component

RelativeSize component, interface for RelativeSize sigma plugin. It supposes that sigma graph is already in place, therefore component should not be mounted until graph is available. It can be used within Sigma component if graph is preloaded, or within loader component, like NeoCypher.

Sets nodes sizes corresponding its degree.

Parameters

  • initialSize number start size for every node, will be multiplied by Math.sqrt(node.degree)

Dagre

src/Dagre.js:42-46

Dagre layout algorythm. It supposes that sigma graph is already in place, therefore component should not be mounted while graph is unavailable. It can be used within Sigma component if graph is preloaded, or within loader component, like NeoCypher.

It accepts all the parameters of Dagre described on its github page:

Parameters

ReactSigmaLayoutPlugin

src/ReactSigmaLayoutPlugin.js:36-84

Extends React.Component

ReactSigmaLayoutPlugin is a base class for sigma plugins.

Usage

const Dagre = (props) =>
<ReactSigmaLayoutPlugin
start={sigma.layouts.dagre.start}
config={sigma.layouts.dagre.configure}
stop={() => console.warn("dagre stop not implemented")} />
...
<Dagre/>

Filter

src/Filter.js:30-60

Extends React.Component

Filter component, interface for filter sigma plugin. It supposes that sigma graph is already in place, therefore component should not be mounted until graph is available. It can be used within Sigma component if graph is preloaded, or within loader component, like NeoCypher.

Filter is hiding all nodes which do not apply to the provided nodesBy criteria.

Parameters

  • nodesBy Nodes$Filter will hide nodes where filter returns falsetype Nodes$Filter = (node: Sigma$Node) => boolean;
  • edgesBy Nodes$Filter will hide edges where filter returns falsetype Nodes$Filter = (node: Sigma$Node) => boolean;