Search&

SketchSystems.spec

Search&
  Search Bar
    Inactive*
      focus bar -> Active
    
    Active&
      cancel out -> Inactive

      Input States
        delete all text -> Idle
        enter text -> Typing

        Idle
    
        Typing
          pause typing -> SuggestionsLoading
  
      Suggestions
        SuggestionClosed*

        SuggestionsLoading
          results -> SuggestionsList
          no results -> No Results
          error -> SuggestionsError

        SuggestionsList
          select suggestion -> Idle
        No Results
        SuggestionsError
    
      
      

  

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}`);
}