Master-Detail Synchronizer

SketchSystems.spec

Master-Detail Synchronizer
  Initializing
    initialized -> Connecting
  Connecting
    success -> Connected
  Connected
    Starting Sync
      Loading Local
        done -> Loading Remote
      Loading Remote
        done -> Subscribing
        Querying Metadata
          Loading Metadata Page
          done -> Loading Docs
        Loading Docs
          Loading Doc
          done -> Subscribing
      Subscribing
        subscribed -> Syncing
    Syncing
      receiveUpdate -> Syncing
    disconnect -> Not Connected    
  Not Connected
    connect -> Connecting

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}