@linkdlab/funcnodes_react_flow 0.1.0

package/src/state/fnrfzst.ts

@@ -0,0 +1,440 @@
+import LibZustand, { LibZustandInterface } from "./lib";
+import { FuncNodesWorker } from "../funcnodes";
+import NodeSpaceZustand, { NodeSpaceZustandInterface } from "./nodespace";
+import { NodeStore, createNodeStore } from "./node";
+import { PartialIOType } from "./node";
+import reactflowstore, { RFStore } from "./reactflow";
+import {
+  Node as RFNode,
+  NodeChange,
+  useReactFlow,
+  EdgeChange,
+  Edge as RFEdge,
+  Connection as RFConnection,
+} from "reactflow";
+import { NodeAction } from "./node";
+import { deep_merge } from ".";
+import { EdgeAction, generate_edge_id } from "./edge";
+import WorkerManager from "../funcnodes/workermanager";
+import { UseBoundStore, StoreApi, create } from "zustand";
+
+interface WorkerRepresentation {
+  uuid: string;
+  host: string;
+  port: number;
+  ssl: boolean;
+  active: boolean;
+  name: string | null;
+}
+interface WorkersState {
+  [key: string]: WorkerRepresentation;
+}
+interface FuncNodesReactFlowZustandInterface {
+  lib: LibZustandInterface;
+  workermanager: WorkerManager | undefined;
+  workers: UseBoundStore<StoreApi<WorkersState>>;
+  worker: FuncNodesWorker | undefined;
+  nodespace: NodeSpaceZustandInterface;
+  useReactFlowStore: RFStore;
+  render_options: UseBoundStore<StoreApi<RenderOptions>>;
+  progress_state: UseBoundStore<StoreApi<ProgressState>>;
+  update_render_options: (options: RenderOptions) => void;
+  rf_instance?: ReturnType<typeof useReactFlow>;
+  on_node_action: (action: NodeAction) => void;
+  on_edge_action: (edge: EdgeAction) => void;
+  set_progress: (progress: ProgressState) => void;
+  auto_progress: () => void;
+  reactflowRef: HTMLDivElement | null;
+  clear_all: () => void;
+}
+
+const _fill_node_frontend = (
+  node: NodeType,
+  fnrf_instance?: FuncNodesReactFlowZustandInterface
+) => {
+  const frontend = node.frontend || {};
+  if (!frontend.pos) {
+    if (
+      !fnrf_instance ||
+      !fnrf_instance.rf_instance ||
+      fnrf_instance.reactflowRef === null
+    ) {
+      frontend.pos = [0, 0];
+    } else {
+      const ref = fnrf_instance.reactflowRef;
+      const rect = ref.getBoundingClientRect(); // Step 2: Get bounding rectangle
+      const centerX = rect.left + rect.width / 2; // Calculate center X
+      const centerY = rect.top + rect.height / 2; // Calculate center Y
+      const calcpos = fnrf_instance.rf_instance.screenToFlowPosition({
+        x: centerX,
+        y: centerY,
+      });
+      frontend.pos = [calcpos.x, calcpos.y];
+    }
+  }
+  if (!frontend.size) {
+    frontend.size = [200, 100];
+  }
+  if (!frontend.collapsed) {
+    frontend.collapsed = false;
+  }
+  node.frontend = frontend;
+};
+
+const assert_react_flow_io = (
+  io: PartialIOType,
+  fnrf_instance?: FuncNodesReactFlowZustandInterface
+): PartialIOType => {
+  if (io.value === "<NoValue>") {
+    io.value = undefined;
+  }
+  if (io.fullvalue === "<NoValue>") {
+    io.fullvalue = undefined;
+  }
+
+  if (io.try_get_full_value === undefined) {
+    io.try_get_full_value = () => {
+      if (!fnrf_instance) {
+        return;
+      }
+      if (io.node === undefined || io.id === undefined) {
+        return;
+      }
+      fnrf_instance.worker?.get_io_full_value({ nid: io.node, ioid: io.id });
+    };
+  }
+
+  return io;
+};
+const assert_reactflow_node = (
+  node: NodeType,
+  store: NodeStore,
+  fnrf_instance?: FuncNodesReactFlowZustandInterface
+): NodeType & RFNode => {
+  _fill_node_frontend(node, fnrf_instance);
+
+  if (node.id === undefined) {
+    throw new Error("Node must have an id");
+  }
+
+  for (const io in node.io) {
+    node.io[io].node = node.id;
+    assert_react_flow_io(node.io[io], fnrf_instance);
+  }
+
+  const extendedNode: NodeType & RFNode = {
+    position: {
+      x: node.frontend.pos[0],
+      y: node.frontend.pos[1],
+    },
+    data: {
+      UseNodeStore: store,
+    },
+    type: "default",
+    ...node,
+  };
+
+  return extendedNode;
+};
+
+const FuncNodesReactFlowZustand = (): FuncNodesReactFlowZustandInterface => {
+  /*
+  function that should be called when the remote node, e.g. in the python worker is performing an action
+  */
+  const on_node_action = (action: NodeAction) => {
+    const rfstate = rfstore.getState();
+
+    switch (action.type) {
+      case "add":
+        if (action.from_remote) {
+          let store = ns.get_node(action.node.id, false);
+
+          if (!store) {
+            try {
+              store = createNodeStore(action.node);
+              ns.nodesstates.set(action.node.id, store);
+            } catch (e) {
+              return;
+            }
+          }
+
+          const new_ndoes = [
+            ...rfstate.nodes,
+            assert_reactflow_node(action.node, store, iterf),
+          ];
+          rfstore.setState({ nodes: new_ndoes });
+        }
+        break;
+      case "update":
+        // some action reset the error, so far trigger does, so errors should remove the in_trigger flag
+        if (action.node.in_trigger) {
+          action.node.error = undefined;
+        }
+        if (action.from_remote) {
+          const store = ns.get_node(action.id) as NodeStore;
+
+          if (action.node.io) {
+            for (const io in action.node.io) {
+              const ioobj = action.node.io[io] as PartialIOType;
+              // check if value in io, undefined is a valid value
+              if (ioobj.hasOwnProperty("value")) {
+                if (ioobj.value === undefined) {
+                  ioobj.value = null;
+                } else if (ioobj.value === "<NoValue>") {
+                  ioobj.value = undefined;
+                }
+              }
+            }
+          }
+
+          const state = store.getState();
+          const { new_obj, change } = deep_merge(state, action.node);
+
+          if (change) {
+            if (action.node.io) {
+              for (const io in action.node.io) {
+                // if fullvalue is in the update data, set to fullvalue otherwise set to undefined
+                new_obj.io[io].fullvalue = action.node.io[io].fullvalue;
+              }
+            }
+
+            assert_reactflow_node(new_obj, store, iterf);
+
+            store.setState(new_obj);
+          }
+        } else {
+          if (iterf.worker) {
+            iterf.worker.update_node(action);
+          }
+        }
+        break;
+      case "delete":
+        if (action.from_remote) {
+          rfstore.getState().onNodesChange([
+            {
+              type: "remove",
+              id: action.id,
+            },
+          ]);
+        } else {
+          iterf.worker?.remove_node(action.id);
+        }
+        break;
+      case "error":
+        console.error("Error", action);
+        on_node_action({
+          type: "update",
+          id: action.id,
+          node: {
+            in_trigger: false,
+            error: action.error,
+          },
+          from_remote: true,
+        });
+        break;
+
+      case "trigger":
+        if (action.from_remote) {
+          on_node_action({
+            type: "update",
+            id: action.id,
+            node: {
+              in_trigger: true,
+              error: undefined,
+            },
+            from_remote: true,
+          });
+        } else {
+          iterf.worker?.trigger_node(action.id);
+        }
+        break;
+      default:
+        console.error("Unknown node action", action);
+    }
+  };
+
+  const on_edge_action = (action: EdgeAction) => {
+    const rfstate = rfstore.getState();
+
+    switch (action.type) {
+      case "add":
+        if (action.from_remote) {
+          const edges = rfstate.edges;
+          const new_edge_id = generate_edge_id(action);
+
+          //cehck if edge already exists including reversed
+          if (edges.some((e) => e.id === new_edge_id)) {
+            return;
+          }
+          const new_edge: RFEdge = {
+            id: new_edge_id,
+            source: action.src_nid,
+            target: action.trg_nid,
+            sourceHandle: action.src_ioid,
+            targetHandle: action.trg_ioid,
+            className: "funcnodes-edge animated",
+          };
+
+          rfstore.setState({ edges: [...edges, new_edge] });
+        } else {
+        }
+        break;
+
+      case "delete":
+        if (action.from_remote) {
+          const edges = rfstate.edges;
+          const del_edge_id = generate_edge_id(action);
+          const new_edges = edges.filter((edge) => edge.id !== del_edge_id);
+          rfstore.setState({ edges: new_edges });
+        } else {
+        }
+        break;
+      default:
+        console.error("Unknown edge action", action);
+    }
+  };
+  /*
+  on_node_cahnge is called by react flow when a note change event is fired
+  should update the local state if something changed
+  */
+  const on_node_change = (nodechange: NodeChange[]) => {
+    for (const change of nodechange) {
+      switch (change.type) {
+        case "position":
+          if (change.position) {
+            on_node_action({
+              type: "update",
+              id: change.id,
+              node: {
+                frontend: { pos: [change.position.x, change.position.y] },
+              },
+              from_remote: false,
+            });
+          }
+          break;
+        case "dimensions":
+          if (change.dimensions) {
+            on_node_action({
+              type: "update",
+              id: change.id,
+              node: {
+                frontend: {
+                  size: [change.dimensions.width, change.dimensions.height],
+                },
+              },
+              from_remote: false,
+            });
+          }
+          break;
+      }
+    }
+  };
+
+  const on_edge_change = (edgechange: EdgeChange[]) => {};
+
+  const on_connect = (connection: RFConnection) => {
+    if (
+      connection.source === null ||
+      connection.target === null ||
+      connection.sourceHandle === null ||
+      connection.targetHandle === null ||
+      !iterf.worker
+    ) {
+      return;
+    }
+    iterf.worker.add_edge({
+      src_nid: connection.source,
+      src_ioid: connection.sourceHandle,
+      trg_nid: connection.target,
+      trg_ioid: connection.targetHandle,
+      replace: true,
+    });
+  };
+
+  const rfstore = reactflowstore({
+    on_node_change,
+    on_edge_change,
+    on_connect,
+  });
+  const ns = NodeSpaceZustand({});
+  const lib = LibZustand();
+
+  const clear_all = () => {
+    iterf.worker?.disconnect();
+    iterf.worker = undefined;
+    iterf.workermanager?.setWorker(undefined);
+    iterf.lib.libstate.getState().set({ shelves: [] });
+    iterf.nodespace.nodesstates.clear();
+    iterf.useReactFlowStore.setState({ nodes: [], edges: [] });
+    iterf.auto_progress();
+  };
+  const iterf: FuncNodesReactFlowZustandInterface = {
+    lib: lib,
+    workermanager: undefined,
+    workers: create<WorkersState>((set, get) => ({})),
+    render_options: create<RenderOptions>((set, get) => ({})),
+    progress_state: create<ProgressState>((set, get) => ({
+      message: "please select worker",
+      status: "info",
+      progress: 0,
+      blocking: false,
+    })),
+    update_render_options: (options: RenderOptions) => {
+      const current = iterf.render_options.getState();
+      const { new_obj, change } = deep_merge(current, options);
+      if (change) {
+        iterf.render_options.setState(new_obj);
+      }
+    },
+    worker: undefined,
+    nodespace: ns,
+    useReactFlowStore: rfstore,
+    on_node_action: on_node_action,
+    on_edge_action: on_edge_action,
+    reactflowRef: null,
+    clear_all: clear_all,
+    set_progress: (progress: ProgressState) => {
+      if (progress.message === "") {
+        return iterf.auto_progress();
+      }
+
+      const prev_state = iterf.progress_state.getState();
+      const { new_obj, change } = deep_merge<ProgressState>(
+        prev_state,
+        progress
+      );
+      if (change) {
+        iterf.progress_state.setState(new_obj);
+      }
+    },
+    auto_progress: () => {
+      if (iterf.worker === undefined) {
+        return iterf.set_progress({
+          progress: 0,
+          message: "please select worker",
+          status: "error",
+          blocking: false,
+        });
+      }
+      if (!iterf.worker.is_open) {
+        return iterf.set_progress({
+          progress: 0,
+          message: "connecting to worker",
+          status: "info",
+          blocking: true,
+        });
+      }
+      iterf.set_progress({
+        progress: 1,
+        message: "running",
+        status: "info",
+        blocking: false,
+      });
+    },
+  };
+  return iterf;
+};
+
+export default FuncNodesReactFlowZustand;
+export { LibZustand, NodeSpaceZustand };
+export type { FuncNodesReactFlowZustandInterface, WorkersState };

