Skip to content

Add Auto Layout #23

@MarcSkovMadsen

Description

@MarcSkovMadsen

The big challenge for Panel ReactFlow is that there is no autolayout. That will make it much harder to use than competitors like daggr.

Please add autolayout.

If I remove the position I see

TypeError: Cannot read properties of undefined (reading 'x')
import panel as pn

from panel_reactflow import NodeType, ReactFlow

pn.extension("jsoneditor")

task_schema = {
    "type": "object",
    "properties": {
        "status": {"type": "string", "enum": ["idle", "running", "done"]},
        "priority": {"type": "integer"},
    },
}

nodes = [
    {"id": "start", "type": "task", "label": "Start", "data": {"status": "idle"}},
    {"id": "finish", "type": "task", "label": "Finish", "position": {"x": 100, "y": 60}, "data": {"status": "done"}},
]
edges = [{"id": "e1", "source": "start", "target": "finish"}]

flow = ReactFlow(
    nodes=nodes,
    edges=edges,
    node_types={"task": NodeType(type="task", label="Task", schema=task_schema)},
    editor_mode="node",
    sizing_mode="stretch_both",
)

flow.servable()

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions