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 <[email protected]> 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 <[email protected]> Authored: Thu Feb 11 09:13:03 2016 +0530 Committer: Felix Cheung <[email protected]> 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 {
![https://cloud.githubusercontent.com/assets/674497/11625014/bf2044dc-9cfd-11e5-8b9b-0ac8256671cf.png"](https://cloud.githubusercontent.com/assets/674497/11625014/bf2044dc-9cfd-11e5-8b9b-0ac8256671cf.png"){kind=link}
![https://cloud.githubusercontent.com/assets/674497/11625051/f8b1abbe-9cfd-11e5-9001-4794ba10dbf3.png"](https://cloud.githubusercontent.com/assets/674497/11625051/f8b1abbe-9cfd-11e5-9001-4794ba10dbf3.png"){kind=link}