Skip to content

doublestranded/ember-sigmajs

Repository files navigation

ember-sigmajs Build Status Ember Observer Score npm version

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.

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/.