Cytoscape web 2 arbor layout

I've been trying to use the arbor layout. I've tried

layout: {
    name:"arbor"
}

and

layout: {
    name:"arbor",
    liveUpdate: true,
    ready: undefined,
    maxSimulationTime: 4000,
    fit: true,
    padding: [ 50, 50, 50, 50 ],
    ungrabifyWhileSimulating: true,
    repulsion: undefined,
    stiffness: undefined,
    friction: undefined,
    gravity: true,
    fps: undefined,
    precision: undefined,
    nodeMass: undefined,
    edgeLength: undefined,
    stepSize: 1,
    stableEnergy: function( energy ){
        var e = energy; 
        return (e.max <= 7) || (e.mean <= 5);
    }
}

In both cases the firebug console reports

arbor is not defined
http://localhost/WS/BioJS/biojs/src/main/resources/dependencies/cytoscape/jquery.cytoscapeweb.layout.arbor.js
Line 76

I'm I missing something? is there a working example of the arbor layout usage?

Solution

You need to include arbor.js in a script tag in your HTML. The file jquery.cytoscapeweb.layout.arbor.js just interfaces arbor with Cytoscape Web. Make sure you use the version of arbor.js bundled in the Cytoscape Web ZIP if you need IE support -- arbor doesn't provide this out of the box.

The reason why arbor.js isn't embedded in jquery.cytoscapeweb.layout.arbor.js is because arbor.js needs to be in its own script tag in order for web workers to work properly. If you concatenate and minify arbor.js with your app's other scripts, arbor's path finding can break or arbor's webworkers could conflict with other webworkers in your app.