   getInitialState: ->
     notifications: {}
     time: 0
-
-  componentWillUpdate: ->
-    @hideAnalyzeError() if @state.notifications.error
+    playing: false
 
   handleTimeChange: (time) ->
     if @state.time != time
-      NotificationStore.setVirtualTime(time, @state.notifications)
-      @setState time: time
+      @setState time: time, playing: false
 
   hideAnalyzeError: ->
     @showInErrorArea(<span />)

    ]

    <ButtonToolbar>
      <Button className="analyze" id="analyze" onClick={@analyze} bsStyle="success" style={marginBottom: '5px'}>
      Analyze
        <div id="analyzeError" ref="analyzeError" />
      </Button>
      { if showReplayArea then replayArea }
    </ButtonToolbar>

  showInErrorArea: (component)->
    React.render(component, @refs.analyzeError.getDOMNode())

  componentWillReceiveProps: (nextProps) ->
    unless R.eq(@props.observable, nextProps.observable)
      @setState notifications: getNotifications(nextProps.observable)

  componentWillUpdate: (nextProps, nextState) ->
    @hideAnalyzeError() if @state.notifications.error
    @showAnalyzeError() if nextState.notifications.error

    unless nextState.playing
      # could optimize somewhat to filter out pointless time changes
      NotificationStore.setVirtualTime(nextState.time, nextState.notifications)

  componentDidMount: ->
    # force componentWillUpdate
    @setState notifications: getNotifications(@props.observable)

  play: ->
    playCallback = (time) =>
      @setState time: time, playing: true
    NotificationStore.play @state.notifications, @state.time, playCallback

  render: ->
    showReplayArea = R.keys(@state.notifications).length > 0 && !@state.notifications.error
