ydb-embedded-ui 6.11.0 → 6.13.0

package/dist/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import { DeveloperUiLink } from '../../../../components/DeveloperUiLink/DeveloperUiLink';
+import { DeveloperUILinkButton } from '../../../../components/DeveloperUILinkButton/DeveloperUILinkButton';
 import { EntityStatus } from '../../../../components/EntityStatus/EntityStatus';
 import { InternalLink } from '../../../../components/InternalLink';
 import { LinkToSchemaObject } from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import { UsageLabel } from '../../../../components/UsageLabel/UsageLabel';
 import routes, { createHref } from '../../../../routes';
-import { backend } from '../../../../store';
 import { getLoadSeverityForShard } from '../../../../store/reducers/tenantOverview/topShards/utils';
 import { formatNumber, roundToPrecision } from '../../../../utils/dataFormatters/dataFormatters';
+import { createTabletDeveloperUIHref } from '../../../../utils/developerUI/developerUI';
 import { getDefaultNodePath } from '../../../Node/NodePages';
 export const TOP_SHARDS_COLUMNS_WIDTH_LS_KEY = 'topShardsColumnsWidth';
 const TOP_SHARDS_COLUMNS_IDS = {
@@ -68,10 +68,10 @@ const tabletIdColumn = {
         if (!row.TabletId) {
             return '–';
         }
-        return (_jsx(EntityStatus, { name: (_a = row.TabletId) === null || _a === void 0 ? void 0 : _a.toString(), path: createHref(routes.tablet, { id: row.TabletId }), hasClipboardButton: true, showStatus: false, additionalControls: _jsx(DeveloperUiLink, { href: `${backend}/tablets?TabletID=${row.TabletId}` }) }));
+        return (_jsx(EntityStatus, { name: (_a = row.TabletId) === null || _a === void 0 ? void 0 : _a.toString(), path: createHref(routes.tablet, { id: row.TabletId }), hasClipboardButton: true, showStatus: false, additionalControls: _jsx(DeveloperUILinkButton, { href: createTabletDeveloperUIHref(row.TabletId) }) }));
     },
     sortable: false,
-    width: 190,
+    width: 220,
 };
 const nodeIdColumn = {
     name: TOP_SHARDS_COLUMNS_IDS.NodeId,

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.js

@@ -8,6 +8,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { AsyncReplicationState } from '../../../components/AsyncReplicationState';
 import { ClipboardButton } from '../../../components/ClipboardButton';
+import { toFormattedSize } from '../../../components/FormattedBytes/utils';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
 import { Loader } from '../../../components/Loader';
@@ -19,7 +20,7 @@ import { setQueryTab, setSummaryTab, setTenantPage } from '../../../store/reduce
 import { EPathSubType, EPathType } from '../../../types/api/schema';
 import { cn } from '../../../utils/cn';
 import { DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED, DEFAULT_SIZE_TENANT_SUMMARY_KEY, } from '../../../utils/constants';
-import { formatDateTime, formatSecondsToHours } from '../../../utils/dataFormatters/dataFormatters';
+import { formatDateTime, formatNumber, formatSecondsToHours, } from '../../../utils/dataFormatters/dataFormatters';
 import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import { Acl } from '../Acl/Acl';
 import { EntityTitle } from '../EntityTitle/EntityTitle';
@@ -48,7 +49,7 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
-    const { data: currentObjectData } = useGetSchemaQuery({ path });
+    const { data: currentObjectData } = useGetSchemaQuery({ path, database: tenantName });
     const currentSchemaData = (_a = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _a === void 0 ? void 0 : _a.Self;
     React.useEffect(() => {
         const isTable = isTableType(type);
@@ -86,10 +87,33 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
         overview.push({ label: i18n('summary.version'), value: PathVersion });
         overview.push({
             label: i18n('summary.created'),
-            value: formatDateTime(CreateStep, ''),
+            value: formatDateTime(CreateStep),
         });
         const { PathDescription } = currentObjectData;
+        if (PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.TableStats) {
+            const { DataSize, RowCount } = PathDescription.TableStats;
+            overview.push({
+                label: i18n('summary.data-size'),
+                value: toFormattedSize(DataSize),
+            }, {
+                label: i18n('summary.row-count'),
+                value: formatNumber(RowCount),
+            });
+        }
         const title = _jsx(EntityTitle, { data: PathDescription });
+        const getDatabaseOverview = () => {
+            var _a, _b;
+            return [
+                {
+                    label: i18n('summary.paths'),
+                    value: (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.DomainDescription) === null || _a === void 0 ? void 0 : _a.PathsInside,
+                },
+                {
+                    label: i18n('summary.shards'),
+                    value: (_b = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.DomainDescription) === null || _b === void 0 ? void 0 : _b.ShardsInside,
+                },
+            ];
+        };
         const getPathTypeOverview = {
             [EPathType.EPathTypeInvalid]: undefined,
             [EPathType.EPathTypeDir]: undefined,
@@ -102,21 +126,9 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
                     },
                 ];
             },
-            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeSubDomain]: getDatabaseOverview,
             [EPathType.EPathTypeTableIndex]: undefined,
-            [EPathType.EPathTypeExtSubDomain]: () => {
-                var _a, _b;
-                return [
-                    {
-                        label: i18n('summary.paths'),
-                        value: (_a = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.DomainDescription) === null || _a === void 0 ? void 0 : _a.PathsInside,
-                    },
-                    {
-                        label: i18n('summary.shards'),
-                        value: (_b = PathDescription === null || PathDescription === void 0 ? void 0 : PathDescription.DomainDescription) === null || _b === void 0 ? void 0 : _b.ShardsInside,
-                    },
-                ];
-            },
+            [EPathType.EPathTypeExtSubDomain]: getDatabaseOverview,
             [EPathType.EPathTypeColumnStore]: () => {
                 var _a, _b;
                 return [
@@ -212,7 +224,7 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
     const renderTabContent = () => {
         switch (summaryTab) {
             case TENANT_SUMMARY_TABS_IDS.acl: {
-                return _jsx(Acl, { path: path });
+                return _jsx(Acl, { path: path, database: tenantName });
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
                 return _jsx(SchemaViewer, { type: type, path: path, tenantName: tenantName });
@@ -257,6 +269,7 @@ function ObjectTree({ tenantName, path }) {
     var _a;
     const { data: tenantData = {}, isLoading } = useGetSchemaQuery({
         path: tenantName,
+        database: tenantName,
     });
     const pathData = (_a = tenantData === null || tenantData === void 0 ? void 0 : tenantData.PathDescription) === null || _a === void 0 ? void 0 : _a.Self;
     const [, setCurrentPath] = useQueryParam('schema', StringParam);

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.d.ts

@@ -2,11 +2,11 @@ import type { IQueryResult } from '../../../../types/store/query';
 import './ExecuteResult.scss';
 interface ExecuteResultProps {
     data: IQueryResult | undefined;
-    stats: IQueryResult['stats'] | undefined;
     error: unknown;
     isResultsCollapsed?: boolean;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
+    theme?: string;
 }
-export declare function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }: ExecuteResultProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExecuteResult({ data, error, isResultsCollapsed, onCollapseResults, onExpandResults, theme, }: ExecuteResultProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.js

@@ -6,39 +6,56 @@ import { ClipboardButton } from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { YDBGraph } from '../../../../components/Graph/Graph';
 import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
 import { QueryResultTable } from '../../../../components/QueryResultTable/QueryResultTable';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 import { getArray } from '../../../../utils';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useTypedDispatch } from '../../../../utils/hooks';
 import { parseQueryError } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
+import { SimplifiedPlan } from '../ExplainResult/components/SimplifiedPlan/SimplifiedPlan';
 import { ResultIssues } from '../Issues/Issues';
 import { QueryDuration } from '../QueryDuration/QueryDuration';
+import { QuerySettingsBanner } from '../QuerySettingsBanner/QuerySettingsBanner';
 import { getPreparedResult } from '../utils/getPreparedResult';
+import i18n from './i18n';
+import { getPlan } from './utils';
 import './ExecuteResult.scss';
 const b = cn('ydb-query-execute-result');
 const resultOptionsIds = {
     result: 'result',
     stats: 'stats',
+    schema: 'schema',
+    simplified: 'simplified',
 };
-const resultOptions = [
-    { value: resultOptionsIds.result, content: 'Result' },
-    { value: resultOptionsIds.stats, content: 'Stats' },
-];
-export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }) {
+export function ExecuteResult({ data, error, isResultsCollapsed, onCollapseResults, onExpandResults, theme, }) {
     var _a, _b, _c;
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
     const [activeSection, setActiveSection] = React.useState(resultOptionsIds.result);
-    const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
+    const stats = data === null || data === void 0 ? void 0 : data.stats;
     const resultsSetsCount = (_a = data === null || data === void 0 ? void 0 : data.resultSets) === null || _a === void 0 ? void 0 : _a.length;
     const isMulti = resultsSetsCount && resultsSetsCount > 0;
     const currentResult = isMulti ? (_b = data === null || data === void 0 ? void 0 : data.resultSets) === null || _b === void 0 ? void 0 : _b[selectedResultSet].result : data === null || data === void 0 ? void 0 : data.result;
     const currentColumns = isMulti ? (_c = data === null || data === void 0 ? void 0 : data.resultSets) === null || _c === void 0 ? void 0 : _c[selectedResultSet].columns : data === null || data === void 0 ? void 0 : data.columns;
     const textResults = getPreparedResult(currentResult);
     const copyDisabled = !textResults.length;
+    const { plan, simplifiedPlan } = React.useMemo(() => getPlan(data), [data]);
+    const resultOptions = [
+        { value: resultOptionsIds.result, content: i18n('action.result') },
+        { value: resultOptionsIds.stats, content: i18n('action.stats') },
+    ];
+    if (plan) {
+        resultOptions.push({ value: resultOptionsIds.schema, content: i18n('action.schema') });
+    }
+    if (simplifiedPlan) {
+        resultOptions.push({
+            value: resultOptionsIds.simplified,
+            content: i18n('action.explain-plan'),
+        });
+    }
     const parsedError = parseQueryError(error);
     React.useEffect(() => {
         return () => {
@@ -51,7 +68,7 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
     const renderResultTable = (result, columns) => {
         return _jsx(QueryResultTable, { data: result, columns: columns, settings: { sortable: false } });
     };
-    const renderContent = () => {
+    const renderResult = () => {
         return (_jsxs(React.Fragment, { children: [isMulti && resultsSetsCount > 1 && (_jsx("div", { children: _jsx(Tabs, { className: b('result-tabs'), size: "l", items: getArray(resultsSetsCount).map((item) => ({
                             id: String(item),
                             title: `Result #${item + 1}`,
@@ -61,30 +78,49 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         return (_jsx(ClipboardButton, { text: textResults, view: "flat-secondary", title: "Copy results", disabled: copyDisabled }));
     };
     const renderStats = () => {
-        const content = (_jsx(JSONTree, { data: stats, isExpanded: () => true, className: b('inspector'), searchOptions: {
-                debounceTime: 300,
-            } }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('inspector', { fullscreen: true }), children: content }) }))] }));
+        return (_jsx("div", { className: b('inspector'), children: _jsx(JSONTree, { data: stats, isExpanded: () => true, searchOptions: {
+                    debounceTime: 300,
+                } }) }));
     };
-    const renderResult = () => {
-        const content = renderContent();
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper'), children: content }) }))] }));
+    const renderSchema = () => {
+        const isEnoughDataForGraph = (plan === null || plan === void 0 ? void 0 : plan.links) && (plan === null || plan === void 0 ? void 0 : plan.nodes) && (plan === null || plan === void 0 ? void 0 : plan.nodes.length);
+        if (!isEnoughDataForGraph) {
+            return i18n('description.graph-is-not-supported');
+        }
+        return (_jsx("div", { className: b('explain-canvas-container'), children: _jsx(YDBGraph, { data: plan }, theme) }));
+    };
+    const renderSimplified = () => {
+        if (!simplifiedPlan) {
+            return null;
+        }
+        return _jsx(SimplifiedPlan, { plan: simplifiedPlan });
     };
     const renderIssues = () => {
         if (!parsedError) {
             return null;
         }
         if (typeof parsedError === 'object') {
-            const content = _jsx(ResultIssues, { data: parsedError });
-            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper', b('result')), children: content }) }))] }));
+            return _jsx(ResultIssues, { data: parsedError });
         }
         return _jsx("div", { className: b('error'), children: parsedError });
     };
     const renderResultSection = () => {
-        if (activeSection === resultOptionsIds.result && !error) {
+        if (error) {
+            return renderIssues();
+        }
+        if (activeSection === resultOptionsIds.result) {
             return renderResult();
         }
-        return (_jsxs("div", { className: b('result'), children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] }));
+        if (activeSection === resultOptionsIds.stats) {
+            return renderStats();
+        }
+        if (activeSection === resultOptionsIds.schema) {
+            return renderSchema();
+        }
+        if (activeSection === resultOptionsIds.simplified) {
+            return renderSimplified();
+        }
+        return null;
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls'), children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] }), _jsxs("div", { className: b('controls-left'), children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] }), renderResultSection()] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls'), children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] }), _jsxs("div", { className: b('controls-left'), children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] }), _jsx(QuerySettingsBanner, {}), _jsx(Fullscreen, { children: renderResultSection() })] }));
 }

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss

@@ -57,14 +57,18 @@
         gap: 4px;
     }
     &__inspector {
+        overflow: auto;
+
+        width: 100%;
+        height: 100%;
         padding: 15px 10px;
         @include json-tree-styles();
-        &_fullscreen {
-            overflow: auto;
+    }
 
-            width: 100%;
-            height: 100%;
-            padding: 10px;
-        }
+    &__explain-canvas-container {
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
     }
 }

package/dist/containers/Tenant/Query/ExecuteResult/i18n/en.json

@@ -0,0 +1,7 @@
+{
+    "description.graph-is-not-supported": "Graph can not be rendered",
+    "action.result": "Result",
+    "action.stats": "Stats",
+    "action.schema": "Schema",
+    "action.explain-plan": "Explain Plan"
+}

package/dist/containers/Tenant/Query/ExecuteResult/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "description.graph-is-not-supported" | "action.result" | "action.stats" | "action.schema" | "action.explain-plan", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Query/ExecuteResult/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-execute-result';
+export default registerKeysets(COMPONENT, { en });

package/dist/containers/Tenant/Query/ExecuteResult/utils.d.ts

@@ -0,0 +1,18 @@
+import type { IQueryResult } from '../../../../types/store/query';
+export declare function getPlan(data: IQueryResult | undefined): {
+    plan?: undefined;
+    simplifiedPlan?: undefined;
+} | {
+    plan: {
+        tables: import("../../../../types/api/query").PlanTable[] | undefined;
+        nodes: import("@gravity-ui/paranoid").GraphNode<import("@gravity-ui/paranoid").ExplainPlanNodeData>[];
+        links: import("@gravity-ui/paranoid").Link[];
+    } | undefined;
+    simplifiedPlan: import("../../../../store/reducers/explainQuery/types").SimplifiedPlanItem[] | undefined;
+} | {
+    plan: {
+        nodes: import("@gravity-ui/paranoid").GraphNode<import("@gravity-ui/paranoid").ExplainPlanNodeData>[];
+        links: import("@gravity-ui/paranoid").Link[];
+    };
+    simplifiedPlan?: undefined;
+};

package/dist/containers/Tenant/Query/ExecuteResult/utils.js

@@ -0,0 +1,36 @@
+import { explainVersions } from '../../../../store/reducers/explainQuery/utils';
+import { preparePlan, prepareSimplifiedPlan } from '../../../../utils/prepareQueryExplain';
+import { parseQueryExplainPlan } from '../../../../utils/query';
+export function getPlan(data) {
+    var _a, _b, _c;
+    if (!data) {
+        return {};
+    }
+    const { plan } = data;
+    if (plan) {
+        const queryPlan = parseQueryExplainPlan(plan);
+        const isSupportedVersion = queryPlan.meta.version === explainVersions.v2;
+        if (!isSupportedVersion) {
+            return {};
+        }
+        const { Plan: planWithStats, SimplifiedPlan: simplifiedPlan } = queryPlan;
+        return {
+            plan: planWithStats
+                ? { ...preparePlan(planWithStats), tables: queryPlan.tables }
+                : undefined,
+            simplifiedPlan: simplifiedPlan ? prepareSimplifiedPlan([simplifiedPlan]) : undefined,
+        };
+    }
+    const { stats } = data;
+    const planFromStats = (_c = (_b = (_a = stats === null || stats === void 0 ? void 0 : stats.Executions) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.TxPlansWithStats) === null || _c === void 0 ? void 0 : _c[0];
+    if (!planFromStats) {
+        return {};
+    }
+    try {
+        const planWithStats = JSON.parse(planFromStats);
+        return { plan: preparePlan(planWithStats) };
+    }
+    catch (e) {
+        return {};
+    }
+}

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.d.ts

@@ -1 +1,23 @@
-export function ExplainResult(props: any): import("react/jsx-runtime").JSX.Element;
+import type { PreparedExplainResponse } from '../../../../store/reducers/explainQuery/types';
+import type { ValueOf } from '../../../../types/common';
+import './ExplainResult.scss';
+declare const EXPLAIN_OPTIONS_IDS: {
+    readonly schema: "schema";
+    readonly json: "json";
+    readonly ast: "ast";
+    readonly simplified: "simplified";
+};
+export type QueryExplainTab = ValueOf<typeof EXPLAIN_OPTIONS_IDS>;
+interface ExplainResultProps {
+    theme: string;
+    explain?: PreparedExplainResponse['plan'];
+    simplifiedPlan?: PreparedExplainResponse['simplifiedPlan'];
+    ast?: string;
+    loading?: boolean;
+    isResultsCollapsed?: boolean;
+    error: unknown;
+    onCollapseResults: VoidFunction;
+    onExpandResults: VoidFunction;
+}
+export declare function ExplainResult({ explain, ast, theme, error, loading, onCollapseResults, onExpandResults, isResultsCollapsed, simplifiedPlan, }: ExplainResultProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -1,149 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
-import { Loader, RadioButton } from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
+import { RadioButton } from '@gravity-ui/uikit';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
+import { LoaderWrapper } from '../../../../components/LoaderWrapper/LoaderWrapper';
 import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
-import { explainVersions } from '../../../../store/reducers/explainQuery/utils';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
-import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
+import { useTypedDispatch } from '../../../../utils/hooks';
 import { parseQueryErrorToString } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
-import { renderExplainNode } from './utils';
+import { QuerySettingsBanner } from '../QuerySettingsBanner/QuerySettingsBanner';
+import { Ast } from './components/Ast/Ast';
+import { Graph } from './components/Graph/Graph';
+import { SimplifiedPlan } from './components/SimplifiedPlan/SimplifiedPlan';
+import { TextExplain } from './components/TextExplain/TextExplain';
+import i18n from './i18n';
 import './ExplainResult.scss';
-import 'react-json-inspector/json-inspector.css';
 const b = cn('ydb-query-explain-result');
-const EDITOR_OPTIONS = {
-    automaticLayout: true,
-    selectOnLineNumbers: true,
-    readOnly: true,
-    minimap: {
-        enabled: false,
-    },
-    wrappingIndent: 'indent',
-};
-const ExplainOptionIds = {
+const EXPLAIN_OPTIONS_IDS = {
     schema: 'schema',
     json: 'json',
     ast: 'ast',
+    simplified: 'simplified',
+};
+const EXPLAIN_OPTIONS_NAMES = {
+    [EXPLAIN_OPTIONS_IDS.schema]: i18n('action.schema'),
+    [EXPLAIN_OPTIONS_IDS.json]: i18n('action.json'),
+    [EXPLAIN_OPTIONS_IDS.ast]: i18n('action.ast'),
+    [EXPLAIN_OPTIONS_IDS.simplified]: i18n('action.explain-plan'),
 };
 const explainOptions = [
-    { value: ExplainOptionIds.schema, content: 'Schema' },
-    { value: ExplainOptionIds.json, content: 'JSON' },
-    { value: ExplainOptionIds.ast, content: 'AST' },
+    { value: EXPLAIN_OPTIONS_IDS.schema, content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.schema] },
+    {
+        value: EXPLAIN_OPTIONS_IDS.simplified,
+        content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.simplified],
+    },
+    { value: EXPLAIN_OPTIONS_IDS.json, content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.json] },
+    { value: EXPLAIN_OPTIONS_IDS.ast, content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.ast] },
 ];
-function GraphRoot(props) {
-    const paranoid = React.useRef();
-    const { data, opts, shapes, theme } = props;
-    React.useEffect(() => {
-        const graphRoot = document.getElementById('graphRoot');
-        if (!graphRoot) {
-            throw new Error("Can't find element with id #graphRoot");
-        }
-        graphRoot.innerHTML = '';
-        paranoid.current = getTopology('graphRoot', data, opts, shapes);
-        paranoid.current.render();
-        return () => {
-            paranoid.current = undefined;
-        };
-    }, [theme]);
-    React.useEffect(() => {
-        var _a, _b;
-        (_b = (_a = paranoid.current) === null || _a === void 0 ? void 0 : _a.updateData) === null || _b === void 0 ? void 0 : _b.call(_a, props.data);
-    }, [props.data]);
-    return _jsx("div", { id: "graphRoot", style: { height: '100vh' } });
-}
-export function ExplainResult(props) {
+export function ExplainResult({ explain, ast, theme, error, loading, onCollapseResults, onExpandResults, isResultsCollapsed, simplifiedPlan, }) {
     const dispatch = useTypedDispatch();
-    const [activeOption, setActiveOption] = React.useState(ExplainOptionIds.schema);
-    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+    const [activeOption, setActiveOption] = React.useState(EXPLAIN_OPTIONS_IDS.schema);
+    const [isPending, startTransition] = React.useTransition();
     React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
     }, [dispatch]);
-    const onSelectOption = (tabId) => {
-        setActiveOption(tabId);
-    };
-    const renderLoader = () => {
-        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
-    };
     const renderStub = () => {
-        return (_jsx("div", { className: b('text-message'), children: `There is no ${activeOption} for the request` }));
-    };
-    const hasContent = () => {
-        var _a, _b;
-        switch (activeOption) {
-            case ExplainOptionIds.schema:
-                return Boolean((_b = (_a = props.explain) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.length);
-            case ExplainOptionIds.json:
-                return Boolean(props.explain);
-            case ExplainOptionIds.ast:
-                return Boolean(props.ast);
-            default:
-                return false;
-        }
-    };
-    const renderTextExplain = () => {
-        var _a;
-        const content = (_jsx(JSONTree, { data: (_a = props.explain) === null || _a === void 0 ? void 0 : _a.pristine, isExpanded: () => true, className: b('inspector'), searchOptions: {
-                debounceTime: 300,
-            } }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
-    };
-    const renderAstExplain = () => {
-        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", theme: `vs-${props.theme}` }) }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
-    };
-    const renderGraph = () => {
-        const { explain = {}, theme } = props;
-        const { links, nodes, version } = explain;
-        const isSupportedVersion = version === explainVersions.v2;
-        const isEnoughDataForGraph = links && nodes && nodes.length;
-        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", { className: b('explain-canvas-container', {
-                hidden: activeOption !== ExplainOptionIds.schema,
-            }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
-                    renderNodeTitle: renderExplainNode,
-                    textOverflow: 'normal',
-                    initialZoomFitsCanvas: true,
-                }, shapes: {
-                    node: getYdbPlanNodeShape,
-                } }) })) : null;
-        return (_jsxs(React.Fragment, { children: [!isFullscreen && content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
-    };
-    const renderError = () => {
-        return _jsx("div", { className: b('text-message'), children: parseQueryErrorToString(props.error) });
+        return (_jsx("div", { className: b('text-message'), children: i18n('description.empty-result', {
+                activeOption: EXPLAIN_OPTIONS_NAMES[activeOption],
+            }) }));
     };
     const renderContent = () => {
-        const { error, loading } = props;
-        if (loading) {
-            return renderLoader();
-        }
+        var _a;
         if (error) {
-            return renderError();
-        }
-        if (!hasContent()) {
-            return renderStub();
+            return _jsx("div", { className: b('text-message'), children: parseQueryErrorToString(error) });
         }
         switch (activeOption) {
-            case ExplainOptionIds.json: {
-                return renderTextExplain();
+            case EXPLAIN_OPTIONS_IDS.json: {
+                if (!(explain === null || explain === void 0 ? void 0 : explain.pristine)) {
+                    return renderStub();
+                }
+                return _jsx(TextExplain, { explain: explain.pristine });
+            }
+            case EXPLAIN_OPTIONS_IDS.ast: {
+                if (!ast) {
+                    return renderStub();
+                }
+                return _jsx(Ast, { ast: ast, theme: theme });
             }
-            case ExplainOptionIds.ast: {
-                return renderAstExplain();
+            case EXPLAIN_OPTIONS_IDS.schema: {
+                if (!((_a = explain === null || explain === void 0 ? void 0 : explain.nodes) === null || _a === void 0 ? void 0 : _a.length)) {
+                    return renderStub();
+                }
+                return _jsx(Graph, { theme: theme, explain: explain });
             }
-            case ExplainOptionIds.schema: {
-                return renderGraph();
+            case EXPLAIN_OPTIONS_IDS.simplified: {
+                if (!(simplifiedPlan === null || simplifiedPlan === void 0 ? void 0 : simplifiedPlan.length)) {
+                    return renderStub();
+                }
+                return _jsx(SimplifiedPlan, { plan: simplifiedPlan });
             }
             default:
                 return null;
         }
     };
-    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('controls'), children: !props.loading && (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: props.error }), !props.error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: onSelectOption })] }))] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(props.error) || !hasContent() }), _jsx(PaneVisibilityToggleButtons, { onCollapse: props.onCollapseResults, onExpand: props.onExpandResults, isCollapsed: props.isResultsCollapsed, initialDirection: "bottom" })] })] })) }), _jsx("div", { className: b('result'), children: renderContent() })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('controls'), children: !loading && (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), !error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: (tabId) => {
+                                                startTransition(() => setActiveOption(tabId));
+                                            } })] }))] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] })) }), _jsx(QuerySettingsBanner, {}), _jsx(LoaderWrapper, { loading: loading || isPending, children: _jsx(Fullscreen, { className: b('result'), children: renderContent() }) })] }));
 }