diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx index 61b67347b3..8a593cb3dd 100644 --- a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx +++ b/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(''); const [isQueryStreamingEnabled] = useSetting(ENABLE_QUERY_STREAMING); - const isStreamingEnabled = useStreamingAvailable() && isQueryStreamingEnabled; + + const isStreamingEnabled = + useStreamingAvailable() && + isQueryStreamingEnabled && + querySettings.queryMode === QUERY_MODES.query; const [sendQuery] = queryApi.useUseSendQueryMutation(); const [streamQuery] = queryApi.useUseStreamQueryMutation(); diff --git a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx index cd2cd45784..73391de7ee 100644 --- a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx +++ b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx @@ -90,30 +90,28 @@ export const QueryEditorControls = ({ const [cancelQueryError, setCancelQueryError] = React.useState(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]); diff --git a/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx b/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx index 3c5ef8d462..a4d7750e52 100644 --- a/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx +++ b/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 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 ; } return (
- +
); }