fix: make plan to svg more comprehensive

Author: Anton Standrik

src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Dialog, Link as ExternalLink, Flex, TextInput} from '@gravity-ui/uikit';
+import {Dialog, Link as ExternalLink, Flex, TextInput, Tooltip} from '@gravity-ui/uikit';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Controller, useForm} from 'react-hook-form';
 
@@ -11,8 +11,10 @@ import {
 } from '../../../../store/reducers/queryActions/queryActions';
 import type {QuerySettings} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
+import {USE_SHOW_PLAN_SVG_KEY} from '../../../../utils/constants';
 import {
     useQueryExecutionSettings,
+    useSetting,
     useTypedDispatch,
     useTypedSelector,
 } from '../../../../utils/hooks';
@@ -77,6 +79,7 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
         resolver: zodResolver(querySettingsValidationSchema),
     });
 
+    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
     const enableTracingLevel = useTracingLevelOptionAvailable();
 
     return (
@@ -178,22 +181,29 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                     <label htmlFor="statisticsMode" className={b('field-title')}>
                         {QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.title}
                     </label>
-                    <div className={b('control-wrapper', {statisticsMode: true})}>
-                        <Controller
-                            name="statisticsMode"
-                            control={control}
-                            render={({field}) => (
-                                <QuerySettingsSelect
-                                    id="statisticsMode"
-                                    setting={field.value}
-                                    onUpdateSetting={field.onChange}
-                                    settingOptions={
-                                        QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.options
-                                    }
-                                />
-                            )}
-                        />
-                    </div>
+                    <Tooltip
+                        disabled={!useShowPlanToSvg}
+                        openDelay={0}
+                        content={i18n('tooltip_plan-to-svg-statistics')}
+                    >
+                        <div className={b('control-wrapper', {statisticsMode: true})}>
+                            <Controller
+                                name="statisticsMode"
+                                control={control}
+                                render={({field}) => (
+                                    <QuerySettingsSelect
+                                        id="statisticsMode"
+                                        disabled={useShowPlanToSvg}
+                                        setting={field.value}
+                                        onUpdateSetting={field.onChange}
+                                        settingOptions={
+                                            QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.options
+                                        }
+                                    />
+                                )}
+                            />
+                        </div>
+                    </Tooltip>
                 </Flex>
                 <Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
                     <label htmlFor="limitRows" className={b('field-title')}>

src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.tsx

@@ -26,6 +26,7 @@ interface QuerySettingsSelectProps<T extends SelectType> {
     id?: string;
     setting: T;
     settingOptions: QuerySettingSelectOption<T>[];
+    disabled?: boolean;
     onUpdateSetting: (mode: T) => void;
 }
 
@@ -34,6 +35,7 @@ export function QuerySettingsSelect<T extends SelectType>(props: QuerySettingsSe
         <div className={b('selector')}>
             <Select<T>
                 id={props.id}
+                disabled={props.disabled}
                 options={props.settingOptions}
                 value={[props.setting]}
                 onUpdate={(value) => {

src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json

@@ -7,6 +7,7 @@
   "form.tracing-level": "Tracing level",
   "form.limit-rows": "Limit rows",
   "button-done": "Save",
+  "tooltip_plan-to-svg-statistics": "Statistics option is set to \"Full\" due to the enabled \"Execution plan\" experiment.\n To disable it, go to the \"Experiments\" section in the user settings.",
   "button-cancel": "Cancel",
   "form.timeout.seconds": "sec",
   "form.validation.timeout": "Must be positive",

src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json

@@ -6,6 +6,7 @@
   "form.statistics-mode": "Режим сбора статистики",
   "form.tracing-level": "Tracing level",
   "form.limit-rows": "Лимит строк",
+  "tooltip_plan-to-svg-statistics": "Опция статистики установлена в значение \"Full\" из-за включенного эксперимента \"Execution plan\".\n Чтобы отключить его, перейдите в раздел \"Experiments\" в настройках пользователя.",
   "button-done": "Готово",
   "button-cancel": "Отменить",
   "form.timeout.seconds": "сек",

src/containers/UserSettings/i18n/en.json

@@ -35,8 +35,8 @@
 
   "settings.enableNetworkTable.title": "Enable network table",
 
-  "settings.useShowPlanToSvg.title": "Plan to svg",
-  "settings.useShowPlanToSvg.description": " Show \"Plan to svg\" button in query result widow (if query was executed with full stats option).",
+  "settings.useShowPlanToSvg.title": "Execution plan",
+  "settings.useShowPlanToSvg.description": " Show \"Execution plan\" button in query result widow. Opens svg with execution plan in a new window.",
 
   "settings.showDomainDatabase.title": "Show domain database",
 

src/utils/hooks/useQueryExecutionSettings.ts

@@ -1,7 +1,7 @@
 import {useTracingLevelOptionAvailable} from '../../store/reducers/capabilities/hooks';
 import type {QuerySettings} from '../../types/store/query';
-import {QUERY_EXECUTION_SETTINGS_KEY} from '../constants';
-import {DEFAULT_QUERY_SETTINGS, querySettingsRestoreSchema} from '../query';
+import {QUERY_EXECUTION_SETTINGS_KEY, USE_SHOW_PLAN_SVG_KEY} from '../constants';
+import {DEFAULT_QUERY_SETTINGS, STATISTICS_MODES, querySettingsRestoreSchema} from '../query';
 
 import {useSetting} from './useSetting';
 
@@ -10,9 +10,11 @@ export const useQueryExecutionSettings = () => {
     const [storageSettings, setSettings] = useSetting<QuerySettings>(QUERY_EXECUTION_SETTINGS_KEY);
 
     const validatedSettings = querySettingsRestoreSchema.parse(storageSettings);
+    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
     const settings: QuerySettings = {
         ...validatedSettings,
+        statisticsMode: useShowPlanToSvg ? STATISTICS_MODES.full : validatedSettings.statisticsMode,
         tracingLevel: enableTracingLevel
             ? validatedSettings.tracingLevel
             : DEFAULT_QUERY_SETTINGS.tracingLevel,