@rkmodules/rules 0.0.25 → 0.0.27

package/dist/index.js

@@ -3,11 +3,11 @@
 var mathjs = require('mathjs');
 var React = require('react');
 var react = require('@xyflow/react');
+var reactDnd = require('react-dnd');
 var katex = require('katex');
 var classNames = require('classnames');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var reactDnd = require('react-dnd');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -569,25 +569,25 @@ var value = {
             value = params.value;
             switch (params.type) {
                 case "number":
-                    return [2 /*return*/, { value: Number(value) }];
+                    return [2 /*return*/, { value: broadCast(Number(value)) }];
                 case "boolean":
-                    return [2 /*return*/, { value: Boolean(value) }];
+                    return [2 /*return*/, { value: broadCast(Boolean(value)) }];
                 case "string":
-                    return [2 /*return*/, { value: String(value) }];
+                    return [2 /*return*/, { value: broadCast(String(value)) }];
                 default:
                     // return as is
-                    return [2 /*return*/, { value: value }];
+                    return [2 /*return*/, { value: broadCast(value) }];
             }
         });
     }); },
 };
 
-var _a$4;
-var primitives$5 = (_a$4 = {},
-    _a$4[getValue.name] = getValue,
-    _a$4[log.name] = log,
-    _a$4[value.name] = value,
-    _a$4);
+var _a$5;
+var primitives$6 = (_a$5 = {},
+    _a$5[getValue.name] = getValue,
+    _a$5[log.name] = log,
+    _a$5[value.name] = value,
+    _a$5);
 
 var math$1 = mathjs.create(mathjs.all, {});
 function evaluate(expression, scope) {
@@ -765,10 +765,10 @@ var greaterThan = {
             return [2 /*return*/, {
                     gt: binaryOnTree(inputs.a, inputs.b, function (itemA, itemB) {
                         return itemA > itemB;
-                    }),
+                    }, true),
                     gte: binaryOnTree(inputs.a, inputs.b, function (itemA, itemB) {
                         return itemA >= itemB;
-                    }),
+                    }, true),
                 }];
         });
     }); },
@@ -791,21 +791,21 @@ var lessThan = {
             return [2 /*return*/, {
                     lt: binaryOnTree(inputs.a, inputs.b, function (itemA, itemB) {
                         return itemA < itemB;
-                    }),
+                    }, true),
                     lte: binaryOnTree(inputs.a, inputs.b, function (itemA, itemB) {
                         return itemA <= itemB;
-                    }),
+                    }, true),
                 }];
         });
     }); },
 };
 
-var _a$3;
-var primitives$4 = (_a$3 = {},
-    _a$3[calc.name] = calc,
-    _a$3[lessThan.name] = lessThan,
-    _a$3[greaterThan.name] = greaterThan,
-    _a$3);
+var _a$4;
+var primitives$5 = (_a$4 = {},
+    _a$4[calc.name] = calc,
+    _a$4[lessThan.name] = lessThan,
+    _a$4[greaterThan.name] = greaterThan,
+    _a$4);
 
 var filterList = {
     name: "filterList",
@@ -821,7 +821,7 @@ var filterList = {
     impl: function (inputs) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, {
-                    list: binaryOnTreeBranch(inputs.list, inputs.keep, function (branchA, branchB) {
+                    list: binaryOnTreeBranch(inputs.list || {}, inputs.keep || {}, function (branchA, branchB) {
                         return branchA.filter(function (item, index) {
                             return (branchB[Math.min(index, branchB.length - 1)] ===
                                 true);
@@ -874,7 +874,7 @@ var listItem = {
                     //         return indices.map((i) => branch[i]);
                     //     }
                     // }),
-                    item: binaryOnTreeBranch(inputs.list, inputs.index, function (branch, indices) {
+                    item: binaryOnTreeBranch(inputs.list || {}, inputs.index || {}, function (branch, indices) {
                         if (indices) {
                             return indices.map(function (i) { return branch[i]; });
                         }
@@ -930,14 +930,14 @@ var trimTree = {
     }); },
 };
 
-var _a$2;
-var primitives$3 = (_a$2 = {},
-    _a$2[graftTree.name] = graftTree,
-    _a$2[trimTree.name] = trimTree,
-    _a$2[listItem.name] = listItem,
-    _a$2[listLength.name] = listLength,
-    _a$2[filterList.name] = filterList,
-    _a$2);
+var _a$3;
+var primitives$4 = (_a$3 = {},
+    _a$3[graftTree.name] = graftTree,
+    _a$3[trimTree.name] = trimTree,
+    _a$3[listItem.name] = listItem,
+    _a$3[listLength.name] = listLength,
+    _a$3[filterList.name] = filterList,
+    _a$3);
 
 var series = {
     name: "series",
@@ -971,10 +971,10 @@ var series = {
     }); },
 };
 
-var _a$1;
-var primitives$2 = (_a$1 = {},
-    _a$1[series.name] = series,
-    _a$1);
+var _a$2;
+var primitives$3 = (_a$2 = {},
+    _a$2[series.name] = series,
+    _a$2);
 
 var mergeTree = {
     name: "mergeTree",
@@ -1005,12 +1005,60 @@ var mergeTree = {
     }); },
 };
 
+var _a$1;
+var primitives$2 = (_a$1 = {},
+    _a$1[mergeTree.name] = mergeTree,
+    _a$1);
+
+var groupAnd = {
+    name: "groupAnd",
+    label: "Group and",
+    description: "Returns true if all of the items in a group are true",
+    inputs: {
+        tree: "boolean",
+    },
+    outputs: {
+        result: "boolean",
+    },
+    impl: function (inputs) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, {
+                    result: mapTreeBranch(inputs.tree, function (branch) {
+                        return [branch.reduce(function (acc, val) { return acc && val; }, true)];
+                    }),
+                }];
+        });
+    }); },
+};
+
+var groupOr = {
+    name: "groupOr",
+    label: "Group or",
+    description: "Returns true if any of the items in a group are true",
+    inputs: {
+        tree: "boolean",
+    },
+    outputs: {
+        result: "boolean",
+    },
+    impl: function (inputs) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, {
+                    result: mapTreeBranch(inputs.tree, function (branch) {
+                        return [branch.reduce(function (acc, val) { return acc || val; }, false)];
+                    }),
+                }];
+        });
+    }); },
+};
+
 var _a;
 var primitives$1 = (_a = {},
-    _a[mergeTree.name] = mergeTree,
+    _a[groupAnd.name] = groupAnd,
+    _a[groupOr.name] = groupOr,
     _a);
 
