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

package/src/store/tabs.ts

@@ -0,0 +1,278 @@
+import type { BoxBase, LayoutBase, PanelBase, TabBase } from 'rc-dock';
+import { create } from 'zustand';
+
+function isPanelBase(value: BoxBase | PanelBase): value is PanelBase {
+  return Array.isArray((value as PanelBase).tabs);
+}
+
+function hasChildren(value: BoxBase | PanelBase): value is BoxBase {
+  return Array.isArray((value as BoxBase).children);
+}
+
+function upsertTabInPanel(panel: PanelBase, tabId: string): PanelBase {
+  const tabs = panel.tabs ?? [];
+  const exists = tabs.some((t) => t.id === tabId);
+  const nextTabs: TabBase[] = exists ? tabs : [...tabs, { id: tabId }];
+  return {
+    ...panel,
+    tabs: nextTabs,
+    activeId: tabId
+  };
+}
+
+function recurseFocusTab(
+  base: BoxBase | PanelBase,
+  tabId: string
+): { updated: BoxBase | PanelBase; found: boolean } {
+  if (isPanelBase(base)) {
+    const hasTab = base.tabs?.some((t) => t.id === tabId);
+    if (!hasTab) {
+      return { updated: base, found: false };
+    }
+    return {
+      updated: {
+        ...base,
+        activeId: tabId
+      },
+      found: true
+    };
+  }
+
+  if (hasChildren(base)) {
+    let found = false;
+    const updatedChildren = base.children.map((child) => {
+      if (found) return child;
+      const res = recurseFocusTab(child, tabId);
+      found = res.found;
+      return res.updated;
+    });
+    return { updated: { ...base, children: updatedChildren }, found };
+  }
+
+  return { updated: base, found: false };
+}
+
+function recurseUpsertTabInPanelId(
+  base: BoxBase | PanelBase,
+  panelId: string,
+  tabId: string
+): { updated: BoxBase | PanelBase; done: boolean } {
+  if (isPanelBase(base)) {
+    if (base.id !== panelId) {
+      return { updated: base, done: false };
+    }
+    return { updated: upsertTabInPanel(base, tabId), done: true };
+  }
+
+  if (hasChildren(base)) {
+    let done = false;
+    const updatedChildren = base.children.map((child) => {
+      if (done) return child;
+      const res = recurseUpsertTabInPanelId(child, panelId, tabId);
+      done = res.done;
+      return res.updated;
+    });
+    return { updated: { ...base, children: updatedChildren }, done };
+  }
+
+  return { updated: base, done: false };
+}
+
+function recurseUpsertTabInFirstPanel(
+  base: BoxBase | PanelBase,
+  tabId: string
+): { updated: BoxBase | PanelBase; done: boolean } {
+  if (isPanelBase(base)) {
+    return { updated: upsertTabInPanel(base, tabId), done: true };
+  }
+
+  if (hasChildren(base)) {
+    let done = false;
+    const updatedChildren = base.children.map((child) => {
+      if (done) return child;
+      const res = recurseUpsertTabInFirstPanel(child, tabId);
+      done = res.done;
+      return res.updated;
+    });
+    return { updated: { ...base, children: updatedChildren }, done };
+  }
+
+  return { updated: base, done: false };
+}
+
+const defaultLayout: LayoutBase = {
+  dockbox: {
+    mode: 'vertical',
+    children: [
+      {
+        mode: 'horizontal',
+        children: [
+          {
+            size: 2,
+            mode: 'vertical',
+            children: [
+              {
+                mode: 'horizontal',
+                children: [
+                  {
+                    size: 3,
+                    mode: 'vertical',
+                    children: [
+                      {
+                        tabs: [
+                          {
+                            id: 'variables'
+                          },
+                          {
+                            id: 'layers'
+                          },
+                          {
+                            id: 'events'
+                          },
+                          {
+                            id: 'traces'
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    size: 17,
+                    mode: 'vertical',
+                    children: [
+                      {
+                        id: 'graphs',
+                        size: 700,
+                        group: 'graph',
+                        tabs: [
+                          {
+                            id: 'graph'
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    size: 4,
+                    mode: 'vertical',
+                    children: [
+                      {
+                        size: 12,
+                        tabs: [
+                          {
+                            id: 'nodeInputs'
+                          },
+                          {
+                            id: 'system:settings'
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export type TabStore = {
+  currentPanel?: string;
+  layout: LayoutBase;
+  setLayout: (layout: LayoutBase) => void;
+  setCurrentPanel: (currentPanel: string) => void;
+  openTab: (tabId: string, options?: { panelId?: string }) => void;
+};
+
+export const tabStoreFactory = () =>
+  create<TabStore>((set) => ({
+    currentPanel: 'string',
+    layout: defaultLayout,
+    setLayout: (layout: LayoutBase) => set(() => ({ layout })),
+    setCurrentPanel: (currentPanel: string) => set(() => ({ currentPanel })),
+    openTab: (tabId: string, options?: { panelId?: string }) =>
+      set((state) => {
+        // 1) If the tab already exists anywhere, just focus it.
+        let found = false;
+        let updatedLayout: LayoutBase = state.layout;
+
+        const focusIn = (box?: BoxBase) => {
+          if (!box || found) return box;
+          const res = recurseFocusTab(box, tabId);
+          found = res.found;
+          return res.updated as BoxBase;
+        };
+
+        updatedLayout = {
+          ...updatedLayout,
+          dockbox: focusIn(updatedLayout.dockbox) ?? updatedLayout.dockbox,
+          floatbox: updatedLayout.floatbox
+            ? (focusIn(updatedLayout.floatbox) as BoxBase)
+            : updatedLayout.floatbox,
+          maxbox: updatedLayout.maxbox
+            ? (focusIn(updatedLayout.maxbox) as BoxBase)
+            : updatedLayout.maxbox,
+          windowbox: updatedLayout.windowbox
+            ? (focusIn(updatedLayout.windowbox) as BoxBase)
+            : updatedLayout.windowbox
+        };
+
+        if (found) {
+          return { layout: updatedLayout };
+        }
+
+        // 2) Otherwise, insert it into a target panel (prefer explicit panelId).
+        const targetPanelId =
+          options?.panelId ?? (tabId === 'graph' ? 'graphs' : undefined);
+
+        if (targetPanelId) {
+          const res = recurseUpsertTabInPanelId(
+            updatedLayout.dockbox,
+            targetPanelId,
+            tabId
+          );
+          if (res.done) {
+            return {
+              layout: { ...updatedLayout, dockbox: res.updated as BoxBase }
+            };
+          }
+        }
+
+        // 3) Fallback: add to the first docked panel with tabs.
+        const fallback = recurseUpsertTabInFirstPanel(
+          updatedLayout.dockbox,
+          tabId
+        );
+        if (fallback.done) {
+          return {
+            layout: { ...updatedLayout, dockbox: fallback.updated as BoxBase }
+          };
+        }
+
+        // 4) Last resort: create a floating panel.
+        const floatPanel: PanelBase = {
+          x: 120,
+          y: 120,
+          w: 420,
+          h: 320,
+          tabs: [{ id: tabId }],
+          activeId: tabId,
+          group: 'popout'
+        };
+
+        const floatbox: BoxBase = updatedLayout.floatbox
+          ? {
+              ...updatedLayout.floatbox,
+              children: [...(updatedLayout.floatbox.children ?? []), floatPanel]
+            }
+          : {
+              mode: 'float',
+              children: [floatPanel]
+            };
+
+        return { layout: { ...updatedLayout, floatbox } };
+      })
+  }));

package/src/store/toolbar.tsx

@@ -0,0 +1,45 @@
+import { createStore } from 'zustand';
+import React from 'react';
+
+export type ToolbarButtonGroup = {
+  id: string;
+  label?: string;
+  buttons: (ToolbarButton | React.ReactNode)[];
+};
+
+export type ToolbarButton = {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean | (() => boolean);
+};
+
+export type ToolbarStore = {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+  groups: ToolbarButtonGroup[];
+  setGroups: (groups: ToolbarButtonGroup[]) => void;
+  addGroup: (group: ToolbarButtonGroup) => void;
+  removeGroup: (groupId: string) => void;
+  updateGroup: (groupId: string, group: Partial<ToolbarButtonGroup>) => void;
+};
+
+export const toolbarStoreFactory = () =>
+  createStore<ToolbarStore>((set) => ({
+    visible: true,
+    setVisible: (visible) => set({ visible }),
+    groups: [],
+    setGroups: (groups) => set({ groups }),
+    addGroup: (group) => set((state) => ({ groups: [...state.groups, group] })),
+    removeGroup: (groupId) =>
+      set((state) => ({
+        groups: state.groups.filter((g) => g.id !== groupId)
+      })),
+    updateGroup: (groupId, updates) =>
+      set((state) => ({
+        groups: state.groups.map((g) =>
+          g.id === groupId ? { ...g, ...updates } : g
+        )
+      }))
+  }));

package/src/store/traces.ts

@@ -0,0 +1,240 @@
+import type { Engine, INode } from '@kiberon-labs/behave-graph';
+import { create } from 'zustand';
+import type { System } from '@/system';
+
+export type TraceSpan = {
+  id: number;
+  nodeId: string;
+  name: string;
+  start: number;
+  end: number; // NaN while open
+  lane: number;
+};
+
+export type SpanCollector = {
+  capacity: number;
+  spans: TraceSpan[];
+  writeIndex: number;
+  size: number;
+  nextId: number;
+  openByNodeId: Map<string, number[]>;
+  laneOpen: boolean[];
+};
+
+const createCollector = (capacity: number): SpanCollector => ({
+  capacity,
+  spans: Array.from({ length: capacity }) as TraceSpan[],
+  writeIndex: 0,
+  size: 0,
+  nextId: 1,
+  openByNodeId: new Map(),
+  laneOpen: []
+});
+
+const getNodeName = (node: INode): string =>
+  node.label ?? node.description?.typeName ?? node.id;
+
+const allocateLane = (collector: SpanCollector): number => {
+  for (let i = 0; i < collector.laneOpen.length; i++) {
+    if (!collector.laneOpen[i]) {
+      collector.laneOpen[i] = true;
+      return i;
+    }
+  }
+  collector.laneOpen.push(true);
+  return collector.laneOpen.length - 1;
+};
+
+const removeIndexFromArrayInPlace = (arr: number[], index: number): void => {
+  const idx = arr.indexOf(index);
+  if (idx >= 0) arr.splice(idx, 1);
+};
+
+const evictIfNeeded = (collector: SpanCollector, now: number): void => {
+  const i = collector.writeIndex;
+  const existing = collector.spans[i];
+  if (!existing) return;
+
+  // If we are about to overwrite an open span, force-close it.
+  if (Number.isNaN(existing.end)) {
+    existing.end = now;
+    collector.laneOpen[existing.lane] = false;
+    const stack = collector.openByNodeId.get(existing.nodeId);
+    if (stack) {
+      removeIndexFromArrayInPlace(stack, i);
+      if (stack.length === 0) collector.openByNodeId.delete(existing.nodeId);
+    }
+  }
+};
+
+export type TraceStore = {
+  version: number;
+  collector: SpanCollector;
+  clear: () => void;
+  connectEngine: (engine?: Engine) => void;
+  recordNodeStart: (node: INode, startTime?: number) => void;
+  recordNodeEnd: (node: INode, endTime?: number) => void;
+  addSpan: (span: Omit<TraceSpan, 'id'>) => void;
+  updateSpan: (nodeId: string, updates: Partial<TraceSpan>) => void;
+};
+
+export const traceStoreFactory = (_: System) => {
+  let connectedEngine: Engine | undefined;
+  let onStart: ((node: INode) => void) | undefined;
+  let onEnd: ((node: INode) => void) | undefined;
+
+  let rafHandle: number | undefined;
+  let dirty = false;
+
+  const scheduleFlush = (
+    set: (fn: (s: TraceStore) => Partial<TraceStore>) => void
+  ) => {
+    dirty = true;
+    if (rafHandle !== undefined) return;
+    rafHandle = window.requestAnimationFrame(() => {
+      rafHandle = undefined;
+      if (!dirty) return;
+      dirty = false;
+      set((s) => ({ version: s.version + 1 }));
+    });
+  };
+
+  const store = create<TraceStore>((set, get) => ({
+    version: 0,
+    collector: createCollector(10_000),
+
+    clear: () => {
+      const c = get().collector;
+      c.spans = Array.from({ length: c.capacity }) as TraceSpan[];
+      c.writeIndex = 0;
+      c.size = 0;
+      c.nextId = 1;
+      c.openByNodeId.clear();
+      c.laneOpen = [];
+      set((s) => ({ version: s.version + 1 }));
+    },
+
+    connectEngine: (engine?: Engine) => {
+      if (connectedEngine && onStart && onEnd) {
+        connectedEngine.onNodeExecutionStart.removeListener(onStart);
+        connectedEngine.onNodeExecutionEnd.removeListener(onEnd);
+      }
+
+      connectedEngine = engine;
+
+      if (!engine) return;
+
+      onStart = (node) => {
+        get().recordNodeStart(node);
+      };
+
+      onEnd = (node) => {
+        get().recordNodeEnd(node);
+      };
+
+      engine.onNodeExecutionStart.addListener(onStart);
+      engine.onNodeExecutionEnd.addListener(onEnd);
+    },
+
+    recordNodeStart: (node, startTime) => {
+      const c = get().collector;
+      const now = startTime ?? performance.now();
+
+      evictIfNeeded(c, now);
+
+      const lane = allocateLane(c);
+      const index = c.writeIndex;
+
+      const span: TraceSpan = {
+        id: c.nextId++,
+        nodeId: node.id,
+        name: getNodeName(node),
+        start: now,
+        end: Number.NaN,
+        lane
+      };
+
+      c.spans[index] = span;
+
+      const stack = c.openByNodeId.get(node.id) ?? [];
+      stack.push(index);
+      c.openByNodeId.set(node.id, stack);
+
+      c.writeIndex = (c.writeIndex + 1) % c.capacity;
+      c.size = Math.min(c.capacity, c.size + 1);
+
+      scheduleFlush(set);
+    },
+
+    recordNodeEnd: (node, endTime) => {
+      const c = get().collector;
+      const stack = c.openByNodeId.get(node.id);
+      if (!stack || stack.length === 0) return;
+
+      const index = stack.pop()!;
+      if (stack.length === 0) c.openByNodeId.delete(node.id);
+
+      const span = c.spans[index];
+      if (!span || !Number.isNaN(span.end)) return;
+
+      span.end = endTime ?? performance.now();
+      c.laneOpen[span.lane] = false;
+
+      scheduleFlush(set);
+    },
+
+    addSpan: (spanData) => {
+      const c = get().collector;
+
+      // Evict if needed
+      if (c.size >= c.capacity) {
+        evictIfNeeded(c, spanData.start);
+      }
+
+      // Allocate lane if not provided
+      const lane = spanData.lane ?? allocateLane(c);
+      const index = c.writeIndex;
+
+      const span: TraceSpan = {
+        id: c.nextId++,
+        ...spanData,
+        lane
+      };
+
+      c.spans[index] = span;
+
+      const stack = c.openByNodeId.get(span.nodeId) ?? [];
+      stack.push(index);
+      c.openByNodeId.set(span.nodeId, stack);
+
+      c.writeIndex = (c.writeIndex + 1) % c.capacity;
+      c.size = Math.min(c.capacity, c.size + 1);
+
+      scheduleFlush(set);
+    },
+
+    updateSpan: (nodeId, updates) => {
+      const c = get().collector;
+      const stack = c.openByNodeId.get(nodeId);
+      if (!stack || stack.length === 0) return;
+
+      const index = stack[stack.length - 1]!;
+      const span = c.spans[index];
+      if (!span) return;
+
+      Object.assign(span, updates);
+
+      if (updates.end !== undefined && !Number.isNaN(updates.end)) {
+        stack.pop();
+        if (stack.length === 0) c.openByNodeId.delete(nodeId);
+        if (span.lane !== undefined) {
+          c.laneOpen[span.lane] = false;
+        }
+      }
+
+      scheduleFlush(set);
+    }
+  }));
+
+  return store;
+};

package/src/store/variables.ts

@@ -0,0 +1,37 @@
+import type { VariableJSON } from '@kiberon-labs/behave-graph';
+
+import { create } from 'zustand';
+
+type GraphVariables = {
+  [key: string]: VariableJSON;
+};
+
+export type VariableStore = {
+  variables: GraphVariables;
+  setVariable: (key: string, value: VariableJSON) => void;
+  setVariables: (variables: GraphVariables) => void;
+  removeVariable: (key: string) => void;
+};
+
+export const variableStoreFactory = () =>
+  create<VariableStore>((set) => ({
+    variables: {},
+    setVariables: (variables: GraphVariables) =>
+      set(() => ({
+        variables
+      })),
+    setVariable: (key: string, value: VariableJSON) => {
+      set((state) => ({
+        variables: {
+          ...state.variables,
+          [key]: value
+        }
+      }));
+    },
+    removeVariable: (key: string) =>
+      set((state) => {
+        const newVariables = { ...state.variables };
+        delete newVariables[key];
+        return { variables: newVariables };
+      })
+  }));