I’m new at react flow and trying to build edges but get error:
[React Flow]: Couldn’t create edge for source handle id: “undefined”, edge id: edge-operation-0-0-operation-1-0.
I’m also trying to save edges and nodes in state and check with console.log, but can’t see edges at render.
innerData came from component.
Where i am wrong?
const [nodes, setNodes] = useState([])
const [edges, setEdges] = useState([])
useEffect(() => {
const tempNodes = []
const tempEdges = []
innerData.forEach((action, i) => {
const isRowCollapsed = collapsedRows[i]
const layersCount = isRowCollapsed ? 1 : getLayersCount(action)
action.operations.forEach((operation, j) => {
const x = calculateXOffset(
context.start,
new Date(operation.start),
columnWidth,
context.measure
)
const nodeId = `operation-${i}-${j}`
tempNodes.push({
id: nodeId,
position: {
x: x,
y: rowHeight * i,
},
data: { ...operation, columnWidth },
type: 'customNode',
draggable: false,
})
if (!operationNodesMap[operation.id]) {
operationNodesMap[operation.id] = []
}
operationNodesMap[operation.id].push(nodeId)
})
})
// Generate edges after generating nodes
Object.values(operationNodesMap).forEach(nodesWithSameId => {
if (nodesWithSameId.length > 1) {
for (let i = 1; i < nodesWithSameId.length; i++) {
tempEdges.push({
id: `edge-${nodesWithSameId[i - 1]}-${
nodesWithSameId[i]
}`,
source: nodesWithSameId[i - 1],
target: nodesWithSameId[i],
animated: true,
})
}
}
})
// Update state with collected nodes and edges
setNodes(tempNodes)
setEdges(tempEdges)
}, [
innerData,
context,
columnWidth,
rowHeight,
getLayersCount,
collapsedRows,
])
const CustomNodeComponent = ({ data }) => {
const context = useSelector(state => state.gantt)
const { columnWidth, start, end } = data
const width = useMemo(() => {
const durationMillis =
new Date(end).getTime() - new Date(start).getTime()
const columnDurationMillis = context.measure * 60 * 60 * 1000
return (durationMillis / columnDurationMillis) * columnWidth
}, [start, end, columnWidth, context.measure])
return (
<Box w={`${width}px`}>
<GanttGraphItem
start={data.start}
end={data.end}
id={data.id}
data={data.data}
color={data.color}
meta={data}
barChart={barChart}
isTooltip={isTooltip}
tooltip={tooltip}
/>
</Box>
)
}
const nodeTypes = useMemo(
() => ({
customNode: CustomNodeComponent,
}),
[barChart]
)
<div style={{ width: '100%', height: '100%' }}>
<ReactFlow
nodes={nodes}
edges={edges}
nodeTypes={nodeTypes}
{...options}
onNodeMouseEnter={() => {}}
>
<Background />
</ReactFlow>
</div>