Execution Overlay: Page Layout

How should the diagram + execution details be arranged?

DIAGRAM
from:jms
log
bean
to:http
100%
Loop 2/5
Input Output Headers Error Timeline
{"orderId": "ORD-1234",
 "product": "Widget A",
 "quantity": 5}

A: Top/Bottom Split (IDE Style)

Diagram on top, tabbed detail panel below. Resizable splitter between them. Maximizes diagram width. Tabs: Input, Output, Headers, Error, Timeline.

Pros

  • Full diagram width
  • Familiar IDE pattern
  • Detail panel always visible

Cons

  • Vertical space shared
  • Diagram shrinks on small screens
DIAGRAM
from:jms
log
bean
100%
log (processor-3)
COMPLETED - 12ms
Input Output Headers
{"orderId": "ORD-1234",
 "product": "Widget A",
 "quantity": 5,
 "price": 29.99}

B: Left/Right Split

Diagram on left, collapsible detail panel on right. Slide-in when node selected. Diagram keeps full height.

Pros

  • Full diagram height
  • Panel can collapse
  • Good for wide screens

Cons

  • Steals diagram width
  • Tight on narrow screens
DIAGRAM
from:jms
log
bean
to:http
100%
Processors
from:jms - 2ms
log - 12ms
bean - FAILED
to:http - skipped
Input Output Headers
{"orderId": "ORD-1234",
 "product": "Widget A"}

C: Top/Bottom with Processor List

Diagram on top, bottom split into processor list (left) + detail tabs (right). Clicking processor in list or diagram syncs selection. Most information density.

Pros

  • Processor list as navigation
  • Full diagram width
  • Maximum information density

Cons

  • More complex layout
  • May feel crowded