Merge pull request #4 from panel-extensions/cleanup_and_tests

Cleanup and tests

Author: philippjfr

examples/advanced.py

@@ -43,8 +43,8 @@ class CustomEditor(ParamNodeEditor):
 ]
 
 edges = [
-    {"id": "e1", "source": "start", "target": "process"},
-    {"id": "e2", "source": "process", "target": "finish"},
+    {"id": "e1", "source": "start", "target": "process", "label": "0.2"},
+    {"id": "e2", "source": "process", "target": "finish", "label": "0.5"},
 ]
 
 status = pn.pane.Markdown("**Last event:** _none_")

src/panel_reactflow/base.py

@@ -206,25 +206,25 @@ def from_dict(cls, payload: dict[str, Any]) -> "EdgeSpec":
 
 
 class NodeEditor(Viewer):
-    id = param.String(default="", doc="ID of the node.", constant=True)
-    data = param.Dict(default={}, doc="Data for the node.")
+    _id = param.String(default="", doc="ID of the node.", constant=True)
+    _data = param.Dict(default={}, doc="Data for the node.")
 
 
 class JsonNodeEditor(NodeEditor):
     def __panel__(self):
-        return JSONEditor.from_param(self.param.data)
+        return JSONEditor.from_param(self.param._data)
 
 
 class ParamNodeEditor(NodeEditor):
     def __init__(self, **params):
-        params.update(params.get("data", {}))
+        params.update({p: v for p, v in params.get("_data", {}).items() if p in type(self).param})
         super().__init__(**params)
         edit_params = [p for p in self.param if p not in NodeEditor.param]
         self.param.watch(self._update_data, edit_params)
         self._panel = pn.Param(self, parameters=edit_params, show_name=False, margin=0, default_layout=Paper)
 
     def _update_data(self, *events: tuple[param.parameterized.Event]) -> None:
-        self.data = dict(self.data, **{event.name: event.new for event in events})
+        self._data = dict(self._data, **{event.name: event.new for event in events})
 
     def __panel__(self):
         return self._panel
@@ -335,8 +335,8 @@ def _update_node_editors(self, *events: tuple[param.parameterized.Event]) -> Non
                 editors[node_id] = self._node_editors[node_id]
                 continue
             editor_cls = self.node_types.get(node.get("type", "panel"), JsonNodeEditor)
-            editors[node_id] = editor = editor_cls(id=node_id, data=node.get("data", {}))
-            self._node_watchers[node_id] = editor.param.watch(self._apply_node_editor_changes, "data")
+            editors[node_id] = editor = editor_cls(_id=node_id, _data=node.get("data", {}))
+            self._node_watchers[node_id] = editor.param.watch(self._apply_node_editor_changes, "_data")
         self._node_editors = editors
         self.param.trigger("_node_editor_views")
 

src/panel_reactflow/models/reactflow.jsx

@@ -202,7 +202,7 @@ function FlowInner({
   model,
   hydratedNodes,
   pyNodes,
-  pyEdges,
+  hydratedEdges,
   selectionSetter,
   currentSelection,
   views,
@@ -221,7 +221,7 @@ function FlowInner({
   viewport,
 }) {
   const [nodes, setNodes, onNodesChange] = useNodesState(hydratedNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(pyEdges);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(hydratedEdges);
   const nodesRef = useRef(nodes);
   const edgesRef = useRef(edges);
   const lastHydrated = useRef({ nodesSig: null, viewsRef: null, edgesSig: null });
@@ -252,7 +252,8 @@ function FlowInner({
               return edge;
             }
             const data = { ...(edge.data || {}), ...(msg.patch || {}) };
-            return { ...edge, data };
+            const nextLabel = msg.patch?.label ?? edge.label;
+            return { ...edge, data, label: nextLabel };
           })
         );
       }
@@ -293,12 +294,12 @@ function FlowInner({
   }, [hydratedNodes, pyNodes, setNodes]);
 
   useEffect(() => {
-    const edgesSig = signature(pyEdges);
+    const edgesSig = signature(hydratedEdges);
     if (edgesSig !== lastHydrated.current.edgesSig) {
       lastHydrated.current.edgesSig = edgesSig;
-      setEdges(pyEdges);
+      setEdges(hydratedEdges);
     }
-  }, [pyEdges, setEdges]);
+  }, [hydratedEdges, setEdges]);
 
   useEffect(() => {
     if (viewport) {
@@ -336,15 +337,24 @@ function FlowInner({
     [enableConnect, sendPatch, setEdges]
   );
 
-  const onNodeDragStop = useCallback(
-    (_event, node) => {
-      schedulePatch({
-        type: "node_moved",
-        node_id: node.id,
-        position: node.position,
+  const handleNodesChange = useCallback(
+    (changes) => {
+      onNodesChange(changes);
+      const moved = changes.filter(
+        (change) => change.type === "position" && change.dragging !== true
+      );
+      if (!moved.length) {
+        return;
+      }
+      moved.forEach((change) => {
+        schedulePatch({
+          type: "node_moved",
+          node_id: change.id,
+          position: change.position,
+        });
       });
     },
-    [schedulePatch]
+    [onNodesChange, schedulePatch]
   );
 
   const onSelectionChange = useCallback(
@@ -409,9 +419,8 @@ function FlowInner({
       edges={edges}
       nodeTypes={nodeTypes}
       defaultEdgeOptions={defaultEdgeOptions}
-      onNodesChange={onNodesChange}
+      onNodesChange={handleNodesChange}
       onEdgesChange={onEdgesChange}
-      onNodeDragStop={onNodeDragStop}
       onSelectionChange={onSelectionChange}
       onNodesDelete={onNodesDelete}
       onEdgesDelete={onEdgesDelete}
@@ -478,6 +487,17 @@ export function render({ model, view }) {
     });
   }, [pyNodes, nodeEditors, views, editorMode]);
 
+  const hydratedEdges = useMemo(() => {
+    return (pyEdges || []).map((edge) => {
+      const data = edge.data || {};
+      const label = edge.label ?? data.label;
+      if (label === undefined) {
+        return edge;
+      }
+      return { ...edge, data, label };
+    });
+  }, [pyEdges]);
+
   const nodeTypes = useMemo(() => {
     const mapping = {};
     Object.entries(BUILTIN_NODE_TYPES).forEach(([typeName, spec]) => {
@@ -498,7 +518,7 @@ export function render({ model, view }) {
           model={model}
           hydratedNodes={hydratedNodes}
           pyNodes={pyNodes || []}
-          pyEdges={pyEdges || []}
+          hydratedEdges={hydratedEdges}
           selectionSetter={setSelection}
           currentSelection={selection}
           views={views}