@kiberon-labs/behave-graph-flow 1.0.0

package/src/hooks/useGraphRunner.ts

@@ -0,0 +1,104 @@
+import { Engine, readGraphFromJSON } from '@kiberon-labs/behave-graph';
+import type {
+  GraphJSON,
+  GraphNodes,
+  ILifecycleEventEmitter,
+  IRegistry
+} from '@kiberon-labs/behave-graph';
+import { useCallback, useEffect, useState } from 'react';
+
+/** Runs the behavior graph by building the execution
+ * engine and triggering start on the lifecycle event emitter.
+ */
+export const useGraphRunner = ({
+  graphJson,
+  autoRun = false,
+  registry
+}: {
+  graphJson: GraphJSON | undefined;
+  autoRun?: boolean;
+  registry: IRegistry;
+}) => {
+  const [engine, setEngine] = useState<Engine>();
+
+  const [run, setRun] = useState(autoRun);
+
+  const play = useCallback(() => {
+    setRun(true);
+  }, []);
+
+  const pause = useCallback(() => {
+    setRun(false);
+  }, []);
+
+  const togglePlay = useCallback(() => {
+    setRun((existing) => !existing);
+  }, []);
+
+  useEffect(() => {
+    if (!graphJson || !registry.values || !run || !registry.dependencies)
+      return;
+
+    let graphNodes: GraphNodes;
+    try {
+      graphNodes = readGraphFromJSON({
+        graphJson,
+        registry
+      }).nodes;
+    } catch (e) {
+      console.error(e);
+      return;
+    }
+    const engine = new Engine(graphNodes);
+
+    setEngine(engine);
+
+    return () => {
+      engine.dispose();
+      setEngine(undefined);
+    };
+  }, [graphJson, registry.values, registry.nodes, run, registry.dependencies]);
+
+  useEffect(() => {
+    if (!engine || !run) return;
+
+    engine.executeAllSync();
+
+    let timeout: number;
+
+    const eventEmitter = registry.dependencies
+      ?.ILifecycleEventEmitter as ILifecycleEventEmitter;
+
+    const onTick = async () => {
+      eventEmitter.tickEvent.emit();
+
+      // eslint-disable-next-line no-await-in-loop
+      await engine.executeAllAsync(500);
+
+      timeout = window.setTimeout(onTick, 50);
+    };
+
+    (async () => {
+      if (eventEmitter.startEvent.listenerCount > 0) {
+        eventEmitter.startEvent.emit();
+
+        await engine.executeAllAsync(5);
+      } else {
+        console.log('has no listener count');
+      }
+      onTick();
+    })();
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [engine, registry.dependencies?.ILifecycleEventEmitter, run]);
+
+  return {
+    engine,
+    playing: run,
+    play,
+    togglePlay,
+    pause
+  };
+};

package/src/hooks/useMergeMap.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+export function useMergeMap<T, TMap extends Record<string, T>>(
+  mapA: TMap,
+  mapB: TMap
+): TMap {
+  const [result, setResult] = useState<TMap>(() => ({ ...mapA, ...mapB }));
+
+  useEffect(() => {
+    setResult({ ...mapA, ...mapB });
+  }, [mapA, mapB]);
+
+  return result;
+}

package/src/hooks/useNodeSpecJson.ts

@@ -0,0 +1,20 @@
+import {
+  type IRegistry,
+  type NodeSpecJSON,
+  writeNodeSpecsToJSON
+} from '@kiberon-labs/behave-graph';
+import { useEffect, useState } from 'react';
+
+export const useNodeSpecJson = (registry: IRegistry) => {
+  const [specJson, setSpecJson] = useState<NodeSpecJSON[]>();
+
+  useEffect(() => {
+    if (!registry.nodes || !registry.values || !registry.dependencies) {
+      setSpecJson(undefined);
+      return;
+    }
+    setSpecJson(writeNodeSpecsToJSON(registry));
+  }, [registry.nodes, registry.values, registry.dependencies]);
+
+  return specJson;
+};

package/src/hooks/useOnPressKey.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useOnPressKey = (
+  key: string,
+  callback: (e: KeyboardEvent) => void
+) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === key) {
+        callback(e);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [key, callback]);
+};

