@kiberon-labs/behave-graph-flow 1.0.0 → 2.0.0

package/stories/components/panels/traces.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TracesPanel } from '@/components/panels/traces';
+import {
+  DefaultSystemProvider,
+  systemGenerator
+} from '~/defaults/defaultStoryProvider';
+import { SystemProvider } from '@/system';
+
+const meta: Meta<typeof TracesPanel> = {
+  title: 'Components/Panels/TracesPanel',
+  component: TracesPanel,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'TracesPanel component for displaying execution traces.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof TracesPanel>;
+
+function Injector() {
+  // Keep the original provider for the simple empty/default story.
+  // Other stories will create their own System with a prefilled collector.
+  return <TracesPanel />;
+}
+
+function makeCollector(
+  spans: Array<{
+    nodeId: string;
+    name: string;
+    start: number;
+    end: number;
+    lane: number;
+  }>
+) {
+  const capacity = 1000;
+  const arr: any[] = Array.from({ length: capacity });
+  let maxLane = -1;
+  for (let i = 0; i < spans.length; i++) {
+    const s = spans[i];
+    arr[i] = {
+      id: i + 1,
+      nodeId: s.nodeId,
+      name: s.name,
+      start: s.start,
+      end: s.end,
+      lane: s.lane
+    };
+    maxLane = Math.max(maxLane, s.lane);
+  }
+
+  const laneOpen = Array.from(
+    { length: Math.max(1, maxLane + 1) },
+    () => false
+  );
+  // mark lanes with open spans
+  for (const s of spans) {
+    if (Number.isNaN(s.end)) laneOpen[s.lane] = true;
+  }
+
+  return {
+    capacity,
+    spans: arr,
+    writeIndex: spans.length % capacity,
+    size: spans.length,
+    nextId: spans.length + 1,
+    openByNodeId: new Map<string, number[]>(),
+    laneOpen
+  };
+}
+
+export const Default: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <Injector mode="empty" />
+    </DefaultSystemProvider>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default TracesPanel (no spans).'
+      }
+    }
+  }
+};
+
+export const SampleTraces: Story = {
+  render: () => {
+    const sys = systemGenerator();
+    // create a few sample closed spans
+    const now = performance.now();
+    const spans = [
+      {
+        nodeId: 'node-a',
+        name: 'Node A',
+        start: now - 900,
+        end: now - 800,
+        lane: 0
+      },
+      {
+        nodeId: 'node-b',
+        name: 'Node B',
+        start: now - 700,
+        end: now - 600,
+        lane: 1
+      },
+      {
+        nodeId: 'node-c',
+        name: 'Worker C',
+        start: now - 950,
+        end: now - 500,
+        lane: 2
+      }
+    ];
+    const collector = makeCollector(spans);
+    sys.traceStore.setState({
+      collector,
+      version: sys.traceStore.getState().version + 1
+    });
+
+    return (
+      <SystemProvider value={sys}>
+        <TracesPanel />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TracesPanel with a few sample spans (closed).'
+      }
+    }
+  }
+};
+
+export const WithOpenSpan: Story = {
+  render: () => {
+    const sys = systemGenerator();
+    const now = performance.now();
+    const spans = [
+      {
+        nodeId: 'node-closed',
+        name: 'Closed Node',
+        start: now - 400,
+        end: now - 300,
+        lane: 0
+      },
+      {
+        nodeId: 'node-open',
+        name: 'Open Node',
+        start: now - 200,
+        end: Number.NaN,
+        lane: 1
+      }
+    ];
+    const collector = makeCollector(spans);
+    sys.traceStore.setState({
+      collector,
+      version: sys.traceStore.getState().version + 1
+    });
+
+    return (
+      <SystemProvider value={sys}>
+        <TracesPanel />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TracesPanel showing an open (ongoing) span alongside closed spans.'
+      }
+    }
+  }
+};
+
+export const ManyTraces: Story = {
+  render: () => {
+    const sys = systemGenerator();
+    const now = performance.now();
+    const spans: Array<any> = [];
+    for (let i = 0; i < 80; i++) {
+      const lane = i % 6;
+      const start = now - (800 - i * 5);
+      const end = start + 30 + (i % 5);
+      spans.push({
+        nodeId: `node-${lane}`,
+        name: `Node ${lane}`,
+        start,
+        end,
+        lane
+      });
+    }
+    const collector = makeCollector(spans);
+    sys.traceStore.setState({
+      collector,
+      version: sys.traceStore.getState().version + 1
+    });
+
+    return (
+      <SystemProvider value={sys}>
+        <TracesPanel />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TracesPanel populated with many short spans to test layout and performance.'
+      }
+    }
+  }
+};

