Wizard UI for Models

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
<div class="container-fluid" id='main'>
   <div class="row">
       <div class="col-xs-12 col-md-3" id='app'>
         
       </div>
   </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.content{min-height: 450px;}

div.slider{margin-bottom: 10px;}
select.distribution{margin-bottom: 15px;}
span.slider__label,
span.slider__value{
  margin-bottom: 10px;
}

.x-axis-layer path,
.x-axis-layer line {
  fill: none;
  stroke: black;
  stroke-opacity: 0.8;
  shape-rendering: crispEdges;
}

CoffeeScript

R = React.DOM
Rc = React.createElement
Rb = ReactBootstrap


DAT = [
  {
    question: "Hi! I am here to help you figure out an appropriate model to use for your task. Are you ready?",
    responses: ["Yes"]
  },
  {
    Yes:
      question: "What are you trying to predict?"
      responses: ["Values", "Categories"]
  },
  {
    YesValues: 
      question: "You are looking at a Regression task! What can you tell me about your values?"
      responses: ["Discrete", "Continuous"]
    YesCategories:
      question: "You are looking at a Classification task! Are there more than two categories?"
      responses: ["Yes", "No"]
  },
  {
   YesValuesDiscrete: 
     question: "Your model choices are"
     responses: ["Count Regression", "Gamma Regression"],
   YesValuesContinuous:
     question: "Your model choices are"
     responses: [
      "Linear Regression"
      "SVM Regression"
      "Boosted Regression"
     ]
   YesCategoriesNo:
     question: "Your model choices are"
     responses: [
       "Logistic Regression"
       "SVM Classification"
     ]
   YesCategoriesYes:
     question: "Your model choices are"
     responses: [
       "Decision Tree Classification"
       "Boosted Model Classification"
       "Forest Model Classification"
     ]
  }
  
]


navInstance = (props) ->
  {Nav, NavItem} = Rb
  makeNavItem = (d, i) -> Rc(NavItem, 
    {key: i, eventKey: i, href: "#", disabled: props.responded < i}, d
  )
  Rc Nav, props, props.steps.map(makeNavItem)

pagerInstance = (props) ->
  {Pager, PageItem} = Rb
  {disablePrev, disableNext, step} = props
  Rc Pager, {},
    Rc PageItem, {href: "#", previous: true, disabled: disablePrev
      , onClick: step(-1)}, "<<"
    Rc PageItem, {href: "#", next: true, disabled: disableNext
      , onClick: step(1)}, ">>"
    
progressBar = (props) ->
  {ProgressBar} = Rb
  Rc ProgressBar, {now: props.now, style: {height: 10}}
    
Question = (props) ->
  {curPage, setResponses, responses} = props
  if curPage is 0 
    Q =...