### Install and Run Flow Type Checking

Source: https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md

Installs flow-typed globally and then runs the flow-typed command to set up type definitions. This is necessary for the project's embedded flow type checking.

```bash
npm install -g flow-typed
flow-typed
```

--------------------------------

### Install react-sigma using npm, yarn, or bower

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

Demonstrates how to install the react-sigma library using different package managers. It also shows how to include the library via a script tag for direct usage without a module bundler.

```bash
npm install --save react-sigma
```

```bash
yarn add react-sigma
```

```bash
bower install https://unpkg.com/react-sigma@1.2/dist/react-sigma.min.js
```

```html
<script src="https://unpkg.com/react-sigma@1.2/dist/react-sigma.min.js"></script>
```

--------------------------------

### Install react-sigma using Yarn

Source: https://github.com/dunnock/react-sigma/blob/master/USAGE.md

This snippet shows the command to add the react-sigma library to your project using the Yarn package manager. It's the initial step for using react-sigma in your React application.

```bash
yarn add react-sigma
```

--------------------------------

### Build Production-Ready Application

Source: https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md

Builds the application for production, optimizing it for performance and creating minified files with hash filenames in the 'build' folder. This script is essential for deployment.

```bash
npm run build
```

--------------------------------

### Importing react-sigma components

Source: https://github.com/dunnock/react-sigma/blob/master/USAGE.md

Demonstrates how to import various components from the react-sigma library. This includes core components like Sigma and utility components for graph manipulation and rendering.

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

--------------------------------

### Creating Custom Sigma-Aware Components in react-sigma

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

Provides an example of how to extend react-sigma by creating custom components that can interact with the Sigma instance. The example shows a MyCustomSigma component that adds a node to the graph upon initialization.

```jsx
class MyCustomSigma extends React.Component {
	constructor(props) {
		super(props)
		props.sigma.graph.addNode({id:"n3", label:props.label})
	}
}
...
return  <Sigma>
	<MyCustomSigma label="Label">
</Sigma>
```

--------------------------------

### Importing optional react-sigma components

Source: https://github.com/dunnock/react-sigma/blob/master/USAGE.md

Shows how to import specific components like ForceLink and Dagre, which are not included in the default distribution of react-sigma and must be imported explicitly.

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

--------------------------------

### Launch Test Runner in Watch Mode

Source: https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md

Starts the test runner in an interactive watch mode. This script is part of the Create React App template and provides information on running tests.

```bash
npm test
```

--------------------------------

### Perform Flow Type Check

Source: https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md

Executes the flow type check for the entire application. This is a recommended step before starting the build process to ensure type correctness.

```bash
npm run flow
```

--------------------------------

### Basic Graph Rendering with react-sigma

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

A simple example of using the Sigma component to render a graph with predefined nodes and edges. It includes basic settings and demonstrates the use of plugins like RelativeSize and RandomizeNodePositions for node layout.

```jsx
import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';
...
let myGraph = {nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]};
...
<Sigma graph={myGraph} settings={{drawEdges: true, clone: false}}>
  <RelativeSize initialSize={15}/>
  <RandomizeNodePositions/>
</Sigma>
```

--------------------------------

### Run Storyboard for Component Visualizations

Source: https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md

Executes the storyboard script to run the application's storyboard, which includes component visualizations. The application will automatically reload upon detecting code edits.

```bash
npm run storyboard
```

--------------------------------

### Advanced Graph Rendering with react-sigma

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

An advanced example demonstrating various react-sigma features, including specifying the renderer (canvas), using plugins like EdgeShapes, NodeShapes, LoadGEXF, Filter, ForceAtlas2, and RelativeSize for complex graph visualizations and interactions.

```jsx
<Sigma renderer="canvas">
	<EdgeShapes default="tapered"/>
	<NodeShapes default="star"/>
	<LoadGEXF path={String(process.env.PUBLIC_URL) + "/arctic.gexf"}>
		<Filter neighborsOf={ this.state.filterNeighbours } />
		<ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} iterationsPerRender={10} linLogMode timeout={3000}/>
		<RelativeSize initialSize={15}/>
	</LoadGEXF>
</Sigma>
```

--------------------------------

### Minimizing bundle with webpack2/rollup

Source: https://github.com/dunnock/react-sigma/blob/master/USAGE.md

Illustrates how to import components from react-sigma when using module bundlers like webpack2 or rollup to minimize the bundle size. Only explicitly imported components are included in the final bundle.

```javascript
import { Sigma, ForceAtlas2 } from 'react-sigma'
```

--------------------------------

### Base Class for Sigma Layout Plugins in JavaScript

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

