fix: interface shaking

Author: astandrik

src/components/QueryResultTable/QueryResultTable.scss

@@ -9,4 +9,10 @@
     &__message {
         padding: 15px 10px;
     }
+
+    // Must have fixed height for frequent data updates (to avoid interface shaking).
+    // Will be fixed after migration to new @gravity-ui/table.
+    &__table-wrapper {
+        height: 0px;
+    }
 }

src/components/QueryResultTable/QueryResultTable.tsx

@@ -104,6 +104,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
             // 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/store/reducers/query/streamingReducers.ts

@@ -80,6 +80,19 @@ const updateSpeedMetrics = (metrics: SpeedMetrics, totalNewRows: number) => {
     metrics.lastUpdateTime = currentTime;
 };
 
+const getEmptyResultSet = () => {
+    return {
+        columns: [],
+        result: [],
+        truncated: false,
+        speedMetrics: {
+            rowsPerSecond: 0,
+            lastUpdateTime: Date.now(),
+            recentChunks: [],
+        },
+    };
+};
+
 export const addStreamingChunks = (state: QueryState, action: PayloadAction<StreamDataChunk[]>) => {
     if (!state.result) {
         return;
@@ -118,18 +131,12 @@ export const addStreamingChunks = (state: QueryState, action: PayloadAction<Stre
     // Process merged chunks
     for (const [resultIndex, chunk] of mergedChunks.entries()) {
         const {columns, rows} = chunk.result;
-        const resultSet = (state.result.data.resultSets[resultIndex] = state.result.data.resultSets[
-            resultIndex
-        ] || {
-            columns: [],
-            result: [],
-            truncated: false,
-            speedMetrics: {
-                rowsPerSecond: 0,
-                lastUpdateTime: Date.now(),
-                recentChunks: [],
-            },
-        });
+        const resultSets = state.result.data.resultSets;
+
+        if (!resultSets[resultIndex]) {
+            resultSets[resultIndex] = getEmptyResultSet();
+        }
+        const resultSet = resultSets[resultIndex];
 
         if (columns && !resultSet.columns?.length) {
             resultSet.columns = columns;