@kiberon-labs/behave-graph-flow 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# Behave Flow
+
+This is a set of UI components for making a UI for the behave flow graphs

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kiberon-labs/behave-graph-flow",
+  "version": "1.0.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "source": "./src/index.ts",
+  "scripts": {
+    "dev": "tsdown --watch src",
+    "build": "tsdown",
+    "test": "vitest",
+    "check": "oxfmt --check",
+    "format": "oxfmt",
+    "lint": "oxlint",
+    "typecheck": "tsc"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/react": "^19.2.6",
+    "@types/uuid": "^8.3.4",
+    "autoprefixer": "^10.4.22",
+    "oxlint": "^1.29.0",
+    "react": "^19.2.0",
+    "tailwindcss": "^4.1.17",
+    "tsdown": "^0.16.5",
+    "vitest": "^4.0.10",
+    "oxfmt": "^0.14.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "classnames": "^2.3.1",
+    "downshift": "^6.1.7",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "reactflow": "^11.1.1",
+    "@kiberon-labs/behave-graph": "*"
+  }
+}

package/postcss.config.ts

@@ -0,0 +1,6 @@
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+
+export default {
+  plugins: [tailwindcss, autoprefixer]
+};

package/src/components/AutoSizeInput.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  type CSSProperties,
+  type HTMLProps,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+export type AutoSizeInputProps = HTMLProps<HTMLInputElement> & {
+  minWidth?: number;
+};
+
+const baseStyles: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  visibility: 'hidden',
+  height: 0,
+  width: 'auto',
+  whiteSpace: 'pre'
+};
+
+export const AutoSizeInput: React.FC<AutoSizeInputProps> = ({
+  minWidth = 30,
+  ...props
+}) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const measureRef = useRef<HTMLSpanElement | null>(null);
+  const [styles, setStyles] = useState<CSSProperties>({});
+
+  // grab the font size of the input on ref mount
+  const setRef = useCallback((input: HTMLInputElement | null) => {
+    if (input) {
+      const styles = window.getComputedStyle(input);
+      setStyles({
+        fontSize: styles.getPropertyValue('font-size'),
+        paddingLeft: styles.getPropertyValue('padding-left'),
+        paddingRight: styles.getPropertyValue('padding-right')
+      });
+    }
+    inputRef.current = input;
+  }, []);
+
+  // measure the text on change and update input
+  useEffect(() => {
+    if (measureRef.current === null) return;
+    if (inputRef.current === null) return;
+
+    const padding = props.type === 'number' || props.type === 'float' ? 20 : 0;
+
+    const width = measureRef.current.clientWidth + padding;
+    inputRef.current.style.width = Math.max(minWidth, width) + 'px';
+  }, [props.value, minWidth, styles, props.type]);
+
+  return (
+    <>
+      <input ref={setRef} {...props} />
+      <span ref={measureRef} style={{ ...baseStyles, ...styles }}>
+        {props.value}
+      </span>
+    </>
+  );
+};

package/src/components/Controls.tsx

