Your layout looks somewhat wrong, not sure what this folder is. Assuming you messed up and didn’t delete it for some reason?
Gave it a shot and was able to get it working and fixed the errors that are currently visibale in the repo you sent, ended up being a bit different than the approach you went with but I’ll include a demo and reffrence.
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import {
ReactFlow,
Controls,
MiniMap,
Background,
addEdge,
ReactFlowProvider,
applyNodeChanges,
applyEdgeChanges
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
/**
* Convert Dash components in node data to React elements
*/
const processDashComponents = (nodes) => {
if (!nodes) return [];
return nodes.map(node => ({
...node,
data: {
...node.data,
label: node.data.label?.props ? node.data.label : String(node.data.label || '')
}
}));
};
/**
* DashFlow is a Dash component that wraps React Flow to create
* interactive node-based interfaces. It supports customizable nodes,
* edges, and various interaction modes.
*/
const Flow = (props) => {
const {
id,
nodes,
edges,
nodesDraggable,
nodesConnectable,
elementsSelectable,
nodeTypes,
edgeTypes,
showMiniMap,
showControls,
showBackground,
style,
className,
setProps
} = props;
// Process nodes to handle Dash components
const processedNodes = processDashComponents(nodes);
const onNodesChange = useCallback((changes) => {
// Use applyNodeChanges helper from React Flow to correctly update nodes
const nextNodes = applyNodeChanges(changes, nodes);
setProps({ nodes: nextNodes });
}, [nodes, setProps]);
const onEdgesChange = useCallback((changes) => {
// Use applyEdgeChanges helper from React Flow to correctly update edges
const nextEdges = applyEdgeChanges(changes, edges);
setProps({ edges: nextEdges });
}, [edges, setProps]);
const onConnect = useCallback((connection) => {
if (!connection.source || !connection.target) return;
const newEdge = {
id: `e${connection.source}-${connection.target}`,
...connection
};
setProps({ edges: [...edges, newEdge] });
}, [edges, setProps]);
// Default container style with mandatory height
const containerStyle = {
width: '100%',
height: '600px', // Set a default height
...style
};
return (
<div id={id} style={containerStyle} className={className}>
<ReactFlow
nodes={processedNodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
elementsSelectable={elementsSelectable}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
fitView
deleteKeyCode={['Backspace', 'Delete']}
panOnScroll
selectionOnDrag
panOnDrag={[1, 2]}
zoomOnScroll
snapToGrid
>
{showControls && <Controls />}
{showMiniMap && <MiniMap />}
{showBackground && <Background />}
</ReactFlow>
</div>
);
};
// Main component that wraps Flow with ReactFlowProvider
const DashFlow = (props) => {
return (
<ReactFlowProvider>
<Flow {...props} />
</ReactFlowProvider>
);
};
DashFlow.defaultProps = {
nodesDraggable: true,
nodesConnectable: true,
elementsSelectable: true,
showMiniMap: true,
showControls: true,
showBackground: true,
nodes: [],
edges: [],
style: {},
className: ''
};
DashFlow.propTypes = {
/**
* The ID used to identify this component in Dash callbacks.
*/
id: PropTypes.string,
/**
* Array of node objects with position, data, and optional style information
*/
nodes: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
position: PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
}).isRequired,
data: PropTypes.object.isRequired,
type: PropTypes.string,
style: PropTypes.object
})),
/**
* Array of edge objects defining connections between nodes
*/
edges: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
source: PropTypes.string.isRequired,
target: PropTypes.string.isRequired,
type: PropTypes.string,
animated: PropTypes.bool,
style: PropTypes.object
})),
/**
* Enable/disable node dragging
*/
nodesDraggable: PropTypes.bool,
/**
* Enable/disable creating new connections
*/
nodesConnectable: PropTypes.bool,
/**
* Enable/disable selection
*/
elementsSelectable: PropTypes.bool,
/**
* Custom node type components
*/
nodeTypes: PropTypes.object,
/**
* Custom edge type components
*/
edgeTypes: PropTypes.object,
/**
* Show/hide minimap
*/
showMiniMap: PropTypes.bool,
/**
* Show/hide controls
*/
showControls: PropTypes.bool,
/**
* Show/hide background
*/
showBackground: PropTypes.bool,
/**
* Custom style for the container div
*/
style: PropTypes.object,
/**
* Custom CSS class name
*/
className: PropTypes.string,
/**
* Dash-assigned callback that should be called to report property changes
* to Dash, to make them available for callbacks.
*/
setProps: PropTypes.func
};
// Add this to register the component name
DashFlow.displayName = 'DashFlow';
export default DashFlow;
My advice would be together all the notable project knowledge you can acquire. I scrubbed all Quickstart - React Flow, Api Reference - React Flow and React Flow.
Then I asked it to build me a roadmap.md for the project and used it for custom instructions for project Then just asked questions like in the video tuttorial.
But happy to join hands here
