ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.d.ts

@@ -2,7 +2,7 @@ import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
 import './ExternalDataSource.scss';
 export declare const ExternalDataSourceInfo: ({ data }: {
     data?: TEvDescribeSchemeResult | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const ExternalDataSourceSummary: ({ data }: {
     data?: TEvDescribeSchemeResult | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { useTypedSelector } from '../../../../utils/hooks';
-import { InfoViewer } from '../../../../components/InfoViewer';
-import { formatCommonItem } from '../../../../components/InfoViewer/formatters';
 import { EntityStatus } from '../../../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { InfoViewer } from '../../../../components/InfoViewer';
+import { formatCommonItem } from '../../../../components/InfoViewer/formatters';
+import { cn } from '../../../../utils/cn';
+import { useTypedSelector } from '../../../../utils/hooks';
 import { getEntityName } from '../../utils';
 import i18n from '../i18n';
 import './ExternalDataSource.scss';
-const b = block('ydb-external-data-source-info');
+const b = cn('ydb-external-data-source-info');
 const prepareExternalDataSourceSummary = (data) => {
     var _a, _b, _c, _d;
     return [
@@ -43,7 +43,7 @@ const ExternalDataSource = ({ data, prepareData }) => {
         return _jsx(ResponseError, { error: schemaError });
     }
     if (!data) {
-        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
     return _jsx(InfoViewer, { title: entityName, info: prepareData(data) });
 };

package/dist/containers/Tenant/Info/ExternalTable/ExternalTable.d.ts

@@ -2,7 +2,7 @@ import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
 import './ExternalTable.scss';
 export declare const ExternalTableInfo: ({ data }: {
     data?: TEvDescribeSchemeResult | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const ExternalTableSummary: ({ data }: {
     data?: TEvDescribeSchemeResult | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/containers/Tenant/Info/ExternalTable/ExternalTable.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router';
-import block from 'bem-cn-lite';
-import { useTypedSelector } from '../../../../utils/hooks';
-import { createExternalUILink, parseQuery } from '../../../../routes';
-import { formatCommonItem } from '../../../../components/InfoViewer/formatters';
-import { InfoViewer } from '../../../../components/InfoViewer';
-import { LinkWithIcon } from '../../../../components/LinkWithIcon/LinkWithIcon';
 import { EntityStatus } from '../../../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { InfoViewer } from '../../../../components/InfoViewer';
+import { formatCommonItem } from '../../../../components/InfoViewer/formatters';
+import { LinkWithIcon } from '../../../../components/LinkWithIcon/LinkWithIcon';
+import { createExternalUILink, parseQuery } from '../../../../routes';
+import { cn } from '../../../../utils/cn';
+import { useTypedSelector } from '../../../../utils/hooks';
 import { getEntityName } from '../../utils';
 import i18n from '../i18n';
 import './ExternalTable.scss';
-const b = block('ydb-external-table-info');
+const b = cn('ydb-external-table-info');
 const prepareExternalTableSummary = (data, pathToDataSource) => {
     var _a, _b;
     const { CreateStep } = ((_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.Self) || {};
@@ -22,7 +22,7 @@ const prepareExternalTableSummary = (data, pathToDataSource) => {
         formatCommonItem('CreateStep', CreateStep),
         {
             label: i18n('external-objects.data-source'),
-            value: DataSourcePath && (_jsx("span", Object.assign({ title: DataSourcePath }, { children: _jsx(LinkWithIcon, { title: dataSourceName || '', url: pathToDataSource }) }))),
+            value: DataSourcePath && (_jsx("span", { title: DataSourcePath, children: _jsx(LinkWithIcon, { title: dataSourceName || '', url: pathToDataSource }) })),
         },
     ];
 };
@@ -48,7 +48,7 @@ const ExternalTable = ({ data, prepareData }) => {
         return _jsx(ResponseError, { error: schemaError });
     }
     if (!data) {
-        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
     return _jsx(InfoViewer, { title: entityName, info: prepareData(data, pathToDataSource) });
 };

package/dist/containers/Tenant/Info/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "external-objects.source-type" | "external-objects.data-source" | "external-objects.location" | "external-objects.auth-method" | "external-objects.auth-method.none" | "external-objects.auth-method.service-account", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Info/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../utils/i18n';
+import { registerKeysets } from '../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-tenant-objects-info';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
+import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../types/additionalProps';
 import type { EPathType } from '../../../types/api/schema';
-import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../../types/additionalProps';
 import './ObjectGeneral.scss';
 interface ObjectGeneralProps {
-    type: EPathType;
+    type?: EPathType;
     tenantName: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function ObjectGeneral(props: ObjectGeneralProps): JSX.Element | null;
+declare function ObjectGeneral(props: ObjectGeneralProps): import("react/jsx-runtime").JSX.Element | null;
 export default ObjectGeneral;

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLocation } from 'react-router';
-import cn from 'bem-cn-lite';
 import { useThemeValue } from '@gravity-ui/uikit';
+import { useLocation } from 'react-router';
+import { parseQuery } from '../../../routes';
 import { TENANT_PAGES_IDS } from '../../../store/reducers/tenant/constants';
-import { useSetting } from '../../../utils/hooks';
+import { cn } from '../../../utils/cn';
 import { TENANT_INITIAL_PAGE_KEY } from '../../../utils/constants';
-import { parseQuery } from '../../../routes';
-import { Query } from '../Query/Query';
+import { useSetting } from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
+import { Query } from '../Query/Query';
 import './ObjectGeneral.scss';
 const b = cn('object-general');
 function ObjectGeneral(props) {
@@ -32,7 +32,7 @@ function ObjectGeneral(props) {
         if (!tenantName) {
             return null;
         }
-        return _jsx("div", Object.assign({ className: b() }, { children: renderTabContent() }));
+        return _jsx("div", { className: b(), children: renderTabContent() });
     };
     return renderContent();
 }

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { EPathSubType, EPathType } from '../../../types/api/schema';
+import type { EPathSubType } from '../../../types/api/schema';
+import { EPathType } from '../../../types/api/schema';
 import './ObjectSummary.scss';
 interface ObjectSummaryProps {
     type?: EPathType;
@@ -8,5 +8,5 @@ interface ObjectSummaryProps {
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
 }
-export declare function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): JSX.Element | null;
+export declare function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { Button, Tabs } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
 import qs from 'qs';
-import React, { useEffect, useReducer } from 'react';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 import { ClipboardButton } from '../../../components/ClipboardButton';
@@ -16,19 +15,20 @@ import routes, { createHref } from '../../../routes';
 import { setShowPreview } from '../../../store/reducers/schema/schema';
 import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, TENANT_SUMMARY_TABS_IDS, } from '../../../store/reducers/tenant/constants';
 import { setQueryTab, setSummaryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
-import { EPathType, } from '../../../types/api/schema';
+import { 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 } from '../../../utils/dataFormatters/dataFormatters';
 import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import { Acl } from '../Acl/Acl';
-import i18n from '../i18n';
 import { ExternalDataSourceSummary } from '../Info/ExternalDataSource/ExternalDataSource';
 import { ExternalTableSummary } from '../Info/ExternalTable/ExternalTable';
 import { SchemaTree } from '../Schema/SchemaTree/SchemaTree';
 import { SchemaViewer } from '../Schema/SchemaViewer/SchemaViewer';
-import { TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB } from '../TenantPages';
+import { TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups } from '../TenantPages';
+import i18n from '../i18n';
 import { PaneVisibilityActionTypes, PaneVisibilityToggleButtons, paneVisibilityToggleReducerCreator, } from '../utils/paneVisibilityToggleHelpers';
-import { isColumnEntityType, isExternalTable, isIndexTable, isTableType } from '../utils/schema';
+import { isIndexTable, isTableType } from '../utils/schema';
 import './ObjectSummary.scss';
 const b = cn('object-summary');
 const getTenantCommonInfoState = () => {
@@ -39,30 +39,11 @@ const getTenantCommonInfoState = () => {
         collapsed,
     };
 };
-function prepareOlapTableSchema(tableSchema = {}) {
-    const { Name, Schema } = tableSchema;
-    if (Schema) {
-        const { Columns, KeyColumnNames } = Schema;
-        const KeyColumnIds = KeyColumnNames === null || KeyColumnNames === void 0 ? void 0 : KeyColumnNames.map((name) => {
-            const column = Columns === null || Columns === void 0 ? void 0 : Columns.find((el) => el.Name === name);
-            return column === null || column === void 0 ? void 0 : column.Id;
-        }).filter((id) => id !== undefined);
-        return {
-            Columns,
-            KeyColumnNames,
-            Name,
-            KeyColumnIds,
-        };
-    }
-    return {
-        Name,
-    };
-}
 export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c;
     const dispatch = useTypedDispatch();
-    const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED), undefined, getTenantCommonInfoState);
-    const { data, currentSchemaPath, currentSchema: currentItem = {}, loading: loadingSchema, } = useTypedSelector((state) => state.schema);
+    const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED), undefined, getTenantCommonInfoState);
+    const { data, currentSchemaPath, currentSchema: currentItem = {}, } = useTypedSelector((state) => state.schema);
     const { summaryTab = TENANT_SUMMARY_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
@@ -72,22 +53,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
     const pathData = tenantName ? (_b = (_a = data[tenantName.toString()]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self : undefined;
     const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
     const currentSchemaData = (_c = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _c === void 0 ? void 0 : _c.Self;
-    let keyColumnIds;
-    let columns;
-    if (isTableType(type) && isColumnEntityType(type)) {
-        const description = (_d = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _d === void 0 ? void 0 : _d.ColumnTableDescription;
-        const columnTableSchema = prepareOlapTableSchema(description);
-        keyColumnIds = columnTableSchema.KeyColumnIds;
-        columns = columnTableSchema.Columns;
-    }
-    else if (isExternalTable(type)) {
-        columns = (_f = (_e = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _e === void 0 ? void 0 : _e.ExternalTableDescription) === null || _f === void 0 ? void 0 : _f.Columns;
-    }
-    else {
-        keyColumnIds = (_h = (_g = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _g === void 0 ? void 0 : _g.Table) === null || _h === void 0 ? void 0 : _h.KeyColumnIds;
-        columns = (_k = (_j = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _j === void 0 ? void 0 : _j.Table) === null || _k === void 0 ? void 0 : _k.Columns;
-    }
-    useEffect(() => {
+    React.useEffect(() => {
         const isTable = isTableType(type);
         if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
             dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
@@ -96,10 +62,10 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
     const renderTabs = () => {
         const isTable = isTableType(type);
         const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
-        return (_jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", items: tabsItems, activeTab: summaryTab, wrapTo: ({ id }, node) => {
+        return (_jsx("div", { className: b('tabs'), children: _jsx(Tabs, { size: "l", items: tabsItems, activeTab: summaryTab, wrapTo: ({ id }, node) => {
                     const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { name: tenantName, [TenantTabsGroups.summaryTab]: id }));
-                    return (_jsx(Link, Object.assign({ to: path, className: b('tab') }, { children: node }), id));
-                }, allowNotSelected: true }) })));
+                    return (_jsx(Link, { to: path, className: b('tab'), children: node }, id));
+                }, allowNotSelected: true }) }));
     };
     const renderObjectOverview = () => {
         var _a;
@@ -128,7 +94,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
             }
             component = _jsx(InfoViewer, { info: [{ label: 'Create time', value: createTime }] });
         }
-        return _jsx("div", Object.assign({ className: b('overview-wrapper') }, { children: component }));
+        return component;
     };
     const renderLoader = () => {
         // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
@@ -140,7 +106,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
                 return _jsx(Acl, {});
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
-                return loadingSchema ? (renderLoader()) : (_jsx("div", Object.assign({ className: b('schema') }, { children: _jsx(SchemaViewer, { keyColumnIds: keyColumnIds, columns: columns, type: type }) })));
+                return (_jsx(SchemaViewer, { className: b('schema'), type: type, path: currentSchemaPath }));
             }
             default: {
                 return renderObjectOverview();
@@ -148,10 +114,10 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
         }
     };
     const renderTree = () => {
-        return (_jsxs("div", Object.assign({ className: b('tree-wrapper') }, { children: [_jsx("div", Object.assign({ className: b('tree-header') }, { children: i18n('summary.navigation') })), _jsx("div", Object.assign({ className: b('tree') }, { children: pathData && (_jsx(SchemaTree, { rootPath: tenantName, 
+        return (_jsxs("div", { className: b('tree-wrapper'), children: [_jsx("div", { className: b('tree-header'), children: i18n('summary.navigation') }), _jsx("div", { className: b('tree'), children: pathData && (_jsx(SchemaTree, { rootPath: tenantName, 
                         // for the root pathData.Name contains the same string as tenantName,
                         // but without the leading slash
-                        rootName: pathData.Name || String(tenantName), rootType: pathData.PathType, currentPath: currentSchemaPath })) }))] })));
+                        rootName: pathData.Name || String(tenantName), rootType: pathData.PathType, currentPath: currentSchemaPath })) })] }));
     };
     const onCollapseInfoHandler = () => {
         dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
@@ -169,7 +135,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
     };
     const renderCommonInfoControls = () => {
         const showPreview = isTableType(type) && !isIndexTable(subType);
-        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, Object.assign({ view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview') }, { children: _jsx(Icon, { name: "tablePreview", viewBox: '0 0 16 16', height: 16, width: 16 }) }))), currentSchemaPath && (_jsx(ClipboardButton, { text: currentSchemaPath, view: "flat-secondary", title: i18n('summary.copySchemaPath') })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
+        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, { view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview'), children: _jsx(Icon, { name: "tablePreview", viewBox: '0 0 16 16', height: 16, width: 16 }) })), currentSchemaPath && (_jsx(ClipboardButton, { text: currentSchemaPath, view: "flat-secondary", title: i18n('summary.copySchemaPath') })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
     };
     const renderEntityTypeBadge = () => {
         const { Status, Reason } = currentItem;
@@ -177,13 +143,13 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
         if (!type && Status && Reason) {
             message = `${Status}: ${Reason}`;
         }
-        return type ? (_jsx("div", Object.assign({ className: b('entity-type') }, { children: type.replace('EPathType', '') }))) : (_jsx("div", Object.assign({ className: b('entity-type', { error: true }) }, { children: _jsx(HelpPopover, { content: message, offset: { left: 0 } }) })));
+        return type ? (_jsx("div", { className: b('entity-type'), children: type.replace('EPathType', '') })) : (_jsx("div", { className: b('entity-type', { error: true }), children: _jsx(HelpPopover, { content: message, offset: { left: 0 } }) }));
     };
     const renderContent = () => {
         if (!tenantName) {
             return null;
         }
-        return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx("div", Object.assign({ className: b({ hidden: isCollapsed }) }, { children: _jsxs(SplitPane, Object.assign({ direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_TENANT_SUMMARY_KEY, onSplitStartDragAdditional: onSplitStartDragAdditional, triggerCollapse: commonInfoVisibilityState.triggerCollapse, triggerExpand: commonInfoVisibilityState.triggerExpand, minSize: [200, 52], collapsedSizes: [100, 0] }, { children: [currentSchemaPath ? renderTree() : renderLoader(), _jsxs("div", Object.assign({ className: b('info') }, { children: [_jsxs("div", Object.assign({ className: b('sticky-top') }, { children: [_jsxs("div", Object.assign({ className: b('info-header') }, { children: [_jsxs("div", Object.assign({ className: b('info-title') }, { children: [renderEntityTypeBadge(), _jsx("div", Object.assign({ className: b('path-name') }, { children: currentSchemaPath }))] })), _jsx("div", Object.assign({ className: b('info-controls') }, { children: renderCommonInfoControls() }))] })), renderTabs()] })), renderTabContent()] }))] })) })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseSummary, onExpand: onExpandSummary, isCollapsed: isCollapsed, initialDirection: "left", className: b('action-button') })] })));
+        return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b({ hidden: isCollapsed }), children: _jsxs(SplitPane, { direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_TENANT_SUMMARY_KEY, onSplitStartDragAdditional: onSplitStartDragAdditional, triggerCollapse: commonInfoVisibilityState.triggerCollapse, triggerExpand: commonInfoVisibilityState.triggerExpand, minSize: [200, 52], collapsedSizes: [100, 0], children: [currentSchemaPath ? renderTree() : renderLoader(), _jsxs("div", { className: b('info'), children: [_jsxs("div", { className: b('sticky-top'), children: [_jsxs("div", { className: b('info-header'), children: [_jsxs("div", { className: b('info-title'), children: [renderEntityTypeBadge(), _jsx("div", { className: b('path-name'), children: currentSchemaPath })] }), _jsx("div", { className: b('info-controls'), children: renderCommonInfoControls() })] }), renderTabs()] }), _jsx("div", { className: b('overview-wrapper'), children: renderTabContent() })] })] }) }), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseSummary, onExpand: onExpandSummary, isCollapsed: isCollapsed, initialDirection: "left", className: b('action-button') })] }));
     };
     return renderContent();
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IQueryResult, QueryErrorResponse } from '../../../../types/store/query';
 import './ExecuteResult.scss';
 interface ExecuteResultProps {
@@ -9,5 +8,5 @@ interface ExecuteResultProps {
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
 }
-export declare function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }: ExecuteResultProps): JSX.Element;
+export declare function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }: ExecuteResultProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { RadioButton, Tabs } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import React, { useEffect, useState } from 'react';
 import JSONTree from 'react-json-inspector';
 import { ClipboardButton } from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
