Cato*

SketchSystems.spec

Cato*
  Logged Out
    log in -> Logged In
    sign up -> User Registration
  
  Logged In
    log out -> Logged Out
    onboard user -> Onboarding
    
    Onboarding*
      learn about Cato -> Documentation

      0 of 3 Units Completed
        train Cato -> Training Data Upload
        
      1 of 3 Units Completed
        inspect training results -> Training Results Presentation
        
      2 of 3 Units Completed
        interact with prediction model -> Interactive Prediction
    
    Training Data Upload
      File Input*
        click to select file -> File Dialog
        drag file to select -> File Validation?
          
        No Errors*
        Error File Size
        Warn File Type
        List File
          remove file -> File Input
          upload file -> Loading
      
      File Dialog
        open file -> File Validation?
        cancel -> File Input
        
      File Validation?
        wrong type? -> Warn File Type
        too big? -> Error File Size
        okay? -> List File
        
      Loading
        server accepted -> Success
        
      Success
        
      Failure
        
    
    Training Results Presentation
    
    Interactive Prediction
  
User Registration
  register -> Logged In
    
Documentation

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