Some preparations for ordering the groups

src/timeline/component/Group.js

@@ -75,6 +75,13 @@ Group.prototype.setItems = function setItems(items) {
   }
 };
 
+/**
+ * hide the group, detach from DOM if needed
+ */
+Group.prototype.hide = function hide() {
+  if (this.itemSet) this.itemSet.hide();
+};
+
 /**
  * Set range (start and end).
  * @param {Range | Object} range  A Range or an object containing start and end.
@@ -109,6 +116,7 @@ Group.prototype.getSelection = function getSelection() {
  * @return {Boolean} changed
  */
 Group.prototype.repaint = function repaint() {
+  console.log('repaint group', this.groupId);
   this.itemSet.repaint();
 
   this.top    = this.itemSet ? this.itemSet.top : 0;

src/timeline/component/GroupSet.js

@@ -17,6 +17,7 @@ function GroupSet(labelPanel, options) {
   this.groupsData = null; // DataSet with groups
 
   this.groups = {};       // map with groups
+  this.groupIds = [];     // list with ordered group ids
 
   this.dom = {};
   this.props = {
@@ -288,28 +289,25 @@ GroupSet.prototype.repaint = function repaint() {
     });
 
     // reorder the groups
-    var orderedGroups = this.groupsData.getIds({
+    this.groupIds = this.groupsData.getIds({
       order: this.options.groupOrder
     });
-    // TODO: apply order to the DOM
 
     // (re)create the labels
     while (labelSet.firstChild) {
       labelSet.removeChild(labelSet.firstChild);
     }
-    for (i = 0; i < orderedGroups.length; i++) {
-      id = orderedGroups[i];
+    for (i = 0; i < this.groupIds.length; i++) {
+      id = this.groupIds[i];
       label = this._createLabel(id);
       labelSet.appendChild(label);
     }
   }
 
-  // repaint all groups
-  for (id in groups) {
-    if (groups.hasOwnProperty(id)) {
-      group = groups[id].repaint();
-    }
-  }
+  // repaint all groups in order
+  this.groupIds.forEach(function (id) {
+    group = groups[id].repaint();
+  });
 
   // reposition the labels and calculate the maximum label width
   // TODO: labels are not displayed correctly when orientation=='top'

src/timeline/component/ItemSet.js

@@ -175,13 +175,8 @@ ItemSet.prototype.repaint = function repaint() {
   this._updateConversion();
 
   if (!frame) {
-    if (!this.parent) throw new Error('Cannot repaint itemset: no parent attached');
-    var parentContainer = this.parent.getContainer();
-    if (!parentContainer) throw new Error('Cannot repaint itemset: parent has no container element');
-
     frame = document.createElement('div');
     frame['timeline-itemset'] = this;
-    parentContainer.appendChild(frame);
     this.frame = frame;
 
     // create background panel
@@ -212,6 +207,14 @@ ItemSet.prototype.repaint = function repaint() {
     this.hammer.on('dragend',   this._onDragEnd.bind(this));
   }
 
+  if (!frame.parentNode) {
+    if (!this.parent) throw new Error('Cannot repaint itemset: no parent attached');
+    var parentContainer = this.parent.getContainer();
+    if (!parentContainer) throw new Error('Cannot repaint itemset: parent has no container element');
+
+    parentContainer.appendChild(frame);
+  }
+
   // update className
   frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : '');
 
@@ -371,9 +374,11 @@ ItemSet.prototype.hide = function hide() {
   if (this.frame && this.frame.parentNode) {
     this.frame.parentNode.removeChild(this.frame);
   }
+  /* TODO: cleanup
   if (this.dom.axis && this.dom.axis.parentNode) {
     this.dom.axis.parentNode.removeChild(this.dom.axis);
   }
+  */
 };
 
 /**