datagrid

packages/web/public/dimensions.css

@@ -1,5 +1,5 @@
 :root {
-  --dim-widget-icon-size: 50px;
+  --dim-widget-icon-size: 60px;
   --dim-statusbar-height: 20px;
   --dim-left-panel-width: 300px;
   --dim-tabs-panel-height: 53px;

packages/web/src/datagrid/DataGridCore.svelte

@@ -11,6 +11,30 @@
     enabledStore: derived([currentDataGrid], ([grid]) => grid != null),
     onClick: () => get(currentDataGrid).refresh(),
   });
+
+  function getRowCountInfo(selectedCells, grider, realColumnUniqueNames, selectedRowData, allRowCount) {
+    if (selectedCells.length > 1 && selectedCells.every(x => _.isNumber(x[0]) && _.isNumber(x[1]))) {
+      let sum = _.sumBy(selectedCells, cell => {
+        const row = grider.getRowData(cell[0]);
+        if (row) {
+          const colName = realColumnUniqueNames[cell[1]];
+          if (colName) {
+            const data = row[colName];
+            if (!data) return 0;
+            let num = +data;
+            if (_.isNaN(num)) return 0;
+            return num;
+          }
+        }
+        return 0;
+      });
+      let count = selectedCells.length;
+      let rowCount = selectedRowData.length;
+      return `Rows: ${rowCount.toLocaleString()}, Count: ${count.toLocaleString()}, Sum:${sum.toLocaleString()}`;
+    }
+    if (allRowCount == null) return 'Loading row count...';
+    return `Rows: ${allRowCount.toLocaleString()}`;
+  }
 </script>
 
 <script lang="ts">
@@ -31,6 +55,7 @@
   import HorizontalScrollBar from './HorizontalScrollBar.svelte';
   import { cellFromEvent, emptyCellArray, getCellRange, isRegularCell, nullCell, topLeftCell } from './selection';
   import VerticalScrollBar from './VerticalScrollBar.svelte';
+  import LoadingInfo from '../widgets/LoadingInfo.svelte';
 
   export let loadNextData = undefined;
   export let grider = undefined;
@@ -38,6 +63,8 @@
   export let conid = undefined;
   export let database = undefined;
   export let frameSelection = undefined;
+  export let isLoading = false;
+  export let allRowCount = undefined;
 
   const wheelRowCount = 5;
   const instance = get_current_component();
@@ -209,6 +236,28 @@
   export function refresh() {
     display.reload();
   }
+
+  function getSelectedRowIndexes() {
+    if (selectedCells.find(x => x[0] == 'header')) return _.range(0, grider.rowCount);
+    return _.uniq((selectedCells || []).map(x => x[0])).filter(x => _.isNumber(x));
+  }
+
+  function getSelectedColumnIndexes() {
+    if (selectedCells.find(x => x[1] == 'header')) return _.range(0, realColumnUniqueNames.length);
+    return _.uniq((selectedCells || []).map(x => x[1])).filter(x => _.isNumber(x));
+  }
+
+  function getSelectedRowData() {
+    return _.compact(getSelectedRowIndexes().map(index => grider.getRowData(index)));
+  }
+
+  function getSelectedColumns() {
+    return _.compact(
+      getSelectedColumnIndexes().map(index => ({
+        columnName: realColumnUniqueNames[index],
+      }))
+    );
+  }
 </script>
 
 <div class="container" bind:clientWidth={containerWidth} bind:clientHeight={containerHeight}>
@@ -250,16 +299,18 @@
     </thead>
     <tbody>
       {#each _.range(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound) as rowIndex (rowIndex)}
-        <DataGridRow
+        {#if rowIndex < grider.rowCount}
-          {rowIndex}
+          <DataGridRow
-          {grider}
+            {rowIndex}
-          {visibleRealColumns}
+            {grider}
-          {rowHeight}
+            {visibleRealColumns}
-          {autofillSelectedCells}
+            {rowHeight}
-          selectedCells={filterCellsForRow(selectedCells, rowIndex)}
+            {autofillSelectedCells}
-          autofillMarkerCell={filterCellForRow(autofillMarkerCell, rowIndex)}
+            selectedCells={filterCellsForRow(selectedCells, rowIndex)}
-          {frameSelection}
+            autofillMarkerCell={filterCellForRow(autofillMarkerCell, rowIndex)}
-        />
+            {frameSelection}
+          />
+        {/if}
       {/each}
     </tbody>
   </table>
@@ -277,6 +328,15 @@
     on:scroll={e => (firstVisibleRowScrollIndex = e.detail)}
     bind:this={domVerticalScroll}
   />
+  {#if allRowCount}
+    <div class="row-count-label">
+      {getRowCountInfo(selectedCells, grider, realColumnUniqueNames, getSelectedRowData(), allRowCount)}
+    </div>
+  {/if}
+
+  {#if isLoading}
+    <LoadingInfo wrapper message="Loading data" />
+  {/if}
 </div>
 
 <style>

packages/web/src/datagrid/LoadingDataGridCore.svelte

@@ -15,28 +15,35 @@
   let allRowCount = null;
   let errorMessage = null;
   let loadNextDataToken = 0;
+  const loadedTimeRef = { current: null };
+
+  const handleLoadRowCount = async () => {
+    const rowCount = await loadRowCount($$props);
+    allRowCount = rowCount;
+  };
 
   async function loadNextData() {
     if (isLoading) return;
     isLoading = true;
 
     const loadStart = new Date().getTime();
+    // await new Promise(resolve => setTimeout(resolve, 5000));
 
-    // loadedTimeRef.current = loadStart;
+    loadedTimeRef.current = loadStart;
     // console.log('LOAD NEXT ROWS', loadedRows);
 
     const nextRows = await loadDataPage($$props, loadedRows.length, 100);
-    // if (loadedTimeRef.current !== loadStart) {
+    if (loadedTimeRef.current !== loadStart) {
-    //   // new load was dispatched
+      // new load was dispatched
-    //   return;
+      return;
-    // }
+    }
 
     isLoading = false;
 
     if (nextRows.errorMessage) {
       errorMessage = nextRows.errorMessage;
     } else {
-      // if (allRowCount == null) handleLoadRowCount();
+      if (allRowCount == null) handleLoadRowCount();
       loadedRows = [...loadedRows, ...nextRows];
       isLoadedAll = nextRows.length === 0;
       //   const loadedInfo = {
@@ -82,8 +89,4 @@
   }
 </script>
 
-<DataGridCore
+<DataGridCore {...$$props} loadNextData={handleLoadNextData} {grider} {isLoading} {allRowCount} />
-  {...$$props}
-  loadNextData={handleLoadNextData}
-  {grider}
-/>

packages/web/src/widgets/LoadingInfo.svelte

@@ -47,8 +47,8 @@
     justify-content: space-around;
   }
   .box {
-    background-color: var(--thme-bg-2);
+    background-color: var(--theme-bg-2);
     padding: 10px;
-    border: 1px solid gray;
+    border: 1px solid var(--theme-border);
   }
 </style>