ydb-embedded-ui 20.5.0 → 21.1.0

package/src/containers/Header/hooks/useSharedDatabasePath.ts

@@ -132,28 +132,30 @@ export function useSharedDatabasePath({
     const shouldResolveSharedDatabaseFromViewer =
         shouldResolveSharedDatabaseName && !window.api.meta;
 
-    const {currentData: sharedDatabaseFromViewer} = tenantsApi.useGetSharedDatabaseQuery(
-        shouldResolveSharedDatabaseFromViewer && databaseData?.ResourceId
-            ? {
-                  clusterName,
-                  database: databaseData.Name,
-                  backend: activeBackend,
-                  environmentName: environment,
-                  isMonitoringAllowed: isMonitoringAllowed === true,
-                  needNodeIds: needSharedDatabaseNodeIds,
-                  resourceId: databaseData.ResourceId,
-              }
-            : skipToken,
-    );
+    const {currentData: sharedDatabaseFromViewer, isFetching: isSharedDatabaseFromViewerFetching} =
+        tenantsApi.useGetSharedDatabaseQuery(
+            shouldResolveSharedDatabaseFromViewer && databaseData?.ResourceId
+                ? {
+                      clusterName,
+                      database: databaseData.Name,
+                      backend: activeBackend,
+                      environmentName: environment,
+                      isMonitoringAllowed: isMonitoringAllowed === true,
+                      needNodeIds: needSharedDatabaseNodeIds,
+                      resourceId: databaseData.ResourceId,
+                  }
+                : skipToken,
+        );
 
     const shouldResolveSharedDatabaseFromMetaList =
         shouldResolveSharedDatabaseName && Boolean(window.api.meta);
 
-    const {currentData: databases} = tenantsApi.useGetTenantsInfoQuery(
-        shouldResolveSharedDatabaseFromMetaList
-            ? {clusterName, environmentName: environment, isMetaDatabasesAvailable}
-            : skipToken,
-    );
+    const {currentData: databases, isFetching: isDatabasesFetching} =
+        tenantsApi.useGetTenantsInfoQuery(
+            shouldResolveSharedDatabaseFromMetaList
+                ? {clusterName, environmentName: environment, isMetaDatabasesAvailable}
+                : skipToken,
+        );
 
     const sharedDatabaseTarget = React.useMemo<SharedDatabaseTarget | undefined>(() => {
         if (databaseData?.sharedTenantName) {
@@ -184,12 +186,17 @@ export function useSharedDatabasePath({
     const sharedDatabase = useDatabaseId ? databaseData?.ResourceId : sharedDatabaseTarget?.name;
     const backend = getSharedDatabaseBackend(sharedDatabaseTarget, prepareTenantBackend);
 
-    return getResolvedSharedDatabasePath({
-        backend,
-        clusterName,
-        databaseData,
-        isClusterBaseInfoResolved: isClusterBaseInfoAvailable,
-        isViewerUser,
-        sharedDatabase,
-    });
+    return {
+        isSharedDatabaseLoading:
+            (isSharedDatabaseFromViewerFetching && sharedDatabaseFromViewer === undefined) ||
+            (isDatabasesFetching && databases === undefined),
+        sharedDatabasePath: getResolvedSharedDatabasePath({
+            backend,
+            clusterName,
+            databaseData,
+            isClusterBaseInfoResolved: isClusterBaseInfoAvailable,
+            isViewerUser,
+            sharedDatabase,
+        }),
+    };
 }

package/src/containers/Header/i18n/en.json

@@ -16,6 +16,7 @@
   "action_delete-cluster": "Delete Cluster",
   "action_connect-to-db": "Connect to database",
   "action_go-to-shared-db": "Go to shared database",
+  "status_loading-shared-db": "Loading shared database",
   "action_manage": "Manage",
 
   "title_developer-ui": "Developer UI",

package/src/containers/Operations/columns.tsx

@@ -216,6 +216,8 @@ function OperationsActions({operation, database}: OperationsActionsProps) {
                         buttonView="outlined"
                         dialogHeader={i18n('header_forget')}
                         dialogText={i18n('text_forget')}
+                        applyButtonText={i18n('header_forget')}
+                        applyButtonView="outlined-danger"
                         onConfirmAction={() =>
                             forgetOperation({id, database})
                                 .unwrap()
@@ -244,6 +246,8 @@ function OperationsActions({operation, database}: OperationsActionsProps) {
                         buttonView="outlined"
                         dialogHeader={i18n('header_cancel')}
                         dialogText={i18n('text_cancel')}
+                        applyButtonText={i18n('header_cancel')}
+                        applyButtonView="outlined-danger"
                         onConfirmAction={() =>
                             cancelOperation({id, database})
                                 .unwrap()

package/src/containers/Operations/i18n/en.json

@@ -33,8 +33,8 @@
   "value_progress_create_changefeeds": "Creating Changefeeds",
   "header_cancel": "Cancel operation",
   "header_forget": "Forget operation",
-  "text_cancel": "The operation will be cancelled. Do you want to proceed?",
-  "text_forget": "The operation will be forgotten. Do you want to proceed?",
+  "text_cancel": "This will cancel the operation in progress. This action cannot be undone.",
+  "text_forget": "This will remove the operation from the list. This action cannot be undone.",
   "text_forgotten": "The operation {{id}} has been forgotten",
   "text_cancelled": "The operation {{id}} has been cancelled"
 }

package/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx

@@ -139,6 +139,8 @@ export function DecommissionButton({
                 warningText={getDecommissionWarningText(newDecommission)}
                 withRetry={withRetry}
                 withCheckBox
+                applyButtonText={pDiskPageKeyset('decommission-dialog-title')}
+                applyButtonView="outlined-danger"
                 retryButtonText={pDiskPageKeyset('decommission-dialog-force-change')}
                 onConfirm={handleConfirmAction}
                 onConfirmActionSuccess={handleConfirmActionSuccess}

package/src/containers/PDiskPage/PDiskPage.tsx

@@ -187,7 +187,9 @@ export function PDiskPage() {
                     buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
                     buttonView="normal"
                     dialogHeader={pDiskPageKeyset('restart-pdisk-dialog-header')}
-                    dialogWarning={pDiskPageKeyset('restart-pdisk-dialog-text')}
+                    dialogText={pDiskPageKeyset('restart-pdisk-dialog-text')}
+                    applyButtonText={pDiskPageKeyset('restart-pdisk-button')}
+                    applyButtonView="action"
                     retryButtonText={pDiskPageKeyset('force-restart-pdisk-button')}
                     withPopover
                     popoverContent={pDiskPageKeyset('restart-pdisk-not-allowed')}

package/src/containers/PDiskPage/i18n/en.json

@@ -16,11 +16,11 @@
   "no-slots-data": "No slots data",
 
   "restart-pdisk-button": "Restart PDisk",
-  "force-restart-pdisk-button": "Restart anyway",
+  "force-restart-pdisk-button": "Restart PDisk anyway",
   "restart-pdisk-not-allowed": "You don't have enough rights to restart PDisk",
 
   "restart-pdisk-dialog-header": "Restart PDisk",
-  "restart-pdisk-dialog-text": "PDisk will be restarted. Do you want to proceed?",
+  "restart-pdisk-dialog-text": "Are you sure you want to restart this PDisk?",
 
   "decommission-none": "None",
   "decommission-imminent": "Imminent",
@@ -34,7 +34,7 @@
   "decommission-dialog-title": "Change decommission status",
   "decommission-dialog-force-change": "Change anyway",
 
-  "decommission-dialog-imminent-warning": "This will start imminent decommission. Existing slots will be moved from the disk",
+  "decommission-dialog-imminent-warning": "This will start imminent decommission. All existing slots will be moved from the disk.",
   "decommission-dialog-pending-warning": "This will start pending decommission. Decommission will be planned for this disk, but will not start immediatelly. Existing slots will not be moved from the disk, but no new slots will be allocated on it",
   "decommission-dialog-rejected-warning": "This will start rejected decommission. No slots from other disks are placed on this disk in the process of decommission",
   "decommission-dialog-none-warning": "This will reset decommission mode, allowing the disk to  be used by the storage"

package/src/containers/Storage/PDisks/PDisks.tsx

@@ -31,7 +31,7 @@ export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth}: PDis
 
                 const relatedVDisks = vDisks.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
 
-                const highlighted = highlightedDisk === id;
+                const highlighted = id !== undefined && highlightedDisk === id;
 
                 return (
                     <div className={b('pdisks-item')} key={id}>

package/src/containers/Tablet/components/TabletControls/TabletControls.tsx

@@ -42,7 +42,9 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         <Flex gap={2} wrap="nowrap">
             <ButtonWithConfirmDialog
                 dialogHeader={i18n('dialog.kill-header')}
-                dialogWarning={i18n('dialog.kill-text')}
+                dialogText={i18n('dialog.kill-text')}
+                applyButtonText={i18n('dialog.kill-header')}
+                applyButtonView="action"
                 onConfirmAction={() => killTablet({id: TabletId}).unwrap()}
                 buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
                 withPopover
@@ -59,6 +61,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <ButtonWithConfirmDialog
                         dialogHeader={i18n('dialog.stop-header')}
                         dialogText={i18n('dialog.stop-text')}
+                        applyButtonText={i18n('dialog.stop-header')}
+                        applyButtonView="outlined-danger"
                         onConfirmAction={() => stopTablet({id: TabletId, hiveId: HiveId}).unwrap()}
                         buttonDisabled={isDisabledStop || !isUserAllowedToMakeChanges}
                         withPopover
@@ -73,6 +77,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <ButtonWithConfirmDialog
                         dialogHeader={i18n('dialog.resume-header')}
                         dialogText={i18n('dialog.resume-text')}
+                        applyButtonText={i18n('dialog.resume-header')}
+                        applyButtonView="action"
                         onConfirmAction={() =>
                             resumeTablet({id: TabletId, hiveId: HiveId}).unwrap()
                         }

package/src/containers/Tablet/i18n/en.json

@@ -16,9 +16,9 @@
   "dialog.stop-header": "Stop tablet",
   "dialog.resume-header": "Resume tablet",
 
-  "dialog.kill-text": "The tablet will be restarted. Do you want to proceed?",
-  "dialog.stop-text": "The tablet will be stopped. Do you want to proceed?",
-  "dialog.resume-text": "The tablet will be resumed. Do you want to proceed?",
+  "dialog.kill-text": "The tablet will restart. A portion of table data will be temporarily unavailable. Active transactions and scans will be interrupted with a retriable error and can be retried.",
+  "dialog.stop-text": "The tablet will be stopped. The key range will be unavailable until the tablet is manually resumed. Data is not deleted and will be restored after resume.",
+  "dialog.resume-text": "The tablet will be resumed and return to Active state.",
 
   "emptyState": "The tablet was not found",
 

package/src/containers/Tablets/TabletsTable.tsx

@@ -190,7 +190,9 @@ function TabletActions(tablet: TTabletStateInfo) {
         <ButtonWithConfirmDialog
             buttonView="outlined"
             dialogHeader={i18n('dialog.kill-header')}
-            dialogWarning={i18n('dialog.kill-text')}
+            dialogText={i18n('dialog.kill-text')}
+            applyButtonText={i18n('dialog.kill-header')}
+            applyButtonView="action"
             onConfirmAction={() => {
                 return killTablet({id}).unwrap();
             }}

package/src/containers/Tablets/i18n/en.json

@@ -10,7 +10,7 @@
   "Generation": "Generation",
   "Uptime": "Uptime",
   "dialog.kill-header": "Restart tablet",
-  "dialog.kill-text": "The tablet will be restarted. Do you want to proceed?",
+  "dialog.kill-text": "The tablet will restart. A portion of table data will be temporarily unavailable. Active transactions and scans will be interrupted with a retriable error and can be retried.",
   "controls.kill-not-allowed": "You don't have enough rights to restart tablet",
   "controls.kill-impossible-follower": "It's impossible to restart a follower",
   "controls.search-placeholder": "Tablet ID",

package/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx

@@ -7,6 +7,7 @@ import {healthcheckApi} from '../../../../../store/reducers/healthcheckInfo/heal
 import {SelfCheckResult} from '../../../../../types/api/healthcheck';
 import {cn} from '../../../../../utils/cn';
 import {useAutoRefreshInterval} from '../../../../../utils/hooks';
+import {useClusterNameFromQuery} from '../../../../../utils/hooks/useDatabaseFromQuery';
 import {isEnumMember} from '../../../../../utils/typecheckers';
 import {HEALTHCHECK_RESULT_TO_TEXT} from '../../../constants';
 import {useTenantQueryParams} from '../../../useTenantQueryParams';
@@ -24,6 +25,7 @@ interface HealthcheckPreviewProps {
 
 export function HealthcheckPreview(props: HealthcheckPreviewProps) {
     const {database} = props;
+    const clusterName = useClusterNameFromQuery();
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {handleShowHealthcheckChange} = useTenantQueryParams();
@@ -33,7 +35,7 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
         isFetching,
         error,
     } = healthcheckApi.useGetHealthcheckInfoQuery(
-        {database},
+        {database, clusterName},
         {
             pollingInterval: autoRefreshInterval,
         },

package/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -311,11 +311,11 @@ export function TenantOverview({
 
     // Use healthcheck self_check_result as the database status color when available;
     // fall back to tenantinfo.Overall (e.g. for Serverless databases where healthcheck is skipped).
-    // Polling is managed by HealthcheckPreview (deduped via the same cache key); the database
+    // Polling is managed by HealthcheckPreview via the same {database, clusterName} cache key. The database
     // status badge is only rendered when !isV2NavigationEnabled, so skip the query in V2 mode
     // and until tenant info is loaded to avoid spurious requests.
     const {currentData: healthcheckData} = healthcheckApi.useGetHealthcheckInfoQuery(
-        {database},
+        {database, clusterName},
         {
             skip: shouldSkipHealthcheck({isServerless, isV2NavigationEnabled, tenant}),
         },

package/src/containers/Tenant/Healthcheck/components/HealthcheckDrawer.tsx

@@ -7,6 +7,7 @@ import {DrawerWrapper} from '../../../../components/Drawer';
 import type {DrawerControl} from '../../../../components/Drawer';
 import {EnableFullscreenButton} from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import type {SelfCheckResult} from '../../../../types/api/healthcheck';
+import {uiFactory} from '../../../../uiFactory/uiFactory';
 import {createAndDownloadJsonFile} from '../../../../utils/downloadFile';
 
 import {HealthcheckDrawerTitle} from './HealthcheckDrawerTitle';
@@ -42,6 +43,20 @@ export function HealthcheckDrawer({
     downloadTooltip,
     isDownloadDisabled,
 }: HealthcheckDrawerProps) {
+    const renderDrawerExtension = uiFactory.healthcheck.renderDrawerExtension;
+    const renderContentWithExtension = React.useCallback(() => {
+        if (!renderDrawerExtension) {
+            return renderDrawerContent();
+        }
+
+        return (
+            <React.Fragment>
+                {renderDrawerExtension()}
+                {renderDrawerContent()}
+            </React.Fragment>
+        );
+    }, [renderDrawerContent, renderDrawerExtension]);
+
     const handleDownload = React.useCallback(
         (event: React.MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
@@ -86,7 +101,7 @@ export function HealthcheckDrawer({
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={onCloseDrawer}
             onTransitionInComplete={onTransitionInComplete}
-            renderDrawerContent={renderDrawerContent}
+            renderDrawerContent={renderContentWithExtension}
             drawerId={drawerId}
             storageKey={storageKey}
             detectClickOutside

package/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.scss

@@ -1,5 +1,7 @@
 .ydb-query-explain-graph {
     &__canvas-container {
+        position: relative;
+
         overflow-y: auto;
 
         width: 100%;

package/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import type {Data} from '@gravity-ui/paranoid';
-
-import {YDBGraph} from '../../../../../../components/Graph/Graph';
+import {GravityGraph} from '../../../../../../components/Graph/GravityGraph';
 import type {PreparedPlan} from '../../../../../../store/reducers/query/types';
 import {cn} from '../../../../../../utils/cn';
 import i18n from '../../i18n';
@@ -17,22 +15,30 @@ interface GraphProps {
     theme?: string;
 }
 
-function isValidGraphData(data: Partial<Data>): data is Data {
+function isValidGraphData(data: Partial<PreparedPlan>) {
     return Boolean(data.links && data.nodes && data.nodes.length);
 }
 
 export function Graph({explain = {}, theme}: GraphProps) {
     const {links, nodes} = explain;
 
-    const data = React.useMemo(() => ({links, nodes}), [links, nodes]);
+    const data = React.useMemo(() => ({links: links || [], nodes: nodes || []}), [links, nodes]);
+    const [failedData, setFailedData] = React.useState<typeof data>();
+    const handleLayoutError = React.useCallback(
+        (error: Error) => {
+            console.error(error);
+            setFailedData(data);
+        },
+        [data],
+    );
 
-    if (!isValidGraphData(data)) {
+    if (!isValidGraphData(data) || failedData === data) {
         return <StubMessage message={i18n('description.graph-is-not-supported')} />;
     }
 
     return (
         <div className={b('canvas-container')}>
-            <YDBGraph key={theme} data={data} />
+            <GravityGraph data={data} onError={handleLayoutError} theme={theme} />
         </div>
     );
 }

package/src/graphLayout.worker.ts

@@ -0,0 +1,21 @@
+import {prepareTreeLayout} from './components/Graph/treeLayout';
+import type {TreeLayoutRequest, TreeLayoutWorkerResponse} from './components/Graph/types';
+
+const workerScope = globalThis as unknown as {
+    onmessage: ((event: MessageEvent<TreeLayoutRequest>) => void) | null;
+    postMessage: (response: TreeLayoutWorkerResponse) => void;
+};
+
+workerScope.onmessage = ({data}) => {
+    try {
+        workerScope.postMessage({
+            type: 'success',
+            result: prepareTreeLayout(data),
+        });
+    } catch (error) {
+        workerScope.postMessage({
+            type: 'error',
+            error: error instanceof Error ? error.message : String(error),
+        });
+    }
+};

package/src/lib.ts

@@ -40,6 +40,7 @@ export type {ExternalQueryToOpen} from './containers/Tenant/Query/hooks/useOpenE
 export type {DrawerContextType} from './components/Drawer';
 export type {GetMonitoringLink, GetMonitoringClusterLink} from './utils/monitoring';
 export type {
+    CreateGraphLayoutWorker,
     GetAdditionalDatabaseInfoItems,
     GetReportProblemUrl,
     IllustrationComponent,

package/src/store/reducers/query/parsers/preparePlanData.ts

@@ -1,9 +1,7 @@
-import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
-
 import type {QueryPlan, ScriptPlan, TKqpStatsQuery} from '../../../../types/api/query';
 import {preparePlan, prepareSimplifiedPlan} from '../../../../utils/prepareQueryExplain';
 import {parseQueryExplainPlan} from '../../../../utils/query';
-import type {PreparedQueryData} from '../types';
+import type {ExplainPlanNodeData, GraphNode, Link, PreparedQueryData} from '../types';
 
 const explainVersions = {
     v2: '0.2',

package/src/store/reducers/query/types.ts

@@ -1,5 +1,3 @@
-import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
-
 import type {
     PlanTable,
     QueryPlan,
@@ -27,6 +25,48 @@ export interface QueryInHistory extends RawQueryInHistory {
     status?: QueryExecutionStatusType;
 }
 
+export interface Link {
+    from: string;
+    to: string;
+}
+
+export interface Metric {
+    name: string;
+    value: string;
+    theme?: 'warning' | 'danger';
+}
+
+export interface GraphNode<TData = any> {
+    name: string;
+    status?: string;
+    meta?: string;
+    group?: string;
+    data?: TData;
+    metrics?: Metric[];
+}
+
+export interface ExplainPlanNodeData {
+    id?: number;
+    type: 'query' | 'result' | 'stage' | 'connection' | 'materialize';
+    name?: string;
+    operators?: string[];
+    tables?: string[];
+    cte?: string;
+    stats?: TopologyNodeDataStats[];
+}
+export interface TopologyNodeDataStatsItem {
+    name: string;
+    value: string | number;
+}
+export interface TopologyNodeDataStatsSection {
+    name: string;
+    items: TopologyNodeDataStatsItem[];
+}
+export interface TopologyNodeDataStats {
+    group: string;
+    stats: TopologyNodeDataStatsSection[] | TopologyNodeDataStatsItem[];
+}
+
 export interface PreparedPlan {
     links?: Link[];
     nodes?: GraphNode<ExplainPlanNodeData>[];

package/src/store/reducers/storage/utils.ts

@@ -237,10 +237,10 @@ const prepareStorageNodeData = (
         }).length || 0;
 
     const pDisks = PDisks?.map((pDisk) => {
-        return {
-            ...prepareWhiteboardPDiskData(pDisk),
+        return prepareWhiteboardPDiskData({
+            ...pDisk,
             NodeId,
-        };
+        });
     });
     const vDisks = VDisks?.map((vDisk) => {
         return {

package/src/uiFactory/types.ts

@@ -19,6 +19,7 @@ import type {GetLogsLink} from '../utils/logs';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../utils/monitoring';
 
 export type IllustrationComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+export type CreateGraphLayoutWorker = () => Worker;
 
 export type IllustrationName =
     | 'InternalError'
@@ -52,14 +53,23 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
     renderNodeTooltipActions?: RenderNodeTooltipActions;
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
 
+    /** Defaults to true. Undefined preserves the current value when configuring the UI. */
     enableMultiTabQueryEditor?: boolean;
 
+    /** Creates a fresh computation-graph layout worker for each layout run. */
+    createGraphLayoutWorker?: CreateGraphLayoutWorker;
+
     healthcheck: {
         issueCategories: ReadonlyArray<H>;
         isIssueTypeOfCategory: (type: string, category: H) => boolean;
         getHealthckechViewTitles: GetHealthcheckViewTitles<H>;
         getHealthcheckViewsOrder: GetHealthcheckViewsOrder<H>;
         renderAssistantAction?: RenderHealthcheckAssistantAction;
+        /**
+         * Renders after the drawer header and before Healthcheck content.
+         * Stays mounted while the drawer is open, independent of loading, error or issue state.
+         */
+        renderDrawerExtension?: () => React.ReactNode;
     };
     hasAccess: HasAccess;
     hideGrantAccess?: boolean;

package/src/uiFactory/uiFactory.ts

@@ -30,7 +30,7 @@ const uiFactoryBase: ResolvedUIFactory = {
     useDatabaseId: false,
     settingsBackend: undefined,
     docs: undefined,
-    enableMultiTabQueryEditor: false,
+    enableMultiTabQueryEditor: true,
     hasDeveloperUi: true,
     isDetailedStorageViewAvailable: () => true,
     maxVDisksInStorageGroup: 9,
@@ -46,10 +46,20 @@ type UIFactoryOverrides<H extends string, T extends string> = Omit<
 export function configureUIFactory<H extends string, T extends string = string>(
     overrides: UIFactoryOverrides<H, T>,
 ) {
-    const {healthcheck, hasAccess, maxVDisksInStorageGroup, ...restOverrides} = overrides;
+    const {
+        healthcheck,
+        hasAccess,
+        maxVDisksInStorageGroup,
+        enableMultiTabQueryEditor,
+        ...restOverrides
+    } = overrides;
 
     Object.assign(uiFactoryBase, restOverrides);
 
+    if (typeof enableMultiTabQueryEditor === 'boolean') {
+        uiFactoryBase.enableMultiTabQueryEditor = enableMultiTabQueryEditor;
+    }
+
     // Only override hasAccess when an actual function is provided.
     // Forwarding an optional config field could pass `undefined` here,
     // which would overwrite the default and crash on the next hasAccess(...) call.

package/src/utils/prepareQueryExplain.ts

@@ -2,12 +2,11 @@ import type {
     ExplainPlanNodeData,
     GraphNode,
     Link,
+    SimplifiedPlanItem,
     TopologyNodeDataStats,
     TopologyNodeDataStatsItem,
     TopologyNodeDataStatsSection,
-} from '@gravity-ui/paranoid';
-
-import type {SimplifiedPlanItem} from '../store/reducers/query/types';
+} from '../store/reducers/query/types';
 import type {PlanNode, SimplifiedNode} from '../types/api/query';
 
 const CONNECTION_NODE_META_FIELDS = new Set(['PlanNodeId', 'PlanNodeType', 'Node Type', 'Plans']);
@@ -96,11 +95,19 @@ function getNodeType(plan: PlanNode) {
 export function preparePlan(plan: PlanNode) {
     const nodes: GraphNode<ExplainPlanNodeData>[] = [];
     const links: Link[] = [];
+    let generatedNodeId = 0;
+
+    const getGraphNodeId = (node: PlanNode) => {
+        return node.PlanNodeId === undefined
+            ? `generated-plan-node:${generatedNodeId++}`
+            : String(node.PlanNodeId);
+    };
 
     function parsePlans(plans: PlanNode[] = [], from: string) {
         plans.forEach((p) => {
+            const nodeId = getGraphNodeId(p);
             const node: GraphNode<ExplainPlanNodeData> = {
-                name: String(p.PlanNodeId),
+                name: nodeId,
                 data: {
                     id: p.PlanNodeId,
                     type: getNodeType(p),
@@ -117,8 +124,9 @@ export function preparePlan(plan: PlanNode) {
     }
 
     const rootPlan = plan;
+    const rootNodeId = getGraphNodeId(rootPlan);
     const rootNode: GraphNode<ExplainPlanNodeData> = {
-        name: String(rootPlan.PlanNodeId),
+        name: rootNodeId,
         data: {
             id: rootPlan.PlanNodeId,
             type: getNodeType(rootPlan),

package/dist/components/Graph/Graph.d.ts

@@ -1,12 +0,0 @@
-import type { Data, Options, Shapes } from '@gravity-ui/paranoid';
-interface GraphProps<T> {
-    data: Data<T>;
-    opts?: Options;
-    shapes?: Shapes;
-}
-export declare function Graph<T>(props: GraphProps<T>): import("react/jsx-runtime").JSX.Element;
-interface YDBGraphProps<T> {
-    data: Data<T>;
-}
-export declare function YDBGraph<T>(props: YDBGraphProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};