feat(SchemaViewer): calculate column width based on data

Author: Raubzeug

src/components/QueryResultTable/QueryResultTable.tsx

@@ -6,14 +6,14 @@ import type {Column, Settings} from '@gravity-ui/react-data-table';
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {getColumnWidth} from '../../utils/getColumnWidth';
 import {getColumnType, prepareQueryResponse} from '../../utils/query';
 import {isNumeric} from '../../utils/utils';
 import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable';
 import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable';
 
 import {Cell} from './Cell';
 import i18n from './i18n';
-import {getColumnWidth} from './utils/getColumnWidth';
 
 import './QueryResultTable.scss';
 

src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx

@@ -71,20 +71,20 @@ export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaV
 
     const columns = React.useMemo(() => {
         if (isViewType(type)) {
-            return getViewColumns();
+            return getViewColumns(tableData);
         }
         if (isExternalTableType(type)) {
-            return getExternalTableColumns();
+            return getExternalTableColumns(tableData);
         }
         if (isColumnEntityType(type)) {
-            return getColumnTableColumns();
+            return getColumnTableColumns(tableData);
         }
         if (isRowTableType(type)) {
-            return getRowTableColumns(extended, hasAutoIncrement, hasDefaultValue);
+            return getRowTableColumns(tableData, extended, hasAutoIncrement, hasDefaultValue);
         }
 
         return [];
-    }, [type, extended, hasAutoIncrement, hasDefaultValue]);
+    }, [type, extended, hasAutoIncrement, hasDefaultValue, tableData]);
 
     if (loading || isViewSchemaLoading) {
         return <TableSkeleton />;

src/containers/Tenant/Schema/SchemaViewer/columns.tsx

@@ -1,5 +1,7 @@
 import DataTable from '@gravity-ui/react-data-table';
 
+import {getColumnWidth} from '../../../../utils/getColumnWidth';
+
 import i18n from './i18n';
 import type {SchemaColumn, SchemaData} from './types';
 
@@ -108,16 +110,37 @@ const compressionColumn: SchemaColumn = {
     render: ({row}) => row.columnCodec,
 };
 
-export function getViewColumns(): SchemaColumn[] {
-    return [nameColumn, typeColumn];
+const WIDTH_PREDICTION_ROWS_COUNT = 100;
+
+function normalizeColumns(columns: SchemaColumn[], data?: SchemaData[]) {
+    if (!data) {
+        return columns;
+    }
+    const dataSlice = data.slice(0, WIDTH_PREDICTION_ROWS_COUNT);
+    return columns.map((column) => {
+        return {
+            ...column,
+            width: getColumnWidth({
+                data: dataSlice,
+                name: column.name,
+                header: typeof column.header === 'string' ? column.header : undefined,
+                sortable: column.sortable === undefined,
+            }),
+        };
+    });
+}
+
+export function getViewColumns(data?: SchemaData[]): SchemaColumn[] {
+    return normalizeColumns([nameColumn, typeColumn], data);
 }
-export function getExternalTableColumns(): SchemaColumn[] {
-    return [idColumn, nameColumn, typeColumn, notNullColumn];
+export function getExternalTableColumns(data?: SchemaData[]): SchemaColumn[] {
+    return normalizeColumns([idColumn, nameColumn, typeColumn, notNullColumn], data);
 }
-export function getColumnTableColumns(): SchemaColumn[] {
-    return [idColumn, nameColumn, typeColumn, notNullColumn];
+export function getColumnTableColumns(data?: SchemaData[]): SchemaColumn[] {
+    return normalizeColumns([idColumn, nameColumn, typeColumn, notNullColumn], data);
 }
 export function getRowTableColumns(
+    data: SchemaData[] | undefined,
     extended: boolean,
     hasAutoIncrement: boolean,
     hasDefaultValue: boolean,
@@ -136,5 +159,7 @@ export function getRowTableColumns(
         rowTableColumns.push(autoIncrementColumn);
     }
 
-    return rowTableColumns;
+    console.log(normalizeColumns(rowTableColumns, data));
+
+    return normalizeColumns(rowTableColumns, data);
 }

src/types/api/query.ts

@@ -190,7 +190,7 @@ export interface QueryPlan {
 
 // ==== Common types ====
 
-export type CellValue = string | number | null | undefined;
+export type CellValue = string | number | boolean | null | undefined;
 
 export type KeyValueRow<T = CellValue> = {
     [key: string]: T;

src/utils/__test__/getColumnWidth.test.ts

@@ -0,0 +1,37 @@
+import {HEADER_PADDING, MAX_COLUMN_WIDTH, getColumnWidth} from '../getColumnWidth';
+
+describe('getColumnWidth', () => {
+    it('returns minimum width for empty data', () => {
+        const result = getColumnWidth({data: [], name: 'test'});
+        expect(result).toBe(HEADER_PADDING + 'test'.length * 10);
+    });
+
+    it('calculates correct width for string columns', () => {
+        const data = [{test: 'short'}, {test: 'medium length'}, {test: 'this is a longer string'}];
+        const result = getColumnWidth({data, name: 'test'});
+        expect(result).toBe(HEADER_PADDING + 'this is a longer string'.length * 10);
+    });
+
+    it('returns MAX_COLUMN_WIDTH when calculated width exceeds it', () => {
+        const data = [{test: 'a'.repeat(100)}];
+        const result = getColumnWidth({data, name: 'test'});
+        expect(result).toBe(MAX_COLUMN_WIDTH);
+    });
+
+    it('handles undefined data correctly', () => {
+        const result = getColumnWidth({name: 'test'});
+        expect(result).toBe(HEADER_PADDING + 'test'.length * 10);
+    });
+
+    it('handles missing values in data correctly', () => {
+        const data = [{test: 'short'}, {}, {test: 'longer string'}];
+        const result = getColumnWidth({data, name: 'test'});
+        expect(result).toBe(HEADER_PADDING + 'longer string'.length * 10);
+    });
+
+    it('uses column name length when all values are shorter', () => {
+        const data = [{longColumnName: 'a'}, {longColumnName: 'bb'}];
+        const result = getColumnWidth({data, name: 'longColumnName'});
+        expect(result).toBe(HEADER_PADDING + 'longColumnName'.length * 10);
+    });
+});

src/utils/getColumnWidth.ts

@@ -0,0 +1,46 @@
+import type {SchemaData} from '../containers/Tenant/Schema/SchemaViewer/types';
+import type {KeyValueRow} from '../types/api/query';
+
+const MAX_COLUMN_WIDTH = 600;
+const HEADER_PADDING = 20;
+const SORT_ICON_PADDING = 18;
+const PIXELS_PER_CHARACTER = 10;
+
+export function getColumnWidth<T extends KeyValueRow | SchemaData>({
+    data,
+    name,
+    header,
+    sortable,
+}: {
+    data?: T[];
+    name: string;
+    header?: string;
+    sortable?: boolean;
+}) {
+    const sortPadding = sortable ? SORT_ICON_PADDING : 0;
+    let maxColumnContentLength = typeof header === 'string' ? header.length : name.length;
+
+    if (data) {
+        for (const row of data) {
+            let cellLength = 0;
+            if (hasProperty(row, name) && row[name]) {
+                cellLength = String(row[name]).length;
+            }
+
+            maxColumnContentLength = Math.max(maxColumnContentLength, cellLength);
+
+            if (
+                maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING >=
+                MAX_COLUMN_WIDTH
+            ) {
+                return MAX_COLUMN_WIDTH;
+            }
+        }
+    }
+
+    return maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING + sortPadding;
+}
+
+function hasProperty(obj: KeyValueRow | SchemaData, key: string): obj is KeyValueRow {
+    return key in obj;
+}