@kiberon-labs/behave-graph-flow 1.0.0 → 3.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,170 @@
+import { SystemProvider, GraphProvider } from '@/system/provider';
+import { System } from '@/system/system';
+import {
+  registerCoreProfile,
+  type ValueType
+} from '@kiberon-labs/behave-graph';
+
+import { kitchenSinkPlugin } from '@/plugin/kitchen-sink';
+import { localGraphRunnerPlugin } from '@/index';
+
+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);
+  defaultSys.registerPlugin(kitchenSinkPlugin);
+  return defaultSys;
+};
+
+const defaultSys = new System(nodeRegistry);
+const defaultSession = defaultSys.createSession('graph');
+
+defaultSys.registerPlugin(kitchenSinkPlugin);
+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
+    }
+  ]
+});
+
+// Saving is wired by default on the System (download-to-file); no per-story
+// subscription is needed. Override with defaultSys.enablePersistence(...) only
+// when a story needs to demonstrate a custom sink.
+
+defaultSession.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) => {
+  defaultSession.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}>
+      <GraphProvider value={defaultSession}>{children}</GraphProvider>
+    </SystemProvider>
+  );
+};

package/stories/defaults/systemGenerator.ts

@@ -0,0 +1,43 @@
+import { System } from '@/system/system';
+import { kitchenSinkPlugin } from '@/plugin/kitchen-sink';
+import {
+  registerCoreProfile,
+  writeNodeSpecsToJSON,
+  type ValueType
+} from '@kiberon-labs/behave-graph';
+
+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);
+  defaultSys.createSession('graph');
+  // Standard editor UI bundle (docs, alignment, layout, notes) so stories built
+  // on this generator get the full editor without wiring plugins per story.
+  defaultSys.registerPlugin(kitchenSinkPlugin);
+  return defaultSys;
+};

package/stories/plugins/notes.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Background,
+  BackgroundVariant,
+  ReactFlow,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState
+} from 'reactflow';
+import { useMemo } from 'react';
+
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+import { NoteNode, NOTE_NODE_TYPE } from '@/plugin/notes';
+
+const DEFAULT_TEXT =
+  '# Heading\n\nA **markdown** note with `code` and:\n\n- a list\n- of items\n\n> and a quote';
+
+const VIDEO_TEXT =
+  'An embedded video:\n\n<div data-youtube-video><iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe></div>';
+
+function Canvas({ selectedId, text }: { selectedId?: string; text?: string }) {
+  const nodeTypes = useMemo(() => {
+    return {
+      [NOTE_NODE_TYPE]: NoteNode
+    };
+  }, []);
+
+  const [nodes, , onNodesChange] = useNodesState([
+    {
+      id: '0',
+      type: NOTE_NODE_TYPE,
+      position: { x: 0, y: 0 },
+      selected: selectedId === '0',
+      style: { width: 320, height: 260 },
+      data: {
+        annotations: {},
+        text: text ?? DEFAULT_TEXT
+      }
+    }
+  ]);
+
+  const [edges, , onEdgesChange] = useEdgesState([]);
+
+  return (
+    <div style={{ width: 900, height: 520 }}>
+      <ReactFlow
+        nodeTypes={nodeTypes}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        fitView
+      >
+        <Background
+          variant={BackgroundVariant.Lines}
+          color="#373737"
+          style={{ backgroundColor: 'var(--colors-bgCanvas)' }}
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Canvas> = {
+  title: 'Plugins/Notes',
+  component: Canvas
+};
+
+export default meta;
+type Story = StoryObj<typeof Canvas>;
+
+export const Default: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <ReactFlowProvider>
+        <Canvas />
+      </ReactFlowProvider>
+    </DefaultSystemProvider>
+  )
+};
+
+export const Selected: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <ReactFlowProvider>
+        <Canvas selectedId="0" />
+      </ReactFlowProvider>
+    </DefaultSystemProvider>
+  )
+};
+
+export const WithVideo: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <ReactFlowProvider>
+        <Canvas text={VIDEO_TEXT} />
+      </ReactFlowProvider>
+    </DefaultSystemProvider>
+  )
+};