@linkdlab/funcnodes_react_flow 0.1.0 → 0.1.1

package/{src → module/src}/frontend/node/node.tsx

@@ -7,20 +7,21 @@ import React, {
   useState,
 } from "react";
 
-import { NodeStore } from "../../state/node";
+import { NodeStore, NodeType } from "../../states/node.t";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandIcon from "@mui/icons-material/Expand";
 import LanIcon from "@mui/icons-material/Lan";
 import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
 import "./node.scss";
-import { FuncNodesReactFlowZustandInterface } from "../../state/fnrfzst";
+import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
 import { FuncNodesContext } from "..";
 import get_rendertype from "../datarenderer";
 import CustomColorPicker, { HSLColorPicker } from "../utils/colorpicker";
 import { NodeInput, NodeOutput } from "./io";
 import { PreviewHandleDataRendererForIo } from "./io/handle_renderer";
 import CustomDialog from "../dialog";
+import { IOType } from "../../states/nodeio.t";
 interface NodeHeaderProps {
   node_data: NodeType;
 }

package/{src → module/src}/frontend/utils/table.tsx

@@ -9,6 +9,7 @@ import TableSortLabel from "@mui/material/TableSortLabel";
 import { useMemo, useState } from "react";
 
 import "./table.scss";
+import React from "react";
 
 interface TableData {
   columns: string[];
@@ -67,7 +68,7 @@ const transform_table_data = (data: TableData): TransFormedTableData => {
   };
 };
 
