fix: optimize performance

astandrik · astandrik · commit 4be176a797c3 · 2025-01-24T17:58:24.000+03:00
diff --git 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} from '../../utils/query';
 import {isNumeric} from '../../utils/utils';
 import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable';
 import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable';
@@ -80,16 +80,18 @@ interface QueryResultTableProps
 }
 
 export const QueryResultTable = (props: QueryResultTableProps) => {
-    const {columns: rawColumns, data: rawData, ...restProps} = props;
+    const {columns: rawColumns, data, ...restProps} = props;
 
-    const data = React.useMemo(() => prepareQueryResponse(rawData), [rawData]);
     const columns = React.useMemo(() => {
+        if (!data?.length) {
+            return [];
+        }
         return rawColumns ? prepareTypedColumns(rawColumns, data) : prepareGenericColumns(data);
     }, [data, rawColumns]);
 
     // empty data is expected to be be an empty array
     // undefined data is not rendered at all
-    if (!Array.isArray(rawData)) {
+    if (!Array.isArray(data)) {
         return null;
     }
 
diff --git a/src/services/api/viewer.ts b/src/services/api/viewer.ts
@@ -394,10 +394,7 @@ export class ViewerAPI extends BaseYdbAPI {
             true,
         );
 
-        // Create parser state and tracking in closure
-        let parserState = {
-            lastProcessedLength: 0,
-        };
+        let lastProcessedLength = 0;
 
         return this.get<string>(
             this.getPath('/viewer/query'),
@@ -421,11 +418,11 @@ export class ViewerAPI extends BaseYdbAPI {
                 },
                 onDownloadProgress: (progressEvent) => {
                     const response = progressEvent.event.target as XMLHttpRequest;
-                    const {chunks, state} = parseMultipart({
+                    const {chunks, lastProcessedLength: currentLength} = parseMultipart({
                         responseText: response.responseText,
-                        state: parserState,
+                        lastProcessedLength,
                     });
-                    parserState = state;
+                    lastProcessedLength = currentLength;
                     let mergedChunk = null;
 
                     for (const chunk of chunks) {
diff --git a/src/services/parsers/parseMultipart.ts b/src/services/parsers/parseMultipart.ts
@@ -1,69 +1,41 @@
 /* eslint-disable camelcase */
 import type {StreamingChunk} from '../../types/store/streaming';
 
-// interface Headers {
-//     contentType?: string;
-//     contentLength?: number;
-// }
-
-interface MultipartState {
-    lastProcessedLength: number;
-}
-
 interface MultipartResult {
     chunks: StreamingChunk[];
-    state: MultipartState;
+    lastProcessedLength: number;
 }
 
-// function parseHeaders(headerLines: string[]): Headers {
-//     const headers: Headers = {};
-//     for (const line of headerLines) {
-//         const [key, value] = line.split(': ');
-//         switch (key.toLowerCase()) {
-//             case 'content-type':
-//                 headers.contentType = value;
-//                 break;
-//             case 'content-length':
-//                 headers.contentLength = Number(value);
-//                 break;
-//         }
-//     }
-//     return headers;
-// }
-
 const CRLF = '\r\n';
 
 export function parseMultipart({
     responseText,
-    state = {lastProcessedLength: 0},
+    lastProcessedLength,
     boundary = 'boundary',
 }: {
     responseText: string;
-    state?: MultipartState;
+    lastProcessedLength: number;
     boundary?: string;
 }): MultipartResult {
-    // Combine buffer with new data
-    const newData = responseText.slice(state.lastProcessedLength);
+    const newData = responseText.slice(lastProcessedLength);
 
     if (!newData) {
-        return {chunks: [], state};
+        return {chunks: [], lastProcessedLength};
     }
 
     // Split on boundary with double dashes and CRLF
     const boundaryStr = `--${boundary}${CRLF}`;
     const parts = newData.split(boundaryStr);
 
-    let currentPosition = state.lastProcessedLength;
+    let currentPosition = lastProcessedLength;
     const chunks: StreamingChunk[] = [];
 
     for (let i = 0; i < parts.length; i++) {
         const part = parts[i];
         const isLastPart = i === parts.length - 1;
 
-        // Split part into lines by CRLF
         const lines = part.split(CRLF);
 
-        // Find the empty line that separates headers from content
         const emptyLineIndex = lines.findIndex((line) => line === '');
         if (emptyLineIndex === -1 || !lines[emptyLineIndex + 1]) {
             if (isLastPart) {
@@ -72,38 +44,20 @@ export function parseMultipart({
             continue;
         }
 
-        // const headers = parseHeaders(lines.slice(0, emptyLineIndex));
-
         const jsonContent = lines[emptyLineIndex + 1];
 
-        // if (headers.contentLength) {
-        //     jsonContent = jsonContent.slice(0, headers.contentLength);
-        // }
-
-        // if (headers.contentLength && jsonContent.length < headers.contentLength) {
-        //     newBuffer = jsonContent;
-        //     break;
-        // }
-
         let parsedChunk: StreamingChunk | null = null;
         try {
             parsedChunk = JSON.parse(jsonContent) as StreamingChunk;
         } catch {}
 
-        // If it's the last part and not a complete chunk, store in buffer
         if (!parsedChunk) {
             break;
         }
-        // Track position by adding boundary length and full part length
+
         chunks.push(parsedChunk);
         currentPosition += boundaryStr.length + part.length;
     }
 
-    // Update state with precise position tracking
-    const newState: MultipartState = {
-        // Only update lastProcessedLength if we actually processed some chunks
-        lastProcessedLength: currentPosition,
-    };
-
-    return {chunks, state: newState};
+    return {chunks, lastProcessedLength: currentPosition};
 }
diff --git a/src/store/reducers/query/query.ts b/src/store/reducers/query/query.ts
@@ -6,14 +6,13 @@ import {TracingLevelNumber} from '../../../types/api/query';
 import type {QueryAction, QueryRequestParams, QuerySettings} from '../../../types/store/query';
 import type {StreamingChunk} from '../../../types/store/streaming';
 import {QUERIES_HISTORY_KEY} from '../../../utils/constants';
-import {isQueryErrorResponse} from '../../../utils/query';
+import {isQueryErrorResponse, parseResult} from '../../../utils/query';
 import {isNumeric} from '../../../utils/utils';
 import {api} from '../api';
 
 import {prepareQueryData} from './prepareQueryData';
 import type {QueryResult, QueryState} from './types';
 import {
-    convertToKeyValueRows,
     getActionAndSyntaxFromQueryMode,
     getQueryInHistory,
     isQueryResponseChunk,
@@ -161,15 +160,15 @@ const slice = createSlice({
                 }
                 // Convert and append new rows
                 if (rows.length > 0 && state.result.data.resultSets?.[0]?.columns) {
-                    const convertedRows = convertToKeyValueRows(
+                    const formattedRows = parseResult(
                         rows,
                         state.result.data.resultSets[0].columns,
                     );
 
                     if (state.result.data.resultSets[0].result) {
-                        state.result.data.resultSets[0].result.push(...convertedRows);
+                        state.result.data.resultSets[0].result.push(...formattedRows);
                     } else {
-                        state.result.data.resultSets[0].result = convertedRows;
+                        state.result.data.resultSets[0].result = formattedRows;
                     }
                 }
             } else if (isQueryResponseChunk(chunk)) {
diff --git a/src/types/store/streaming.ts b/src/types/store/streaming.ts
@@ -1,4 +1,4 @@
-import type {ColumnType, QueryPlan, ScriptPlan, TKqpStatsQuery} from '../api/query';
+import type {ArrayRow, ColumnType, QueryPlan, ScriptPlan, TKqpStatsQuery} from '../api/query';
 
 export interface SessionChunk {
     meta: {
@@ -17,7 +17,7 @@ export interface StreamDataChunk {
     };
     result: {
         columns?: ColumnType[];
-        rows: unknown[];
+        rows: ArrayRow[];
     };
 }
 
diff --git a/src/utils/query.ts b/src/utils/query.ts
@@ -139,15 +139,30 @@ export const getColumnType = (type: string) => {
     }
 };
 
-/** parse response result from ArrayRow to KeyValueRow */
-const parseResult = (rows: ArrayRow[], columns: ColumnType[]) => {
-    return rows.map((row) => {
-        return row.reduce<KeyValueRow>((newRow, cellData, columnIndex) => {
-            const {name} = columns[columnIndex];
-            newRow[name] = cellData;
-            return newRow;
-        }, {});
-    });
+/** parse response result from ArrayRow to KeyValueRow and format values */
+export const parseResult = (rows: ArrayRow[], columns: ColumnType[]) => {
+    const result = new Array(rows.length);
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        const obj: KeyValueRow = {};
+        for (let j = 0; j < row.length; j++) {
+            const value = row[j];
+            const columnName = columns[j].name;
+
+            // Format the value based on its type
+            if (
+                (value !== null && typeof value === 'object') ||
+                typeof value === 'boolean' ||
+                Array.isArray(value)
+            ) {
+                obj[columnName] = JSON.stringify(value);
+            } else {
+                obj[columnName] = value;
+            }
+        }
+        result[i] = obj;
+    }
+    return result;
 };
 
 const parseExecuteResponse = (data: ExecuteResponse): IQueryResult => {
@@ -251,36 +266,6 @@ export const parseQueryExplainPlan = (plan: ScriptPlan | QueryPlan): QueryPlan =
     return plan;
 };
 
-export const prepareQueryResponse = (data?: KeyValueRow[]) => {
-    if (!Array.isArray(data)) {
-        return [];
-    }
-
-    return data.map((row) => {
-        const formattedData: KeyValueRow = {};
-
-        for (const field in row) {
-            if (Object.prototype.hasOwnProperty.call(row, field)) {
-                const type = typeof row[field];
-
-                // Although typeof null == 'object'
-                // null result should be preserved
-                if (
-                    (row[field] !== null && type === 'object') ||
-                    type === 'boolean' ||
-                    Array.isArray(row[field])
-                ) {
-                    formattedData[field] = JSON.stringify(row[field]);
-                } else {
-                    formattedData[field] = row[field];
-                }
-            }
-        }
-
-        return formattedData;
-    });
-};
-
 export const parseQueryError = (error: unknown): ErrorResponse | string | undefined => {
     if (typeof error === 'string' || isQueryErrorResponse(error)) {
         return error;