@@ -11,6 +10,7 @@ import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatu
 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 { prepareQueryError } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
@@ -29,8 +29,8 @@ const resultOptions = [
 ];
 export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }) {
     var _a, _b, _c;
-    const [selectedResultSet, setSelectedResultSet] = useState(0);
-    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
+    const [selectedResultSet, setSelectedResultSet] = React.useState(0);
+    const [activeSection, setActiveSection] = React.useState(resultOptionsIds.result);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
     const resultsSetsCount = (_a = data === null || data === void 0 ? void 0 : data.resultSets) === null || _a === void 0 ? void 0 : _a.length;
@@ -39,7 +39,7 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
     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;
-    useEffect(() => {
+    React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
@@ -51,10 +51,10 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         return _jsx(QueryResultTable, { data: result, columns: columns, settings: { sortable: false } });
     };
     const renderContent = () => {
-        return (_jsxs(_Fragment, { children: [isMulti && resultsSetsCount > 1 && (_jsx("div", { children: _jsx(Tabs, { className: b('result-tabs'), size: "l", items: getArray(resultsSetsCount).map((item) => ({
+        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}`,
-                        })), activeTab: String(selectedResultSet), onSelectTab: (tabId) => setSelectedResultSet(Number(tabId)) }) })), _jsx("div", Object.assign({ className: b('result') }, { children: renderResultTable(currentResult, currentColumns) }))] }));
+                        })), activeTab: String(selectedResultSet), onSelectTab: (tabId) => setSelectedResultSet(Number(tabId)) }) })), _jsx("div", { className: b('result'), children: renderResultTable(currentResult, currentColumns) })] }));
     };
     const renderClipboardButton = () => {
         return (_jsx(ClipboardButton, { text: textResults, view: "flat-secondary", title: "Copy results", disabled: copyDisabled }));
@@ -63,11 +63,11 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         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", Object.assign({ className: b('inspector', { fullscreen: true }) }, { children: content })) }))] }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('inspector', { fullscreen: true }), children: content }) }))] }));
     };
     const renderResult = () => {
         const content = renderContent();
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('result-fullscreen-wrapper') }, { children: content })) }))] }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper'), children: content }) }))] }));
     };
     const renderIssues = () => {
         var _a;
@@ -76,16 +76,16 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         }
         if (typeof error === 'object' && ((_a = error.data) === null || _a === void 0 ? void 0 : _a.issues) && Array.isArray(error.data.issues)) {
             const content = _jsx(ResultIssues, { data: error.data });
-            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('result-fullscreen-wrapper', b('result')) }, { children: content })) }))] }));
+            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper', b('result')), children: content }) }))] }));
         }
         const parsedError = typeof error === 'string' ? error : prepareQueryError(error);
-        return _jsx("div", Object.assign({ className: b('error') }, { children: parsedError }));
+        return _jsx("div", { className: b('error'), children: parsedError });
     };
     const renderResultSection = () => {
         if (activeSection === resultOptionsIds.result && !error) {
             return renderResult();
         }
-        return (_jsxs("div", Object.assign({ className: b('result') }, { children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] })));
+        return (_jsxs("div", { className: b('result'), children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] }));
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsxs("div", Object.assign({ 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", Object.assign({ 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" })] })] }), renderResultSection()] }));
 }

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

@@ -1 +1 @@
-export function ExplainResult(props: any): JSX.Element;
+export function ExplainResult(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
-import cn from 'bem-cn-lite';
-import MonacoEditor from 'react-monaco-editor';
-import JSONTree from 'react-json-inspector';
-import 'react-json-inspector/json-inspector.css';
-import { TextOverflow, getYdbPlanNodeShape, getTopology } from '@gravity-ui/paranoid';
+import React from 'react';
+import { TextOverflow, getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
 import { Loader, RadioButton } from '@gravity-ui/uikit';
+import JSONTree from 'react-json-inspector';
 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 { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
 import { explainVersions } from '../../../../store/reducers/explainQuery';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
-import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco';
+import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
-import { renderExplainNode } from './utils';
+import { getColors, renderExplainNode } from './utils';
 import './ExplainResult.scss';
+import 'react-json-inspector/json-inspector.css';
 const b = cn('ydb-query-explain-result');
 const EDITOR_OPTIONS = {
     automaticLayout: true,
@@ -38,31 +38,21 @@ const explainOptions = [
     { value: ExplainOptionIds.ast, content: 'AST' },
 ];
 function GraphRoot(props) {
-    const paranoid = useRef();
+    const paranoid = React.useRef();
     const { data, opts, shapes, theme } = props;
-    const [componentTheme, updateComponentTheme] = useState(theme);
-    useEffect(() => {
-        updateComponentTheme(theme);
-    }, [theme]);
-    const render = () => {
-        paranoid.current = getTopology('graphRoot', data, opts, shapes);
-        paranoid.current.render();
-    };
-    useEffect(() => {
-        render();
-        return () => {
-            paranoid.current = undefined;
-        };
-    }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         const graphRoot = document.getElementById('graphRoot');
         if (!graphRoot) {
             throw new Error("Can't find element with id #graphRoot");
         }
         graphRoot.innerHTML = '';
-        render();
-    }, [componentTheme]);
-    useEffect(() => {
+        paranoid.current = getTopology('graphRoot', data, Object.assign(Object.assign({}, opts), { colors: getColors() }), 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]);
@@ -70,21 +60,21 @@ function GraphRoot(props) {
 }
 export function ExplainResult(props) {
     const dispatch = useTypedDispatch();
-    const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
+    const [activeOption, setActiveOption] = React.useState(ExplainOptionIds.schema);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
-    useEffect(() => {
+    React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
-    }, []);
+    }, [dispatch]);
     const onSelectOption = (tabId) => {
         setActiveOption(tabId);
     };
     const renderLoader = () => {
-        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
     };
     const renderStub = () => {
-        return (_jsx("div", Object.assign({ className: b('text-message') }, { children: `There is no ${activeOption} for the request` })));
+        return (_jsx("div", { className: b('text-message'), children: `There is no ${activeOption} for the request` }));
     };
     const hasContent = () => {
         var _a, _b;
@@ -107,7 +97,7 @@ export function ExplainResult(props) {
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderAstExplain = () => {
-        const content = (_jsx("div", Object.assign({ className: b('ast') }, { children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent" }) })));
+        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent" }) }));
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderGraph = () => {
@@ -115,15 +105,15 @@ export function ExplainResult(props) {
         const { links, nodes, version } = explain;
         const isSupportedVersion = version === explainVersions.v2;
         const isEnoughDataForGraph = links && nodes && nodes.length;
-        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", Object.assign({ className: b('explain-canvas-container', {
+        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", { className: b('explain-canvas-container', {
                 hidden: activeOption !== ExplainOptionIds.schema,
-            }) }, { children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
+            }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
                     renderNodeTitle: renderExplainNode,
                     textOverflow: TextOverflow.Normal,
                     initialZoomFitsCanvas: true,
                 }, shapes: {
                     node: getYdbPlanNodeShape,
-                } }) }))) : null;
+                } }) })) : null;
         return (_jsxs(React.Fragment, { children: [!isFullscreen && content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderError = () => {
@@ -136,7 +126,7 @@ export function ExplainResult(props) {
         else {
             message = error;
         }
-        return _jsx("div", Object.assign({ className: b('text-message') }, { children: message }));
+        return _jsx("div", { className: b('text-message'), children: message });
     };
     const renderContent = () => {
         const { error, loading, loadingAst } = props;
@@ -163,5 +153,5 @@ export function ExplainResult(props) {
                 return null;
         }
     };
-    return (_jsxs(React.Fragment, { children: [_jsx("div", Object.assign({ className: b('controls') }, { children: !props.loading && (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ 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", Object.assign({ 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", Object.assign({ className: b('result') }, { children: renderContent() }))] }));
+    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() })] }));
 }

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

@@ -1,2 +1,5 @@
 import type { GraphNode } from '@gravity-ui/paranoid';
 export declare const renderExplainNode: (node: GraphNode) => string;
+export declare function getColors(): {
+    getCommonColor: (name: string) => string;
+};