package/src/hooks/useQueriableDefinitions.ts

@@ -0,0 +1,22 @@
+import type { IQueryableRegistry } from '@kiberon-labs/behave-graph';
+import { useMemo } from 'react';
+
+export const toQueryableDefinitions = <T>(definitionsMap: {
+  [id: string]: T;
+}): IQueryableRegistry<T> => ({
+  get: (id: string) => definitionsMap[id],
+  getAll: () => Object.values(definitionsMap),
+  getAllNames: () => Object.keys(definitionsMap),
+  contains: (id: string) => definitionsMap[id] !== undefined
+});
+
+export const useQueryableDefinitions = <T>(definitionsMap: {
+  [id: string]: T;
+}): IQueryableRegistry<T> => {
+  const queriableDefinitions = useMemo(
+    () => toQueryableDefinitions(definitionsMap),
+    [definitionsMap]
+  );
+
+  return queriableDefinitions;
+};

package/src/index.ts

@@ -0,0 +1,37 @@
+export * from './components/modals/ClearModal.js';
+export * from './components/modals/HelpModal.js';
+export * from './components/modals/LoadModal.js';
+export * from './components/modals/Modal.js';
+export * from './components/modals/SaveModal.js';
+export * from './components/Controls.js';
+
+export * from './components/AutoSizeInput.js';
+export * from './components/Controls.js';
+export * from './components/InputSocket.js';
+export * from './components/Node.js';
+export * from './components/Flow.js';
+export * from './components/NodeContainer.js';
+export * from './components/NodePicker.js';
+export * from './components/OutputSocket.js';
+
+export * from './hooks/useChangeNodeData.js';
+export * from './hooks/useOnPressKey.js';
+export * from './hooks/useFlowHandlers.js';
+export * from './hooks/useGraphRunner.js';
+export * from './hooks/useBehaveGraphFlow.js';
+export * from './hooks/useNodeSpecJson.js';
+export * from './hooks/useCustomNodeTypes.js';
+export * from './hooks/useMergeMap.js';
+
+export * from './transformers/behaveToFlow.js';
+export * from './transformers/flowToBehave.js';
+
+export * from './util/autoLayout.js';
+export * from './util/calculateNewEdge.js';
+export * from './util/colors.js';
+export * from './util/getPickerFilters.js';
+export * from './util/getSocketsByNodeTypeAndHandleType.js';
+export * from './util/hasPositionMetaData.js';
+export * from './util/isHandleConnected.js';
+export * from './util/isValidConnection.js';
+export * from './util/sleep.js';

package/src/styles.css

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 2rem;
+  position: relative;
+  padding: 0 0.5rem;
+}

package/src/transformers/behaveToFlow.ts

@@ -0,0 +1,57 @@
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+import type { Edge, Node } from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
+
+export const behaveToFlow = (graph: GraphJSON): [Node[], Edge[]] => {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  graph.nodes?.forEach((nodeJSON) => {
+    const node: Node = {
+      id: nodeJSON.id,
+      type: nodeJSON.type,
+      position: {
+        x: nodeJSON.metadata?.positionX
+          ? Number(nodeJSON.metadata?.positionX)
+          : 0,
+        y: nodeJSON.metadata?.positionY
+          ? Number(nodeJSON.metadata?.positionY)
+          : 0
+      },
+      data: {} as { [key: string]: any }
+    };
+
+    nodes.push(node);
+
+    if (nodeJSON.parameters) {
+      for (const [inputKey, input] of Object.entries(nodeJSON.parameters)) {
+        if ('link' in input && input.link !== undefined) {
+          edges.push({
+            id: uuidv4(),
+            source: input.link.nodeId,
+            sourceHandle: input.link.socket,
+            target: nodeJSON.id,
+            targetHandle: inputKey
+          });
+        }
+        if ('value' in input) {
+          node.data[inputKey] = input.value;
+        }
+      }
+    }
+
+    if (nodeJSON.flows) {
+      for (const [inputKey, link] of Object.entries(nodeJSON.flows)) {
+        edges.push({
+          id: uuidv4(),
+          source: nodeJSON.id,
+          sourceHandle: inputKey,
+          target: link.nodeId,
+          targetHandle: link.socket
+        });
+      }
+    }
+  });
+
+  return [nodes, edges];
+};

