Ver Fonte

HUE-3960 [editor] Improved performances of the new datatable

Enrico Berti há 9 anos atrás
pai
commit
e5c719d

+ 19 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -628,9 +628,27 @@ table.display td.center {
   cursor: default;
   background: none;
   border-top: none;
-  padding-right: 0!important;
+  padding-right: 4px!important;
+  padding-left: 4px!important;
 }
 
+@keyframes barberpole {
+  from { background-position: 0 0; }
+  to   { background-position: 60px 30px; }
+}
+
+.table-huedatatable td.stripe {
+  background: repeating-linear-gradient(
+      -55deg,
+      #FFF,
+      #FFF 10px,
+      #f9f9f9 10px,
+      #f9f9f9 20px
+    );
+  animation: barberpole 0.5s linear infinite;
+}
+
+
 .sorting_disabled {
   vertical-align: middle!important;
 }

+ 1 - 1
desktop/core/src/desktop/static/desktop/js/jquery.horizontalscrollbar.js

@@ -85,7 +85,7 @@
     var el = this.element;
 
     var checkWidth = function () {
-      if ($(el).parents('.dataTables_wrapper').find('.jHueTableExtenderClonedContainerColumn').width() > 0) {
+      if ($(el).parents('.dataTables_wrapper').width() > 0) {
         initWhenReady(el);
       } else {
         window.setTimeout(checkWidth, 100);

+ 44 - 44
desktop/core/src/desktop/static/desktop/js/jquery.huedatatable.js

@@ -39,82 +39,82 @@
     }
 
     self.isDrawing = false;
-    self.fnDraw = function () {
+
+    self.fnDraw = function (force) {
+
       if (!self.isDrawing) {
         self.isDrawing = true;
-        var rowHeight = 29;
         var $t = self.$table;
-
         var aoColumns = self.$table.data('aoColumns');
+        var data = self.$table.data('data');
         var appendable = $t.children('tbody').length > 0 ? $t.children('tbody') : $t;
 
-        var maxDOMCells = 20000;
+        var rowHeight = 29;
+        var invisibleOffset = aoColumns.length < 500 ? 10 : 1;
         var scrollable = $t.parents($t.data('oInit')['scrollable']);
         var visibleRows = Math.ceil((scrollable.height() - Math.max($t.offset().top, 0)) / rowHeight);
 
-        var invisibleOffset = Math.ceil(Math.min(Math.max(0, (visibleRows * (maxDOMCells / (aoColumns.length * visibleRows))) - visibleRows), 100 - visibleRows));
-
         visibleRows += invisibleOffset;
 
         var startRow = $t.offset().top - 73 < 0 ? Math.max(Math.floor(Math.abs($t.offset().top - 73) / rowHeight) - invisibleOffset, 0) : 0;
-        var endRow = startRow + visibleRows;
+        var endRow = startRow + visibleRows + invisibleOffset;
 
-        var northSpace = rowHeight * startRow;
-        if ($t.find('.ht-north-spacer').length === 0) {
-          $('<tr>').addClass('ht-north-spacer').hide().html('<td colspan="' + (aoColumns.length) + '"></td>').appendTo(appendable);
-        }
-        else {
-          if (northSpace > 0) {
-            $t.find('.ht-north-spacer').show().html('<td colspan="' + (aoColumns.length) + '" style="height: ' + northSpace + 'px"></td>');
+        if ($t.data('fnDraws') == 0) {
+          var html = '';
+          for (var i = 0; i < data.length; i++) {
+            html += '<tr class="ht-visible-row ht-visible-row-' + i + '"><td>' + data[i][0] + '</td><td colspan="' + (aoColumns.length - 1) + '" class="stripe"></td></tr>';
           }
-          else {
-            $t.find('.ht-north-spacer').hide();
+          appendable.html(html);
+          if (aoColumns.length < 500) {
+            $t.data('plugin_jHueTableExtender').drawFirstColumn();
           }
         }
-
-        if ($t.data('fnDraws') == 0){
-          $t.find('.ht-visible-row').empty();
-
-          for (var i=visibleRows - 1; i >= 0; i--) {
-            if ($t.find('.ht-visible-row-' + i).length === 0) {
-              $t.find('.ht-north-spacer').after('<tr class="ht-visible-row ht-visible-row-' + i + '"></tr>');
+        else {
+          if (force) {
+            var html = '';
+            for (var i = $t.find('.ht-visible-row').length; i < data.length; i++) {
+              html += '<tr class="ht-visible-row ht-visible-row-' + i + '"><td>' + data[i][0] + '</td><td colspan="' + (aoColumns.length - 1) + '" class="stripe"></td></tr>';
+            }
+            appendable.html(appendable.html() + html);
+            if (aoColumns.length < 500) {
+              $t.data('plugin_jHueTableExtender').drawFirstColumn();
             }
           }
         }
 
-        $t.find('.ht-visible-row').each(function(idx, el){
-          var row = $t.data('data')[startRow + idx];
+        for (var i = 0; i < data.length; i++) {
           var html = '';
-          if (row){
-            for (var j = 0; j < aoColumns.length; j++) {
-              html += '<td>' + row[j] + '</td>';
+          if (i >= startRow && i <= endRow) {
+            var row = data[i];
+            if (row) {
+              for (var j = 0; j < aoColumns.length; j++) {
+                html += '<td>' + row[j] + '</td>';
+              }
             }
           }
-          $(el).html(html);
-        });
-
-
-        var southSpace = rowHeight * ($t.data('data').length - endRow);
-        if ($t.find('.ht-south-spacer').length === 0) {
-          $('<tr>').addClass('ht-south-spacer').html('<td colspan="' + (aoColumns.length) + '" style="height: ' + southSpace + 'px"></td>').appendTo(appendable);
-        }
-        else {
-          $t.find('.ht-south-spacer').html('<td colspan="' + (aoColumns.length) + '" style="height: ' + southSpace + 'px"></td>');
+          else {
+            html = '<td>' + data[i][0] + '</td><td colspan="' + (aoColumns.length - 1) + '" class="stripe"></td>';
+          }
+          appendable.children().eq(i).html(html);
         }
 
+        if (aoColumns.length < 500) {
+          $t.data('plugin_jHueTableExtender').drawHeader();
+          $t.data('plugin_jHueTableExtender').drawLockedRows();
+        }
+        $t.data('fnDraws', $t.data('fnDraws') + 1);
         if ($t.data('oInit')['fnDrawCallback']) {
           $t.data('oInit')['fnDrawCallback']();
         }
-        $t.data('fnDraws', $t.data('fnDraws') + 1);
+
         self.isDrawing = false;
       }
-    };
+    }
 
     self.fnAddData = function (mData, bRedraw) {
-      var aoColumns = self.$table.data('aoColumns') || [];
-
       var $t = self.$table;
 
+      var aoColumns = $t.data('aoColumns') || [];
       $t.data('data', $t.data('data').concat(mData));
 
       if (mData.length === 0) {
@@ -129,7 +129,7 @@
         })
       }
 
-      self.fnDraw();
+      self.fnDraw(true);
 
     };
 
@@ -179,7 +179,7 @@
           self.$table.data('isScrollAttached', true);
           self.$table.parents(oInit['scrollable']).on('scroll', function () {
             window.clearTimeout(drawTimeout);
-            drawTimeout = window.setTimeout(self.fnDraw, 50);
+            drawTimeout = window.setTimeout(self.fnDraw, Math.max(100, Math.min(self.$table.data('aoColumns').length, 500)));
           });
         }
       }

+ 28 - 16
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -84,6 +84,26 @@
     }
   };
 
+  Plugin.prototype.drawHeader = function () {
+    drawHeader(this);
+  }
+
+  Plugin.prototype.drawFirstColumn = function () {
+    drawFirstColumn(this);
+  }
+
+  Plugin.prototype.drawLockedRows = function () {
+    var _this = this;
+    var $pluginElement = $(_this.element);
+    if ($pluginElement.data('lockedRows')) {
+      var locks = $pluginElement.data('lockedRows');
+      Object.keys(locks).forEach(function (idx) {
+        drawLockedRow(_this, idx.substr(1));
+      });
+    }
+  }
+
+
   Plugin.prototype.init = function () {
 
     $.expr[":"].econtains = function (obj, index, meta, stack) {
@@ -194,18 +214,16 @@
     $headerCounter.addClass('locked');
 
     function unlock($el) {
-      var idx = $el.parent().index();
-      $header.find('tbody tr:eq('+ idx +')').remove();
-      delete lockedRows[$el.text()]
+      $header.find('tr.ht-visible-row-'+(($el.text()*1)-1)).remove();
+      delete lockedRows['r' + $el.text()]
       $el.parent().remove();
-      if ($header.find('tbody tr').length == 0){
+      if ($header.find('tbody tr').length == 0) {
         $header.removeClass('locked');
         $headerCounter.removeClass('locked');
-        $pluginElement.data('lockedRows', {});
       }
     }
 
-    if (Object.keys(lockedRows).indexOf(rowNo) === -1) {
+    if (Object.keys(lockedRows).indexOf('r' + rowNo) === -1) {
       var $clone = $pluginElement.find('tr td:first-child').filter(function() {
         return $(this).text() === rowNo+'';
       }).closest('tr').clone();
@@ -217,15 +235,15 @@
       $newTr.find('td').on('click', function(){
         unlock($(this));
       });
-      lockedRows[rowNo] = {
+      lockedRows['r' + rowNo] = {
         row: $clone,
         cell: $newTr
       };
     }
     else {
-      lockedRows[rowNo].row.appendTo($header.find('tbody'));
-      lockedRows[rowNo].cell.appendTo($headerCounter.find('tbody'));
-      lockedRows[rowNo].cell.find('td').on('click', function(){
+      lockedRows['r' + rowNo].row.appendTo($header.find('tbody'));
+      lockedRows['r' + rowNo].cell.appendTo($headerCounter.find('tbody'));
+      lockedRows['r' + rowNo].cell.find('td').on('click', function(){
         unlock($(this));
       });
     }
@@ -342,12 +360,6 @@
 
     $(mainScrollable).on('scroll', positionClones);
 
-    if ($pluginElement.data('lockedRows')) {
-      var locks = $pluginElement.data('lockedRows');
-      Object.keys(locks).forEach(function (idx) {
-        drawLockedRow(plugin, idx);
-      });
-    }
   }
 
 

+ 1 - 1
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -91,7 +91,7 @@
     };
 
     self.hasManyColumns = ko.pureComputed(function () {
-      return self.meta() && self.meta().length > 300;
+      return self.meta() && self.meta().length > 500;
     });
     self.fetchedOnce = ko.observable(typeof result.fetchedOnce != "undefined" && result.fetchedOnce != null ? result.fetchedOnce : false);
     self.startTime = ko.observable(typeof result.startTime != "undefined" && result.startTime != null ? new Date(result.startTime) : new Date());

+ 20 - 25
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1605,7 +1605,7 @@ ${ hueIcons.symbols() }
 </script>
 
 <script type="text/html" id="snippet-grid-settings">
-  <div style="overflow:auto">
+  <div class="snippet-grid-settings" style="overflow:auto">
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
       <li class="nav-header" title="${_('Hide columns')}" style="margin-left: -2px">
         <span class="inactive-action pull-right" href="javascript:void(0)" data-bind="click: function(){ result.isMetaFilterVisible(true); }, css: { 'blue' : result.isMetaFilterVisible }"><i class="pointer fa fa-search" title="${ _('Search') }"></i></span>
@@ -2218,16 +2218,6 @@ ${ hueIcons.symbols() }
         if (vm.editorMode()) {
           DATATABLES_MAX_HEIGHT = $(window).height() - $(el).parent().offset().top - 40;
           $(el).parents('.dataTables_wrapper').css('overflow-x', 'hidden');
-          $(el).jHueTableExtender({
-            fixedHeader: true,
-            fixedFirstColumn: true,
-            lockSelectedRow: true,
-            includeNavigator: false,
-            parentId: 'snippet_' + snippet.id(),
-            mainScrollable: '.right-panel',
-            stickToTopPosition: vm.isPlayerMode() ? 1 : 73,
-            clonedContainerPosition: "fixed"
-          });
           $(el).jHueHorizontalScrollbar();
         }
         else {
@@ -2251,6 +2241,18 @@ ${ hueIcons.symbols() }
 
     if (vm.editorMode()) {
       $(el).parents('.dataTables_wrapper').css('overflow-x', 'hidden');
+      if (!snippet.result.hasManyColumns()) {
+        $(el).jHueTableExtender({
+          fixedHeader: true,
+          fixedFirstColumn: true,
+          lockSelectedRow: true,
+          includeNavigator: false,
+          mainScrollable: '.right-panel',
+          stickToTopPosition: vm.isPlayerMode() ? 1 : 73,
+          parentId: 'snippet_' + snippet.id(),
+          clonedContainerPosition: "fixed"
+        });
+      }
       $(el).jHueHorizontalScrollbar();
     } else {
       $(el).parents(".dataTables_wrapper").jHueTableScroller({
@@ -2763,21 +2765,9 @@ ${ hueIcons.symbols() }
           return;
         }
         viewModel.selectedNotebook().snippets().forEach(function (snippet) {
-          if (snippet.result.meta().length > 0 && ! snippet.result.hasManyColumns()) {
+          if (snippet.result.meta().length > 0 && !snippet.result.hasManyColumns()) {
             var _el = $("#snippet_" + snippet.id()).find(".resultTable");
-            if (viewModel.editorMode()) {
-              _el.jHueTableExtender({
-                fixedHeader: true,
-                fixedFirstColumn: true,
-                lockSelectedRow: true,
-                includeNavigator: false,
-                mainScrollable: '.right-panel',
-                stickToTopPosition: viewModel.isPlayerMode() ? 1 : 73,
-                parentId: 'snippet_' + snippet.id(),
-                clonedContainerPosition: "fixed"
-              });
-              _el.jHueHorizontalScrollbar();
-            } else {
+            if (!viewModel.editorMode()) {
               _el.jHueTableExtender({
                 fixedHeader: true,
                 fixedFirstColumn: true,
@@ -3216,6 +3206,10 @@ ${ hueIcons.symbols() }
         var _dtElement;
         if (snippet.showGrid()) {
           _dtElement = $("#snippet_" + snippet.id()).find(".dataTables_wrapper");
+          var topCoord = viewModel.isPlayerMode() ? 1 : 73;
+          $("#snippet_" + snippet.id()).find(".snippet-grid-settings").css({
+            "height": Math.ceil($(window).height() - topCoord) + 'px'
+          });
         } else {
           _dtElement = $("#snippet_" + snippet.id()).find(".chart:visible");
         }
@@ -3226,6 +3220,7 @@ ${ hueIcons.symbols() }
           "height": (_dtElement.height() - 30) + "px",
           "line-height": (_dtElement.height() - 30) + "px"
         });
+
       }
 
       $(document).on("renderData", function (e, options) {