You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by fe...@apache.org on 2016/02/14 04:31:21 UTC

incubator-zeppelin git commit: ZEPPELIN-491: Giving fixed height to container when result type is text

Repository: incubator-zeppelin
Updated Branches:
  refs/heads/master 72b8fde06 -> 4daf7aa30


ZEPPELIN-491: Giving fixed height to container when result type is text

In current behaviour we have a fixed height for result container that contains either graph or table, but if type is text then the container expands to infinitely.

When type is text; then this is mostly logs, so we can have scroll around it and have fixed height for this container.

Before
<img width="1440" alt="screen shot 2015-12-07 at 4 11 49 pm" src="https://cloud.githubusercontent.com/assets/674497/11625014/bf2044dc-9cfd-11e5-8b9b-0ac8256671cf.png">

After
<img width="1440" alt="screen shot 2015-12-07 at 4 16 46 pm" src="https://cloud.githubusercontent.com/assets/674497/11625051/f8b1abbe-9cfd-11e5-9001-4794ba10dbf3.png">

Author: Prabhjyot Singh <pr...@gmail.com>

Closes #519 from prabhjyotsingh/ZEPPELIN-491 and squashes the following commits:

287fff8 [Prabhjyot Singh] - revert unused someFunction(). - have standard toooltip for Follow output and scroll top
fa29035 [Prabhjyot Singh] implement follow scroll
92b7e39 [Prabhjyot Singh] Merge remote-tracking branch 'origin/master' into ZEPPELIN-491
e230e00 [Prabhjyot Singh] change name from log to output
fb67de2 [Prabhjyot Singh] have a page scroll down icon
dc96ed6 [Prabhjyot Singh] fixing branch conflicts


Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/4daf7aa3
Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/4daf7aa3
Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/4daf7aa3

Branch: refs/heads/master
Commit: 4daf7aa30ca3cb698fefd23f766b701eb5c0ea2b
Parents: 72b8fde
Author: Prabhjyot Singh <pr...@gmail.com>
Authored: Thu Feb 11 09:13:03 2016 +0530
Committer: Felix Cheung <fe...@apache.org>
Committed: Sat Feb 13 19:31:19 2016 -0800

----------------------------------------------------------------------
 .../notebook/paragraph/paragraph-results.html   | 17 +++++++--
 .../notebook/paragraph/paragraph.controller.js  | 38 ++++++++++++++++++++
 .../src/app/notebook/paragraph/paragraph.css    | 14 ++++++++
 .../components/resizable/resizable.directive.js |  2 +-
 4 files changed, 67 insertions(+), 4 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4daf7aa3/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
index 7fb40ac..77d7451 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
@@ -23,9 +23,20 @@ limitations under the License.
        ng-bind-html="paragraph.result.comment">
   </div>
 
-  <div id="p{{paragraph.id}}_text"
-       class="text"
-       ng-if="getResultType() == 'TEXT'"></div>
+  <div id="{{paragraph.id}}_text"
+       ng-if="getResultType() == 'TEXT'">
+    <div class="fa fa-level-down scroll-paragraph-down"
+         ng-show="showScrollDownIcon()"
+         ng-click="scrollParagraphDown()"
+         tooltip="Follow Output"></div>
+    <div id="p{{paragraph.id}}_text"
+         style="max-height: {{paragraph.config.graph.height}}px; overflow: auto"
+         class="text"></div>
+    <div class="fa fa-chevron-up scroll-paragraph-up"
+         ng-show="showScrollUpIcon()"
+         ng-click="scrollParagraphUp()"
+         tooltip="Scroll Top"></div>
+  </div>
 
   <div id="p{{paragraph.id}}_html"
        class="resultContained"

http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4daf7aa3/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 22cef84..aeb942f 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -108,6 +108,11 @@ angular.module('zeppelinWebApp')
         if ($scope.paragraph.result && $scope.paragraph.result.msg) {
           $scope.appendTextOutput($scope.paragraph.result.msg);
         }
+
+        angular.element('#p' + $scope.paragraph.id + '_text').bind("mousewheel", function(e) {
+          $scope.keepScrollDown = false;
+        });
+
       } else {
         $timeout(retryRenderer, 10);
       }
@@ -130,6 +135,10 @@ angular.module('zeppelinWebApp')
         textEl.append(angular.element('<div></div>').text(lines[i]));
       }
     }
+    if ($scope.keepScrollDown) {
+      var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+      doc[0].scrollTop = doc[0].scrollHeight;
+    }
   };
 
 
@@ -2077,4 +2086,33 @@ angular.module('zeppelinWebApp')
     var redirectToUrl = location.protocol + '//' + location.host + location.pathname + '#/notebook/' + noteId + '/paragraph/' + $scope.paragraph.id+'?asIframe';
     $window.open(redirectToUrl);
   };
+
+  $scope.showScrollDownIcon = function(){
+    var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+    if(doc[0]){
+      return doc[0].scrollHeight > doc.innerHeight();
+    }
+    return false;
+  };
+
+  $scope.scrollParagraphDown = function() {
+    var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+    doc.animate({scrollTop: doc[0].scrollHeight}, 500);
+    $scope.keepScrollDown = true;
+  };
+
+  $scope.showScrollUpIcon = function(){
+    if(angular.element('#p' + $scope.paragraph.id + '_text')[0]){
+      return angular.element('#p' + $scope.paragraph.id + '_text')[0].scrollTop != 0;
+    }
+    return false;
+
+  };
+
+  $scope.scrollParagraphUp = function() {
+    var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+    doc.animate({scrollTop: 0}, 500);
+    $scope.keepScrollDown = false;
+  };
+
 });

http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4daf7aa3/zeppelin-web/src/app/notebook/paragraph/paragraph.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index b73ecd9..3b56c2a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -411,3 +411,17 @@ table.table-striped {
   border-top: 1px solid #ddd;
   margin-top: 20px;
 }
+
+.scroll-paragraph-down {
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+}
+
+
+.scroll-paragraph-up {
+  bottom: 5px;
+  cursor: pointer;
+  position: absolute;
+  right: 15px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4daf7aa3/zeppelin-web/src/components/resizable/resizable.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/resizable/resizable.directive.js b/zeppelin-web/src/components/resizable/resizable.directive.js
index 53b9ac8..2dcfe0a 100644
--- a/zeppelin-web/src/components/resizable/resizable.directive.js
+++ b/zeppelin-web/src/components/resizable/resizable.directive.js
@@ -35,7 +35,7 @@ angular.module('zeppelinWebApp').directive('resizable', function() {
           var colStep = window.innerWidth / 12;
           elem.off('resizestop');
           var conf = angular.copy(resizableConfig);
-          if (resize.graphType === 'TABLE') {
+          if (resize.graphType === 'TABLE' || resize.graphType === 'TEXT') {
             conf.grid = [colStep, 10];
             conf.minHeight = 100;
           } else {