package/src/transformers/flowToBehave.ts

@@ -0,0 +1,93 @@
+import type {
+  GraphJSON,
+  NodeJSON,
+  NodeSpecJSON
+} from '@kiberon-labs/behave-graph';
+import type { Edge, Node } from 'reactflow';
+
+const isNullish = (value: any): value is null | undefined =>
+  value === undefined || value === null;
+
+export const flowToBehave = (
+  nodes: Node[],
+  edges: Edge[],
+  nodeSpecJSON: NodeSpecJSON[]
+): GraphJSON => {
+  const graph: GraphJSON = { nodes: [], variables: [], customEvents: [] };
+
+  nodes.forEach((node) => {
+    if (node.type === undefined) return;
+
+    const nodeSpec = nodeSpecJSON.find(
+      (nodeSpec) => nodeSpec.type === node.type
+    );
+
+    if (nodeSpec === undefined) return;
+
+    const behaveNode: NodeJSON = {
+      id: node.id,
+      type: node.type,
+      metadata: {
+        positionX: String(node.position.x),
+        positionY: String(node.position.y)
+      }
+    };
+
+    Object.entries(node.data).forEach(([key, value]) => {
+      if (behaveNode.parameters === undefined) {
+        behaveNode.parameters = {};
+      }
+      behaveNode.parameters[key] = { value: value as string };
+    });
+
+    edges
+      .filter((edge) => edge.target === node.id)
+      .forEach((edge) => {
+        const inputSpec = nodeSpec.inputs.find(
+          (input) => input.name === edge.targetHandle
+        );
+        if (inputSpec && inputSpec.valueType === 'flow') {
+          // skip flows
+          return;
+        }
+        if (behaveNode.parameters === undefined) {
+          behaveNode.parameters = {};
+        }
+        if (isNullish(edge.targetHandle)) return;
+        if (isNullish(edge.sourceHandle)) return;
+
+        // TODO: some of these are flow outputs, and should be saved differently.  -Ben, Oct 11, 2022
+        behaveNode.parameters[edge.targetHandle] = {
+          link: { nodeId: edge.source, socket: edge.sourceHandle }
+        };
+      });
+
+    edges
+      .filter((edge) => edge.source === node.id)
+      .forEach((edge) => {
+        const outputSpec = nodeSpec.outputs.find(
+          (output) => output.name === edge.sourceHandle
+        );
+        if (outputSpec && outputSpec.valueType !== 'flow') {
+          return;
+        }
+        if (behaveNode.flows === undefined) {
+          behaveNode.flows = {};
+        }
+        if (isNullish(edge.targetHandle)) return;
+        if (isNullish(edge.sourceHandle)) return;
+
+        // TODO: some of these are flow outputs, and should be saved differently.  -Ben, Oct 11, 2022
+        behaveNode.flows[edge.sourceHandle] = {
+          nodeId: edge.target,
+          socket: edge.targetHandle
+        };
+      });
+
+    // TODO filter out any orphan nodes at this point, to avoid errors further down inside behave-graph
+
+    graph.nodes?.push(behaveNode);
+  });
+
+  return graph;
+};

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/util/autoLayout.ts

@@ -0,0 +1,9 @@
+import type { Edge, Node } from 'reactflow';
+
+export const autoLayout = (nodes: Node[], _edges: Edge[]) => {
+  let x = 0;
+  nodes.forEach((node) => {
+    node.position.x = x;
+    x += 200;
+  });
+};

package/src/util/calculateNewEdge.ts

