ydb-embedded-ui 6.10.1 → 6.10.3

package/README.md

@@ -12,8 +12,8 @@ You can preview working UI using YDB docker image. It will be UI with the latest
 Run on a machine with Docker installed:
 
 ```
-docker pull cr.yandex/yc/yandex-docker-local-ydb
-docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
+docker pull ghcr.io/ydb-platform/local-ydb:nightly
+docker run -dp 8765:8765 ghcr.io/ydb-platform/local-ydb:nightly
 ```
 
 Open http://localhost:8765 to view it in the browser.
@@ -25,7 +25,7 @@ Open http://localhost:8765 to view it in the browser.
    docker run --rm -ti --name ydb-local -h localhost \
       -p 8765:8765 \
       -e MON_PORT=8765 \
-      cr.yandex/yc/yandex-docker-local-ydb:latest
+      ghcr.io/ydb-platform/local-ydb:nightly
    ```
 2. Install dependencies with `npm ci`
 3. Run the frontend app in the development mode, via invoking `npm run dev`
@@ -38,11 +38,8 @@ For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
 
 [Docs on YDB docker images](https://ydb.tech/en/docs/getting_started/self_hosted/ydb_docker)
 
-Image `cr.yandex/yc/yandex-docker-local-ydb` corresponds to `:latest` tag. It's the latest stable ydb version.
-
-To test new features, you can use ydb version that is currently in testing mode with `cr.yandex/yc/yandex-docker-local-ydb:edge` image
-or use a build from `main` brunch with `ghcr.io/ydb-platform/local-ydb:nightly` image.
-Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
+To test new features, you can use ydb version built from `main` brunch with `ghcr.io/ydb-platform/local-ydb:nightly` image.
+Also you can set specific version like `ghcr.io/ydb-platform/local-ydb:24.1`
 
 ### Custom configuration in dev mode with .env file
 
@@ -105,7 +102,7 @@ npm run test:e2e
 
 ### CI
 
-E2E tests are run in CI in `e2e_tests` job. Tests run on Playwright `webServer` (it is started with `npm run dev`), `webServer` uses docker container `cr.yandex/yc/yandex-docker-local-ydb` as backend.
+E2E tests are run in CI in `e2e_tests` job. Tests run on Playwright `webServer` (it is started with `npm run dev`), `webServer` uses docker container `ghcr.io/ydb-platform/local-ydb:nightly` as backend.
 
 ## Making a production bundle.
 
@@ -118,7 +115,7 @@ To test production bundle with latest YDB backend release, do the following:
 
 1. Install dependencies with `npm ci`
 2. Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
-3. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/content/monitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
+3. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/content/monitoring ghcr.io/ydb-platform/local-ydb:nightly`
 4. Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.
 
 ### Testing production bundle with specific cluster host

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -6,7 +6,7 @@ import { Button, Card, Icon } from '@gravity-ui/uikit';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { hotKeysApi } from '../../../../store/reducers/hotKeys/hotKeys';
-import { schemaApi } from '../../../../store/reducers/schema/schema';
+import { useGetSchemaQuery } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDEN_KEY } from '../../../../utils/constants';
 import { useSetting } from '../../../../utils/hooks';
