[Question] setting elements property via setState causes graph nodes to stack on top of each other

I have a simple react app that makes a REST GET call and uses the result to display a few nodes. However, all the nodes end up stacked on top of each other at the top left corner. Apologies in advance as I’m a web newbie.

import React, {Component} from 'react';
import Cytoscape from 'cytoscape';
import './App.css';
import CytoscapeComponent from 'react-cytoscapejs';
import cola from 'cytoscape-cola';
import Pace from 'react-pace-progress';

Cytoscape.use(cola);

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            graph: [],
            elements: [],
        };
    }

    render() {
        const layout = {
            name: 'cola',
            padding: 50
        }
        return (
            <div>
                {this.state.isLoading ? <Pace color="#27ae60"/> :
                    <CytoscapeComponent elements={this.state.elements} layout={layout}
                                        style={{position: 'absolute', width: '100%', height: '100%'}}/>}

            </div>
        );
    }

    componentDidMount() {

        fetch(`http://127.0.0.1:5000/jil/all`)
            .then(response => response.json())
            .then(result => this.setState({elements: this.buildJobGraph(result)}))

        this.setState({isLoading: false});
        
    }

    buildJobGraph(items) {
        let jobGraph = [];
        items.forEach(e => {
            if (e['type'] === 'box') {
                jobGraph.push(
                    {
                        data: {'id': e['name'], 'label': e['name']},
                        style: {'shape': 'rectangle', width: '280px', 'text-valign': 'center', 'text-halign': 'center'}
                    }
                );
            }
        });
        console.log(jobGraph);
        return jobGraph;
    }

    /*sleep = (milliseconds) => {
        return new Promise(resolve => setTimeout(resolve, milliseconds))
    }*/
}

export default App;

And this is what I end up with:

I then have to drag the items to the middle and spread them out:

I believe the cola layout is not taking effect. Any help you can give me would be immensely appreciated.

[kstewart83]

I was having a similar issue. Per the Cytoscape Documentation, the new layout needs to be created and run when the elements have been updated. Not sure this is exposed through the React side of things, but it is easy to get the original Cytoscape object. So in my component code I have something like:

componentWillUpdate = () => {
    if(this.cy) {
      var layout = this.cy.layout({name: 'cose-bilkent'})
      layout.run();
    }
  }

And the element looks like this:

<CytoscapeComponent 
          elements={this.state.elements} 
          style={{ width: '100vw', height: '85vh', backgroundColor: 'rgb(250, 250, 250)' }}
          layout={{name: 'cose-bilkent'}}
          cy={(cy:any) => (this.cy = cy)}
 />

That seems to work.

[mariela-plaza]

You have no positions defined on the nodes so they default to (0,0)

The actual cytoscape supports without even passing position. Isnt that supported in the react version?

I am currently having the same issue. So far I’ve been using only the cytoscape.js library and it has worked great. I haven’t had to define position on the nodes for the graph to work correctly.

What I don’t understand is why we don’t have to define positions for the nodes when we are not fetching the data but when we do we have to define them.

This project is working perfectly without fetching data but as soon as I try to make something similar but fetching the data from an API and then doing the mapping myself, the whole Cytoscape Graph becomes messy.