Some first fixes in the GroupSet and side panel

src/timeline/Timeline.js

@@ -100,7 +100,9 @@ function Timeline (container, items, options) {
         return 0;
       }
     },
-    className: 'side'
+    className: function () {
+      return 'side' + (me.groupsData ? '' : ' hidden');
+    }
   });
   this.sidePanel = new Panel(sideOptions);
   this.rootPanel.appendChild(this.sidePanel);
@@ -359,11 +361,11 @@ Timeline.prototype.setItems = function(items) {
 
 /**
  * Set groups
- * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+ * @param {vis.DataSet | Array | google.visualization.DataTable} groupSet
  */
-Timeline.prototype.setGroups = function(groups) {
+Timeline.prototype.setGroups = function(groupSet) {
   var me = this;
-  this.groupsData = groups;
+  this.groupsData = groupSet;
 
   // create options for the itemset or groupset
   var options = util.extend(Object.create(this.options), {
@@ -376,7 +378,9 @@ Timeline.prototype.setGroups = function(groups) {
   });
 
   if (this.groupsData) {
-    // GroupSet
+    // Create a GroupSet
+
+    // remove itemset if existing
     if (this.itemSet) {
       this.itemSet.hide(); // TODO: not so nice having to hide here
       this.contentPanel.removeChild(this.itemSet);
@@ -384,6 +388,8 @@ Timeline.prototype.setGroups = function(groups) {
       this.itemSet = null;
     }
 
+    // TODO: only create a new groupset when there is no groupset
+
     // create new GroupSet
     // TODO: replace this.sidePanel with a this.labelPanel
     this.groupSet = new GroupSet(this.contentPanel, this.sidePanel, options);
@@ -391,12 +397,14 @@ Timeline.prototype.setGroups = function(groups) {
     this.groupSet.setRange(this.range);
     this.groupSet.setItems(this.itemsData);
     this.groupSet.setGroups(this.groupsData);
+    this.contentPanel.appendChild(this.groupSet);
   }
   else {
     // ItemSet
     if (this.groupSet) {
       this.groupSet.hide(); // TODO: not so nice having to hide here
       this.groupSet.setItems(); // disconnect from itemset
+      this.contentPanel.removeChild(this.groupSet);
       this.groupSet = null;
     }
 

src/timeline/component/Group.js

@@ -38,9 +38,9 @@ Group.prototype.setOptions = Component.prototype.setOptions;
 /**
  * Set item set for the group. The group will create a view on the itemSet,
  * filtered by the groups id.
- * @param {DataSet | DataView} items
+ * @param {DataSet | DataView} itemSet
  */
-Group.prototype.setItems = function setItems(items) {
+Group.prototype.setItems = function setItems(itemSet) {
   if (this.itemSet) {
     // remove current item set
     this.itemSet.hide();
@@ -49,7 +49,7 @@ Group.prototype.setItems = function setItems(items) {
     this.itemSet = null;
   }
 
-  if (items) {
+  if (itemSet) {
     var groupId = this.groupId;
 
     var itemSetOptions = Object.create(this.options);
@@ -59,7 +59,7 @@ Group.prototype.setItems = function setItems(items) {
 
     if (this.range) this.itemSet.setRange(this.range);
 
-    this.view = new DataView(items, {
+    this.view = new DataView(itemSet, {
       filter: function (item) {
         return item.group == groupId;
       }

src/timeline/component/GroupSet.js

@@ -28,7 +28,7 @@ function GroupSet(contentPanel, labelPanel, options) {
     }
   };
 
-  // TODO: implement right orientation of the labels
+  // TODO: implement right orientation of the labels (left/right)
 
   // changes in groups are queued  key/value map containing id/action
   this.queue = {};
@@ -73,7 +73,7 @@ GroupSet.prototype._create = function _create () {
  * @returns {null} Get frame is not supported by GroupSet
  */
 GroupSet.prototype.getFrame = function getFrame() {
-  throw new Error('GroupSet is a virtual Component and doesn\'t have a frame.');
+  return null;
 };
 
 /**
@@ -477,6 +477,8 @@ GroupSet.prototype._onRemove = function _onRemove(ids) {
  * @param {String} action     can be 'add', 'update', 'remove'
  */
 GroupSet.prototype._toQueue = function _toQueue(ids, action) {
+  // TODO: remove this queuing thing, immediately apply it
+
   var queue = this.queue;
   ids.forEach(function (id) {
     queue[id] = action;

src/timeline/component/Panel.js

@@ -54,8 +54,12 @@ Panel.prototype.appendChild = function (child) {
   this.childs.push(child);
   child.parent = this;
 
+  var frame = child.getFrame();
+
   // attach to the DOM
-  this.frame.appendChild(child.getFrame());
+  if (frame) {
+    this.frame.appendChild(frame);
+  }
 };
 
 /**
@@ -80,12 +84,12 @@ Panel.prototype.removeChild = function (child) {
   if (index != -1) {
     this.childs.splice(index, 1);
 
-    if (!child.getFrame() || child.getFrame().parentNode != this.frame) {
-      console.log('oops')
-    }
+    var frame = child.getFrame();
 
     // remove from the DOM
-    this.frame.removeChild(child.getFrame());
+    if (frame && frame.parentNode) {
+      this.frame.removeChild(frame);
+    }
 
     child.parent = null;
   }

src/timeline/component/css/groupset.css

@@ -43,13 +43,13 @@
 }
 
 .vis.timeline.top .labels .labelset .vlabel,
-.vis.timeline.top .groupset .itemset .axis {
+.vis.timeline.top .itemset .axis {
   border-top: 1px solid #bfbfbf;
   border-bottom: none;
 }
 
 .vis.timeline.bottom .labels .labelset .vlabel,
-.vis.timeline.bottom .groupset .itemset .axis {
+.vis.timeline.bottom .itemset .axis {
   border-top: none;
   border-bottom: 1px solid #bfbfbf;
 }

src/timeline/component/css/panel.css

@@ -24,3 +24,7 @@
 .vis.timeline .vpanel.side {
   border-right: 1px solid #bfbfbf;
 }
+
+.vis.timeline .vpanel.side.hidden {
+  display: none;
+}

src/util.js

@@ -670,8 +670,9 @@ util.option.asElement = function (value, defaultValue) {
 
 
 
-util.GiveDec = function GiveDec(Hex)
-{
+util.GiveDec = function GiveDec(Hex) {
+  var Value;
+
   if(Hex == "A")
     Value = 10;
   else
@@ -690,12 +691,14 @@ util.GiveDec = function GiveDec(Hex)
   if(Hex == "F")
     Value = 15;
   else
-    Value = eval(Hex)
+    Value = eval(Hex);
+
   return Value;
-}
+};
+
+util.GiveHex = function GiveHex(Dec) {
+  var Value;
 
-util.GiveHex = function GiveHex(Dec)
-{
   if(Dec == 10)
     Value = "A";
   else
@@ -715,8 +718,9 @@ util.GiveHex = function GiveHex(Dec)
     Value = "F";
   else
     Value = "" + Dec;
+
   return Value;
-}
+};
 
 /**
  * http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php