From bf16e1aa108dd565b41c372d24ddd8ee1ab3a128 Mon Sep 17 00:00:00 2001 From: CloverHearts Date: Tue, 22 Dec 2015 00:45:40 -0800 Subject: [PATCH 1/8] bug fixed visualize table component --- zeppelin-distribution/src/bin_license/LICENSE | 1 + zeppelin-web/bower.json | 3 ++- .../paragraph/paragraph.controller.js | 24 ++++++++++++------- zeppelin-web/src/index.html | 2 ++ zeppelin-web/test/karma.conf.js | 2 ++ 5 files changed, 22 insertions(+), 10 deletions(-) diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE index 76e5b2380de..700f28a639a 100644 --- a/zeppelin-distribution/src/bin_license/LICENSE +++ b/zeppelin-distribution/src/bin_license/LICENSE @@ -85,6 +85,7 @@ The text of each license is also included at licenses/LICENSE-[project]-[version (The MIT License) Angular Websocket v1.0.13 (http://angularclass.github.io/angular-websocket/) - https://github.com/AngularClass/angular-websocket/blob/v1.0.13/LICENSE (The MIT License) UI.Ace v0.1.1 (http://angularclass.github.io/angular-websocket/) - https://github.com/angular-ui/ui-ace/blob/master/LICENSE (The MIT License) jquery.scrollTo v1.4.13 (https://github.com/flesler/jquery.scrollTo) - https://github.com/flesler/jquery.scrollTo/blob/1.4.13/LICENSE + (The MIT License) jquery.floatThead v1.3.2 (https://github.com/mkoryak/floatThead) - https://github.com/mkoryak/floatThead/blob/master/license.txt (The MIT License) angular-dragdrop v1.0.8 (http://codef0rmer.github.io/angular-dragdrop/#/) - https://github.com/codef0rmer/angular-dragdrop/blob/v1.0.8/LICENSE (The MIT License) perfect-scrollbar v0.5.4 (http://noraesae.github.io/perfect-scrollbar/) - https://github.com/noraesae/perfect-scrollbar/tree/0.5.4 (The MIT License) ng-sortable v1.1.9 (https://github.com/a5hik/ng-sortable) - https://github.com/a5hik/ng-sortable/blob/1.1.9/LICENSE diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json index 4e5c3534066..f0af12a0091 100644 --- a/zeppelin-web/bower.json +++ b/zeppelin-web/bower.json @@ -28,7 +28,8 @@ "angular-filter": "~0.5.4", "ngtoast": "~1.5.5", "ng-focus-if": "~1.0.2", - "bootstrap3-dialog": "bootstrap-dialog#~1.34.7" + "bootstrap3-dialog": "bootstrap-dialog#~1.34.7", + "floatThead": "~1.3.2" }, "devDependencies": { "angular-mocks": "1.3.8" diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 8eafa6fb4dd..87c611854a4 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -941,9 +941,9 @@ angular.module('zeppelinWebApp') var renderTable = function() { - var html = ''; - html += ''; + var html = ''; + html += '
'; html += ' '; html += ' '; for (var titleIndex in $scope.paragraph.result.columnNames) { @@ -951,10 +951,7 @@ angular.module('zeppelinWebApp') } html += ' '; html += ' '; - html += '
'; - - html += ''; - + html += ' '; for (var r in $scope.paragraph.result.msgTable) { var row = $scope.paragraph.result.msgTable[r]; html += ' '; @@ -969,19 +966,28 @@ angular.module('zeppelinWebApp') } html += ' '; } - + html += ' '; html += '
'; angular.element('#p' + $scope.paragraph.id + '_table').html(html); if ($scope.paragraph.result.msgTable.length > 10000) { angular.element('#p' + $scope.paragraph.id + '_table').css('overflow', 'scroll'); } else { + var dataTable = angular.element('#p' + $scope.paragraph.id + '_table .table'); + dataTable.floatThead({ + scrollContainer: function (dataTable) { + return angular.element('#p' + $scope.paragraph.id + '_table'); + } + }); + angular.element('#p' + $scope.paragraph.id + '_table').css('position', 'relative'); + angular.element('#p' + $scope.paragraph.id + '_table').css('height', '100%'); + angular.element('.ps-scrollbar-y-rail').css('z-index', '1002'); + angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('destroy'); angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar(); } - // set table height var height = $scope.paragraph.config.graph.height; - angular.element('#p' + $scope.paragraph.id + '_table').height(height); + angular.element('#p' + $scope.paragraph.id + '_table').css('height', height); }; var retryRenderer = function() { diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index 4bddd9849d4..bc70f64f867 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -122,6 +122,8 @@ + + diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js index 1cd232878ea..b9f07122938 100644 --- a/zeppelin-web/test/karma.conf.js +++ b/zeppelin-web/test/karma.conf.js @@ -56,6 +56,8 @@ module.exports = function(config) { 'bower_components/ngtoast/dist/ngToast.js', 'bower_components/ng-focus-if/focusIf.js', 'bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js', + 'bower_components/floatThead/dist/jquery.floatThead.js', + 'bower_components/floatThead/dist/jquery.floatThead.min.js', 'bower_components/angular-mocks/angular-mocks.js', // endbower 'src/app/app.js', From f8123c54b16db63857764f83eed57e7c44caeb5a Mon Sep 17 00:00:00 2001 From: CloverHearts Date: Tue, 22 Dec 2015 01:01:02 -0800 Subject: [PATCH 2/8] Fixed scrollbar when the first Mouseover does not appear in the Table. --- .../app/notebook/paragraph/paragraph.controller.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 87c611854a4..e06b5d2ce5f 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -972,6 +972,9 @@ angular.module('zeppelinWebApp') angular.element('#p' + $scope.paragraph.id + '_table').html(html); if ($scope.paragraph.result.msgTable.length > 10000) { angular.element('#p' + $scope.paragraph.id + '_table').css('overflow', 'scroll'); + // set table height + var height = $scope.paragraph.config.graph.height; + angular.element('#p' + $scope.paragraph.id + '_table').css('height', height); } else { var dataTable = angular.element('#p' + $scope.paragraph.id + '_table .table'); dataTable.floatThead({ @@ -981,13 +984,15 @@ angular.module('zeppelinWebApp') }); angular.element('#p' + $scope.paragraph.id + '_table').css('position', 'relative'); angular.element('#p' + $scope.paragraph.id + '_table').css('height', '100%'); - angular.element('.ps-scrollbar-y-rail').css('z-index', '1002'); angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('destroy'); angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar(); + angular.element('.ps-scrollbar-y-rail').css('z-index', '1002'); + // set table height + var height = $scope.paragraph.config.graph.height; + angular.element('#p' + $scope.paragraph.id + '_table').css('height', height); + angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('update'); } - // set table height - var height = $scope.paragraph.config.graph.height; - angular.element('#p' + $scope.paragraph.id + '_table').css('height', height); + }; var retryRenderer = function() { From ba165bf42ec493c12863c057523acf2d02c69c67 Mon Sep 17 00:00:00 2001 From: CloverHearts Date: Tue, 22 Dec 2015 01:08:56 -0800 Subject: [PATCH 3/8] variable name change --- .../src/app/notebook/paragraph/paragraph.controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index e06b5d2ce5f..1fce540eea1 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -988,8 +988,8 @@ angular.module('zeppelinWebApp') angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar(); angular.element('.ps-scrollbar-y-rail').css('z-index', '1002'); // set table height - var height = $scope.paragraph.config.graph.height; - angular.element('#p' + $scope.paragraph.id + '_table').css('height', height); + var psHeight = $scope.paragraph.config.graph.height; + angular.element('#p' + $scope.paragraph.id + '_table').css('height', psHeight); angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('update'); } From a52e35e88b3770bdeeef46ae70bcd50f17d952f4 Mon Sep 17 00:00:00 2001 From: CloverHearts Date: Tue, 22 Dec 2015 08:56:14 -0800 Subject: [PATCH 4/8] CI - BUILD Commit --- .../src/app/notebook/paragraph/paragraph.controller.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 1fce540eea1..c13c961fa3d 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -941,7 +941,6 @@ angular.module('zeppelinWebApp') var renderTable = function() { - var html = ''; html += ''; html += ' '; @@ -982,11 +981,13 @@ angular.module('zeppelinWebApp') return angular.element('#p' + $scope.paragraph.id + '_table'); } }); + angular.element('#p' + $scope.paragraph.id + '_table').css('position', 'relative'); angular.element('#p' + $scope.paragraph.id + '_table').css('height', '100%'); angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('destroy'); angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar(); angular.element('.ps-scrollbar-y-rail').css('z-index', '1002'); + // set table height var psHeight = $scope.paragraph.config.graph.height; angular.element('#p' + $scope.paragraph.id + '_table').css('height', psHeight); From 93ce86daa28eb422590fbe65dafb552838f25f52 Mon Sep 17 00:00:00 2001 From: CloverHearts Date: Wed, 23 Dec 2015 19:04:28 -0800 Subject: [PATCH 5/8] changed Paragraph Gear Option z-index --- zeppelin-web/src/app/notebook/paragraph/paragraph-control.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html index f6bf9b42fae..3a6fdf04fd4 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html @@ -38,7 +38,7 @@ data-toggle="dropdown" type="button"> -