ReactSigmaLayoutPlugin serves as a base class for creating custom Sigma layout plugins within a React application. It provides a structure for integrating Sigma layout functionalities. Example usage shows how to wrap specific layout functions like 'sigma.layouts.dagre.start' and 'sigma.layouts.dagre.configure'.

```javascript
import React from 'react';

class ReactSigmaLayoutPlugin extends React.Component {
  // ... component implementation ...
}

export default ReactSigmaLayoutPlugin;
```

--------------------------------

### Initialize Sigma Component with JSX

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

Demonstrates how to use the Sigma component with JSX syntax. It configures rendering options, styles, settings, graph data, and event handlers like onOverNode.

```javascript
<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>
```

--------------------------------

### Initialize Sigma Graph Renderer with JSX in React

Source: https://context7.com/dunnock/react-sigma/llms.txt

Initializes the Sigma graph renderer, reserving a div area and setting up the camera. It takes graph data, renderer type, styling, and event handlers as props. Child components like RelativeSize and RandomizeNodePositions can be used for graph manipulation and layout.

```jsx
import React from 'react';
import { Sigma, RelativeSize, RandomizeNodePositions } from 'react-sigma';

// Define graph data with nodes and edges
const graphData = {
  nodes: [
    { id: 'n1', label: 'Alice', color: '#FF5733' },
    { id: 'n2', label: 'Bob', color: '#33FF57' },
    { id: 'n3', label: 'Charlie', color: '#3357FF' }
  ],
  edges: [
    { id: 'e1', source: 'n1', target: 'n2', label: 'knows' },
    { id: 'e2', source: 'n2', target: 'n3', label: 'works_with' },
    { id: 'e3', source: 'n1', target: 'n3', label: 'met' }
  ]
};

function GraphVisualization() {
  return (
    <Sigma
      graph={graphData}
      renderer="canvas"
      style={{ width: '800px', height: '600px' }}
      settings={{
        drawEdges: true,
        drawEdgeLabels: true,
        clone: false,
        defaultNodeColor: '#3388AA',
        defaultLabelSize: 12,
        labelThreshold: 5
      }}
      onClickNode={e => console.log('Clicked node:', e.data.node.label)}
      onOverNode={e => console.log('Mouse over:', e.data.node.label)}
      onOutNode={e => console.log('Mouse out:', e.data.node.label)}
      onClickEdge={e => console.log('Clicked edge:', e.data.edge.label)}
    >
      <RelativeSize initialSize={15} />
      <RandomizeNodePositions />
    </Sigma>
  );
}

export default GraphVisualization;
```

--------------------------------

### Sigma Component with Custom Event Handling and WebGL Renderer

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

Illustrates the main Sigma component's capabilities, including setting a specific renderer (webgl), applying styles, configuring graph settings, and handling events like mouse-over nodes. It also shows composition with plugins like RelativeSize.

```jsx
<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>
```

--------------------------------

### Enabling WebGL Renderer in react-sigma

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

Demonstrates how to import and enable the WebGL renderer for react-sigma. When SigmaEnableWebGL is imported, it automatically sets WebGL as the default renderer if the browser supports it.

```jsx
import { Sigma, SigmaEnableWebGL } from 'react-sigma'
...
<Sigma /> // will use webgl renderer if supported by browser
```

--------------------------------

### Switch Renderers with SigmaEnableWebGL and SigmaEnableSVG in React-Sigma

Source: https://context7.com/dunnock/react-sigma/llms.txt

These components allow switching between different renderers for react-sigma graphs. SigmaEnableWebGL enables the WebGL renderer, which is recommended for large graphs (1000+ nodes) due to its performance benefits. SigmaEnableSVG enables the SVG renderer, which is suitable for vector-based rendering and exporting. Both components are used within a Sigma graph context to specify the desired rendering engine.

```jsx
import React from 'react';
import { Sigma, SigmaEnableWebGL, SigmaEnableSVG, LoadJSON, RelativeSize, ForceAtlas2 } from 'react-sigma';

// WebGL Renderer - best for large graphs (1000+ nodes)
function WebGLGraph() {
  // Import SigmaEnableWebGL to enable WebGL as default renderer
  return (
    <Sigma
      renderer="webgl"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true }}
    >
      <SigmaEnableWebGL />
      <LoadJSON path="/data/large-network.json">
        <RelativeSize initialSize={5} />
        <ForceAtlas2 worker barnesHutOptimize timeout={10000} />
      </LoadJSON>
    </Sigma>
  );
}

// SVG Renderer - vector-based, good for export
function SVGGraph() {
  return (
    <Sigma
      renderer="svg"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true }}
    >
      <SigmaEnableSVG />
      <LoadJSON path="/data/small-network.json">
        <RelativeSize initialSize={10} />
      </LoadJSON>
    </Sigma>
  );
}

export { WebGLGraph, SVGGraph };
```

