ydb-embedded-ui 20.4.0 → 21.0.0

package/README.md

@@ -147,6 +147,47 @@ E2E tests are run in CI in the `e2e_tests` job. Each shard starts `ghcr.io/ydb-p
 
 ## Making a production bundle.
 
+### Web Workers for package consumers
+
+The computation graph calculates its layout in a Web Worker. By default, the package uses the native bundler pattern:
+
+```ts
+new Worker(new URL('./graphLayout.worker', import.meta.url));
+```
+
+Bundlers that support this pattern, including Rsbuild and Rspack, emit the worker as a separate asset automatically. The emitted worker script must be deployed with the application, served from the application origin, and allowed by the application's Content Security Policy:
+
+```http
+Content-Security-Policy: worker-src 'self'
+```
+
+If application chunks are loaded from a CDN, configure the bundler to keep native worker scripts on the application origin. For example, with Rspack:
+
+```ts
+export default {
+  output: {
+    workerPublicPath: '/build/',
+  },
+};
+```
+
+Consumers that need to resolve the worker URL at runtime can provide a worker factory before rendering `SingleClusterApp` or `MultiClusterApp`. The factory must return a new worker instance on every call:
+
+```ts
+import {configureUIFactory} from 'ydb-embedded-ui';
+
+configureUIFactory({
+  createGraphLayoutWorker: () =>
+    new Worker(window.runtimeConfig.ydbGraphLayoutWorkerUrl, {
+      name: 'ydb-graph-layout',
+    }),
+});
+```
+
+Use `ydb-embedded-ui/dist/graphLayout.worker.js` as the worker entry in the consumer build. Process this entry with the consumer's bundler rather than copying it as an unbundled static file. Publish the resulting worker bundle at the URL returned by the runtime configuration.
+
+If the browser cannot create or load the worker, the graph retries the layout on the main thread. This fallback preserves functionality, but consumers should configure worker delivery to keep expensive layout work off the UI thread.
+
 Base command `npm run build` builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 

package/dist/components/AutoRefreshControl/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "Refresh" | "None" | "15 sec" | "1 min" | "2 min" | "5 min", params?: import("@gravity-ui/i18n").Params) => string;
+declare const _default: (key: "None" | "Refresh" | "15 sec" | "1 min" | "2 min" | "5 min", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;

package/dist/components/FullNodeViewer/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "version" | "database" | "links" | "no-data" | "dc" | "uptime" | "rack" | "la-interval-1m" | "la-interval-5m" | "la-interval-15m" | "developer-ui" | "title.common-info" | "title.endpoints" | "title.roles" | "title.pools" | "title.load-average", params?: import("@gravity-ui/i18n").Params) => string;
+declare const _default: (key: "links" | "version" | "database" | "no-data" | "dc" | "uptime" | "rack" | "la-interval-1m" | "la-interval-5m" | "la-interval-15m" | "developer-ui" | "title.common-info" | "title.endpoints" | "title.roles" | "title.pools" | "title.load-average", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;

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

@@ -0,0 +1,7 @@
+import type { ExtendedTBlock } from '../types';
+type Props = {
+    block: ExtendedTBlock;
+    className: string;
+};
+export declare const ConnectionBlockComponent: ({ className, block }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/BlockComponents/ConnectionBlockComponent.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowsExpandHorizontal, DatabaseFill, GripHorizontal, MapPin, Shuffle, } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { TooltipComponent } from '../TooltipComponent';
+const getIcon = (name) => {
+    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 }) => {
+    var _a;
+    const icon = getIcon(block.name);
+    const content = (_jsxs("div", { className: className, children: [icon && _jsx(Icon, { data: icon }), " ", block.name] }));
+    if (!((_a = block.stats) === null || _a === void 0 ? void 0 : _a.length)) {
+        return content;
+    }
+    return _jsx(TooltipComponent, { block: block, children: content });
+};
+//# sourceMappingURL=ConnectionBlockComponent.js.map

package/dist/components/Graph/BlockComponents/ConnectionBlockComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionBlockComponent.js","sourceRoot":"","sources":["../../../../src/components/Graph/BlockComponents/ConnectionBlockComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,MAAM,EACN,OAAO,GACV,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAQrD,MAAM,OAAO,GAAG,CAAC,IAAY,EAAwB,EAAE;IACnD,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,OAAO;YACR,OAAO,YAAY,CAAC;QACxB,KAAK,UAAU;YACX,OAAO,cAAc,CAAC;QAC1B,KAAK,aAAa;YACd,OAAO,OAAO,CAAC;QACnB,KAAK,KAAK;YACN,OAAO,MAAM,CAAC;QAClB,KAAK,WAAW;YACZ,OAAO,sBAAsB,CAAC;QAClC;YACI,OAAO,SAAS,CAAC;IACzB,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAC,SAAS,EAAE,KAAK,EAAQ,EAAE,EAAE;;IAClE,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,OAAO,GAAG,CACZ,eAAK,SAAS,EAAE,SAAS,aACpB,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,OAAG,KAAK,CAAC,IAAI,IACxC,CACT,CAAC;IAEF,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,CAAA,EAAE,CAAC;QACvB,OAAO,OAAO,CAAC;IACnB,CAAC;IAED,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAAG,OAAO,GAAoB,CAAC;AACxE,CAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+type Props = {
+    className: string;
+};
+export declare const QueryBlockComponent: ({ className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/BlockComponents/QueryBlockComponent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const QueryBlockComponent = ({ className }) => {
+    return _jsx("div", { className: className });
+};
+//# sourceMappingURL=QueryBlockComponent.js.map

package/dist/components/Graph/BlockComponents/QueryBlockComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBlockComponent.js","sourceRoot":"","sources":["../../../../src/components/Graph/BlockComponents/QueryBlockComponent.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAC,SAAS,EAAQ,EAAE,EAAE;IACtD,OAAO,cAAK,SAAS,EAAE,SAAS,GAAI,CAAC;AACzC,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { TBlock } from '@gravity-ui/graph';
+type Props = {
+    block: TBlock;
+    className: string;
+};
+export declare const ResultBlockComponent: ({ className, block }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/BlockComponents/ResultBlockComponent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ResultBlockComponent = ({ className, block }) => {
+    return _jsx("div", { className: className, children: block.name });
+};
+//# sourceMappingURL=ResultBlockComponent.js.map

package/dist/components/Graph/BlockComponents/ResultBlockComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultBlockComponent.js","sourceRoot":"","sources":["../../../../src/components/Graph/BlockComponents/ResultBlockComponent.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAC,SAAS,EAAE,KAAK,EAAQ,EAAE,EAAE;IAC9D,OAAO,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,CAAC,IAAI,GAAO,CAAC;AACzD,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { ExtendedTBlock } from '../types';
+type Props = {
+    block: ExtendedTBlock;
+    className: string;
+};
+export declare const StageBlockComponent: ({ className, block }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/BlockComponents/StageBlockComponent.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { cn } from '../../../utils/cn';
+import { TooltipComponent } from '../TooltipComponent';
+import i18n from '../i18n';
+const b = cn('ydb-gravity-graph');
+export const StageBlockComponent = ({ className, block }) => {
+    var _a, _b, _c;
+    const content = (_jsxs("div", { className: className, children: [((_a = block.operators) === null || _a === void 0 ? void 0 : _a.length)
+                ? block.operators.map((item) => _jsx("div", { children: item }, item))
+                : block.name, (_b = block.tables) === null || _b === void 0 ? void 0 : _b.map((table, index) => (_jsxs("div", { className: b('stage-table-row'), title: table, children: [index === 0 ? _jsxs(Text, { color: "secondary", children: [i18n('label_tables'), ": "] }) : null, table] }, `${table}-${index}`)))] }));
+    if (!((_c = block.stats) === null || _c === void 0 ? void 0 : _c.length)) {
+        return content;
+    }
+    return _jsx(TooltipComponent, { block: block, children: content });
+};
+//# sourceMappingURL=StageBlockComponent.js.map

package/dist/components/Graph/BlockComponents/StageBlockComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageBlockComponent.js","sourceRoot":"","sources":["../../../../src/components/Graph/BlockComponents/StageBlockComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,EAAE,EAAC,MAAM,mBAAmB,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AACrD,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,MAAM,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,CAAC;AAOlC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAC,SAAS,EAAE,KAAK,EAAQ,EAAE,EAAE;;IAC7D,MAAM,OAAO,GAAG,CACZ,eAAK,SAAS,EAAE,SAAS,aACpB,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,MAAM;gBACpB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,wBAAiB,IAAI,IAAX,IAAI,CAAc,CAAC;gBAC7D,CAAC,CAAC,KAAK,CAAC,IAAI,EACf,MAAA,KAAK,CAAC,MAAM,0CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,eAA+B,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,aACvE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAC,IAAI,IAAC,KAAK,EAAC,WAAW,aAAE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAC5E,KAAK,KAFA,GAAG,KAAK,IAAI,KAAK,EAAE,CAGvB,CACT,CAAC,IACA,CACT,CAAC;IAEF,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,CAAA,EAAE,CAAC;QACvB,OAAO,OAAO,CAAC;IACnB,CAAC;IAED,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAAG,OAAO,GAAoB,CAAC;AACxE,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Component } from '@gravity-ui/graph';
+export declare const FullViewportBackground: typeof Component;

package/dist/components/Graph/FullViewportBackground.js

@@ -0,0 +1,67 @@
+import { Component } from '@gravity-ui/graph';
+const VIEWPORT_PADDING = 10;
+const DOT_SIZE = 2;
+const LARGE_DOT_MULTIPLIER = 3;
+const PATTERN_GRID_SIZE = 5;
+class FullViewportBackgroundComponent extends Component {
+    render() {
+        const { camera, colors, constants, ctx } = this.context;
+        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);
+    }
+    preparePatterns(color, gridSize) {
+        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;
+        }
+    }
+    createPattern(color, gridSize, simple) {
+        const { ctx } = this.context;
+        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;
+//# sourceMappingURL=FullViewportBackground.js.map

package/dist/components/Graph/FullViewportBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullViewportBackground.js","sourceRoot":"","sources":["../../../src/components/Graph/FullViewportBackground.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+import type { Graph } from '@gravity-ui/graph';
+interface Props {
+    graph: Graph;
+}
+export declare const GraphControls: ({ graph }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/GraphControls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+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;
+export const GraphControls = ({ graph }) => {
+    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 (_jsxs("div", { className: b('zoom-controls'), children: [_jsx(Button, { view: "raised", onClick: onZoomInClick, "aria-label": i18n('action_zoom-in'), children: _jsx(Icon, { data: MagnifierPlusIcon, size: 16 }) }), _jsx(Button, { view: "raised", onClick: onZoomOutClick, "aria-label": i18n('action_zoom-out'), children: _jsx(Icon, { data: MagnifierMinusIcon, size: 16 }) }), _jsx(Button, { view: "raised", onClick: onResetZoomClick, children: "1:1" })] }));
+};
+//# sourceMappingURL=GraphControls.js.map

package/dist/components/Graph/GraphControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphControls.js","sourceRoot":"","sources":["../../../src/components/Graph/GraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,OAAO,kBAAkB,MAAM,4CAA4C,CAAC;AAC5E,OAAO,iBAAiB,MAAM,2CAA2C,CAAC;AAE1E,MAAM,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,CAAC;AAElC,MAAM,SAAS,GAAG,IAAI,CAAC;AAMvB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAC,KAAK,EAAQ,EAAE,EAAE;IAC5C,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,CAAC;QACzD,KAAK,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,WAAW,GAAG,SAAS,EAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,CAAC;QACzD,KAAK,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,WAAW,GAAG,SAAS,EAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,KAAK,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,CAAC,EAAC,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,gBAAc,IAAI,CAAC,gBAAgB,CAAC,YAC5E,KAAC,IAAI,IAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,EAAE,GAAI,GACtC,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,gBAAc,IAAI,CAAC,iBAAiB,CAAC,YAC9E,KAAC,IAAI,IAAC,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,GAAI,GACvC,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,gBAAgB,oBAEtC,IACP,CACT,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { Data } from './types';
+import './GravityGraph.scss';
+interface Props<T> {
+    data: Data<T>;
+    onError: (error: Error) => void;
+    theme?: string;
+}
+export declare function GravityGraph<T>({ data, onError, theme }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/GravityGraph.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { GraphState } from '@gravity-ui/graph';
+import { GraphBlock, GraphCanvas, useGraph, useGraphEvent } from '@gravity-ui/graph/react';
+import { uiFactory } from '../../uiFactory/uiFactory';
+import { cn } from '../../utils/cn';
+const b = cn('ydb-gravity-graph');
+const GRAPH_FIT_PADDING = 40;
+import { ConnectionBlockComponent } from './BlockComponents/ConnectionBlockComponent';
+import { QueryBlockComponent } from './BlockComponents/QueryBlockComponent';
+import { ResultBlockComponent } from './BlockComponents/ResultBlockComponent';
+import { StageBlockComponent } from './BlockComponents/StageBlockComponent';
+import { FullViewportBackground } from './FullViewportBackground';
+import { GraphControls } from './GraphControls';
+import { NonSelectableConnection } from './NonSelectableConnection';
+import { graphColorsConfig } from './colorsConfig';
+import { runTreeLayout } from './runTreeLayout';
+import { parseCustomPropertyValue } from './utils';
+import './GravityGraph.scss';
+const config = {
+    settings: {
+        background: FullViewportBackground,
+        connection: NonSelectableConnection,
+        showConnectionArrows: false,
+    },
+};
+const createGraphLayoutWorker = () => {
+    if (uiFactory.createGraphLayoutWorker) {
+        return uiFactory.createGraphLayoutWorker();
+    }
+    return new Worker(new URL('../../graphLayout.worker', import.meta.url));
+};
+const renderBlockFn = (graph, block) => {
+    const map = {
+        query: QueryBlockComponent,
+        result: ResultBlockComponent,
+        stage: StageBlockComponent,
+        connection: ConnectionBlockComponent,
+    };
+    const Component = map[block.is];
+    return (_jsx(GraphBlock, { graph: graph, block: block, className: b('block'), children: Component ? (_jsxs(React.Fragment, { children: [_jsx(Component, { graph: graph, block: block, className: b('block-content', block.is) }), block.planNodeId !== undefined && block.is !== 'result' && (_jsxs("div", { className: b('block-id'), children: ["#", block.planNodeId] }))] })) : (block.id) }));
+};
+export function GravityGraph({ data, onError, theme }) {
+    const { graph, start } = useGraph(config);
+    const cameraSizeRef = React.useRef({ width: 0, height: 0 });
+    const graphBlockIdsRef = React.useRef([]);
+    const fitFrameRef = React.useRef();
+    const fitGraphToViewport = React.useCallback(() => {
+        const { width, height } = graph.cameraService.getCameraState();
+        if (graph.state !== GraphState.READY ||
+            width <= 0 ||
+            height <= 0 ||
+            graphBlockIdsRef.current.length === 0) {
+            return;
+        }
+        graph.zoomTo(graphBlockIdsRef.current, { padding: GRAPH_FIT_PADDING });
+    }, [graph]);
+    const scheduleGraphFit = React.useCallback(() => {
+        if (fitFrameRef.current !== undefined) {
+            globalThis.cancelAnimationFrame(fitFrameRef.current);
+        }
+        // camera-change is emitted before its new size is committed.
+        fitFrameRef.current = globalThis.requestAnimationFrame(() => {
+            fitFrameRef.current = undefined;
+            fitGraphToViewport();
+        });
+    }, [fitGraphToViewport]);
+    React.useEffect(() => {
+        return () => {
+            if (fitFrameRef.current !== undefined) {
+                globalThis.cancelAnimationFrame(fitFrameRef.current);
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        return runTreeLayout({
+            request: {
+                nodes: data.nodes,
+                links: data.links,
+            },
+            createWorker: createGraphLayoutWorker,
+            onResult: ({ layout, edges }) => {
+                graphBlockIdsRef.current = layout.map(({ id }) => id);
+                graph.setEntities({
+                    blocks: layout,
+                    connections: edges,
+                });
+                scheduleGraphFit();
+            },
+            onError,
+        });
+    }, [data.nodes, data.links, graph, onError, scheduleGraphFit]);
+    React.useEffect(() => {
+        graph.setColors(parseCustomPropertyValue(graphColorsConfig));
+    }, [graph, theme]);
+    useGraphEvent(graph, 'state-change', ({ state }) => {
+        if (state === GraphState.ATTACHED) {
+            graph.cameraService.set({
+                scale: 1,
+                scaleMax: 1.5,
+            });
+            graph.setConstants({
+                block: {
+                    SCALES: [0.125, 0.225, 0.5], // Detailed view stays until zoom = 0.5
+                },
+            });
+            start();
+        }
+        else if (state === GraphState.READY) {
+            scheduleGraphFit();
+        }
+    });
+    useGraphEvent(graph, 'camera-change', ({ width, height }) => {
+        const previousSize = cameraSizeRef.current;
+        cameraSizeRef.current = { width, height };
+        if (previousSize.width !== width || previousSize.height !== height) {
+            scheduleGraphFit();
+        }
+    });
+    return (_jsxs(React.Fragment, { children: [_jsx(GraphCanvas, { graph: graph, renderBlock: renderBlockFn }), _jsx(GraphControls, { graph: graph })] }));
+}
+//# sourceMappingURL=GravityGraph.js.map

package/dist/components/Graph/GravityGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GravityGraph.js","sourceRoot":"","sources":["../../../src/components/Graph/GravityGraph.tsx"],"names":[],"mappings":"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"}

package/dist/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;
+    }
+}

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

@@ -0,0 +1,9 @@
+import { MultipointConnection } from '@gravity-ui/graph/react';
+/**
+ * Кастомный класс соединения, который отключает визуальное выделение
+ * Наследуется от MultipointConnection и переопределяет поведение
+ */
+export declare class NonSelectableConnection extends MultipointConnection {
+    cursor: 'pointer';
+    protected handleEvent(event: Event): void;
+}

package/dist/components/Graph/NonSelectableConnection.js

@@ -0,0 +1,16 @@
+import { MultipointConnection } from '@gravity-ui/graph/react';
+/**
+ * Кастомный класс соединения, который отключает визуальное выделение
+ * Наследуется от MultipointConnection и переопределяет поведение
+ */
+export class NonSelectableConnection extends MultipointConnection {
+    constructor() {
+        super(...arguments);
+        this.cursor = 'pointer';
+    }
+    // Переопределяем метод для предотвращения выделения при клике
+    handleEvent(event) {
+        event.stopPropagation();
+    }
+}
+//# sourceMappingURL=NonSelectableConnection.js.map

package/dist/components/Graph/NonSelectableConnection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NonSelectableConnection.js","sourceRoot":"","sources":["../../../src/components/Graph/NonSelectableConnection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAE7D;;;GAGG;AACH,MAAM,OAAO,uBAAwB,SAAQ,oBAAoB;IAAjE;;QACa,WAAM,GAAc,SAAS,CAAC;IAM3C,CAAC;IAJG,8DAA8D;IAC3C,WAAW,CAAC,KAAY;QACvC,KAAK,CAAC,eAAe,EAAE,CAAC;IAC5B,CAAC;CACJ"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtendedTBlock } from './types';
+type Props = {
+    block: ExtendedTBlock;
+    children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+};
+export declare const TooltipComponent: ({ block, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};