瀏覽代碼

HUE-3933 [editor] Improve performances with hundreds of columns

This prevents a bunch of unnecessary processing on render time by pre-determining the sorting to use based on column types.
Johan Ahlen 9 年之前
父節點
當前提交
1af3035

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

@@ -64,7 +64,7 @@
         return item.name != ''
       });
     });
-    self.hasManyColumns = ko.computed(function () {
+    self.hasManyColumns = ko.pureComputed(function () {
       return self.meta() && self.meta().length > 300;
     });
     self.fetchedOnce = ko.observable(typeof result.fetchedOnce != "undefined" && result.fetchedOnce != null ? result.fetchedOnce : false);
@@ -827,6 +827,16 @@
         self.result.fetchedOnce(true);
       }
 
+      self.result.meta().forEach(function (meta) {
+        if ($.inArray(meta.type, ['TINYINT_TYPE', 'SMALLINT_TYPE', 'INT_TYPE', 'BIGINT_TYPE', 'FLOAT_TYPE', 'DOUBLE_TYPE', 'DECIMAL_TYPE', 'TIMESTAMP_TYPE', 'DATE_TYPE']) > -1) {
+          meta.cssClass = 'sort-numeric';
+        } else if ($.inArray(meta.type, ['TIMESTAMP_TYPE', 'DATE_TYPE']) > -1) {
+          meta.cssClass = 'sort-date';
+        } else {
+          meta.cssClass = 'sort-string';
+        }
+      })
+
       self.result.hasMore(result.has_more);
 
       if (result.has_more && rows > 0) {

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

@@ -1512,7 +1512,7 @@ ${ hueIcons.symbols() }
               <table class="table table-condensed table-striped resultTable">
                 <thead>
                 <tr data-bind="foreach: result.meta">
-                  <th data-bind="html: ($index() == 0 ? '&nbsp;' : $data.name), css: { 'sort-numeric': isNumericColumn($data.type), 'sort-date': isDateTimeColumn($data.type), 'sort-string': isStringColumn($data.type)}, attr: {'width': ($index() == 0 ? '1%' : ''), title: $data.type }"></th>
+                  <th data-bind="html: ($index() == 0 ? '&nbsp;' : $data.name), css: cssClass, attr: {'width': ($index() == 0 ? '1%' : ''), title: $data.type }"></th>
                 </tr>
                 </thead>
                 <tbody>
@@ -2223,18 +2223,6 @@ ${ hueIcons.symbols() }
     }
   }
 
-  function isNumericColumn(type) {
-    return $.inArray(type, ['TINYINT_TYPE', 'SMALLINT_TYPE', 'INT_TYPE', 'BIGINT_TYPE', 'FLOAT_TYPE', 'DOUBLE_TYPE', 'DECIMAL_TYPE', 'TIMESTAMP_TYPE', 'DATE_TYPE']) > -1;
-  }
-
-  function isDateTimeColumn(type) {
-    return $.inArray(type, ['TIMESTAMP_TYPE', 'DATE_TYPE']) > -1;
-  }
-
-  function isStringColumn(type) {
-    return !isNumericColumn(type) && !isDateTimeColumn(type);
-  }
-
   function pieChartDataTransformer(rawDatum) {
     var _data = [];