     activeSort:
       name: "score"
       ascending: true
-    problemClassifier: (problem) -> true
+    problemClassifier: [
+      (problem) -> true
+    ]
 
   onFilterChange: (filter) ->
     try

      activeSort: $set: {name: name, ascending: ascending}

  setClassifier: (classifierState, classifier) ->
    if not classifierState
      classifier = (problem) -> true

    @setState update @state,
      problemClassifier: $set: classifier

  filterProblems: (problems) ->
    visibleProblems = _.filter problems, ((problem) ->
      (@state.filterRegex.exec problem.name) != null and @state.problemClassifier problem
    ).bind this

    sortedProblems = _.sortBy visibleProblems, @state.activeSort.name

    </PanelGroup>

ClassifierItem = React.createClass
  handleClick: (e) ->
    @props.setClassifier !@props.active, @props.classifier
    @props.onExclusiveClick @props.name

  render: ->
    glyph = <Glyphicon glyph="ok"/>

    <ListGroupItem onClick={@handleClick}>
        {@props.name} {if @props.active then glyph} <div className="pull-right"><Badge>{@props.size}</Badge></div>
    </ListGroupItem>

ProblemClassifier = React.createClass
  getInitialState: ->
    _.object ([classifier.name, false] for classifier in @props.data)

  handleClick: (name) ->
    activeStates = @getInitialState()
    activeStates[name] = !@state[name]
    @setState activeStates

  render: ->
    <Panel header={@props.name} defaultExpanded collapsible>
      <ListGroup fill>
        {@props.data.map ((data, i) ->
          <ClassifierItem onExclusiveClick={@handleClick} active={@state[data.name]}
            key={i} setClassifier={@props.setClassifier} {...data}/>
        ).bind this}
      </ListGroup>
    </Panel>
