put heatmap into container

h/css/app.scss

@@ -30,15 +30,13 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
 }
 
 .annotator-heatmap {
-  svg {
-    background: hsla(0, 0, 0, .1);
-    border: solid thin rgba($grayLighter, .4);
-    left: 17px;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    width: $heatmap-width;
-  }
+  background: hsla(0, 0, 0, .1);
+  border: solid thin rgba($grayLighter, .4);
+  left: 17px;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  width: $heatmap-width;
 }
 
 

h/js/controllers.coffee

@@ -9,8 +9,7 @@ class App
   ) ->
     {plugins, provider} = annotator
     heatmap = annotator.plugins.Heatmap
-    heatmap.element.appendTo $element
-
+    heatmap.element.appendTo '#heatmap-container'
     # Update the heatmap when the host is updated or annotations are loaded
     events  = ['hostUpdated', 'annotationsLoaded']
     for event in events

h/js/plugin/heatmap.coffee

@@ -5,23 +5,21 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
   # heatmap svg skeleton
   html: """
-        <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>
+        <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>
         """
 
   # buckets of annotations that overlap
@@ -50,9 +48,9 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
     d3.hcl(270, c(v), l(v)).toString()
 
   updateHeatmap: (data) =>
+    # debugger
     return unless d3?
-
-    wrapper = this.element.offsetParent()
+    wrapper = this.element.parents("body")
     {highlights, offset} = data
 
     # Keep track of buckets of annotations above and below the viewport