1 files changed, 9 insertions, 3 deletions
diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js
index 591af03..760da82 100644
--- a/animism-align/frontend/views/align/containers/timeline.container.js
+++ b/animism-align/frontend/views/align/containers/timeline.container.js
@@ -23,7 +23,8 @@ class Timeline extends Component {
     this.handleKeydown = this.handleKeydown.bind(this)
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleWheel = this.handleWheel.bind(this)
-    this.handleClick = this.handleClick.bind(this)
+    this.handleContainerClick = this.handleContainerClick.bind(this)
+    this.handleTimelineClick = this.handleTimelineClick.bind(this)
   }
   componentDidMount() {
     this.bind()
@@ -103,7 +104,11 @@ class Timeline extends Component {
     const cursor_ts = positionToTime(e.pageY, this.props.timeline)
     actions.align.setCursor(cursor_ts)
   }
-  handleClick(e) {
+  handleContainerClick(e) {
+    console.log('container click')
+    actions.align.clearSelectedAnnotation()
+  }
+  handleTimelineClick(e) {
     const play_ts = positionToTime(e.pageY, this.props.timeline)
     if (e.pageX < WAVEFORM_SIZE * 0.67) {
       actions.audio.seek(play_ts)      
@@ -115,11 +120,12 @@ class Timeline extends Component {
     return (
       <div
         className='timeline'
+        onClick={this.handleContainerClick}
         onWheel={this.handleWheel}
         onMouseMove={this.handleMouseMove}
       >
         <div className='timelineColumn'>
-          <Waveform onClick={this.handleClick} />
+          <Waveform onClick={this.handleTimelineClick} />
           <Ticks timeline={this.props.timeline} />
           <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
         </div>