diff --git a/light9/web/edit-choice.coffee b/light9/web/edit-choice.coffee
--- a/light9/web/edit-choice.coffee
+++ b/light9/web/edit-choice.coffee
@@ -22,7 +22,8 @@ Polymer
       event.preventDefault()
       @uri = event.dataTransfer.getData('text/uri-list')
       @updateLabel()
-      
+      @$.box.classList.remove('over')
+
     gotGraph: ->
       @graph.runHandler(@updateLabel.bind(@))
         
diff --git a/light9/web/timeline/adjustable.coffee b/light9/web/timeline/adjustable.coffee
--- a/light9/web/timeline/adjustable.coffee
+++ b/light9/web/timeline/adjustable.coffee
@@ -58,7 +58,6 @@ class Adjustable
     @root = rootElem.getBoundingClientRect() if rootElem
     offsetParentPos = $V([ev.pageX - @root.left, ev.pageY - @root.top])
 
-    setMouse(offsetParentPos) # for debugging
     return offsetParentPos 
 
 class window.AdjustableFloatObservable extends Adjustable
diff --git a/light9/web/timeline/timeline-elements.html b/light9/web/timeline/timeline-elements.html
--- a/light9/web/timeline/timeline-elements.html
+++ b/light9/web/timeline/timeline-elements.html
@@ -51,6 +51,7 @@
                            song="{{song}}"></light9-timeline-audio>
     <light9-timeline-time-zoomed id="zoomed"
                                  graph="{{graph}}"
+                                 dia="{{dia}}"
                                  song="{{song}}"
                                  show="{{show}}"
                                  zoom="{{viewState.zoomSpec}}"
@@ -99,6 +100,8 @@
       </light9-timeline-audio>
       <template is="dom-repeat" items="{{rows}}">
         <light9-timeline-graph-row graph="{{graph}}"
+                                   dia="{{dia}}"
+                                   song="{{song}}"
                                    zoom-in-x="{{zoomInX}}"
                                    row-index="{{item}}"
         >
@@ -106,27 +109,6 @@
       </template>
     </div>
   </template>
-  <script>
-   Polymer({
-       is: "light9-timeline-time-zoomed",
-       behaviors: [
-           Polymer.IronResizableBehavior
-       ],
-       properties: {
-           graph: { type: Object, notify: true },
-           song: { type: String, notify: true },
-           zoomInX: { type: Object, notify: true },
-           rows: {value: [0,1,2]},
-           zoom: {type: Object, notify: true, observer: 'onZoom'},
-           zoomFlattened: {type: Object, notify: true}
-       },
-       onZoom: function() {
-           ko.computed(function() {
-               this.zoomFlattened = ko.toJS(this.zoom);
-           }.bind(this));
-       }
-   });
-  </script>
 </dom-module>
 
 
@@ -204,7 +186,9 @@
     </style>
     <template is="dom-repeat" items="{{noteUris}}">
       <light9-timeline-note graph="{{graph}}"
+                            dia="{{dia}}"
                             uri="{{item}}"
+                            song="{{song}}"
                             zoom-in-x="{{zoomInX}}">
       </light9-timeline-note>
     </template>
diff --git a/light9/web/timeline/timeline.coffee b/light9/web/timeline/timeline.coffee
--- a/light9/web/timeline/timeline.coffee
+++ b/light9/web/timeline/timeline.coffee
@@ -44,8 +44,9 @@ Polymer
     @fullZoomX = d3.scaleLinear()
     @zoomInX = d3.scaleLinear()
   attached: ->
-
+    @dia = @$.dia
     ko.computed(@zoomOrLayoutChanged.bind(@)).extend({rateLimit: 5})
+    ko.computed(@songTimeChanged.bind(@))
 
     @adjs = @makeZoomAdjs()
 
@@ -64,10 +65,13 @@ Polymer
     @zoomInX = zoomInX
 
     # todo: these run a lot of work purely for a time change    
-    @$.dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
+    @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
     @$.adjusters.updateAllCoords()
 