package/stories/components/panels/variables.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { VariablesPanel } from '@/components/panels/variables';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof VariablesPanel> = {
+  title: 'Components/Panels/Variables',
+  component: VariablesPanel,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof VariablesPanel>;
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <VariablesPanel />
+      </DefaultSystemProvider>
+    );
+  },
+  args: {}
+};

package/stories/defaults/defaultStoryProvider.tsx

@@ -0,0 +1,167 @@
+import { docsPlugin } from '@/plugin/docs';
+
+import { SystemProvider } from '@/system/provider';
+import { System } from '@/system/system';
+import {
+  registerCoreProfile,
+  type ValueType
+} from '@kiberon-labs/behave-graph';
+
+import { alignmentPlugin } from '@/plugin/alignment';
+import { downloadJson, localGraphRunnerPlugin } from '@/index';
+
+export const ColorValue: ValueType = {
+  name: 'color',
+  creator: () => '#000000',
+  deserialize: (value: string) => value,
+  serialize: (value: string) => value,
+  lerp: (start: string, end: string, t: number) => (t < 0.5 ? start : end),
+  equals: (a: string, b: string) => a === b,
+  clone: (value: string) => value
+};
+
+// Create the old-style registry for node definitions
+let coreRegistry = registerCoreProfile({
+  nodes: {},
+  values: {
+    color: ColorValue
+  },
+  dependencies: {}
+});
+// Convert to INodeRegistry
+const nodeRegistry = {
+  values: coreRegistry.values,
+  specs: []
+};
+
+//Basic system generator for tests and stories
+export const systemGenerator = () => {
+  const defaultSys = new System(nodeRegistry);
+  return defaultSys;
+};
+
+const defaultSys = new System(nodeRegistry);
+
+defaultSys.registerPlugin(alignmentPlugin);
+defaultSys.registerPlugin(docsPlugin);
+defaultSys.registerPlugin(localGraphRunnerPlugin, {
+  registry: coreRegistry,
+  events: [
+    {
+      id: '0',
+      name: 'Example Event',
+      parameters: [
+        {
+          name: 'exampleParam',
+          valueTypeName: 'string',
+          defaultValue: 'Foo'
+        }
+      ],
+      description: 'An example event for demonstration purposes.',
+      readonly: true
+    }
+  ],
+  variables: [
+    {
+      id: '0',
+      name: 'Example Variable',
+      valueTypeName: 'string',
+      initialValue: 'Hello, World!',
+      description: 'An example variable for demonstration purposes.',
+      readonly: true
+    }
+  ]
+});
+
+defaultSys.pubsub.subscribe('graph:saved', (_, graph) => {
+  downloadJson('graph.json', graph);
+});
+
+defaultSys.flowStore.getState().setGraph({
+  nodes: [
+    {
+      type: 'lifecycle/onStart',
+      id: '0',
+      flows: {
+        flow: {
+          nodeId: '1',
+          socket: 'flow'
+        }
+      }
+    },
+    {
+      type: 'flow/branch',
+      id: '1',
+      parameters: {
+        condition: {
+          value: false
+        }
+      },
+      flows: {
+        true: {
+          nodeId: '2',
+          socket: 'flow'
+        },
+        false: {
+          nodeId: '3',
+          socket: 'flow'
+        }
+      }
+    },
+    {
+      type: 'debug/log',
+      id: '2',
+      parameters: {
+        text: {
+          value: 'Condition is true!'
+        }
+      }
+    },
+    {
+      type: 'debug/log',
+      id: '3',
+      parameters: {
+        text: {
+          value: 'Condition is false!'
+        }
+      }
+    }
+  ]
+});
+
+// Seed a few example log entries so the Logs panel renders representative
+// content in stories and visual tests. Timestamps use fixed local components so
+// they render deterministically regardless of timezone.
+const exampleLogTime = (h: number, m: number, s: number, ms: number) =>
+  new Date(2024, 0, 1, h, m, s, ms);
+
+[
+  { type: 'info' as const, message: 'Graph compiled successfully.' },
+  { type: 'verbose' as const, message: 'lifecycle/onStart fired (node 0).' },
+  {
+    type: 'info' as const,
+    message: 'flow/branch evaluated condition = false.'
+  },
+  {
+    type: 'warning' as const,
+    message: 'Variable "Example Variable" is unused.'
+  },
+  {
+    type: 'error' as const,
+    message: 'debug/log: failed to resolve socket "value" on node 3.'
+  }
+].forEach((entry, index) => {
+  defaultSys.logsStore.getState().append({
+    type: entry.type,
+    data: { message: entry.message },
+    time: exampleLogTime(13, 45, 30 + index, 120 + index * 37)
+  });
+});
+
+export const DefaultSystemProvider = ({
+  children
+}: {
+  children: React.ReactElement;
+}) => {
+  return <SystemProvider value={defaultSys}>{children}</SystemProvider>;
+};