-function SortableTable({ tabledata }: { tabledata: TableData }) {
+const SortableTable = ({ tabledata }: { tabledata: TableData }) => {
   // State to manage the sorted column and direction
   const transformed_table_data: TransFormedTableData = useMemo(
     () => transform_table_data(tabledata),
@@ -154,6 +155,6 @@ function SortableTable({ tabledata }: { tabledata: TableData }) {
       </Table>
     </TableContainer>
   );
-}
+};
 
 export { SortableTable };

package/{src → module/src}/funcnodes/funcnodesworker.ts

@@ -1,11 +1,12 @@
 import { v4 as uuidv4 } from "uuid";
 import {
+  FullState,
   FuncNodesReactFlowZustandInterface,
-  NodeSpaceZustand,
-  deep_merge,
-} from "../state";
-import { NodeActionUpdate } from "../state/node"; // Import the missing type
-import { wait } from "@testing-library/user-event/dist/utils";
+  JSONMessage,
+  NodeSpaceEvent,
+} from "../states/fnrfzst.t";
+import { NodeActionUpdate, NodeType, PartialNodeType } from "../states/node.t"; // Import the missing type
+import { deep_merge } from "../utils";
 type CmdMessage = {
   type: string;
   cmd: string;

package/{src → module/src}/funcnodes/websocketworker.ts

@@ -1,5 +1,4 @@
 import FuncNodesWorker, { WorkerProps } from "./funcnodesworker";
-import { FuncNodesReactFlowZustandInterface } from "../state";
 
 interface WebSocketWorkerProps extends WorkerProps {
   url: string;

package/{src → module/src}/funcnodes/workermanager.ts

@@ -1,4 +1,8 @@
-import { FuncNodesReactFlowZustandInterface, WorkersState } from "../state";
+import {
+  FuncNodesReactFlowZustandInterface,
+  ProgressStateMessage,
+  WorkersState,
+} from "../states/fnrfzst.t";
 import FuncNodesWorker from "./funcnodesworker";
 import WebSocketWorker from "./websocketworker";
 
@@ -30,7 +34,7 @@ class WorkerManager {
       status: "info",
       blocking: true,
     });
-    console.log("Connecting to websocket");
+    console.log("Connecting to websocket:", this.wsuri);
     this.ws = new WebSocket(this.wsuri);
 
     this.ws.onopen = () => {

package/module/src/index.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import FuncnodesReactFlow from "./frontend";
+
+export default FuncnodesReactFlow;

package/{src/state/edge.ts → module/src/states/edge.t.ts}

@@ -17,19 +17,4 @@ interface EdgeActionDelete extends BaseEdgeAction {
 
 type EdgeAction = EdgeActionAdd | EdgeActionDelete;
 
-const generate_edge_id = ({
-  src_nid,
-  src_ioid,
-  trg_nid,
-  trg_ioid,
-}: {
-  src_nid: string;
-  src_ioid: string;
-  trg_nid: string;
-  trg_ioid: string;
-}) => {
-  return [`${src_nid}:${src_ioid}`, `${trg_nid}:${trg_ioid}`].sort().join("--");
-};
-
-export { generate_edge_id };
 export type { EdgeAction, EdgeActionAdd, EdgeActionDelete };

package/module/src/states/edge.ts

@@ -0,0 +1,15 @@
+const generate_edge_id = ({
+  src_nid,
+  src_ioid,
+  trg_nid,
+  trg_ioid,
+}: {
+  src_nid: string;
+  src_ioid: string;
+  trg_nid: string;
+  trg_ioid: string;
+}) => {
+  return [`${src_nid}:${src_ioid}`, `${trg_nid}:${trg_ioid}`].sort().join("--");
+};
+
+export { generate_edge_id };

package/module/src/states/fnrfzst.t.ts

@@ -0,0 +1,117 @@
+import { StoreApi, UseBoundStore } from "zustand";
+import { FuncNodesWorker, WorkerManager } from "../funcnodes";
+import { LibType, LibZustandInterface } from "./lib.t";
+import { NodeSpaceZustandInterface } from "./nodespace.t";
+import { NodeAction, NodeType } from "./node.t";
+import { RFStore } from "./reactflow.t";
+import { EdgeAction } from "./edge.t";
+import { useReactFlow } from "reactflow";
+
+interface RenderOptions {
+  typemap?: { [key: string]: string };
+  inputconverter?: { [key: string]: string };
+}
+interface NodeViewState {
+  pos: [number, number];
+  size: [number, number];
+  collapsed: boolean;
+}
+interface ViewState {
+  nodes: { [key: string]: NodeViewState };
+  renderoptions?: RenderOptions;
+}
+
+interface FullNodeSpaceJSON {
+  nodes: NodeType[];
+  edges: [string, string, string, string][];
+  prop: { [key: string]: any };
+  lib: LibType;
+}
+
+interface FullState {
+  backend: FullNodeSpaceJSON;
+  view: ViewState;
+  worker: { [key: string]: string[] };
+}
+
+interface ProgressState {
+  message: string;
+  status: string;
+  progress: number;
+  blocking: boolean;
+}
+
+interface ProgressStateMessage extends ProgressState {
+  type: "progress";
+}
+
+interface ResultMessage {
+  type: "result";
+  id?: string;
+  result: any;
+}
+
+interface ErrorMessage {
+  type: "error";
+  error: string;
+  tb: string[];
+  id?: string;
+}
+
+interface NodeSpaceEvent {
+  type: "nsevent";
+  event: string;
+  data: { [key: string]: any };
+}
+type JSONMessage =
+  | ProgressStateMessage
+  | ResultMessage
+  | ErrorMessage
+  | NodeSpaceEvent;
+
+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;
+}
+
+export type {
+  FuncNodesReactFlowZustandInterface,
+  WorkersState,
+  WorkerRepresentation,
+  JSONMessage,
+  FullState,
+  FullNodeSpaceJSON,
+  ViewState,
+  RenderOptions,
+  ProgressState,
+  ProgressStateMessage,
+  ResultMessage,
+  ErrorMessage,
+  NodeSpaceEvent,
+  NodeViewState,
+};

package/{src/state → module/src/states}/fnrfzst.ts

@@ -1,52 +1,28 @@
-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 LibZustand from "./lib";
+import NodeSpaceZustand from "./nodespace";
+import { createNodeStore } from "./node";
+import { PartialIOType } from "./nodeio.t";
+import reactflowstore 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";
+import { NodeAction, NodeStore } from "./node.t";
+import { deep_merge } from "../utils";
+import { generate_edge_id } from "./edge";
+import { EdgeAction } from "./edge.t";
+import { 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;
-}
+import type {
+  FuncNodesReactFlowZustandInterface,
+  ProgressState,
+  RenderOptions,
+  WorkersState,
+} from "./fnrfzst.t";
+import type { NodeType } from "./node.t";
 
 const _fill_node_frontend = (
   node: NodeType,
@@ -194,7 +170,7 @@ const FuncNodesReactFlowZustand = (): FuncNodesReactFlowZustandInterface => {
             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;
+                new_obj.io[io].fullvalue = action.node.io[io]?.fullvalue;
               }
             }
 
@@ -436,5 +412,4 @@ const FuncNodesReactFlowZustand = (): FuncNodesReactFlowZustandInterface => {
 };
 
 export default FuncNodesReactFlowZustand;
-export { LibZustand, NodeSpaceZustand };
-export type { FuncNodesReactFlowZustandInterface, WorkersState };
+export { LibZustand, NodeSpaceZustand, assert_reactflow_node };

package/module/src/states/index.ts

@@ -0,0 +1,7 @@
+import LibZustand from "./lib";
+import NodeSpaceZustand from "./nodespace";
+import { FuncNodesReactFlowZustandInterface, WorkersState } from "./fnrfzst.t";
+import FuncNodesReactFlowZustand from "./fnrfzst";
+export default FuncNodesReactFlowZustand;
+export { LibZustand, NodeSpaceZustand };
+export type { FuncNodesReactFlowZustandInterface, WorkersState };

package/module/src/states/lib.t.ts

@@ -0,0 +1,30 @@
+import { useStore, create, UseBoundStore, StoreApi } from "zustand";
+
+type LibNode = {
+  node_id: string;
+  description?: string;
+  node_name?: string;
+};
+
+type Shelf = {
+  name: string;
+  description?: string;
+  nodes: LibNode[];
+  subshelves: Shelf[];
+};
+
+type LibType = {
+  shelves: Shelf[];
+};
+
+interface LibState {
+  state: LibType;
+  set: (state: LibType) => void;
+  get: () => LibType;
+}
+
+interface LibZustandInterface {
+  libstate: UseBoundStore<StoreApi<LibState>>;
+}
+
+export type { LibZustandInterface, LibState, LibType, Shelf, LibNode };

package/module/src/states/lib.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+import { LibType, LibZustandInterface, LibState } from "./lib.t";
+
+const LibZustand = (): LibZustandInterface => {
+  return {
+    libstate: create<LibState>((set, get) => ({
+      state: {
+        shelves: [],
+      },
+      set: (state: LibType) => set({ state: state }),
+      get: () => get().state,
+    })),
+  };
+};
+
+export default LibZustand;

package/{src/state/node.ts → module/src/states/node.t.ts}

@@ -1,7 +1,7 @@
 import { useStore, create, UseBoundStore, StoreApi } from "zustand";
-import { DeepPartial, deep_merge } from "./";
-
-type PartialIOType = DeepPartial<IOType>;
+import { DeepPartial, deep_merge } from "../utils";
+import { IOType } from "./nodeio.t";
+import { DataRenderOptions } from "../types/rendering.t";
 
 /**
  * Interface for the NodeActionAdd.
@@ -64,48 +64,27 @@ type NodeAction =
 
 type NodeStore = UseBoundStore<StoreApi<NodeType>>;
 
-const dummy_node: NodeType = {
-  id: "dummy",
-  node_name: "dummy",
-  frontend: {
-    pos: [0, 0],
-    size: [200, 100],
-    collapsed: false,
-  },
-  io: {},
-  name: "dummy",
-  in_trigger: false,
-  io_order: [],
-};
-const assert_full_node = (node: PartialNodeType): NodeType => {
-  if (!node.id) {
-    throw new Error("Node must have an id");
-  }
-
-  const { new_obj } = deep_merge(dummy_node, node);
-  return new_obj;
-};
-
-const createNodeStore = (node: NodeType): NodeStore => {
-  // check if node is Object
+interface NodeRenderOptions {
+  data?: DataRenderOptions;
+}
 
-  if (node.io === undefined) {
-    node.io = {};
-  }
-  if (Array.isArray(node.io)) {
-    node.io_order = node.io.map((io) => io.id);
-    const new_io: { [key: string]: IOType } = {};
-    for (const io of node.io) {
-      new_io[io.id] = io;
-    }
-    node.io = new_io;
-  } else {
-    node.io_order = Object.keys(node.io);
-  }
+interface NodeType {
+  id: string;
+  node_name: string;
+  io: { [key: string]: IOType };
+  frontend: {
+    pos: [number, number];
+    size: [number, number];
+    collapsed: boolean;
+  };
+  name: string;
+  in_trigger: boolean;
+  error?: string;
+  render_options?: NodeRenderOptions;
+  io_order: string[];
+}
 
-  return create<NodeType>((set, get) => node);
-};
-export { createNodeStore, assert_full_node };
+type PartialNodeType = DeepPartial<NodeType>;
 
 export type {
   NodeStore,
@@ -114,5 +93,6 @@ export type {
   NodeActionDelete,
   NodeActionAdd,
   NodeActionError,
-  PartialIOType,
+  PartialNodeType,
+  NodeType,
 };

package/module/src/states/node.ts

@@ -0,0 +1,46 @@
+import { useStore, create, UseBoundStore, StoreApi } from "zustand";
+import { deep_merge } from "../utils";
+import { NodeType, PartialNodeType, NodeStore } from "./node.t";
+import { IOType } from "./nodeio.t";
+const dummy_node: NodeType = {
+  id: "dummy",
+  node_name: "dummy",
+  frontend: {
+    pos: [0, 0],
+    size: [200, 100],
+    collapsed: false,
+  },
+  io: {},
+  name: "dummy",
+  in_trigger: false,
+  io_order: [],
+};
+const assert_full_node = (node: PartialNodeType): NodeType => {
+  if (!node.id) {
+    throw new Error("Node must have an id");
+  }
+
+  const { new_obj } = deep_merge(dummy_node, node);
+  return new_obj;
+};
+
+const createNodeStore = (node: NodeType): NodeStore => {
+  // check if node is Object
+
+  if (node.io === undefined) {
+    node.io = {};
+  }
+  if (Array.isArray(node.io)) {
+    node.io_order = node.io.map((io) => io.id);
+    const new_io: { [key: string]: IOType } = {};
+    for (const io of node.io) {
+      new_io[io.id] = io;
+    }
+    node.io = new_io;
+  } else {
+    node.io_order = Object.keys(node.io);
+  }
+
+  return create<NodeType>((set, get) => node);
+};
+export { createNodeStore, assert_full_node };

package/{src/types/nodeio.d.ts → module/src/states/nodeio.t.ts}

@@ -1,3 +1,5 @@
+import { BaseRenderOptions } from "../types/rendering.t";
+import { DeepPartial } from "../utils";
 interface AllOf {
   allOf: SerializedType[];
 }
@@ -80,3 +82,22 @@ type InputRendererType = ({
   io,
   inputconverter,
 }: InputRendererProps) => JSX.Element;
+
+type PartialIOType = DeepPartial<IOType>;
+
+export type {
+  AllOf,
+  AnyOf,
+  ArrayOf,
+  DictOf,
+  EnumOf,
+  TypeOf,
+  SerializedType,
+  IORenderOptions,
+  IOValueOptions,
+  IOType,
+  OutputRendererType,
+  InputRendererProps,
+  InputRendererType,
+  PartialIOType,
+};

package/module/src/states/nodespace.t.ts

@@ -0,0 +1,57 @@
+import { NodeStore } from "./node.t";
+
+/**
+ * Interface for the NodeSpaceZustand state management.
+ * This interface is used to define the shape of the state and the actions that can be performed on it.
+ */
+interface NodeSpaceZustandInterface {
+  // A Map object that holds NodeStore objects. The key is a string (node id), and the value is a NodeStore.
+  nodesstates: Map<string, NodeStore>;
+
+  get_node: (nid: string, raise?: boolean) => NodeStore | undefined;
+
+  // A function to add a new node to the nodesstates Map. It takes a NodeType object as a parameter.
+  // add_node: ({
+  //   node,
+  //   from_remote,
+  // }: {
+  //   node: NodeType;
+  //   from_remote: boolean;
+  // }) => void;
+
+  // // A function to update an existing node in the nodesstates Map.
+  // // It takes a node id (string) and a PartialNodeType object (which contains the properties to be updated) as parameters.
+  // update_node: ({
+  //   nid,
+  //   node,
+  //   from_remote,
+  // }: {
+  //   nid: string;
+  //   node: PartialNodeType;
+  //   from_remote: boolean;
+  // }) => void;
+
+  // set_value: ({
+  //   node,
+  //   io,
+  //   value,
+  //   set_default,
+  // }: {
+  //   node: string;
+  //   io: string;
+  //   value: any;
+  //   set_default?: boolean | undefined;
+  // }) => void;
+}
+
+/**
+ * Interface for the NodeSpaceZustandProps.
+ * This interface is used to define the properties that can be passed to the NodeSpaceZustand component.
+ */
+interface NodeSpaceZustandProps {
+  // Optional callback function that is invoked when a node action occurs.
+  // The function takes a NodeAction object as a parameter.
+  // on_node_action?: (action: NodeAction) => void;
+}
+
+export type { NodeSpaceZustandProps, NodeSpaceZustandInterface };