add simple data page selector (#60)

and comment out data load debug logging for now

Author: RandomFractals

src/views/tableView.ts

@@ -330,7 +330,7 @@ export class TableView {
   public async addData(dataPage: number): Promise<void> {
     let nextRows: number = dataPage * this._pageDataSize;
     if (this._loadedDataPage <= dataPage && nextRows < this._totalRows) {
-      console.log(`tabular.data.view:addData(): loading rows ${nextRows.toLocaleString()}+ ...`);
+      // console.log(`tabular.data.view:addData(): loading rows ${nextRows.toLocaleString()}+ ...`);
       if (this.visible) {
         statusBar.showMessage(`Loading rows ${nextRows.toLocaleString()}+`);
       }
@@ -544,6 +544,10 @@ export class TableView {
                 appearance="icon" aria-label="Scroll to First Row">
 	              <span class="codicon codicon-arrow-up">⤒</span>
               </vscode-button>
+              <select id="table-page-selector" title="View Data Page">
+                <option value="">Page</option>
+                <option value="1">1</option>
+              </select>
               <select id="save-file-type-selector" title="Save Data">
                 <option value="">📥&nbsp;Save</option>
                 <option value="csv">,,, csv</option>

web/scripts/tableView.js

@@ -9,7 +9,7 @@ let fileName = '';
 let saveDataFileName = '';
 
 // table view elements
-let tableContainer, table, progressRing, saveFileTypeSelector;
+let tableContainer, table, progressRing, saveFileTypeSelector, tablePageSelector;
 
 // table view vars
 let tableSchema;
@@ -29,7 +29,7 @@ const movableColumns = true;
 const movableRows = true;
 const selectableRows =  true;
 
-const pagination = true;
+const pagination = false;
 const paginationSize = 1000;
 const pageDataSize = 100000;
 const pageSizes = [100, 1000, 10000, 100000];
@@ -123,10 +123,6 @@ function initializeView() {
   // data progress loading indicator
   progressRing = document.getElementById('progress-ring');
 
-  // save file selector
-  saveFileTypeSelector = document.getElementById('save-file-type-selector');
-  saveFileTypeSelector.onchange = saveData;
-
   // reload data UI
   const reloadButton = document.getElementById('reload-button');
   reloadButton.addEventListener('click', reloadData);
@@ -138,6 +134,14 @@ function initializeView() {
   const scrollToLastRowButton = document.getElementById('scroll-to-last-row-button');
   scrollToLastRowButton.addEventListener('click', scrollToLastRow);
 
+  // table page selector
+  tablePageSelector = document.getElementById('table-page-selector');
+  tablePageSelector.onchange = showDataPage;
+
+  // save file selector
+  saveFileTypeSelector = document.getElementById('save-file-type-selector');
+  saveFileTypeSelector.onchange = saveData;
+
   // request initial rows data load
   vscode.postMessage({ command: 'refresh' });
 }
@@ -297,22 +301,36 @@ function addData(table, dataRows, dataPageIndex) {
     // increment last loaded data page index
     loadedDataPage++;
 
+    // update data page selector
+    tablePageSelector.innerHTML += `<option value="${loadedDataPage}">${loadedDataPage + 1}</option>`;
+
     // add new rows to table data
-    console.log('tableView.addData(): loading data page:', loadedDataPage);
     tableData.push(...dataRows);
-    loadedRows += dataRows.length;
-    console.log('tableView.loadedRows:', loadedRows.toLocaleString(), 'totalRows:', totalRows.toLocaleString());
-
-    if (table.getDataCount() <= 0) {
-      // display the first data page on reload
-      table.setData(tableData);
+    if (loadedRows <= 0) {
+      // reset table data on on reload
+      table.setData(dataRows);
     }
+    loadedRows += dataRows.length;
+    // console.log('tableView.addData(): loading data page:', loadedDataPage);
+    // console.log('tableView.loadedRows:', loadedRows.toLocaleString(), 'totalRows:', totalRows.toLocaleString());
   }
 
   // request more data rows to load and display
   getNextDataPage();
 }
 
+/**
+ * Loads requested data page in table view.
+ */
+function showDataPage() {
+  let dataPageIndex = Number(tablePageSelector.value);
+  // console.log('tableView.showDataPage(): loading data page:', dataPageIndex);
+  const pageStart = (dataPageIndex * pageDataSize);
+  const pageData = tableData.slice(pageStart, Math.min(pageStart + pageDataSize, totalRows));
+  table.clearData();
+  table.setData(pageData);
+}
+
 /**
  * Clears displayed table data.
  */
@@ -325,7 +343,10 @@ function clearTable(table) {
     loadedRows = 0;
     totalRows = 0;
     loadedDataPage = 0;
-    tableData.length = 0;
+    tableData = [];
+
+    // clear UI controls
+    tablePageSelector.innerHTML = '<option value="">Page</option><option value="1">1</option>';
   }
 }
 

web/styles/table-view.css

@@ -31,7 +31,7 @@ body {
   position: absolute;
   top: 5px;
   right: 0px;
-  width: 180px;
+  width: 240px;
   height: 32px;
   padding-left: 5px;
   background-color: var(--vscode-editor-background);