@dxos/plugin-conductor

@dxos/plugin-conductor

Summary

The system is built on @dxos/graph as the core abstraction layer Canvas visualization consists of:

• A graph of reactive Shape objects (esp. Polygon, Path) and corresponding components
• Polygons have a generic outline Frame, which may include Anchor points, which are used to connect Path objects
• Default positional layout with pluggable auto-layout options
• No direct knowledge of computation logic

Compute functionality:

• Implemented via a custom ShapeRegistry containing logic gates
• Shapes maintain dual representation in both canvas and state machine graphs
• Future iteration will separate these into parallel graphs

State machine behavior:

• Nodes follow ComputeNode<INPUT, OUTPUT> typing pattern
• Basic nodes like switches use Switch<S.Void, S.Boolean> schema
• Execution starts from nodes requiring no input
• Output propagates through graph based on node linkage
• Node firing occurs when all input properties are satisfied

Reactive integration:

• ComputeNode state changes are Effect signals
• Canvas React components automatically update based on these signals

Development

Phase 1: Basic editor

• Canvas with pan and zoom (@dxos/react-canvaas).
• General graph data structure (@dxos/graph).
• Radix-style Editor component, with Canvas, Grid and Toolbar.
• Actions and key shortcuts.
• Basic shapes: Polygons and Paths.
• Automatic layout.
• Path animations (bullets).
• Form properties.
• Copy/paste.
• Basic persistence (Graph should be passed an ECHO object, not recreate one).
• Grid bug when in Composer.
• Move all selected.
• Undo/redo (history).
• Snap to edges or center? (currently center).

Phase 2:

• FunctionShape components with properties and anchor points. Add/delete and Play buttons.
• Shape registry.
  • Custom frames.
  • Custom anchors.
  • Bezier connectors.
  • Pluggable drag/drop logic: determines which drag/drop targets are active; replaces current dragging/linking state.
  • Select/edit Rectangle/ellipse/function name.
  • Delete link when deleting anchor.
  • Prevent input anchors being used multiple times (custom rule).
  • Drag to move edge.
  • Green anchors if match.
  • Touch input (ipad).
  • Close frame when resizing.
  • Scale resizing when zoomed.

Phase 3: State machine

• Generalize function anchors (e.g., shape with anchors).
• Shape => ComputeNode? (e.g., get properties, current state, etc.)
• State machine (local implementation); run mode.
  • Function shape driven by schema; add property.
  • All compute nodes should be driven by schema.
  • Connect state machine.
• Logic gates (AND, etc.)
• Timer.
• Select function via properties (show schema).
• GPT (with prompt and base prompt inputs).

Phase 4:

• Group/collapse nodes; hierarchical graph editor.

Technical Debt

• AttentionContainer (and key management).
• Factor out common Toolbar pattern (with state observers).
• Reconcile Graph with framework (ECHO, app-graph, etc.)
• Reconcile @antv layouts with @dxos/plugin-debug.
• TypedObject and schema id property.

Design Issues

• Represent all compute node properties as inputs? (e.g., trigger).