-var primitives = __assign(__assign(__assign(__assign(__assign({}, primitives$5), primitives$4), primitives$3), primitives$2), primitives$1);
+var primitives = __assign(__assign(__assign(__assign(__assign(__assign({}, primitives$6), primitives$5), primitives$4), primitives$3), primitives$2), primitives$1);
 
 function isPrimitive(node) {
     return node.impl !== undefined;
@@ -1168,6 +1216,7 @@ var Engine = /** @class */ (function () {
                             params: params_1,
                             executionId: executionId,
                             context: context,
+                            result: result_1,
                             startTime: startTime_1,
                             endTime: endTime_1,
                             duration: endTime_1 - startTime_1,
@@ -1186,10 +1235,12 @@ var Engine = /** @class */ (function () {
                             params: params,
                             executionId: executionId,
                             context: context,
+                            result: result,
                             startTime: startTime,
                             endTime: endTime,
                             duration: endTime - startTime,
                         });
+                        // console.log("graph run done", result, context, endTime - startTime);
                         return [2 /*return*/, result];
                 }
             });
@@ -1301,11 +1352,12 @@ var Engine = /** @class */ (function () {
                             }
                             return [2 /*return*/, this.run(builtFn, inputs)];
                         }
-                        console.log("Engine running with inputs", inputs, interpolate(inputs, {}));
                         mappedInputs = interpolate(inputs, {});
+                        console.log("Engine running with inputs", inputs, mappedInputs);
                         return [4 /*yield*/, ((_a = node.impl) === null || _a === void 0 ? void 0 : _a.call(node, mappedInputs, {}))];
                     case 1:
                         result = _b.sent();
+                        console.log("Engine run complete", result);
                         return [2 /*return*/, result];
                 }
             });
@@ -1315,8 +1367,8 @@ var Engine = /** @class */ (function () {
         return this.fnIndex[name];
     };
     // node handlers
-    Engine.prototype.applyNodeDelete = function (fn, nodeIds) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyNodeDelete = function (oldFn, nodeIds) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         nodeIds.forEach(function (id) {
             delete newFn.body[id];
         });
@@ -1337,8 +1389,8 @@ var Engine = /** @class */ (function () {
         });
         return newFn;
     };
