Fixed `DataView` not working in Timeline (see #195)

HISTORY.md

@@ -16,6 +16,7 @@ http://visjs.org
         }
 - Fixed the height of background and foreground panels of groups.
 - Fixed ranges in the Timeline sometimes overlapping when dragging the Timeline.
+- Fixed `DataView` not working in Timeline.
 
 ### Network
 

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 2.0.1-SNAPSHOT
- * @date    2014-07-04
+ * @date    2014-07-07
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -2247,6 +2247,14 @@ DataSet.prototype.getIds = function (options) {
   return ids;
 };
 
+/**
+ * Returns the DataSet itself. Is overwritten for example by the DataView,
+ * which returns the DataSet it is connected to instead.
+ */
+DataSet.prototype.getDataSet = function () {
+  return this;
+};
+
 /**
  * Execute a callback function for every item in the dataset.
  * @param {function} callback
@@ -2850,6 +2858,19 @@ DataView.prototype.getIds = function (options) {
   return ids;
 };
 
+/**
+ * Get the DataSet to which this DataView is connected. In case there is a chain
+ * of multiple DataViews, the root DataSet of this chain is returned.
+ * @return {DataSet} dataSet
+ */
+DataView.prototype.getDataSet = function () {
+  var dataSet = this;
+  while (dataSet instanceof DataView) {
+    dataSet = dataSet._data;
+  }
+  return dataSet || null;
+};
+
 /**
  * Event listener. Will propagate all events from the connected data set to
  * the subscribers of the DataView, but will filter the items and only trigger
@@ -7502,7 +7523,7 @@ ItemSet.prototype.getGroups = function() {
  */
 ItemSet.prototype.removeItem = function(id) {
   var item = this.itemsData.get(id),
-      dataset = this._myDataSet();
+      dataset = this.itemsData.getDataSet();
 
   if (item) {
     // confirm deletion
@@ -7943,7 +7964,7 @@ ItemSet.prototype._onDragEnd = function (event) {
     // prepare a change set for the changed items
     var changes = [],
         me = this,
-        dataset = this._myDataSet();
+        dataset = this.itemsData.getDataSet();
 
     this.touchParams.itemProps.forEach(function (props) {
       var id = props.item.id,
@@ -8173,19 +8194,6 @@ ItemSet.itemSetFromTarget = function(event) {
   return null;
 };
 
-/**
- * Find the DataSet to which this ItemSet is connected
- * @returns {null | DataSet} dataset
- * @private
- */
-ItemSet.prototype._myDataSet = function() {
-  // find the root DataSet
-  var dataset = this.itemsData;
-  while (dataset instanceof DataView) {
-    dataset = dataset.data;
-  }
-  return dataset;
-};
 /**
  * @constructor Item
  * @param {Object} data             Object containing (optional) parameters type,
@@ -9894,23 +9902,23 @@ Timeline.prototype.fit = function() {
  */
 Timeline.prototype.getItemRange = function() {
   // calculate min from start filed
-  var itemsData = this.itemsData,
+  var dataset = this.itemsData.getDataSet(),
       min = null,
       max = null;
 
-  if (itemsData) {
+  if (dataset) {
     // calculate the minimum value of the field 'start'
-    var minItem = itemsData.min('start');
+    var minItem = dataset.min('start');
     min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
     // Note: we convert first to Date and then to number because else
     // a conversion from ISODate to Number will fail
 
     // calculate maximum value of fields 'start' and 'end'
-    var maxStartItem = itemsData.max('start');
+    var maxStartItem = dataset.max('start');
     if (maxStartItem) {
       max = util.convert(maxStartItem.start, 'Date').valueOf();
     }
-    var maxEndItem = itemsData.max('end');
+    var maxEndItem = dataset.max('end');
     if (maxEndItem) {
       if (max == null) {
         max = util.convert(maxEndItem.end, 'Date').valueOf();

docs/dataset.html

@@ -220,6 +220,17 @@ var data = new vis.DataSet([data] [, options])
     </td>
   </tr>
 
+  <tr>
+    <td>
+      getDataSet()
+    </td>
+    <td>DataSet</td>
+    <td>
+      Get the DataSet itself. In case of a DataView, this function does not
+      return the DataSet to which the DataView is connected.
+    </td>
+  </tr>
+
   <tr>
     <td>
       getIds([options])

docs/dataview.html

@@ -103,8 +103,6 @@ var data = new vis.DataView(dataset, options)
     are exactly the same as the properties available in methods
     <code>DataSet.get</code> and <code>DataView.get</code>.
 
-
-
     <table>
       <tr>
         <th>Name</th>

examples/timeline/01_basic.html

@@ -33,7 +33,7 @@
   var options = {};
 
   // Create a Timeline
-  var timeline = new vis.Timeline(container, items, options);
+  var timeline = new vis.Timeline(container, new vis.DataView(items), options);
 </script>
 </body>
 </html>

src/DataSet.js

@@ -511,6 +511,14 @@ DataSet.prototype.getIds = function (options) {
   return ids;
 };
 
+/**
+ * Returns the DataSet itself. Is overwritten for example by the DataView,
+ * which returns the DataSet it is connected to instead.
+ */
+DataSet.prototype.getDataSet = function () {
+  return this;
+};
+
 /**
  * Execute a callback function for every item in the dataset.
  * @param {function} callback

src/DataView.js

@@ -187,6 +187,19 @@ DataView.prototype.getIds = function (options) {
   return ids;
 };
 
+/**
+ * Get the DataSet to which this DataView is connected. In case there is a chain
+ * of multiple DataViews, the root DataSet of this chain is returned.
+ * @return {DataSet} dataSet
+ */
+DataView.prototype.getDataSet = function () {
+  var dataSet = this;
+  while (dataSet instanceof DataView) {
+    dataSet = dataSet._data;
+  }
+  return dataSet || null;
+};
+
 /**
  * Event listener. Will propagate all events from the connected data set to
  * the subscribers of the DataView, but will filter the items and only trigger

src/timeline/Timeline.js

@@ -448,23 +448,23 @@ Timeline.prototype.fit = function() {
  */
 Timeline.prototype.getItemRange = function() {
   // calculate min from start filed
-  var itemsData = this.itemsData,
+  var dataset = this.itemsData.getDataSet(),
       min = null,
       max = null;
 
-  if (itemsData) {
+  if (dataset) {
     // calculate the minimum value of the field 'start'
-    var minItem = itemsData.min('start');
+    var minItem = dataset.min('start');
     min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
     // Note: we convert first to Date and then to number because else
     // a conversion from ISODate to Number will fail
 
     // calculate maximum value of fields 'start' and 'end'
-    var maxStartItem = itemsData.max('start');
+    var maxStartItem = dataset.max('start');
     if (maxStartItem) {
       max = util.convert(maxStartItem.start, 'Date').valueOf();
     }
-    var maxEndItem = itemsData.max('end');
+    var maxEndItem = dataset.max('end');
     if (maxEndItem) {
       if (max == null) {
         max = util.convert(maxEndItem.end, 'Date').valueOf();

src/timeline/component/ItemSet.js

@@ -647,7 +647,7 @@ ItemSet.prototype.getGroups = function() {
  */
 ItemSet.prototype.removeItem = function(id) {
   var item = this.itemsData.get(id),
-      dataset = this._myDataSet();
+      dataset = this.itemsData.getDataSet();
 
   if (item) {
     // confirm deletion
@@ -1088,7 +1088,7 @@ ItemSet.prototype._onDragEnd = function (event) {
     // prepare a change set for the changed items
     var changes = [],
         me = this,
-        dataset = this._myDataSet();
+        dataset = this.itemsData.getDataSet();
 
     this.touchParams.itemProps.forEach(function (props) {
       var id = props.item.id,
@@ -1317,17 +1317,3 @@ ItemSet.itemSetFromTarget = function(event) {
 
   return null;
 };
-
-/**
- * Find the DataSet to which this ItemSet is connected
- * @returns {null | DataSet} dataset
- * @private
- */
-ItemSet.prototype._myDataSet = function() {
-  // find the root DataSet
-  var dataset = this.itemsData;
-  while (dataset instanceof DataView) {
-    dataset = dataset.data;
-  }
-  return dataset;
-};