Repository: incubator-zeppelin
Updated Branches:
refs/heads/master fb75cb3d4 -> 47a7decd5
Zeppelin-523 ] Table Header fixed and scrolling bug fixes.
### What is this PR for?
For Table, reimplemented, scrolling, deleting a bug in the Table Header,
Scrolling area expressed bugs have been fixed.
### What type of PR is it?
Bug Fix
### Todos
- [x] \(Re-modification\) always top fixed column title for table
- [x] table scrolling bug fixed. out of area scroll
https://github.com/apache/incubator-zeppelin/pull/556
- [x] After the re-run, remove the scroll bar
- [x] License Infomation
- [x] record the license information of jquery.floatThead.
- [x] Browser Test
- [x] Safari (9.0.2(11601.3.9)
- [x] Firefox (43.0)
- [x] Chrome (47.0.2526.106 (64-bit)
### Is there a relevant Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-523
### How should this be tested?
Step 1. create table on zeppelin
example query)
``` python
%pyspark
TABLE = "%table Header1\tHeader2\n"
for x in range(1,51):
#TABLE += "scroll";
TABLE += str(x);
if (x%2) == 0:
TABLE += "\n"
else:
TABLE += "\t"
z.put("table_context", TABLE)
```
``` scala
println(z.get("table_context"))
```
Step 2.
Scroll the mouse over the Table.
Step 3.
re Run Paragraph.
Step 4.
Scroll the mouse over the Table.
### Screenshots (if appropriate)
#### Before
#### After
### Questions:
You are using an external source?
\- I used jquery.floatThead (MIT) Libraries.
It helps to secure the Table Header.
Why did this problem occur?
\- ref. https://github.com/noraesae/perfect-scrollbar#how-to-use perfect
scrollbar library.
height calculation miss.
Why it has created a new PR?
\- A problem with a private Git Repository to my mistakes.
Please previous PR, see the following URL.
https://github.com/apache/incubator-zeppelin/pull/556
In the ScreenShot, it seems to have changed color table. What changed things?
\- no. It's Animated Gif color problems.
Changes that do not exist.
Author: CloverHearts <[email protected]>
Closes #565 from cloverhearts/bug_fix/table_scrolling_and_hiding and squashes
the following commits:
19621bf [CloverHearts] bug fix - Floating Thead corrected the problem does not
go away.
350683e [CloverHearts] remove white space
4eb9546 [CloverHearts] Space remove. (Ci- build)
93ce86d [CloverHearts] changed Paragraph Gear Option z-index
a52e35e [CloverHearts] CI - BUILD Commit
ba165bf [CloverHearts] variable name change
f8123c5 [CloverHearts] Fixed scrollbar when the first Mouseover does not appear
in the Table.
bf16e1a [CloverHearts] bug fixed visualize table component
Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo
Commit:
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/47a7decd
Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/47a7decd
Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/47a7decd
Branch: refs/heads/master
Commit: 47a7decd5aefc19610c1b314bfc8868afd90ac45
Parents: fb75cb3
Author: CloverHearts <[email protected]>
Authored: Tue Dec 29 22:32:08 2015 -0800
Committer: Lee moon soo <[email protected]>
Committed: Sun Jan 3 07:57:01 2016 -0800
----------------------------------------------------------------------
zeppelin-distribution/src/bin_license/LICENSE | 1 +
zeppelin-web/bower.json | 3 +-
.../notebook/paragraph/paragraph-control.html | 2 +-
.../notebook/paragraph/paragraph.controller.js | 35 ++++++++++++++------
zeppelin-web/src/index.html | 2 ++
zeppelin-web/test/karma.conf.js | 2 ++
6 files changed, 33 insertions(+), 12 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/47a7decd/zeppelin-distribution/src/bin_license/LICENSE
----------------------------------------------------------------------
diff --git a/zeppelin-distribution/src/bin_license/LICENSE
b/zeppelin-distribution/src/bin_license/LICENSE
index 52ce3eb..bcce33d 100644
--- a/zeppelin-distribution/src/bin_license/LICENSE
+++ b/zeppelin-distribution/src/bin_license/LICENSE
@@ -111,6 +111,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
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/47a7decd/zeppelin-web/bower.json
----------------------------------------------------------------------
diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index ee9ea46..8aa5424 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -29,7 +29,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"
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/47a7decd/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index f6bf9b4..2ab26b7 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 @@ limitations under the License.
data-toggle="dropdown"
type="button">
</span>
- <ul class="dropdown-menu" role="menu" style="width:200px;">
+ <ul class="dropdown-menu" role="menu" style="width:200px;z-index:1002">
<li>
<a ng-click="$event.stopPropagation()" class="dropdown"><span
class="fa fa-arrows-h"></span> Width
<form style="display:inline; margin-left:5px;">
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/47a7decd/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 7a92cd0..4728ba3 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1020,8 +1020,7 @@ angular.module('zeppelinWebApp')
var renderTable = function() {
var html = '';
-
- html += '<table class="table table-hover table-condensed" style="top: 0;
position: absolute;">';
+ html += '<table class="table table-hover table-condensed">';
html += ' <thead>';
html += ' <tr style="background-color: #F6F6F6; font-weight: bold;">';
for (var titleIndex in $scope.paragraph.result.columnNames) {
@@ -1029,10 +1028,7 @@ angular.module('zeppelinWebApp')
}
html += ' </tr>';
html += ' </thead>';
- html += '</table>';
-
- html += '<table class="table table-hover table-condensed"
style="margin-top: 31px;">';
-
+ html += ' <tbody>';
for (var r in $scope.paragraph.result.msgTable) {
var row = $scope.paragraph.result.msgTable[r];
html += ' <tr>';
@@ -1047,19 +1043,38 @@ angular.module('zeppelinWebApp')
}
html += ' </tr>';
}
-
+ html += ' </tbody>';
html += '</table>';
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({
+ scrollContainer: function (dataTable) {
+ return angular.element('#p' + $scope.paragraph.id + '_table');
+ }
+ });
+ angular.element('#p' + $scope.paragraph.id + '_table
.table').on('remove', function () {
+ angular.element('#p' + $scope.paragraph.id + '_table
.table').floatThead('destroy');
+ });
+
+ 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);
+ 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').height(height);
};
var retryRenderer = function() {
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/47a7decd/zeppelin-web/src/index.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 2b11465..3864f8a 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -124,6 +124,8 @@ limitations under the License.
<script src="bower_components/ngtoast/dist/ngToast.js"></script>
<script src="bower_components/ng-focus-if/focusIf.js"></script>
<script
src="bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js"></script>
+ <script
src="bower_components/floatThead/dist/jquery.floatThead.js"></script>
+ <script
src="bower_components/floatThead/dist/jquery.floatThead.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,src}) scripts/scripts.js -->
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/47a7decd/zeppelin-web/test/karma.conf.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js
index 34895b4..c69f20a 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -57,6 +57,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',
