Merge pull request #143 from jpmorganchase/scroll-performance-fix

Fixed Hypergrid lazy data model scroll performance bug
finos · Jul 2, 2018 · f26b052 · f26b052
2 parents c125c60 + 71c7c35
commit f26b052
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 38 deletions.
diff --git a/packages/perspective-examples/src/html/csv.html b/packages/perspective-examples/src/html/csv.html
@@ -67,10 +67,6 @@
     </head>
     <body>
 
-        <!-- <perspective-viewer>
-                
-        </perspective-viewer> -->
-
         <div id="drop-area">
             <form class="my-form">
               <p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
@@ -142,7 +138,6 @@
                     }
                     reader.readAsText(file);
                 }
-                // document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
             });
 
         </script>

diff --git a/packages/perspective-viewer-highcharts/src/js/config.js b/packages/perspective-viewer-highcharts/src/js/config.js
@@ -117,6 +117,11 @@ export function default_config(aggregates, mode, js, col_pivots) {
             inverted: mode.indexOf('horizontal') > -1,
             animation: false,
             zoomType: mode === 'scatter' ? 'xy' : 'x',
+            resetZoomButton: {
+                position: {
+                    align: 'left',
+                }
+            }
         },
         navigation: {
             buttonOptions: {

diff --git a/packages/perspective-viewer-hypergrid/src/js/CachedRendererPlugin.js b/packages/perspective-viewer-hypergrid/src/js/CachedRendererPlugin.js
@@ -7,29 +7,13 @@
  *
  */
 
-'use strict';
-
 const rectangular = require('rectangular');
 
-const Range = require('./Range');
-
-function getSubrects() {
-    let range = Range.estimate(this.grid);
-    range.end_row = Math.min(range.end_row, this.grid.behavior.dataModel.getRowCount());
-    if (!this.dataWindow) {
-        return []
-    }
-    var dw = this.dataWindow;
-    var rect = this.grid.newRectangle(dw.left, Math.min(dw.top, range.start_row), dw.width, Math.max(dw.height, range.end_row)); // convert from InclusiveRect
-    return [rect];
-}
-
 function CachedRendererPlugin(grid) {
 
     async function update_cache() {
         return await new Promise(resolve => {
-            const rects = getSubrects.call(grid.renderer)
-            grid.behavior.dataModel.fetchData(rects, val => resolve(!val));
+            grid.behavior.dataModel.fetchData(undefined, val => resolve(!val));
         });
     }
 

diff --git a/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js b/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js
@@ -11,6 +11,15 @@ const Range = require('./Range');
 
 const TREE_COLUMN_INDEX = require('fin-hypergrid/src/behaviors/Behavior').prototype.treeColumnIndex;
 
+function getSubrects() {
+    if (!this.dataWindow) {
+        return []
+    }
+    var dw = this.dataWindow;
+    var rect = this.grid.newRectangle(dw.left, dw.top, dw.width, dw.height); // convert from InclusiveRect
+    return [rect];
+}
+
 module.exports = require('datasaur-local').extend('PerspectiveDataModel', {
 
     isTreeCol: function (x) {
@@ -38,22 +47,37 @@ module.exports = require('datasaur-local').extend('PerspectiveDataModel', {
         this._isTree = isTree;
     },
 
+    isCached: function (rects) {
+        return !rects || !rects.find(uncachedRow, this);
+    },
+
+    setDirty: function (nrows) {
+        this._dirty = true;
+        this.grid.renderer.needsComputeCellsBounds = true;
+        this.grid.canvas.dirty = true;
+        this._nrows = nrows;
+    },
 
     fetchData: function (rectangles, resolve) {
-        if (!rectangles.find(uncachedRow, this)) {
+        if (!rectangles) {
+            rectangles = getSubrects.call(this.grid.renderer);
+        }
+
+        if (!this._dirty && !rectangles.find(uncachedRow, this)) {
             resolve(false);
             return;
         }
 
-        this.data.length = 0;
+        this._dirty = false;
 
         const promises = rectangles.map(
             rect => this.pspFetch(Range.create(rect.origin.y, rect.corner.y + 2))
         );
 
         Promise.all(promises).then(() => {
-            resolve(false);
-        }).catch(() => {
+            let rects = getSubrects.call(this.grid.renderer);
+            resolve(!!rects.find(uncachedRow, this));
+        }).catch(e => {
             resolve(true);
         }); 
     },
@@ -76,11 +100,7 @@ module.exports = require('datasaur-local').extend('PerspectiveDataModel', {
 });
 
 function uncachedRow(rect) {
-    for (var r = rect.origin.y, R = Math.min(rect.corner.y + 2, this.getRowCount()); r < R; ++r) {
-        if (!this.data[r]) {
-            return true;
-        }
-    }
+    return !(this.data[rect.origin.y] && this.data[Math.min(rect.corner.y, this.getRowCount() - 1)]);
 }
 
 function cellStyle(gridCellConfig) {

diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid.js
@@ -259,12 +259,7 @@ async function grid_update(div, view, task) {
         return;
     }
 
-    this.hypergrid.renderer.needsComputeCellsBounds = true;
-    this.hypergrid.canvas.dirty = true;
-    this.hypergrid.behavior.dataModel.data = [];
-    this.hypergrid.behavior.dataModel._nrows = nrows;
-    this.hypergrid.behavior.dataModel.fetchOrdinal = -1;
-    this.hypergrid._cached_range = undefined;
+    this.hypergrid.behavior.dataModel.setDirty(nrows);
     await this.hypergrid.canvas.paintNow();
 }
 
@@ -323,13 +318,16 @@ async function grid_create(div, view, task) {
 
     dataModel.pspFetch = async function (range) {
         let next_page = await view.to_json(range);
+        this.data = [];
         const rows = psp2hypergrid(next_page, hidden, schema, tschema, rowPivots).rows;
         const data = this.data, base = range.start_row;
         rows.forEach((row, offset) => data[base + offset] = row);
     };
 
+    this.hypergrid.setVScrollValue(0);
     perspectiveHypergridElement.set_data(json, hidden, schema, tschema, rowPivots);
     await this.hypergrid.canvas.resize();
+    await this.hypergrid.canvas.resize();
 }
 
 global.registerPlugin('hypergrid', {

diff --git a/packages/perspective-viewer/src/less/material.less b/packages/perspective-viewer/src/less/material.less
@@ -140,7 +140,7 @@ perspective-viewer #app {
 
     perspective-row {
 
-        li#psp_row {
+        #psp_row {
             margin-bottom: 0px;
             color: #666;
             margin-right: 0px;

diff --git a/packages/perspective/src/js/perspective.js b/packages/perspective/src/js/perspective.js
@@ -528,6 +528,9 @@ view.prototype.to_json = async function(options) {
     let start_col = options.start_col || (viewport.left ? viewport.left : 0);
     let end_col = options.end_col || (viewport.width ? start_row + viewport.width : this.ctx.unity_get_column_count() + (this.sides() === 0 ? 0 : 1));
     let slice;
+    if (this.config.row_pivot[0] === 'psp_okey') {
+        end_row += this.config.column_pivot.length;
+    }
     if (this.sides() === 0) {
         slice = __MODULE__.get_data_zero(this.ctx, start_row, end_row, start_col, end_col);
     } else if (this.sides() === 1) {