package/stories/defaults/systemGenerator.ts

@@ -0,0 +1,38 @@
+import { System } from '@/system/system';
+import {
+  registerCoreProfile,
+  writeNodeSpecsToJSON,
+  type ValueType
+} from '@kiberon-labs/behave-graph';
+
+export const ColorValue: ValueType = {
+  name: 'color',
+  creator: () => '#000000',
+  deserialize: (value: string) => value,
+  serialize: (value: string) => value,
+  lerp: (start: string, end: string, t: number) => (t < 0.5 ? start : end),
+  equals: (a: string, b: string) => a === b,
+  clone: (value: string) => value
+};
+
+// Create the old-style registry for node definitions
+let coreRegistry = registerCoreProfile({
+  nodes: {},
+  values: {
+    color: ColorValue
+  },
+  dependencies: {} as Parameters<typeof registerCoreProfile>[0]['dependencies']
+});
+
+// Convert to INodeRegistry
+const nodeSpecs = writeNodeSpecsToJSON(coreRegistry);
+const nodeRegistry = {
+  values: coreRegistry.values,
+  specs: nodeSpecs
+};
+
+//Basic system generator for tests and stories
+export const systemGenerator = () => {
+  const defaultSys = new System(nodeRegistry);
+  return defaultSys;
+};

package/tests/components/edges/offsetBezier.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { Position } from 'reactflow';
+import { getBetterBezierPath } from '@/components/edges/offsetBezier';
+
+describe('getBetterBezierPath', () => {
+  it('returns a bezier path string plus label/offset coordinates', () => {
+    const result = getBetterBezierPath({
+      sourceX: 0,
+      sourceY: 0,
+      targetX: 0,
+      targetY: 200
+    });
+
+    expect(result).toHaveLength(5);
+    const [path, labelX, labelY] = result;
+    expect(typeof path).toBe('string');
+    expect(path.startsWith('M0,0 C')).toBe(true);
+    expect(typeof labelX).toBe('number');
+    expect(typeof labelY).toBe('number');
+  });
+
+  it('offsets the control points vertically for bottom->top connections', () => {
+    const [path] = getBetterBezierPath({
+      sourceX: 0,
+      sourceY: 0,
+      sourcePosition: Position.Bottom,
+      targetX: 0,
+      targetY: 200,
+      targetPosition: Position.Top,
+      offset: 75
+    });
+
+    // source control = (0, 0 + 75), target control = (0, 200 - 75)
+    expect(path).toBe('M0,0 C0,75 0,125 0,200');
+  });
+
+  it('offsets the control points horizontally for left/right connections', () => {
+    const [path] = getBetterBezierPath({
+      sourceX: 0,
+      sourceY: 0,
+      sourcePosition: Position.Right,
+      targetX: 200,
+      targetY: 0,
+      targetPosition: Position.Left,
+      offset: 50
+    });
+
+    // source control = (0 + 50, 0), target control = (200 - 50, 0)
+    expect(path).toBe('M0,0 C50,0 150,0 200,0');
+  });
+});