--------------------------------

### Import and Use ForceLink Component in React-Sigma

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

This snippet shows how to import the ForceLink component from 'react-sigma/lib/ForceLink' and use it within a React component tree, typically nested inside a Sigma component. It demonstrates basic configuration with the 'background' and 'easing' props.

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

--------------------------------

### NeoCypher Component: Connect to Neo4j and Load Graph Data (React JSX)

Source: https://context7.com/dunnock/react-sigma/llms.txt

The NeoCypher component connects to a Neo4j database and executes Cypher queries to load graph data. It requires Neo4j connection details (URL, user, password) and a Cypher query. Custom producers can be defined to transform Neo4j results into Sigma's expected format. Dependencies include react and react-sigma.

```jsx
import React from 'react';
import { Sigma, NeoCypher, ForceAtlas2, RelativeSize, NeoGraphItemsProducers } from 'react-sigma';

// Custom producer to transform Neo4j results to Sigma format
class CustomProducers extends NeoGraphItemsProducers {
  node(neoNode) {
    return {
      id: neoNode.id.toString(),
      label: neoNode.properties.name || neoNode.labels[0],
      size: neoNode.properties.importance || 1,
      color: neoNode.labels.includes('Person') ? '#FF5733' : '#3388AA',
      x: Math.random(),
      y: Math.random()
    };
  }

  edge(neoEdge) {
    return {
      id: neoEdge.id.toString(),
      source: neoEdge.startNode.toString(),
      target: neoEdge.endNode.toString(),
      label: neoEdge.type,
      color: '#ccc'
    };
  }
}

function Neo4jGraph() {
  return (
    <Sigma
      renderer="canvas"
      style={{ width: '100%', height: '600px' }}
      settings={{ drawEdges: true, drawEdgeLabels: true }}
    >
      <NeoCypher
        url="http://localhost:7474"
        user="neo4j"
        password="password"
        query="MATCH (n:Person)-[r:KNOWS]->(m:Person) RETURN n, r, m LIMIT 100"
        producers={new CustomProducers()}
        onGraphLoaded={() => console.log('Neo4j data loaded')}
      >
        <RelativeSize initialSize={10} />
        <ForceAtlas2
          worker
          barnesHutOptimize
          timeout={4000}
        />
      </NeoCypher>
    </Sigma>
  );
}

export default Neo4jGraph;
```

--------------------------------

### Add Nodes and Edges Dynamically with Sigma Instance

Source: https://context7.com/dunnock/react-sigma/llms.txt

This component demonstrates how to dynamically add nodes and edges to a sigma graph instance. It accesses the sigma instance via props and uses sigma.graph methods to modify the graph structure. Ensure the sigma instance is available before attempting modifications.

```jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

// Custom component that adds nodes dynamically
class DynamicNodeAdder extends React.Component {
  componentDidMount() {
    const { sigma } = this.props;
    if (!sigma) return;

    // Add a new node dynamically
    sigma.graph.addNode({
      id: 'dynamic-node',
      label: 'Added Dynamically',
      x: Math.random(),
      y: Math.random(),
      size: 2,
      color: '#FF0000'
    });

    // Add edge connecting to existing node
    if (sigma.graph.nodes().length > 1) {
      const existingNode = sigma.graph.nodes()[0];
      sigma.graph.addEdge({
        id: 'dynamic-edge',
        source: 'dynamic-node',
        target: existingNode.id
      });
    }

    sigma.refresh();
  }

  render() {
    return null;
  }
}

// Custom component that highlights neighbors on hover
class NeighborHighlighter extends React.Component {
  componentDidMount() {
    const { sigma } = this.props;
    if (!sigma) return;

    sigma.bind('overNode', (e) => {
      const nodeId = e.data.node.id;
      const neighbors = sigma.graph.neighbors(nodeId);

      sigma.graph.nodes().forEach(node => {
        if (node.id === nodeId || neighbors.includes(node.id)) {
          node.color = '#FF5733';
        } else {
          node.color = '#ccc';
        }
      });

      sigma.refresh();
    });

    sigma.bind('outNode', () => {
      sigma.graph.nodes().forEach(node => {
        node.color = '#3388AA';
      });
      sigma.refresh();
    });
  }

  render() {
    return null;
  }
}

function CustomExtendedGraph() {
  const graphData = {
    nodes: [
      { id: 'n1', label: 'Node 1' },
      { id: 'n2', label: 'Node 2' },
      { id: 'n3', label: 'Node 3' }
    ],
    edges: [
      { id: 'e1', source: 'n1', target: 'n2' },
      { id: 'e2', source: 'n2', target: 'n3' }
    ]
  };

  return (
    <Sigma
      graph={graphData}
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true, clone: false }}
    >
      <RelativeSize initialSize={15} />
      <RandomizeNodePositions />
      <DynamicNodeAdder />
      <NeighborHighlighter />
    </Sigma>
  );
}

export default CustomExtendedGraph;

```

