Iam trying to display steps in the data.js file as nodes and tried to connect those edges. But the edges are only visible. in the page. I have used [react-flow-renderer] package1.
When i refresh the page the edges are visible for not even a second.
my react component
import React, { Component } from 'react'
import data from '../data'
import ReactFlow, {addEdge} from 'react-flow-renderer'
export class Pro2 extends Component {
constructor() {
super()
this.state = {
steps:data.map((step, index) => ({ id: step.id, data: {label: step["step-name"] }, position: {x: 500, y:100 * (index + 1)}})),
tasks:[],
sedges: data.slice(0, data.length - 1).map((step, index) => ({id:"e"+step.id+data[index+1].id, source: step.id, target: data[index+1].id, animated: true}))
}
console.log(this.state.steps, this.state.sedges)
this.handleChange = this.handleChange.bind(this)
}
handleChange(t) {
//console.log("clicked...............clicked at id", t.id, typeof t.id)
let sid = parseInt(t.id)
console.log("data length", data.length)
for(let i in data){
const step = data[i]
if(step.id == sid){
let posX
if(sid%2 == 0) posX = 200
else posX = 800
const tasknodes = step.tasks.map((task, index) => ({id: task.id, data: {label: task["name"]+"(weight: "+task.weight+")"}, position: {x:posX, y:100 * (index + sid)}}))
this.setState(prevState => ({
tasks: tasknodes
}))
}
else{
// console.log("elseeeeeeeeeeeeeee")
}
}
}
render() {
const graphStyles = { width: '100%', height: '500px' };
const elements = this.state.steps.concat(this.state.sedges).concat(this.state.tasks)
return (
<div>
{/* {BasicGraph()} */}
<ReactFlow onElementClick={this.handleChange} elements={elements} style={graphStyles} />
</div>
)
}
}
export default Pro2
this is the json data i have used data.js
const data = [
{
"id": 1,
"step-name": "The First Step",
"tasks": [
{
"id": "11",
"name": "task-11",
"weight": 50
},
{
"id": "12",
"name": "task-12",
"weight": 60
}
]
},
{
"id": 2,
"step-name": "The Midlle Step",
"tasks": [
{
"id": "21",
"name": "task21",
"weight": 5
},
{
"id": "22",
"name": "task-22",
"weight": 60
}
]
},
{
"id": 3,
"step-name": "The Last Step",
"tasks": [
{
"id": "31",
"name": "task31",
"weight": 45
},
{
"id": "32",
"name": "task-32",
"weight": 16
}
]
}
]
export default data
As pointed out in the docs the ids of the nodes and edges have to be strings.