Engine Timeline Visualizer¶

Engine communication¶

This interactive tutorial helps you explore how we envision engines communicating through message passing. The visualization tool takes a JSON configuration and renders an animated timeline of message interactions between engines.

Getting Started¶

how to use¶

Start the visualization by clicking dotted message lines.
Hover over elements to see detailed tooltips.
Watch the timeline scroll automatically as messages propagate.
Observe engine states update in real-time above each engine.

Visual interface overview¶

Engine Nodes: Coloured boxes at top representing system components.
Timeline: Vertical lines showing message history and potential paths.
Message Types:
- Dotted Lines: Potential messages (click to send).
- Solid Lines: Active message animations
- Faded Lines: Historical messages

Core Concepts¶

message lifecycle¶

Initiation: Click potential message (dotted line).
Transmission: Animation shows message travelling between engines.
Processing: Receiving engine evaluates message against handlers.
Response: New potential messages generated based on updated state.

Configuration Guide¶

JSON Schema Structure

{
"engines": [
    {
    "name": "EngineName",
    "initialState": any,
    "messageHandlers": [
        {
        "stateEffect": "return state + 1;",
        "guard": "return messageType === 'messageType1';",
        "generateMessages": [
            {
            "to": "TargetEngineName",
            "type": "responseMessageType",
            "payload": null
            }
        ]
        }
    ],
    "initialMessages": [
        {
        "to": "TargetEngineName",
        "type": "initialMessageType",
        "payload": null
        }
    ]
    }
]
}

Field Reference

Engine configuration¶

Field	Type	Description
`name`	string	Unique engine identifier
`initialState`	any	Starting state value
`messageHandlers`	array	Message processing rules
`initialMessages`	array	Initial outgoing messages

Handler configuration¶

Field	Context Variables	Description
`stateEffect`	`state`, `payload`	JS code returning new state
`guard`	`state`, `payload`, `messageType`	JS condition for handler activation
`generateMessages`	`state`, `payload`	Messages to send if guard passes

Advanced Features¶

Special Message Handling

Loopback Messages: Use "to": "from" to return messages to sender

Dynamic Payloads: Include JS code in payload strings:

"payload": "return {timestamp: Date.now(), value: state}"

State Access: Handlers can access:
- state: Current engine state
- payload: Received message data
- from: Sender engine name
- messageType: Type of received message