CODEWITHSUNDEEP
javascriptreactjsgraphcytoscape.js
Jander Silva
Jander Silva

Reputation: 121

Problem with Layout's CystoscapeJs with React

I'm trying to use the "cose" or "cose-bilkent" for the Graph Layout, but when using "cose", nothing happens and using "cose-bilkent" says:

"Error: No such layout cose-bilkent found. Did you forget to import it and cytoscape.use() it?"

And I did use it, and installed the cose-bilkent's package.

import React, { Component } from 'react';
import api from '../../services/api';

import Cytoscape from 'cytoscape';
import CytoscapeComponent from 'react-cytoscapejs';
import CoseBilkent from 'cytoscape-cose-bilkent';

Cytoscape.use( CoseBilkent );

export default class Demo extends Component {

  state = {
    w: 0,
     h: 0,

     elements: [],

     allBooks: [],
     allAuthors: [],
  }

  render() {

    const layout = {
        name: 'cose-bilkent',
    };

    return(
         <div>
        <CytoscapeComponent
                elements={this.state.elements}
            style={{ width: this.state.w, height: this.state.h }}
                cy={(cy) => {this.cy = cy}}
                layout={layout}
        />
      </div>


    );
  }
}

Upvotes: 1

Views: 1223

Answers (1)

Jander Silva
Jander Silva

Reputation: 121

I have solved the problem. The React Cytoscape's documentation doesn't inform that it was necessary another props for the layout works. So I got an example from the Cytoscape official documentation.

const layout = {
        name: 'cose',
        ready: function(){},
        stop: function(){},
        animate: true,
        animationEasing: undefined,
        animationDuration: undefined,
        animateFilter: function ( node, i ){ return true; },
        animationThreshold: 250,
        refresh: 20,
        fit: true,
        padding: 30,
        boundingBox: undefined,
        nodeDimensionsIncludeLabels: false,
        randomize: false,
        componentSpacing: 40,
        nodeRepulsion: function( node ){ return 2048; },
        nodeOverlap: 4,
        edgeElasticity: function( edge ){ return 32; },
        nestingFactor: 1.2,
        gravity: 1,
        numIter: 1000,
        initialTemp: 1000,
        coolingFactor: 0.99,
        minTemp: 1.0
    };

Upvotes: 1

Related Questions