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

package/src/components/panels/panel/index.module.css

@@ -0,0 +1,66 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.count {
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.9rem;
+}
+
+.table {
+  flex: 1;
+  overflow: auto;
+}
+
+.titleCell {
+  font-weight: 500;
+}
+
+.idCell code {
+  font-size: 0.85rem;
+  color: var(--vscode-textPreformat-foreground);
+  background-color: var(--vscode-textCodeBlock-background);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+}
+
+.groupCell {
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.9rem;
+}
+
+.optionsCell {
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.actionCell {
+  text-align: right;
+}

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

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { useSystem } from '@/system/provider';
+import {
+  VscodeButton,
+  VscodeTable,
+  VscodeTableBody,
+  VscodeTableCell,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableRow
+} from '@vscode-elements/react-elements';
+import { BasePanel } from '../base';
+import styles from './index.module.css';
+
+export const PanelPanel = () => {
+  const system = useSystem();
+
+  // Get all registered panels from the TabLoader
+  const registeredPanels = useMemo(() => {
+    const panels = Object.keys(system.tabLoader.tabs).map((id) => {
+      const tabData = system.tabLoader.tabs[id]?.();
+      return {
+        id,
+        title: tabData?.title || id,
+        group: tabData?.group || 'default',
+        closable: tabData?.closable ?? true,
+        cached: tabData?.cached ?? false
+      };
+    });
+
+    // Sort by title for easier browsing
+    return panels.sort((a, b) => a.title.localeCompare(b.title));
+  }, [system.tabLoader.tabs]);
+
+  const handleOpenPanel = (panelId: string) => {
+    system.tabStore.getState().openTab(panelId);
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>Registered Panels</h2>
+          <div className={styles.count}>{registeredPanels.length} panels</div>
+        </div>
+
+        <VscodeTable className={styles.table}>
+          <VscodeTableHeader slot="header">
+            <VscodeTableHeaderCell>Panel</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>ID</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Group</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Options</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Action</VscodeTableHeaderCell>
+          </VscodeTableHeader>
+          <VscodeTableBody slot="body">
+            {registeredPanels.map((panel) => (
+              <VscodeTableRow key={panel.id}>
+                <VscodeTableCell className={styles.titleCell}>
+                  {panel.title}
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.idCell}>
+                  <code>{panel.id}</code>
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.groupCell}>
+                  {panel.group}
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.optionsCell}>
+                  {panel.cached && <span className={styles.badge}>cached</span>}
+                  {!panel.closable && (
+                    <span className={styles.badge}>not closable</span>
+                  )}
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.actionCell}>
+                  <VscodeButton
+                    onClick={() => handleOpenPanel(panel.id)}
+                    secondary
+                  >
+                    Open
+                  </VscodeButton>
+                </VscodeTableCell>
+              </VscodeTableRow>
+            ))}
+          </VscodeTableBody>
+        </VscodeTable>
+      </div>
+    </BasePanel>
+  );
+};

package/src/components/panels/search/index.module.css

@@ -0,0 +1,66 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.searchGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+}
+
+.searchRow {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.fullWidth {
+    width: 100%;
+}
+
+.resultsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 8px;
+}
+
+.resultsList {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 400px;
+    overflow-y: auto;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    padding: 8px;
+}
+
+.resultItem {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    cursor: pointer;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    background-color: var(--vscode-list-hoverBackground);
+    padding: 8px;
+    transition: all 0.2s;
+}
+
+.resultItem:hover {
+    background-color: var(--vscode-list-activeSelectionBackground);
+}
+
+.resultId {
+    font-weight: bold;
+    font-size: 0.9em;
+}
+
+.resultType {
+    font-size: 0.8em;
+    opacity: 0.7;
+}

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