@@ -0,0 +1,49 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import type { Node, OnConnectStartParams } from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
+
+import { getSocketsByNodeTypeAndHandleType } from './getSocketsByNodeTypeAndHandleType.js';
+
+export const calculateNewEdge = (
+  originNode: Node,
+  destinationNodeType: string,
+  destinationNodeId: string,
+  connection: OnConnectStartParams,
+  specJSON: NodeSpecJSON[]
+) => {
+  const sockets = getSocketsByNodeTypeAndHandleType(
+    specJSON,
+    originNode.type,
+    connection.handleType
+  );
+  const originSocket = sockets?.find(
+    (socket) => socket.name === connection.handleId
+  );
+
+  const newSockets = getSocketsByNodeTypeAndHandleType(
+    specJSON,
+    destinationNodeType,
+    connection.handleType === 'source' ? 'target' : 'source'
+  );
+  const newSocket = newSockets?.find(
+    (socket) => socket.valueType === originSocket?.valueType
+  );
+
+  if (connection.handleType === 'source') {
+    return {
+      id: uuidv4(),
+      source: connection.nodeId ?? '',
+      sourceHandle: connection.handleId,
+      target: destinationNodeId,
+      targetHandle: newSocket?.name
+    };
+  }
+
+  return {
+    id: uuidv4(),
+    target: connection.nodeId ?? '',
+    targetHandle: connection.handleId,
+    source: destinationNodeId,
+    sourceHandle: newSocket?.name
+  };
+};

package/src/util/colors.ts

@@ -0,0 +1,41 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+
+export type color =
+  | 'red'
+  | 'green'
+  | 'lime'
+  | 'purple'
+  | 'blue'
+  | 'gray'
+  | 'white';
+
+export const colors: Record<color, [string, string, string]> = {
+  red: ['bg-orange-700', 'border-orange-700', 'text-white'],
+  green: ['bg-green-600', 'border-green-600', 'text-white'],
+  lime: ['bg-lime-500', 'border-lime-500', 'text-gray-900'],
+  purple: ['bg-purple-500', 'border-purple-500', 'text-white'],
+  blue: ['bg-cyan-600', 'border-cyan-600', 'text-white'],
+  gray: ['bg-gray-500', 'border-gray-500', 'text-white'],
+  white: ['bg-white', 'border-white', 'text-gray-700']
+};
+
+export const valueTypeColorMap: Record<string, string> = {
+  flow: 'white',
+  number: 'green',
+  float: 'green',
+  integer: 'lime',
+  boolean: 'red',
+  string: 'purple'
+};
+
+export const categoryColorMap: Record<NodeSpecJSON['category'], color> = {
+  Event: 'red',
+  Logic: 'green',
+  Variable: 'purple',
+  Query: 'purple',
+  Action: 'blue',
+  Flow: 'gray',
+  Effect: 'lime',
+  Time: 'gray',
+  None: 'gray'
+};

package/src/util/getPickerFilters.ts

@@ -0,0 +1,32 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import type { Node, OnConnectStartParams } from 'reactflow';
+import type { NodePickerFilters } from '../components/NodePicker.js';
+import { getSocketsByNodeTypeAndHandleType } from './getSocketsByNodeTypeAndHandleType.js';
+
+export const getNodePickerFilters = (
+  nodes: Node[],
+  params: OnConnectStartParams | undefined,
+  specJSON: NodeSpecJSON[] | undefined
+): NodePickerFilters | undefined => {
+  if (params === undefined) return;
+
+  const originNode = nodes.find((node) => node.id === params.nodeId);
+  if (originNode === undefined) return;
+
+  const sockets = specJSON
+    ? getSocketsByNodeTypeAndHandleType(
+        specJSON,
+        originNode.type,
+        params.handleType
+      )
+    : undefined;
+
+  const socket = sockets?.find((socket) => socket.name === params.handleId);
+
+  if (socket === undefined) return;
+
+  return {
+    handleType: params.handleType === 'source' ? 'target' : 'source',
+    valueType: socket.valueType
+  };
+};

package/src/util/getSocketsByNodeTypeAndHandleType.ts

@@ -0,0 +1,11 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+
+export const getSocketsByNodeTypeAndHandleType = (
+  nodes: NodeSpecJSON[],
+  nodeType: string | undefined,
+  handleType: 'source' | 'target' | null
+) => {
+  const nodeSpec = nodes.find((node) => node.type === nodeType);
+  if (nodeSpec === undefined) return;
+  return handleType === 'source' ? nodeSpec.outputs : nodeSpec.inputs;
+};

package/src/util/hasPositionMetaData.ts

