ember-sigmajs

Ember addon for sigma.js

Installation

ember install ember-sigmajs

Usage

In the template where you want your graph, you can pass in a sigma instance directly as such:

{{#sigma-graph sigmaInst=yourSigmaInst }}
{{/sigma-graph}}

or with GraphNode and GraphEdge child components (with some attribute example values):

{{#sigma-graph
  settings=mySettings
  rendererType=myRendererType
  rendererSettings=myRendererSettings}}

  {{#each myNodes as |myNode|}}
    {{graph-node
      id=myNode.id
      label=myNode.labelString
      x=0
      y=1
      size=1
      color='#f00'}}
    {{/graph-node}}
  {{/each}}

  {{#each myEdges as |myEdge|}}
    {{#graph-edge id=myEdge.id source=existingNodeId target=existingNodeId size=2 type='arrow'}}
    {{/graph-edge}}
  {{/each}}

{{/sigma-graph}}

or with graphData specifying lists of nodes and edges (see the table below for more details):

{{#sigma-graph
  graphData=mygraphData
  settings=mySettings
  rendererType=myRendererType
  rendererSettings=myRendererSettings}}
{{/sigma-graph}}

NOTE: you can still add graph-node and graph-edge child components with graphData specified, as long as ids are not duplicated.

• ember serve
• Visit your app at http://localhost:4200.

Style

The SigmaGraph component applies the className sigma-graph for its div element. Then, for example, you can style like this:

.sigma-graph {
  height: 100%;
  width: 100%;
  position: absolute;
}

Attributes

Note that currently some component attributes can be updated, while others cannot.

| sigma-graph attribute | sigma.js equivalent | description | can be updated | | --- | --- | --- | --- | | settings | settings | An object including any of these. In addition, the included edgeLabel plugin specifies label settings. | No | | graphData | None. Passed to the sigma instance's graph option on instantiation. | Format example: { nodes: [{id: 'n1', label: 'Hello', etc.},{id: 'n2', label: 'World', etc.}], edges: [{id: 'e0', label: 'the edge'}] } See the two tables for graph-node and graph-edge below. | Yes | | rendererType | None. Passed to 'renderer' argument of sigma instance as 'type'. Each SigmaGraph is assigned 1 renderer. | 'canvas' or 'webgl' if WebGL is enabled. Default is 'canvas' | No | | rendererSettings | None. Passed to renderer argument of sigma instance as settings. | An object including any of these | No | | camera | camera | camera string id. | No | | forceAtlas2Settings | None. Passed to startForceAtlas2 on sigma instance. | Plugin settings here | No | | enableDragNodes | None. | Boolean that enables dragNodes plugin. | Yes | |

| graph-node attribute | sigma.js equivalent | description | can be updated | | --- | --- | --- | --- | | id | id | unique id for node object | no | | label | label | String label | yes | | x | x | Number | yes | | y | y | Number | yes | | size | size | Number | yes | | color | color | color hex | yes | | type | type | One of: square,circle,cross,equilateral,star,diamond,pacman | yes | | image | image | Object with property names: url, clip, scale, w, h. Use one of type when using image. More here. | yes | | equilateral | equilateral | Object with property names: rotate, numPoints. Use when type=equilateral. More here. | yes | | star | star | Object with property names: innerRatio, numPoints. Use when type=star. More here. | yes | | cross | cross | Object with property name: lineWeight. Use when type=cross. More here. | yes | |

| graph-edge attribute | sigma.js equivalent | description | can be updated | | --- | --- | --- | --- | | id | id | unique id for edge object | no | | label | label | String label | yes | | source | source | source node id | yes | | target | target | target node id | yes | | size | size | Number | yes | | color | color | color hex | yes | | type | type | One of: def, arrow, curve, curvedArrow, dashed, dotted, parallel, tapered | yes |

Actions

All actions are set to the SigmaGraph component. For example:

{{#sigma-graph clickNode=onClickNode }}{{/sigma-graph}}

export default Ember.Component.extend({

  // event is dispatched with node object as argument
  onClickNode: function(node) {

  }

});

Supported actions are:

• clickNode
• rightClickNode
• overNode
• doubleClickNode
• outNode
• downNode
• upNode
• clickEdge
• rightClickEdge
• overEdge
• doubleClickEdge
• outEdge
• downEdge
• upEdge
• click
• rightClick
• clickStage
• doubleClickStage
• rightClickStage
• clickNodes
• doubleClickNodes
• rightClickNodes
• overNodes
• outNodes
• downNodes
• upNodes

NOTE: in order to enable edge hovering events, set enableEdgeHovering to true in sigma-graph settings.

dragNodes plugin actions, also set on SigmaGraph:

• startdrag
• drag
• drop
• dragend

See the Sigma Events API for more information.

Plugins

The sigma.js library provides plugins in addition to the core functionality. Here are the plugins currently supported by ember-sigmajs:

• sigma.renderers.customShapes
• sigma.renderers.customEdgeShapes
• sigma.layout.forceAtlas2
• sigma.plugins.dragNodes
• sigma.renderers.edgeLabels

More will be supported in future releases.

Background

The addon utilizes the parent-child helper pattern developed in ember-composability-tools.

GraphNodes and GraphEdges are tagless (empty tagName) child components of the SigmaGraph component. They are not strictly necessary, but they provide convenience. The SigmaGraph component has one renderer and camera.

Contributions are welcome and encouraged. There may be issues with either this addon or the sigma.js library, so it's worth taking a look there to see if the issue has already been noticed.

Wishlist

• Evaluate performance
• Finish integrating plugins

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.