فهرست منبع

HUE-3960 [editor] Increase generation performance of the fixed first column

Enrico Berti 9 سال پیش
والد
کامیت
44e9ddffdf

+ 1 - 0
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -322,6 +322,7 @@ var hueDebugTimer = (function () {
       times.push(initialTime);
       if (enableConsole){
         withConsole = true;
+        console.log('Start', initialTime);
       }
     },
     mark: function (label) {

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

@@ -50,7 +50,7 @@
         var appendable = $t.children('tbody').length > 0 ? $t.children('tbody') : $t;
 
         var rowHeight = 29;
-        var invisibleOffset = aoColumns.length < 500 ? 10 : 1;
+        var invisibleOffset = aoColumns.length < 100 ? 10 : 1;
         var scrollable = $t.parents($t.data('oInit')['scrollable']);
         var visibleRows = Math.ceil((scrollable.height() - Math.max($t.offset().top, 0)) / rowHeight);
 
@@ -65,7 +65,7 @@
             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(html);
-          if (aoColumns.length < 500 && $t.data('plugin_jHueTableExtender')) {
+          if ($t.data('plugin_jHueTableExtender')) {
             $t.data('plugin_jHueTableExtender').drawFirstColumn();
           }
         }
@@ -76,7 +76,7 @@
               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')) {
+            if ($t.data('plugin_jHueTableExtender')) {
               $t.data('plugin_jHueTableExtender').drawFirstColumn();
             }
           }
@@ -98,7 +98,7 @@
           appendable.children().eq(i).html(html);
         }
 
-        if (aoColumns.length < 500 && $t.data('plugin_jHueTableExtender')) {
+        if ($t.data('plugin_jHueTableExtender')) {
           $t.data('plugin_jHueTableExtender').drawHeader();
           $t.data('plugin_jHueTableExtender').drawLockedRows();
         }

+ 25 - 17
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -265,18 +265,21 @@
     }
 
     $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainerCell").remove();
-    var clonedCell = $(plugin.element).clone();
+    var clonedCell = $('<table>').attr('class', $(plugin.element).attr('class'));
+    clonedCell.removeClass(plugin.options.classToRemove);
     clonedCell.css("margin-bottom", "0").css("table-layout", "fixed");
-    clonedCell.removeAttr("id").removeClass(plugin.options.classToRemove).find("tbody").empty();
-    clonedCell.find("thead>tr th:not(:eq(0))").remove();
-    clonedCell.find("thead>tr th:eq(0)").width(originalTh.width()).css("background-color", "#FFFFFF");
-    clonedCell.find("thead>tr th:eq(0)").click(function () {
+    var clonedCellTHead = $('<thead>');
+    clonedCellTHead.appendTo(clonedCell);
+    var clonedCellTH = originalTh.clone();
+    clonedCellTH.appendTo(clonedCellTHead);
+    clonedCellTH.width(originalTh.width()).css("background-color", "#FFFFFF");
+    clonedCellTH.click(function () {
       originalTh.click();
-      clonedCell.find("thead>tr th").attr("class", "sorting");
-      $(this).attr("class", originalTh.attr("class"));
     });
+    $('<tbody>').appendTo(clonedCell)
 
     var clonedCellContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth());
+
     clonedCell.appendTo(clonedCellContainer);
 
     var clonedCellVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainerCell").addClass("jHueTableExtenderClonedContainerCell").width(originalTh.outerWidth()).css("overflow", "hidden").css("top", topPosition + "px");
@@ -285,20 +288,26 @@
     clonedCellContainer.appendTo(clonedCellVisibleContainer);
 
     $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainerColumn").remove();
-    var clonedTable = $(plugin.element).clone();
+    var clonedTable = $('<table>').attr('class', $(plugin.element).attr('class')).html('<thead></thead><tbody></tbody>');
+    clonedTable.removeClass(plugin.options.classToRemove);
     clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
-    clonedTable.removeAttr("id").removeClass(plugin.options.classToRemove);
-    clonedTable.find("thead>tr th:not(:eq(0))").remove();
-    clonedTable.find("tbody>tr").each(function () {
-      $(this).find("td:not(:eq(0))").remove();
-      if (plugin.options.lockSelectedRow) {
-        var cell = $(this).find('td:eq(0)');
+    $(plugin.element).find("thead>tr th:eq(0)").clone().appendTo(clonedTable.find('thead'));
+    var clonedTBody = clonedTable.find('tbody');
+    var clones = $(plugin.element).find("tbody>tr td:nth-child(1)").clone();
+    var h = '';
+    clones.each(function(){
+      h+= '<tr><td>' + $(this).html() +'</td></tr>';
+    });
+    clonedTBody.html(h);
+    if (plugin.options.lockSelectedRow) {
+      clonedTBody.find('td').each(function(){
+        var cell = $(this);
         cell.attr('title', plugin.options.labels.LOCK).addClass('lockable pointer').on('click', function(){
           drawLockedRow(plugin, $(this).text()*1);
         });
         $('<i>').addClass('fa fa-lock muted').prependTo(cell);
-      }
-    });
+      });
+    }
     clonedTable.find("thead>tr th:eq(0)").width(originalTh.width()).css("background-color", "#FFFFFF");
 
     var clonedTableContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth()).height($pluginElement.parent().get(0).scrollHeight);
@@ -333,7 +342,6 @@
 
     clonedTableContainer.css("marginTop", (-$pluginElement.parent().scrollTop()) + "px");
 
-
     function positionClones() {
       var pos = plugin.options.stickToTopPosition;
       if (typeof pos === 'function'){

+ 0 - 3
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -90,9 +90,6 @@
       });
     };
 
-    self.hasManyColumns = ko.pureComputed(function () {
-      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());
     self.endTime = ko.observable(typeof result.endTime != "undefined" && result.endTime != null ? new Date(result.endTime) : new Date());

+ 11 - 13
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -2241,18 +2241,16 @@ ${ 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: function() { return vm.isPlayerMode() ? 1 : 73 },
-          parentId: 'snippet_' + snippet.id(),
-          clonedContainerPosition: "fixed"
-        });
-      }
+      $(el).jHueTableExtender({
+        fixedHeader: true,
+        fixedFirstColumn: true,
+        lockSelectedRow: true,
+        includeNavigator: false,
+        mainScrollable: '.right-panel',
+        stickToTopPosition: function() { return vm.isPlayerMode() ? 1 : 73 },
+        parentId: 'snippet_' + snippet.id(),
+        clonedContainerPosition: "fixed"
+      });
       $(el).jHueHorizontalScrollbar();
     }
     else {
@@ -2766,7 +2764,7 @@ ${ hueIcons.symbols() }
           return;
         }
         viewModel.selectedNotebook().snippets().forEach(function (snippet) {
-          if (snippet.result.meta().length > 0 && !snippet.result.hasManyColumns()) {
+          if (snippet.result.meta().length > 0) {
             var _el = $("#snippet_" + snippet.id()).find(".resultTable");
             if (!viewModel.editorMode()) {
               _el.jHueTableExtender({