Skip to content

Commit

Permalink
Issue 40 large dataset (#1152)
Browse files Browse the repository at this point in the history 
* first cut keyboard nav large datasets

* simplify getFullRange and adjust tests accordingly

* page up down accuracy

* fix click scroll track to scroll

* fix issue in keyset

* fix issue with page down when running with vuu server data

* initial scrolling tests

* exclude cypress test helper from linting

* address review suggestions
  • Loading branch information
@heswell
heswell authored Jan 25, 2024
1 parent c408798 commit 3ddf8a8
Show file tree
Hide file tree
Showing 31 changed files with 1,012 additions and 431 deletions.
1 change: 1 addition & 0 deletions vuu-ui/cypress.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default defineConfig({
viewportHeight: 1024,
video: false,
component: {
scrollBehavior: false,
setupNodeEvents(on, config) {
// installCoverageTask(on, config);
//Setting up a log task to allow logging to the console during an axe test because console.log() does not work directly in a test
Expand Down
4 changes: 2 additions & 2 deletions vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,8 +504,8 @@ export class ArrayDataSource
private setRange(range: VuuRange, forceFullRefresh = false) {
if (range.from !== this.#range.from || range.to !== this.#range.to) {
this.#range = range;
this.keys.reset(range);
this.sendRowsToClient(forceFullRefresh);
const keysResequenced = this.keys.reset(range);
this.sendRowsToClient(forceFullRefresh || keysResequenced);
} else if (forceFullRefresh) {
this.sendRowsToClient(forceFullRefresh);
}
Expand Down
8 changes: 5 additions & 3 deletions vuu-ui/packages/vuu-data-remote/src/inlined-worker.js
View file

Large diffs are not rendered by default.

62 changes: 31 additions & 31 deletions vuu-ui/packages/vuu-data-remote/test/server-proxy.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -499,15 +499,15 @@ describe("ServerProxy", () => {
type: "viewport-update",
clientViewportId: "client-vp-1",
rows: [
[11,0,true,false,0,0,"key-11",0,"key-11","name 11",1011,true],
[12,1,true,false,0,0,"key-12",0,"key-12","name 12",1012,true],
[13,2,true,false,0,0,"key-13",0,"key-13","name 13",1013,true],
[14,3,true,false,0,0,"key-14",0,"key-14","name 14",1014,true],
[15,4,true,false,0,0,"key-15",0,"key-15","name 15",1015,true,],
[16,5,true,false,0,0,"key-16",0,"key-16","name 16",1016,true],
[17,6,true,false,0,0,"key-17",0,"key-17","name 17",1017,true],
[18,7,true,false,0,0,"key-18",0,"key-18","name 18",1018,true],
[19,8,true,false,0,0,"key-19",0,"key-19","name 19",1019,true],
[11,1,true,false,0,0,"key-11",0,"key-11","name 11",1011,true],
[12,2,true,false,0,0,"key-12",0,"key-12","name 12",1012,true],
[13,3,true,false,0,0,"key-13",0,"key-13","name 13",1013,true],
[14,4,true,false,0,0,"key-14",0,"key-14","name 14",1014,true],
[15,5,true,false,0,0,"key-15",0,"key-15","name 15",1015,true,],
[16,6,true,false,0,0,"key-16",0,"key-16","name 16",1016,true],
[17,7,true,false,0,0,"key-17",0,"key-17","name 17",1017,true],
[18,8,true,false,0,0,"key-18",0,"key-18","name 18",1018,true],
[19,9,true,false,0,0,"key-19",0,"key-19","name 19",1019,true],
],
});
});
Expand Down Expand Up @@ -829,8 +829,8 @@ describe("ServerProxy", () => {
body: {
viewPortId: "server-vp-1",
type: "CHANGE_VP_RANGE",
from: 3,
to: 23,
from: 0,
to: 28,
},
module: "CORE",
requestId: "1",
Expand Down Expand Up @@ -1172,8 +1172,8 @@ describe("ServerProxy", () => {
body: {
viewPortId: "server-vp-1",
type: "CHANGE_VP_RANGE",
from: 6,
to: 36,
from: 0,
to: 46,
},
module: "CORE",
requestId: "1",
Expand Down Expand Up @@ -1247,8 +1247,8 @@ describe("ServerProxy", () => {
body: {
viewPortId: "server-vp-1",
type: "CHANGE_VP_RANGE",
from: 6,
to: 36,
from: 0,
to: 46,
},
module: "CORE",
requestId: "1",
Expand All @@ -1263,8 +1263,8 @@ describe("ServerProxy", () => {
body: {
type: "CHANGE_VP_RANGE_SUCCESS",
viewPortId: "server-vp-1",
from: 6,
to: 36,
from: 0,
to: 46,
},
});

Expand Down Expand Up @@ -1295,22 +1295,22 @@ describe("ServerProxy", () => {
range: { from: 24, to: 34 },
});

expect(connection.send).toHaveBeenCalledTimes(1);
expect(connection.send).toHaveBeenCalledTimes(0);
expect(postMessageToClient).toHaveBeenCalledTimes(0);

expect(connection.send).toHaveBeenCalledWith({
user: "user",
body: {
viewPortId: "server-vp-1",
type: "CHANGE_VP_RANGE",
from: 14,
to: 44,
},
module: "CORE",
requestId: "1",
sessionId: "dsdsd",
token: "test",
});
// expect(connection.send).toHaveBeenCalledWith({
// user: "user",
// body: {
// viewPortId: "server-vp-1",
// type: "CHANGE_VP_RANGE",
// from: 14,
// to: 44,
// },
// module: "CORE",
// requestId: "1",
// sessionId: "dsdsd",
// token: "test",
// });
});
});

Expand Down
3 changes: 2 additions & 1 deletion vuu-ui/packages/vuu-data-remote/test/test-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
PostMessageToClientCallback,
ServerProxySubscribeMessage,
} from "../src";
import { TableSchema } from "@finos/vuu-data-types";

export const COMMON_ATTRS = {
module: "TEST",
Expand Down Expand Up @@ -161,7 +162,7 @@ export const updateTableRow = (
};
};

export const testSchema = {
export const testSchema: TableSchema = {
columns: [
{ name: "col-1", serverDataType: "string" },
{ name: "col-2", serverDataType: "string" },
Expand Down
24 changes: 12 additions & 12 deletions vuu-ui/packages/vuu-data-remote/test/viewport.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import "./global-mocks";
import { ServerProxySubscribeMessage } from "@finos/vuu-data-types";
import { ServerToClientCreateViewPortSuccess } from "@finos/vuu-protocol-types";
import { describe, expect, it } from "vitest";
import { ServerProxySubscribeMessage } from "../src";
import { Viewport } from "../src/server-proxy/viewport";
import "./global-mocks";
import {
createSubscription,
createTableRows,
Expand Down Expand Up @@ -61,7 +61,7 @@ describe("Viewport", () => {
type: "CREATE_VP",
...rest,
filterSpec: { filter },
range: { from: 0, to: 50 },
range: { from: 0, to: 0 },
});
});
it("sets status to subscribing", () => {
Expand Down Expand Up @@ -91,7 +91,7 @@ describe("Viewport", () => {
type: "CREATE_VP",
...rest,
filterSpec: { filter },
range: { from: 0, to: 100 },
range: { from: 0, to: 0 },
});
});
it("applies bufferSize to existing range", () => {
Expand Down Expand Up @@ -139,7 +139,7 @@ describe("Viewport", () => {
type: "CREATE_VP",
...rest,
filterSpec: { filter },
range: { from: 50, to: 250 },
range: { from: 0, to: 300 },
});
});
});
Expand All @@ -154,7 +154,7 @@ describe("Viewport", () => {
table: vuu_table.table,
viewPortId: "server-vp1",
};
vp.handleSubscribed(vuuMessageBody);
vp.handleSubscribed(vuuMessageBody, testSchema);
expect(vp.status).toEqual("subscribed");
});

Expand Down Expand Up @@ -191,7 +191,7 @@ describe("Viewport", () => {
);
const [, serverSubscription] = createSubscription();

vp.handleSubscribed(serverSubscription.body);
vp.handleSubscribed(serverSubscription.body, testSchema);

vp.updateRows([sizeRow(), ...createTableRows("server-vp-1", 0, 20)]);

Expand Down Expand Up @@ -222,7 +222,7 @@ describe("Viewport", () => {
noop
);
const [, serverSubscription] = createSubscription();
vp.handleSubscribed(serverSubscription.body);
vp.handleSubscribed(serverSubscription.body, testSchema);

vp.updateRows([sizeRow(), ...createTableRows("server-vp-1", 0, 20)]);
// bufferSize = 10, so range will be expanded +/-5 => [45-65]
Expand All @@ -243,7 +243,7 @@ describe("Viewport", () => {
);
// this one breaches the bufferSize 25% threshold
expect(vp["rangeRequestAlreadyPending"]({ from: 52, to: 63 })).toEqual(
false
true
);
expect(vp["rangeRequestAlreadyPending"]({ from: 60, to: 70 })).toEqual(
false
Expand All @@ -260,7 +260,7 @@ describe("Viewport", () => {
noop
);
const [, serverSubscription] = createSubscription();
vp.handleSubscribed(serverSubscription.body);
vp.handleSubscribed(serverSubscription.body, testSchema);

vp.updateRows([sizeRow(), ...createTableRows("server-vp-1", 0, 20)]);
// bufferSize = 10, so range will be expanded +/-5 => [45-65]
Expand All @@ -285,7 +285,7 @@ describe("Viewport", () => {
true
);
expect(vp["rangeRequestAlreadyPending"]({ from: 50, to: 73 })).toEqual(
false
true
);
expect(vp["rangeRequestAlreadyPending"]({ from: 70, to: 80 })).toEqual(
false
Expand All @@ -305,7 +305,7 @@ describe("Viewport", () => {
);
const [, serverSubscription] = createSubscription();

vp.handleSubscribed(serverSubscription.body);
vp.handleSubscribed(serverSubscription.body, testSchema);

vp.updateRows([sizeRow(), ...createTableRows("server-vp-1", 0, 20)]);

Expand Down
1 change: 0 additions & 1 deletion vuu-ui/packages/vuu-table/src/Row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export const Row = memo(
return (
<div
{...htmlAttributes}
key={`row-${row[0]}`}
role="row"
className={className}
onClick={handleRowClick}
Expand Down
3 changes: 2 additions & 1 deletion vuu-ui/packages/vuu-table/src/Table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,10 @@
position: absolute;
top: var(--total-header-height);
width: var(--table-width);
}


}

.vuuTable-scrollbarContainer::-webkit-scrollbar {
border: none;
width: 10px;
Expand Down
2 changes: 0 additions & 2 deletions vuu-ui/packages/vuu-table/src/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,9 +204,7 @@ const TableCore = ({
const contentContainerClassName = cx(`${classBase}-contentContainer`, {
[`${classBase}-colLines`]: tableAttributes.columnSeparators,
[`${classBase}-rowLines`]: tableAttributes.rowSeparators,
// [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
[`${classBase}-zebra`]: tableAttributes.zebraStripes,
// [`${classBase}-loading`]: isDataLoading(tableProps.columns),
});

const cssVariables = {
Expand Down
41 changes: 41 additions & 0 deletions vuu-ui/packages/vuu-table/src/__tests__/__component__/Table.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from "react";
// TODO try and get TS path alias working to avoid relative paths like this
import { SimulTable } from "../../../../../showcase/src/examples/Table/SIMUL.examples";
import { TestTable } from "../../../../../showcase/src/examples/Table/Table.examples";
import { assertRenderedRows } from "./table-test-utils";

const withAriaIndex = (index: number) => ({
name: (_: string, el: Element) => el.ariaRowIndex === `${index}`,
});

describe("WHEN it initially renders", () => {
const RENDER_BUFFER = 5;
const ROW_COUNT = 1000;
const tableConfig = {
renderBufferSize: RENDER_BUFFER,
headerHeight: 25,
height: 625,
rowCount: ROW_COUNT,
rowHeight: 20,
width: 1000,
};

it("THEN expected classname is present", () => {
cy.mount(
<SimulTable
data-testid="table"
renderBufferSize={5}
height={625}
tableName="instruments"
width={800}
/>
);
const container = cy.findByTestId("table");
container.should("have.class", "vuuTable");
});

it("THEN expected number of rows are present, with buffered rows, all with correct aria index", () => {
cy.mount(<TestTable {...tableConfig} />);
assertRenderedRows({ from: 0, to: 30 }, RENDER_BUFFER, ROW_COUNT);
});
});
Loading

0 comments on commit 3ddf8a8

Please sign in to comment.