Skip to content

Commit 3ea2919

Browse files
LineIndentLineIndent
authored
ENG-7586: react flow docs (#1612)
* drafting react flow docs * more updates * fixes * more updates to flow docs * fix headers + remove front end utlities * ..
1 parent ba33937 commit 3ea2919

File tree

14 files changed

+898
-7
lines changed

14 files changed

+898
-7
lines changed

‎assets/enterprise/flow-simple.gif‎

5.95 MB
Loading

‎docs/enterprise/react_flow/basic_flow.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# Basic Flow Example
2+
3+
This example demonstrates a simple flow diagram with three nodes and two edges, showing how nodes can be connected and how edges can be animated.
4+
5+
### Nodes
6+
7+
- Input Node – starting point
8+
- Default Node – standard content node
9+
- Output Node – endpoint of the flow
10+
11+
### Edges
12+
13+
- Input → Default (animated)
14+
- Default → Output
15+
16+
### Interactivity
17+
18+
- Nodes can be moved
19+
- Edges update dynamically
20+
- Users can drag from handles to create new edges
21+
- Zoom, pan, and mini-map controls are available
22+
23+
### Visual Layout
24+
25+
- Flow fits viewport automatically
26+
- Background grid for orientation
27+
- Light and dark color modes supported
28+
29+
### Example Flow
30+
31+
```python demo exec
32+
import reflex as rx
33+
import reflex_enterprise as rxe
34+
from reflex_enterprise.components.flow.types import Node, Edge
35+
36+
# Common style for all nodes
37+
node_style = {
38+
"backgroundColor": "#ffcc00",
39+
"color": "#000000",
40+
"padding": "10px",
41+
"borderRadius": "5px"
42+
}
43+
44+
class FlowState(rx.State):
45+
nodes: list[Node] = [
46+
{
47+
"id": "1",
48+
"type": "input",
49+
"position": {"x": 100, "y": 100},
50+
"data": {"label": "Input Node"},
51+
"style": node_style
52+
},
53+
{
54+
"id": "2",
55+
"type": "default",
56+
"position": {"x": 300, "y": 200},
57+
"data": {"label": "Default Node"},
58+
"style": node_style
59+
},
60+
{
61+
"id": "3",
62+
"type": "output",
63+
"position": {"x": 500, "y": 100},
64+
"data": {"label": "Output Node"},
65+
"style": node_style
66+
},
67+
]
68+
69+
edges: list[Edge] = [
70+
{"id": "e1-2", "source": "1", "target": "2", "animated": True},
71+
{"id": "e2-3", "source": "2", "target": "3"},
72+
]
73+
74+
75+
@rx.event
76+
def set_nodes(self, nodes: list[Node]):
77+
self.nodes = nodes
78+
79+
@rx.event
80+
def set_edges(self, edges: list[Edge]):
81+
self.edges = edges
82+
83+
84+
def flow_example():
85+
return rx.box(
86+
rxe.flow(
87+
# Core flow components
88+
rxe.flow.controls(), # Zoom and pan controls
89+
rxe.flow.background(), # Grid background
90+
rxe.flow.mini_map(), # Mini map for navigation
91+
92+
# Flow configuration
93+
nodes=FlowState.nodes,
94+
edges=FlowState.edges,
95+
on_nodes_change=lambda node_changes: FlowState.set_nodes(
96+
rxe.flow.util.apply_node_changes(FlowState.nodes, node_changes)
97+
),
98+
on_edges_change=lambda edge_changes: FlowState.set_edges(
99+
rxe.flow.util.apply_edge_changes(FlowState.edges, edge_changes)
100+
),
101+
102+
# Visual settings
103+
fit_view=True,
104+
attribution_position="bottom-right",
105+
),
106+
height="100vh",
107+
width="100vw",
108+
)
109+
```

‎docs/enterprise/react_flow/components.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Flow Components
2+
3+
This page documents the main components provided by the `rxe.flow` library.
4+
5+
## rxe.flow.provider
6+
7+
The `FlowProvider` component is a context provider that makes it possible to access a flow’s internal state outside of the `<ReactFlow />` component. Many of the hooks we provide rely on this component to work.
8+
9+
**Props:**
10+
11+
- `initial_nodes`: `Sequence[Node]` - These nodes are used to initialize the flow. They are not dynamic.
12+
- `default_edges`: `Sequence[Edge]` - These edges are used to initialize the flow. They are not dynamic.
13+
- `initial_width`: `float` - The initial width is necessary to be able to use fitView on the server.
14+
- `initial_height`: `float` - The initial height is necessary to be able to use fitView on the server.
15+
- `fit_view`: `bool` - When true, the flow will be zoomed and panned to fit all the nodes initially provided.
16+
- `initial_fit_view_options`: `FitViewOptions` - You can provide an object of options to customize the initial fitView behavior.
17+
- `initial_min_zoom`: `float` - Initial minimum zoom level.
18+
- `initial_max_zoom`: `float` - Initial maximum zoom level.
19+
- `node_origin`: `NodeOrigin` - The origin of the node to use when placing it in the flow or looking up its x and y position.
20+
- `node_extent`: `CoordinateExtent` - The boundary a node can be moved in.
21+
22+
## rxe.flow
23+
24+
The `Flow` component is the main component that renders the flow. It takes in nodes and edges, and provides event handlers for user interactions.
25+
26+
**Props:**
27+
28+
- `nodes`: `Sequence[Node]` - An array of nodes to render in a controlled flow.
29+
- `edges`: `Sequence[Edge]` - An array of edges to render in a controlled flow.
30+
- `default_nodes`: `Sequence[Node]` - The initial nodes to render in an uncontrolled flow.
31+
- `default_edges`: `Sequence[Edge]` - The initial edges to render in an uncontrolled flow.
32+
- `node_types`: `Mapping[str, Any]` - Custom node types.
33+
- `edge_types`: `Mapping[str, Any]` - Custom edge types.
34+
- `on_nodes_change`: Event handler for when nodes change.
35+
- `on_edges_change`: Event handler for when edges change.
36+
- `on_connect`: Event handler for when a connection is made.
37+
- `fit_view`: `bool` - When true, the flow will be zoomed and panned to fit all the nodes initially provided.
38+
- `fit_view_options`: `FitViewOptions` - Options for `fit_view`.
39+
- `style`: The style of the component.
40+
41+
## rxe.flow.background
42+
43+
The `Background` component renders a background for the flow. It can be a pattern of lines, dots, or a cross.
44+
45+
**Props:**
46+
47+
- `color`: `str` - Color of the pattern.
48+
- `bg_color`: `str` - Color of the background.
49+
- `variant`: `Literal["lines", "dots", "cross"]` - The type of pattern to render.
50+
- `gap`: `float | tuple[float, float]` - The gap between patterns.
51+
- `size`: `float` - The size of the pattern elements.
52+
53+
**Example:**
54+
55+
```python
56+
rxe.flow.background(variant="dots", gap=20, size=1)
57+
```
58+
59+
## rxe.flow.controls
60+
61+
The `Controls` component renders a panel with buttons to zoom in, zoom out, fit the view, and lock the viewport.
62+
63+
**Props:**
64+
65+
- `show_zoom`: `bool` - Whether to show the zoom buttons.
66+
- `show_fit_view`: `bool` - Whether to show the fit view button.
67+
- `show_interactive`: `bool` - Whether to show the lock button.
68+
- `position`: `PanelPosition` - The position of the controls on the pane.
69+
70+
**Example:**
71+
72+
```python
73+
rxe.flow.controls()
74+
```
75+
76+
## rxe.flow.mini_map
77+
78+
The `MiniMap` component renders a small overview of your flow.
79+
80+
**Props:**
81+
82+
- `node_color`: `str | Any` - Color of nodes on minimap.
83+
- `node_stroke_color`: `str | Any` - Stroke color of nodes on minimap.
84+
- `pannable`: `bool` - Determines whether you can pan the viewport by dragging inside the minimap.
85+
- `zoomable`: `bool` - Determines whether you can zoom the viewport by scrolling inside the minimap.
86+
- `position`: `PanelPosition` - Position of minimap on pane.
87+
88+
**Example:**
89+
90+
```python
91+
rxe.flow.mini_map(pannable=True, zoomable=True)
92+
```

‎docs/enterprise/react_flow/edges.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Edges
2+
3+
Edges connect nodes together in a flow. This page explains how to define, customize, and interact with edges in Reflex Flow.
4+
5+
## The `Edge` Type
6+
7+
An edge is represented as a Python dictionary with the following fields:
8+
9+
- `id` (`str`) – Unique identifier for the edge.
10+
- `source` (`str`) – ID of the source node.
11+
- `target` (`str`) – ID of the target node.
12+
- `type` (`str`) – Edge type defined in `edge_types`.
13+
- `sourceHandle` (`str | None`) – Optional source handle ID.
14+
- `targetHandle` (`str | None`) – Optional target handle ID.
15+
- `animated` (`bool`) – Whether the edge should animate.
16+
- `hidden` (`bool`) – Whether the edge is hidden.
17+
- `deletable` (`bool`) – Whether the edge can be removed.
18+
- `selectable` (`bool`) – Whether the edge can be selected.
19+
- `data` (`dict`) – Arbitrary metadata.
20+
- `label` (`Any`) – Label rendered along the edge.
21+
- `style` (`dict`) – Custom styles.
22+
- `className` (`str`) – CSS class for the edge.
23+
24+
## Basic Edge Types
25+
26+
Reflex Flow comes with several built-in edge types:
27+
28+
### Default Edge Types
29+
30+
```python
31+
edges: list[Edge] = [
32+
{"id": "e1", "source": "1", "target": "2", "type": "default"},
33+
{"id": "e2", "source": "2", "target": "3", "type": "straight"},
34+
{"id": "e3", "source": "3", "target": "4", "type": "step"},
35+
{"id": "e4", "source": "4", "target": "5", "type": "smoothstep"},
36+
{"id": "e5", "source": "5", "target": "6", "type": "bezier"},
37+
]
38+
```
39+
40+
- **default** – Standard curved edge
41+
- **straight** – Direct line between nodes
42+
- **step** – Right-angled path with steps
43+
- **smoothstep** – Smooth right-angled path
44+
- **bezier** – Curved bezier path
45+
46+
## Edge Styling
47+
48+
### Basic Styling
49+
50+
Add visual styling to edges using the `style` property:
51+
52+
```python
53+
edges: list[Edge] = [
54+
{
55+
"id": "styled-edge",
56+
"source": "1",
57+
"target": "2",
58+
"style": {
59+
"stroke": "#ff6b6b",
60+
"strokeWidth": 3,
61+
}
62+
}
63+
]
64+
```
65+
66+
### Animated Edges
67+
68+
Make edges animate with flowing dots:
69+
70+
```python
71+
edges: list[Edge] = [
72+
{
73+
"id": "animated-edge",
74+
"source": "1",
75+
"target": "2",
76+
"animated": True,
77+
"style": {"stroke": "#4dabf7"}
78+
}
79+
]
80+
```
81+
82+
### Edge Labels
83+
84+
Add text labels to edges:
85+
86+
```python
87+
edges: list[Edge] = [
88+
{
89+
"id": "labeled-edge",
90+
"source": "1",
91+
"target": "2",
92+
"label": "Connection",
93+
"style": {"stroke": "#51cf66"}
94+
}
95+
]
96+
```

0 commit comments

Comments
 (0)