--------------------------------

### Apply Dagre Layout for Hierarchical Graphs in React

Source: https://context7.com/dunnock/react-sigma/llms.txt

This component applies the Dagre layout algorithm to render hierarchical graphs. It requires explicit import and configuration of Dagre properties like rankDir and easing. The component takes graph data as input and visualizes it using the Sigma renderer.

```jsx
import React from 'react';
import { Sigma, RelativeSize } from 'react-sigma';
import Dagre from 'react-sigma/lib/Dagre';

function HierarchicalGraph() {
  const hierarchyData = {
    nodes: [
      { id: 'ceo', label: 'CEO' },
      { id: 'cto', label: 'CTO' },
      { id: 'cfo', label: 'CFO' },
      { id: 'dev1', label: 'Developer 1' },
      { id: 'dev2', label: 'Developer 2' },
      { id: 'acc1', label: 'Accountant' }
    ],
    edges: [
      { id: 'e1', source: 'ceo', target: 'cto' },
      { id: 'e2', source: 'ceo', target: 'cfo' },
      { id: 'e3', source: 'cto', target: 'dev1' },
      { id: 'e4', source: 'cto', target: 'dev2' },
      { id: 'e5', source: 'cfo', target: 'acc1' }
    ]
  };

  return (
    <Sigma
      graph={hierarchyData}
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true, clone: false }}
    >
      <RelativeSize initialSize={20} />
      <Dagre
        directed={true}
        multigraph={false}
        compound={false}
        rankDir="TB"
        easing="cubicInOut"
      />
    </Sigma>
  );
}

export default HierarchicalGraph;
```

--------------------------------

### Load Graph Data from GEXF with LoadGEXF Component

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The LoadGEXF component serves as an interface for loading graph data from GEXF files using the sigma.js parsers.gexf plugin. It integrates within a Sigma component and supports composition with other plugins, enabling their initialization after the graph is loaded.

```javascript
import React from 'react';
import Sigma from 'sigma-react';
import LoadGEXF from './LoadGEXF';

const MyGraph = () => (
  <Sigma>
    <LoadGEXF path="/path/to/your/graph.gexf" />
    {/* Other sigma plugins can be children of LoadGEXF */}
  </Sigma>
);

export default MyGraph;
```

--------------------------------

### Apply Dagre Layout Algorithm in JavaScript

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The Dagre component applies the Dagre layout algorithm to a Sigma graph. It assumes the graph is already loaded and available. This component accepts various Dagre parameters such as 'directed', 'multigraph', 'compound', 'rankDir', and 'easing' to customize the layout.

```javascript
import React from 'react';

const Dagre = (props) => {
  // ... component implementation ...
};

export default Dagre;
```

--------------------------------

### Loading Graph Data from External JSON with react-sigma

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

Shows how to use the Sigma component to load graph data from an external JSON file using the LoadJSON plugin. This is useful for dynamically loading network data into the application.

```jsx
import {Sigma, LoadJSON} from 'react-sigma'
...
<Sigma style={{width:"200px", height:"200px"}}>
  <LoadJSON path="/public/data.json" />
</Sigma>
```

--------------------------------

### ForceLink Component: Advanced Force-Directed Layout (React JSX)

Source: https://context7.com/dunnock/react-sigma/llms.txt

The ForceLink component offers an advanced force-directed layout algorithm with features like node alignment and background processing. It must be imported explicitly. This component is used for complex network visualizations and requires graph data, typically loaded via LoadJSON. Dependencies include react, react-sigma, and react-sigma/lib/ForceLink.

```jsx
import React from 'react';
import { Sigma, LoadJSON, RelativeSize } from 'react-sigma';
import ForceLink from 'react-sigma/lib/ForceLink';

function AdvancedForceLayout() {
  return (
    <Sigma
      renderer="canvas"
      style={{ width: '100%', height: '600px' }}
      settings={{ drawEdges: true }}
    >
      <LoadJSON path="/data/complex-network.json">
        <RelativeSize initialSize={8} />
        <ForceLink
          worker={true}
          background={true}
          easing="cubicInOut"
          randomize="globally"
          barnesHutOptimize={true}
          barnesHutTheta={0.5}
          linLogMode={true}
          outboundAttractionDistribution={false}
          edgeWeightInfluence={1}
          scalingRatio={2}
          strongGravityMode={false}
          gravity={1}
          alignNodeSiblings={true}
          nodeSiblingsScale={0.5}
          nodeSiblingsAngleMin={0}
          slowDown={1}
          timeout={8000}
        />
      </LoadJSON>
    </Sigma>
  );
}

export default AdvancedForceLayout;
```