@@ -0,0 +1,10 @@
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+
+export const hasPositionMetaData = (graph: GraphJSON): boolean => {
+  if (graph.nodes === undefined) return false;
+  return graph.nodes.some(
+    (node) =>
+      node.metadata?.positionX !== undefined ||
+      node.metadata?.positionY !== undefined
+  );
+};

package/src/util/isHandleConnected.ts

@@ -0,0 +1,12 @@
+import type { Edge } from 'reactflow';
+
+export const isHandleConnected = (
+  edges: Edge[],
+  nodeId: string,
+  handleId: string,
+  type: 'source' | 'target'
+) => {
+  return edges.some(
+    (edge) => edge[type] === nodeId && edge[`${type}Handle`] === handleId
+  );
+};

package/src/util/isValidConnection.ts

@@ -0,0 +1,51 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import type { Connection, ReactFlowInstance } from 'reactflow';
+
+import { getSocketsByNodeTypeAndHandleType } from './getSocketsByNodeTypeAndHandleType.js';
+import { isHandleConnected } from './isHandleConnected.js';
+
+export const isValidConnection = (
+  connection: Connection,
+  instance: ReactFlowInstance,
+  specJSON: NodeSpecJSON[]
+) => {
+  if (connection.source === null || connection.target === null) return false;
+
+  const sourceNode = instance.getNode(connection.source);
+  const targetNode = instance.getNode(connection.target);
+  const edges = instance.getEdges();
+
+  if (sourceNode === undefined || targetNode === undefined) return false;
+
+  const sourceSockets = getSocketsByNodeTypeAndHandleType(
+    specJSON,
+    sourceNode.type,
+    'source'
+  );
+
+  const sourceSocket = sourceSockets?.find(
+    (socket) => socket.name === connection.sourceHandle
+  );
+
+  const targetSockets = getSocketsByNodeTypeAndHandleType(
+    specJSON,
+    targetNode.type,
+    'target'
+  );
+
+  const targetSocket = targetSockets?.find(
+    (socket) => socket.name === connection.targetHandle
+  );
+
+  if (sourceSocket === undefined || targetSocket === undefined) return false;
+
+  // only flow sockets can have two inputs
+  if (
+    targetSocket.valueType !== 'flow' &&
+    isHandleConnected(edges, targetNode.id, targetSocket.name, 'target')
+  ) {
+    return false;
+  }
+
+  return sourceSocket.valueType === targetSocket.valueType;
+};

package/src/util/sleep.ts

@@ -0,0 +1,6 @@
+/* eslint-disable no-promise-executor-return */
+export function sleep(durationInSeconds: number) {
+  return new Promise((resolve) =>
+    setTimeout(resolve, Math.round(durationInSeconds * 1000))
+  );
+}

package/tailwind.config.ts

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './public/index.html',
+    './src/**/*.{js,ts,jsx,tsx,css}',
+    '../../packages/flow/dist/**/*.{js,ts,jsx,tsx,css}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: [
+    {
+      tailwindcss: {}
+    },
+    {
+      autoprefixer: {}
+    }
+  ]
+};

package/tests/flowToBehave.test.ts

@@ -0,0 +1,25 @@
+import {
+  registerCoreProfile,
+  type GraphJSON,
+  writeNodeSpecsToJSON
+} from '@kiberon-labs/behave-graph';
+
+import rawFlowGraph from '../../../graphs/react-flow/graph.json';
+import { behaveToFlow } from '../src/transformers/behaveToFlow.js';
+import { flowToBehave } from '../src/transformers/flowToBehave.js';
+import { it, expect } from 'vitest';
+
+const flowGraph = rawFlowGraph as GraphJSON;
+
+const [nodes, edges] = behaveToFlow(flowGraph);
+
+it('transforms from flow to behave', () => {
+  const registry = registerCoreProfile({
+    nodes: {},
+    values: {},
+    dependencies: {}
+  });
+  const specJSON = writeNodeSpecsToJSON(registry);
+  const output = flowToBehave(nodes, edges, specJSON);
+  expect(output).toEqual(flowGraph);
+});

package/tests/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "../",
+        "lib": []
+    },
+    "include": [
+        "**/*.ts"
+    ]
+}