ember-sigmajs v1.1.4

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.

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