ydb-embedded-ui 2.4.1 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.1...v2.4.2) (2022-11-09)
+
+
+### Bug Fixes
+
+* **QueryExplain:** apply all node types ([06d26de](https://github.com/ydb-platform/ydb-embedded-ui/commit/06d26def15496f8e2de00d941b39bf6a68382f14))
+
 ## [2.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.0...v2.4.1) (2022-11-01)
 
 

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -1,11 +1,11 @@
 import {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useAutofetcher} from '../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {Search} from '../../../../components/Search';
 import {getDescribe, selectConsumers} from '../../../../store/reducers/describe';
 
@@ -28,7 +28,7 @@ export const Consumers = ({path}: ConsumersProps) => {
 
     useAutofetcher(fetchData, [path]);
 
-    const consumers = useSelector((state) => selectConsumers(state, path));
+    const consumers = useTypedSelector((state) => selectConsumers(state, path));
 
     const [consumersToRender, setConsumersToRender] = useState(consumers);
 

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx

@@ -1,16 +1,16 @@
 import {useCallback} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {Loader} from '@gravity-ui/uikit';
 
 import {SelfCheckResult} from '../../../../types/api/healthcheck';
+import {useTypedSelector, useAutofetcher} from '../../../../utils/hooks';
 import {
     getHealthcheckInfo,
     selectIssuesTreeById,
     selectIssuesTreesRoots,
 } from '../../../../store/reducers/healthcheckInfo';
-import {useAutofetcher} from '../../../../utils/hooks';
 
 import {Details} from './Details';
 import {Preview} from './Preview';
@@ -33,13 +33,15 @@ export const Healthcheck = (props: HealthcheckProps) => {
 
     const dispatch = useDispatch();
 
-    const {data, loading, wasLoaded, error} = useSelector((state: any) => state.healthcheckInfo);
+    const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
     const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
 
-    const issuesTreesRoots = useSelector(selectIssuesTreesRoots);
-    const expandedIssueTree = useSelector((state) => selectIssuesTreeById(state, expandedIssueId));
+    const issuesTreesRoots = useTypedSelector(selectIssuesTreesRoots);
+    const expandedIssueTree = useTypedSelector((state) =>
+        selectIssuesTreeById(state, expandedIssueId),
+    );
 
-    const {autorefresh} = useSelector((state: any) => state.schema);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
         dispatch(getHealthcheckInfo(tenant));

package/dist/store/getUrlData.ts

@@ -0,0 +1,27 @@
+import url from 'url';
+
+export const getUrlData = (href: string, singleClusterMode: boolean) => {
+    if (!singleClusterMode) {
+        const {backend, clusterName} = url.parse(href, true).query;
+        return {
+            basename: '/',
+            backend,
+            clusterName,
+        };
+    } else if (window.custom_backend) {
+        const {backend} = url.parse(href, true).query;
+        return {
+            basename: '/',
+            backend: backend || window.custom_backend,
+        };
+    } else {
+        const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];
+        const basenamePrefix = Boolean(parsedPrefix.length) && parsedPrefix[0];
+        const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/');
+
+        return {
+            basename,
+            backend: basenamePrefix || '',
+        };
+    }
+};

package/dist/store/index.js

@@ -1,47 +1,16 @@
 import {createStore, applyMiddleware, compose} from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import getLocationMiddleware from './state-url-mapping';
 import {createBrowserHistory} from 'history';
 import {listenForHistoryChange} from 'redux-location-state';
 
+import {getUrlData} from './getUrlData';
+import getLocationMiddleware from './state-url-mapping';
 import rootReducer from './reducers';
 
-import url from 'url';
-
-export const webVersion = window.web_version;
-
-export const customBackend = window.custom_backend;
-
-export const getUrlData = (href, singleClusterMode) => {
-    if (!singleClusterMode) {
-        const {backend, clusterName} = url.parse(href, true).query;
-        return {
-            basename: '/',
-            backend,
-            clusterName,
-        };
-    } else if (customBackend) {
-        const {backend} = url.parse(href, true).query;
-        return {
-            basename: '/',
-            backend: backend || window.custom_backend,
-        };
-    } else {
-        const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];
-        const basenamePrefix = Boolean(parsedPrefix.length) && parsedPrefix[0];
-        const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/');
-
-        return {
-            basename,
-            backend: basenamePrefix || '',
-        };
-    }
-};
+export let backend, basename, clusterName;
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-export let backend, basename, clusterName;
-
 function _configureStore(aRootReducer, history, singleClusterMode) {
     const {locationMiddleware, reducersWithLocation} = getLocationMiddleware(history, aRootReducer);
     const middlewares = applyMiddleware(thunkMiddleware, locationMiddleware);
@@ -51,7 +20,7 @@ function _configureStore(aRootReducer, history, singleClusterMode) {
     });
 }
 
-export default function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
+function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
     ({backend, basename, clusterName} = getUrlData(window.location.href, singleClusterMode));
     const history = createBrowserHistory({basename});
 
@@ -59,3 +28,10 @@ export default function configureStore(aRootReducer = rootReducer, singleCluster
     listenForHistoryChange(store, history);
     return {history, store};
 }
+
+export const webVersion = window.web_version;
+export const customBackend = window.custom_backend;
+
+export * from "./reducers"
+
+export default configureStore;

package/dist/store/reducers/describe.ts

@@ -1,16 +1,25 @@
-import {createSelector} from 'reselect';
+import {createSelector, Selector} from 'reselect';
+import {Reducer} from 'redux';
 
 import '../../services/api';
 import {TEvDescribeSchemeResult} from '../../types/api/schema';
 import {IConsumer} from '../../types/api/consumers';
+import {IDescribeRootStateSlice, IDescribeState} from '../../types/store/describe';
+import {IResponseError} from '../../types/api/error';
 import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
 
 const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
 
-const describe = (
-    state = {loading: false, wasLoaded: false, data: {}},
-    action: ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, unknown>,
-) => {
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+    data: {},
+};
+
+const describe: Reducer<
+    IDescribeState,
+    ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, IResponseError>
+> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_DESCRIBE.REQUEST: {
             return {
@@ -50,16 +59,21 @@ const describe = (
 };
 
 // Consumers selectors
-const selectConsumersNames = (state: any, path: string): string[] | undefined =>
-    state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
+const selectConsumersNames: Selector<IDescribeRootStateSlice, string[] | undefined, [string]> = (
+    state,
+    path,
+) => state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
 
-export const selectConsumers = createSelector(selectConsumersNames, (names = []): IConsumer[] => {
-    const consumers = names.map((name) => {
-        return {name};
-    });
+export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[]> = createSelector(
+    selectConsumersNames,
+    (names = []) => {
+        const consumers = names.map((name) => {
+            return {name};
+        });
 
-    return consumers;
-});
+        return consumers;
+    },
+);
 
 export function getDescribe({path}: {path: string}) {
     return createApiRequest({

package/dist/store/reducers/header.ts

@@ -1,10 +1,13 @@
+import {Reducer} from 'redux';
+
 const SET_HEADER = 'SET_HEADER';
 
+type IHeaderAction = ReturnType<typeof setHeader>;
 export type HeaderItemType = {text: string; link?: string};
 
 const initialState: HeaderItemType[] = [];
 
-const header = function (state = initialState, action: ReturnType<typeof setHeader>) {
+const header: Reducer<HeaderItemType[], IHeaderAction> = function (state = initialState, action) {
     switch (action.type) {
         case SET_HEADER:
             return action.data;

package/dist/store/reducers/healthcheckInfo.ts

@@ -2,10 +2,16 @@ import _flow from 'lodash/fp/flow';
 import _sortBy from 'lodash/fp/sortBy';
 import _uniqBy from 'lodash/fp/uniqBy';
 import _omit from 'lodash/omit';
-import {createSelector} from 'reselect';
-
-import {IIssuesTree} from '../../types/store/healthcheck';
+import {createSelector, Selector} from 'reselect';
+import {Reducer} from 'redux';
+
+import {
+    IHealthcheckInfoState,
+    IHealthcheckInfoRootStateSlice,
+    IIssuesTree,
+} from '../../types/store/healthcheck';
 import {HealthCheckAPIResponse, IssueLog, StatusFlag} from '../../types/api/healthcheck';
+import {IResponseError} from '../../types/api/error';
 
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
@@ -14,10 +20,10 @@ const FETCH_HEALTHCHECK = createRequestActionTypes('cluster', 'FETCH_HEALTHCHECK
 
 const initialState = {loading: false, wasLoaded: false};
 
-const healthcheckInfo = function (
-    state = initialState,
-    action: ApiRequestAction<typeof FETCH_HEALTHCHECK, HealthCheckAPIResponse, unknown>,
-) {
+const healthcheckInfo: Reducer<
+    IHealthcheckInfoState,
+    ApiRequestAction<typeof FETCH_HEALTHCHECK, HealthCheckAPIResponse, IResponseError>
+> = function (state = initialState, action) {
     switch (action.type) {
         case FETCH_HEALTHCHECK.REQUEST: {
             return {
@@ -60,7 +66,7 @@ const getReasonsForIssue = ({issue, data}: {issue: IssueLog; data: IssueLog[]})
     return data.filter((item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
 };
 
-const getRoots = (data: IssueLog[]) => {
+const getRoots = (data: IssueLog[]): IssueLog[] => {
     let roots = data.filter((item) => {
         return !data.find((issue) => issue.reason && issue.reason.indexOf(item.id) !== -1);
     });
@@ -95,22 +101,23 @@ const getInvertedConsequencesTree = ({
         : [];
 };
 
-const getIssuesLog = (state: any): IssueLog[] | undefined => state.healthcheckInfo.data?.issue_log;
+const getIssuesLog = (state: IHealthcheckInfoRootStateSlice) =>
+    state.healthcheckInfo.data?.issue_log;
 
-export const selectIssuesTreesRoots = createSelector(getIssuesLog, (issues = []) =>
-    getRoots(issues),
-);
+export const selectIssuesTreesRoots: Selector<IHealthcheckInfoRootStateSlice, IssueLog[]> =
+    createSelector(getIssuesLog, (issues = []) => getRoots(issues));
 
-export const selectIssuesTrees = createSelector(
-    [getIssuesLog, selectIssuesTreesRoots],
-    (data = [], roots = []) => {
+export const selectIssuesTrees: Selector<IHealthcheckInfoRootStateSlice, IIssuesTree[]> =
+    createSelector([getIssuesLog, selectIssuesTreesRoots], (data = [], roots = []) => {
         return getInvertedConsequencesTree({data, roots});
-    },
-);
+    });
 
-export const selectIssuesTreeById = createSelector(
-    [selectIssuesTrees, (_: any, id: string | undefined) => id],
-    (issuesTrees = [], id) => issuesTrees.find((issuesTree: IIssuesTree) => issuesTree.id === id),
+export const selectIssuesTreeById: Selector<
+    IHealthcheckInfoRootStateSlice,
+    IIssuesTree | undefined,
+    [string | undefined]
+> = createSelector([selectIssuesTrees, (_, id: string | undefined) => id], (issuesTrees = [], id) =>
+    issuesTrees.find((issuesTree) => issuesTree.id === id),
 );
 
 export function getHealthcheckInfo(database: string) {

package/dist/store/reducers/{index.js → index.ts}

@@ -34,10 +34,7 @@ import authentication from './authentication';
 import header from './header';
 import saveQuery from './saveQuery';
 import fullscreen from './fullscreen';
-
-function singleClusterMode(state = true) {
-    return state;
-}
+import singleClusterMode from './singleClusterMode';
 
 export const rootReducer = {
     singleClusterMode,
@@ -77,6 +74,11 @@ export const rootReducer = {
     fullscreen,
 };
 
-export default combineReducers({
+const combinedReducer = combineReducers({
     ...rootReducer,
 });
+
+export type IRootReducer = typeof combinedReducer;
+export type IRootState = ReturnType<IRootReducer>;
+
+export default combinedReducer;

package/dist/store/reducers/preview.ts

@@ -1,6 +1,6 @@
 import '../../services/api';
 
-import type {ErrorRepsonse, ExecuteActions} from '../../types/api/query';
+import type {ErrorResponse, ExecuteActions} from '../../types/api/query';
 import type {IQueryResult} from '../../types/store/query';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
@@ -16,7 +16,7 @@ const initialState = {
 
 const preview = (
     state = initialState,
-    action: ApiRequestAction<typeof SEND_QUERY, IQueryResult, ErrorRepsonse> | ReturnType<typeof setQueryOptions>,
+    action: ApiRequestAction<typeof SEND_QUERY, IQueryResult, ErrorResponse> | ReturnType<typeof setQueryOptions>,
 ) => {
     switch (action.type) {
         case SEND_QUERY.REQUEST: {

package/dist/store/reducers/saveQuery.ts

@@ -1,12 +1,14 @@
+import {Reducer} from 'redux';
+
 const SET_QUERY_NAME_TO_EDIT = 'SET_QUERY_NAME_TO_EDIT';
 const CLEAR_QUERY_NAME_TO_EDIT = 'CLEAR_QUERY_NAME_TO_EDIT';
 
+type IAction = ReturnType<typeof setQueryNameToEdit> | ReturnType<typeof clearQueryNameToEdit>;
+type ISaveQueryState = string | null;
+
 const initialState = null;
 
-const saveQuery = function (
-    state = initialState,
-    action: ReturnType<typeof setQueryNameToEdit> | ReturnType<typeof clearQueryNameToEdit>,
-) {
+const saveQuery: Reducer<ISaveQueryState, IAction> = function (state = initialState, action) {
     switch (action.type) {
         case SET_QUERY_NAME_TO_EDIT:
             return action.data;

package/dist/store/reducers/singleClusterMode.ts

@@ -0,0 +1,5 @@
+function singleClusterMode(state = true) {
+    return state;
+}
+
+export default singleClusterMode;

package/dist/types/api/error.ts

@@ -0,0 +1,4 @@
+export interface IResponseError {
+    status: number;
+    statusText: string;
+}

package/dist/types/api/query.ts

@@ -8,16 +8,16 @@ export interface CommonFields {
     ast?: AST;
     plan?: Plan;
     stats?: Stats;
-};
+}
 
 interface DeprecatedCommonFields {
     stats?: Stats;
 }
 
-export interface ErrorRepsonse {
+export interface ErrorResponse {
     error?: any;
     issues?: any;
-};
+}
 
 export type ExecuteActions = 'execute-script' | 'execute' | 'execute-scan' | undefined;
 export type ExplainActions = 'explain' | 'explain-ast';
@@ -34,7 +34,7 @@ type CellValue = string | number | null | undefined;
 
 export type KeyValueRow<T = CellValue> = {
     [key: string]: T;
-}
+};
 
 export type ArrayRow<T = CellValue> = Array<T>;
 
@@ -63,17 +63,15 @@ export type ExecuteYdbResponse = {
     result: KeyValueRow[];
 } & CommonFields;
 
-type ExecuteResponse<Schema extends Schemas> = 
+type ExecuteResponse<Schema extends Schemas> =
     | CommonFields // result can be undefined for queries like `insert into`
-    | (
-        Schema extends 'modern'
-            ? ExecuteModernResponse
-            : Schema extends 'ydb'
-                ? ExecuteYdbResponse
-                : Schema extends 'classic' | undefined
-                    ? ExecuteClassicResponse
-                    : unknown
-    );
+    | (Schema extends 'modern'
+          ? ExecuteModernResponse
+          : Schema extends 'ydb'
+            ? ExecuteYdbResponse
+            : Schema extends 'classic' | undefined
+                ? ExecuteClassicResponse
+                : unknown);
 
 // deprecated response from older versions, backward compatibility
 
@@ -92,8 +90,9 @@ export type DeprecatedExecuteResponseDeep = {
 // can be undefined for queries like `insert into`
 export type DeprecatedExecuteResponsePlain = DeprecatedExecuteResponseValue | undefined;
 
-export type DeprecatedExecuteResponse = DeprecatedExecuteResponseDeep | DeprecatedExecuteResponsePlain;
-
+export type DeprecatedExecuteResponse =
+    | DeprecatedExecuteResponseDeep
+    | DeprecatedExecuteResponsePlain;
 
 // ==== EXPLAIN ====
 
@@ -103,14 +102,12 @@ type ExplainResponse = CommonFields;
 
 // deprecated response from older versions, backward compatibility
 
-type DeprecatedExplainResponse<Action extends ExplainActions> = (
+type DeprecatedExplainResponse<Action extends ExplainActions> = 
     Action extends 'explain-ast'
         ? ({result: {ast: AST}} & Required<DeprecatedCommonFields>) | {ast: AST}
         : Action extends 'explain'
             ? ({result: Plan} & Required<DeprecatedCommonFields>) | Plan
-            : unknown
-);
-
+            : unknown;
 
 // ==== COMBINED API RESPONSE ====
 
@@ -124,15 +121,14 @@ export type QueryAPIExplainResponse<Action extends ExplainActions> =
     | DeprecatedExplainResponse<Action>
     | null;
 
-export type QueryAPIResponse<Action extends Actions, Schema extends Schemas = undefined> = (
+export type QueryAPIResponse<Action extends Actions, Schema extends Schemas = undefined> = 
     Action extends ExecuteActions
         ? QueryAPIExecuteResponse<Schema>
         : Action extends ExplainActions
             ? QueryAPIExplainResponse<Action>
-            : unknown
-);
+            : unknown;
 
-export type AnyExecuteResponse = 
+export type AnyExecuteResponse =
     | ExecuteModernResponse
     | ExecuteClassicResponse
     | ExecuteYdbResponse
@@ -146,13 +142,11 @@ export type DeepExecuteResponse =
     | ExecuteYdbResponse
     | DeprecatedExecuteResponseDeep;
 
-export type AnyExplainResponse = 
+export type AnyExplainResponse =
     | ExplainResponse
     | CommonFields
     | DeprecatedExplainResponse<'explain'>
     | DeprecatedExplainResponse<'explain-ast'>
     | null;
 
-export type AnyResponse =
-    | AnyExecuteResponse
-    | AnyExplainResponse;
+export type AnyResponse = AnyExecuteResponse | AnyExplainResponse;

package/dist/types/store/describe.ts

@@ -0,0 +1,14 @@
+import {IResponseError} from '../api/error';
+import {TEvDescribeSchemeResult} from '../api/schema';
+
+export interface IDescribeState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data: Record<string, TEvDescribeSchemeResult>;
+    currentDescribe?: TEvDescribeSchemeResult;
+    error?: IResponseError;
+}
+
+export interface IDescribeRootStateSlice {
+    describe: IDescribeState;
+}

package/dist/types/store/healthcheck.ts

@@ -1,3 +1,4 @@
+import {IResponseError} from '../api/error';
 import type {HealthCheckAPIResponse, IssueLog} from '../api/healthcheck';
 
 export interface IIssuesTree extends IssueLog {
@@ -5,3 +6,14 @@ export interface IIssuesTree extends IssueLog {
 }
 
 export type IHealthCheck = HealthCheckAPIResponse;
+
+export interface IHealthcheckInfoState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: HealthCheckAPIResponse;
+    error?: IResponseError;
+}
+
+export interface IHealthcheckInfoRootStateSlice {
+    healthcheckInfo: IHealthcheckInfoState;
+}

package/dist/types/window.d.ts

@@ -30,4 +30,11 @@ interface Window {
     Ya?: {
         Rum?: RumCounter;
     };
+
+    // eslint-disable-next-line
+    web_version?: boolean;
+    // eslint-disable-next-line
+    custom_backend?: string;
+
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof import('redux').compose;
 }

package/dist/utils/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useAutofetcher';
+export * from './useTypedSelector';

package/dist/utils/hooks/useTypedSelector.ts

@@ -0,0 +1,5 @@
+import {TypedUseSelectorHook, useSelector} from 'react-redux';
+
+import {IRootState} from '../../store';
+
+export const useTypedSelector: TypedUseSelectorHook<IRootState> = useSelector;

package/dist/utils/prepareQueryExplain.ts

@@ -4,6 +4,7 @@ import {
     TopologyNodeDataStats,
     TopologyNodeDataStatsSection,
     ExplainPlanNodeData,
+    TopologyNodeDataStatsItem,
 } from '@yandex-cloud/paranoid';
 
 interface PlanOperator {
@@ -25,6 +26,8 @@ export interface RootPlan {
     Plan: Plan;
 }
 
+const CONNECTION_NODE_META_FIELDS = new Set(['PlanNodeId', 'PlanNodeType', 'Node Type', 'Plans']);
+
 function prepareStats(plan: Plan) {
     const stats: TopologyNodeDataStats[] = [];
 
@@ -52,21 +55,52 @@ function prepareStats(plan: Plan) {
         });
     }
 
+    if (plan.PlanNodeType === 'Connection') {
+        const attrStats: TopologyNodeDataStatsItem[] = [];
+
+        for (const [key, value] of Object.entries(plan)) {
+            if (CONNECTION_NODE_META_FIELDS.has(key)) {
+                continue;
+            }
+
+            attrStats.push({name: key, value: String(value)});
+        }
+
+        if (attrStats.length > 0) {
+            stats.push({
+                group: 'Attributes',
+                stats: attrStats,
+            });
+        }
+    }
+
     return stats;
 }
 
+function getNodeType(plan: Plan) {
+    switch (plan.PlanNodeType) {
+        case 'Connection':
+            return 'connection';
+        case 'ResultSet':
+            return 'result';
+        case 'Query':
+            return 'query';
+        default:
+            return 'stage';
+    }
+}
+
 export function preparePlan(plan: Plan) {
     const nodes: GraphNode[] = [];
     const links: Link[] = [];
 
-    function parsePlans(plans: Plan[] = [], from: string, curDepth: number) {
-        const depth = curDepth + 1;
+    function parsePlans(plans: Plan[] = [], from: string) {
         plans.forEach((p) => {
             const node: GraphNode<ExplainPlanNodeData> = {
                 name: String(p.PlanNodeId),
                 data: {
                     id: p.PlanNodeId,
-                    type: p.PlanNodeType === 'Connection' ? 'connection' : 'stage',
+                    type: getNodeType(p),
                     name: p['Node Type'],
                     operators: p.Operators?.map((o) => o.Name),
                     stats: prepareStats(p),
@@ -75,7 +109,7 @@ export function preparePlan(plan: Plan) {
             };
             nodes.push(node);
             links.push({from, to: node.name});
-            parsePlans(p.Plans, node.name, depth);
+            parsePlans(p.Plans, node.name);
         });
     }
 
@@ -84,12 +118,13 @@ export function preparePlan(plan: Plan) {
         name: String(rootPlan.PlanNodeId),
         data: {
             id: rootPlan.PlanNodeId,
-            type: 'stage',
+            type: getNodeType(rootPlan),
             name: rootPlan['Node Type'],
         },
     };
     nodes.push(rootNode);
-    parsePlans(rootPlan.Plans, rootNode.name, 0);
+    parsePlans(rootPlan.Plans, rootNode.name);
+
     return {
         nodes,
         links,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "files": [
     "dist"
   ],
@@ -33,7 +33,7 @@
     "redux": "4.0.1",
     "redux-location-state": "2.6.0",
     "redux-thunk": "2.3.0",
-    "reselect": "4.0.0",
+    "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
     "ydb-ui-components": "3.0.1"