--------------------------------

### Set Relative Node Sizes in JavaScript

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The RelativeSize component interfaces with the Sigma RelativeSize plugin to set node sizes based on their degree. It requires the Sigma graph to be available before mounting. The 'initialSize' parameter determines the base size, which is then multiplied by the square root of the node's degree.

```javascript
import React from 'react';

class RelativeSize extends React.Component {
  // ... component implementation ...
}

export default RelativeSize;
```

--------------------------------

### ForceAtlas2 Layout Component for React-Sigma

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The ForceAtlas2 component is a React.Component that initializes the ForceAtlas2 sigma plugin when mounted. It requires a pre-existing sigma graph and accepts numerous parameters to control the layout algorithm's behavior, such as barnesHutOptimize, edgeWeightInfluence, and gravity. It can optionally use web workers for performance.

```javascript
import React from 'react';

class ForceAtlas2 extends React.Component {
  // ... component implementation ...
  render() {
    // This component does not render DOM elements directly,
    // but configures the sigma plugin.
    return null;
  }
}

export default ForceAtlas2;
```

--------------------------------

### Bind Event Handlers to Sigma Instance

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

A JavaScript function to initialize event handlers for the Sigma instance. It takes an array of handlers and the sigma object as arguments. The event handler function receives a Sigma Event object containing data about the node or edge involved.

```javascript
function bindHandlers(handlers, sigma) {
  // Implementation details for binding handlers
}
```

--------------------------------

### Load Graph Data from GEXF in React Sigma

Source: https://context7.com/dunnock/react-sigma/llms.txt

Loads graph data from GEXF files using the LoadGEXF component, suitable for data exported from tools like Gephi. It allows for dynamic filtering of nodes and integration with layout algorithms like ForceAtlas2. The component requires a 'path' prop for the GEXF file.

```jsx
import React from 'react';
import { Sigma, LoadGEXF, Filter, ForceAtlas2, RelativeSize, EdgeShapes } from 'react-sigma';

function GEXFVisualization() {
  const [filterNode, setFilterNode] = React.useState(null);

  return (
    <div>
      <button onClick={() => setFilterNode('hub-node-id')}>
        Show Hub Neighbors
      </button>
      <button onClick={() => setFilterNode(null)}>
        Show All
      </button>

      <Sigma
        renderer="canvas"
        style={{ width: '100%', height: '600px' }}
        settings={{ drawEdges: true }}
      >
        <EdgeShapes default="curvedArrow" />
        <LoadGEXF
          path="/data/arctic-research.gexf"
          onGraphLoaded={() => console.log('GEXF loaded')}
        >
          <Filter neighborsOf={filterNode} />
          <ForceAtlas2
            worker
            barnesHutOptimize
            barnesHutTheta={0.6}
            iterationsPerRender={10}
            linLogMode
            timeout={5000}
          />
          <RelativeSize initialSize={15} />
        </LoadGEXF>
      </Sigma>
    </div>
  );
}

export default GEXFVisualization;
```

--------------------------------

### Enabling SVG Renderer in react-sigma

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

Shows how to import the SigmaEnableSVG component to enable SVG rendering capabilities in react-sigma. Unlike WebGL, SVG rendering needs to be explicitly specified in the Sigma component's props.

```jsx
import { Sigma, SigmaEnableSVG } from 'react-sigma'
...
<Sigma renderer="svg" /> 
```

--------------------------------

### Sequential Component Composition with LoadJSON

Source: https://github.com/dunnock/react-sigma/blob/master/README.md

This snippet demonstrates how to compose React-Sigma components for sequential rendering. The LoadJSON component ensures that its children, like RelativeSize, are only rendered after the graph data has been successfully loaded from the specified URL. This pattern avoids the need for callbacks or handlers for managing asynchronous operations.

```jsx
<Sigma>
	<LoadJSON url="/arctic.json">
		<RelativeSize initialSize={8}/>
	</LoadJSON>
</Sigma>
```

--------------------------------

### Enable Sigma WebGL Renderer

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

A component that enables the WebGL renderer for Sigma.js. It sets WebGL as the default renderer if it is supported by the user's browser, offering potentially better performance for graph rendering.

```javascript
import { SigmaEnableWebGL } from 'react-sigma';

// Usage within a React component:
<SigmaEnableWebGL />
```

