Render visualization more efficiently

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -1015,6 +1015,15 @@
 
         var builtInViz = builtInVisualizations[type];
         if (builtInViz) {
+          // deactive previsouly active visualization
+          for (var t in builtInVisualizations) {
+            var v = builtInVisualizations[t].instance;
+            if (t !== type && v && v.isActive()) {
+              v.deactivate();
+              break;
+            }
+          }
+
           if (!builtInViz.instance) { // not instantiated yet
             // render when targetEl is available
             var retryRenderer = function() {
@@ -1029,6 +1038,10 @@
                   var Visualization = builtInViz.class;
                   builtInViz.instance = new Visualization(targetEl, $scope.paragraph.config.graph);
                   builtInViz.instance.render(tableData);
+                  builtInViz.instance.activate();
+                  angular.element(window).resize(function() {
+                    builtInViz.instance.resize();
+                  });
                 } catch (err) {
                   console.log('Graph drawing error %o', err);
                 }
@@ -1042,41 +1055,12 @@
             builtInViz.instance.setConfig($scope.paragraph.config.graph);
             builtInViz.instance.render(tableData);
           } else {
-            /* Following line is required to handle the case
-             *  1. select a chart type
-             *  2. resize browser window
-             *  3. select another chart
-             * The chart selected on step 3 will be displayed in incorrect size
-             */
-            $timeout(function() {emitWindowResizeEvent();}, 1);
+            builtInViz.instance.activate();
           }
         }
       }
     };
 
-    var emitWindowResizeEvent = function() {
-      var eventName = 'resize';
-      var el = window;
-      var event;
-      if (document.createEvent) {
-        event = document.createEvent('HTMLEvents');
-        event.initEvent(eventName,true,true);
-      } else if (document.createEventObject) { // IE < 9
-        event = document.createEventObject();
-        event.eventType = eventName;
-      }
-      event.eventName = eventName;
-      if (el.dispatchEvent) {
-        el.dispatchEvent(event);
-      } else if (el.fireEvent && el['on' + eventName]) {  // IE < 9
-        el.fireEvent('on' + event.eventType,event);
-      } else if (el[eventName]) {
-        el[eventName]();
-      } else if (el['on' + eventName]) {
-        el['on' + eventName]();
-      }
-    };
-
     var setNewMode = function(newMode) {
       var newConfig = angular.copy($scope.paragraph.config);
       var newParams = angular.copy($scope.paragraph.settings.params);

zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js

@@ -24,6 +24,12 @@ zeppelin.Nvd3ChartVisualization = function(targetEl, config) {
 
 zeppelin.Nvd3ChartVisualization.prototype = Object.create(zeppelin.Visualization.prototype);
 
+zeppelin.Visualization.prototype.refresh = function() {
+  if (this.chart) {
+    this.chart.update();
+  }
+};
+
 zeppelin.Nvd3ChartVisualization.prototype.render = function(data) {
   var type = this.type();
   var d3g = data.d3g;
@@ -54,7 +60,6 @@ zeppelin.Nvd3ChartVisualization.prototype.render = function(data) {
     .duration(animationDuration)
     .call(this.chart);
   d3.select('#' + this.targetEl[0].id + ' svg').style.height = height + 'px';
-  nv.utils.windowResize(this.chart.update);
 };
 
 zeppelin.Nvd3ChartVisualization.prototype.type = function() {

zeppelin-web/src/app/visualization/builtins/visualization-table.js

@@ -25,6 +25,10 @@ zeppelin.TableVisualization = function(targetEl) {
 
 zeppelin.TableVisualization.prototype = Object.create(zeppelin.Visualization.prototype);
 
+zeppelin.TableVisualization.prototype.refresh = function() {
+  this.hot.render();
+};
+
 zeppelin.TableVisualization.prototype.render = function(tableData) {
   var height = this.targetEl.height();
   var container = this.targetEl.css('height', height).get(0);

zeppelin-web/src/app/visualization/visualization.js

@@ -22,6 +22,8 @@ var zeppelin = zeppelin || {};
 zeppelin.Visualization = function(targetEl, config) {
   this.targetEl = targetEl;
   this.config = config;
+  this._resized = false;
+  this._active = false;
 };
 
 /**
@@ -38,6 +40,53 @@ zeppelin.Visualization.prototype.render = function(tableData) {
   // override this
 };
 
+/**
+ * Refresh visualization.
+ */
+zeppelin.Visualization.prototype.refresh = function() {
+  // override this
+};
+
+/**
+ * Activate. invoked when visualization is selected
+ */
+zeppelin.Visualization.prototype.activate = function() {
+  console.log('active');
+  if (!this._active && this._resized) {
+    var self = this;
+    // give some time for element ready
+    setTimeout(function(){self.refresh();}, 300);
+    this._resized = false;
+  }
+  this._active = true;
+};
+
+/**
+ * Activate. invoked when visualization is de selected
+ */
+zeppelin.Visualization.prototype.deactivate = function() {
+  console.log('deactive');
+  this._active = false;
+};
+
+/**
+ * Is active
+ */
+zeppelin.Visualization.prototype.isActive = function() {
+  return this._active;
+};
+
+/**
+ * When window or paragraph is resized
+ */
+zeppelin.Visualization.prototype.resize = function() {
+  if (this.isActive()) {
+    this.refresh();
+  } else {
+    this._resized = true;
+  }
+};
+
 /**
  * Set new config
  */