@@ -0,0 +1,215 @@
+import { annotatedTitle } from '@/annotations/index.js';
+import React from 'react';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeSingleSelect,
+  VscodeOption,
+  VscodeLabel,
+  VscodeTreeItem,
+  VscodeTree,
+  VscodeCollapsible,
+  VscodeBadge
+} from '@vscode-elements/react-elements';
+import { useRefFromStore, useSystem } from '@/system';
+import type { Node } from 'reactflow';
+import { Search } from 'iconoir-react';
+import Fuse from 'fuse.js';
+import { useStore } from 'zustand';
+import { BasePanel } from '../base';
+import styles from './index.module.css';
+import { Icon } from '@/components/primitives/icon';
+
+type AnnotatedNode = Node & {
+  annotations: Record<string, string>;
+};
+
+type SearchResult = {
+  id: string;
+  type: string;
+  title?: string;
+};
+
+export const SearchPanel = () => {
+  const [id, setId] = React.useState('');
+  const [title, setTitle] = React.useState('');
+  const [nodeType, setNodeType] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
+
+  const sys = useSystem();
+  const graphNodes = useStore(sys.nodeStore, (s) => s.nodes);
+  const reactflow = useRefFromStore(sys.refStore, 'reactflow');
+
+  // Get available node types from the current graph
+  const availableNodeTypes = React.useMemo(() => {
+    const types = new Set<string>();
+
+    for (const node of graphNodes) {
+      const type = node?.data?.type;
+      if (typeof type === 'string' && type.length > 0) {
+        types.add(type);
+      }
+    }
+
+    return [...types].sort();
+  }, [graphNodes]);
+
+  const onClick = () => {
+    if (!reactflow) {
+      return;
+    }
+
+    const nodes = sys.nodeStore.getState().nodes;
+    const graphNodes = Object.values(nodes);
+
+    // Find all nodes matching the ID (partial match)
+    const matchingNodes = graphNodes.filter((n) =>
+      n.id.toLowerCase().includes(id.toLowerCase())
+    );
+
+    const results: SearchResult[] = matchingNodes.map((n) => ({
+      id: n.id,
+      type: n.data.type,
+      title: (n as AnnotatedNode).annotations?.[annotatedTitle]
+    }));
+
+    setSearchResults(results);
+  };
+
+  const onClickTitle = () => {
+    if (!reactflow) {
+      return;
+    }
+
+    const nodes = sys.nodeStore.getState().nodes;
+    const graphNodes = Object.values(nodes);
+
+    // Filter nodes that have titles
+    const nodesWithTitles = graphNodes.map((n) => ({
+      node: n,
+      title: (n as AnnotatedNode).data.type
+    }));
+
+    // Use Fuse.js for fuzzy search
+    const fuse = new Fuse(nodesWithTitles, {
+      keys: ['title'],
+      threshold: 0.4, // Lower = more strict, Higher = more fuzzy (0.0 = exact, 1.0 = match anything)
+      includeScore: true,
+      ignoreLocation: true
+    });
+
+    const fuseResults = fuse.search(title);
+    const matchingNodes = fuseResults.map((result) => result.item.node);
+
+    const results: SearchResult[] = matchingNodes.map((n) => ({
+      id: n.id,
+      type: n.data.type,
+      title: (n as AnnotatedNode).annotations?.[annotatedTitle]
+    }));
+
+    setSearchResults(results);
+  };
+
+  const onClickType = () => {
+    if (!reactflow || !nodeType) {
+      return;
+    }
+
+    const nodes = sys.nodeStore.getState().nodes;
+    const graphNodes = Object.values(nodes);
+
+    // Find all nodes matching the selected type
+    const matchingNodes = graphNodes.filter((n) => n.data.type === nodeType);
+
+    const results: SearchResult[] = matchingNodes.map((n) => ({
+      id: n.id,
+      type: n.data.type,
+      title: (n as AnnotatedNode).annotations?.[annotatedTitle]
+    }));
+
+    setSearchResults(results);
+  };
+
+  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) {
+      sys.actionStore.getState().actions.focusNode(key);
+    }
+  };
+
+  return (
+    <BasePanel>
+      <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Find Node</span>
+
+      <div className={styles.searchGroup}>
+        <VscodeLabel>Find by ID</VscodeLabel>
+        <div className={styles.searchRow}>
+          <VscodeTextfield
+            className={styles.fullWidth}
+            value={id}
+            onChange={(e: any) => setId(e.target.value)}
+          />
+          <Icon onClick={onClick}>
+            <Search />
+          </Icon>
+        </div>
+      </div>
+
+      <div className={styles.searchGroup}>
+        <VscodeLabel>Find by Title</VscodeLabel>
+        <div className={styles.searchRow}>
+          <VscodeTextfield
+            className={styles.fullWidth}
+            value={title}
+            onChange={(e: any) => setTitle(e.target.value)}
+          />
+          <Icon onClick={onClickTitle}>
+            <Search />
+          </Icon>
+        </div>
+      </div>
+
+      <div className={styles.searchGroup}>
+        <VscodeLabel>Find by Type</VscodeLabel>
+
+        <VscodeSingleSelect
+          className={styles.fullWidth}
+          value={nodeType}
+          onChange={(e: any) => setNodeType(e.target.value)}
+        >
+          <VscodeOption value="">Select a type...</VscodeOption>
+          {availableNodeTypes.map((type) => (
+            <VscodeOption key={type} value={type}>
+              {type}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+        <VscodeButton onClick={onClickType} disabled={!nodeType}>
+          Search
+        </VscodeButton>
+      </div>
+
+      {searchResults.length > 0 && (
+        <VscodeCollapsible title="Results" open>
+          <VscodeBadge slot="decorations">{searchResults.length}</VscodeBadge>
+          <VscodeTree onVscTreeSelect={handleTreeSelect}>
+            {searchResults.map((result) => (
+              <VscodeTreeItem key={result.id} data-var-key={result.id}>
+                <span>
+                  # {result.id} / {result.title}
+                </span>
+                <span slot="description">{result.type}</span>
+              </VscodeTreeItem>
+            ))}
+          </VscodeTree>
+        </VscodeCollapsible>
+      )}
+    </BasePanel>
+  );
+};

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

@@ -0,0 +1,206 @@
+import { useSystem } from '@/system/provider';
+import {
+  EDGE_TYPE,
+  LAYOUT_TYPE,
+  type EdgeType,
+  type LayoutType
+} from '@/store/settings';
+
+import {
+  VscodeCheckbox,
+  VscodeDivider,
+  VscodeLabel,
+  VscodeOption,
+  VscodeSingleSelect
+} from '@vscode-elements/react-elements';
+import { useStore } from 'zustand';
+import styles from './styles.module.css';
+import { BasePanel } from '../base';
+
+const EdgeValues = Object.values(EDGE_TYPE);
+const LayoutValues = Object.values(LAYOUT_TYPE);
+
+const SectionTitle = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.title}>{children}</div>;
+};
+
+const Description = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div
+      style={{
+        fontSize: '0.85em',
+        color: 'var(--vscode-descriptionForeground)',
+        opacity: 0.9
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const SelectSetting = ({
+  label,
+  description,
+  value,
+  onChange,
+  children
+}: {
+  label: string;
+  description: React.ReactNode;
+  value: string;
+  onChange: (value: string) => void;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col gap-1 justify-start">
+      <VscodeLabel>{label}</VscodeLabel>
+      <Description>{description}</Description>
+      <VscodeSingleSelect
+        value={value}
+        onChange={(e: any) => {
+          const next = e?.target?.value as string | undefined;
+          if (next) onChange(next);
+        }}
+      >
+        {children}
+      </VscodeSingleSelect>
+    </div>
+  );
+};
+
+const ToggleSetting = ({
+  label,
+  description,
+  checked,
+  onChange
+}: {
+  label: string;
+  description: React.ReactNode;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) => {
+  return (
+    <div className="flex gap-2 justify-start">
+      <VscodeCheckbox
+        toggle
+        checked={checked}
+        onChange={(event: any) => onChange(Boolean(event?.target?.checked))}
+      />
+      <div className="flex flex-col justify-start gap-0.5">
+        <VscodeLabel>{label}</VscodeLabel>
+        <Description>{description}</Description>
+      </div>
+    </div>
+  );
+};
+
+export const Settings = () => {
+  const system = useSystem();
+
+  const settings = useStore(system.systemSettings);
+
+  return (
+    <BasePanel>
+      <div className="flex flex-col gap-3">
+        <SectionTitle>Layout</SectionTitle>
+        <SelectSetting
+          label="Edge Type"
+          description="Select the type of edge to use in the graph editor."
+          value={settings.edgeType}
+          onChange={(value) => settings.setEdgeType(value as EdgeType)}
+        >
+          <VscodeOption value="">Select an edge type...</VscodeOption>
+          {EdgeValues.map((type) => (
+            <VscodeOption key={type} value={type}>
+              {type}
+            </VscodeOption>
+          ))}
+        </SelectSetting>
+
+        <SelectSetting
+          label="Layout Type"
+          description="Select the type of layout engine to use in the graph editor."
+          value={settings.layoutType}
+          onChange={(value) => settings.setLayoutType(value as LayoutType)}
+        >
+          <VscodeOption value="">Select a layout type...</VscodeOption>
+          {LayoutValues.map((type) => (
+            <VscodeOption key={type} value={type}>
+              {type}
+            </VscodeOption>
+          ))}
+        </SelectSetting>
+
+        <VscodeDivider />
+
+        <SectionTitle>Accessibility</SectionTitle>
+        <ToggleSetting
+          label="Show inline types"
+          description={
+            'Adds additional spans to help differentiate types for colorblind users.'
+          }
+          checked={settings.inlineTypes}
+          onChange={(value) => settings.setInlineTypes(value)}
+        />
+
+        <VscodeDivider />
+
+        <SectionTitle>Interaction</SectionTitle>
+        <ToggleSetting
+          label="Use delayed interaction"
+          description={'Forces a user to click save to update port.'}
+          checked={settings.delayedUpdate}
+          onChange={(value) => settings.setDelayedUpdate(value)}
+        />
+        <ToggleSetting
+          label="Click to connect"
+          description={
+            'Allows you to quick connect nodes by clicking on the 2 port.'
+          }
+          checked={settings.connectOnClick}
+          onChange={(value) => settings.setConnectOnClick(value)}
+        />
+
+        <VscodeDivider />
+
+        <SectionTitle>Display</SectionTitle>
+        <ToggleSetting
+          label="Show inline values"
+          description={
+            'Shows values directly on the node. Useful for debugging but can be cluttered.'
+          }
+          checked={settings.inlineValues}
+          onChange={(value) => settings.setInlineValues(value)}
+        />
+        <ToggleSetting
+          label="Show Minimap"
+          description={'Shows the minimap in the graph editing area.'}
+          checked={settings.showMinimap}
+          onChange={(value) => settings.setShowMinimap(value)}
+        />
+        <ToggleSetting
+          label="Show Grid"
+          description={'Shows the grid in the graph editing area.'}
+          checked={settings.showGrid}
+          onChange={(value) => settings.setShowGrid(value)}
+        />
+        <ToggleSetting
+          label="Snap to Grid"
+          description={'Snaps nodes to the grid while dragging.'}
+          checked={settings.snapGrid}
+          onChange={(value) => settings.setSnapGrid(value)}
+        />
+
+        <VscodeDivider />
+
+        <SectionTitle>Performance</SectionTitle>
+        <ToggleSetting
+          label="Show execution time"
+          description={'Shows how long it takes for a node to process.'}
+          checked={settings.showTimings}
+          onChange={(value) => settings.setShowTimings(value)}
+        />
+      </div>
+    </BasePanel>
+  );
+};

package/src/components/panels/systemSettings/styles.module.css

@@ -0,0 +1,11 @@
+.title {
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--vscode-foreground);
+}
+
+.description {
+    font-size: 0.85em;
+    color: var(--vscode-descriptionForeground);
+    opacity: 0.9;
+}

package/src/components/panels/traces/GridLines.tsx

@@ -0,0 +1,38 @@
+import { memo } from 'react';
+import type { Tick } from './types';
+
+const LINE_STYLE_BASE: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: 1,
+  backgroundColor: 'var(--vscode-panel-border)',
+  opacity: 0.3
+};
+
+type GridLinesProps = {
+  ticks: Tick[];
+  padding: number;
+};
+
+export const GridLines = memo(function GridLines({
+  ticks,
+  padding
+}: GridLinesProps) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: padding,
+        right: padding,
+        bottom: 0,
+        pointerEvents: 'none'
+      }}
+    >
+      {ticks.map(({ time, leftPct }) => (
+        <div key={time} style={{ ...LINE_STYLE_BASE, left: `${leftPct}%` }} />
+      ))}
+    </div>
+  );
+});