--------------------------------

### NeoCypher Component

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The NeoCypher component serves as an interface for the neo4j.cypher sigma plugin. It can be used within a Sigma component and composed with other plugins. Child components' componentWillMount can be used to enable plugins on a loaded graph.

```APIDOC
## NeoCypher Component

### Description

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.

### Method

N/A (React Component)

### Endpoint

N/A (React Component)

### Parameters

#### Props

- **url** (string) - Required - Neo4j instance REST API URL
- **user** (string) - Required - Neo4j instance REST API user
- **password** (string) - Required - Neo4j instance REST API password
- **query** (string) - Required - Neo4j cypher query
- **producers** (NeoGraphItemsProducers) - Optional - Transformer for creating Sigma nodes and edges, instance compatible with NeoGraphItemsProducers
- **onGraphLoaded** (Function) - Optional - Callback for graph update [see sigma plugin page for more details](https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.neo4j.cypher)

### Request Example

```jsx
<NeoCypher
  url="http://localhost:7474/db/data/"
  user="neo4j"
  password="password"
  query="MATCH (n) RETURN n LIMIT 10"
/>
```

### Response

N/A (This is a React component, not an API endpoint. It renders a graph visualization.)
```

--------------------------------

### NOverlap Layout Component for React-Sigma

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The NOverlap component is a React.Component that initializes the noverlap sigma plugin upon mounting. It assumes a sigma graph is already available and can be used within a Sigma component or a loader component. It accepts parameters like nodeMargin, scaleNodes, and maxIterations to customize the non-overlapping node layout algorithm.

```javascript
import React from 'react';
import PropTypes from 'prop-types';

class NOverlap extends React.Component {
  // ... component implementation ...
  render() {
    // This component configures the sigma plugin and does not render DOM elements.
    return null;
  }
}

NOverlap.propTypes = {
  nodeMargin: PropTypes.number,
  scaleNodes: PropTypes.number,
  gridSize: PropTypes.number,
  permittedExpansion: PropTypes.number,
  speed: PropTypes.number,
  maxIterations: PropTypes.number,
  easing: PropTypes.string,
  duration: PropTypes.number
};

export default NOverlap;
```

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

--------------------------------

### Load Graph Data from JSON in React Sigma

Source: https://context7.com/dunnock/react-sigma/llms.txt

Loads graph data from an external JSON file using the LoadJSON component. Child components are mounted only after the graph is fully loaded, facilitating sequential plugin initialization. It requires a 'path' prop for the JSON file and an optional 'onGraphLoaded' callback.

```jsx
import React from 'react';
import { Sigma, LoadJSON, RelativeSize, ForceAtlas2 } from 'react-sigma';

function GraphFromJSON() {
  const handleGraphLoaded = () => {
    console.log('Graph data loaded successfully');
  };

  return (
    <Sigma
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true, clone: false }}
    >
      <LoadJSON
        path="/data/social-network.json"
        onGraphLoaded={handleGraphLoaded}
      >
        <RelativeSize initialSize={8} />
        <ForceAtlas2
          worker
          barnesHutOptimize
          barnesHutTheta={0.6}
          iterationsPerRender={10}
          timeout={3000}
        />
      </LoadJSON>
    </Sigma>
  );
}

// Expected JSON file structure (social-network.json):
// {
//   "nodes": [
//     {"id": "n1", "label": "User 1", "x": 0, "y": 0, "size": 3},
//     {"id": "n2", "label": "User 2", "x": 1, "y": 1, "size": 2}
//   ],
//   "edges": [
//     {"id": "e1", "source": "n1", "target": "n2"}
//   ]
// }

export default GraphFromJSON;
```

--------------------------------

### ForceAtlas2 Component: Apply Force-Directed Layout (React JSX)

Source: https://context7.com/dunnock/react-sigma/llms.txt

The ForceAtlas2 component applies a force-directed layout algorithm to position graph nodes automatically. It's useful for visualizing community structures and clusters. This component typically works with graph data loaded via LoadJSON. Dependencies include react and react-sigma.

```jsx
import React from 'react';
import { Sigma, LoadJSON, ForceAtlas2, RelativeSize } from 'react-sigma';

function ForceDirectedGraph() {
  return (
    <Sigma
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{
        drawEdges: true,
        defaultNodeColor: '#3388AA',
        edgeColor: 'default',
        defaultEdgeColor: '#999'
      }}
    >
      <LoadJSON path="/data/network.json">
        <RelativeSize initialSize={8} />
        <ForceAtlas2
          worker={true}
          barnesHutOptimize={true}
          barnesHutTheta={0.5}
          adjustSizes={false}
          iterationsPerRender={10}
          linLogMode={true}
          outboundAttractionDistribution={false}
          edgeWeightInfluence={1}
          scalingRatio={2}
          strongGravityMode={false}
          gravity={1}
          slowDown={1}
          timeout={5000}
        />
      </LoadJSON>
    </Sigma>
  );
}

export default ForceDirectedGraph;
```

