[zeppelin] branch master updated: [ZEPPELIN-4755] Fix the result graphs cannot be set to the correct size

[zj...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zjffdu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git


The following commit(s) were added to refs/heads/master by this push:
     new 5cce538  [ZEPPELIN-4755] Fix the result graphs cannot be set to the correct size
5cce538 is described below

commit 5cce538b17c160698bace782ff8ec2bac9adb928
Author: Hsuan Lee <hs...@gmail.com>
AuthorDate: Mon Apr 20 13:59:55 2020 +0800

    [ZEPPELIN-4755] Fix the result graphs cannot be set to the correct size
    
    ### What is this PR for?
    
    Render the graphs at the next tick to get the correct size
    
    ### What type of PR is it?
    [Bug Fix]
    
    ### What is the Jira issue?
    
    https://issues.apache.org/jira/browse/ZEPPELIN-4755
    
    ### How should this be tested?
    
    Repeatedly switch graph types and check their size
    
    ### Screenshots (if appropriate)
    
    ### Questions:
    * Does the licenses files need update? No
    * Is there breaking changes for older versions? No
    * Does this needs documentation? No
    
    Author: Hsuan Lee <hs...@gmail.com>
    
    Closes #3739 from hsuanxyz/fix/result-render and squashes the following commits:
    
    bf24d71e9 [Hsuan Lee] fix: result graph cannot be set to the correct size
---
 .../notebook/paragraph/result/result.controller.js | 37 +++++++++++++---------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index d5b1017..4aabc5c 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -213,24 +213,33 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
     }
   }
 
-  function retryUntilElemIsLoaded(targetElemId, callback) {
+  /**
+   * Retry until the target element is loaded
+   * @param targetElemId
+   * @param callback
+   * @param nextTick - sometimes need run in next tick
+   */
+  function retryUntilElemIsLoaded(targetElemId, callback, nextTick = false) {
     cancelRetryRender(targetElemId);
+
+    function callbackFun() {
+      const elem = angular.element(`#${targetElemId}`);
+      callback(elem);
+    }
+
     function retry() {
       cancelRetryRender(targetElemId);
       if (!isDOMLoaded(targetElemId)) {
-        retryRenderElements[targetElemId] = $timeout(retry, 10);
+        retryRenderElements[targetElemId] = $timeout(retry, 16);
         return;
       }
-
-      const elem = angular.element(`#${targetElemId}`);
-      callback(elem);
+      callbackFun();
     }
 
-    if(isDOMLoaded(targetElemId)) {
-      const elem = angular.element(`#${targetElemId}`);
-      callback(elem);
+    if(isDOMLoaded(targetElemId) && !nextTick) {
+      callbackFun();
     } else {
-      retryRenderElements[targetElemId] = $timeout(retry);
+      retryRenderElements[targetElemId] = $timeout(retry, 16);
     }
   }
 
@@ -727,7 +736,9 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
     }
 
     const tableElemId = `p${$scope.id}_${graphMode}`;
-    retryUntilElemIsLoaded(tableElemId, afterLoaded);
+
+    // Run the callback in next tick to ensure get the correct size for rendering graph
+    retryUntilElemIsLoaded(tableElemId, afterLoaded, true);
   };
 
   $scope.switchViz = function(newMode) {
@@ -767,11 +778,7 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
 
   $scope.toggleGraphSetting = function() {
     let newConfig = angular.copy($scope.config);
-    if (newConfig.graph.optionOpen) {
-      newConfig.graph.optionOpen = false;
-    } else {
-      newConfig.graph.optionOpen = true;
-    }
+    newConfig.graph.optionOpen = !newConfig.graph.optionOpen;
 
     let newParams = angular.copy(paragraph.settings.params);
     commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);