package/src/state/index.ts

@@ -0,0 +1,139 @@
+import LibZustand, { LibZustandInterface } from "./lib";
+import NodeSpaceZustand, { NodeSpaceZustandInterface } from "./nodespace";
+import { FuncNodesReactFlowZustandInterface, WorkersState } from "./fnrfzst";
+import FuncNodesReactFlowZustand from "./fnrfzst";
+export default FuncNodesReactFlowZustand;
+export { LibZustand, NodeSpaceZustand };
+export type { FuncNodesReactFlowZustandInterface, WorkersState };
+
+// Type alias for DeepPartial. It makes all properties of T optional and recursive.
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
+
+/**
+ * Checks if the given item is a plain object.
+ * @param item The item to check.
+ * @returns true if the item is a plain object, false otherwise.
+ */
+function isPlainObject(item: any): boolean {
+  return Object.prototype.toString.call(item) === "[object Object]";
+}
+
+function deep_compare_objects(a: any, b: any): boolean {
+  // Check for strict equality first
+  if (a === b) return true;
+
+  // If either is null or not an object, they're not equal (strict equality would have caught `a === b` if both were null)
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  )
+    return false;
+
+  // If they're not the same type of object, they're not equal
+  if (a.constructor !== b.constructor) return false;
+
+  if (a.constructor === Object || a.constructor === Array) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+
+    // If their property lengths are different, they're different objects
+    if (keysA.length !== keysB.length) return false;
+
+    // Check each key in 'a' to ensure it exists in 'b' and is equal; recurse if value is an object
+    for (const key of keysA) {
+      if (!keysB.includes(key)) return false;
+      if (!deep_compare_objects(a[key], b[key])) return false;
+    }
+  }
+
+  // Dates comparison
+  if (a instanceof Date && b instanceof Date)
+    return a.getTime() === b.getTime();
+
+  // If we've made it this far, objects must be considered equal
+  return true;
+}
+
+/**
+ *
+ * function to deeply merge two objects of type T.
+ *
+ * @param {T} target - The target object to be merged.
+ * @param {DeepPartial<T>} source - The source object to merge into the target. All properties of this object are optional.
+ *
+ * @returns {T} An object containing the merged object (new_obj) and a boolean indicating if there was a change (change).
+ */
+const deep_merge = <T extends {}>(
+  target: T,
+  source: DeepPartial<T>
+): {
+  new_obj: T;
+  change: boolean;
+} => {
+  let change = false;
+  if (!isPlainObject(target)) {
+    throw new Error("Target must be a plain object");
+  }
+  if (!isPlainObject(source)) {
+    throw new Error("Source must be a plain object");
+  }
+  const new_obj: T = { ...target };
+
+  Object.keys(source).forEach((key) => {
+    // @ts-ignore: Type 'string' cannot be used to index type 'T
+    const sourceValue = source[key];
+    // @ts-ignore: Type 'string' cannot be used to index type 'T
+    const targetValue = target[key];
+
+    if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
+      // If both the target and source values are plain objects, merge them
+      const { new_obj: mergedObj, change: didChange } = deep_merge(
+        targetValue,
+        sourceValue
+      );
+      if (didChange) {
+        change = true;
+        // @ts-ignore: Type 'string' cannot be used to index type 'T
+        new_obj[key] = mergedObj;
+      }
+    } else if (!deep_compare_objects(targetValue, sourceValue)) {
+      change = true;
+      // @ts-ignore: Type 'string' cannot be used to index type 'T
+      new_obj[key] = sourceValue;
+    }
+  });
+
+  return { new_obj, change };
+
+  // for (const key in source) {
+  //   // @ts-ignore: Type 'string' cannot be used to index type 'T
+  //   if (typeof source[key] === "object" && target[key]) {
+  //     const { new_obj: new_obj2, change: change2 } = deep_merge(
+  //       // @ts-ignore: Type 'string' cannot be used to index type 'T
+  //       target[key],
+  //       source[key]
+  //     );
+  //     if (change2) {
+  //       change = true;
+  //       // @ts-ignore: Type 'string' cannot be used to index type 'T
+  //       new_obj[key] = new_obj2;
+  //     }
+  //   } else {
+  //     // @ts-ignore: Type 'string' cannot be used to index type 'T'
+  //     if (target[key] !== source[key]) {
+  //       change = true;
+  //     }
+  //     // @ts-ignore: Type 'string' cannot be used to index type 'T'
+  //     new_obj[key] = source[key];
+  //   }
+  // }
+  // return { new_obj, change };
+};
+export { deep_merge, deep_compare_objects };
+export type { DeepPartial };

package/src/state/lib.ts

@@ -0,0 +1,26 @@
+import { useStore, create, UseBoundStore, StoreApi } from "zustand";
+
+interface LibState {
+  state: LibType;
+  set: (state: LibType) => void;
+  get: () => LibType;
+}
+
+interface LibZustandInterface {
+  libstate: UseBoundStore<StoreApi<LibState>>;
+}
+
+const LibZustand = (): LibZustandInterface => {
+  return {
+    libstate: create<LibState>((set, get) => ({
+      state: {
+        shelves: [],
+      },
+      set: (state: LibType) => set({ state: state }),
+      get: () => get().state,
+    })),
+  };
+};
+
+export default LibZustand;
+export type { LibZustandInterface, LibState };