--------------------------------

### Configure Edge Shapes with EdgeShapes Component

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The EdgeShapes component provides an interface for the customEdgeShapes sigma plugin. It requires a 'canvas' renderer and should be mounted after the sigma graph is available. It allows setting a default edge shape for edges where the type is not explicitly defined.

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

--------------------------------

### Configure Node Shapes with NodeShapes Component

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The NodeShapes component interfaces with the customShapes sigma plugin, requiring a 'canvas' renderer. It allows defining node shapes, border colors, and can be used with images. This component should be mounted after the sigma graph is ready and can set a default node shape.

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

--------------------------------

### Load Graph Data from JSON with LoadJSON Component

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The LoadJSON component is an interface for the parsers.json sigma plugin, designed to be used within a Sigma component. It loads graph data from a specified JSON file path. It can also mount child components, allowing for further plugin initialization after the graph is loaded.

```javascript
import React from 'react';
import Sigma from 'sigma-react';
import LoadJSON from './LoadJSON';

const MyGraph = () => (
  <Sigma>
    <LoadJSON path="/path/to/your/graph.json" />
    {/* Other sigma plugins can be children of LoadJSON */}
  </Sigma>
);

export default MyGraph;
```

--------------------------------

### Randomize Node Positions in JavaScript

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The RandomizeNodePositions component sets random positions for all nodes in a Sigma graph. It can be used with a predefined graph or within a graph loader. An optional 'seed' parameter can be provided for reproducible random positioning.

```javascript
import React from 'react';

class RandomizeNodePositions extends React.PureComponent {
  // ... component implementation ...
}

export default RandomizeNodePositions;
```

--------------------------------

### Customize Node and Edge Shapes in React-Sigma

Source: https://context7.com/dunnock/react-sigma/llms.txt

This component allows for customization of node and edge visual appearances using predefined shapes. It requires the canvas renderer to be enabled. Various shapes are available for both nodes (e.g., 'star', 'diamond', 'circle') and edges (e.g., 'curvedArrow', 'dashed', 'dotted'). Default shapes can be set using EdgeShapes and NodeShapes components.

```jsx
import React from 'react';
import { Sigma, EdgeShapes, NodeShapes, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function StyledGraph() {
  const styledData = {
    nodes: [
      { id: 'n1', label: 'Star', type: 'star', color: '#FF5733' },
      { id: 'n2', label: 'Diamond', type: 'diamond', color: '#33FF57' },
      { id: 'n3', label: 'Cross', type: 'cross', color: '#3357FF' },
      { id: 'n4', label: 'Square', type: 'square', color: '#FF33F5' },
      { id: 'n5', label: 'Circle', type: 'circle', color: '#F5FF33' }
    ],
    edges: [
      { id: 'e1', source: 'n1', target: 'n2', type: 'curvedArrow', color: '#999' },
      { id: 'e2', source: 'n2', target: 'n3', type: 'dashed', color: '#999' },
      { id: 'e3', source: 'n3', target: 'n4', type: 'dotted', color: '#999' },
      { id: 'e4', source: 'n4', target: 'n5', type: 'tapered', color: '#999' },
      { id: 'e5', source: 'n5', target: 'n1', type: 'parallel', color: '#999' }
    ]
  };

  // Available node shapes: "def", "pacman", "star", "equilateral", "cross", "diamond", "circle", "square"
  // Available edge shapes: "line", "arrow", "curve", "curvedArrow", "dashed", "dotted", "parallel", "tapered"

  return (
    <Sigma
      graph={styledData}
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true, clone: false }}
    >
      <EdgeShapes default="curvedArrow" />
      <NodeShapes default="circle" />
      <RelativeSize initialSize={20} />
      <RandomizeNodePositions />
    </Sigma>
  );
}

export default StyledGraph;
```

--------------------------------

### Enable Interactive Node Dragging with DragNodes in React-Sigma

Source: https://context7.com/dunnock/react-sigma/llms.txt

The DragNodes component allows users to interactively drag nodes on a react-sigma graph canvas. It is compatible with the 'canvas' renderer but not with WebGL. Event handlers like onStartdrag, onDrag, onDrop, and onDragend can be used to trigger actions during the dragging process. This component is typically used with a Sigma graph that has defined nodes and edges.

