Resizing possibly works.

server/crdt.py

@@ -130,17 +130,21 @@ async def workspace_changed(name, changes, ws_crdt):
     from . import workspace
 
     ws_pyd = workspace.Workspace.model_validate(ws_crdt.to_py())
+    # Do not trigger execution for superficial changes.
+    # This is a quick solution until we build proper caching.
     clean_input(ws_pyd)
     if ws_pyd == last_known_versions.get(name):
         return
     last_known_versions[name] = ws_pyd.model_copy(deep=True)
+    # Frontend changes that result from typing are delayed to avoid
+    # rerunning the workspace for every keystroke.
     if name in delayed_executions:
         delayed_executions[name].cancel()
     delay = min(
         change.keys.get("__execution_delay", {}).get("newValue", 0)
         for change in changes
     )
-    if delay > 0:
+    if delay:
         task = asyncio.create_task(execute(ws_crdt, ws_pyd, delay))
         delayed_executions[name] = task
     else:

web/src/index.css

@@ -259,3 +259,36 @@ body {
     margin: 10px;
   }
 }
+
+
+path.react-flow__edge-path {
+  stroke-width: 2;
+  stroke: black;
+}
+.react-flow__edge.selected path.react-flow__edge-path {
+  outline: var(--xy-selection-border, var(--xy-selection-border-default));
+  outline-offset: 10px;
+  border-radius: 1px;
+}
+.react-flow__handle {
+  border-color: black;
+  background: white;
+  width: 10px;
+  height: 10px;
+}
+.react-flow__arrowhead * {
+  stroke: none;
+  fill: black;
+}
+// We want the area node to be above the sub-flow node if its inside the sub-flow.
+// This will need some more thinking for a general solution.
+.react-flow__node-sub_flow {
+  z-index: -20 !important;
+}
+.react-flow__node-area {
+  z-index: -10 !important;
+}
+.selected .lynxkite-node {
+  outline: var(--xy-selection-border, var(--xy-selection-border-default));
+  outline-offset: 7.5px;
+}

web/src/workspace/Workspace.tsx

@@ -97,15 +97,16 @@ function LynxKiteFlow() {
         });
       } else if (ch.type === 'select') {
       } else if (ch.type === 'dimensions') {
+        getYjsDoc(state).transact(() => Object.assign(node, ch.dimensions));
       } else if (ch.type === 'replace') {
         // Ideally we would only update the parameter that changed. But ReactFlow does not give us that detail.
-        getYjsDoc(state).transact(() => {
-          Object.assign(node.data, {
-            collapsed: ch.item.data.collapsed,
-            params: { ...ch.item.data.params },
-            __execution_delay: ch.item.data.__execution_delay,
-          });
-        });
+        const u = {
+          collapsed: ch.item.data.collapsed,
+          // The "..." expansion on a Y.map returns an empty object. Copying with fromEntries/entries instead.
+          params: { ...Object.fromEntries(Object.entries(ch.item.data.params)) },
+          __execution_delay: ch.item.data.__execution_delay,
+        };
+        getYjsDoc(state).transact(() => Object.assign(node.data, u));
       } else {
         console.log('Unknown node change', ch);
       }

web/src/workspace/nodes/LynxKiteNode.tsx

@@ -73,17 +73,15 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
           {handles.map(handle => (
             <Handle
               key={handle.name}
-              id={handle.name} type={handle.type} position={Position[handle.position as keyof typeof Position]}
+              id={handle.name} type={handle.type} position={handle.position as Position}
               style={{ [handleOffsetDirection[handle.position]]: handle.offsetPercentage + '%' }}>
               {handle.showLabel && <span className="handle-name">{handle.name.replace(/_/g, " ")}</span>}
-            </Handle>
+            </Handle >
           ))}
           <NodeResizeControl
             minWidth={100}
             minHeight={50}
             style={{ 'background': 'transparent', 'border': 'none' }}
-            onResizeStart={() => reactFlow.updateNodeData(props.id, { beingResized: true })}
-            onResizeEnd={() => reactFlow.updateNodeData(props.id, { beingResized: false })}
           >
             <ChevronDownRight className="node-resizer" />
           </NodeResizeControl>