cytoscape / cytoscape.js-dagre

The Dagre layout for DAGs and trees for Cytoscape.js
MIT License
250 stars 83 forks source link

Iteratee is not a function ? Please help me figure out the root cause. #70

Closed knightswatch3 closed 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
stale[bot] commented 3 years ago

This issue has been automatically marked as stale, because it has not had activity within the past 30 days. It will be closed if no further activity occurs within the next 30 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.