# Interactive Designer

Without real-time updates, monitoring a running process means polling the database or asking users to refresh the page. By the time the UI
catches up, the process may have moved to a different state.

The Interactive Designer uses Workflow Engine's Real-Time Tracking Plugin to push state changes to the designer as they happen. When a timer
fires, a command executes, or a transition completes, the designer updates the visual representation - highlighting the current activity and
showing the new state - without a page reload.

## What it is

The Interactive Designer is a combination of a server-side SignalR hub (`WorkflowEngineHub`) and a client-side SignalR connection built into
the Workflow Designer component. The server tracks process instance state changes and broadcasts them to all connected designer
instances. The designer receives the updated state and re-renders the current activity, available transitions, and status indicators.

The feature is activated when all three conditions are met: the runtime has the `RealTimeTrackingPlugin` registered (detected through the
designer API), a `ProcessId` is available, and the designer receives a `realTimeTrackingUrl` pointing to the SignalR hub.

**For developers:** On the server, register the SignalR hub and add the `RealTimeTrackingPlugin` to the runtime. On the client, pass the hub
URL to the `WorkflowDesigner` constructor:

```csharp
// Server-side: register the hub and plugin
app.MapRealTimeTracking("/workflowHub");

runtime.WithPlugin(new RealTimeTrackingPlugin());
```

```typescript
// Client-side: pass the SignalR hub URL in the designer settings
const designer = new WorkflowDesigner({
    apiurl: "https://your-server/designer-api",
    renderTo: "designer-container",
    realTimeTrackingUrl: "https://your-server/workflowHub",
    processId: "a1b2c3d4-...",
});
```

### How it works

1. **SignalR connection** - The designer opens a SignalR connection to the configured hub endpoint. SignalR negotiates the best available
   transport (WebSocket, SSE, or long polling) automatically.

2. **State change detection** - The Real-Time Tracking Plugin subscribes to process instance state changes. In single-server mode, changes
   are detected directly. In multi-server mode, a background poller checks the database at a configurable interval (default 2 seconds).

3. **Broadcast** - When a change is detected, the server calls `ProcessChanged` on the SignalR hub, which pushes the updated process
   instance state to all connected clients.

4. **Rendering** - The designer's `UpdateCurrentState` method parses the updated state and calls `Draw` to re-render the affected elements.

### Multi-server mode

In clustered deployments, the Real-Time Tracking Plugin uses a background poller (`MultiServerNotifier`) that checks the persistence
provider for changes at a configurable interval. When any node in the cluster advances a process, the poller detects the timestamp change
and broadcasts the update through SignalR. No external event bus or coordinator is required.

## When to use it

Use the Interactive Designer whenever users need to monitor running process instances without refreshing the page:

- **Operations dashboards** where support staff monitor active process instances and their current states.
- **Approval workflows** where managers see approval requests arrive and can respond immediately.
- **Process monitoring** in production environments where rapid feedback on execution status is critical.
- **Demonstration and training** scenarios where showing process execution as it happens improves understanding.

The Interactive Designer is for observation and monitoring rather than process design. Use the
standard [Workflow Designer](https://docs.workflowengine.io/evaluate/workflow-engine-features/workflow-designer/) for creating and editing process schemes.

## Frequently asked questions

**Does the Interactive Designer require additional server configuration?**

Yes. The server must register the SignalR hub with `MapRealTimeTracking("/workflowHub")` and add the `RealTimeTrackingPlugin` to the
runtime. The hub endpoint is configurable; the default is `/workflowHub`. SignalR handles transport negotiation automatically, but WebSocket
connections may require WebSocket support on your load balancer or reverse proxy.

**Does the Interactive Designer work with clustered deployments?**

Yes. In multi-server mode, the Real-Time Tracking Plugin polls the shared database at a configurable interval (default 2 seconds) and
broadcasts changes through SignalR when a transition is detected. No external event bus is needed.

**What happens when the real-time connection drops?**

SignalR's client library automatically attempts to reconnect. The designer does not need custom reconnection logic. Once reconnected, the
next state change triggers a full update of the process visualization.

**Is the Interactive Designer available with all editions?**

Yes. The Real-Time Tracking Plugin is available with Workflow Engine Free and every commercial Edition of Workflow Engine and Workflow
Engine NEO. Real-time updates require installing and registering the plugin, configuring the SignalR hub, and setting
`realTimeTrackingUrl` as described above.

## See also

- [Workflow Designer](https://docs.workflowengine.io/evaluate/workflow-engine-features/workflow-designer/): The standard Workflow Designer for creating and editing process schemes.
- Real-Time Tracking Plugin: Server-side plugin that broadcasts process state changes via SignalR.
- [Process Logs](https://docs.workflowengine.io/evaluate/workflow-engine-features/process-logs/): Full audit trail of every state change on a process instance.