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

package/src/components/panels/traces/useDerivedSpans.ts

@@ -0,0 +1,212 @@
+import { useMemo } from 'react';
+import type { SpanCollector } from '@/store/traces';
+import type {
+  DerivedData,
+  LaneData,
+  Tick,
+  ViewState,
+  VisualSpan
+} from './types';
+import { calculateTimeInterval, clamp, hashToHue } from './utils';
+
+const MIN_WIDTH_PCT = 0.5;
+const OVERLAP_EPSILON_PCT = 0.5;
+
+const EMPTY: DerivedData = {
+  now: 0,
+  size: 0,
+  lanes: 0,
+  minStart: 0,
+  maxEnd: 0,
+  range: 1,
+  viewStart: 0,
+  viewEnd: 0,
+  viewRange: 1,
+  buckets: [],
+  laneData: [],
+  ticks: []
+};
+
+function computeTicks(
+  viewStart: number,
+  viewEnd: number,
+  viewRange: number
+): Tick[] {
+  const interval = calculateTimeInterval(viewRange);
+  const firstTick = Math.ceil(viewStart / interval) * interval;
+  const ticks: Tick[] = [];
+  for (let t = firstTick; t <= viewEnd; t += interval) {
+    const leftPct = ((t - viewStart) / viewRange) * 100;
+    if (leftPct >= 0 && leftPct <= 100) {
+      ticks.push({ time: t, leftPct });
+    }
+  }
+  return ticks;
+}
+
+export function useDerivedSpans(
+  collector: SpanCollector,
+  version: number,
+  windowMs: number,
+  view: ViewState
+): DerivedData {
+  return useMemo(() => {
+    const now = performance.now();
+    const { capacity, size, writeIndex, spans } = collector;
+
+    if (size <= 0) return { ...EMPTY, now };
+
+    let minStart = Number.POSITIVE_INFINITY;
+    let maxEnd = Number.NEGATIVE_INFINITY;
+    let maxLane = -1;
+
+    const buckets: Array<import('@/store/traces').TraceSpan[]> = [];
+
+    const startIndex = (writeIndex - size + capacity) % capacity;
+    for (let i = 0; i < size; i++) {
+      const idx = (startIndex + i) % capacity;
+      const s = spans[idx];
+      if (!s) continue;
+
+      const end = Number.isNaN(s.end) ? now : s.end;
+      minStart = Math.min(minStart, s.start);
+      maxEnd = Math.max(maxEnd, end);
+      maxLane = Math.max(maxLane, s.lane);
+
+      (buckets[s.lane] ??= []).push(s);
+    }
+
+    if (
+      !Number.isFinite(minStart) ||
+      !Number.isFinite(maxEnd) ||
+      maxEnd <= minStart
+    ) {
+      return {
+        ...EMPTY,
+        now,
+        size,
+        lanes: maxLane + 1,
+        buckets,
+        laneData: []
+      };
+    }
+
+    const fullRange = Math.max(1, maxEnd - minStart);
+
+    const desiredRange = windowMs <= 0 ? fullRange : Math.max(1, windowMs);
+    const desiredStart = Math.max(minStart, maxEnd - desiredRange);
+
+    const effectiveRange = clamp(
+      view.follow ? desiredRange : view.range,
+      1,
+      fullRange
+    );
+    const effectiveStart = clamp(
+      view.follow ? desiredStart : view.start,
+      minStart,
+      maxEnd - effectiveRange
+    );
+
+    const viewStart = effectiveStart;
+    const viewEnd = viewStart + effectiveRange;
+    const viewRange = effectiveRange;
+
+    const laneData: LaneData[] = Array.from({ length: maxLane + 1 }, () => ({
+      stackCount: 1,
+      visualSpans: [] as VisualSpan[]
+    }));
+
+    for (let lane = 0; lane <= maxLane; lane++) {
+      const laneSpans = buckets[lane];
+      if (!laneSpans || laneSpans.length === 0) {
+        laneData[lane] = { stackCount: 1, visualSpans: [] };
+        continue;
+      }
+
+      const tmp: Array<{
+        span: import('@/store/traces').TraceSpan;
+        leftPct: number;
+        widthPct: number;
+        rightPct: number;
+        durationMs: number;
+      }> = [];
+
+      for (const s of laneSpans) {
+        const end = Number.isNaN(s.end) ? now : s.end;
+        if (end < viewStart || s.start > viewEnd) continue;
+
+        const visibleStart = Math.max(s.start, viewStart);
+        const visibleEnd = Math.min(end, viewEnd);
+        if (visibleEnd <= visibleStart) continue;
+
+        const rawLeft = ((visibleStart - viewStart) / viewRange) * 100;
+        const rawWidth = ((visibleEnd - visibleStart) / viewRange) * 100;
+        const leftPct = clamp(rawLeft, 0, 100);
+        const widthPct = clamp(
+          Math.max(MIN_WIDTH_PCT, rawWidth),
+          0,
+          100 - leftPct
+        );
+        const rightPct = leftPct + widthPct;
+        const durationMs = Math.max(0, end - s.start);
+
+        tmp.push({ span: s, leftPct, widthPct, rightPct, durationMs });
+      }
+
+      tmp.sort((a, b) => a.leftPct - b.leftPct);
+
+      const stackRight: number[] = [];
+      const visualSpans: VisualSpan[] = [];
+
+      for (const v of tmp) {
+        let stack = 0;
+        for (; stack < stackRight.length; stack++) {
+          if (v.leftPct >= stackRight[stack]! + OVERLAP_EPSILON_PCT) break;
+        }
+        if (stack === stackRight.length) stackRight.push(v.rightPct);
+        else stackRight[stack] = Math.max(stackRight[stack]!, v.rightPct);
+
+        const hue = hashToHue(v.span.nodeId);
+        const isOpen = Number.isNaN(v.span.end);
+        const lightness = clamp(56 - stack * 7, 30, 60);
+        const bg = isOpen
+          ? `hsla(${hue}, 80%, ${clamp(lightness + 6, 30, 65)}%, 0.35)`
+          : `hsla(${hue}, 80%, ${lightness}%, 0.6)`;
+        const border = `hsla(${hue}, 90%, ${clamp(lightness + 22, 45, 80)}%, 0.95)`;
+
+        visualSpans.push({
+          span: v.span,
+          leftPct: v.leftPct,
+          widthPct: v.widthPct,
+          rightPct: v.rightPct,
+          durationMs: v.durationMs,
+          stack,
+          bg,
+          border
+        });
+      }
+
+      laneData[lane] = {
+        stackCount: Math.max(1, stackRight.length),
+        visualSpans
+      };
+    }
+
+    const ticks = computeTicks(viewStart, viewEnd, viewRange);
+
+    return {
+      now,
+      size,
+      lanes: maxLane + 1,
+      minStart,
+      maxEnd,
+      range: fullRange,
+      viewStart,
+      viewEnd,
+      viewRange,
+      buckets,
+      laneData,
+      ticks
+    };
+  }, [collector, version, windowMs, view.follow, view.range, view.start]);
+}

