Spaces:
Running
Running
File size: 8,196 Bytes
176823e f3f2a15 176823e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
# Flow
A Flow component implemented based on [reactflow](https://reactflow.dev/).
- Supports customization of node rendering through a schema.
- Allows for custom node render components with interaction from Python.
## How to Use
### Defining Schema Nodes (Important)
See: <tab-link tab="define_schema">Define Schema</tab-link>
### Basic Usage
<demo name="basic" code-position="bottom"></demo>
### Component Options
<demo name="component_options" code-position="bottom"></demo>
### Custom Node Types (Advanced usage, requires frontend knowledge)
<demo name="custom_node_type" code-position="bottom"></demo>
## API and Parameter List
### value
Interface definition:
```python
class NodePosition(GradioModel):
x: Optional[int] = 0
y: Optional[int] = 0
class Node(GradioModel):
id: Optional[str] = None
name: str
title: Optional[str] = None
position: Optional[Union[NodePosition, dict]] = None
data: Optional[dict] = None
class EdgePort(GradioModel):
attr: Optional[str] = None
attrItemIndex: Optional[int] = None
handleIndex: Optional[int] = None
class Edge(GradioModel):
id: Optional[str] = None
source: str
target: str
sourcePort: Optional[Union[EdgePort, dict]] = None
targetPort: Optional[Union[EdgePort, dict]] = None
class FlowData(GradioModel):
nodes: Optional[List[Union[Node, dict]]] = []
edges: Optional[List[Union[Edge, dict]]] = []
```
### props
| Attribute | Type | Default Value | Description |
| ------------------- | --------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| height | int \| str | 600 | Height of the Flow component. |
| sync_on_data_change | bool | None | Whether to sync the Python value only on data change (e.g., node attributes, node count, edge count, connection ports, not including node positions). If you want better page performance without full data sync, set this to True. |
| schema | FlowSchemaDict \| dict | None | Defines the nodes and edges of the Flow component. |
| show_sidebar | bool | True | Whether to display the sidebar in the Flow component. |
| show_minimap | bool | True | Whether to display the minimap in the Flow component. |
| show_controls | bool | True | Whether to display the controls bar in the Flow component. |
| background_props | BackgroundPropsDict \| dict BackgroundPropsDict definition below | None | Modify the background of the Flow component, see the BackgroundPropsDict type. |
| min_zoom | int | 0.1 | Minimum zoom level for the Flow component. |
| max_zoom | int | 2 | Maximum zoom level for the Flow component. |
| custom_components | dict\[str, CustomComponentDict\] CustomComponentDict definition below | None | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
**BackgroundPropsDict definition:**
```python
class BackgroundPropsDict(TypedDict):
color: Optional[str]
className: Optional[str]
# The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
gap: Optional[Union[int, Tuple[int, int]]]
# The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
size: Optional[int]
offset: Optional[int]
lineWidth: Optional[int]
variant: Optional[Literal['dots', 'lines', 'cross']]
```
**CustomComponentDict definition:**
```python
class CustomComponentDict(TypedDict):
props: Optional[List[str]]
template: Optional[str]
js: Optional[str]
```
### Event Listeners
| Event | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `mgr.Flow.change(fn, ...)` | Triggers when the `value` updates. If `sync_on_data_change` is True, the actual data at this point might not be up-to-date; consider listening to the `data_change` event instead. |
| `mgr.Flow.data_change(fn, ...)` | Triggers when there's a data change (e.g., node attributes, node count, edge count, connection ports), but not node positions. |
| `mgr.Flow.custom(fn, ...)` | Triggers when a custom label event occurs. The `EventData` includes:<br/> - `id`: ID of the currently triggered node.<br/> - `node`: Type of the currently triggered node.<br/> - `attr`: Attributes of the currently triggered node.<br/> - `index`: Index of the attribute if it's a list.<br/> - `value`: Custom passed-in value. |
|