fix: performance issues

Author: astandrik

src/components/QueryResultTable/QueryResultTable.tsx

@@ -81,32 +81,38 @@ interface QueryResultTableProps
 }
 
 export const QueryResultTable = (props: QueryResultTableProps) => {
-    const {columns: rawColumns, data, ...restProps} = props;
+    const {columns, data, settings: propsSettings} = props;
 
-    const columns = React.useMemo(() => {
-        return rawColumns ? prepareTypedColumns(rawColumns, data) : prepareGenericColumns(data);
-    }, [data, rawColumns]);
+    const preparedColumns = React.useMemo(() => {
+        return columns ? prepareTypedColumns(columns, data) : prepareGenericColumns(data);
+    }, [data, columns]);
+
+    const settings = React.useMemo(() => {
+        return {
+            ...TABLE_SETTINGS,
+            ...propsSettings,
+        };
+    }, [propsSettings]);
 
     // empty data is expected to be be an empty array
     // undefined data is not rendered at all
     if (!Array.isArray(data)) {
         return null;
     }
 
-    if (!columns.length) {
+    if (!preparedColumns.length) {
         return <div className={b('message')}>{i18n('empty')}</div>;
     }
 
     return (
         <ResizeableDataTable
             data={data}
-            columns={columns}
-            settings={{...TABLE_SETTINGS, ...props.settings}}
+            columns={preparedColumns}
+            settings={settings}
             // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
             rowKey={getRowIndex}
             visibleRowIndex={getVisibleRowIndex}
             wrapperClassName={b('table-wrapper')}
-            {...restProps}
         />
     );
 };

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -40,7 +40,7 @@ import {
 } from '../../../../utils/hooks';
 import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
 import {useLastQueryExecutionSettings} from '../../../../utils/hooks/useLastQueryExecutionSettings';
-import {QUERY_ACTIONS} from '../../../../utils/query';
+import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS} from '../../../../utils/query';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
 import {
     PaneVisibilityActionTypes,
@@ -101,6 +101,16 @@ export default function QueryEditor(props: QueryEditorProps) {
 
     const runningQueryRef = React.useRef<{abort: VoidFunction} | null>(null);
 
+    const tableSettings = React.useMemo(() => {
+        return isStreamingEnabled
+            ? {
+                  displayIndices: {
+                      maxIndex: (querySettings.limitRows || DEFAULT_QUERY_SETTINGS.limitRows) + 1,
+                  },
+              }
+            : undefined;
+    }, [isStreamingEnabled, querySettings.limitRows]);
+
     React.useEffect(() => {
         if (savedPath !== tenantName) {
             dispatch(setTenantPath(tenantName));
@@ -266,11 +276,7 @@ export default function QueryEditor(props: QueryEditorProps) {
                         showPreview={showPreview}
                         queryText={lastExecutedQueryText}
                         onCancelRunningQuery={handleCancelRunningQuery}
-                        tableSettings={
-                            isStreamingEnabled && querySettings.limitRows
-                                ? {displayIndices: {maxIndex: querySettings.limitRows}}
-                                : undefined
-                        }
+                        tableSettings={tableSettings}
                     />
                 </div>
             </SplitPane>