package/src/components/panels/traces/utils.ts

@@ -0,0 +1,25 @@
+export const hashToHue = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++)
+    hash = (hash * 31 + str.charCodeAt(i)) | 0;
+  return Math.abs(hash) % 360;
+};
+
+export const clamp = (v: number, min: number, max: number): number =>
+  Math.max(min, Math.min(max, v));
+
+const NICE_INTERVALS = [
+  1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000
+] as const;
+
+/**
+ * Picks a "nice" round interval for time-axis grid lines.
+ * Targets roughly 8 ticks across the visible range.
+ */
+export const calculateTimeInterval = (rangeMs: number): number => {
+  const rawInterval = rangeMs / 8;
+  for (const mag of NICE_INTERVALS) {
+    if (mag >= rawInterval) return mag;
+  }
+  return NICE_INTERVALS[NICE_INTERVALS.length - 1]!;
+};

package/src/components/panels/variables/CreateVariableScreen.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import { Variable } from '@kiberon-labs/behave-graph';
+import { useSystem } from '@/system/provider';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeSingleSelect,
+  VscodeOption,
+  VscodeLabel
+} from '@vscode-elements/react-elements';
+import styles from './styles.module.css';
+
+type Props = {
+  onBack: () => void;
+  onCancel: () => void;
+  onCreated?: (variableKey: string) => void;
+};
+
+export function CreateVariableScreen({ onBack, onCancel, onCreated }: Props) {
+  const system = useSystem();
+  const registry = useStore(system.registry);
+  const setVariable = useStore(system.variableStore, (x) => x.setVariable);
+  const controls = useStore(system.controlStore, (x) => x.controls);
+  const defaultControl = useStore(system.controlStore, (x) => x.defaultControl);
+
+  const [newVarName, setNewVarName] = useState('');
+  const [newVarType, setNewVarType] = useState('string');
+  const [newVarInitialValue, setNewVarInitialValue] = useState<any>('');
+
+  const availableTypes = useMemo(() => {
+    return Object.keys(registry.values).sort();
+  }, [registry.values]);
+
+  const getControlComponent = useCallback(
+    (valueType: string) => {
+      return controls[valueType] || defaultControl;
+    },
+    [controls, defaultControl]
+  );
+
+  const NewVarControlComponent = useMemo(() => {
+    return getControlComponent(newVarType);
+  }, [getControlComponent, newVarType]);
+
+  const resetForm = useCallback(() => {
+    setNewVarName('');
+    const valueType = registry.values[newVarType];
+    if (valueType) {
+      setNewVarInitialValue(valueType.creator());
+    }
+  }, [registry.values, newVarType]);
+
+  const handleCreate = useCallback(() => {
+    if (!newVarName.trim()) return;
+
+    const valueType = registry.values[newVarType];
+    if (!valueType) {
+      console.error(`Value type ${newVarType} not found in registry`);
+      return;
+    }
+
+    const newVariable = new Variable(
+      newVarName,
+      newVarName,
+      newVarType,
+      newVarInitialValue
+    );
+
+    setVariable(newVarName, newVariable);
+    onCreated?.(newVarName);
+    resetForm();
+    onBack();
+  }, [
+    newVarName,
+    newVarType,
+    newVarInitialValue,
+    registry.values,
+    setVariable,
+    onCreated,
+    resetForm,
+    onBack
+  ]);
+
+  const handleCancel = useCallback(() => {
+    resetForm();
+    onCancel();
+  }, [resetForm, onCancel]);
+
+  const handleBack = useCallback(() => {
+    resetForm();
+    onBack();
+  }, [resetForm, onBack]);
+
+  return (
+    <>
+      <div className={styles.headerRow}>
+        <h3
+          style={{
+            fontSize: '1.1em',
+            fontWeight: 'bold'
+          }}
+        >
+          Create Variable
+        </h3>
+
+        <VscodeButton secondary onClick={handleBack}>
+          Back
+        </VscodeButton>
+      </div>
+
+      <div className={`${styles.section} ${styles.sectionPadded}`}>
+        <div className={styles.field}>
+          <VscodeLabel>Name:</VscodeLabel>
+          <VscodeTextfield
+            value={newVarName}
+            placeholder="Variable name..."
+            onChange={(e: any) => setNewVarName(e.target.value)}
+          />
+        </div>
+
+        <div className={styles.field}>
+          <VscodeLabel>Type:</VscodeLabel>
+          <VscodeSingleSelect
+            value={newVarType}
+            onChange={(e: any) => {
+              const valueType = registry.values[e.target.value];
+              if (valueType?.serialize && valueType?.creator) {
+                setNewVarInitialValue(valueType.serialize(valueType.creator()));
+              }
+              setNewVarType(e.target.value);
+            }}
+          >
+            {availableTypes.map((type) => (
+              <VscodeOption key={type} value={type}>
+                {type}
+              </VscodeOption>
+            ))}
+          </VscodeSingleSelect>
+        </div>
+
+        <div className={styles.field}>
+          <VscodeLabel>Initial Value:</VscodeLabel>
+          <NewVarControlComponent
+            value={newVarInitialValue}
+            onChange={setNewVarInitialValue}
+            valueType={newVarType}
+          />
+        </div>
+
+        <div className={styles.actionsRow}>
+          <VscodeButton onClick={handleCreate} disabled={!newVarName.trim()}>
+            Save
+          </VscodeButton>
+          <VscodeButton secondary onClick={handleCancel}>
+            Cancel
+          </VscodeButton>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/panels/variables/ManageVariablesScreen.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import type { VariableJSON } from '@kiberon-labs/behave-graph';
+import {
+  VscodeButton,
+  VscodeDivider,
+  VscodeTree,
+  VscodeTreeItem
+} from '@vscode-elements/react-elements';
+import { Plus, TrashSolid } from 'iconoir-react';
+import styles from './styles.module.css';
+import { useSystem } from '@/system';
+import { useStore } from 'zustand';
+import { Icon } from '@/components/primitives/icon';
+
+type ValueControlProps = {
+  value: any;
+  onChange: (value: any) => void;
+  valueType: string;
+};
+
+type Props = {
+  variables: Record<string, VariableJSON>;
+  selectedVarKey: string;
+  onSelectVariable: (key: string) => void;
+  onDeleteVariable: (key: string) => void;
+  onNewVariable: () => void;
+
+  selectedVariable: VariableJSON | null;
+  editValue: any;
+  onChangeEditValue: (value: any) => void;
+  SelectedVarControlComponent: React.ComponentType<ValueControlProps>;
+  onUpdateVariable: () => void;
+};
+
+export function ManageVariablesScreen({
+  selectedVarKey: _selectedVarKey,
+  onSelectVariable,
+  onDeleteVariable,
+  onNewVariable,
+  selectedVariable,
+  editValue,
+  onChangeEditValue,
+  SelectedVarControlComponent,
+  onUpdateVariable
+}: Props) {
+  const system = useSystem();
+  const icons = useStore(system.legendStore, (x) => x.icons);
+  const variables = useStore(system.variableStore, (x) => x.variables);
+
+  const handleTreeSelect = (ev: unknown) => {
+    const detail = (ev as CustomEvent<any>)?.detail;
+    const selectedItems = Array.isArray(detail)
+      ? detail
+      : detail?.selectedItems;
+    const firstSelected = selectedItems?.[0] as HTMLElement | undefined;
+    const key = firstSelected?.dataset?.varKey;
+
+    if (key) {
+      onSelectVariable(key);
+    }
+  };
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <div className={styles.headerTitle}>Variables</div>
+        <Icon title="New variable" onClick={onNewVariable}>
+          <Plus />
+        </Icon>
+      </div>
+      <VscodeDivider />
+
+      <div className={styles.variableList}>
+        {Object.keys(variables).length === 0 ? (
+          <div className={styles.emptyState}>
+            <div className={styles.emptyStateText}>No variables defined</div>
+            <div className={styles.emptyStateHint}>
+              Click the "+" button to create your first variable
+            </div>
+          </div>
+        ) : (
+          <VscodeTree
+            className={styles.tree}
+            onVscTreeSelect={handleTreeSelect}
+          >
+            {Object.entries(variables).map(([name, variable]) => (
+              <VscodeTreeItem
+                key={name}
+                data-var-key={name}
+                active={variable.id == selectedVariable?.id}
+              >
+                <div className={styles.treeItemContent}>
+                  <div className={styles.treeItemIcon}>
+                    {icons[variable.valueTypeName] &&
+                      React.createElement(icons[variable.valueTypeName]!)}
+                  </div>
+                  <div className={styles.treeItemInfo} title={variable.id}>
+                    {variable.name}
+                  </div>
+                </div>
+              </VscodeTreeItem>
+            ))}
+          </VscodeTree>
+        )}
+      </div>
+
+      {selectedVariable && (
+        <div className={styles.selectedEditor}>
+          <div className={styles.editorHeader}>
+            <div className={styles.editorTitle}>Edit Variable</div>
+            <div className={styles.editorVariableName}>
+              {selectedVariable.name}
+            </div>
+          </div>
+
+          <div className={styles.editorFields}>
+            <label className={styles.fieldLabel}>Current Value</label>
+            <div className={styles.fieldControl}>
+              <SelectedVarControlComponent
+                value={editValue}
+                onChange={onChangeEditValue}
+                valueType={selectedVariable.valueTypeName}
+              />
+            </div>
+          </div>
+
+          <div className={styles.editorActions}>
+            <VscodeButton
+              secondary
+              iconOnly
+              title="Delete variable"
+              onClick={() => {
+                onDeleteVariable(selectedVariable.name);
+              }}
+            >
+              <TrashSolid />
+            </VscodeButton>
+            <VscodeButton onClick={onUpdateVariable}>Update Value</VscodeButton>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/panels/variables/index.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useCallback } from 'react';
+import { useSystem } from '@/system/provider';
+import { useStore } from 'zustand';
+import { CreateVariableScreen } from './CreateVariableScreen';
+import { ManageVariablesScreen } from './ManageVariablesScreen';
+import { BasePanel } from '../base';
+
+type VariablesPanelScreen = 'manage' | 'create';
+
+export function VariablesPanel() {
+  const system = useSystem();
+  const variables = useStore(system.variableStore, (x) => x.variables);
+  const setVariable = useStore(system.variableStore, (x) => x.setVariable);
+  const removeVariable = useStore(
+    system.variableStore,
+    (x) => x.removeVariable
+  );
+  const controls = useStore(system.controlStore, (x) => x.controls);
+  const defaultControl = useStore(system.controlStore, (x) => x.defaultControl);
+
+  // Get the appropriate control component for a value type
+  const getControlComponent = useCallback(
+    (valueType: string) => {
+      return controls[valueType] || defaultControl;
+    },
+    [controls, defaultControl]
+  );
+
+  const [screen, setScreen] = useState<VariablesPanelScreen>('manage');
+
+  // Section 2 & 3: Select and edit existing variable
+  const [selectedVarId, setSelectedVarId] = useState<string>('');
+  const [editValue, setEditValue] = useState<any>('');
+
+  // Handle selecting a variable
+  const handleSelectVariable = useCallback(
+    (varKey: string) => {
+      setSelectedVarId(varKey);
+      const variable = variables[varKey];
+
+      if (variable) {
+        setEditValue(variable.initialValue);
+      }
+    },
+    [variables]
+  );
+
+  // Handle updating selected variable
+  const handleUpdateVariable = useCallback(() => {
+    if (!selectedVarId || !variables[selectedVarId]) {
+      return;
+    }
+
+    const variable = variables[selectedVarId];
+    // Force re-render by updating the store
+    setVariable(selectedVarId, {
+      ...variable,
+      initialValue: editValue
+    });
+  }, [selectedVarId, editValue, variables, setVariable]);
+
+  // Handle deleting a variable
+  const handleDeleteVariable = useCallback(
+    (varName: string) => {
+      removeVariable(varName);
+      if (varName === selectedVarId) {
+        setSelectedVarId('');
+        setEditValue('');
+      }
+    },
+    [removeVariable, selectedVarId, variables]
+  );
+
+  const selectedVariable = selectedVarId
+    ? (variables[selectedVarId] ?? null)
+    : null;
+  const SelectedVarControlComponent = selectedVariable
+    ? getControlComponent(selectedVariable.valueTypeName)
+    : defaultControl;
+
+  const goToCreate = useCallback(() => {
+    setScreen('create');
+  }, []);
+
+  const goToManage = useCallback(() => {
+    setScreen('manage');
+  }, []);
+
+  const handleCreatedVariable = useCallback(
+    (variableKey: string) => {
+      setSelectedVarId(variableKey);
+      const created = system.variableStore.getState().variables[variableKey];
+      if (created) {
+        setEditValue(created.initialValue);
+      }
+    },
+    [system.variableStore]
+  );
+
+  return (
+    <BasePanel>
+      {screen === 'create' && (
+        <CreateVariableScreen
+          onBack={goToManage}
+          onCancel={goToManage}
+          onCreated={handleCreatedVariable}
+        />
+      )}
+      {screen === 'manage' && (
+        <ManageVariablesScreen
+          variables={variables}
+          selectedVarKey={selectedVarId}
+          onSelectVariable={handleSelectVariable}
+          onDeleteVariable={handleDeleteVariable}
+          onNewVariable={goToCreate}
+          selectedVariable={selectedVariable}
+          editValue={editValue}
+          onChangeEditValue={setEditValue}
+          SelectedVarControlComponent={SelectedVarControlComponent}
+          onUpdateVariable={handleUpdateVariable}
+        />
+      )}
+    </BasePanel>
+  );
+}