moved heatmap-container

h/css/app.scss

@@ -75,19 +75,20 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
 
 
 //HEATMAP STUFF////////////////////////////////
-#heatmap-container {
-  height: 100%;
-  position: fixed;
-}
-
 .annotator-heatmap {
-  background: hsla(0, 0, 0, .1);
-  border: solid thin rgba($grayLighter, .4);
-  left: 17px;
   height: 100%;
-  position: absolute;
+  position: fixed;
   top: 0;
-  width: $heatmap-width;
+ 
+  svg {
+    background: hsla(0, 0, 0, .1);
+    border: solid thin rgba($grayLighter, .4);
+    left: 17px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: $heatmap-width;
+  }
 }
 
 .heatmap-pointer {

h/js/controllers.coffee

@@ -9,7 +9,7 @@ class App
   ) ->
     {plugins, provider} = annotator
     heatmap = annotator.plugins.Heatmap
-    heatmap.element.appendTo '#heatmap-container'
+    heatmap.element.appendTo $element
     # Update the heatmap when the host is updated or annotations are loaded
     events  = ['hostUpdated', 'annotationsLoaded']
     for event in events
@@ -23,8 +23,12 @@ class App
                 hl
               offset: offset
 
+    heatmap.element.bind 'click', ->
+      $scope.$apply -> $location.path('/viewer').search(null).replace()
+      annotator.show()
+
     heatmap.subscribe 'updated', =>
-      tabs = d3.select('#heatmap-container')
+      tabs = d3.select(heatmap.element[0])
         .selectAll('div.heatmap-pointer')
         .data =>
           buckets = []
@@ -35,10 +39,6 @@ class App
               buckets.push i
           buckets
 
-      heatmap.element.bind 'click', ->
-        $scope.$apply -> $location.path('/viewer').search(null).replace()
-        annotator.show()
-
       {highlights, offset} = d3.select(heatmap.element[0]).datum()
       height = $(window).outerHeight(true)
       pad = height * .2
@@ -79,8 +79,8 @@ class App
             provider.setActiveHighlights null
 
         # Does one of a few things when a tab is clicked depending on type
-        .on 'mouseup', (bucket) =>
-          d3.event.preventDefault()
+        .on 'click', (bucket) =>
+          d3.event.stopPropagation()
           search = $location.search() or {}
           search.bucket = bucket
 

h/js/plugin/heatmap.coffee

@@ -5,21 +5,22 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
   # heatmap svg skeleton
   html: """
-        <svg class="annotator-heatmap"
-             xmlns="http://www.w3.org/2000/svg"
-             version="1.1">
-           <defs>
-             <linearGradient id="heatmap-gradient" x2="0" y2="100%">
-             </linearGradient>
-             <filter id="heatmap-blur">
-               <feGaussianBlur stdDeviation="0 2"></feGaussianBlur>
-             </filter>
-           </defs>
-           <rect x="0" y="0" width="100%" height="100%"
-                 fill="url('#heatmap-gradient')"
-                 filter="url('#heatmap-blur')" >
-           </rect>
-         </svg>
+        <div class="annotator-heatmap">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               version="1.1">
+             <defs>
+               <linearGradient id="heatmap-gradient" x2="0" y2="100%">
+               </linearGradient>
+               <filter id="heatmap-blur">
+                 <feGaussianBlur stdDeviation="0 2"></feGaussianBlur>
+               </filter>
+             </defs>
+             <rect x="0" y="0" width="100%" height="100%"
+                   fill="url('#heatmap-gradient')"
+                   filter="url('#heatmap-blur')" >
+             </rect>
+           </svg>
+        </div>
         """
 
   # buckets of annotations that overlap
@@ -50,7 +51,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
   updateHeatmap: (data) =>
     # debugger
     return unless d3?
-    wrapper = this.element.parents("body")
+    wrapper = this.element.offsetParent()
     {highlights, offset} = data
 
     # Keep track of buckets of annotations above and below the viewport