feat: query streaming only for queryService

Author: astandrik

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

@@ -39,7 +39,7 @@ import {
 } from '../../../../utils/hooks';
 import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
 import {useLastQueryExecutionSettings} from '../../../../utils/hooks/useLastQueryExecutionSettings';
-import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS} from '../../../../utils/query';
+import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS, QUERY_MODES} from '../../../../utils/query';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
 import {
     PaneVisibilityActionTypes,
@@ -93,7 +93,11 @@ export default function QueryEditor(props: QueryEditorProps) {
     );
     const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
     const [isQueryStreamingEnabled] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
-    const isStreamingEnabled = useStreamingAvailable() && isQueryStreamingEnabled;
+
+    const isStreamingEnabled =
+        useStreamingAvailable() &&
+        isQueryStreamingEnabled &&
+        querySettings.queryMode === QUERY_MODES.query;
 
     const [sendQuery] = queryApi.useUseSendQueryMutation();
     const [streamQuery] = queryApi.useUseStreamQueryMutation();

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

@@ -90,30 +90,28 @@ export const QueryEditorControls = ({
     const [cancelQueryError, setCancelQueryError] = React.useState<boolean>(false);
 
     const onStopButtonClick = React.useCallback(async () => {
-        if (queryId) {
-            try {
-                if (isStreamingEnabled) {
-                    queryManagerInstance.abortQuery();
-                } else if (queryId) {
-                    await sendCancelQuery({queryId, database: tenantName}).unwrap();
-                }
-            } catch {
-                createToast({
-                    name: 'stop-error',
-                    title: '',
-                    content: i18n('toaster.stop-error'),
-                    type: 'error',
-                    autoHiding: STOP_AUTO_HIDE_TIMEOUT,
-                });
-                setCancelQueryError(true);
-
-                if (cancelErrorAnimationRef.current) {
-                    window.clearTimeout(cancelErrorAnimationRef.current);
-                }
-                cancelErrorAnimationRef.current = window.setTimeout(() => {
-                    setCancelQueryError(false);
-                }, CANCEL_ERROR_ANIMATION_DURATION);
+        try {
+            if (isStreamingEnabled) {
+                queryManagerInstance.abortQuery();
+            } else if (queryId) {
+                await sendCancelQuery({queryId, database: tenantName}).unwrap();
             }
+        } catch {
+            createToast({
+                name: 'stop-error',
+                title: '',
+                content: i18n('toaster.stop-error'),
+                type: 'error',
+                autoHiding: STOP_AUTO_HIDE_TIMEOUT,
+            });
+            setCancelQueryError(true);
+
+            if (cancelErrorAnimationRef.current) {
+                window.clearTimeout(cancelErrorAnimationRef.current);
+            }
+            cancelErrorAnimationRef.current = window.setTimeout(() => {
+                setCancelQueryError(false);
+            }, CANCEL_ERROR_ANIMATION_DURATION);
         }
     }, [isStreamingEnabled, queryId, sendCancelQuery, tenantName]);
 

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

@@ -1,3 +1,7 @@
+import React from 'react';
+
+import type {Data} from '@gravity-ui/paranoid';
+
 import {YDBGraph} from '../../../../../../components/Graph/Graph';
 import type {PreparedPlan} from '../../../../../../store/reducers/query/types';
 import {cn} from '../../../../../../utils/cn';
@@ -13,18 +17,22 @@ interface GraphProps {
     theme?: string;
 }
 
+function isValidGraphData(data: Partial<Data>): data is Data {
+    return Boolean(data.links && data.nodes && data.nodes.length);
+}
+
 export function Graph({explain = {}, theme}: GraphProps) {
     const {links, nodes} = explain;
 
-    const isEnoughDataForGraph = links && nodes && nodes.length;
+    const data = React.useMemo(() => ({links, nodes}), [links, nodes]);
 
-    if (!isEnoughDataForGraph) {
+    if (!isValidGraphData(data)) {
         return <StubMessage message={i18n('description.graph-is-not-supported')} />;
     }
 
     return (
         <div className={b('canvas-container')}>
-            <YDBGraph key={theme} data={{links, nodes}} />
+            <YDBGraph key={theme} data={data} />
         </div>
     );
 }