Update the tab builder to use fewer iterations

Previously the heatmap tab builder iterates over every tab for each
style that is applied. Now we only perform the iteration once and
apply all updates together.

h/static/scripts/plugin/heatmap.coffee

@@ -351,31 +351,30 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
           annotator.selectAnnotations annotations,
             (event.ctrlKey or event.metaKey),
 
-    @tabs
-    .attr 'title', (d) =>
-      if (len = @buckets[d].length) > 1
-        "Show #{len} annotations"
-      else if len > 0
-        "Show one annotation"
+    @tabs.each (d, el) =>
+      el = $(el)
+      bucket = @buckets[d]
+      bucketLength = bucket?.length
 
-    .css 'margin-top', (d) =>
-      if @isUpper(d) or @isLower(d) then '-9px' else '-8px'
+      title = if bucketLength > 1
+        'Show #{bucketLength} annotations'
+      else if bucketLength > 0
+        'Show one annotation'
 
-    .css 'top', (d) =>
-      "#{(@index[d] + @index[d+1]) / 2}px"
+      el.attr('title', title)
+      el.toggleClass('upper', @isUpper(d))
+      el.toggleClass('lower', @isLower(d))
 
-    .html (d) =>
-      return unless @buckets[d]
-      "<div class='label'>#{@buckets[d].length}</div>"
+      el.css({
+        top: (@index[d] + @index[d+1]) / 2
+        marginTop: if @isUpper(d) or @isLower(d) then -9 else -8
+        display: unless bucketLength then 'none' else ''
+      })
+
+      if bucket
+        el.html("<div class='label'>#{bucketLength}</div>")
 
-    .addClass (d) => if @isUpper(d) then 'upper' else ''
-    .addClass (d) => if @isLower(d) then 'lower' else ''
-    .removeClass  (d) => unless @isUpper(d) then 'upper' else ''
-    .removeClass  (d) => unless @isLower(d) then 'lower' else ''
 
-    .css 'display', (d) =>
-      bucket = @buckets[d]
-      if (!bucket or bucket.length is 0) then 'none' else ''
 
     if @dynamicBucket
       @annotator.updateViewer this._getDynamicBucket()