From 4bcf462e82c3b32abd6bd37d4f21148712a03e75 Mon Sep 17 00:00:00 2001 From: Coderambling <159031875+Coderambling@users.noreply.github.com> Date: Sun, 14 Sep 2025 19:35:42 +0200 Subject: [PATCH 1/4] Update index.md with doc suggestions Added suggestions. --- docs/index.md | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/docs/index.md b/docs/index.md index ba1c8af..d53fb11 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,7 @@ # Reactflow +Note: make this the second paragraph. + Reactflow is a node based editor that lets you build interactive node trees for various purposes such as workflows or objects customizations. It allows interactively adding/removing nodes, move nodes around and plug nodes to each others. https://reactflow.dev/ @@ -14,16 +16,24 @@ https://github.com/xyflow/xyflow/tree/main/packages/react ## panel-reactflow -**panel-reactflow** allows you to build a node graph filled with holoviz panel components and provide a python API to dynamically interact with the graph. +Note: make this the top paragraph, because this introduces the module. + + +**panel-reactflow** allows you to build a node graph (link to definition) filled with holoviz panel components and provide a python API to dynamically interact with the graph. + +Node graphs are ... based on ... to visualize ... and achieve ... . For more information please refer to (link). + +React-Flow is based on [Panel](https://panel.holoviz.org) and ReactFlow (link to the ReactFlow paragraph). This document assumes familiarity with Panel. ![alt text](assets/plot_illustration.png "Example of node graph customizing a Bokeh plot") Two approaches are available in this module: -- **ReactFlowGraph** : the node graph is seen from the outside, and can be interpreted by another code to have effects on the rest of the panel app; -- **Workflow** : Nodes interact with each others through an update() cascade, transmitting data from one to another. +- **ReactFlowGraph** : the node graph is seen from the outside, and can be interpreted by another code ?? to have effects ?? on the rest of the panel app; + +- **Workflow** : Nodes interact with each other through a reactive pattern? / an update() cascade, transmitting data from one to another. And / or: where a change / update in one node can trigger a change in one or several other nodes. -These two approaches serve different needs and can be selected based on the user goal. +These two approaches serve different needs and can be selected based on the user goal. Note: maybe this sentence is superfluous? ## Node graph @@ -59,7 +69,7 @@ A set of WorkflowNodes is provided in `panel_reactflow.nodes` implementing the b ## Port definition -Every node port is defined busing the ``NodePort`` class found in ``panel_reactflow.api``. The node port has the following properties: +Every node port is defined by using the ``NodePort`` class found in ``panel_reactflow.api``. The node port has the following properties: - ``direction`` (PortDirection) : Whether the port represents an input or an output - ``position`` (PortPosition) : Location of the port around the node : BOTTOM, TOP, LEFT or RIGHT @@ -73,7 +83,7 @@ A ``PortRestriction`` is a class defined by a name and a color. When set, the po ## Edge definition -An edge makes a link between two node ports, creating a structure in the graph. An edge is defined by the names of the source and target node with their associated port names. +An edge makes / defines? a link between two node ports, creating a structure in the graph. An edge is defined by the names of the source and target node with their associated port names. # Use example @@ -124,9 +134,9 @@ class FloatInputNode(WorkflowNode): ``` -The result node input node is defined by the code below. +The result node input node is defined by the code below. Note: The result node input node? Should this be: The result node is ... etc.? -- The inputs sum is displayed in a ``pn.pane.Markdown`` object that is created and stored as class attribute. +- The inputs sum is displayed in a ``pn.pane.Markdown`` object that is created and stored as a class attribute. - The node has one input port, which we decide to locate on the node left to be consistent with the float input node. - The ``create`` function returns a column that centers the ``Markdown`` widget. - In this case, the ``update`` function reads the list of nodes plugged at its ``input`` port: @@ -179,7 +189,7 @@ def make_reactflow(): make_reactflow().show() ``` -Once built, this example can provide the following graph: +Once built, this example provides the following graph: ![alt text](assets/simple_graph.png "Simple example graph") @@ -203,4 +213,4 @@ panel-reactflow implements a set of features such as maximum connection counts, https://reactflow.dev/examples -panel-reactflow source code can be edited by users to implement these features as explained in the website examples. \ No newline at end of file +panel-reactflow source code can be edited by users to implement these features as explained in the website examples. From 630a1e9b5b4ae7eedc0536d8e1c5f8c46ed8fa05 Mon Sep 17 00:00:00 2001 From: Thibault Moulignier <153911627+tmoulignier@users.noreply.github.com> Date: Mon, 15 Sep 2025 13:43:41 +0200 Subject: [PATCH 2/4] Just trying how pull requests work --- docs/index.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/index.md b/docs/index.md index d53fb11..958e08c 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,20 +1,5 @@ -# Reactflow -Note: make this the second paragraph. - -Reactflow is a node based editor that lets you build interactive node trees for various purposes such as workflows or objects customizations. It allows interactively adding/removing nodes, move nodes around and plug nodes to each others. - -https://reactflow.dev/ - -The official website provides a range of use cases to illustrate the possibilities. - -https://reactflow.dev/showcase - -The source code of the xyflow, used in this module can be found at this GitHub address: - -https://github.com/xyflow/xyflow/tree/main/packages/react - -## panel-reactflow +# panel-reactflow Note: make this the top paragraph, because this introduces the module. @@ -35,6 +20,21 @@ Two approaches are available in this module: These two approaches serve different needs and can be selected based on the user goal. Note: maybe this sentence is superfluous? +## Reactflow + + +Reactflow is a node based editor that lets you build interactive node trees for various purposes such as workflows or objects customizations. It allows interactively adding/removing nodes, move nodes around and plug nodes to each others. + +https://reactflow.dev/ + +The official website provides a range of use cases to illustrate the possibilities. + +https://reactflow.dev/showcase + +The source code of the xyflow, used in this module can be found at this GitHub address: + +https://github.com/xyflow/xyflow/tree/main/packages/react + ## Node graph The `ReactFlowGraph` class can be found under `panel_reactflow.reactflow`, while the Workflow class is found under `panel_reactflow.workflow`. In both cases, a graph is defined by the following parameters: From 9da9a8f4d2aa1ad6d2a126c7c3b06eb295e2e2ad Mon Sep 17 00:00:00 2001 From: Zelfior Date: Sun, 21 Sep 2025 16:23:56 +0200 Subject: [PATCH 3/4] Integrated your suggestions --- docs/index.md | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/docs/index.md b/docs/index.md index 958e08c..a8042bd 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,12 +1,7 @@ # panel-reactflow -Note: make this the top paragraph, because this introduces the module. - - -**panel-reactflow** allows you to build a node graph (link to definition) filled with holoviz panel components and provide a python API to dynamically interact with the graph. - -Node graphs are ... based on ... to visualize ... and achieve ... . For more information please refer to (link). +**panel-reactflow** allows you to build a node graph (link to definition) filled with holoviz panel components and provide a python API to dynamically interact with the graph. Node graphs can be used to provide user a better view on workflows or no code programming. React-Flow is based on [Panel](https://panel.holoviz.org) and ReactFlow (link to the ReactFlow paragraph). This document assumes familiarity with Panel. @@ -14,11 +9,10 @@ React-Flow is based on [Panel](https://panel.holoviz.org) and ReactFlow (link to Two approaches are available in this module: -- **ReactFlowGraph** : the node graph is seen from the outside, and can be interpreted by another code ?? to have effects ?? on the rest of the panel app; +- **ReactFlowGraph** : the node graph is seen from the outside, and can be interpreted by another code to trigger callbacks on the panel app; -- **Workflow** : Nodes interact with each other through a reactive pattern? / an update() cascade, transmitting data from one to another. And / or: where a change / update in one node can trigger a change in one or several other nodes. +- **Workflow** : Nodes contain values that will be passed to their children (other nodes plugged to its outputs). An update function will compute a node output based on its inputs and can trigger the children update. -These two approaches serve different needs and can be selected based on the user goal. Note: maybe this sentence is superfluous? ## Reactflow @@ -83,7 +77,7 @@ A ``PortRestriction`` is a class defined by a name and a color. When set, the po ## Edge definition -An edge makes / defines? a link between two node ports, creating a structure in the graph. An edge is defined by the names of the source and target node with their associated port names. +An edge defines a link between two node ports, creating a structure in the graph. An edge is defined by the names of the source and target node with their associated port names. # Use example @@ -134,7 +128,7 @@ class FloatInputNode(WorkflowNode): ``` -The result node input node is defined by the code below. Note: The result node input node? Should this be: The result node is ... etc.? +The result node is defined by the code below. - The inputs sum is displayed in a ``pn.pane.Markdown`` object that is created and stored as a class attribute. - The node has one input port, which we decide to locate on the node left to be consistent with the float input node. From 35cc5214eb6b4f21ee6a71003a60687e7580a9c4 Mon Sep 17 00:00:00 2001 From: Zelfior Date: Sun, 21 Sep 2025 16:30:44 +0200 Subject: [PATCH 4/4] more documentation on a feature just added --- docs/index.md | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/docs/index.md b/docs/index.md index a8042bd..ede47c7 100644 --- a/docs/index.md +++ b/docs/index.md @@ -201,10 +201,31 @@ The following examples are provided in the panel_reactflow github repository: - ``all_base_nodes.py`` : graph with panel input widget nodes. - ``plot_example.py`` : example of node graph setting up a Bokeh plot. -# Customizing the Reactflow JavaScript -panel-reactflow implements a set of features such as maximum connection counts, connection restriction or the sidebar drag and drop. More features are presented in the Reactflow website with the associated source code: + +# Further customization using the ReactFlow API + +panel-reactflow implements a set of features such as maximum connection counts, connection restriction or the sidebar drag and drop. More features are presented in the ReactFlow website with the associated source code: https://reactflow.dev/examples -panel-reactflow source code can be edited by users to implement these features as explained in the website examples. +## Nodes and edges customization + +Nodes and edges can see their styles edited as described in the examples. An attribute **react_props** receives a dictionary that will be provided to the ReactFlow React code. For example, to edit the node background and border colors, the following argument can be provided: + +``` +react_props={ + "style": { + "backgroundColor": "rgba(200, 200, 200, 0.4)", + "borderColor": "#414141", + }, +}, +``` + +The plot example provides a few examples of such implementation including node grouping as described in ReactFlow documentation: + +https://reactflow.dev/examples/grouping/sub-flows + +## Customizing the ReactFlow JavaScript + +For deeper change in the graph behavior, the JavaScript file provided to the ReactFlow class must be edited by users to implement these features as explained in the website examples.