-    Engine.prototype.applyEdgeDelete = function (fn, fromNode, toNode, fromField, toField) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyEdgeDelete = function (oldFn, fromNode, toNode, fromField, toField) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         var from = newFn.body[fromNode];
         var to = newFn.body[toNode];
         if (!from || !to) {
@@ -1353,8 +1405,8 @@ var Engine = /** @class */ (function () {
         }
         return newFn;
     };
-    Engine.prototype.applyNodeAdd = function (fn, nodeName, callback) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyNodeAdd = function (oldFn, nodeName, callback) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         var id = uid$1();
         // ensure unique id
         while (newFn.body[id]) {
@@ -1387,10 +1439,10 @@ var Engine = /** @class */ (function () {
         callback === null || callback === void 0 ? void 0 : callback(newCall, id);
         return topSort(newFn);
     };
-    Engine.prototype.applyNodeConnect = function (fn, fromNode, toNode, fromField, toField) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyNodeConnect = function (oldFn, fromNode, toNode, fromField, toField) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         var from = newFn.body[fromNode];
-        var to = newFn.body[toNode];
+        var to = __assign({}, newFn.body[toNode]);
         if (!from || !to) {
             console.warn("Invalid nodes for connection");
             return newFn;
@@ -1400,6 +1452,7 @@ var Engine = /** @class */ (function () {
         }
         // add the reference
         to.inputs[toField] = "<".concat(fromNode, ".").concat(fromField, ">");
+        newFn.body[toNode] = to;
         return topSort(newFn);
     };
     return Engine;
@@ -1427,11 +1480,11 @@ function Control(_a) {
     }
 }
 
-var styles = {"DefaultNode":"DefaultNode_R2P6c","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Input":"Input_Yhvzf","Output":"Output_e4yF-","Table":"Table_aZyRT"};
+var styles = {"DefaultNode":"DefaultNode_R2P6c","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Input":"Input_Yhvzf","Output":"Output_e4yF-","PreviewHead":"PreviewHead_oFT4K","expanded":"expanded_3vnbi","Preview":"Preview_HbkZ6","Table":"Table_aZyRT","GroupHead":"GroupHead_QJhST","GroupChildren":"GroupChildren_NKx-B","GroupLeaf":"GroupLeaf_eliT8"};
 
 var Input = function (_a) {
     var _b;
-    var name = _a.name, varDef = _a.varDef, id = _a.id, data = _a.data;
+    var name = _a.name, varDef = _a.varDef, id = _a.id, data = _a.data, onClick = _a.onClick;
     var normalized = normalizeVarDef(varDef);
     var value = (_b = data.inputs) === null || _b === void 0 ? void 0 : _b[name];
     var isRef = isReference(value);
@@ -1443,16 +1496,16 @@ var Input = function (_a) {
     }; };
     return (React.createElement("tr", { key: name, className: classNames(styles.Input, styles["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
-        } },
+        }, onClick: onClick },
         React.createElement("td", null,
-            varDef.label || name,
+            normalized.label || name,
             React.createElement(react.Handle, { type: "target", position: react.Position.Left, id: "".concat(id, "-").concat(name) })),
         React.createElement("td", null, !isRef && (React.createElement(Control, { type: normalized.type, value: value, onChange: handleInputChange(name) })))));
 };
 
 var Param = function (_a) {
     var _b;
-    _a.id; var name = _a.name, varDef = _a.varDef, data = _a.data;
+    _a.id; var name = _a.name, varDef = _a.varDef, data = _a.data, onClick = _a.onClick;
     var normalized = normalizeVarDef(varDef);
     var value = (_b = data.params) === null || _b === void 0 ? void 0 : _b[name];
     var isRef = isReference(value);
@@ -1464,19 +1517,20 @@ var Param = function (_a) {
     }; };
     return (React.createElement("tr", { key: name, className: classNames(styles.Input, styles["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
-        } },
-        React.createElement("td", null, varDef.label || name),
+        }, onClick: onClick },
+        React.createElement("td", null, normalized.label || name),
         React.createElement("td", null, !isRef && (React.createElement(Control, { type: normalized.type, options: normalized.options, value: value, onChange: handleParamChange(name) })))));
 };
 
 var Output = function (_a) {
-    var name = _a.name, varDef = _a.varDef, id = _a.id;
+    var name = _a.name, varDef = _a.varDef, id = _a.id, onClick = _a.onClick, focus = _a.focus;
     var normalized = normalizeVarDef(varDef);
     return (React.createElement("tr", { key: name, className: classNames(styles.Output, styles["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
-        } },
+        }, onClick: onClick },
         React.createElement("td", { colSpan: 2 },
-            varDef.label || name,
+            focus && "👁 ",
+            normalized.label || name,
             React.createElement(react.Handle, { type: "source", position: react.Position.Right, id: "".concat(id, "-").concat(name) }))));
 };
 
@@ -1519,24 +1573,110 @@ function NodeContainer(_a) {
         children));
 }
 
