How do I wrap ReactFlow with ReactComponent?

Panel
1

I’m following Quickstart - React Flow but I’m not sure how to:

  1. import the css
  2. get past Uncaught TypeError: u.interrupt is not a function
import param

from panel.custom import ReactComponent

class ReactFlowComponent(ReactComponent):
    """A Panel component that renders a React Flow diagram."""
    
    value = param.List()
    
    _importmap = {
        "imports": {
            "@xyflow/react": "https://esm.sh/reactflow",
        }
    }
    _esm = """
    import { ReactFlow } from '@xyflow/react';
    
    
    export function render({ model }) {
        const initialNodes = [
        { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
        { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
        ];
        const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
        
      return (
        <div style={{ width: '100vw', height: '100vh' }}>
        <ReactFlow nodes={initialNodes} edges={initialEdges} />
        </div>
    );

    }
    """

flow = ReactFlowComponent()
flow.servable()
2

Try changing the import map and adding the css. You’ll have to figure out how to align the versions of the js and the css.

Try on PY.CAFE

image
image791×442 13.7 KB

import param
from panel.custom import ReactComponent


class ReactFlowComponent(ReactComponent):
    """A Panel component that renders a React Flow diagram."""

    value = param.List()

    _importmap = {
        "imports": {
            "@xyflow/react": "https://esm.sh/@xyflow/react",
        }
    }
    _esm = """
    import { ReactFlow } from '@xyflow/react';
    
    export function render({ model }) {
        const initialNodes = [
        { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
        { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
        ];
        const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
        
        console.log("hello")
      return (
        <div style={{ width: '100%', height: '100%' }}>
        <ReactFlow nodes={initialNodes} edges={initialEdges} />
        </div>
    );

    }
    """
    _stylesheets = ["https://cdn.jsdelivr.net/npm/reactflow/dist/style.min.css"]


flow = ReactFlowComponent(sizing_mode="stretch_both", styles={"border": "1px solid gray"})
flow.servable()
1 Like