From 77b21c1e0081d48aef56d10d3e0235f9c653bc3b Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Tue, 1 Oct 2024 18:28:28 +0300 Subject: [PATCH 1/8] fix: fix columns width on long rowset --- .../QueryResultTable/QueryResultTable.tsx | 3 +- src/utils/query.ts | 50 ++++++++++++++++++- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx index e92acc98d4..ba44dc2557 100644 --- a/src/components/QueryResultTable/QueryResultTable.tsx +++ b/src/components/QueryResultTable/QueryResultTable.tsx @@ -6,7 +6,7 @@ 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 {getColumnType, prepareQueryResponse} from '../../utils/query'; +import {getColumnType, getColumnWidthByType, prepareQueryResponse} from '../../utils/query'; import {isNumeric} from '../../utils/utils'; import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable'; import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable'; @@ -35,6 +35,7 @@ const prepareTypedColumns = (columns: ColumnType[]) => { const column: Column = { name, + width: getColumnWidthByType(type, name), align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT, sortAccessor: (row) => { const value = row[name]; diff --git a/src/utils/query.ts b/src/utils/query.ts index 4da0f40441..15fb356821 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -97,9 +97,13 @@ export const QUERY_SYNTAX = { pg: 'pg', } as const; +export const getYQLColumnType = (type: string): YQLType => { + return type.replace(/\?$/, '') as YQLType; +}; + // eslint-disable-next-line complexity export const getColumnType = (type: string) => { - switch (type.replace(/\?$/, '')) { + switch (getYQLColumnType(type)) { case YQLType.Bool: return 'boolean'; case YQLType.Int8: @@ -134,6 +138,50 @@ export const getColumnType = (type: string) => { } }; +const columnTypeToDefaultWidth: Record = { + // Numeric + [YQLType.Bool]: 80, + [YQLType.Int8]: 80, + [YQLType.Int16]: 90, + [YQLType.Int32]: 140, + [YQLType.Int64]: 220, + [YQLType.Uint8]: 80, + [YQLType.Uint16]: 90, + [YQLType.Uint32]: 140, + [YQLType.Uint64]: 220, + [YQLType.Float]: 120, + [YQLType.Double]: 220, + [YQLType.Decimal]: 220, + + // String + [YQLType.String]: 240, + [YQLType.Utf8]: 240, + [YQLType.Json]: 340, + [YQLType.JsonDocument]: 340, + [YQLType.Yson]: 340, + [YQLType.Uuid]: 190, + + // Date and time + [YQLType.Date]: 300, + [YQLType.Datetime]: 300, + [YQLType.Timestamp]: 300, + [YQLType.Interval]: 300, + [YQLType.TzDate]: 300, + [YQLType.TzDateTime]: 300, + [YQLType.TzTimestamp]: 300, +}; + +const COLUMN_DEFAULT_WIDTH = 200; + +export const getColumnWidthByType = (type: string, columnName: string) => { + const yqlType = getYQLColumnType(type); + + return Math.max( + columnTypeToDefaultWidth[yqlType] || COLUMN_DEFAULT_WIDTH, + columnName.length * 15, + ); +}; + /** parse response result from ArrayRow to KeyValueRow */ const parseModernResult = (rows: ArrayRow[], columns: ColumnType[]) => { return rows.map((row) => { From 81874d6d76d5d11f2f5dae88f191e9b90032ef34 Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 2 Oct 2024 13:24:47 +0300 Subject: [PATCH 2/8] fix: dynamic column width --- .../QueryResultTable/QueryResultTable.tsx | 21 ++++++-- src/utils/query.ts | 50 +------------------ 2 files changed, 18 insertions(+), 53 deletions(-) diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx index ba44dc2557..f0762a9839 100644 --- a/src/components/QueryResultTable/QueryResultTable.tsx +++ b/src/components/QueryResultTable/QueryResultTable.tsx @@ -6,7 +6,7 @@ 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 {getColumnType, getColumnWidthByType, prepareQueryResponse} from '../../utils/query'; +import {getColumnType, prepareQueryResponse} from '../../utils/query'; import {isNumeric} from '../../utils/utils'; import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable'; import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable'; @@ -25,17 +25,30 @@ const TABLE_SETTINGS: Settings = { export const b = cn('ydb-query-result-table'); -const prepareTypedColumns = (columns: ColumnType[]) => { +const WIDTH_PREDICTION_ROWS_COUNT = 100; +const MAX_COLUMN_WIDTH = 600; + +const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => { if (!columns.length) { return []; } + const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT); + return columns.map(({name, type}) => { const columnType = getColumnType(type); + const maxColumnContentLength = + dataSlice?.reduce( + (max, row) => Math.max(max, row[name] ? String(row[name]).length : max), + name.length, + ) || name.length; + + const headerPadding = columnType === 'number' ? 40 : 20; + const column: Column = { name, - width: getColumnWidthByType(type, name), + width: Math.min(maxColumnContentLength * 10 + headerPadding, MAX_COLUMN_WIDTH), align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT, sortAccessor: (row) => { const value = row[name]; @@ -83,7 +96,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => { const data = React.useMemo(() => prepareQueryResponse(rawData), [rawData]); const columns = React.useMemo(() => { - return rawColumns ? prepareTypedColumns(rawColumns) : prepareGenericColumns(data); + return rawColumns ? prepareTypedColumns(rawColumns, data) : prepareGenericColumns(data); }, [data, rawColumns]); const settings = React.useMemo( () => ({ diff --git a/src/utils/query.ts b/src/utils/query.ts index 15fb356821..4da0f40441 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -97,13 +97,9 @@ export const QUERY_SYNTAX = { pg: 'pg', } as const; -export const getYQLColumnType = (type: string): YQLType => { - return type.replace(/\?$/, '') as YQLType; -}; - // eslint-disable-next-line complexity export const getColumnType = (type: string) => { - switch (getYQLColumnType(type)) { + switch (type.replace(/\?$/, '')) { case YQLType.Bool: return 'boolean'; case YQLType.Int8: @@ -138,50 +134,6 @@ export const getColumnType = (type: string) => { } }; -const columnTypeToDefaultWidth: Record = { - // Numeric - [YQLType.Bool]: 80, - [YQLType.Int8]: 80, - [YQLType.Int16]: 90, - [YQLType.Int32]: 140, - [YQLType.Int64]: 220, - [YQLType.Uint8]: 80, - [YQLType.Uint16]: 90, - [YQLType.Uint32]: 140, - [YQLType.Uint64]: 220, - [YQLType.Float]: 120, - [YQLType.Double]: 220, - [YQLType.Decimal]: 220, - - // String - [YQLType.String]: 240, - [YQLType.Utf8]: 240, - [YQLType.Json]: 340, - [YQLType.JsonDocument]: 340, - [YQLType.Yson]: 340, - [YQLType.Uuid]: 190, - - // Date and time - [YQLType.Date]: 300, - [YQLType.Datetime]: 300, - [YQLType.Timestamp]: 300, - [YQLType.Interval]: 300, - [YQLType.TzDate]: 300, - [YQLType.TzDateTime]: 300, - [YQLType.TzTimestamp]: 300, -}; - -const COLUMN_DEFAULT_WIDTH = 200; - -export const getColumnWidthByType = (type: string, columnName: string) => { - const yqlType = getYQLColumnType(type); - - return Math.max( - columnTypeToDefaultWidth[yqlType] || COLUMN_DEFAULT_WIDTH, - columnName.length * 15, - ); -}; - /** parse response result from ArrayRow to KeyValueRow */ const parseModernResult = (rows: ArrayRow[], columns: ColumnType[]) => { return rows.map((row) => { From 5add284647b8967b89dddbf401cbf1356ccc94ff Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 2 Oct 2024 14:06:01 +0300 Subject: [PATCH 3/8] fix: review fix --- .../QueryResultTable/QueryResultTable.tsx | 12 +----- .../utils/getColumnWidth.test.ts | 43 +++++++++++++++++++ .../QueryResultTable/utils/getColumnWidth.ts | 29 +++++++++++++ 3 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 src/components/QueryResultTable/utils/getColumnWidth.test.ts create mode 100644 src/components/QueryResultTable/utils/getColumnWidth.ts diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx index f0762a9839..382bad4ba7 100644 --- a/src/components/QueryResultTable/QueryResultTable.tsx +++ b/src/components/QueryResultTable/QueryResultTable.tsx @@ -13,6 +13,7 @@ import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable'; import {Cell} from './Cell'; import i18n from './i18n'; +import {getColumnWidth} from './utils/getColumnWidth'; import './QueryResultTable.scss'; @@ -26,7 +27,6 @@ const TABLE_SETTINGS: Settings = { export const b = cn('ydb-query-result-table'); const WIDTH_PREDICTION_ROWS_COUNT = 100; -const MAX_COLUMN_WIDTH = 600; const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => { if (!columns.length) { @@ -38,17 +38,9 @@ const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => { return columns.map(({name, type}) => { const columnType = getColumnType(type); - const maxColumnContentLength = - dataSlice?.reduce( - (max, row) => Math.max(max, row[name] ? String(row[name]).length : max), - name.length, - ) || name.length; - - const headerPadding = columnType === 'number' ? 40 : 20; - const column: Column = { name, - width: Math.min(maxColumnContentLength * 10 + headerPadding, MAX_COLUMN_WIDTH), + width: getColumnWidth({data: dataSlice, name, columnType}), align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT, sortAccessor: (row) => { const value = row[name]; diff --git a/src/components/QueryResultTable/utils/getColumnWidth.test.ts b/src/components/QueryResultTable/utils/getColumnWidth.test.ts new file mode 100644 index 0000000000..c2bfb57127 --- /dev/null +++ b/src/components/QueryResultTable/utils/getColumnWidth.test.ts @@ -0,0 +1,43 @@ +import {MAX_COLUMN_WIDTH, getColumnWidth} from './getColumnWidth'; + +describe('getColumnWidth', () => { + it('returns minimum width for empty data', () => { + const result = getColumnWidth({data: [], name: 'test', columnType: 'string'}); + expect(result).toBe(20 + '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', columnType: 'string'}); + expect(result).toBe(20 + 'this is a longer string'.length * 10); + }); + + it('calculates correct width for number columns', () => { + const data = [{test: 123}, {test: 456789}, {test: 0}]; + const result = getColumnWidth({data, name: 'test', columnType: 'number'}); + expect(result).toBe(40 + '456789'.length * 10); + }); + + it('returns MAX_COLUMN_WIDTH when calculated width exceeds it', () => { + const data = [{test: 'a'.repeat(100)}]; + const result = getColumnWidth({data, name: 'test', columnType: 'string'}); + expect(result).toBe(MAX_COLUMN_WIDTH); + }); + + it('handles undefined data correctly', () => { + const result = getColumnWidth({name: 'test', columnType: 'string'}); + expect(result).toBe(20 + 'test'.length * 10); + }); + + it('handles missing values in data correctly', () => { + const data = [{test: 'short'}, {}, {test: 'longer string'}]; + const result = getColumnWidth({data, name: 'test', columnType: 'string'}); + expect(result).toBe(20 + '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', columnType: 'string'}); + expect(result).toBe(20 + 'longColumnName'.length * 10); + }); +}); diff --git a/src/components/QueryResultTable/utils/getColumnWidth.ts b/src/components/QueryResultTable/utils/getColumnWidth.ts new file mode 100644 index 0000000000..f96f516bcb --- /dev/null +++ b/src/components/QueryResultTable/utils/getColumnWidth.ts @@ -0,0 +1,29 @@ +import type {KeyValueRow} from '../../../types/api/query'; + +export const MAX_COLUMN_WIDTH = 600; + +export const getColumnWidth = ({ + data, + name, + columnType, +}: { + data?: KeyValueRow[]; + name: string; + columnType?: string; +}) => { + let maxColumnContentLength = name.length; + const headerPadding = columnType === 'number' ? 40 : 20; + + if (data) { + for (const row of data) { + const cellLength = row[name] ? String(row[name]).length : 0; + maxColumnContentLength = Math.max(maxColumnContentLength, cellLength); + + if (maxColumnContentLength * 10 + headerPadding >= MAX_COLUMN_WIDTH) { + return MAX_COLUMN_WIDTH; + } + } + } + + return Math.min(maxColumnContentLength * 10 + headerPadding, MAX_COLUMN_WIDTH); +}; From d4dfddb7663b77204cc5b58c228dbd821a0dce8e Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 2 Oct 2024 14:17:13 +0300 Subject: [PATCH 4/8] fix: better paddings --- .../utils/getColumnWidth.test.ts | 19 ++++++++++++------- .../QueryResultTable/utils/getColumnWidth.ts | 4 +++- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/QueryResultTable/utils/getColumnWidth.test.ts b/src/components/QueryResultTable/utils/getColumnWidth.test.ts index c2bfb57127..030378bf3b 100644 --- a/src/components/QueryResultTable/utils/getColumnWidth.test.ts +++ b/src/components/QueryResultTable/utils/getColumnWidth.test.ts @@ -1,21 +1,26 @@ -import {MAX_COLUMN_WIDTH, getColumnWidth} from './getColumnWidth'; +import { + MAX_COLUMN_WIDTH, + PADDING_NO_SORT_ICON, + PADDING_WITH_SORT_ICON, + getColumnWidth, +} from './getColumnWidth'; describe('getColumnWidth', () => { it('returns minimum width for empty data', () => { const result = getColumnWidth({data: [], name: 'test', columnType: 'string'}); - expect(result).toBe(20 + 'test'.length * 10); + expect(result).toBe(PADDING_NO_SORT_ICON + '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', columnType: 'string'}); - expect(result).toBe(20 + 'this is a longer string'.length * 10); + expect(result).toBe(PADDING_NO_SORT_ICON + 'this is a longer string'.length * 10); }); it('calculates correct width for number columns', () => { const data = [{test: 123}, {test: 456789}, {test: 0}]; const result = getColumnWidth({data, name: 'test', columnType: 'number'}); - expect(result).toBe(40 + '456789'.length * 10); + expect(result).toBe(PADDING_WITH_SORT_ICON + '456789'.length * 10); }); it('returns MAX_COLUMN_WIDTH when calculated width exceeds it', () => { @@ -26,18 +31,18 @@ describe('getColumnWidth', () => { it('handles undefined data correctly', () => { const result = getColumnWidth({name: 'test', columnType: 'string'}); - expect(result).toBe(20 + 'test'.length * 10); + expect(result).toBe(PADDING_NO_SORT_ICON + 'test'.length * 10); }); it('handles missing values in data correctly', () => { const data = [{test: 'short'}, {}, {test: 'longer string'}]; const result = getColumnWidth({data, name: 'test', columnType: 'string'}); - expect(result).toBe(20 + 'longer string'.length * 10); + expect(result).toBe(PADDING_NO_SORT_ICON + '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', columnType: 'string'}); - expect(result).toBe(20 + 'longColumnName'.length * 10); + expect(result).toBe(PADDING_NO_SORT_ICON + 'longColumnName'.length * 10); }); }); diff --git a/src/components/QueryResultTable/utils/getColumnWidth.ts b/src/components/QueryResultTable/utils/getColumnWidth.ts index f96f516bcb..9d9b8c89a4 100644 --- a/src/components/QueryResultTable/utils/getColumnWidth.ts +++ b/src/components/QueryResultTable/utils/getColumnWidth.ts @@ -1,6 +1,8 @@ import type {KeyValueRow} from '../../../types/api/query'; export const MAX_COLUMN_WIDTH = 600; +export const PADDING_WITH_SORT_ICON = 55; +export const PADDING_NO_SORT_ICON = 35; export const getColumnWidth = ({ data, @@ -12,7 +14,7 @@ export const getColumnWidth = ({ columnType?: string; }) => { let maxColumnContentLength = name.length; - const headerPadding = columnType === 'number' ? 40 : 20; + const headerPadding = columnType === 'number' ? PADDING_WITH_SORT_ICON : PADDING_NO_SORT_ICON; if (data) { for (const row of data) { From 65e23b211fafd6d6a7bd80667c3b72ffeaef1379 Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 2 Oct 2024 14:43:18 +0300 Subject: [PATCH 5/8] fix: remove sorting --- .../QueryResultTable/QueryResultTable.tsx | 16 +++------ .../utils/getColumnWidth.test.ts | 35 +++++++------------ .../QueryResultTable/utils/getColumnWidth.ts | 17 +++------ .../Query/ExecuteResult/ExecuteResult.tsx | 1 - 4 files changed, 21 insertions(+), 48 deletions(-) diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx index 382bad4ba7..12399e183d 100644 --- a/src/components/QueryResultTable/QueryResultTable.tsx +++ b/src/components/QueryResultTable/QueryResultTable.tsx @@ -40,17 +40,8 @@ const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => { const column: Column = { name, - width: getColumnWidth({data: dataSlice, name, columnType}), + width: getColumnWidth({data: dataSlice, name}), align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT, - sortAccessor: (row) => { - const value = row[name]; - - if (value === undefined || value === null) { - return null; - } - - return columnType === 'number' ? BigInt(value) : value; - }, render: ({row}) => , }; @@ -63,11 +54,13 @@ const prepareGenericColumns = (data: KeyValueRow[]) => { return []; } + const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT); + return Object.keys(data[0]).map((name) => { const column: Column = { name, + width: getColumnWidth({data: dataSlice, name}), align: isNumeric(data[0][name]) ? DataTable.RIGHT : DataTable.LEFT, - sortAccessor: (row) => (isNumeric(row[name]) ? Number(row[name]) : row[name]), render: ({row}) => , }; @@ -94,6 +87,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => { () => ({ ...TABLE_SETTINGS, ...settingsMix, + sortable: false, }), [settingsMix], ); diff --git a/src/components/QueryResultTable/utils/getColumnWidth.test.ts b/src/components/QueryResultTable/utils/getColumnWidth.test.ts index 030378bf3b..71cc1e6b41 100644 --- a/src/components/QueryResultTable/utils/getColumnWidth.test.ts +++ b/src/components/QueryResultTable/utils/getColumnWidth.test.ts @@ -1,48 +1,37 @@ -import { - MAX_COLUMN_WIDTH, - PADDING_NO_SORT_ICON, - PADDING_WITH_SORT_ICON, - getColumnWidth, -} from './getColumnWidth'; +import {HEADER_PADDING, MAX_COLUMN_WIDTH, getColumnWidth} from './getColumnWidth'; describe('getColumnWidth', () => { it('returns minimum width for empty data', () => { - const result = getColumnWidth({data: [], name: 'test', columnType: 'string'}); - expect(result).toBe(PADDING_NO_SORT_ICON + 'test'.length * 10); + 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', columnType: 'string'}); - expect(result).toBe(PADDING_NO_SORT_ICON + 'this is a longer string'.length * 10); - }); - - it('calculates correct width for number columns', () => { - const data = [{test: 123}, {test: 456789}, {test: 0}]; - const result = getColumnWidth({data, name: 'test', columnType: 'number'}); - expect(result).toBe(PADDING_WITH_SORT_ICON + '456789'.length * 10); + 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', columnType: 'string'}); + const result = getColumnWidth({data, name: 'test'}); expect(result).toBe(MAX_COLUMN_WIDTH); }); it('handles undefined data correctly', () => { - const result = getColumnWidth({name: 'test', columnType: 'string'}); - expect(result).toBe(PADDING_NO_SORT_ICON + 'test'.length * 10); + 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', columnType: 'string'}); - expect(result).toBe(PADDING_NO_SORT_ICON + 'longer string'.length * 10); + 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', columnType: 'string'}); - expect(result).toBe(PADDING_NO_SORT_ICON + 'longColumnName'.length * 10); + const result = getColumnWidth({data, name: 'longColumnName'}); + expect(result).toBe(HEADER_PADDING + 'longColumnName'.length * 10); }); }); diff --git a/src/components/QueryResultTable/utils/getColumnWidth.ts b/src/components/QueryResultTable/utils/getColumnWidth.ts index 9d9b8c89a4..4e787329e6 100644 --- a/src/components/QueryResultTable/utils/getColumnWidth.ts +++ b/src/components/QueryResultTable/utils/getColumnWidth.ts @@ -2,30 +2,21 @@ import type {KeyValueRow} from '../../../types/api/query'; export const MAX_COLUMN_WIDTH = 600; export const PADDING_WITH_SORT_ICON = 55; -export const PADDING_NO_SORT_ICON = 35; +export const HEADER_PADDING = 20; -export const getColumnWidth = ({ - data, - name, - columnType, -}: { - data?: KeyValueRow[]; - name: string; - columnType?: string; -}) => { +export const getColumnWidth = ({data, name}: {data?: KeyValueRow[]; name: string}) => { let maxColumnContentLength = name.length; - const headerPadding = columnType === 'number' ? PADDING_WITH_SORT_ICON : PADDING_NO_SORT_ICON; if (data) { for (const row of data) { const cellLength = row[name] ? String(row[name]).length : 0; maxColumnContentLength = Math.max(maxColumnContentLength, cellLength); - if (maxColumnContentLength * 10 + headerPadding >= MAX_COLUMN_WIDTH) { + if (maxColumnContentLength * 10 + HEADER_PADDING >= MAX_COLUMN_WIDTH) { return MAX_COLUMN_WIDTH; } } } - return Math.min(maxColumnContentLength * 10 + headerPadding, MAX_COLUMN_WIDTH); + return Math.min(maxColumnContentLength * 10 + HEADER_PADDING, MAX_COLUMN_WIDTH); }; diff --git a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx index bc54e08350..7601490788 100644 --- a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx +++ b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx @@ -136,7 +136,6 @@ export function ExecuteResult({ From 6fcb98204bb9f75d4dc880f3b08d0fbbd9e0842a Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 2 Oct 2024 14:45:05 +0300 Subject: [PATCH 6/8] fix: remove settings mix --- .../QueryResultTable/QueryResultTable.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx index 12399e183d..155b0e1415 100644 --- a/src/components/QueryResultTable/QueryResultTable.tsx +++ b/src/components/QueryResultTable/QueryResultTable.tsx @@ -22,6 +22,7 @@ const TABLE_SETTINGS: Settings = { stripedRows: true, dynamicRenderType: 'variable', dynamicItemSizeGetter: () => 40, + sortable: false, }; export const b = cn('ydb-query-result-table'); @@ -77,20 +78,12 @@ interface QueryResultTableProps } export const QueryResultTable = (props: QueryResultTableProps) => { - const {columns: rawColumns, data: rawData, settings: settingsMix, ...restProps} = props; + const {columns: rawColumns, data: rawData, ...restProps} = props; const data = React.useMemo(() => prepareQueryResponse(rawData), [rawData]); const columns = React.useMemo(() => { return rawColumns ? prepareTypedColumns(rawColumns, data) : prepareGenericColumns(data); }, [data, rawColumns]); - const settings = React.useMemo( - () => ({ - ...TABLE_SETTINGS, - ...settingsMix, - sortable: false, - }), - [settingsMix], - ); // empty data is expected to be be an empty array // undefined data is not rendered at all @@ -106,7 +99,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => { Date: Wed, 2 Oct 2024 14:54:41 +0300 Subject: [PATCH 7/8] fix: rm unused --- src/components/QueryResultTable/utils/getColumnWidth.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/QueryResultTable/utils/getColumnWidth.ts b/src/components/QueryResultTable/utils/getColumnWidth.ts index 4e787329e6..d7eda0ab2e 100644 --- a/src/components/QueryResultTable/utils/getColumnWidth.ts +++ b/src/components/QueryResultTable/utils/getColumnWidth.ts @@ -1,7 +1,6 @@ import type {KeyValueRow} from '../../../types/api/query'; export const MAX_COLUMN_WIDTH = 600; -export const PADDING_WITH_SORT_ICON = 55; export const HEADER_PADDING = 20; export const getColumnWidth = ({data, name}: {data?: KeyValueRow[]; name: string}) => { From 55498afd3e47905437aa24d277efcf982314b39a Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 2 Oct 2024 15:12:39 +0300 Subject: [PATCH 8/8] fix: review fixes --- src/components/QueryResultTable/utils/getColumnWidth.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/QueryResultTable/utils/getColumnWidth.ts b/src/components/QueryResultTable/utils/getColumnWidth.ts index d7eda0ab2e..9a8d23971c 100644 --- a/src/components/QueryResultTable/utils/getColumnWidth.ts +++ b/src/components/QueryResultTable/utils/getColumnWidth.ts @@ -17,5 +17,5 @@ export const getColumnWidth = ({data, name}: {data?: KeyValueRow[]; name: string } } - return Math.min(maxColumnContentLength * 10 + HEADER_PADDING, MAX_COLUMN_WIDTH); + return maxColumnContentLength * 10 + HEADER_PADDING; };