plotly / react-cytoscapejs

React component for Cytoscape.js network visualisations
MIT License
477 stars 68 forks source link

Iteratee is not a function ? #74

Open knightswatch3 opened 3 years ago

knightswatch3 commented 3 years ago

Here is my react component that renders the graph on the DOM.

import PropTypes from "prop-types"; import React, { Component} from "react"; import cytoscape from "cytoscape"; import dagre from "cytoscape-dagre"; import CytoscapeComponent from "react-cytoscapejs";

const _ = { get: require("lodash/get"), isEqual: require("lodash/isEqual") };

          class EditNewGraph extends Component{
                constructor(props){
                    super(props);
                    this.state={
                        rendered: false
                    }
                    this.renderedGraph = this.renderGraph.bind(this);
                    this.graphInstance = null;    
                  }

                    UNSAFE_componentWillReceiveProps(){

                  }

            componentDidMount(){
                this.setUpListeners();
                this.setState({ 
                    layout : {
                        name: 'dagre',
                        directed: true,
                        roots: '#a',
                        padding: 10,
                        animate: true
                    }
                }) 

            }
                setUpListeners(){
                    console.log(this.cy); 
                    this.cy.on('click', 'node', (event)=>{
                        console.log(event.target['_private']['data']);
                    }) 
                    this.cy.on('cxttap', "node", function(event) {console.log("Right clicked"); });
                    // this.cy.animate=true;
                }

            renderGraph(){
                this.props.actions.tasks.updateGraphRenderState("pending");
                this.graphInstance.attach("TaskGraphEditor");
            }

            render(){
                cytoscape.use(dagre);
                const elements = [
                    { data: { id: 'one', label: 'Node 1', customData:"alfamale" } },
                    { data: { id: 'two', label: 'Node 2', customData: 'alfaFemale' } },
                    { data: { id: 'three', label: 'Node 3', customData: 'alfajigolo' }},
                    { data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } },
                    { data: { source: 'two', target: 'three', label: 'Edge from Node1 to Node3' } }
                 ];
                return ( 
                         <CytoscapeComponent elements={elements} style={{ width: '100vw', height : '100vh'}} cy={(cy)=>{this.cy=cy}} layout={this.state.layout}/>

                )
            }
      }

    EditNewGraph.propTypes = {
        states: PropTypes.shape({
          tasks: PropTypes.object.isRequired,
          settings: PropTypes.object.isRequired
        }),
        actions: PropTypes.shape({
          global: PropTypes.object.isRequired,
          tasks: PropTypes.object.isRequired
        })
      };

      EditNewGraph.defaultProps = {};

      export default EditNewGraph;

And I am unable to figure out what is causing this error:

image