package/tests/components/layoutController/utils.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import type { LayoutBase } from 'rc-dock';
+import {
+  findGraphPanel,
+  findTabInLayout,
+  removeTabFromLayout
+} from '@/components/layoutController/utils';
+
+const makeLayout = (): LayoutBase =>
+  ({
+    dockbox: {
+      id: 'root',
+      mode: 'horizontal',
+      children: [
+        {
+          id: 'graphs',
+          tabs: [{ id: 'tab-a' }, { id: 'tab-b' }]
+        },
+        {
+          id: 'sidebar',
+          tabs: [{ id: 'tab-c' }]
+        }
+      ]
+    }
+  }) as unknown as LayoutBase;
+
+describe('layoutController/utils', () => {
+  describe('findGraphPanel', () => {
+    it('locates the panel whose id is "graphs"', () => {
+      const panel = findGraphPanel(makeLayout());
+      expect(panel?.id).toBe('graphs');
+    });
+
+    it('returns null when no graph panel exists', () => {
+      const layout = {
+        dockbox: { id: 'root', children: [{ id: 'other', tabs: [] }] }
+      } as unknown as LayoutBase;
+      expect(findGraphPanel(layout)).toBeNull();
+    });
+  });
+
+  describe('findTabInLayout', () => {
+    it('finds the panel that owns a given tab', () => {
+      expect(findTabInLayout(makeLayout(), 'tab-b')?.id).toBe('graphs');
+      expect(findTabInLayout(makeLayout(), 'tab-c')?.id).toBe('sidebar');
+    });
+
+    it('returns null for an unknown tab', () => {
+      expect(findTabInLayout(makeLayout(), 'missing')).toBeNull();
+    });
+  });
+
+  describe('removeTabFromLayout', () => {
+    it('removes a tab while keeping the panel that still has tabs', () => {
+      const updated = removeTabFromLayout(makeLayout(), 'tab-a');
+      const graphsPanel = findTabInLayout(updated, 'tab-b');
+      expect(graphsPanel?.id).toBe('graphs');
+      expect(findTabInLayout(updated, 'tab-a')).toBeNull();
+    });
+
+    it('does not mutate the original layout', () => {
+      const layout = makeLayout();
+      removeTabFromLayout(layout, 'tab-a');
+      // original still has tab-a
+      expect(findTabInLayout(layout, 'tab-a')?.id).toBe('graphs');
+    });
+  });
+});

package/tests/components/panels/traces/utils.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import {
+  calculateTimeInterval,
+  clamp,
+  hashToHue
+} from '@/components/panels/traces/utils';
+
+describe('traces/utils', () => {
+  describe('hashToHue', () => {
+    it('is deterministic for the same input', () => {
+      expect(hashToHue('node-a')).toBe(hashToHue('node-a'));
+    });
+
+    it('always returns a hue in the [0, 360) range', () => {
+      for (const s of ['', 'a', 'flow/branch', 'a-very-long-identifier-123']) {
+        const hue = hashToHue(s);
+        expect(hue).toBeGreaterThanOrEqual(0);
+        expect(hue).toBeLessThan(360);
+        expect(Number.isInteger(hue)).toBe(true);
+      }
+    });
+
+    it('generally produces different hues for different inputs', () => {
+      expect(hashToHue('alpha')).not.toBe(hashToHue('beta'));
+    });
+  });
+
+  describe('clamp', () => {
+    it('returns the value when within range', () => {
+      expect(clamp(5, 0, 10)).toBe(5);
+    });
+    it('clamps below the minimum', () => {
+      expect(clamp(-3, 0, 10)).toBe(0);
+    });
+    it('clamps above the maximum', () => {
+      expect(clamp(42, 0, 10)).toBe(10);
+    });
+  });
+
+  describe('calculateTimeInterval', () => {
+    it('picks a "nice" interval roughly targeting 8 ticks', () => {
+      expect(calculateTimeInterval(8)).toBe(1);
+      expect(calculateTimeInterval(80)).toBe(10);
+      expect(calculateTimeInterval(800)).toBe(100);
+      expect(calculateTimeInterval(8000)).toBe(1000);
+    });
+
+    it('caps at the largest nice interval for very large ranges', () => {
+      expect(calculateTimeInterval(10_000_000)).toBe(10000);
+    });
+  });
+});

package/tests/flowToBehave.test.ts

@@ -8,18 +8,40 @@ 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';
+import { System } from '@/system/system';
 
 const flowGraph = rawFlowGraph as GraphJSON;
 
 const [nodes, edges] = behaveToFlow(flowGraph);
 
 it('transforms from flow to behave', () => {
-  const registry = registerCoreProfile({
+  const coreRegistry = registerCoreProfile({
     nodes: {},
     values: {},
     dependencies: {}
   });
-  const specJSON = writeNodeSpecsToJSON(registry);
-  const output = flowToBehave(nodes, edges, specJSON);
-  expect(output).toEqual(flowGraph);
+  const specJSON = writeNodeSpecsToJSON(coreRegistry);
+  const registry = {
+    values: coreRegistry.values,
+    specs: specJSON
+  };
+  const system = new System(registry);
+  const output = flowToBehave(system, nodes, edges, specJSON);
+
+  // Remove position metadata from expected graph since we no longer include it
+  const expectedGraph = {
+    ...flowGraph,
+    nodes: flowGraph.nodes.map((node) => {
+      const { metadata, ...rest } = node as any;
+      if (metadata) {
+        const { positionX, positionY, ...remainingMetadata } = metadata;
+        return Object.keys(remainingMetadata).length > 0
+          ? { ...rest, metadata: remainingMetadata }
+          : rest;
+      }
+      return node;
+    })
+  };
+
+  expect(output).toEqual(expectedGraph);
 });