Move timelines table header generation to template

app/assets/javascripts/angular/controllers/timelines_controller.js

@@ -47,7 +47,6 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
     if (outlineLevel !== formerLevel) {
       $scope.timeline.expansionIndex = Timeline.OUTLINE_LEVELS.indexOf(outlineLevel);
       $scope.timeline.expandToOutlineLevel(outlineLevel); // TODO replace event-driven adaption by bindings
-
     }
   });
 

app/assets/javascripts/timelines/ui.js

@@ -199,12 +199,15 @@ jQuery.extend(Timeline, {
     this.expandToOutlineLevel(Timeline.OUTLINE_LEVELS[index]);
   },
   expandToOutlineLevel: function(outlineLevel) {
-    var level = Timeline.OUTLINE_CONFIGURATIONS[outlineLevel].level;
-    if (this.options.hide_tree_root) {
-      level++;
+    var currentOutlineConfig = Timeline.OUTLINE_CONFIGURATIONS[outlineLevel];
+    if(currentOutlineConfig) {
+      var level = currentOutlineConfig.level;
+      if (this.options.hide_tree_root) {
+        level++;
+      }
+      level = this.getLefthandTree().expandTo(level);
+      this.rebuildAll();
     }
-    level = this.getLefthandTree().expandTo(level);
-    this.rebuildAll();
   },
   zoom: function(index) {
     if (index === undefined) {
@@ -538,43 +541,18 @@ jQuery.extend(Timeline, {
   rebuildTree: function() {
     var where = this.getUiRoot().find('.tl-left-main');
     var tree = this.getLefthandTree();
-    var table = jQuery('<table class="tl-main-table"></table>');
+
+    var table = jQuery('.tl-main-table');
+
     var body = jQuery('<tbody></tbody>');
-    var head = jQuery('<thead></thead>');
     var row, cell, link, span, text;
     var timeline = this;
     var rows = this.getAvailableRows();
     var first = true; // for the first row
     var previousGroup = -1;
-    var headerHeight = this.decoHeight();
-
-    // head
-    table.append(head);
-    row = jQuery('<tr></tr>');
-
-    // there is always a name.
-    cell = jQuery('<th class="tl-first-column"/>');
-    cell.append(timeline.i18n('timelines.filter.column.name'));
-
-    // only compensate for the chart decorations if we're actualy
-    // showing one.
-    if (timeline.options.hide_chart == null) {
-      cell.css({'height': headerHeight + 'px'});
-    }
-    row.append(cell);
-
-    // everything else.
-    var header = function(key) {
-      var th = jQuery('<th></th>');
-      th.append(timeline.i18n('timelines.filter.column.' + key));
-      return th;
-    };
-    jQuery.each(timeline.options.columns, function(i, e) {
-      row.append(header(e));
-    });
-    head.append(row);
 
     // body
+    where.find('tbody').remove();
     table.append(body);
 
     row = jQuery('<tr></tr>');

app/views/timelines/_chart_container.html.erb

@@ -1,7 +1,20 @@
  <div ng-class="{timeline: true, 'tl-under-construction': underConstruction}">
   <div class="tl-left">
     <div class="tl-left-top tl-decoration"></div>
-    <div class="tl-left-main"></div>
+    <div class="tl-left-main">
+
+      <table class="tl-main-table" ng-show="!timeline.options.hide_chart">
+        <thead>
+          <tr>
+            <th class="tl-first-column" ng-style="{height: timeline.decoHeight()}">{{timeline.i18n('timelines.filter.column.name')}}</th>
+            <th ng-repeat="key in timeline.options.columns">
+              {{timeline.i18n('timelines.filter.column.' + key)}}
+            </th>
+          </tr>
+        </thead>
+      </table>
+
+    </div>
   </div>
   <div class="tl-right">
     <div class="tl-right-top tl-decoration"></div>