+function createTreeStructure(tree) {
+    var keys = Object.keys(tree);
+    var structure = [];
+    keys.forEach(function (key) {
+        var path = key.split(";");
+        var parent = structure;
+        for (var i = 0; i < path.length; i++) {
+            var part = parseInt(path[i], 10);
+            if (!parent[part]) {
+                parent[part] = [];
+            }
+            parent = parent[part];
+        }
+        parent.push({ items: tree[key] });
+    });
+    return structure;
+}
+function TreeBranchView(_a) {
+    var branch = _a.branch, name = _a.name;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: styles.GroupHead },
+            React.createElement("span", null,
+                "group ",
+                name)),
+        React.createElement("div", { className: styles.GroupChildren }, branch.map(function (item, index) {
+            // sub branch
+            if (Array.isArray(item)) {
+                return (React.createElement(TreeBranchView, { key: index, branch: item, name: "".concat(name, ";").concat(index) }));
+            }
+            // items
+            return (React.createElement("div", { key: index }, item.items.map(function (it, i) {
+                var _a;
+                var label = (_a = it === null || it === void 0 ? void 0 : it.toString) === null || _a === void 0 ? void 0 : _a.call(it);
+                if (label === "[object Object]") {
+                    label = "{...}";
+                }
+                return (React.createElement("div", { key: i, className: styles.GroupLeaf, title: JSON.stringify(it, null, 2) }, label));
+            })));
+        }))));
+}
+function TreeView(_a) {
+    var value = _a.value;
+    var structure = createTreeStructure(value || {});
+    return (React.createElement("div", null, structure.map(function (branch, index) { return (React.createElement(TreeBranchView, { branch: branch, name: index })); })));
+}
+var Log = React.memo(function (_a) {
+    var id = _a.id, data = _a.data, selected = _a.selected;
+    var engine = useEngine();
+    var _b = __read(React.useState(null), 2), value = _b[0], setValue = _b[1];
+    React.useEffect(function () {
+        return engine.subscribe("functionResult", function (event) {
+            var _a;
+            if (event.name === id) {
+                setValue(((_a = event.context.scope[id]) === null || _a === void 0 ? void 0 : _a.data) || null);
+            }
+        });
+    }, []);
+    return (React.createElement(NodeContainer, { id: id, label: data.name, selected: selected, className: styles.Log },
+        React.createElement(TreeView, { value: value }),
+        React.createElement(react.Handle, { type: "target", position: react.Position.Left, id: "".concat(id, "-data") }),
+        React.createElement(react.Handle, { type: "source", position: react.Position.Right, id: "".concat(id, "-data") })));
+});
+Log.displayName = "LogNode";
+
 function GenericNode(_a) {
+    var _b;
+    var _c;
     var id = _a.id, data = _a.data, selected = _a.selected, inputs = _a.inputs, outputs = _a.outputs, params = _a.params, children = _a.children;
+    var inputEntries = Object.entries(inputs || data.inputDefs || {});
+    var outputEntries = Object.entries(outputs || data.outputDefs || {});
+    var paramEntries = Object.entries(params || data.paramDefs || {});
+    var engine = useEngine();
+    var _d = __read(React.useState({}), 2), result = _d[0], setResult = _d[1];
+    var _e = __read(React.useState(((_c = outputEntries[0]) === null || _c === void 0 ? void 0 : _c[0]) || null), 2), focus = _e[0], setFocus = _e[1];
+    var _f = __read(React.useState(false), 2), showPreview = _f[0], setShowPreview = _f[1];
+    var previewValue = focus ? result[focus] : Object.values(result)[0];
+    React.useEffect(function () {
+        return engine.subscribe("functionResult", function (event) {
+            if (event.name === id) {
+                setResult(event.result || {});
+            }
+        });
+    }, []);
     return (React.createElement(NodeContainer, { label: data.name, selected: selected, id: id },
         children,
         React.createElement("table", null,
             React.createElement("tbody", null,
-                Object.entries(outputs || data.outputDefs || {}).map(function (_a) {
+                outputEntries.map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
-                    return (React.createElement(Output, { key: name, name: name, varDef: varDef, id: id }));
+                    return (React.createElement(Output, { key: name, name: name, varDef: varDef, id: id, onClick: function () { return setFocus(name); }, focus: showPreview && focus === name }));
                 }),
-                Object.entries(inputs || data.inputDefs || {}).map(function (_a) {
+                inputEntries.map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                     return (React.createElement(Input, { key: name, name: name, varDef: varDef, id: id, data: data }));
                 }),
-                Object.entries(params || data.paramDefs || {}).map(function (_a) {
+                paramEntries.map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                     return (React.createElement(Param, { key: name, name: name, varDef: varDef, id: id, data: data }));
-                })))));
+                }))),
+        React.createElement("div", { className: classNames(styles.PreviewHead, (_b = {},
+                _b[styles.expanded] = showPreview,
+                _b)), onClick: function () { return setShowPreview(!showPreview); } }, "Preview"),
+        showPreview && (React.createElement("div", { className: styles.Preview },
+            React.createElement(TreeView, { value: previewValue })))));
 }
 
 var math = mathjs.create(mathjs.all, {});
@@ -1580,38 +1720,6 @@ var Default = React.memo(function (_a) {
 });
 Default.displayName = "DefaultNode";
 
