fix: make plan to svg more comprehensive (#1658)

Co-authored-by: Anton Standrik <astandrik@Antons-MacBook-Air.local>

Author: astandrik

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,9 @@
+import React from 'react';
+
 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,13 +12,27 @@ 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 setQueryExecutionSettings = React.useCallback(
+        (settings: QuerySettings) => {
+            setSettings({
+                ...settings,
+                statisticsMode: useShowPlanToSvg
+                    ? validatedSettings.statisticsMode
+                    : settings.statisticsMode,
+            });
+        },
+        [setSettings, useShowPlanToSvg, validatedSettings.statisticsMode],
+    );
 
     const settings: QuerySettings = {
         ...validatedSettings,
+        statisticsMode: useShowPlanToSvg ? STATISTICS_MODES.full : validatedSettings.statisticsMode,
         tracingLevel: enableTracingLevel
             ? validatedSettings.tracingLevel
             : DEFAULT_QUERY_SETTINGS.tracingLevel,
     };
 
-    return [settings, setSettings] as const;
+    return [settings, setQueryExecutionSettings] as const;
 };

tests/suites/tenant/queryEditor/planToSvg.test.ts

@@ -4,7 +4,7 @@ import {tenantName} from '../../../utils/constants';
 import {toggleExperiment} from '../../../utils/toggleExperiment';
 import {TenantPage} from '../TenantPage';
 
-import {ButtonNames, QueryEditor} from './models/QueryEditor';
+import {QueryEditor} from './models/QueryEditor';
 
 test.describe('Test Plan to SVG functionality', async () => {
     const testQuery = 'SELECT 1;'; // Simple query that will generate a plan
@@ -24,30 +24,25 @@ test.describe('Test Plan to SVG functionality', async () => {
         const queryEditor = new QueryEditor(page);
 
         // 1. Turn on Plan to SVG experiment
-        await toggleExperiment(page, 'on', 'Plan to SVG');
+        await toggleExperiment(page, 'on', 'Execution plan');
 
-        // 2. Set stats level to Full
-        await queryEditor.clickGearButton();
-        await queryEditor.settingsDialog.changeStatsLevel('Full');
-        await queryEditor.settingsDialog.clickButton(ButtonNames.Save);
-
-        // 3. Set query and run it
+        // 2. Set query and run it
         await queryEditor.setQuery(testQuery);
         await queryEditor.clickRunButton();
 
-        // 4. Wait for query execution to complete
+        // 3. Wait for query execution to complete
         await expect(async () => {
             const status = await queryEditor.getExecutionStatus();
             expect(status).toBe('Completed');
         }).toPass();
 
-        // 5. Check if Execution Plan button appears and click it
+        // 4. Check if Execution Plan button appears and click it
         const executionPlanButton = page.locator('button:has-text("Execution plan")');
         await expect(executionPlanButton).toBeVisible();
         await executionPlanButton.click();
         await page.waitForTimeout(1000); // Wait for new tab to open
 
-        // 6. Verify we're taken to a new tab with SVG content
+        // 5. Verify we're taken to a new tab with SVG content
         const svgElement = page.locator('svg').first();
         await expect(svgElement).toBeVisible();
     });