```jsx
import React from 'react';
import { Sigma, DragNodes, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function DraggableGraph() {
  const graphData = {
    nodes: [ { id: 'n1', label: 'Drag Me 1' }, { id: 'n2', label: 'Drag Me 2' }, { id: 'n3', label: 'Drag Me 3' } ],
    edges: [ { id: 'e1', source: 'n1', target: 'n2' }, { id: 'e2', source: 'n2', target: 'n3' } ]
  };

  return (
    <Sigma
      graph={graphData}
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true, clone: false }}
    >
      <RelativeSize initialSize={15} />
      <RandomizeNodePositions />
      <DragNodes
        onStartdrag={e => console.log('Started dragging:', e.data.node.label)}
        onDrag={e => console.log('Dragging:', e.data.node.label)}
        onDrop={e => console.log('Dropped:', e.data.node.label)}
        onDragend={e => console.log('Drag ended:', e.data.node.label)}
      />
    </Sigma>
  );
}

export default DraggableGraph;
```

--------------------------------

### Filter Graph Elements Dynamically in React

Source: https://context7.com/dunnock/react-sigma/llms.txt

This component enables dynamic filtering of nodes and edges within a graph visualization. It uses React state to manage filter criteria, such as minimum node degree and edge weight, and allows for interactive filtering based on user input or events like clicking on nodes. The Filter component takes custom filter functions as props.

```jsx
import React, { useState } from 'react';
import { Sigma, LoadJSON, Filter, RelativeSize, ForceAtlas2 } from 'react-sigma';

function FilterableGraph() {
  const [selectedNode, setSelectedNode] = useState(null);
  const [minDegree, setMinDegree] = useState(0);

  // Filter function: show only nodes with degree >= minDegree
  const nodeFilter = (node) => {
    if (!node.degree) return true;
    return node.degree >= minDegree;
  };

  // Filter edges by weight
  const edgeFilter = (edge) => {
    return edge.weight ? edge.weight > 0.5 : true;
  };

  return (
    <div>
      <div>
        <label>
          Min Degree:
          <input
            type="range"
            min="0"
            max="10"
            value={minDegree}
            onChange={e => setMinDegree(parseInt(e.target.value))}
          />
          {minDegree}
        </label>
        <button onClick={() => setSelectedNode(null)}>
          Clear Neighbor Filter
        </button>
      </div>

      <Sigma
        renderer="canvas"
        style={{ width: '100%', height: '500px' }}
        settings={{ drawEdges: true }}
        onClickNode={e => setSelectedNode(e.data.node.id)}
      >
        <LoadJSON path="/data/network.json">
          <Filter
            nodesBy={nodeFilter}
            edgesBy={edgeFilter}
            neighborsOf={selectedNode}
          />
          <RelativeSize initialSize={10} />
          <ForceAtlas2 worker timeout={3000} />
        </LoadJSON>
      </Sigma>
    </div>
  );
}

export default FilterableGraph;
```

--------------------------------

### Filter Graph Elements in JavaScript

Source: https://github.com/dunnock/react-sigma/blob/master/DOCS.md

The Filter component provides an interface for the Sigma filter plugin, allowing dynamic filtering of nodes and edges based on provided criteria. It requires the Sigma graph to be available. The 'nodesBy' and 'edgesBy' parameters accept filter functions to determine which elements to hide.

```javascript
import React from 'react';

type Nodes$Filter = (node: Sigma$Node) => boolean;

class Filter extends React.Component {
  // ... component implementation ...
}

export default Filter;
```

--------------------------------

### Prevent Node Overlapping with NOverlap in React-Sigma

Source: https://context7.com/dunnock/react-sigma/llms.txt

The NOverlap component adjusts node positions to prevent visual overlap in a graph rendered by react-sigma. It takes several parameters to control the node margin, scaling, grid size, expansion, speed, iterations, easing, and duration of the adjustment. This component is used within a Sigma graph context, typically after loading graph data and applying layout algorithms.

```jsx
import React from 'react';
import { Sigma, LoadJSON, RelativeSize, NOverlap, ForceAtlas2 } from 'react-sigma';

function NonOverlappingGraph() {
  return (
    <Sigma
      renderer="canvas"
      style={{ width: '100%', height: '500px' }}
      settings={{ drawEdges: true }}
    >
      <LoadJSON path="/data/dense-network.json">
        <RelativeSize initialSize={10} />
        <ForceAtlas2 worker timeout={2000} />
        <NOverlap
          nodeMargin={5}
          scaleNodes={1.2}
          gridSize={20}
          permittedExpansion={1.1}
          speed={10}
          maxIterations={100}
          easing="quadraticInOut"
          duration={500}
        />
      </LoadJSON>
    </Sigma>
  );
}

export default NonOverlappingGraph;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.