fixed infinite loop when clearing dataset

HISTORY.md

@@ -10,6 +10,10 @@ http://visjs.org
 - Sidestepped double touch event from hammer (ugly.. but functional) causing strange behaviour in manipulation mode
 - Better cleanup after reconnecting edges in manipulation mode
 
+### Graph2D
+
+- Fixed infinite loop when clearing dataset
+
 ## 2014-11-28, version 3.7.1
 
 ### Timeline

examples/graph2d/05_bothAxis.html

@@ -131,7 +131,7 @@
         start: '2014-06-09',
         end: '2014-07-03'
     };
-    var graph2d = new vis.Graph2d(container, items, groups, options);
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>

lib/timeline/Core.js

@@ -606,7 +606,7 @@ Core.prototype.redraw = function() {
   });
   if (resized) {
     // keep repainting until all sizes are settled
-    var MAX_REDRAWS = 2; // maximum number of consecutive redraws
+    var MAX_REDRAWS = 3; // maximum number of consecutive redraws
     if (this.redrawCount < MAX_REDRAWS) {
       this.redrawCount++;
       this.redraw();

lib/timeline/component/DataAxis.js

@@ -62,6 +62,7 @@ function DataAxis (body, options, svg, linegraphOptions) {
   this.width = Number(('' + this.options.width).replace("px",""));
   this.minWidth = this.width;
   this.height = this.linegraphSVG.offsetHeight;
+  this.hidden = false;
 
   this.stepPixels = 25;
   this.stepPixelsForced = 25;
@@ -88,7 +89,6 @@ function DataAxis (body, options, svg, linegraphOptions) {
 DataAxis.prototype = new Component();
 
 
-
 DataAxis.prototype.addGroup = function(label, graphOptions) {
   if (!this.groups.hasOwnProperty(label)) {
     this.groups[label] = graphOptions;
@@ -207,6 +207,7 @@ DataAxis.prototype._cleanupIcons = function() {
  * Create the HTML DOM for the DataAxis
  */
 DataAxis.prototype.show = function() {
+  this.hidden = false;
   if (!this.dom.frame.parentNode) {
     if (this.options.orientation == 'left') {
       this.body.dom.left.appendChild(this.dom.frame);
@@ -225,6 +226,7 @@ DataAxis.prototype.show = function() {
  * Create the HTML DOM for the DataAxis
  */
 DataAxis.prototype.hide = function() {
+  this.hidden = true;
   if (this.dom.frame.parentNode) {
     this.dom.frame.parentNode.removeChild(this.dom.frame);
   }

lib/timeline/component/LineGraph.js

@@ -138,11 +138,11 @@ function LineGraph(body, options) {
   this.svgElements = {};
   this.setOptions(options);
   this.groupsUsingDefaultStyles = [0];
-
+  this.COUNTER = 0;
   this.body.emitter.on('rangechanged', function() {
     me.lastStart = me.body.range.start;
     me.svg.style.left = util.option.asSize(-me.width);
-    me._updateGraph.apply(me);
+    me.redraw.call(me,true);
   });
 
   // create the HTML DOM
@@ -240,9 +240,6 @@ LineGraph.prototype.setOptions = function(options) {
       this.groups[UNGROUPED].setOptions(options);
     }
   }
-  if (this.dom.frame) {
-    this._updateGraph();
-  }
 };
 
 /**
@@ -311,8 +308,8 @@ LineGraph.prototype.setItems = function(items) {
     this._onAdd(ids);
   }
   this._updateUngrouped();
-  this._updateGraph();
-  this.redraw();
+  //this._updateGraph();
+  this.redraw(true);
 };
 
 
@@ -370,8 +367,8 @@ LineGraph.prototype.setGroups = function(groups) {
 LineGraph.prototype._onUpdate = function(ids) {
   this._updateUngrouped();
   this._updateAllGroupData();
-  this._updateGraph();
-  this.redraw();
+  //this._updateGraph();
+  this.redraw(true);
 };
 LineGraph.prototype._onAdd          = function (ids) {this._onUpdate(ids);};
 LineGraph.prototype._onRemove       = function (ids) {this._onUpdate(ids);};
@@ -381,8 +378,8 @@ LineGraph.prototype._onUpdateGroups  = function (groupIds) {
     this._updateGroup(group, groupIds[i]);
   }
 
-  this._updateGraph();
-  this.redraw();
+  //this._updateGraph();
+  this.redraw(true);
 };
 LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
 
@@ -409,8 +406,8 @@ LineGraph.prototype._onRemoveGroups = function (groupIds) {
     }
   }
   this._updateUngrouped();
-  this._updateGraph();
-  this.redraw();
+  //this._updateGraph();
+  this.redraw(true);
 };
 
 
@@ -536,7 +533,7 @@ LineGraph.prototype._updateUngrouped = function() {
  * Redraw the component, mandatory function
  * @return {boolean} Returns true if the component is resized
  */
-LineGraph.prototype.redraw = function() {
+LineGraph.prototype.redraw = function(forceGraphUpdate) {
   var resized = false;
 
   this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
@@ -547,7 +544,7 @@ LineGraph.prototype.redraw = function() {
   resized = this._isResized() || resized;
   // check whether zoomed (in that case we need to re-stack everything)
   var visibleInterval = this.body.range.end - this.body.range.start;
-  var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
+  //var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth); // we get this from the range changed event
   this.lastVisibleInterval = visibleInterval;
   this.lastWidth = this.width;
 
@@ -561,8 +558,8 @@ LineGraph.prototype.redraw = function() {
     this.svg.style.left = util.option.asSize(-this.width);
   }
 
-  if (zoomed == true || this.abortedGraphUpdate == true) {
-    this._updateGraph();
+  if (this.abortedGraphUpdate == true || forceGraphUpdate == true) {
+    resized = resized || this._updateGraph();
   }
   else {
     // move the whole svg while dragging
@@ -620,7 +617,7 @@ LineGraph.prototype._updateGraph = function () {
     }
     if (groupIds.length > 0) {
       // this is the range of the SVG canvas
-      var minDate = this.body.util.toGlobalTime(- this.body.domProps.root.width);
+      var minDate = this.body.util.toGlobalTime(-this.body.domProps.root.width);
       var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
       var groupsData = {};
       // fill groups data, this only loads the data we require based on the timewindow
@@ -640,34 +637,42 @@ LineGraph.prototype._updateGraph = function () {
       // update the Y axis first, we use this data to draw at the correct Y points
       // changeCalled is required to clean the SVG on a change emit.
       changeCalled = this._updateYAxis(groupIds, groupRanges);
-      if (changeCalled == true) {
+      var MAX_CYCLES = 5;
+      if (changeCalled == true && this.COUNTER < MAX_CYCLES) {
         DOMutil.cleanupElements(this.svgElements);
         this.abortedGraphUpdate = true;
+        this.COUNTER++;
         this.body.emitter.emit('change');
-        return;
-      }
-      this.abortedGraphUpdate = false;
-
-      // With the yAxis scaled correctly, use this to get the Y values of the points.
-      for (i = 0; i < groupIds.length; i++) {
-        group = this.groups[groupIds[i]];
-        processedGroupData[groupIds[i]] = this._convertYcoordinates(groupsData[groupIds[i]], group);
+        return true;
       }
+      else {
+        if (this.COUNTER > MAX_CYCLES) {
+          console.log("WARNING: there may be an infinite loop in the _updateGraph emitter cycle.")
+        }
+        this.COUNTER = 0;
+        this.abortedGraphUpdate = false;
 
+        // With the yAxis scaled correctly, use this to get the Y values of the points.
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          processedGroupData[groupIds[i]] = this._convertYcoordinates(groupsData[groupIds[i]], group);
+        }
 
-      // draw the groups
-      for (i = 0; i < groupIds.length; i++) {
-        group = this.groups[groupIds[i]];
-        if (group.options.style != 'bar') { // bar needs to be drawn enmasse
-          group.draw(processedGroupData[groupIds[i]], group, this.framework);
+        // draw the groups
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          if (group.options.style != 'bar') { // bar needs to be drawn enmasse
+            group.draw(processedGroupData[groupIds[i]], group, this.framework);
+          }
         }
+        BarGraphFunctions.draw(groupIds, processedGroupData, this.framework);
       }
-      BarGraphFunctions.draw(groupIds, processedGroupData, this.framework);
     }
   }
 
   // cleanup unused svg elements
   DOMutil.cleanupElements(this.svgElements);
+  return false;
 };
 
 
@@ -808,6 +813,21 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
   var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
   // if groups are present
   if (groupIds.length > 0) {
+    // this is here to make sure that if there are no items in the axis but there are groups, that there is no infinite draw/redraw loop.
+    for (var i = 0; i < groupIds.length; i++) {
+      if (this.groups[groupIds[i]].options.yAxisOrientation == 'left') {
+        yAxisLeftUsed = true;
+        minLeft = 0;
+        maxLeft = 0;
+      }
+      else {
+        yAxisRightUsed = true;
+        minRight = 0;
+        maxRight = 0;
+      }
+    }
+
+    // if there are items:
     for (var i = 0; i < groupIds.length; i++) {
       if (groupRanges.hasOwnProperty(groupIds[i])) {
         if (groupRanges[groupIds[i]].ignore !== true) {
@@ -835,7 +855,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
       this.yAxisRight.setRange(minRight, maxRight);
     }
   }
-
   changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
   changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
 
@@ -886,13 +905,13 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
 LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
   var changed = false;
   if (axisUsed == false) {
-    if (axis.dom.frame.parentNode) {
-      axis.hide();
+    if (axis.dom.frame.parentNode && axis.hidden == false) {
+      axis.hide()
       changed = true;
     }
   }
   else {
-    if (!axis.dom.frame.parentNode) {
+    if (!axis.dom.frame.parentNode && axis.hidden == true) {
       axis.show();
       changed = true;
     }