-var Log = React.memo(function (_a) {
-    var id = _a.id, data = _a.data, selected = _a.selected;
-    var engine = useEngine();
-    var _b = __read(React.useState(null), 2), value = _b[0], setValue = _b[1];
-    React.useEffect(function () {
-        return engine.subscribe("functionResult", function (event) {
-            var _a;
-            if (event.name === id) {
-                setValue(((_a = event.context.scope[id]) === null || _a === void 0 ? void 0 : _a.data) || null);
-            }
-        });
-    }, []);
-    return (React.createElement(NodeContainer, { id: id, label: data.name, selected: selected, className: styles.Log },
-        React.createElement("div", { className: styles.Table },
-            React.createElement("table", null, Object.entries(value || {}).map(function (_a) {
-                var _b = __read(_a, 2), key = _b[0], val = _b[1];
-                return (React.createElement(React.Fragment, { key: key },
-                    React.createElement("tbody", null,
-                        React.createElement("tr", null,
-                            React.createElement("th", { colSpan: 2 }, "{".concat(key, "}"))),
-                        val.map(function (item, index) {
-                            var _a;
-                            return (React.createElement("tr", { key: "".concat(key, "-").concat(index) },
-                                React.createElement("td", null, index),
-                                React.createElement("td", { title: JSON.stringify(item, null, 2) }, (_a = item === null || item === void 0 ? void 0 : item.toString) === null || _a === void 0 ? void 0 : _a.call(item))));
-                        }))));
-            }))),
-        React.createElement(react.Handle, { type: "target", position: react.Position.Left, id: "".concat(id, "-data") }),
-        React.createElement(react.Handle, { type: "source", position: react.Position.Right, id: "".concat(id, "-data") })));
-});
-Log.displayName = "LogNode";
-
 function uid() {
     return Math.random().toString(36).substring(2, 15);
 }
