@startuml redux-eventbus

skinparam {
  linetype ortho
  monochrome true
  ArrowColor black
  backgroundColor transparent
  classBackgroundColor transparent
  ' style strictuml

  participantBackgroundColor transparent
  ' participantBorderColor black

  databaseBackgroundColor transparent
  ' databaseBorderColor FireBrick
  ' databaseBorderColor Crimson
  databaseBorderColor Maroon
  ' databaseBorderColor brown
  ' databaseBorderColor DarkRed
  ' databaseBorderColor black

  actorBackgroundColor transparent
  ' actorBorderColor black

  componentBackgroundColor transparent
  ' componentBorderColor black
}

actor Frontend as user
database "Redux Store" as store
participant "SockJS EventBus" as eb

== Connection initialization ==

user -> store++: <i>Request connection to </i> { url = /eventbus/ }
store -> store: <i>Dispatch</i> ebConnecting <i>action</i>
store --> eb++: <i>Try connection</i>
eb --> store: <i>Connected</i>
store -> store: <i>Dispatch</i> ebConnected <i>action</i>
store -> user: <i>Update GUI</i>
deactivate store
...
user -> store++: <i>Dispatch action</i> ebUpload
store -> store++: <i>Dispatch action</i> ebSend { files }
store -> eb: <i>Send at address</i> protelis.web.exec.setup
eb -->: <i>Send source code</i>
eb <--: <i>Receive execution ID</i>
eb -> store: { connection = "connected", execution.status = "connecting" }
store -> user: <i>React updates view</i>
deactivate store
' ...
' eb <--: <i>Initialization step done</i>
' eb -> store: { execution.status = "INIT" }
' store -> user: <i>React updates view</i>

== Execution lifecycle ==

' user -> store: { play = true }
' store -> eb: <i>Send start message on</i>: protelis.web.exec.{id}.init
' eb -->: <i>Send start message</i>
eb <--: <i>Receive update message on</i> protelis.web.exec.{id}.init
eb -> store: <I>Dispatch</i> drawInit <i>action</i>
store -> user: <i>React renders update graphically</i>
loop Code execution
  eb <--: <i>Receive update message on</i> protelis.web.exec.{id}.step
  eb -> store: <I>Dispatch</i> drawStep <i>action</i>
  store -> user: <i>React renders update graphically</i>
end
eb <--: <i>Receive update message on</i> protelis.web.exec.{id}.end
eb -> store: <I>Dispatch</i> drawEnd <i>action</i>
store -> user: <i>React renders update graphically</i>

@enduml
