Skip to content

Commit 6a907bb

Browse files
RandomFractalsRandomFractals
committed
refactor paged data loading and passing to table view (#60)
1 parent dd9549c commit 6a907bb

File tree

2 files changed

+74
-87
lines changed

2 files changed

+74
-87
lines changed

‎src/views/tableView.ts

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,10 @@ export class TableView {
4747
// tabular data vars
4848
private _tableSchema: any;
4949
private _tableData: Array<any> = [];
50-
private _currentDataPage: number = 0;
5150
private _totalRows: number = 0;
5251
private _loadTime: number = 0; // load time in milliseconds
52+
private _loadedDataPage: number = 0;
53+
5354

5455
// TODO: move the settings below to tabular data viewer config options later
5556
// default page data size for incremental data loading into table view
@@ -216,7 +217,7 @@ export class TableView {
216217
public async refresh(): Promise<void> {
217218
// clear loaded data info
218219
this._totalRows = 0;
219-
this._currentDataPage = 0;
220+
this._loadedDataPage = 0;
220221
this._tableData.length = 0;
221222
this._loadTime = 0;
222223

@@ -282,6 +283,8 @@ export class TableView {
282283
if (tableRows.length < this._pageDataSize) {
283284
// load first page of data
284285
this.loadData(tableRows);
286+
// clear data loading status bar message
287+
statusBar.showMessage('');
285288
}
286289
else if (tableRows.length > this._pageDataSize) {
287290
// load remaining table rows
@@ -302,8 +305,13 @@ export class TableView {
302305
this._totalRows = this._tableData.length;
303306
this.logTableData(tableRows);
304307

308+
if (this.visible) {
309+
statusBar.showMessage(`Loading data`);
310+
}
311+
305312
// send initial set of data rows to table view for display
306-
const initialDataRows: Array<any> = tableRows.slice(0, Math.min(this._pageDataSize, this._totalRows));
313+
const nextRows: number = Math.min(this._pageDataSize, this._totalRows);
314+
const initialDataRows: Array<any> = tableRows.slice(0, nextRows);
307315
this.webviewPanel.webview.postMessage({
308316
command: 'refresh',
309317
fileName: this._fileInfo.fileName,
@@ -321,7 +329,7 @@ export class TableView {
321329
*/
322330
public async addData(dataPage: number): Promise<void> {
323331
let nextRows: number = dataPage * this._pageDataSize;
324-
if (nextRows < this._totalRows) {
332+
if (this._loadedDataPage <= dataPage && nextRows < this._totalRows) {
325333
console.log(`tabular.data.view:addData(): loading rows ${nextRows.toLocaleString()}+ ...`);
326334
if (this.visible) {
327335
statusBar.showMessage(`Loading rows ${nextRows.toLocaleString()}+`);
@@ -331,16 +339,17 @@ export class TableView {
331339
const dataRows: Array<any> =
332340
this._tableData.slice(nextRows, Math.min(nextRows + this._pageDataSize, this._totalRows));
333341

342+
// increment next rows for data loading status update
343+
nextRows += dataRows.length;
344+
this._loadedDataPage++;
345+
334346
// send the next set of data rows to display
335347
this.webviewPanel.webview.postMessage({
336348
command: 'addData',
337349
dataRows: dataRows,
338-
dataPage: dataPage,
350+
dataPage: this._loadedDataPage,
339351
totalRows: this._totalRows
340352
});
341-
342-
// increment next rows for data loading status update
343-
nextRows += dataRows.length;
344353
}
345354

346355
if (nextRows >= this._totalRows) {
@@ -399,7 +408,7 @@ export class TableView {
399408
* @param tableData Parsed table data.
400409
*/
401410
private logTableData(tableData: any, columns?: []): void {
402-
console.log('tabular.data.view:rowCount:', tableData.length.toLocaleString());
411+
console.log('tabular.data.view:loadedRows:', tableData.length.toLocaleString());
403412
if (columns) {
404413
console.log('\tcolumns:', columns );
405414
}

‎web/scripts/tableView.js

Lines changed: 56 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ let documentUrl = '';
88
let fileName = '';
99
let saveDataFileName = '';
1010

11-
// table view vars
11+
// table view elements
1212
let tableContainer, table, progressRing, saveFileTypeSelector;
13+
14+
// table view vars
1315
let tableSchema;
1416
let tableColumns = [];
1517
let tableData = [];
1618
let loadedRows = 0;
1719
let totalRows = 0;
18-
let dataPage = 0;
20+
let loadedDataPage = 0;
1921

2022
// table view settings
2123
const toolbarHeight = 40; // table view toolbar height offset
@@ -29,7 +31,8 @@ const selectableRows = true;
2931

3032
const pagination = true;
3133
const paginationSize = 1000;
32-
const pageSizes = [100, 1000, 10000, 100000, 1000000, 10000000];
34+
const pageDataSize = 100000;
35+
const pageSizes = [100, 1000, 10000, 100000];
3336

3437
const reactiveData = false;
3538
const renderVerticalBuffer = 300; // virtual view buffer height in px for redraw on scroll
@@ -94,7 +97,6 @@ window.addEventListener('resize', function () {
9497
window.addEventListener('message', event => {
9598
switch (event.data.command) {
9699
case 'refresh':
97-
console.log('refreshing table view ...');
98100
documentUrl = event.data.documentUrl;
99101
fileName = event.data.fileName;
100102
vscode.setState({ documentUrl: documentUrl });
@@ -146,6 +148,7 @@ function initializeView() {
146148
* @see https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-an-extension-to-a-webview
147149
*/
148150
function reloadData() {
151+
console.log('tableView.reloadData(): reloading table data ...');
149152
clearTable(table);
150153
progressRing.style.visibility = 'visible';
151154
vscode.postMessage({
@@ -159,6 +162,7 @@ function reloadData() {
159162
* @param {*} tableData Data array to display in tabulator table.
160163
*/
161164
function loadData(tableData) {
165+
console.log('tableView.loadData(): loading table data ...');
162166
logTableData(tableData);
163167
if (table === undefined) {
164168
// create table and load initial set of data rows
@@ -221,6 +225,11 @@ function createTable(tableData) {
221225

222226
// update table settings after initial data rows load
223227
table.on('tableBuilt', onTableBuilt);
228+
229+
// log loaded table data counts for debug
230+
table.on('dataLoaded', data => {
231+
console.log('tableView.table.dataLoaded():loadedData:', data.length.toLocaleString());
232+
});
224233
}
225234
}
226235

@@ -254,81 +263,65 @@ function onTableBuilt () {
254263
// request more data for incremental data loading
255264
loadedRows = table.getRows().length;
256265
console.log('tableView.loadedRows:', loadedRows.toLocaleString());
257-
if (loadedRows < totalRows) {
258-
getNextDataPage();
266+
getNextDataPage();
267+
}
268+
269+
/**
270+
* Requests more data rows to load and display.
271+
*/
272+
function getNextDataPage() {
273+
const nextDataPage = loadedDataPage + 1;
274+
if (loadedRows < totalRows && (nextDataPage * pageDataSize) < totalRows) {
275+
progressRing.style.visibility = 'visible';
276+
vscode.postMessage({
277+
command: 'addData',
278+
dataPage: nextDataPage
279+
});
280+
}
281+
else {
282+
// hide data loading progress ring
283+
progressRing.style.visibility = 'hidden';
259284
}
260285
}
261286

262287

263288
/**
264-
* Adds data rows to the table.
289+
* Adds data rows to the table view and requests the next data page.
265290
*
266291
* @param {*} table Tabulator table instance.
267292
* @param {*} dataRows Data array for the table rows to add.
268293
* @param {*} dataPageIndex Data page index for the data rows to add.
269294
*/
270295
function addData(table, dataRows, dataPageIndex) {
271-
if (dataPageIndex === dataPage) {
272-
// get the next set of data rows
273-
getNextDataPage();
296+
if (dataPageIndex > loadedDataPage) {
297+
// increment last loaded data page index
298+
loadedDataPage++;
299+
300+
// add new rows to table data
301+
console.log('tableView.addData(): loading data page:', loadedDataPage);
302+
tableData.push(...dataRows);
303+
loadedRows += dataRows.length;
304+
console.log('tableView.loadedRows:', loadedRows.toLocaleString(), 'totalRows:', totalRows.toLocaleString());
274305
}
275306

276-
console.log('tableView:addData(): loading data page:', dataPage);
277-
278-
// add new rows to table data
279-
tableData.push.apply(tableData, dataRows);
280-
loadedRows += dataRows.length;
281-
// console.log('tableView:rowCount:', loadedRows.toLocaleString(), 'totalRows:', totalRows.toLocaleString());
282-
283-
if (loadedRows < totalRows) {
284-
// request more data rows to load and display
285-
getNextDataPage();
286-
}
287-
else {
288-
// hide data loading progress ring
289-
progressRing.style.visibility = 'hidden';
290-
console.log('tableView:rowCount:', loadedRows.toLocaleString(), 'totalRows:', totalRows.toLocaleString());
291-
}
292-
293-
/*
294-
if (table && dataRows) {
295-
table.addData(dataRows, true)
296-
.then(function (rows) { // rows - array of the row components for the rows updated or added
297-
// update loaded table data array and rows counter
298-
tableData.push.apply(tableData, dataRows);
299-
loadedRows += rows.length;
300-
if (loadedRows < totalRows) {
301-
// request more data rows to load and display
302-
dataPage++;
303-
progressRing.style.visibility = 'visible';
304-
vscode.postMessage({
305-
command: 'addData',
306-
dataPage: dataPage
307-
});
308-
}
309-
else {
310-
// hide data loading progress ring
311-
progressRing.style.visibility = 'hidden';
312-
console.log('tableView:rowCount:', loadedRows, 'totalRows:', totalRows);
313-
}
314-
})
315-
.catch(function (error) {
316-
// handle error updating data
317-
console.error(error);
318-
});
319-
}*/
307+
// request more data rows to load and display
308+
getNextDataPage();
320309
}
321310

322311
/**
323-
* Requests more data rows to load and display.
312+
* Clears displayed table data.
324313
*/
325-
function getNextDataPage() {
326-
dataPage++;
327-
progressRing.style.visibility = 'visible';
328-
vscode.postMessage({
329-
command: 'addData',
330-
dataPage: dataPage
331-
});
314+
function clearTable(table) {
315+
if (table) {
316+
// clear displayed table view
317+
table.clearData();
318+
319+
// reset loaded table data row/page counters
320+
loadedRows = 0;
321+
totalRows = 0;
322+
loadedDataPage = 0;
323+
tableData.length = 0;
324+
}
332325
}
333326

334327
/**
@@ -366,21 +359,6 @@ function restoreTableSetting(id, type) {
366359
return tableSetting ? JSON.parse(tableSetting) : false;
367360
}
368361

369-
/**
370-
* Clears displayed table data.
371-
*/
372-
function clearTable(table) {
373-
if (table) {
374-
// clear displayed table view
375-
table.clearData();
376-
377-
// reset loaded table data row/page counters
378-
loadedRows = 0;
379-
totalRows = 0;
380-
dataPage = 0;
381-
}
382-
}
383-
384362
/**
385363
* Scrolls table data display to the first table row.
386364
*/
@@ -466,6 +444,6 @@ function saveData() {
466444
* @param tableData Loaded able data.
467445
*/
468446
function logTableData(tableData) {
469-
console.log('tableView:rowCount:', tableData.length);
447+
console.log('tableView.loadedRows:', tableData.length.toLocaleString());
470448
console.log('1st 10 rows:', tableData.slice(0, 10));
471449
}

0 commit comments

Comments
 (0)