@@ -41,8 +41,7 @@ export function HotKeys({ path }) {
     var _a, _b;
     const { currentData: data, isFetching, error } = hotKeysApi.useGetHotKeysQuery({ path });
     const loading = isFetching && data === undefined;
-    const { currentData: schemaData, isFetching: schemaIsFetching } = schemaApi.endpoints.getSchema.useQueryState({ path });
-    const schemaLoading = schemaIsFetching && schemaData === undefined;
+    const { data: schemaData, isLoading: schemaLoading } = useGetSchemaQuery({ path });
     const keyColumnsIds = (_b = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.PathDescription) === null || _a === void 0 ? void 0 : _a.Table) === null || _b === void 0 ? void 0 : _b.KeyColumnNames;
     const tableColumns = React.useMemo(() => {
         return getHotKeysColumns(keyColumnsIds);

package/dist/containers/Tenant/Diagnostics/Overview/Overview.js

@@ -4,25 +4,31 @@ import { shallowEqual } from 'react-redux';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { TableIndexInfo } from '../../../../components/InfoViewer/schemaInfo';
 import { Loader } from '../../../../components/Loader';
-import { olapApi } from '../../../../store/reducers/olapStats';
 import { overviewApi } from '../../../../store/reducers/overview/overview';
-import { schemaApi, selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
+import { selectSchemaMergedChildrenPaths, useGetSchemaQuery, } from '../../../../store/reducers/schema/schema';
 import { EPathType } from '../../../../types/api/schema';
 import { useAutoRefreshInterval, useTypedSelector } from '../../../../utils/hooks';
 import { ExternalDataSourceInfo } from '../../Info/ExternalDataSource/ExternalDataSource';
 import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
 import { ViewInfo } from '../../Info/View/View';
-import { isColumnEntityType, isEntityWithMergedImplementation, isTableType, } from '../../utils/schema';
+import { isEntityWithMergedImplementation } from '../../utils/schema';
 import { AsyncReplicationInfo } from './AsyncReplicationInfo';
 import { ChangefeedInfo } from './ChangefeedInfo';
 import { TableInfo } from './TableInfo';
 import { TopicInfo } from './TopicInfo';
 function Overview({ type, path }) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const olapParams = isTableType(type) && isColumnEntityType(type) ? { path } : skipToken;
-    const { currentData: olapData, isFetching: olapIsFetching } = olapApi.useGetOlapStatsQuery(olapParams, { pollingInterval: autoRefreshInterval });
-    const olapStatsLoading = olapIsFetching && olapData === undefined;
-    const { result: olapStats } = olapData || { result: undefined };
+    // FIXME: The request is too heavy, stats table may have millions of items
+    // Disabled until fixed
+    // https://github.com/ydb-platform/ydb-embedded-ui/issues/907
+    // https://github.com/ydb-platform/ydb-embedded-ui/issues/908
+    // const olapParams = isTableType(type) && isColumnEntityType(type) ? {path} : skipToken;
+    // const {currentData: olapData, isFetching: olapIsFetching} = olapApi.useGetOlapStatsQuery(
+    //     olapParams,
+    //     {pollingInterval: autoRefreshInterval},
+    // );
+    // const olapStatsLoading = olapIsFetching && olapData === undefined;
+    // const {result: olapStats} = olapData || {result: undefined};
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
     // shallowEqual prevents rerenders when new schema data is loaded
     const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, path, type), shallowEqual);
@@ -38,8 +44,9 @@ function Overview({ type, path }) {
     });
     const overviewLoading = isFetching && currentData === undefined;
     const { data: rawData, additionalData } = currentData || {};
-    const { error: schemaError } = schemaApi.endpoints.getSchema.useQueryState({ path });
-    const entityLoading = overviewLoading || olapStatsLoading;
+    const { error: schemaError } = useGetSchemaQuery({ path });
+    // overviewLoading || olapStatsLoading
+    const entityLoading = overviewLoading;
     const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
     const renderContent = () => {
         var _a;
@@ -65,7 +72,7 @@ function Overview({ type, path }) {
             [EPathType.EPathTypeView]: () => _jsx(ViewInfo, { data: data }),
             [EPathType.EPathTypeReplication]: () => _jsx(AsyncReplicationInfo, { data: data }),
         };
-        return ((type && ((_a = pathTypeToComponent[type]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent))) || (_jsx(TableInfo, { data: data, type: type, olapStats: olapStats })));
+        return ((type && ((_a = pathTypeToComponent[type]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent))) || (_jsx(TableInfo, { data: data, type: type })));
     };
     if (entityLoading || entityNotReady) {
         return _jsx(Loader, { size: "m" });

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.js

@@ -9,6 +9,6 @@ import './TableInfo.scss';
 const b = cn('ydb-diagnostics-table-info');
 export const TableInfo = ({ data, type, olapStats }) => {
     const title = _jsx(EntityTitle, { data: data === null || data === void 0 ? void 0 : data.PathDescription });
-    const { generalInfo = [], tableStatsInfo = [], tabletMetricsInfo = [], partitionConfigInfo = [], } = React.useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
-    return (_jsxs("div", { className: b(), children: [_jsx(InfoViewer, { info: generalInfo, title: title, className: b('info-block'), renderEmptyState: () => _jsx("div", { className: b('title'), children: title }) }), _jsxs("div", { className: b('row'), children: [_jsx("div", { className: b('col'), children: tableStatsInfo.map((info, index) => (_jsx(InfoViewer, { info: info, title: index === 0 ? i18n('tableStats') : undefined, className: b('info-block'), renderEmptyState: () => null }, index))) }), tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (_jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: tabletMetricsInfo, title: i18n('tabletMetrics'), className: b('info-block'), renderEmptyState: () => null }), _jsx(InfoViewer, { info: partitionConfigInfo, title: i18n('partitionConfig'), className: b('info-block'), renderEmptyState: () => null })] })) : null] })] }));
+    const { generalInfo, tableStatsInfo, tabletMetricsInfo = [], partitionConfigInfo = [], } = React.useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
+    return (_jsxs("div", { className: b(), children: [_jsx(InfoViewer, { info: generalInfo, title: title, className: b('info-block'), renderEmptyState: () => _jsx("div", { className: b('title'), children: title }) }), _jsxs("div", { className: b('row'), children: [tableStatsInfo ? (_jsx("div", { className: b('col'), children: tableStatsInfo.map((info, index) => (_jsx(InfoViewer, { info: info, title: index === 0 ? i18n('tableStats') : undefined, className: b('info-block'), renderEmptyState: () => null }, index))) })) : null, tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (_jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: tabletMetricsInfo, title: i18n('tabletMetrics'), className: b('info-block'), renderEmptyState: () => null }), _jsx(InfoViewer, { info: partitionConfigInfo, title: i18n('partitionConfig'), className: b('info-block'), renderEmptyState: () => null })] })) : null] })] }));
 };

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.d.ts