@@ -0,0 +1,87 @@
+import type { GraphJSON, NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import {
+  faDownload,
+  faPause,
+  faPlay,
+  faQuestion,
+  faTrash,
+  faUpload
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+import React from 'react';
+import { ControlButton, Controls } from 'reactflow';
+
+import { ClearModal } from './modals/ClearModal.js';
+import { HelpModal } from './modals/HelpModal.js';
+import { type Examples, LoadModal } from './modals/LoadModal.js';
+import { SaveModal } from './modals/SaveModal.js';
+
+export type CustomControlsProps = {
+  playing: boolean;
+  togglePlay: () => void;
+  setBehaviorGraph: (value: GraphJSON) => void;
+  examples: Examples;
+  specJson: NodeSpecJSON[] | undefined;
+};
+
+export const CustomControls: React.FC<CustomControlsProps> = ({
+  playing,
+  togglePlay,
+  setBehaviorGraph,
+  examples,
+  specJson
+}: {
+  playing: boolean;
+  togglePlay: () => void;
+  setBehaviorGraph: (value: GraphJSON) => void;
+  examples: Examples;
+  specJson: NodeSpecJSON[] | undefined;
+}) => {
+  const [loadModalOpen, setLoadModalOpen] = useState(false);
+  const [saveModalOpen, setSaveModalOpen] = useState(false);
+  const [helpModalOpen, setHelpModalOpen] = useState(false);
+  const [clearModalOpen, setClearModalOpen] = useState(false);
+
+  return (
+    <>
+      <Controls>
+        <ControlButton title="Help" onClick={() => setHelpModalOpen(true)}>
+          <FontAwesomeIcon icon={faQuestion} />
+        </ControlButton>
+        <ControlButton title="Load" onClick={() => setLoadModalOpen(true)}>
+          <FontAwesomeIcon icon={faUpload} />
+        </ControlButton>
+        <ControlButton title="Save" onClick={() => setSaveModalOpen(true)}>
+          <FontAwesomeIcon icon={faDownload} />
+        </ControlButton>
+        <ControlButton title="Clear" onClick={() => setClearModalOpen(true)}>
+          <FontAwesomeIcon icon={faTrash} />
+        </ControlButton>
+        <ControlButton title="Run" onClick={togglePlay}>
+          <FontAwesomeIcon icon={playing ? faPause : faPlay} />
+        </ControlButton>
+      </Controls>
+      <LoadModal
+        open={loadModalOpen}
+        onClose={() => setLoadModalOpen(false)}
+        setBehaviorGraph={setBehaviorGraph}
+        examples={examples}
+      />
+      {specJson && (
+        <SaveModal
+          open={saveModalOpen}
+          specJson={specJson}
+          onClose={() => setSaveModalOpen(false)}
+        />
+      )}
+      <HelpModal open={helpModalOpen} onClose={() => setHelpModalOpen(false)} />
+      <ClearModal
+        open={clearModalOpen}
+        onClose={() => setClearModalOpen(false)}
+      />
+    </>
+  );
+};
+
+export default CustomControls;

package/src/components/Flow.tsx

@@ -0,0 +1,101 @@
+import type { GraphJSON, IRegistry } from '@kiberon-labs/behave-graph';
+import React from 'react';
+import { Background, BackgroundVariant, ReactFlow } from 'reactflow';
+
+import { useBehaveGraphFlow } from '../hooks/useBehaveGraphFlow.js';
+import { useFlowHandlers } from '../hooks/useFlowHandlers.js';
+import { useGraphRunner } from '../hooks/useGraphRunner.js';
+import { useNodeSpecJson } from '../hooks/useNodeSpecJson.js';
+import CustomControls from './Controls.js';
+import { type Examples } from './modals/LoadModal.js';
+import { NodePicker } from './NodePicker.js';
+
+type FlowProps = {
+  initialGraph: GraphJSON;
+  registry: IRegistry;
+  examples: Examples;
+};
+
+export const Flow: React.FC<FlowProps> = ({
+  initialGraph: graph,
+  registry,
+  examples
+}) => {
+  const specJson = useNodeSpecJson(registry);
+
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    graphJson,
+    setGraphJson,
+    nodeTypes
+  } = useBehaveGraphFlow({
+    initialGraphJson: graph,
+    specJson
+  });
+
+  const {
+    onConnect,
+    handleStartConnect,
+    handleStopConnect,
+    handlePaneClick,
+    handlePaneContextMenu,
+    nodePickerVisibility,
+    handleAddNode,
+    closeNodePicker,
+    nodePickFilters
+  } = useFlowHandlers({
+    nodes,
+    onEdgesChange,
+    onNodesChange,
+    specJSON: specJson
+  });
+
+  const { togglePlay, playing } = useGraphRunner({
+    graphJson,
+    registry
+  });
+
+  return (
+    <ReactFlow
+      nodeTypes={nodeTypes}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      // @ts-ignore
+      onConnectStart={handleStartConnect}
+      // @ts-ignore
+      onConnectEnd={handleStopConnect}
+      fitView
+      fitViewOptions={{ maxZoom: 1 }}
+      onPaneClick={handlePaneClick}
+      onPaneContextMenu={handlePaneContextMenu}
+    >
+      <CustomControls
+        playing={playing}
+        togglePlay={togglePlay}
+        setBehaviorGraph={setGraphJson}
+        examples={examples}
+        specJson={specJson}
+      />
+      <Background
+        variant={BackgroundVariant.Lines}
+        color="#2a2b2d"
+        style={{ backgroundColor: '#1E1F22' }}
+      />
+      {nodePickerVisibility && (
+        <NodePicker
+          position={nodePickerVisibility}
+          filters={nodePickFilters}
+          onPickNode={handleAddNode}
+          onClose={closeNodePicker}
+          specJSON={specJson}
+        />
+      )}
+    </ReactFlow>
+  );
+};

package/src/components/InputSocket.tsx

@@ -0,0 +1,142 @@
+import type {
+  InputSocketSpecJSON,
+  NodeSpecJSON
+} from '@kiberon-labs/behave-graph';
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import cx from 'classnames';
+import React from 'react';
+import { type Connection, Handle, Position, useReactFlow } from 'reactflow';
+
+import { colors, valueTypeColorMap } from '../util/colors.js';
+import { isValidConnection } from '../util/isValidConnection.js';
+import { AutoSizeInput } from './AutoSizeInput.js';
+
+export type InputSocketProps = {
+  connected: boolean;
+  value: any | undefined;
+  onChange: (key: string, value: any) => void;
+  specJSON: NodeSpecJSON[];
+} & InputSocketSpecJSON;
+
+const InputFieldForValue = ({
+  choices,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  valueType
+}: Pick<
+  InputSocketProps,
+  'choices' | 'value' | 'defaultValue' | 'name' | 'onChange' | 'valueType'
+>) => {
+  const showChoices = choices?.length;
+  //Stops 'undefined'
+  const defaultSafeValue =
+    defaultValue !== undefined ? String(defaultValue) : '';
+  const inputVal = value !== undefined ? String(value) : defaultSafeValue;
+
+  if (showChoices)
+    return (
+      <select
+        className="bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
+        value={value ?? defaultValue ?? ''}
+        onChange={(e) => onChange(name, e.currentTarget.value)}
+      >
+        <>
+          {choices.map((choice) => (
+            <option key={choice.text} value={choice.value}>
+              {choice.text}
+            </option>
+          ))}
+        </>
+      </select>
+    );
+
+  return (
+    <>
+      {valueType === 'string' && (
+        <AutoSizeInput
+          type="text"
+          className="bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'number' && (
+        <AutoSizeInput
+          type="number"
+          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'float' && (
+        <AutoSizeInput
+          type="number"
+          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'integer' && (
+        <AutoSizeInput
+          type="number"
+          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'boolean' && (
+        <input
+          type="checkbox"
+          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.checked)}
+        />
+      )}
+    </>
+  );
+};
+
+const InputSocket: React.FC<InputSocketProps> = ({
+  connected,
+  specJSON,
+  ...rest
+}) => {
+  const { name, valueType } = rest;
+  const instance = useReactFlow();
+
+  const isFlowSocket = valueType === 'flow';
+
+  let colorName = valueTypeColorMap[valueType];
+  if (colorName === undefined) {
+    colorName = 'red';
+  }
+
+  // @ts-ignore
+  const [backgroundColor, borderColor] = colors[colorName];
+  const showName = isFlowSocket === false || name !== 'flow';
+
+  return (
+    <div className="flex grow items-center justify-start h-7">
+      {isFlowSocket && (
+        <FontAwesomeIcon icon={faCaretRight} color="#ffffff" size="lg" />
+      )}
+      {showName && <div className="capitalize mr-2">{name}</div>}
+
+      {!isFlowSocket && !connected && <InputFieldForValue {...rest} />}
+      <Handle
+        id={name}
+        type="target"
+        position={Position.Left}
+        className={cx(borderColor, connected ? backgroundColor : 'bg-gray-800')}
+        isValidConnection={(connection: Connection) =>
+          isValidConnection(connection, instance, specJSON)
+        }
+      />
+    </div>
+  );
+};
+
+export default InputSocket;

package/src/components/Node.tsx

@@ -0,0 +1,68 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import React from 'react';
+import { useEdges, type NodeProps as FlowNodeProps } from 'reactflow';
+
+import { useChangeNodeData } from '../hooks/useChangeNodeData.js';
+import { isHandleConnected } from '../util/isHandleConnected.js';
+import InputSocket from './InputSocket.js';
+import NodeContainer from './NodeContainer.js';
+import OutputSocket from './OutputSocket.js';
+
+type NodeProps = FlowNodeProps & {
+  spec: NodeSpecJSON;
+  allSpecs: NodeSpecJSON[];
+};
+
+const getPairs = <T, U>(arr1: T[], arr2: U[]) => {
+  const max = Math.max(arr1.length, arr2.length);
+  const pairs = [];
+  for (let i = 0; i < max; i++) {
+    const pair: [T | undefined, U | undefined] = [arr1[i], arr2[i]];
+    pairs.push(pair);
+  }
+  return pairs;
+};
+
+export const Node: React.FC<NodeProps> = ({
+  id,
+  data,
+  spec,
+  selected,
+  allSpecs
+}: NodeProps) => {
+  const edges = useEdges();
+  const handleChange = useChangeNodeData(id);
+  const pairs = getPairs(spec.inputs, spec.outputs);
+  return (
+    <NodeContainer
+      title={spec.label}
+      category={spec.category}
+      selected={selected}
+    >
+      {pairs.map(([input, output], ix) => (
+        <div
+          key={ix}
+          className="flex flex-row justify-between gap-8 relative px-2"
+          // className={styles.container}
+        >
+          {input && (
+            <InputSocket
+              {...input}
+              specJSON={allSpecs}
+              value={data[input.name] ?? input.defaultValue}
+              onChange={handleChange}
+              connected={isHandleConnected(edges, id, input.name, 'target')}
+            />
+          )}
+          {output && (
+            <OutputSocket
+              {...output}
+              specJSON={allSpecs}
+              connected={isHandleConnected(edges, id, output.name, 'source')}
+            />
+          )}
+        </div>
+      ))}
+    </NodeContainer>
+  );
+};

package/src/components/NodeContainer.tsx

@@ -0,0 +1,46 @@
+import { NodeCategory, type NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import cx from 'classnames';
+import React, { type PropsWithChildren } from 'react';
+
+import { categoryColorMap, colors } from '../util/colors.js';
+
+type NodeProps = {
+  title: string;
+  category?: NodeSpecJSON['category'];
+  selected: boolean;
+};
+
+const NodeContainer: React.FC<PropsWithChildren<NodeProps>> = ({
+  title,
+  category = NodeCategory.None,
+  selected,
+  children
+}) => {
+  let colorName = categoryColorMap[category];
+  if (colorName === undefined) {
+    colorName = 'red';
+  }
+  let [backgroundColor, borderColor, textColor] = colors[colorName];
+  if (selected) {
+    borderColor = 'border-gray-800';
+  }
+  return (
+    <div
+      className={cx(
+        'rounded text-white text-sm bg-gray-800 min-w-[120px]',
+        selected && 'outline outline-1'
+      )}
+    >
+      <div className={`${backgroundColor} ${textColor} px-2 py-1 rounded-t`}>
+        {title}
+      </div>
+      <div
+        className={`flex flex-col gap-2 py-2 border-l border-r border-b ${borderColor} `}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default NodeContainer;

package/src/components/NodePicker.tsx

@@ -0,0 +1,77 @@
+import { type NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import React, { useState } from 'react';
+import { useReactFlow, type XYPosition } from 'reactflow';
+
+import { useOnPressKey } from '../hooks/useOnPressKey.js';
+
+export type NodePickerFilters = {
+  handleType: 'source' | 'target';
+  valueType: string;
+};
+
+type NodePickerProps = {
+  position: XYPosition;
+  filters?: NodePickerFilters;
+  onPickNode: (type: string, position: XYPosition) => void;
+  onClose: () => void;
+  specJSON: NodeSpecJSON[] | undefined;
+};
+
+export const NodePicker: React.FC<NodePickerProps> = ({
+  position,
+  onPickNode,
+  onClose,
+  filters,
+  specJSON
+}: NodePickerProps) => {
+  const [search, setSearch] = useState('');
+  const instance = useReactFlow();
+
+  useOnPressKey('Escape', onClose);
+
+  if (!specJSON) return null;
+  let filtered = specJSON;
+  if (filters !== undefined) {
+    filtered = filtered?.filter((node) => {
+      const sockets =
+        filters?.handleType === 'source' ? node.outputs : node.inputs;
+      return sockets.some((socket) => socket.valueType === filters?.valueType);
+    });
+  }
+
+  filtered =
+    filtered?.filter((node) => {
+      const term = search.toLowerCase();
+      return node.type.toLowerCase().includes(term);
+    }) || [];
+
+  return (
+    <div
+      className="node-picker absolute z-10 text-sm text-white bg-gray-800 border rounded border-gray-500"
+      style={{ top: position.y, left: position.x }}
+    >
+      <div className="bg-gray-500 p-2">Add Node</div>
+      <div className="p-2">
+        <input
+          type="text"
+          autoFocus
+          placeholder="Type to filter"
+          className=" bg-gray-600 disabled:bg-gray-700 w-full py-1 px-2"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+      <div className="max-h-48 overflow-y-scroll">
+        {filtered.map(({ type }) => (
+          <div
+            key={type}
+            className="p-2 cursor-pointer border-b border-gray-600"
+            onClick={() => onPickNode(type, instance.project(position))}
+          >
+            {type}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};