fix: design fixes

Author: astandrik

src/containers/Tenant/Query/QueryEditorControls/EditorButton.scss

@@ -8,8 +8,6 @@
     }
 
     &__stop-button {
-        color: var(--g-color-text-brand-contrast);
-        background-color: var(--g-color-text-danger);
         &_error {
             @include mixins.query-buttons-animations();
         }

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -106,6 +106,7 @@ export const QueryEditorControls = ({
             loading={cancelQueryResponse.isLoading}
             error={Boolean(cancelQueryResponse.error)}
             onClick={onStopButtonClick}
+            view="action"
         />
     );
 

src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.scss

@@ -2,12 +2,19 @@
 
 .ydb-query-result-sets-viewer {
     &__tabs {
-        padding-top: var(--g-spacing-2);
+        margin-bottom: var(--g-spacing-1);
+        padding-top: var(--g-spacing-1);
         padding-left: var(--g-spacing-4);
     }
 
-    &__head {
-        margin-top: var(--g-spacing-4);
+    &__title {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+
+        padding-top: var(--g-spacing-4);
+        padding-bottom: var(--g-spacing-4);
+        padding-left: var(--g-spacing-4);
     }
 
     &__tab-title {

src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.tsx

@@ -28,26 +28,16 @@ export function ResultSetsViewer(props: ResultSetsViewerProps) {
         const tabsItems: TabsItemProps[] =
             resultSets?.map((_, index) => {
                 const resultSet = resultSets?.[index];
-                const rowsPerSecond = resultSet?.streamMetrics?.rowsPerSecond;
-                const rowsPerSecondFormatted =
-                    rowsPerSecond && rowsPerSecond > 1000
-                        ? `${(rowsPerSecond / 1000).toFixed(0)}k`
-                        : rowsPerSecond?.toFixed(0);
                 return {
                     id: String(index),
                     title: (
                         <div className={b('tab-title')}>
                             <Text>
-                                {`Result${resultSets.length > 1 ? ` #${index + 1}` : ''}${resultSets?.[index]?.truncated ? '(T)' : ''}`}
+                                {`Result #${index + 1}${resultSets?.[index]?.truncated ? '(T)' : ''}`}
                             </Text>
                             <Text color="secondary">{resultSet.result?.length || 0}</Text>
                         </div>
                     ),
-                    label: rowsPerSecondFormatted
-                        ? {
-                              content: `${rowsPerSecondFormatted} rows/s`,
-                          }
-                        : undefined,
                 };
             }) || [];
 
@@ -64,10 +54,20 @@ export function ResultSetsViewer(props: ResultSetsViewerProps) {
         );
     };
 
+    const renderSingleResult = () => {
+        const result = resultSets?.[0];
+        return (
+            <div className={b('title')}>
+                <Text>{`Result ${result?.truncated ? '(T)' : ''}`}</Text>
+                <Text color="secondary">{result?.result?.length || 0}</Text>
+            </div>
+        );
+    };
+
     return (
         <div className={b('result-wrapper')}>
             {props.error ? <QueryResultError error={error} /> : null}
-            {renderTabs()}
+            {resultSets?.length && resultSets?.length > 1 ? renderTabs() : renderSingleResult()}
             {currentResult ? (
                 <div className={b('result')}>
                     <QueryResultTable

src/containers/Tenant/Query/QuerySettingsBanner/QuerySettingsBanner.scss

@@ -1,3 +1,5 @@
 .ydb-query-settings-banner {
-    margin: var(--g-spacing-1) var(--g-spacing-5);
+    margin-top: var(--g-spacing-4);
+    margin-right: var(--g-spacing-4);
+    margin-left: var(--g-spacing-4);
 }

src/containers/Tenant/Query/QuerySettingsBanner/QuerySettingsBanner.tsx

@@ -17,6 +17,7 @@ export function QuerySettingsBanner() {
             className={b()}
             theme="info"
             align="baseline"
+            style={{paddingTop: 11, paddingBottom: 11}}
             message={
                 <QuerySettingsDescription
                     prefix={i18n('banner.query-settings.message')}

src/store/reducers/query/streamingReducers.ts

@@ -1,6 +1,5 @@
 import type {PayloadAction} from '@reduxjs/toolkit';
 
-import type {StreamMetrics} from '../../../types/store/query';
 import type {
     QueryResponseChunk,
     SessionChunk,
@@ -58,38 +57,11 @@ export const setStreamQueryResponse = (
     }
 };
 
-const updateStreamMetrics = (metrics: StreamMetrics, totalNewRows: number) => {
-    const currentTime = Date.now();
-    const WINDOW_SIZE = 5000; // 5 seconds in milliseconds
-
-    metrics.recentChunks.push({timestamp: currentTime, rowCount: totalNewRows});
-    metrics.recentChunks = metrics.recentChunks.filter(
-        (chunk) => currentTime - chunk.timestamp <= WINDOW_SIZE,
-    );
-
-    if (metrics.recentChunks.length > 0) {
-        const oldestChunkTime = metrics.recentChunks[0].timestamp;
-        const timeWindow = (currentTime - oldestChunkTime) / 1000;
-        const totalRows = metrics.recentChunks.reduce(
-            (sum: number, chunk) => sum + chunk.rowCount,
-            0,
-        );
-        metrics.rowsPerSecond = timeWindow > 0 ? totalRows / timeWindow : 0;
-    }
-
-    metrics.lastUpdateTime = currentTime;
-};
-
 const getEmptyResultSet = () => {
     return {
         columns: [],
         result: [],
         truncated: false,
-        streamMetrics: {
-            rowsPerSecond: 0,
-            lastUpdateTime: Date.now(),
-            recentChunks: [],
-        },
     };
 };
 
@@ -123,11 +95,6 @@ export const addStreamingChunks = (state: QueryState, action: PayloadAction<Stre
         return acc;
     }, new Map<number, StreamDataChunk>());
 
-    const totalNewRows = action.payload.reduce(
-        (sum: number, chunk) => sum + (chunk.result.rows?.length || 0),
-        0,
-    );
-
     // Process merged chunks
     for (const [resultIndex, chunk] of mergedChunks.entries()) {
         const {columns, rows} = chunk.result;
@@ -149,9 +116,5 @@ export const addStreamingChunks = (state: QueryState, action: PayloadAction<Stre
             resultSet.result?.push(row);
         });
         resultSet.truncated = chunk.result.truncated;
-
-        if (resultSet.streamMetrics) {
-            updateStreamMetrics(resultSet.streamMetrics, totalNewRows);
-        }
     }
 };

src/types/store/query.ts

@@ -20,20 +20,10 @@ import type {
 } from '../api/query';
 import type {ValueOf} from '../common';
 
-export interface StreamMetrics {
-    rowsPerSecond: number;
-    lastUpdateTime: number;
-    recentChunks: Array<{
-        timestamp: number;
-        rowCount: number;
-    }>;
-}
-
 export interface ParsedResultSet {
     columns?: ColumnType[];
     result?: KeyValueRow[];
     truncated?: boolean;
-    streamMetrics?: StreamMetrics;
 }
 
 export interface IQueryResult {