-    @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
+    @songTimeChanged()
+
+  songTimeChanged: ->
+    @dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                      @$.zoomed.$.time.offsetTop,
                      @$.zoomed.$.time.offsetHeight,
                      @fullZoomX, @zoomInX, @viewState.cursor)
@@ -85,7 +89,7 @@ Polymer
         @root = @getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
 
-        @$.dia.setMouse(@viewState.mouse.pos())
+        @dia.setMouse(@viewState.mouse.pos())
         #@sendMouseToVidref()
 
   sendMouseToVidref: ->
@@ -194,6 +198,22 @@ Polymer
     return [left, right, pan]
 
 Polymer
+  is: 'light9-timeline-time-zoomed'
+  behaviors: [ Polymer.IronResizableBehavior ]
+  properties:
+    graph: { type: Object, notify: true }
+    dia: { type: Object, notify: true }
+    song: { type: String, notify: true }
+    zoomInX: { type: Object, notify: true }
+    rows: { value: [0, 1, 2] }
+    zoom: { type: Object, notify: true, observer: 'onZoom' }
+    zoomFlattened: { type: Object, notify: true }
+  onZoom: ->
+    updateZoomFlattened = ->
+      @zoomFlattened = ko.toJS(@zoom)
+    ko.computed(updateZoomFlattened.bind(@))
+
+Polymer
   is: "light9-timeline-time-axis",
   # for now since it's just one line calling dia,
   # light9-timeline-editor does our drawing work.
@@ -203,11 +223,14 @@ Polymer
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     graph: { type: Object, notify: true }
+    dia: { type: Object, notify: true }
+    song:  { type: String, notify: true }
     zoomInX: { type: Object, notify: true }
     noteUris: { type: Array, notify: true }
     rowIndex: { type: Object, notify: true }
   observers: [
     'onGraph(graph)'
+    'update(song)'
     ]
   onGraph: ->
     @graph.runHandler(@update.bind(@))
@@ -217,7 +240,6 @@ Polymer
     @noteUris = []
     for note in @graph.objects(@song, U(':note'))
       @push('noteUris', note)
-  
 
 Polymer
   is: 'light9-timeline-note'
@@ -225,14 +247,18 @@ Polymer
   listeners: 'iron-resize': 'update'
   properties:
     graph: { type: Object, notify: true }
+    dia: { type: Object, notify: true }
     uri: { type: String, notify: true }
     zoomInX: { type: Object, notify: true }
   observers: [
-    'onUri(graph, uri)'
-    'update(graph, uri, zoomInX)'
+    'onUri(graph, dia, uri)'
+    'update(graph, dia, uri, zoomInX)'
     ]
   ready: ->
 
+  detached: ->
+    @dia.clearElem(@uri)
+
   onUri: ->
     @graph.runHandler(@update.bind(@))
     
@@ -257,7 +283,7 @@ Polymer
       screenPos = (pt) =>
         $V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight])
 
-      setNote(@uri, (screenPos(pt) for pt in worldPts))
+      @dia.setNote(@uri, (screenPos(pt) for pt in worldPts))
 
     catch e
       log("during resize of #{@uri}: #{@e}")
@@ -342,6 +368,11 @@ Polymer
       @adj?.continueDrag($V([d3.event.x, d3.event.y]))
     drag.on('end', () => @adj?.endDrag())
 
+    @updateDisplay()
+
+  detached: ->
+    @dia.clearElem(@myId)
+
 
 svgPathFromPoints = (pts) ->
   out = ''
@@ -360,8 +391,6 @@ Polymer
   properties: {}
   ready: ->
     @elemById = {}
-    window.setNote = @setNote.bind(this)
-    window.setMouse = @setMouse.bind(this)
 
   setTimeAxis: (width, yTop, scale) ->
     pxPerTick = 50
@@ -383,6 +412,12 @@ Polymer
       for k,v of attrs
         elem.setAttribute(k, v)
     return elem
+
+  clearElem: (uri) ->
+    elem = @elemById[uri]
+    if elem
+      elem.remove()
+      delete @elemById[uri]
     
   setNote: (uri, curvePts) ->
     elem = @getOrCreateElem(uri, 'notes', 'path', {style:"fill:#53774b; stroke:#000000; stroke-width:1.5;"})