Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix scrolling for pivoted hypergrid #866

Merged
merged 2 commits into from
Jan 13, 2020
Merged

Fix scrolling for pivoted hypergrid #866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d49a3a
Fix scrolling on tree grids
sc1f Jan 8, 2020
d804680
test scrolling on expanded tree grid
sc1f Jan 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,10 @@ export default require("datasaur-local").extend("PerspectiveDataModel", {
return;
}
if (nrows !== this._nrows) {
this._grid.renderer.computeCellsBounds();
this._nrows = nrows;
this._grid.synchronizeScrollingBoundaries();
}
this._dirty = true;
this._nrows = nrows;
},

// Called when clicking on a row group expand
Expand Down
104 changes: 104 additions & 0 deletions packages/perspective-viewer-hypergrid/test/js/superstore.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

const utils = require("@finos/perspective-test");
const path = require("path");
const {scroll} = require("./utils");

const simple_tests = require("@finos/perspective-viewer/test/js/simple_tests.js");

Expand Down Expand Up @@ -46,6 +47,109 @@ utils.with_server({}, () => {
await page.waitForSelector("perspective-viewer:not([updating])");
});

test.capture("should not scroll vertically when collapsed smaller than viewport", async page => {
const viewer = await page.$("perspective-viewer");
await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer);
await page.waitForSelector("perspective-viewer:not([updating])");

await page.evaluate(async element => {
element.view.set_depth(0);
await element.notifyResize();
}, viewer);

await scroll(page, 0, 1000);

await page.waitForSelector("perspective-viewer:not([updating])");
});

test.capture("should not scroll horizontally when collapsed smaller than viewport", async page => {
const viewer = await page.$("perspective-viewer");

await page.evaluate(element => element.setAttribute("row-pivots", '["Category", "State", "City"]'), viewer);
await page.waitForSelector("perspective-viewer:not([updating])");

await page.evaluate(element => element.setAttribute("columns", '["Row ID", "Order ID"]'), viewer);
await page.waitForSelector("perspective-viewer:not([updating])");

await page.evaluate(async element => {
element.view.set_depth(0);
await element.notifyResize();
}, viewer);

await scroll(page, 1000, 0);

await page.waitForSelector("perspective-viewer:not([updating])");
});

test.capture("should scroll vertically when expanded from inside viewport to taller than viewport", async page => {
const viewer = await page.$("perspective-viewer");
await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer);
await page.waitForSelector("perspective-viewer:not([updating])");

await page.evaluate(async element => {
element.view.set_depth(0);
await element.notifyResize();
}, viewer);

await scroll(page, 0, 30); // Hide the scrollbar from the page, as hypergrid sees no off-viewport rows

await page.evaluate(async element => {
element.view.set_depth(3);
await element.notifyResize();
}, viewer);

// Should be able to scroll down
await scroll(page, 0, 1000);

await page.waitForSelector("perspective-viewer:not([updating])");
});

test.capture("should scroll horizontally when expanded from inside viewport to taller than viewport", async page => {
const viewer = await page.$("perspective-viewer");
await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer);
await page.waitForSelector("perspective-viewer:not([updating])");

await page.evaluate(async element => {
element.view.set_depth(0);
await element.notifyResize();
}, viewer);

await scroll(page, 0, 30); // Hide the scrollbar from the page, as hypergrid sees no off-viewport rows

await page.evaluate(async element => {
element.view.set_depth(3);
await element.notifyResize();
}, viewer);

// Should be able to scroll right
await scroll(page, 500, 0);

await page.waitForSelector("perspective-viewer:not([updating])");
});

test.capture("should scroll horizontally and vertically when expanded from inside viewport to taller than viewport", async page => {
const viewer = await page.$("perspective-viewer");
await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer);
await page.waitForSelector("perspective-viewer:not([updating])");

await page.evaluate(async element => {
element.view.set_depth(0);
await element.notifyResize();
}, viewer);

await scroll(page, 0, 30); // Hide the scrollbar from the page, as hypergrid sees no off-viewport rows

await page.evaluate(async element => {
element.view.set_depth(3);
await element.notifyResize();
}, viewer);

// Should be able to scroll right
await scroll(page, 500, 1000);

await page.waitForSelector("perspective-viewer:not([updating])");
});

test.capture("handles flush", async page => {
const viewer = await page.$("perspective-viewer");
await page.shadow_click("perspective-viewer", "#config_button");
Expand Down
19 changes: 19 additions & 0 deletions packages/perspective-viewer-hypergrid/test/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,25 @@
*
*/

exports.scroll = async (page, x = 0, y = 100) => {
await page.evaluate(
({x, y}) => {
const grid = document
.querySelector("perspective-viewer")
.shadowRoot.querySelector("perspective-hypergrid")
.shadowRoot.querySelector("canvas");
const wheel_event = new WheelEvent("wheel", {
bubbles: true,
cancelable: true,
deltaX: x,
deltaY: y
});
grid.dispatchEvent(wheel_event);
},
{x, y}
);
};

exports.dblclick = async (page, x = 310, y = 300) => {
await page.evaluate(
({x, y}) => {
Expand Down
5 changes: 5 additions & 0 deletions packages/perspective-viewer-hypergrid/test/results/results.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
"superstore.html/resets viewable area when the logical size expands.": "1bc04ce4ebdbbb8c59d8a04cea43c901",
"superstore.html/resets viewable area when the physical size expands.": "13d3164f406bf6a7d053c21dd506a0d5",
"superstore.html/replaces all rows.": "9cd0751b14f8ba6c857bf9b92f1d366b",
"superstore.html/should not scroll vertically when collapsed smaller than viewport": "85561e31002028b42b342306a644d8ae",
"superstore.html/should not scroll horizontally when collapsed smaller than viewport": "6a78d9493d600f7fe902060b26b0d734",
"superstore.html/should scroll vertically when expanded from inside viewport to taller than viewport": "386fc92a9ef4001e516250c8ba20400e",
"superstore.html/should scroll horizontally when expanded from inside viewport to taller than viewport": "988784a8b71df95ec8e34b9a029a0090",
"superstore.html/should scroll horizontally and vertically when expanded from inside viewport to taller than viewport": "1b88cc0c670a8e1a54cba9245f90938c",
"hypergrid.html/perspective dispatches perspective-click event with correct properties.": "13d3164f406bf6a7d053c21dd506a0d5",
"hypergrid.html/perspective dispatches perspective-click event with one filter.": "b66684328af5084134b0d3ed8d095eaf",
"hypergrid.html/perspective dispatches perspective-click event with filters.": "44186397ec3d65a3390a0dbd80f08c76",
Expand Down