fix: remove sorting

Author: astandrik

src/components/QueryResultTable/QueryResultTable.tsx

@@ -40,17 +40,8 @@ const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => {
 
         const column: Column<KeyValueRow> = {
             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}) => <Cell value={String(row[name])} />,
         };
 
@@ -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<KeyValueRow> = {
             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}) => <Cell value={String(row[name])} />,
         };
 
@@ -94,6 +87,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
         () => ({
             ...TABLE_SETTINGS,
             ...settingsMix,
+            sortable: false,
         }),
         [settingsMix],
     );

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);
     });
 });

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);
 };

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -136,7 +136,6 @@ export function ExecuteResult({
                     <QueryResultTable
                         data={currentResult?.result}
                         columns={currentResult?.columns}
-                        settings={{sortable: false}}
                     />
                 </div>
             </div>