CODEWITHSUNDEEP
javascriptangulartypescriptcytoscape.js
xabush
xabush

Reputation: 877

Cytoscape layout - No such layout cola found

I am using Cytoscape on Angular 2 project with Typescript and wanted to use Cola layout. Hence I added the dependency to my project using npm. Since I am using Angular 2 with Typescript I have added the js module first to the angular-cli.json file then to the index.html file. After that in my NetworkComponent , which is the angular component I am using to display the graph, I am importing the library as follows:

declare var cola:any;

Then I am trying to use the layout as follows:

   this.cyto = cytoscape({
            container: document.getElementById("graph"),
            elements: this.graph.elements,
            style: res.json()
            });
    this.cyto.layout({name: "cola"});

The graph doesn't display and I get the following error in the console:

Can not apply layout: No such layout 'cola' found; did you include its JS file?

I can use the concentric layout and the graph displays but I get the same error for other layout extensions such as cose-bilkent and springy.

How can I import cola library and use it as my graph layout? What might be wrong here?

Upvotes: 4

Views: 3488

Answers (2)

Junji He
Junji He

Reputation: 29

  1. Install cytoscape-cola:

    npm install cytoscape-cola --save

  2. Import cytoscape-cola module:

    import cola from 'cytoscape-cola';

  3. Use cola in component:

    cytoscape.use(cola);

then you can call cola layout.

Upvotes: 3

xabush
xabush

Reputation: 877

It was a simple fix. It turns out I forgot to add a reference to cola.js file in index.html which is required by cytoscape-cola.js. I thought only using cytoscape-cola.js was enough, but after adding the cola js file it is working properly.

Upvotes: 1

Related Questions