@@ -1658,12 +1766,21 @@ var variableStore = zustand.create(function (set, get, api) {
         },
         setVar: function (scope, name, value, persist) {
             var _a, _b;
+            var key = "".concat(scope, "|").concat(name);
             if (persist) {
-                var data = __assign(__assign({}, pget().data), (_a = {}, _a["".concat(scope, "|").concat(name)] = value, _a));
+                var oldData = pget().data;
+                var newValue = typeof value === "function"
+                    ? value(oldData[key])
+                    : value;
+                var data = __assign(__assign({}, oldData), (_a = {}, _a[key] = newValue, _a));
                 pset({ data: data });
             }
             else {
-                var data = __assign(__assign({}, get().data), (_b = {}, _b["".concat(scope, "|").concat(name)] = value, _b));
+                var oldData = get().data;
+                var newValue = typeof value === "function"
+                    ? value(oldData[key])
+                    : value;
+                var data = __assign(__assign({}, oldData), (_b = {}, _b[key] = newValue, _b));
                 set({ data: data });
             }
         },
@@ -1699,96 +1816,172 @@ function usePositions(fn) {
 function useUpdatePositions(fn) {
     var _a = __read(usePositions(fn), 2), positions = _a[0], setPositions = _a[1];
     return React.useCallback(function (id, position) {
-        var _a;
-        setPositions(__assign(__assign({}, positions), (_a = {}, _a[id] = position, _a)));
+        positions[id] = position;
+        setPositions(positions);
     }, [positions, setPositions]);
 }
 
-function createGraph(fn, engine, positions, options) {
-    var nodes = [];
-    var edges = [];
-    var handleChange = function (id) { return function (newData) {
-        var _a;
-        // console.log("handleChange", id, newData);
-        options === null || options === void 0 ? void 0 : options.setNodes(function (nds) {
-            return nds.map(function (node) {
-                if (node.id === id) {
-                    // console.log("update node", id, newData);
-                    return __assign(__assign({}, node), { data: __assign(__assign({}, node.data), newData) });
-                }
-                return node;
+// helpers
+function updateNodeArguments(node, inputs, params) {
+    return __assign(__assign({}, node), { data: __assign(__assign({}, node.data), { inputs: inputs, params: params }) });
+}
+/**
+ * flow state stores nodes and edges for the flow graph these can be updated when the function changes
+ * using setFn
+ */
+var useFlowState = zustand.create(function (set, get) { return ({
+    engine: null,
+    fn: null,
+    options: {},
+    nodes: [],
+    edges: [],
+    setNodes: function (updater) {
+        set(function (state) { return ({ nodes: updater(state.nodes) }); });
+    },
+    setEdges: function (updater) {
+        set(function (state) { return ({ edges: updater(state.edges) }); });
+    },
+    setFn: function (fn) {
+        // console.log("setFn", fn);
+        var _a = get(), oldFn = _a.fn, nodes = _a.nodes, edges = _a.edges, engine = _a.engine, options = _a.options;
+        // update the graph by shallow comparison
+        if (!engine) {
+            throw new Error("Engine not set");
+        }
+        var oldKeys = Object.keys((oldFn === null || oldFn === void 0 ? void 0 : oldFn.body) || {});
+        var newKeys = Object.keys(fn.body || {});
+        // remove all the nodes that were removed
+        nodes = nodes === null || nodes === void 0 ? void 0 : nodes.filter(function (node) { return newKeys.includes(node.id); });
+        // remove all the edges that were removed
+        edges = edges === null || edges === void 0 ? void 0 : edges.filter(function (edge) {
+            return (newKeys.includes(edge.source) && newKeys.includes(edge.target));
+        });
+        // create the new nodes that were added
+        var addedKeys = newKeys.filter(function (key) { return !oldKeys.includes(key); });
+        addedKeys.forEach(function (key, index) {
+            var _a;
+            var fncall = (_a = fn.body) === null || _a === void 0 ? void 0 : _a[key];
+            // add the node
+            nodes.push(createNode(engine, key, fncall, options));
+            // add edges
+            var refs = getReferences(fncall.inputs || {});
+            refs.forEach(function (ref) {
+                edges.push(createEdge(key, ref));
             });
         });
-        // update the function definition
-        var body = __assign({}, fn.body);
-        var fncall = __assign(__assign({}, (body[id] || {})), newData);
-        body[id] = fncall;
-        var updatedFn = __assign(__assign({}, fn), { body: body });
-        (_a = options === null || options === void 0 ? void 0 : options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, updatedFn);
-        // console.log("updated call", fncall);
-    }; };
-    Object.entries(fn.body || {}).forEach(function (_a, index) {
-        var _b = __read(_a, 2), id = _b[0], fncall = _b[1];
-        var calledFn = engine.getFunction(fncall.name);
-        // create a node for each function call
-        nodes.push({
-            id: id,
-            data: {
-                name: fncall.name,
-                caller: fn,
-                inputs: fncall.inputs,
-                params: fncall.params,
-                inputDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.inputs) || {},
-                paramDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.params) || {},
-                outputDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.outputs) || {},
-                onChange: handleChange(id),
-            },
-            position: (positions === null || positions === void 0 ? void 0 : positions[id]) || { x: 250 * index, y: 0 },
-            dragHandle: options === null || options === void 0 ? void 0 : options.dragHandle,
-            type: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.nodeType) || "Default",
+        // update the changed nodes
+        var changedKeys = newKeys.filter(function (key) {
+            var _a, _b;
+            // shallow comparison
+            return ((_a = fn.body) === null || _a === void 0 ? void 0 : _a[key]) !== ((_b = oldFn === null || oldFn === void 0 ? void 0 : oldFn.body) === null || _b === void 0 ? void 0 : _b[key]);
         });
-        var refs = getReferences(fncall.inputs || {});
-        refs.forEach(function (ref) {
-            // create an edge for each reference
-            edges.push({
-                id: "".concat(ref.path, "-").concat(id, ".").concat(ref.name),
-                source: ref.refNode,
-                target: id,
-                sourceHandle: "".concat(ref.refNode, "-").concat(ref.refField),
-                targetHandle: "".concat(id, "-").concat(ref.name),
+        // console.log("changed keys", changedKeys);
+        changedKeys.forEach(function (key) {
+            var _a;
+            //  update the nodes that were changed
+            var fncall = (_a = fn.body) === null || _a === void 0 ? void 0 : _a[key];
+            nodes = nodes === null || nodes === void 0 ? void 0 : nodes.map(function (n) {
+                if (n.id === key) {
+                    return updateNodeArguments(n, fncall.inputs, fncall.params);
+                }
+                return n;
+            });
+            // update incoming edges
+            var refs = getReferences(fncall.inputs || {});
+            // remove all incoming edges
+            edges = edges === null || edges === void 0 ? void 0 : edges.filter(function (e) { return e.target !== key; });
+            // add the edge
+            refs.forEach(function (ref) {
+                edges.push(createEdge(key, ref));
             });
         });
-    });
-    return { nodes: nodes, edges: edges };
-}
+        // console.log("final graph", nodes, edges);
+        // update the function, nodes and edges
+        set({ fn: fn, nodes: nodes, edges: edges });
+    },
+    init: function (fn, engine, options) {
+        // console.log("initing");
+        set({ engine: engine, options: options });
+        get().setFn(fn);
+    },
+}); });
+/**
+ * creates a flow state and provides handlers to update nodes and edges
+ */
 function useFlow(fn, engine, options) {
-    var _a = __read(usePositions(fn), 1), positions = _a[0];
+    var state = useFlowState();
     React.useEffect(function () {
-        var _a = createGraph(fn, engine, positions, options), nodes = _a.nodes, edges = _a.edges;
-        options.setNodes(nodes);
-        options.setEdges(edges);
+        state.init(fn, engine, options);
     }, [engine]);
+    React.useEffect(function () {
+        state.setFn(fn);
+    }, [fn]);
+    return React.useMemo(function () { return ({
+        nodes: state.nodes,
+        edges: state.edges,
+        setNodes: state.setNodes,
+        setEdges: state.setEdges,
+    }); }, [state]);
+}
+function createNode(engine, id, fncall, options) {
+    var _a, _b;
+    var calledFn = engine.getFunction(fncall.name);
+    // create a node for each function call
+    return {
+        id: id,
+        data: {
+            name: fncall.name,
+            inputs: fncall.inputs,
+            params: fncall.params,
+            inputDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.inputs) || {},
+            paramDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.params) || {},
+            outputDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.outputs) || {},
+            onChange: ((_a = options.onDataChange) === null || _a === void 0 ? void 0 : _a.call(options, id)) || (function () { }),
+        },
+        position: ((_b = options.positions) === null || _b === void 0 ? void 0 : _b[id]) || { x: 0, y: 0 },
+        dragHandle: options.dragHandle,
+        type: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.nodeType) || "Default",
+    };
+}
+function createEdge(nodeId, ref) {
+    return {
+        id: "".concat(ref.path, "-").concat(nodeId, ".").concat(ref.name),
+        source: ref.refNode,
+        target: nodeId,
+        sourceHandle: "".concat(ref.refNode, "-").concat(ref.refField),
+        targetHandle: "".concat(nodeId, "-").concat(ref.name),
+    };
 }
 
 function FlowInner(_a) {
     var fn = _a.function, engine = _a.engine, onChange = _a.onChange, onClick = _a.onClick, onSelect = _a.onSelect;
     var _b = __read(React.useState(null), 2), instance = _b[0], setInstance = _b[1];
-    var updatePositions = useUpdatePositions(fn);
-    var _c = __read(react.useNodesState([]), 3), nodes = _c[0], setNodes = _c[1], onNodesChange = _c[2];
-    var _d = __read(react.useEdgesState([]), 3), edges = _d[0], setEdges = _d[1], onEdgesChange = _d[2];
-    useFlow(fn, engine, {
+    var updatePosition = useUpdatePositions(fn);
+    var _c = __read(usePositions(fn), 1), positions = _c[0];
+    var handleDataChange = function (id) { return function (newData) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            // update the function definition
+            // console.log("before fn call update", Object.keys(fn.body));
+            var body = __assign({}, fn.body);
+            var fncall = __assign(__assign({}, (body[id] || {})), newData);
+            body[id] = fncall;
+            // console.log("after fn call update", Object.keys(body));
+            var updatedFn = __assign(__assign({}, fn), { body: body });
+            return updatedFn;
+        });
+    }; };
+    var _d = useFlow(fn, engine, {
         dragHandle: ".".concat(styles.Label),
-        setNodes: setNodes,
-        setEdges: setEdges,
-        onChange: onChange,
-    });
+        positions: positions,
+        onDataChange: handleDataChange,
+    }), nodes = _d.nodes, edges = _d.edges, setNodes = _d.setNodes, setEdges = _d.setEdges;
     // node selection handler
-    var handleChange = React.useCallback(function (_a) {
+    var handleSelect = React.useCallback(function (_a) {
         var nodes = _a.nodes;
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodes.map(function (n) { return n.id; }) || []);
     }, [onSelect]);
     react.useOnSelectionChange({
-        onChange: handleChange,
+        onChange: handleSelect,
     });
     // dropping nodes
     var _e = __read(reactDnd.useDrop({
@@ -1797,10 +1990,13 @@ function FlowInner(_a) {
             var pos = monitor.getClientOffset();
             if (instance && pos) {
                 var position_1 = instance.screenToFlowPosition(pos);
-                onChange === null || onChange === void 0 ? void 0 : onChange(engine.applyNodeAdd(fn, item.name, function (fnCall, id) {
-                    console.log("node added", id, position_1);
-                    updatePositions(id, position_1);
-                }));
+                // console.log("handle drop", position);
+                onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+                    return engine.applyNodeAdd(fn, item.name, function (fnCall, id) {
+                        // console.log("node added", id, position);
+                        updatePosition(id, position_1);
+                    });
+                });
             }
         },
         collect: function (monitor) {
@@ -1809,8 +2005,7 @@ function FlowInner(_a) {
             };
         },
     }), 2); _e[0].isOver; var drop = _e[1];
-    // useLayoutNodes();
-    var updatePosition = useUpdatePositions(fn);
+    // connecting nodes
     var onConnect = React.useCallback(function (params) {
         var _a, _b;
         var sourceField = (_a = params.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
@@ -1819,37 +2014,34 @@ function FlowInner(_a) {
             console.warn("Invalid connection handles", params);
             return;
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(engine.applyNodeConnect(fn, params.source, params.target, sourceField, targetField));
-        setEdges(function (edgesSnapshot) { return react.addEdge(params, edgesSnapshot); });
-    }, [setEdges, fn, onChange]);
-    var onNodesDelete = React.useCallback(function (nodesToDelete) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(engine.applyNodeDelete(fn, nodesToDelete.map(function (n) { return n.id; })));
-        setNodes(function (nodesSnapshot) {
-            return nodesSnapshot.filter(function (node) { return !nodesToDelete.some(function (n) { return n.id === node.id; }); });
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            return engine.applyNodeConnect(fn, params.source, params.target, sourceField, targetField);
         });
-        setEdges(function (edgesSnapshot) {
-            return edgesSnapshot.filter(function (edge) {
-                return !nodesToDelete.some(function (n) { return n.id === edge.source || n.id === edge.target; });
-            });
+    }, [fn, onChange]);
+    // deleting nodes
+    var onNodesDelete = React.useCallback(function (nodesToDelete) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            return engine.applyNodeDelete(fn, nodesToDelete.map(function (n) { return n.id; }));
         });
-    }, [setNodes, setEdges, onChange, fn]);
+    }, [onChange, fn]);
+    // deleting edges
     var onEdgesDelete = React.useCallback(function (edgesToDelete) {
-        var newFn = fn;
-        edgesToDelete.forEach(function (edge) {
-            var _a, _b;
-            var sourceField = (_a = edge.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
-            var targetField = (_b = edge.targetHandle) === null || _b === void 0 ? void 0 : _b.split("-")[1];
-            if (!sourceField || !targetField) {
-                console.warn("Invalid connection handles", edge);
-                return;
-            }
-            newFn = engine.applyEdgeDelete(newFn, edge.source, edge.target, sourceField, targetField);
-        });
-        onChange === null || onChange === void 0 ? void 0 : onChange(newFn);
-        setEdges(function (edgesSnapshot) {
-            return edgesSnapshot.filter(function (edge) { return !edgesToDelete.some(function (e) { return e.id === edge.id; }); });
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            var newFn = fn;
+            edgesToDelete.forEach(function (edge) {
+                var _a, _b;
+                var sourceField = (_a = edge.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
+                var targetField = (_b = edge.targetHandle) === null || _b === void 0 ? void 0 : _b.split("-")[1];
+                if (!sourceField || !targetField) {
+                    console.warn("Invalid connection handles", edge);
+                    return;
+                }
+                newFn = engine.applyEdgeDelete(newFn, edge.source, edge.target, sourceField, targetField);
+            });
+            return newFn;
         });
-    }, [setEdges, onChange, fn]);
+    }, [onChange, fn]);
+    // handle canvas clicks to be able to place nodes
     var handleClick = function (e) {
         if (instance) {
             var position = instance.screenToFlowPosition({
@@ -1859,9 +2051,19 @@ function FlowInner(_a) {
             onClick === null || onClick === void 0 ? void 0 : onClick(e, position);
         }
     };
+    var onNodesChange = React.useCallback(function (changes) {
+        return setNodes(function (nodesSnapshot) {
+            return react.applyNodeChanges(changes, nodesSnapshot);
+        });
+    }, []);
+    var onEdgesChange = React.useCallback(function (changes) {
+        return setEdges(function (edgesSnapshot) {
+            return react.applyEdgeChanges(changes, edgesSnapshot);
+        });
+    }, []);
     return (React.createElement(react.ReactFlow, { ref: drop, nodes: nodes, edges: edges, nodeTypes: nodeTypes, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onNodeDragStop: function (e, n) { return updatePosition(n.id, n.position); }, onConnect: onConnect, onInit: setInstance, onPaneClick: handleClick, fitView: true, 
         // panOnDrag={false}
-        selectionOnDrag: true, minZoom: 0.1, deleteKeyCode: "Delete" },
+        selectionOnDrag: true, minZoom: 0.1, maxZoom: 4, deleteKeyCode: "Delete" },
         React.createElement(react.Background, { color: "#ccc", variant: react.BackgroundVariant.Dots }),
         React.createElement(react.Controls, null)));
 }
@@ -1928,7 +2130,6 @@ exports.Flow = Flow;
 exports.binaryOnTree = binaryOnTree;
 exports.binaryOnTreeBranch = binaryOnTreeBranch;
 exports.broadCast = broadCast;
-exports.createGraph = createGraph;
 exports.expandTree = expandTree;
 exports.getBranch = getBranch;
 exports.getReferences = getReferences;