Append all pages with promises

lib/frappe-datatable.js

@@ -322,6 +322,7 @@ exports.copyTextToClipboard = copyTextToClipboard;
 exports.isNumeric = isNumeric;
 exports.throttle = throttle;
 exports.promisify = promisify;
+exports.chainPromises = chainPromises;
 function camelCaseToDash(str) {
   return str.replace(/([A-Z])/g, function (g) {
     return '-' + g[0].toLowerCase();
@@ -530,6 +531,12 @@ function promisify(fn) {
   };
 };
 
+function chainPromises(promises) {
+  return promises.reduce(function (prev, cur) {
+    return prev.then(cur);
+  }, Promise.resolve());
+};
+
 /***/ }),
 /* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2283,7 +2290,6 @@ var DataTable = function () {
     value: function render() {
       this.renderHeader();
       this.renderBody();
-      this.setDimensions();
     }
   }, {
     key: 'renderHeader',
@@ -3040,17 +3046,10 @@ var BodyRenderer = function () {
       // empty body
       this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML([]) + '\n      </table>\n    ';
 
-      this.start = 0;
-      this.pageLength = 1000;
-      this.end = this.start + this.pageLength;
-
-      // only append ${this.pageLength} rows in the beginning,
-      // defer remaining
-      var rows = this.datamanager.getRows(this.start, this.end);
-      var initialData = this.getDataForClusterize(rows);
-
+      // Rows will be appended as promises, so we don't block
+      // even for the first page render
       this.clusterize = new _clusterize2.default({
-        rows: initialData,
+        rows: [],
         scrollElem: this.bodyScrollable,
         contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
         callbacks: {
@@ -3061,34 +3060,47 @@ var BodyRenderer = function () {
           }
         }
       });
-      this.log('dataAppended', this.pageLength);
       this.appendRemainingData();
+      // setDimensions will work only if there is atleast one row appended
+      // so we call it as soon as the first Page is appended
+      this.firstPagePromise.then(function () {
+        return _this.instance.setDimensions();
+      });
     }
   }, {
     key: 'appendRemainingData',
     value: function appendRemainingData() {
-      var dataAppended = this.pageLength;
+      var chunkSize = 1000;
+      var start = 0,
+          end = chunkSize;
+      var dataAppended = 0;
+      this.firstPagePromise = null;
+
       var promises = [];
       var rowCount = this.datamanager.getRowCount();
 
-      while (dataAppended + this.pageLength < rowCount) {
-        this.start = this.end;
-        this.end = this.start + this.pageLength;
-        promises.push(this.appendNextPage(this.start, this.end));
-        dataAppended += this.pageLength;
+      while (dataAppended + chunkSize < rowCount) {
+        var promise = this.appendNextPage(start, end);
+        if (!this.firstPagePromise) this.firstPagePromise = promise;
+        promises.push(promise);
+        dataAppended += chunkSize;
+        start = end;
+        end += chunkSize;
       }
 
-      if (rowCount % this.pageLength > 0) {
+      if (rowCount % chunkSize > 0) {
         // last page
-        this.start = this.end;
-        this.end = this.start + this.pageLength;
-        promises.push(this.appendNextPage(this.start, this.end));
+        var _promise = this.appendNextPage(start, end);
+        if (!this.firstPagePromise) this.firstPagePromise = _promise;
+        promises.push(_promise);
+        dataAppended += rowCount % chunkSize;
       }
 
-      return promises.reduce(function (prev, cur) {
-        return prev.then(cur);
-      }, Promise.resolve());
+      return (0, _utils.chainPromises)(promises);
     }
+
+    // promisified
+
   }, {
     key: 'appendNextPage',
     value: function appendNextPage(start, end) {
@@ -3096,7 +3108,6 @@ var BodyRenderer = function () {
       var data = this.getDataForClusterize(rows);
 
       this.clusterize.append(data);
-      this.log('dataAppended', rows.length);
     }
   }, {
     key: 'getDataForClusterize',

src/body-renderer.js

@@ -1,7 +1,7 @@
 import $ from './dom';
 import Clusterize from 'clusterize.js';
 import { getRowHTML } from './rowmanager';
-import { promisify } from './utils';
+import { promisify, chainPromises } from './utils';
 
 export default class BodyRenderer {
   constructor(instance) {
@@ -42,17 +42,10 @@ export default class BodyRenderer {
       </table>
     `;
 
-    this.start = 0;
-    this.pageLength = 1000;
-    this.end = this.start + this.pageLength;
-
-    // only append ${this.pageLength} rows in the beginning,
-    // defer remaining
-    const rows = this.datamanager.getRows(this.start, this.end);
-    const initialData = this.getDataForClusterize(rows);
-
+    // Rows will be appended as promises, so we don't block
+    // even for the first page render
     this.clusterize = new Clusterize({
-      rows: initialData,
+      rows: [],
       scrollElem: this.bodyScrollable,
       contentElem: $('tbody', this.bodyScrollable),
       callbacks: {
@@ -63,40 +56,47 @@ export default class BodyRenderer {
         }
       }
     });
-    this.log('dataAppended', this.pageLength);
     this.appendRemainingData();
+    // setDimensions will work only if there is atleast one row appended
+    // so we call it as soon as the first Page is appended
+    this.firstPagePromise.then(() => this.instance.setDimensions());
   }
 
   appendRemainingData() {
-    let dataAppended = this.pageLength;
+    const chunkSize = 1000;
+    let start = 0, end = chunkSize;
+    let dataAppended = 0;
+    this.firstPagePromise = null;
+
     const promises = [];
     const rowCount = this.datamanager.getRowCount();
 
-    while (dataAppended + this.pageLength < rowCount) {
-      this.start = this.end;
-      this.end = this.start + this.pageLength;
-      promises.push(this.appendNextPage(this.start, this.end));
-      dataAppended += this.pageLength;
+    while (dataAppended + chunkSize < rowCount) {
+      const promise = this.appendNextPage(start, end);
+      if (!this.firstPagePromise) this.firstPagePromise = promise;
+      promises.push(promise);
+      dataAppended += chunkSize;
+      start = end;
+      end += chunkSize;
     }
 
-    if (rowCount % this.pageLength > 0) {
+    if (rowCount % chunkSize > 0) {
       // last page
-      this.start = this.end;
-      this.end = this.start + this.pageLength;
-      promises.push(this.appendNextPage(this.start, this.end));
+      const promise = this.appendNextPage(start, end);
+      if (!this.firstPagePromise) this.firstPagePromise = promise;
+      promises.push(promise);
+      dataAppended += rowCount % chunkSize;
     }
 
-    return promises.reduce(
-      (prev, cur) => prev.then(cur), Promise.resolve()
-    );
+    return chainPromises(promises);
   }
 
+  // promisified
   appendNextPage(start, end) {
     const rows = this.datamanager.getRows(start, end);
     const data = this.getDataForClusterize(rows);
 
     this.clusterize.append(data);
-    this.log('dataAppended', rows.length);
   }
 
   getDataForClusterize(rows) {

src/datatable.js

@@ -139,7 +139,6 @@ class DataTable {
   render() {
     this.renderHeader();
     this.renderBody();
-    this.setDimensions();
   }
 
   renderHeader() {

src/utils.js

@@ -193,3 +193,9 @@ export function promisify(fn, context = null) {
     });
   };
 };
+
+export function chainPromises(promises) {
+  return promises.reduce(
+    (prev, cur) => prev.then(cur), Promise.resolve()
+  );
+};