ydb-embedded-ui 20.4.0 → 21.0.0

package/dist/types/api/schema/persQueueGroup.d.ts

@@ -54,6 +54,22 @@ export interface TPQTabletConfig {
     PartitionKeySchema?: TKeyComponentSchema[];
     Partitions?: TPartition[];
     MeteringMode?: EMeteringMode;
+    PartitionStrategy?: TPQPartitionStrategy;
+}
+export declare enum EPQPartitionStrategyType {
+    DISABLED = "DISABLED",
+    CAN_SPLIT = "CAN_SPLIT",
+    CAN_SPLIT_AND_MERGE = "CAN_SPLIT_AND_MERGE",
+    PAUSED = "PAUSED"
+}
+/** Strategy for automatically changing the number of topic partitions depending on the load */
+export interface TPQPartitionStrategy {
+    MinPartitionCount?: number;
+    MaxPartitionCount?: number;
+    ScaleThresholdSeconds?: number;
+    ScaleUpPartitionWriteSpeedThresholdPercent?: number;
+    ScaleDownPartitionWriteSpeedThresholdPercent?: number;
+    PartitionStrategyType?: EPQPartitionStrategyType;
 }
 export interface TPQPartitionConfig {
     MaxCountInPartition?: number;

package/dist/types/api/schema/persQueueGroup.js

@@ -1,3 +1,10 @@
+export var EPQPartitionStrategyType;
+(function (EPQPartitionStrategyType) {
+    EPQPartitionStrategyType["DISABLED"] = "DISABLED";
+    EPQPartitionStrategyType["CAN_SPLIT"] = "CAN_SPLIT";
+    EPQPartitionStrategyType["CAN_SPLIT_AND_MERGE"] = "CAN_SPLIT_AND_MERGE";
+    EPQPartitionStrategyType["PAUSED"] = "PAUSED";
+})(EPQPartitionStrategyType || (EPQPartitionStrategyType = {}));
 export var EMeteringMode;
 (function (EMeteringMode) {
     EMeteringMode["METERING_MODE_RESERVED_CAPACITY"] = "METERING_MODE_RESERVED_CAPACITY";

package/dist/types/api/schema/persQueueGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"persQueueGroup.js","sourceRoot":"","sources":["../../../../src/types/api/schema/persQueueGroup.ts"],"names":[],"mappings":"AA2LA,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,oFAAmE,CAAA;IACnE,4EAA2D,CAAA;AAC/D,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB"}
+{"version":3,"file":"persQueueGroup.js","sourceRoot":"","sources":["../../../../src/types/api/schema/persQueueGroup.ts"],"names":[],"mappings":"AAyEA,MAAM,CAAN,IAAY,wBAKX;AALD,WAAY,wBAAwB;IAChC,iDAAqB,CAAA;IACrB,mDAAuB,CAAA;IACvB,uEAA2C,CAAA;IAC3C,6CAAiB,CAAA;AACrB,CAAC,EALW,wBAAwB,KAAxB,wBAAwB,QAKnC;AAgID,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,oFAAmE,CAAA;IACnE,4EAA2D,CAAA;AAC/D,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB"}

package/dist/uiFactory/types.d.ts

@@ -13,6 +13,7 @@ import type { TUserToken } from '../types/api/whoami';
 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' | 'AccessDenied' | 'Unauthenticated' | 'NoSearchResults' | 'SuccessOperation';
 export interface UIFactory<H extends string = CommonIssueCategory, T extends string = string> {
     onCreateDB?: HandleCreateDB;
@@ -34,6 +35,8 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
     renderNodeTooltipActions?: RenderNodeTooltipActions;
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
     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;

package/dist/utils/disks/helpers.d.ts

@@ -4,7 +4,7 @@ import { EFlag } from '../../types/api/enums';
 import type { TVDiskStateInfo, TVSlotId } from '../../types/api/vdisk';
 import type { DiskColor, PreparedVDisk } from './types';
 export declare function isFullVDiskData(disk: PreparedVDisk | TVDiskStateInfo | TVSlotId): disk is PreparedVDisk | TVDiskStateInfo;
-export declare const getSpaceSeverity: (allocatedPercent?: number) => 21 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 22 | 11 | 16 | 17 | 18 | 19 | 20 | import("./types").DataSeverity;
+export declare const getSpaceSeverity: (allocatedPercent?: number) => 9 | 13 | 14 | 15 | 8 | 16 | 12 | 20 | 22 | 6 | 7 | 10 | 11 | 17 | 18 | 19 | 21 | import("./types").DataSeverity;
 /**
  * Convert data severity (0-5) to EFlag color.
  * Used for PreparedVDisk.Severity and PreparedPDisk.Severity in Default mode.
@@ -21,7 +21,7 @@ export declare function getDataSeverityColor(severity: number | undefined): EFla
  * @returns Disk color for visualization
  */
 export declare function getDisplaySeverityColor(severity: number | undefined): DiskColor;
-export declare function getColorSeverity(color?: EFlag): 0 | 1 | 2 | 5 | 4 | 21 | 3 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 22 | 11 | 16 | 17 | 18 | 19 | 20;
+export declare function getColorSeverity(color?: EFlag): 0 | 1 | 3 | 4 | 9 | 13 | 14 | 15 | 8 | 16 | 2 | 12 | 20 | 22 | 5 | 6 | 7 | 10 | 11 | 17 | 18 | 19 | 21;
 export declare function getPDiskId({ nodeId, pDiskId, }: {
     nodeId?: string | number | null;
     pDiskId?: string | number | null;

package/dist/utils/hooks/useChangedQuerySettings.d.ts

@@ -2,8 +2,8 @@ export declare const useChangedQuerySettings: () => {
     isBannerShown: boolean;
     closeBanner: () => void;
     resetBanner: () => void;
-    changedCurrentSettings: ("timeout" | "statisticsMode" | "queryMode" | "transactionMode" | "tracingLevel" | "limitRows" | "outputChunkMaxSize" | "pragmas" | "resourcePool")[];
+    changedCurrentSettings: ("queryMode" | "transactionMode" | "statisticsMode" | "tracingLevel" | "timeout" | "limitRows" | "outputChunkMaxSize" | "pragmas" | "resourcePool")[];
     changedCurrentSettingsDescriptions: Record<string, string>;
-    changedLastExecutionSettings: ("timeout" | "statisticsMode" | "queryMode" | "transactionMode" | "tracingLevel" | "limitRows" | "outputChunkMaxSize" | "pragmas" | "resourcePool")[];
+    changedLastExecutionSettings: ("queryMode" | "transactionMode" | "statisticsMode" | "tracingLevel" | "timeout" | "limitRows" | "outputChunkMaxSize" | "pragmas" | "resourcePool")[];
     changedLastExecutionSettingsDescriptions: Record<string, string>;
 };

package/dist/utils/hooks/useLastQueryExecutionSettings.d.ts

@@ -1,5 +1,5 @@
 export declare const useLastQueryExecutionSettings: () => readonly [{
-    queryMode: "query" | "data" | "script" | "scan";
+    queryMode: "scan" | "script" | "data" | "query";
     transactionMode: "serializable-read-write" | "stale-read-only" | "online-read-only" | "snapshot-read-only" | "snapshot-read-write" | "implicit";
     statisticsMode: "none" | "basic" | "full" | "profile";
     tracingLevel: "basic" | "off" | "toplevel" | "detailed" | "diagnostic" | "trace";
@@ -9,7 +9,7 @@ export declare const useLastQueryExecutionSettings: () => readonly [{
     limitRows?: number | undefined;
     outputChunkMaxSize?: number | undefined;
 } | undefined, (value: {
-    queryMode: "query" | "data" | "script" | "scan";
+    queryMode: "scan" | "script" | "data" | "query";
     transactionMode: "serializable-read-write" | "stale-read-only" | "online-read-only" | "snapshot-read-only" | "snapshot-read-write" | "implicit";
     statisticsMode: "none" | "basic" | "full" | "profile";
     tracingLevel: "basic" | "off" | "toplevel" | "detailed" | "diagnostic" | "trace";

package/dist/utils/hooks/useQueryExecutionSettings.d.ts

@@ -1,5 +1,5 @@
 export declare const useQueryExecutionSettings: () => readonly [{
-    queryMode: "query" | "data" | "script" | "scan";
+    queryMode: "scan" | "script" | "data" | "query";
     transactionMode: "serializable-read-write" | "stale-read-only" | "online-read-only" | "snapshot-read-only" | "snapshot-read-write" | "implicit";
     statisticsMode: "none" | "basic" | "full" | "profile";
     tracingLevel: "basic" | "off" | "toplevel" | "detailed" | "diagnostic" | "trace";
@@ -9,7 +9,7 @@ export declare const useQueryExecutionSettings: () => readonly [{
     limitRows?: number | undefined;
     outputChunkMaxSize?: number | undefined;
 }, (value: {
-    queryMode: "query" | "data" | "script" | "scan";
+    queryMode: "scan" | "script" | "data" | "query";
     transactionMode: "serializable-read-write" | "stale-read-only" | "online-read-only" | "snapshot-read-only" | "snapshot-read-write" | "implicit";
     statisticsMode: "none" | "basic" | "full" | "profile";
     tracingLevel: "basic" | "off" | "toplevel" | "detailed" | "diagnostic" | "trace";

package/dist/utils/prepareQueryExplain.d.ts

@@ -1,5 +1,4 @@
-import type { ExplainPlanNodeData, GraphNode, Link } from '@gravity-ui/paranoid';
-import type { SimplifiedPlanItem } from '../store/reducers/query/types';
+import type { ExplainPlanNodeData, GraphNode, Link, SimplifiedPlanItem } from '../store/reducers/query/types';
 import type { PlanNode, SimplifiedNode } from '../types/api/query';
 export declare function preparePlan(plan: PlanNode): {
     nodes: GraphNode<ExplainPlanNodeData>[];

package/dist/utils/prepareQueryExplain.js

@@ -67,11 +67,18 @@ function getNodeType(plan) {
 export function preparePlan(plan) {
     const nodes = [];
     const links = [];
+    let generatedNodeId = 0;
+    const getGraphNodeId = (node) => {
+        return node.PlanNodeId === undefined
+            ? `generated-plan-node:${generatedNodeId++}`
+            : String(node.PlanNodeId);
+    };
     function parsePlans(plans = [], from) {
         plans.forEach((p) => {
             var _a;
+            const nodeId = getGraphNodeId(p);
             const node = {
-                name: String(p.PlanNodeId),
+                name: nodeId,
                 data: {
                     id: p.PlanNodeId,
                     type: getNodeType(p),
@@ -87,8 +94,9 @@ export function preparePlan(plan) {
         });
     }
     const rootPlan = plan;
+    const rootNodeId = getGraphNodeId(rootPlan);
     const rootNode = {
-        name: String(rootPlan.PlanNodeId),
+        name: rootNodeId,
         data: {
             id: rootPlan.PlanNodeId,
             type: getNodeType(rootPlan),

package/dist/utils/prepareQueryExplain.js.map

@@ -1 +1 @@
-{"version":3,"file":"prepareQueryExplain.js","sourceRoot":"","sources":["../../src/utils/prepareQueryExplain.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"prepareQueryExplain.js","sourceRoot":"","sources":["../../src/utils/prepareQueryExplain.ts"],"names":[],"mappings":"AAWA,MAAM,2BAA2B,GAAG,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAElG,SAAS,YAAY,CAAC,IAAc;IAChC,MAAM,KAAK,GAA4B,EAAE,CAAC;IAE1C,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAmC,EAAE,CAAC;QAE7D,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpC,MAAM,OAAO,GAAiC,EAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC;YAE/E,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAClD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBAClB,SAAS;gBACb,CAAC;gBAED,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACrE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC;YACtC,CAAC;YAED,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;QAED,KAAK,CAAC,IAAI,CAAC;YACP,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,iBAAiB;SAC3B,CAAC,CAAC;IACP,CAAC;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY,EAAE,CAAC;QACrC,MAAM,SAAS,GAAgC,EAAE,CAAC;QAElD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9C,IAAI,2BAA2B,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvC,SAAS;YACb,CAAC;YAED,SAAS,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,GAAG;gBACT,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;aACnE,CAAC,CAAC;QACP,CAAC;QAED,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,KAAK,CAAC,IAAI,CAAC;gBACP,KAAK,EAAE,YAAY;gBACnB,KAAK,EAAE,SAAS;aACnB,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAM,SAAS,GAAgC,EAAE,CAAC;QAElD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACpD,SAAS,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,GAAG;gBACT,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;aACnE,CAAC,CAAC;QACP,CAAC;QAED,KAAK,CAAC,IAAI,CAAC;YACP,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,SAAS;SACnB,CAAC,CAAC;IACP,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,SAAS,WAAW,CAAC,IAAc;IAC/B,QAAQ,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,WAAW;YACZ,OAAO,QAAQ,CAAC;QACpB,KAAK,OAAO;YACR,OAAO,OAAO,CAAC;QACnB;YACI,OAAO,OAAO,CAAC;IACvB,CAAC;AACL,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAc;IACtC,MAAM,KAAK,GAAqC,EAAE,CAAC;IACnD,MAAM,KAAK,GAAW,EAAE,CAAC;IACzB,IAAI,eAAe,GAAG,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,CAAC,IAAc,EAAE,EAAE;QACtC,OAAO,IAAI,CAAC,UAAU,KAAK,SAAS;YAChC,CAAC,CAAC,uBAAuB,eAAe,EAAE,EAAE;YAC5C,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,SAAS,UAAU,CAAC,QAAoB,EAAE,EAAE,IAAY;QACpD,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YAChB,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;YACjC,MAAM,IAAI,GAAmC;gBACzC,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE;oBACF,EAAE,EAAE,CAAC,CAAC,UAAU;oBAChB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;oBACpB,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC;oBACpB,SAAS,EAAE,MAAA,CAAC,CAAC,SAAS,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;oBAC1C,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;oBACtB,MAAM,EAAE,CAAC,CAAC,MAAM;iBACnB;aACJ,CAAC;YACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjB,KAAK,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;YAClC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC;IACtB,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAmC;QAC7C,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE;YACF,EAAE,EAAE,QAAQ,CAAC,UAAU;YACvB,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC;YAC3B,IAAI,EAAE,QAAQ,CAAC,WAAW,CAAC;SAC9B;KACJ,CAAC;IACF,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrB,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE1C,OAAO;QACH,KAAK;QACL,KAAK;KACR,CAAC;AACN,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,KAAuB;;IACzD,MAAM,MAAM,GAAyB,EAAE,CAAC;IACxC,MAAM,KAAK,GAGL,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAE1C,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACtB,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAC,GAAG,KAAK,CAAC,GAAG,EAAG,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5B,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,0CAAG,CAAC,CAAC,CAAC;QAExC,MAAM,QAAQ,GAAG,QAAQ,IAAI,MAAM,CAAC;QAEpC,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,EACF,CAAC,OAAO,CAAC,EAAE,IAAI,EACf,CAAC,QAAQ,CAAC,EAAE,KAAK,EACjB,CAAC,QAAQ,CAAC,EAAE,KAAK,EACjB,CAAC,QAAQ,CAAC,EAAE,KAAK,EACjB,CAAC,QAAQ,CAAC,EAAE,KAAK,EACjB,CAAC,YAAY,CAAC,EAAE,WAAW,EAC3B,CAAC,MAAM,CAAC,EAAE,IAAI,EACd,GAAG,IAAI,EACV,GAAG,QAAQ,CAAC;YAEb,MAAM,OAAO,GAAuB;gBAChC,IAAI;gBACJ,eAAe,EAAE,IAAI;gBACrB,IAAI;gBACJ,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,QAAQ,EAAE,EAAE;aACf,CAAC;YAEF,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAEvB,IAAI,KAAK,EAAE,CAAC;gBACR,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACzC,KAAK,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAC,CAAC,CAAC;gBAC7D,CAAC;YACL,CAAC;QACL,CAAC;aAAM,IAAI,KAAK,EAAE,CAAC;YACf,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACzC,KAAK,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;YACrD,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC"}

package/dist/utils/query.d.ts

@@ -43,7 +43,7 @@ export declare const QUERY_MODES_TITLES: Record<QueryMode, string>;
 export declare const QUERY_SYNTAX: {
     readonly yql: "yql_v1";
 };
-export declare const getColumnType: (type: string) => "number" | "string" | "boolean" | "date" | "binary-string" | undefined;
+export declare const getColumnType: (type: string) => "string" | "number" | "boolean" | "date" | "binary-string" | undefined;
 /** parse response result from ArrayRow to KeyValueRow and format values */
 export declare const parseResult: (rows: ArrayRow[], columns: ColumnType[]) => KeyValueRow[];
 type UnsupportedQueryResponseFormat = Array<unknown> | string | null | undefined | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "20.4.0",
+  "version": "21.0.0",
   "files": [
     "dist",
     "src"
@@ -22,11 +22,11 @@
     "@gravity-ui/components": "^4.18.0",
     "@gravity-ui/date-components": "^3.2.3",
     "@gravity-ui/date-utils": "^2.5.6",
+    "@gravity-ui/graph": "^1.11.3",
     "@gravity-ui/i18n": "^1.7.0",
     "@gravity-ui/icons": "^2.21.0",
     "@gravity-ui/illustrations": "^2.1.0",
     "@gravity-ui/navigation": "^4.0.18",
-    "@gravity-ui/paranoid": "^3.0.0",
     "@gravity-ui/react-data-table": "^2.2.1",
     "@gravity-ui/react-unipika": "^0.5.2",
     "@gravity-ui/table": "^1.10.1",
@@ -50,7 +50,7 @@
     "numeral": "^2.0.6",
     "path-to-regexp": "^3.3.0",
     "qrcode": "^1.5.4",
-    "qs": "^6.15.2",
+    "qs": "^6.16.0",
     "react-error-boundary": "^4.1.2",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.55.0",

package/src/components/Graph/BlockComponents/ConnectionBlockComponent.tsx

@@ -0,0 +1,49 @@
+import {
+    ArrowsExpandHorizontal,
+    DatabaseFill,
+    GripHorizontal,
+    MapPin,
+    Shuffle,
+} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
+import type {IconData} from '@gravity-ui/uikit';
+
+import {TooltipComponent} from '../TooltipComponent';
+import type {ExtendedTBlock} from '../types';
+
+type Props = {
+    block: ExtendedTBlock;
+    className: string;
+};
+
+const getIcon = (name: string): IconData | undefined => {
+    switch (name) {
+        case 'Merge':
+            return DatabaseFill;
+        case 'UnionAll':
+            return GripHorizontal;
+        case 'HashShuffle':
+            return Shuffle;
+        case 'Map':
+            return MapPin;
+        case 'Broadcast':
+            return ArrowsExpandHorizontal;
+        default:
+            return undefined;
+    }
+};
+
+export const ConnectionBlockComponent = ({className, block}: Props) => {
+    const icon = getIcon(block.name);
+    const content = (
+        <div className={className}>
+            {icon && <Icon data={icon} />} {block.name}
+        </div>
+    );
+
+    if (!block.stats?.length) {
+        return content;
+    }
+
+    return <TooltipComponent block={block}>{content}</TooltipComponent>;
+};

package/src/components/Graph/BlockComponents/QueryBlockComponent.tsx

@@ -0,0 +1,7 @@
+type Props = {
+    className: string;
+};
+
+export const QueryBlockComponent = ({className}: Props) => {
+    return <div className={className} />;
+};

package/src/components/Graph/BlockComponents/ResultBlockComponent.tsx

@@ -0,0 +1,10 @@
+import type {TBlock} from '@gravity-ui/graph';
+
+type Props = {
+    block: TBlock;
+    className: string;
+};
+
+export const ResultBlockComponent = ({className, block}: Props) => {
+    return <div className={className}>{block.name}</div>;
+};

package/src/components/Graph/BlockComponents/StageBlockComponent.tsx

@@ -0,0 +1,35 @@
+import {Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../../utils/cn';
+import {TooltipComponent} from '../TooltipComponent';
+import i18n from '../i18n';
+import type {ExtendedTBlock} from '../types';
+
+const b = cn('ydb-gravity-graph');
+
+type Props = {
+    block: ExtendedTBlock;
+    className: string;
+};
+
+export const StageBlockComponent = ({className, block}: Props) => {
+    const content = (
+        <div className={className}>
+            {block.operators?.length
+                ? block.operators.map((item) => <div key={item}>{item}</div>)
+                : block.name}
+            {block.tables?.map((table, index) => (
+                <div key={`${table}-${index}`} className={b('stage-table-row')} title={table}>
+                    {index === 0 ? <Text color="secondary">{i18n('label_tables')}: </Text> : null}
+                    {table}
+                </div>
+            ))}
+        </div>
+    );
+
+    if (!block.stats?.length) {
+        return content;
+    }
+
+    return <TooltipComponent block={block}>{content}</TooltipComponent>;
+};

package/src/components/Graph/FullViewportBackground.ts

@@ -0,0 +1,122 @@
+import {Component} from '@gravity-ui/graph';
+
+interface FullViewportBackgroundContext extends Record<string, unknown> {
+    camera: {
+        getCameraState(): {
+            relativeX: number;
+            relativeY: number;
+            relativeWidth: number;
+            relativeHeight: number;
+            scale: number;
+        };
+    };
+    colors: {
+        canvas: {
+            dots: string;
+            layerBackground: string;
+        };
+    };
+    constants: {
+        block: {
+            SCALES: number[];
+        };
+        system: {
+            GRID_SIZE: number;
+        };
+    };
+    ctx: CanvasRenderingContext2D;
+}
+
+const VIEWPORT_PADDING = 10;
+const DOT_SIZE = 2;
+const LARGE_DOT_MULTIPLIER = 3;
+const PATTERN_GRID_SIZE = 5;
+
+class FullViewportBackgroundComponent extends Component {
+    private patterns?: {normal: CanvasPattern; simple: CanvasPattern};
+    private patternsColor?: string;
+    private patternsGridSize?: number;
+
+    protected render() {
+        const {camera, colors, constants, ctx} = this.context as FullViewportBackgroundContext;
+        const cameraState = camera.getCameraState();
+        const x = -cameraState.relativeX - VIEWPORT_PADDING;
+        const y = -cameraState.relativeY - VIEWPORT_PADDING;
+        const width = cameraState.relativeWidth + VIEWPORT_PADDING * 2;
+        const height = cameraState.relativeHeight + VIEWPORT_PADDING * 2;
+
+        ctx.fillStyle = colors.canvas.layerBackground;
+        ctx.fillRect(x, y, width, height);
+
+        if (cameraState.scale < constants.block.SCALES[0]) {
+            return;
+        }
+
+        this.preparePatterns(colors.canvas.dots, constants.system.GRID_SIZE);
+        if (!this.patterns) {
+            return;
+        }
+
+        ctx.fillStyle =
+            cameraState.scale > constants.block.SCALES[2]
+                ? this.patterns.normal
+                : this.patterns.simple;
+        ctx.fillRect(x, y, width, height);
+    }
+
+    private preparePatterns(color: string, gridSize: number) {
+        if (this.patterns && this.patternsColor === color && this.patternsGridSize === gridSize) {
+            return;
+        }
+
+        const normal = this.createPattern(color, gridSize, false);
+        const simple = this.createPattern(color, gridSize, true);
+
+        if (normal && simple) {
+            this.patterns = {normal, simple};
+            this.patternsColor = color;
+            this.patternsGridSize = gridSize;
+        }
+    }
+
+    private createPattern(color: string, gridSize: number, simple: boolean) {
+        const {ctx} = this.context as FullViewportBackgroundContext;
+        const patternCanvas = document.createElement('canvas');
+        const patternSize = PATTERN_GRID_SIZE * gridSize;
+        patternCanvas.width = patternSize;
+        patternCanvas.height = patternSize;
+
+        const patternContext = patternCanvas.getContext('2d');
+        if (!patternContext) {
+            return null;
+        }
+
+        patternContext.fillStyle = color;
+
+        for (let row = -1; row <= PATTERN_GRID_SIZE; row += 1) {
+            for (let column = -1; column <= PATTERN_GRID_SIZE; column += 1) {
+                if (row % PATTERN_GRID_SIZE === 0 && column % PATTERN_GRID_SIZE === 0) {
+                    const largeDotSize = DOT_SIZE * LARGE_DOT_MULTIPLIER;
+                    patternContext.fillRect(
+                        row * gridSize - largeDotSize / 2,
+                        column * gridSize - largeDotSize / 2,
+                        largeDotSize,
+                        largeDotSize,
+                    );
+                } else if (!simple) {
+                    patternContext.fillRect(
+                        row * gridSize - DOT_SIZE / 2,
+                        column * gridSize - DOT_SIZE / 2,
+                        DOT_SIZE,
+                        DOT_SIZE,
+                    );
+                }
+            }
+        }
+
+        return ctx.createPattern(patternCanvas, 'repeat');
+    }
+}
+
+export const FullViewportBackground =
+    FullViewportBackgroundComponent as unknown as typeof Component;

package/src/components/Graph/GraphControls.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import type {Graph} from '@gravity-ui/graph';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+
+import i18n from './i18n';
+
+import MagnifierMinusIcon from '@gravity-ui/icons/svgs/magnifier-minus.svg';
+import MagnifierPlusIcon from '@gravity-ui/icons/svgs/magnifier-plus.svg';
+
+const b = cn('ydb-gravity-graph');
+
+const ZOOM_STEP = 1.25;
+
+interface Props {
+    graph: Graph;
+}
+
+export const GraphControls = ({graph}: Props) => {
+    const onZoomInClick = React.useCallback(() => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale * ZOOM_STEP});
+    }, [graph]);
+
+    const onZoomOutClick = React.useCallback(() => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale / ZOOM_STEP});
+    }, [graph]);
+
+    const onResetZoomClick = React.useCallback(() => {
+        graph.zoom({scale: 1});
+    }, [graph]);
+
+    return (
+        <div className={b('zoom-controls')}>
+            <Button view="raised" onClick={onZoomInClick} aria-label={i18n('action_zoom-in')}>
+                <Icon data={MagnifierPlusIcon} size={16} />
+            </Button>
+            <Button view="raised" onClick={onZoomOutClick} aria-label={i18n('action_zoom-out')}>
+                <Icon data={MagnifierMinusIcon} size={16} />
+            </Button>
+            <Button view="raised" onClick={onResetZoomClick}>
+                1:1
+            </Button>
+        </div>
+    );
+};

package/src/components/Graph/GravityGraph.scss

@@ -0,0 +1,131 @@
+.ydb-gravity-graph {
+    &__block {
+        cursor: auto;
+
+        border: none;
+        background: none;
+    }
+
+    &__block-content {
+        width: 100%;
+        padding: 8px 12px;
+
+        font-family: var(--g-font-family);
+        font-size: var(--g-text-body-short-font-size);
+        line-height: var(--g-text-body-short-line-height);
+
+        border: 1px solid var(--g-color-line-generic);
+        background: var(--g-color-base-float);
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
+
+        &[aria-haspopup='dialog'] {
+            cursor: pointer;
+        }
+    }
+
+    &__block-id {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+
+        font-size: 10px;
+        line-height: 1;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__block-content.query {
+        height: 100%;
+
+        border-radius: 50%;
+    }
+
+    &__block-content.result {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__block-content.stage {
+        border-radius: 6px;
+    }
+
+    &__stage-table-row {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__block-content.connection {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        color: var(--g-color-text-info-heavy);
+        border: 1px solid var(--g-color-line-info);
+        border-radius: 6px;
+        background: var(--g-color-base-info-light);
+        box-shadow: none;
+    }
+
+    &__tooltip-content {
+        overflow: auto;
+
+        width: 300px;
+        max-height: 90vh;
+        padding: 0 8px 8px;
+
+        font-family: var(--g-font-family);
+        font-size: var(--g-text-body-short-font-size);
+        line-height: var(--g-text-body-short-line-height);
+    }
+
+    &__tooltip-tabs {
+        margin-bottom: 8px;
+    }
+
+    &__tooltip-stat-row {
+        display: grid;
+        grid-template-columns: 100px auto;
+        gap: 8px;
+
+        margin: 4px 0 0;
+
+        span {
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+        }
+        span:nth-child(1) {
+            color: var(--g-color-text-secondary);
+        }
+        span:nth-child(2) {
+            word-wrap: break-word;
+        }
+    }
+
+    &__tooltip-stat-group {
+        margin-top: 8px;
+    }
+
+    &__tooltip-stat-group + &__tooltip-stat-group {
+        padding-top: 8px;
+
+        border-top: 1px dotted var(--g-color-line-generic);
+    }
+
+    &__tooltip-stat-group-name {
+        font-weight: bold;
+    }
+
+    &__zoom-controls {
+        position: absolute;
+        z-index: 999;
+        top: 8px;
+        right: 50px;
+
+        display: flex;
+        gap: 2px;
+    }
+}