[Feat] [column stats] Add hasStats prop to data table adjust first ce…

…ll size (UN-2712) (#401)

- Hide stats control if hasStats is falsy
- Data table adjust first cell size

Signed-off-by: Shan He <heshan0131@gmail.com>

src/components/src/common/data-table/cell-size.ts

@@ -23,6 +23,8 @@ import {DataContainerInterface, parseFieldValue} from '@kepler.gl/utils';
 
 const MIN_GHOST_CELL_SIZE: number = 200;
 const MIN_CELL_SIZE = 45;
+// first column have padding on the left
+const EDGE_COLUMN_PADDING = 10;
 
 type RenderSizeParam = {
   text: {dataContainer: DataContainerInterface; column: string};
@@ -185,6 +187,21 @@ function expandCellSize(
   };
 }
 
+function addPaddingToFirstColumn(cellSizeCache: CellSizeCache, columnOrder: string[] = []): CellSizeCache {
+  const firstCol = columnOrder[0];
+
+  if (firstCol && cellSizeCache[firstCol]) {
+    return {
+      ...cellSizeCache,
+      [firstCol]: {
+        header: cellSizeCache[firstCol].header + EDGE_COLUMN_PADDING,
+        row: cellSizeCache[firstCol].row + EDGE_COLUMN_PADDING
+      }
+    };
+  }
+  return cellSizeCache;
+}
+
 /**
  * Adjust cell size based on container width
  * @param {number} containerWidth
@@ -201,13 +218,14 @@ export function adjustCellsToContainer(
   cellSizeCache: CellSizeCache;
   ghost?: number | null;
 } {
-  const minRowSum = getSizeSum(cellSizeCache, 'row');
+  const columnOrder = getColumnOrder(pinnedColumns, unpinnedColumns);
+  const paddedCellSize = addPaddingToFirstColumn(cellSizeCache, columnOrder);
+  const minRowSum = getSizeSum(paddedCellSize, 'row');
+
   if (minRowSum >= containerWidth) {
     // we apply the min Width to all cells
-    return {cellSizeCache: getMinCellSize(cellSizeCache)};
+    return {cellSizeCache: getMinCellSize(paddedCellSize)};
   }
-
   // if we have some room to expand
-  const columnOrder = getColumnOrder(pinnedColumns, unpinnedColumns);
-  return expandCellSize(cellSizeCache, columnOrder, containerWidth, containerWidth - minRowSum);
+  return expandCellSize(paddedCellSize, columnOrder, containerWidth, containerWidth - minRowSum);
 }

src/components/src/common/data-table/index.tsx

@@ -373,7 +373,8 @@ function DataTableFactory(HeaderCell: ReturnType<typeof HeaderCellFactory>) {
       sortColumn: {},
       fixedWidth: null,
       fixedHeight: null,
-      theme: {}
+      theme: {},
+      hasStats: false
     };
 
     pinnedGrid = false;
@@ -507,7 +508,8 @@ function DataTableFactory(HeaderCell: ReturnType<typeof HeaderCellFactory>) {
         pinnedColumns = [],
         theme = {},
         fixedWidth,
-        fixedHeight = 0
+        fixedHeight = 0,
+        hasStats
       } = this.props;
       const unpinnedColumns = this.unpinnedColumns(this.props);
 
@@ -531,9 +533,17 @@ function DataTableFactory(HeaderCell: ReturnType<typeof HeaderCellFactory>) {
       const headerGridProps = {
         cellSizeCache,
         className: 'header-grid',
-        height: showStats ? headerRowWStatsHeight : headerRowHeight + headerStatsControlHeight,
+        height: !hasStats
+          ? headerRowHeight
+          : showStats
+          ? headerRowWStatsHeight
+          : headerRowHeight + headerStatsControlHeight,
         rowCount: 1,
-        rowHeight: showStats ? headerRowWStatsHeight : headerRowHeight + headerStatsControlHeight
+        rowHeight: !hasStats
+          ? headerRowHeight
+          : showStats
+          ? headerRowWStatsHeight
+          : headerRowHeight + headerStatsControlHeight
       };
 
       const dataGridProps = {
@@ -624,11 +634,13 @@ function DataTableFactory(HeaderCell: ReturnType<typeof HeaderCellFactory>) {
                   );
                 }}
               </ScrollSync>
-              <StatsControl
-                top={headerRowHeight}
-                showStats={showStats}
-                toggleShowStats={this.toggleShowStats}
-              />
+              {hasStats ? (
+                <StatsControl
+                  top={headerRowHeight}
+                  showStats={showStats}
+                  toggleShowStats={this.toggleShowStats}
+                />
+              ) : null}
             </>
           ) : null}
         </Container>

src/components/src/modals/data-table-modal.tsx

@@ -165,7 +165,7 @@ function DataTableModalFactory(
           [field.name]: renderedSize({
             text: {
               dataContainer,
-              column: field.name
+              column: field.displayName
             },
             colIdx,
             type: field.type,
@@ -235,7 +235,7 @@ function DataTableModalFactory(
                 copyTableColumn={this.copyTableColumn}
                 pinTableColumn={this.pinTableColumn}
                 sortTableColumn={this.sortTableColumn}
-                showStats
+                hasStats
               />
             ) : null}
           </TableContainer>

test/browser/components/modals/data-table-modal-test.js

@@ -65,7 +65,7 @@ const expectedCellSizeCache = {
 
 const expectedExpandedCellSize = {
   cellSizeCache: {
-    'gps_data.utc_timestamp': 145,
+    'gps_data.utc_timestamp': 155,
     'gps_data.lat': 96,
     'gps_data.lng': 96,
     'gps_data.types': 125,
@@ -527,7 +527,11 @@ test('Components -> cellSize -> renderedSize', t => {
         smoothie: {
           id: 'smoothie',
           dataContainer,
-          fields,
+          fields: [
+            {name: testColumns[0], type: 'geojson', displayName: testColumns[0]},
+            {name: testColumns[1], type: 'real', displayName: testColumns[1]},
+            {name: testColumns[2], type: 'string', displayName: testColumns[2]}
+          ],
           color: [113, 113, 113]
         }
       }}
@@ -595,14 +599,14 @@ test('Components -> DataTableModal.render: csv 2', t => {
 
   const expectedExpandedCellSizeGeo = {
     cellSizeCache: {
-      _geojson: 400,
+      _geojson: 410,
       fillColor: 90,
       lineColor: 94,
       lineWidth: 98,
       elevation: 94,
       radius: 90
     },
-    ghost: 334
+    ghost: 324
   };
   const wrapper2 = mountWithTheme(<DataTable {...enriched} />);
   const componentInstance = wrapper2.find('DataTable').instance();