@@ -10,7 +10,7 @@ export declare const prepareTableInfo: (data?: TEvDescribeSchemeResult, type?: E
     partitionConfigInfo?: undefined;
 } | {
     generalInfo: InfoViewerItem[];
-    tableStatsInfo: InfoViewerItem[][];
+    tableStatsInfo: InfoViewerItem[][] | undefined;
     tabletMetricsInfo: InfoViewerItem[];
     partitionConfigInfo: InfoViewerItem[];
 };

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.js

@@ -120,7 +120,9 @@ export const prepareTableInfo = (data, type, olapStats) => {
     // There is no TableStats and TabletMetrics for ColumnTables inside ColumnStore
     // Therefore we parse olapStats
     if (type === EPathType.EPathTypeColumnTable && isInStoreColumnTable(ColumnTableDescription)) {
-        tableStatsInfo = [prepareOlapStats(olapStats)];
+        if (olapStats) {
+            tableStatsInfo = [prepareOlapStats(olapStats)];
+        }
     }
     else {
         tableStatsInfo = [

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

@@ -13,7 +13,7 @@ import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
 import { Loader } from '../../../components/Loader';
 import SplitPane from '../../../components/SplitPane';
 import routes, { createExternalUILink, createHref } from '../../../routes';
-import { schemaApi, setShowPreview } from '../../../store/reducers/schema/schema';
+import { setShowPreview, useGetSchemaQuery } 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 { EPathSubType, EPathType } from '../../../types/api/schema';
@@ -48,7 +48,7 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
-    const { currentData: currentObjectData } = schemaApi.endpoints.getSchema.useQueryState({ path });
+    const { data: currentObjectData } = useGetSchemaQuery({ path });
     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);
@@ -255,12 +255,12 @@ export function ObjectSummary({ type, subType, tenantName, path, onCollapseSumma
 }
 function ObjectTree({ tenantName, path }) {
     var _a;
-    const { currentData: tenantData = {}, isFetching } = schemaApi.useGetSchemaQuery({
+    const { data: tenantData = {}, isLoading } = useGetSchemaQuery({
         path: 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);
-    if (!pathData && isFetching) {
+    if (!pathData && isLoading) {
         // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
         return (_jsx("div", { children: _jsx(Loader, {}) }));
     }

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

@@ -47,12 +47,8 @@
     &__inspector {
         overflow-y: auto;
 
-        width: 100%;
         padding: 15px 20px;
         @include json-tree-styles();
-        & .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_composite {
-            max-width: calc(100% - 50px);
-        }
 
         &_fullscreen {
             padding: 10px;

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.js

@@ -20,13 +20,23 @@ export function SchemaTree(props) {
     const [parentPath, setParentPath] = React.useState('');
     const [schemaTreeKey, setSchemaTreeKey] = React.useState('');
     const fetchPath = async (path) => {
-        const promise = dispatch(schemaApi.endpoints.getSchema.initiate({ path }, { forceRefetch: true }));
-        const { data } = await promise;
-        promise.unsubscribe();
-        if (!data) {
+        let schemaData;
+        do {
+            const promise = dispatch(schemaApi.endpoints.getSchema.initiate({ path }, { forceRefetch: true }));
+            const { data, originalArgs } = await promise;
+            promise.unsubscribe();
+            // Check if the result from the current request is received. rtk-query may skip the current request and
+            // return data from a parallel request, due to the same cache key.
+            if ((originalArgs === null || originalArgs === void 0 ? void 0 : originalArgs.path) === path) {
+                schemaData = data === null || data === void 0 ? void 0 : data[path];
+                break;
+            }
+            // eslint-disable-next-line no-constant-condition
+        } while (true);
+        if (!schemaData) {
             throw new Error(`no describe data about path ${path}`);
         }
-        const { PathDescription: { Children = [] } = {} } = data;
+        const { PathDescription: { Children = [] } = {} } = schemaData;
         const childItems = Children.map((childData) => {
             const { Name = '', PathType, PathSubType } = childData;
             return {

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -4,7 +4,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
-import { schemaApi } from '../../../../store/reducers/schema/schema';
+import { useGetSchemaQuery } from '../../../../store/reducers/schema/schema';
 import { viewSchemaApi } from '../../../../store/reducers/viewSchema/viewSchema';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
 import { isColumnEntityType, isExternalTableType, isRowTableType, isViewType, } from '../../utils/schema';
@@ -13,10 +13,7 @@ import { prepareSchemaData, prepareViewSchema } from './prepareData';
 import { b } from './shared';
 import './SchemaViewer.scss';
 export const SchemaViewer = ({ type, path, tenantName, extended = false }) => {
-    const { currentData: schemaData, isFetching } = schemaApi.endpoints.getSchema.useQueryState({
-        path,
-    });
-    const loading = isFetching && schemaData === undefined;
+    const { data: schemaData, isLoading: loading } = useGetSchemaQuery({ path });
     const viewSchemaRequestParams = isViewType(type) ? { path, database: tenantName } : skipToken;
     const { data: viewColumnsData, isLoading: isViewSchemaLoading } = viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams);
     const tableData = React.useMemo(() => {

package/dist/containers/Tenant/Tenant.js

@@ -6,7 +6,7 @@ import { AccessDenied } from '../../components/Errors/403';
 import { Loader } from '../../components/Loader';
 import SplitPane from '../../components/SplitPane';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { schemaApi } from '../../store/reducers/schema/schema';
+import { useGetSchemaQuery } from '../../store/reducers/schema/schema';
 import { cn } from '../../utils/cn';
 import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
 import { useTypedDispatch } from '../../utils/hooks';
@@ -47,7 +47,7 @@ export function Tenant(props) {
         dispatch(setHeaderBreadcrumbs('tenant', { tenantName }));
     }, [tenantName, dispatch]);
     const path = schema !== null && schema !== void 0 ? schema : tenantName;
-    const { currentData: currentItem, error, isLoading, } = schemaApi.useGetSchemaQuery({ path }, { refetchOnMountOrArgChange: true });
+    const { data: currentItem, error, isLoading } = useGetSchemaQuery({ path });
     const { PathType: currentPathType, PathSubType: currentPathSubType } = ((_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.PathDescription) === null || _a === void 0 ? void 0 : _a.Self) || {};
     let showBlockingError = false;
     if (error && typeof error === 'object' && 'status' in error) {

package/dist/store/reducers/schema/schema.d.ts

@@ -21,11 +21,22 @@ export declare const schemaApi: import("@reduxjs/toolkit/query").Api<import("@re
     }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "All", unknown, "api">;
     getSchema: import("@reduxjs/toolkit/query").QueryDefinition<{
         path: string;
-    }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "All", TEvDescribeSchemeResult & {
-        partial?: boolean;
+    }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "All", {
+        [path: string]: TEvDescribeSchemeResult & {
+            partial?: boolean;
+        };
     }, "api">;
 }, "api", "All", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
 export declare const selectSchemaMergedChildrenPaths: Selector<RootState, string[] | undefined, [
     string | undefined,
     EPathType | undefined
 ]>;
+export declare function useGetSchemaQuery({ path }: {
+    path: string;
+}): {
+    data: (TEvDescribeSchemeResult & {
+        partial?: boolean;
+    }) | undefined;
+    isLoading: boolean;
+    error: unknown;
+};

package/dist/store/reducers/schema/schema.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { createSelector } from '@reduxjs/toolkit';
 import { isEntityWithMergedImplementation } from '../../../containers/Tenant/utils/schema';
 import { api } from '../api';
@@ -44,42 +45,44 @@ export const schemaApi = api.injectEndpoints({
             queryFn: async ({ path }, { signal }) => {
                 try {
                     const data = await window.api.getSchema({ path }, { signal });
-                    return { data: data !== null && data !== void 0 ? data : {} };
+                    return { data: data ? { [path]: data, ...getSchemaChildren(data) } : {} };
                 }
                 catch (error) {
                     return { error };
                 }
             },
             keepUnusedDataFor: Infinity,
-            forceRefetch: ({ endpointState }) => {
-                const data = endpointState === null || endpointState === void 0 ? void 0 : endpointState.data;
-                if (data && typeof data === 'object' && 'partial' in data && data.partial) {
-                    return true;
-                }
-                return false;
+            serializeQueryArgs: ({ queryArgs: { path } }) => {
+                const parts = path.split('/');
+                return { path: parts[0] || parts[1] };
             },
-            onQueryStarted: async ({ path }, { dispatch, getState, queryFulfilled }) => {
-                const { data } = await queryFulfilled;
+            merge: (existing, incoming, { arg: { path } }) => {
+                const { [path]: data, ...children } = incoming;
                 if (data) {
-                    const state = getState();
-                    const { PathDescription: { Children = [] } = {} } = data;
-                    for (const child of Children) {
-                        const { Name = '' } = child;
-                        const childPath = `${path}/${Name}`;
-                        const cachedData = schemaApi.endpoints.getSchema.select({ path: childPath })(state).data;
-                        if (!cachedData) {
-                            // not full data, but it contains PathType, which ensures seamless switch between nodes
-                            dispatch(schemaApi.util.upsertQueryData('getSchema', { path: childPath }, { PathDescription: { Self: child }, partial: true }));
-                        }
-                    }
+                    return {
+                        ...children,
+                        ...existing,
+                        [path]: data,
+                    };
                 }
+                return existing;
             },
         }),
     }),
     overrideExisting: 'throw',
 });
+function getSchemaChildren(data) {
+    const children = {};
+    const { PathDescription: { Children = [] } = {}, Path: path } = data;
+    for (const child of Children) {
+        const { Name = '' } = child;
+        const childPath = `${path}/${Name}`;
+        children[childPath] = { PathDescription: { Self: child }, Path: childPath, partial: true };
+    }
+    return children;
+}
 const getSchemaSelector = createSelector((path) => path, (path) => schemaApi.endpoints.getSchema.select({ path }));
-const selectGetSchema = createSelector((state) => state, (_state, path) => getSchemaSelector(path), (state, selectTabletsInfo) => selectTabletsInfo(state).data);
+const selectGetSchema = createSelector((state) => state, (_state, path) => path, (_state, path) => getSchemaSelector(path), (state, path, selectTabletsInfo) => { var _a; return (_a = selectTabletsInfo(state).data) === null || _a === void 0 ? void 0 : _a[path]; });
 const selectSchemaChildren = (state, path) => { var _a, _b; return (_b = (_a = selectGetSchema(state, path)) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Children; };
 export const selectSchemaMergedChildrenPaths = createSelector([
     (_, path) => path,
@@ -90,3 +93,15 @@ export const selectSchemaMergedChildrenPaths = createSelector([
         ? children === null || children === void 0 ? void 0 : children.map(({ Name }) => path + '/' + Name)
         : undefined;
 });
+export function useGetSchemaQuery({ path }) {
+    const { currentData, isFetching, error, refetch } = schemaApi.useGetSchemaQuery({ path });
+    const data = currentData === null || currentData === void 0 ? void 0 : currentData[path];
+    const isLoading = isFetching && data === undefined;
+    const shouldLoad = !isLoading && ((!data && !error) || (data === null || data === void 0 ? void 0 : data.partial));
+    React.useEffect(() => {
+        if (shouldLoad) {
+            refetch();
+        }
+    }, [refetch, path, shouldLoad]);
+    return { data, isLoading, error };
+}

package/dist/styles/mixins.scss

@@ -196,6 +196,10 @@
 }
 
 @mixin json-tree-styles {
+    width: 100%;
+
+    word-wrap: break-word;
+
     // stylelint-disable
     font-family: var(--g-font-family-monospace) !important;
     font-size: var(--g-text-code-1-font-size) !important;
@@ -276,4 +280,8 @@
             color: var(--g-color-text-primary);
         }
     }
+
+    & .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_composite {
+        max-width: calc(100% - 50px);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.10.1",
+  "version": "6.10.3",
   "files": [
     "dist"
   ],