### Install Sigma.js and Graphology with npm
Source: https://www.sigmajs.org/docs/quickstart
Install sigma.js and graphology using npm for project integration.
```bash
npm install sigma graphology
```
--------------------------------
### Install Sigma.js and Graphology with yarn
Source: https://www.sigmajs.org/docs/quickstart
Install sigma.js and graphology using yarn for project integration.
```bash
yarn add sigma graphology
```
--------------------------------
### Install Sigma.js and Graphology
Source: https://www.sigmajs.org/
Install the necessary packages for sigma.js and graphology using npm. This is the first step to integrate sigma.js into an existing project.
```bash
npm install graphology sigma
```
--------------------------------
### Basic Sigma.js Graph Example
Source: https://www.sigmajs.org/docs/quickstart
A minimal HTML example demonstrating how to create a graph with two nodes and an edge using graphology and render it with sigma.js. Ensure the container div has defined dimensions.
```html
Quick Sigma.js Example
```
--------------------------------
### Initialize Sigma.js with Graph Data
Source: https://www.sigmajs.org/docs
Create a new Sigma instance by providing graph data and a target HTML element. This example adds two nodes and an edge.
```javascript
const graph = new Graph();
graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
graph.addEdge("1", "2", { size: 5, color: "purple" });
const sigmaInstance = new Sigma(graph, document.getElementById("container"));
```
--------------------------------
### Install Sigma.js and Graphology
Source: https://www.sigmajs.org/docs
Use npm to add sigma and graphology to your project dependencies.
```bash
npm install sigma graphology
```
--------------------------------
### Clone Sigma.js Repository
Source: https://www.sigmajs.org/docs
Clone the sigma.js GitHub repository to start local development.
```bash
git clone git@github.com:jacomyal/sigma.js.git
cd sigma.js
npm install
npm run start
```
--------------------------------
### Install Sigma.js and Graphology via CDN
Source: https://www.sigmajs.org/docs/quickstart
Include these script tags in your HTML's head section to use sigma.js and graphology via CDN. Replace [VERSION] with the desired version number.
```html
```
--------------------------------
### Settings Management
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Sigma
Methods for getting and setting renderer settings.
```APIDOC
## setSetting()
### Description
Method setting the value of a given setting key. Note that this will schedule a new render next frame.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **key** (K) - Required - The setting key to set.
- **value** (Settings[K]) - Required - The value to set.
### Type Parameters
- **K** _extends_ keyof Settings
### Returns
`this`
## setSettings()
### Description
Method setting multiple settings at once.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **settings** (Partial>) - Required - The settings to set.
### Returns
`this`
## updateSetting()
### Description
Method updating the value of a given setting key using the provided function. Note that this will schedule a new render next frame.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **key** (K) - Required - The setting key to set.
- **updater** (function) - Required - The update function. It takes the current value and returns the new value.
### Type Parameters
- **K** _extends_ keyof Settings
### Returns
`this`
```
--------------------------------
### Large Graph Performance Showcase
Source: https://www.sigmajs.org/storybook?path=%2Fstory%2Flarge-graphs--story
This example demonstrates Sigma.js performance with large graphs. It allows configuration of graph size, cluster count, and edge rendering type. Includes ForceAtlas2 layout integration.
```typescript
/**
* This example aims at showcasing sigma's performances.
*/
import Graph from "graphology";
import clusters from "graphology-generators/random/clusters";
import forceAtlas2 from "graphology-layout-forceatlas2";
import FA2Layout from "graphology-layout-forceatlas2/worker";
import circlepack from "graphology-layout/circlepack";
import seedrandom from "seedrandom";
import Sigma from "sigma";
import { EdgeLineProgram, EdgeRectangleProgram } from "sigma/rendering";
const DEFAULT_ARGS = {
order: 5000,
size: 1000,
clusters: 3,
edgesRenderer: "edges-default",
};
export default () => {
const rng = seedrandom("sigma");
// 1. Read query string, and set form values accordingly:
const query = new URLSearchParams(location.search).entries();
for (const [key, value] of query) {
const domList = document.getElementsByName(key);
if (domList.length === 1) {
(domList[0] as HTMLInputElement).value = value;
} else if (domList.length > 1) {
domList.forEach((dom: HTMLElement) => {
const input = dom as HTMLInputElement;
input.checked = input.value === value;
});
}
}
// 2. Read form values to build a full state:
const state = {
...DEFAULT_ARGS,
order: +document.querySelector("#order")!.value,
size: +document.querySelector("#size")!.value,
clusters: +document.querySelector("#clusters")!.value,
edgesRenderer: document.querySelector('[name="edges-renderer"]:checked')!.value,
};
// 3. Generate a graph:
const graph = clusters(Graph, { ...state, rng });
circlepack.assign(graph, {
hierarchyAttributes: ["cluster"],
});
const colors: Record = {};
for (let i = 0; i < +state.clusters; i++) {
colors[i] = "#" + Math.floor(rng() * 16777215).toString(16);
}
let i = 0;
graph.forEachNode((node, { cluster }) => {
graph.mergeNodeAttributes(node, {
size: graph.degree(node) / 3,
label: `Node n°${++i}, in cluster n°${cluster}`,
color: colors[cluster + ""],
});
});
// 4. Render the graph:
const container = document.getElementById("sigma-container") as HTMLElement;
const renderer = new Sigma(graph, container, {
defaultEdgeColor: "#e6e6e6",
defaultEdgeType: state.edgesRenderer,
edgeProgramClasses: {
"edges-default": EdgeRectangleProgram,
"edges-fast": EdgeLineProgram,
},
});
// 5. Enable FA2 button:
const fa2Button = document.getElementById("fa2") as HTMLButtonElement;
const sensibleSettings = forceAtlas2.inferSettings(graph);
const fa2Layout = new FA2Layout(graph, {
settings: sensibleSettings,
});
function toggleFA2Layout() {
if (fa2Layout.isRunning()) {
fa2Layout.stop();
fa2Button.innerHTML = `Start layout ▶`;
} else {
fa2Layout.start();
fa2Button.innerHTML = `Stop layout ⏸`;
}
}
fa2Button.addEventListener("click", toggleFA2Layout);
// Cheap trick: tilt the camera a bit to make labels more readable:
renderer.getCamera().setState({
angle: 0.2,
});
return () => {
fa2Layout.kill();
renderer.kill();
};
};
```
--------------------------------
### Camera Constructor
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Camera
Details on how to instantiate a new Camera object.
```APIDOC
### new Camera()
> **new Camera**(): `Camera`
Defined in: sigma/src/core/camera.ts:45
#### Returns
`Camera`
#### Overrides
`TypedEventEmitter.constructor`
```
--------------------------------
### Camera Class Overview
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Camera
Provides an overview of the Camera class, its inheritance, and implementation details.
```APIDOC
## Class: Camera
Defined in: sigma/src/core/camera.ts:26
Camera class
## Extends
* `TypedEventEmitter`
## Implements
* `CameraState`
```
--------------------------------
### Event Emitter API
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Sigma
Method inherited from TypedEventEmitter for getting the maximum number of listeners.
```APIDOC
## getMaxListeners()
### Description
Retrieves the maximum number of listeners allowed for an event.
### Method
`getMaxListeners()`
### Returns
`number` - The maximum number of listeners.
### Inherited from
`TypedEventEmitter.getMaxListeners`
```
--------------------------------
### Initialize Sigma Renderer
Source: https://www.sigmajs.org/storybook?path=%2Fstory%2Fload-rdf-file--story
Instantiates the Sigma renderer with a graph, container, and custom configuration options. This is typically done after the DOM is ready and the graph data is loaded.
```javascript
renderer = new Sigma(graph, container, {
minCameraRatio: 0.08,
maxCameraRatio: 3,
renderEdgeLabels: true,
});
```
--------------------------------
### Function: quadraticInOut()
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/utils/functions/quadraticInOut
The quadraticInOut function provides an easing effect that starts slowly, accelerates, and then decelerates towards the end.
```APIDOC
## Function: quadraticInOut()
> **quadraticInOut**(`k`): `number`
Defined in: sigma/src/utils/easings.ts:7
### Parameters
#### k
`number` - The input value for the easing function, typically between 0 and 1.
### Returns
`number` - The eased value.
```
--------------------------------
### Render Program with Info
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/NodeProgram
Renders the program using provided program information.
```APIDOC
## POST /api/program/renderProgram
### Description
Renders the program using the provided program information and rendering parameters.
### Method
POST
### Endpoint
/api/program/renderProgram
### Parameters
#### Request Body
- **params** (RenderParams) - Required - The parameters for rendering.
- **programInfo** (ProgramInfo) - Required - The information about the WebGL program.
### Request Example
```json
{
"params": {
"width": 800,
"height": 600,
"camera": {},
"clipCount": 10
},
"programInfo": {
"program": "WebGLProgram",
"uniforms": {},
"attributes": {}
}
}
```
### Response
#### Success Response (200)
- **message** (string) - Confirmation message.
#### Response Example
```json
{
"message": "Program rendered with info successfully."
}
```
```
--------------------------------
### Create New Sigma.js Package
Source: https://www.sigmajs.org/docs/advanced/new-packages
Run this command from the root of the repository to initiate the creation of a new package. You will be prompted for the package name.
```bash
npm run createPackage
```
--------------------------------
### Dynamic Node Attribute Transformation with nodeReducer
Source: https://www.sigmajs.org/docs/advanced/data
Use nodeReducer to dynamically modify node attributes before rendering. This example highlights a specific node by changing its size and color.
```javascript
sigma.setSetting("nodeReducer", (node) => {
if (node.id === "specialNode") {
return {
...node,
size: 10,
color: "#ff0000",
};
}
return node;
});
```
--------------------------------
### getProgramInfo()
Source: https://www.sigmajs.org/docs/typedoc/node-square/src/classes/NodeSquareProgram
Creates or retrieves WebGL program information, compiling shaders if necessary.
```APIDOC
## getProgramInfo()
### Description
Creates or retrieves WebGL program information, compiling shaders if necessary.
### Method
`protected` getProgramInfo
### Parameters
- **name** (string) - Required - The name of the program ('normal' or 'pick').
- **gl** (WebGLRenderingContext | WebGL2RenderingContext) - Required - The WebGL rendering context.
- **vertexShaderSource** (string) - Required - The source code for the vertex shader.
- **fragmentShaderSource** (string) - Required - The source code for the fragment shader.
- **frameBuffer** (null | WebGLFramebuffer) - Optional - The framebuffer to use.
### Returns
- `ProgramInfo` - The program information object.
### Inherited from
`NodeProgram`.`getProgramInfo`
```
--------------------------------
### Program Initialization and State
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/Program
Methods related to initializing and managing the state of the rendering program.
```APIDOC
## kill()
### Description
Cleans up and releases resources used by the rendering program.
### Method
`void`
### Endpoint
N/A (Method within a class)
### Parameters
None
### Request Example
None
### Response
#### Success Response (void)
No specific return value.
#### Response Example
None
```
```APIDOC
## reallocate(capacity)
### Description
Reallocates resources for the rendering program, potentially adjusting capacity.
### Method
`void`
### Endpoint
N/A (Method within a class)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **capacity** (number) - Required - The new capacity for reallocation.
### Request Example
```json
{
"capacity": 1000
}
```
### Response
#### Success Response (void)
No specific return value.
#### Response Example
None
```
--------------------------------
### WebGL Contour Line Example
Source: https://www.sigmajs.org/storybook?path=%2Fstory%2Fsigma-layer-webgl--contour-line
This snippet demonstrates how to create and manage WebGL contour lines based on node communities. It includes setting up Sigma, detecting communities, coloring nodes, and adding interactive checkboxes to toggle contour visibility for each community.
```typescript
import { bindWebGLLayer, createContoursProgram } from "@sigma/layer-webgl";
import Graph from "graphology";
import louvain from "graphology-communities-louvain";
import iwanthue from "iwanthue";
import Sigma from "sigma";
import data from "../../_data/data.json";
export default () => {
const graph = new Graph();
graph.import(data);
// Detect communities
louvain.assign(graph, { nodeCommunityAttribute: "community" });
const communities = new Set();
graph.forEachNode((_, attrs) => communities.add(attrs.community));
const communitiesArray = Array.from(communities);
// Determine colors, and color each node accordingly
const palette: Record = iwanthue(communities.size).reduce(
(iter, color, i) => ({
...iter,
[communitiesArray[i]]: color,
}),
{},
);
graph.forEachNode((node, attr) => graph.setNodeAttribute(node, "color", palette[attr.community]));
// Retrieve some useful DOM elements
const container = document.getElementById("sigma-container") as HTMLElement;
// Instantiate sigma
const renderer = new Sigma(graph, container);
// Add checkboxes
const checkboxesContainer = document.createElement("div");
checkboxesContainer.style.position = "absolute";
checkboxesContainer.style.right = "10px";
checkboxesContainer.style.bottom = "10px";
document.body.append(checkboxesContainer);
communitiesArray.forEach((community, i) => {
const id = `cb-${community}`;
const checkboxContainer = document.createElement("div");
checkboxContainer.innerHTML += `
`;
checkboxesContainer.append(checkboxContainer);
const checkbox = checkboxesContainer.querySelector(`#${id}`) as HTMLInputElement;
let clean: null | (() => void) = null;
const toggle = () => {
if (clean) {
clean();
clean = null;
} else {
clean = bindWebGLLayer(
`community-${community}`,
renderer,
createContoursProgram(
graph.filterNodes((_, attr) => attr.community === community),
{
radius: 150,
border: {
color: palette[community],
thickness: 8,
},
levels: [
{
color: "#00000000",
threshold: 0.5,
},
],
},
),
);
}
};
checkbox.addEventListener("change", toggle);
if (!i) {
checkbox.checked = true;
toggle();
}
});
return () => {
renderer?.kill();
};
};
```
--------------------------------
### Layout and Interaction Settings
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/settings/interfaces/Settings
Configuration options for stage padding, movement tolerance, and zoom behavior.
```APIDOC
## stagePadding
### Description
Defines the padding around the stage.
### Method
N/A (Configuration Setting)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **stagePadding** (number) - Required - The padding value for the stage.
### Request Example
```json
{
"stagePadding": 10
}
```
### Response
#### Success Response (200)
N/A (Configuration Setting)
#### Response Example
N/A
```
```APIDOC
## tapMoveTolerance
### Description
Sets the tolerance for tap-to-move gestures.
### Method
N/A (Configuration Setting)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **tapMoveTolerance** (number) - Required - The tolerance value in pixels.
### Request Example
```json
{
"tapMoveTolerance": 5
}
```
### Response
#### Success Response (200)
N/A (Configuration Setting)
#### Response Example
N/A
```
```APIDOC
## zoomDuration
### Description
Specifies the duration of the zoom animation in milliseconds.
### Method
N/A (Configuration Setting)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **zoomDuration** (number) - Required - The duration of the zoom animation in milliseconds.
### Request Example
```json
{
"zoomDuration": 500
}
```
### Response
#### Success Response (200)
N/A (Configuration Setting)
#### Response Example
N/A
```
```APIDOC
## zoomingRatio
### Description
Determines the ratio for zooming operations.
### Method
N/A (Configuration Setting)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **zoomingRatio** (number) - Required - The ratio used for zooming.
### Request Example
```json
{
"zoomingRatio": 1.2
}
```
### Response
#### Success Response (200)
N/A (Configuration Setting)
#### Response Example
N/A
```
```APIDOC
## zoomToSizeRatioFunction
### Description
A function that calculates the size ratio based on the zoom ratio.
### Method
N/A (Configuration Setting)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **zoomToSizeRatioFunction** (function) - Required - A function that accepts a ratio (number) and returns a number representing the size ratio.
- **ratio** (number) - The zoom ratio.
### Request Example
```json
{
"zoomToSizeRatioFunction": "(ratio) => ratio * 0.5"
}
```
### Response
#### Success Response (200)
N/A (Configuration Setting)
#### Response Example
N/A
```
--------------------------------
### Force Atlas 2 Layout with Web Worker
Source: https://www.sigmajs.org/storybook?path=%2Fstory%2Flayouts--story
This snippet demonstrates how to use the Force Atlas 2 layout algorithm in a web worker for efficient graph rendering. It includes logic to start, stop, and toggle the layout, and integrates with DOM elements for UI control.
```javascript
/**
* This is a minimal example of sigma. You can use it as a base to write new
* examples, or reproducible test cases for new issues, for instance.
*/
import Graph from "graphology";
import { circular } from "graphology-layout";
import forceAtlas2 from "graphology-layout-forceatlas2";
import FA2Layout from "graphology-layout-forceatlas2/worker";
import Sigma from "sigma";
import { PlainObject } from "sigma/types";
import { animateNodes } from "sigma/utils";
import data from "../../_data/data.json";
export default () => {
// Initialize the graph object with data
const graph = new Graph();
graph.import(data);
// Retrieve some useful DOM elements:
const container = document.getElementById("sigma-container") as HTMLElement;
const FA2Button = document.getElementById("forceatlas2") as HTMLElement;
const FA2StopLabel = document.getElementById("forceatlas2-stop-label") as HTMLElement;
const FA2StartLabel = document.getElementById("forceatlas2-start-label") as HTMLElement;
const randomButton = document.getElementById("random") as HTMLElement;
const circularButton = document.getElementById("circular") as HTMLElement;
/** FA2 LAYOUT **/
/* This example shows how to use the force atlas 2 layout in a web worker */
// Graphology provides a easy to use implementation of Force Atlas 2 in a web worker
const sensibleSettings = forceAtlas2.inferSettings(graph);
const fa2Layout = new FA2Layout(graph, {
settings: sensibleSettings,
});
// A button to trigger the layout start/stop actions
// A variable is used to toggle state between start and stop
let cancelCurrentAnimation: (() => void) | null = null;
// correlate start/stop actions with state management
function stopFA2() {
fa2Layout.stop();
FA2StartLabel.style.display = "flex";
FA2StopLabel.style.display = "none";
}
function startFA2() {
if (cancelCurrentAnimation) cancelCurrentAnimation();
fa2Layout.start();
FA2StartLabel.style.display = "none";
FA2StopLabel.style.display = "flex";
}
// the main toggle function
function toggleFA2Layout() {
if (fa2Layout.isRunning()) {
stopFA2();
} else {
startFA2();
}
}
// bind method to the forceatlas2 button
FA2Button.addEventListener("click", toggleFA2Layout);
/** RANDOM LAYOUT **/
/* Layout can be handled manually by setting nodes x and y attributes */
/* This random layout has been coded to show how to manipulate positions directly in the graph instance */
/* Alternatively a random layout algo exists in graphology: https://github.com/graphology/graphology-layout#random */
function randomLayout() {
// stop fa2 if running
if (fa2Layout.isRunning()) stopFA2();
if (cancelCurrentAnimation) cancelCurrentAnimation();
```
--------------------------------
### Disable Default Sigma Rendering Features
Source: https://www.sigmajs.org/storybook?path=%2Fstory%2Ffit-sizes-to-positions--story
This example demonstrates how to disable Sigma's default features like automatic rescaling, item size interpolation, and to use linear scaling for node sizes. It's useful when precise control over node display and scaling is needed.
```javascript
/**
* Sigma has been designed to display any graph in a "readable way" by default:
* https://www.sigmajs.org/docs/advanced/coordinate-systems
*
* This design principle is enforced by three main features:
* 1. Graph is rescaled and centered to fit by default in the viewport
* 2. Node sizes are interpolated by default to fit in a pixels range,
* independent of the viewport (and not correlated to the nodes positions)
* 3. When users scroll into the graph, the node sizes do not scale with the
* zoom ratio, but with its square root instead
*
* In some cases, it is better to disable these features, to have better
* control over the way nodes are displayed on screen.
*
* This example shows how to disable these three features.
*/
import { NodeSquareProgram } from "@sigma/node-square";
import chroma from "chroma-js";
import Graph from "graphology";
import Sigma from "sigma";
import { DEFAULT_SETTINGS } from "sigma/settings";
export default () => {
const container = document.getElementById("sigma-container") as HTMLElement;
// Let's first build a graph that will look like a perfect grid:
const graph = new Graph();
const colorScale = chroma.scale(["yellow", "navy"]).mode("lch");
const GRID_SIZE = 20;
for (let row = 0; row < GRID_SIZE; row++) {
for (let col = 0; col < GRID_SIZE; col++) {
const color = colorScale((col + row) / (GRID_SIZE * 2)).hex();
graph.addNode(`${row}/${col}`, {
x: 20 * col,
y: 20 * row,
size: 5,
color,
});
if (row >= 1) graph.addEdge(`${row - 1}/${col}`, `${row}/${col}`, { size: 10 });
if (col >= 1) graph.addEdge(`${row}/${col - 1}`, `${row}/${col}`, { size: 10 });
}
}
const renderer = new Sigma(graph, container, {
// This flag tells sigma to disable the nodes and edges sizes interpolation
// and instead scales them in the same way it handles positions:
itemSizesReference: "positions",
// This function tells sigma to grow sizes linearly with the zoom, instead
// of relatively to the zoom ratio's square root:
zoomToSizeRatioFunction: (x) => x,
// This disables the default sigma rescaling, so that by default, positions
// and sizes are preserved on screen (in pixels):
autoRescale: false,
// Finally, let's indicate that we want square nodes, to get a perfect
// grid:
defaultNodeType: "square",
nodeProgramClasses: {
square: NodeSquareProgram,
},
});
// Handle controls:
const linearZoomToSizeRatioFunction = document.getElementById("linearZoomToSizeRatioFunction") as HTMLInputElement;
const itemSizesReferencePositions = document.getElementById("itemSizesReferencePositions") as HTMLInputElement;
```
--------------------------------
### Troubleshooting WebGL Context Error in Sigma.js
Source: https://www.sigmajs.org/storybook/iframe.html?globals=&id=sigma-layer-webgl--contour-line
This error typically indicates a configuration issue within Storybook, such as missing context providers, misconfigured build tools (Webpack/Vite), or missing environment variables. Ensure your Storybook setup correctly provides necessary configurations for components to render.
```javascript
TypeError: Cannot read properties of null (reading 'blendFunc')
at Qn.createWebGLContext (https://www.sigmajs.org/storybook/assets/sigma-BdB3I2ax.js:310:39151)
at new Qn (https://www.sigmajs.org/storybook/assets/sigma-BdB3I2ax.js:310:17619)
at w (https://www.sigmajs.org/storybook/assets/stories-ClVzFZZF.js:1:805)
at https://www.sigmajs.org/storybook/assets/sigma-BdB3I2ax.js:1:231
at https://www.sigmajs.org/storybook/sb-preview/runtime.js:5985:60
at mn.runPhase (https://www.sigmajs.org/storybook/sb-preview/runtime.js:5872:100)
at mn.render (https://www.sigmajs.org/storybook/sb-preview/runtime.js:5985:25)
```
--------------------------------
### Camera.from()
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Camera
Creates a Camera object from a given state. This is a static method.
```APIDOC
## Camera.from()
### Description
Static method used to create a Camera object with a given state.
### Method
`static`
### Endpoint
N/A (Static method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters
#### state
- **state** (CameraState) - Required - The state object to initialize the camera with.
### Request Example
None (Static method)
### Response
#### Success Response (Camera)
- **Camera** - Returns a new Camera object initialized with the provided state.
#### Response Example
None (Static method)
```
--------------------------------
### Render Program
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/NodeProgram
Executes the rendering process with the given parameters.
```APIDOC
## POST /api/program/render
### Description
Executes the rendering of the program with the specified parameters.
### Method
POST
### Endpoint
/api/program/render
### Parameters
#### Request Body
- **params** (RenderParams) - Required - The parameters for rendering.
### Request Example
```json
{
"params": {
"width": 800,
"height": 600,
"camera": {},
"clipCount": 10
}
}
```
### Response
#### Success Response (200)
- **message** (string) - Confirmation message.
#### Response Example
```json
{
"message": "Program rendered successfully."
}
```
```
--------------------------------
### WebGLLayerProgram Constructor
Source: https://www.sigmajs.org/docs/typedoc/layer-webgl/src/classes/WebGLLayerProgram
Initializes a new WebGLLayerProgram instance. This constructor is intended for extension and should not be called directly.
```APIDOC
## new WebGLLayerProgram()
> **new WebGLLayerProgram** <`N`, `E`, `G`>(`gl`, `pickingBuffer`, `renderer`): `WebGLLayerProgram`<`N`, `E`, `G`>
Defined in: layer-webgl/src/webgl-layer-program/index.ts:34
### Parameters
* **gl** (`WebGLRenderingContext` | `WebGL2RenderingContext`)
* **pickingBuffer** (`null` | `WebGLFramebuffer`)
* **renderer** (`Sigma`<`N`, `E`, `G`>)
### Returns
* `WebGLLayerProgram`<`N`, `E`, `G`>
### Overrides
`Program`.`constructor`
```
--------------------------------
### Instantiate Sigma Renderer
Source: https://www.sigmajs.org/storybook?path=%2Fstory%2Flayouts--story
Initializes the Sigma.js renderer with the graph and container element. This is the final step to render the graph on the page.
```typescript
/** instantiate sigma into the container **/
const renderer = new Sigma(graph, container);
return () => {
renderer.kill();
};
```
--------------------------------
### Methods
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/Program
Details the methods available on the abstract Program class for managing and executing WebGL rendering.
```APIDOC
## Methods
### bindAttribute()
> `protected` **bindAttribute**(`attr`, `program`, `offset`, `setDivisor`?): `number`
Defined in: sigma/src/rendering/program.ts:244
#### Parameters
##### attr
`ProgramAttributeSpecification`
##### program
`ProgramInfo`
##### offset
`number`
##### setDivisor?
`boolean`
#### Returns
`number`
* * *
### bindProgram()
> `protected` **bindProgram**(`program`): `void`
Defined in: sigma/src/rendering/program.ts:206
#### Parameters
##### program
`ProgramInfo`
#### Returns
`void`
* * *
### drawWebGL()
> **drawWebGL**(`method`, `__namedParameters`): `void`
Defined in: sigma/src/rendering/program.ts:355
#### Parameters
##### method
`number`
##### __namedParameters
`ProgramInfo`
#### Returns
`void`
* * *
### getDefinition()
> `abstract` **getDefinition**(): `ProgramDefinition`<`Uniform`> | `InstancedProgramDefinition`<`Uniform`>
Defined in: sigma/src/rendering/program.ts:79
#### Returns
`ProgramDefinition`<`Uniform`> | `InstancedProgramDefinition`<`Uniform`>
* * *
### getProgramInfo()
> `protected` **getProgramInfo**(`name`, `gl`, `vertexShaderSource`, `fragmentShaderSource`, `frameBuffer`): `ProgramInfo`
Defined in: sigma/src/rendering/program.ts:150
#### Parameters
##### name
`"normal"` | `"pick"`
##### gl
`WebGLRenderingContext` | `WebGL2RenderingContext`
##### vertexShaderSource
`string`
##### fragmentShaderSource
`string`
##### frameBuffer
`null` | `WebGLFramebuffer`
#### Returns
`ProgramInfo`
* * *
### hasNothingToRender()
> **hasNothingToRender**(): `boolean`
Defined in: sigma/src/rendering/program.ts:312
```
--------------------------------
### Constructor: new Program()
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/Program
Initializes a new instance of the Program class. This constructor is intended for internal use and is typically called by subclasses.
```APIDOC
## Constructors
### new Program()
> **new Program** <`Uniform`, `N`, `E`, `G`>(`gl`, `pickingBuffer`, `renderer`): `Program`<`Uniform`, `N`, `E`, `G`>
Defined in: sigma/src/rendering/program.ts:81
#### Parameters
##### gl
`WebGLRenderingContext` | `WebGL2RenderingContext`
##### pickingBuffer
`null` | `WebGLFramebuffer`
##### renderer
`Sigma`<`N`, `E`, `G`>
#### Returns
`Program`<`Uniform`, `N`, `E`, `G`>
```
--------------------------------
### Camera and Graph Management
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Sigma
Methods for setting the camera and graph instance for the renderer.
```APIDOC
## setCamera()
### Description
Method setting the renderer's camera.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **camera** (Camera) - Required - New camera.
### Returns
`void`
## setGraph()
### Description
Method used to set the renderer's graph.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **graph** (AbstractGraph) - Required - The graph to set.
### Returns
`void`
```
--------------------------------
### AbstractEdgeProgram Constructor
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/AbstractEdgeProgram
Initializes a new instance of the AbstractEdgeProgram. This is an abstract class, so direct instantiation is not typical; it's meant to be extended by concrete rendering programs.
```APIDOC
## new AbstractEdgeProgram()
> **new AbstractEdgeProgram** <`N`, `E`, `G`>(`_gl`, `_pickGl`, `_renderer`): `AbstractEdgeProgram`<`N`, `E`, `G`>
Defined in: sigma/src/rendering/program.ts:42
### Parameters
* `_gl` (`WebGLRenderingContext`)
* `_pickGl` (`WebGLRenderingContext`)
* `_renderer` (`Sigma`<`N`, `E`, `G`>)
### Returns
`AbstractEdgeProgram`<`N`, `E`, `G`>
### Inherited from
`AbstractProgram`.`constructor`
```
--------------------------------
### Program Information and Rendering
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/EdgeLineProgram
Methods related to retrieving program information, rendering, and setting uniforms.
```APIDOC
## getProgramInfo()
### Description
Protected method to get program information, including shader sources and uniforms.
### Method
`protected getProgramInfo(name, gl, vertexShaderSource, fragmentShaderSource, frameBuffer)`
### Parameters
#### Path Parameters
- **name** (string) - Required - Either "normal" or "pick".
- **gl** (WebGLRenderingContext | WebGL2RenderingContext) - Required - The WebGL rendering context.
- **vertexShaderSource** (string) - Required - The source code for the vertex shader.
- **fragmentShaderSource** (string) - Required - The source code for the fragment shader.
- **frameBuffer** (null | WebGLFramebuffer) - Required - The WebGL framebuffer.
### Returns
`ProgramInfo`
### Inherited from
`EdgeProgram`.`getProgramInfo`
```
```APIDOC
## render(params)
### Description
Render the program with the given parameters.
### Method
`render(params)`
### Parameters
#### Path Parameters
- **params** (RenderParams) - Required - Rendering parameters.
### Returns
`void`
### Inherited from
`EdgeProgram`.`render`
```
```APIDOC
## renderProgram(params, programInfo)
### Description
Protected method to render a given program with specific program information.
### Method
`protected renderProgram(params, programInfo)`
### Parameters
#### Path Parameters
- **params** (RenderParams) - Required - Rendering parameters.
- **programInfo** (ProgramInfo) - Required - Information about the program to render.
### Returns
`void`
### Inherited from
`EdgeProgram`.`renderProgram`
```
```APIDOC
## setUniforms(params, __namedParameters)
### Description
Set the uniforms for the edge line program.
### Method
`setUniforms(params, __namedParameters)`
### Parameters
#### Path Parameters
- **params** (RenderParams) - Required - Rendering parameters.
- **__namedParameters** (ProgramInfo) - Required - Program information containing uniforms.
### Returns
`void`
### Overrides
`EdgeProgram`.`setUniforms`
```
--------------------------------
### Program Definition and Information
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/NodeCircleProgram
Methods for retrieving the definition and information of rendering programs.
```APIDOC
## GET /getDefinition
### Description
Retrieves the definition of the rendering program, including shaders and attributes.
### Method
GET
### Endpoint
/getDefinition
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
None
### Response
#### Success Response (200)
- **object** - The program definition, including ATTRIBUTES, CONSTANT_ATTRIBUTES, CONSTANT_DATA, FRAGMENT_SHADER_SOURCE, METHOD, UNIFORMS, VERTEX_SHADER_SOURCE, and VERTICES.
#### Response Example
```json
{
"ATTRIBUTES": [
{ "name": "string", "normalized": undefined, "size": "number", "type": 5126 },
{ "name": "string", "normalized": "boolean", "size": "number", "type": 5121 }
],
"CONSTANT_ATTRIBUTES": [
{ "example": "object" }
],
"CONSTANT_DATA": [
{ "example": "number[]" }
],
"FRAGMENT_SHADER_SOURCE": "string",
"METHOD": 4,
"UNIFORMS": [
"u_sizeRatio",
"u_correctionRatio",
"u_matrix"
],
"VERTEX_SHADER_SOURCE": "string",
"VERTICES": 3
}
```
```
```APIDOC
## POST /getProgramInfo
### Description
Protected method to get program information, compiling shaders if necessary.
### Method
POST
### Endpoint
/getProgramInfo
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **name** ("normal" | "pick") - Required - The name of the program to get info for.
- **gl** (WebGLRenderingContext | WebGL2RenderingContext) - Required - The WebGL rendering context.
- **vertexShaderSource** (string) - Required - The source code for the vertex shader.
- **fragmentShaderSource** (string) - Required - The source code for the fragment shader.
- **frameBuffer** (null | WebGLFramebuffer) - Optional - The framebuffer to use.
### Request Example
None
### Response
#### Success Response (200)
- **ProgramInfo** - Information about the compiled WebGL program.
#### Response Example
None
```
--------------------------------
### Renderer Methods
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Sigma
This section covers methods for managing the renderer's state, including resizing, scaling, and scheduling updates.
```APIDOC
## resize()
### Description
Method used to resize the renderer.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **force** (boolean) - Optional - If true, then resize is processed even if size is unchanged.
### Returns
`this`
## scaleSize()
### Description
Method used to scale the given size according to the camera's ratio, i.e. zooming state.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **size** (number) - Optional - The size to scale (node size, edge thickness etc.). Defaults to 1.
- **cameraRatio** (number) - Optional - A camera ratio (defaults to the actual camera ratio).
### Returns
`number` - The scaled size.
## scheduleRefresh()
### Description
Method used to schedule a refresh (i.e. fully reprocess graph data and render) at the next available frame. This method can be safely called on a same frame because it basically debounces refresh to the next frame.
### Method
GET
### Endpoint
/websites/sigmajs
### Parameters
#### Path Parameters
- **opts** (object) - Optional - Options for scheduling refresh.
- **layoutUnchange** (boolean) - Optional.
- **partialGraph** (object) - Optional - Specifies which parts of the graph to reprocess.
- **edges** (string[]) - Optional - List of edge IDs to reprocess.
- **nodes** (string[]) - Optional - List of node IDs to reprocess.
### Returns
`this`
## scheduleRender()
### Description
Method used to schedule a render at the next available frame. This method can be safely called on a same frame because it basically debounces refresh to the next frame.
### Method
GET
### Endpoint
/websites/sigmajs
### Returns
`this`
```
--------------------------------
### Sigma Constructor
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/classes/Sigma
Initializes a new Sigma instance to render a graph within a specified DOM container.
```APIDOC
## new Sigma()
### Description
Initializes a new Sigma instance.
### Parameters
- **graph** (AbstractGraph) - The graph to render.
- **container** (HTMLElement) - The DOM container in which to render.
- **settings** (Partial>) - Optional settings. Defaults to `{}`.
### Returns
`Sigma` - The Sigma instance.
```
--------------------------------
### render()
Source: https://www.sigmajs.org/docs/typedoc/node-square/src/classes/NodeSquareProgram
Renders the graph elements using the current program.
```APIDOC
## render()
### Description
Renders the graph elements using the current program.
### Method
render
### Parameters
- **params** (RenderParams) - Required - Rendering parameters.
### Returns
- `void`
### Inherited from
`NodeProgram`.`render`
```
--------------------------------
### createNodeCompoundProgram()
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/functions/createNodeCompoundProgram
Combines two or more node rendering programs into a single compound program. This is a convenient way to combine programs, though not the most performant option for complex scenarios.
```APIDOC
## Function: createNodeCompoundProgram()
### Description
Helper function combining two or more programs into a single compound one. Note that this is more a quick & easy way to combine program than a really performant option. More performant programs can be written entirely.
### Type Parameters
• **N** _extends_ `Attributes` = `Attributes`
• **E** _extends_ `Attributes` = `Attributes`
• **G** _extends_ `Attributes` = `Attributes`
### Parameters
#### programClasses
`NonEmptyArray`<(`_gl`, `_pickingBuffer`, `_renderer`) => `_NodeProgramClass`<`N`, `E`, `G`>>
Program classes to combine.
#### drawLabel? (Optional)
`NodeLabelDrawingFunction`<`N`, `E`, `G`>
An optional node "draw label" function.
#### drawHover? (Optional)
`NodeLabelDrawingFunction`<`N`, `E`, `G`>
An optional node "draw hover" function.
### Returns
`NodeProgramType`<`N`, `E`, `G`>
A compound node program type.
```
--------------------------------
### Utility and Cleanup Methods
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/EdgeTriangleProgram
Utility methods for checking rendering status and cleaning up resources.
```APIDOC
## Utility and Cleanup Methods
### hasNothingToRender()
**hasNothingToRender**(): `boolean`
Defined in: sigma/src/rendering/program.ts:312
#### Returns
`boolean`
#### Inherited from
`EdgeProgram`.`hasNothingToRender`
* * *
### kill()
**kill**(): `void`
Defined in: sigma/src/rendering/edge.ts:42
#### Returns
`void`
#### Inherited from
`EdgeProgram`.`kill`
```
--------------------------------
### Rendering Execution
Source: https://www.sigmajs.org/docs/typedoc/sigma/src/rendering/classes/Program
Methods for executing the rendering process and setting rendering parameters.
```APIDOC
## render(params)
### Description
Executes the rendering process with the specified parameters.
### Method
`void`
### Endpoint
N/A (Method within a class)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **params** (RenderParams) - Required - The parameters for rendering.
### Request Example
```json
{
"params": { ... }
}
```
### Response
#### Success Response (void)
No specific return value.
#### Response Example
None
```
```APIDOC
## renderProgram(params, programInfo)
### Description
Protected method to render a specific program with given parameters and program information.
### Method
`void`
### Endpoint
N/A (Method within a class)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **params** (RenderParams) - Required - The rendering parameters.
- **programInfo** (ProgramInfo) - Required - Information about the program to render.
### Request Example
```json
{
"params": { ... },
"programInfo": { ... }
}
```
### Response
#### Success Response (void)
No specific return value.
#### Response Example
None
```
```APIDOC
## setUniforms(params, programInfo)
### Description
Abstract method to set uniforms for a program, typically called during rendering.
### Method
`void`
### Endpoint
N/A (Method within a class)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **params** (RenderParams) - Required - The rendering parameters.
- **programInfo** (ProgramInfo) - Required - Information about the program for which to set uniforms.
### Request Example
```json
{
"params": { ... },
"programInfo": { ... }
}
```
### Response
#### Success Response (void)
No specific return value.
#### Response Example
None
```