ydb-embedded-ui 20.4.0 → 21.0.0

package/dist/components/Graph/TooltipComponent.js

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Popover, Tab, TabList, TabPanel, TabProvider } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
+const b = cn('ydb-gravity-graph');
+const getStatsContent = (stat) => {
+    var _a;
+    if ('value' in stat) {
+        return (_jsxs("p", { className: b('tooltip-stat-row'), children: [_jsxs("span", { children: [stat.name, ":"] }), _jsx("span", { children: stat.value })] }, stat.name));
+    }
+    return (_jsxs("section", { className: b('tooltip-stat-group'), children: [_jsxs("div", { className: b('tooltip-stat-group-name'), children: [stat.name, ":"] }), (_a = stat.items) === null || _a === void 0 ? void 0 : _a.map(({ name, value }) => (_jsxs("p", { className: b('tooltip-stat-row'), children: [_jsxs("span", { children: [name, ":"] }), _jsx("span", { children: value })] }, name)))] }, stat.name));
+};
+const useTooltipContent = (block) => {
+    var _a, _b, _c;
+    const firstTab = ((_b = (_a = block === null || block === void 0 ? void 0 : block.stats) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.group) || '';
+    const [activeTab, setActiveTab] = React.useState(firstTab);
+    const validatedActiveTab = ((_c = block.stats) === null || _c === void 0 ? void 0 : _c.some(({ group }) => group === activeTab))
+        ? activeTab
+        : firstTab;
+    React.useEffect(() => {
+        if (activeTab !== validatedActiveTab) {
+            setActiveTab(validatedActiveTab);
+        }
+    }, [activeTab, validatedActiveTab]);
+    return React.useMemo(() => {
+        var _a, _b;
+        return (_jsxs(TabProvider, { value: validatedActiveTab, onUpdate: setActiveTab, children: [_jsx(TabList, { className: b('tooltip-tabs'), children: (_a = block === null || block === void 0 ? void 0 : block.stats) === null || _a === void 0 ? void 0 : _a.map((item) => (_jsx(Tab, { value: item.group, children: item.group }, item.group))) }), (_b = block === null || block === void 0 ? void 0 : block.stats) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    var _a;
+                    return (_jsx(TabPanel, { value: item.group, children: (_a = item.stats) === null || _a === void 0 ? void 0 : _a.map(getStatsContent) }, item.group));
+                })] }));
+    }, [block === null || block === void 0 ? void 0 : block.stats, validatedActiveTab]);
+};
+export const TooltipComponent = ({ block, children }) => {
+    var _a, _b;
+    const content = useTooltipContent(block);
+    const trigger = React.cloneElement(children, {
+        role: (_a = children.props.role) !== null && _a !== void 0 ? _a : 'button',
+        tabIndex: (_b = children.props.tabIndex) !== null && _b !== void 0 ? _b : 0,
+        onKeyDown: (event) => {
+            var _a, _b;
+            (_b = (_a = children.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                event.currentTarget.click();
+            }
+            else if (event.key === ' ') {
+                event.preventDefault();
+            }
+        },
+        onKeyUp: (event) => {
+            var _a, _b;
+            (_b = (_a = children.props).onKeyUp) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            if (!event.defaultPrevented && event.key === ' ') {
+                event.currentTarget.click();
+            }
+        },
+    });
+    return (_jsx(Popover, { content: content, hasArrow: true, trigger: "click", placement: "right-start", className: "ydb-gravity-graph__tooltip-content", strategy: "fixed", children: trigger }));
+};
+//# sourceMappingURL=TooltipComponent.js.map

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

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

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

@@ -0,0 +1,19 @@
+export type AbstractGraphColorsConfig = Partial<Record<string, Partial<Record<string, string>>>>;
+export declare const graphColorsConfig: {
+    readonly canvas: {
+        readonly belowLayerBackground: "#0000";
+        readonly border: "#0000";
+        readonly dots: "var(--g-color-line-generic)";
+        readonly layerBackground: "var(--g-color-base-background)";
+    };
+    readonly block: {
+        readonly text: "var(--g-color-text-primary)";
+        readonly background: "var(--g-color-base-float)";
+        readonly border: "var(--g-color-line-generic-solid)";
+    };
+    readonly connection: {
+        readonly background: "var(--g-color-line-generic-solid)";
+        readonly hoverBackground: "var(--g-color-line-generic-solid)";
+        readonly selectedBackground: "var(--g-color-line-generic-solid)";
+    };
+};

package/dist/components/Graph/colorsConfig.js

@@ -0,0 +1,20 @@
+export const graphColorsConfig = {
+    // Default @gravity-ui/graph colors
+    canvas: {
+        belowLayerBackground: '#0000',
+        border: '#0000',
+        dots: 'var(--g-color-line-generic)',
+        layerBackground: 'var(--g-color-base-background)',
+    },
+    block: {
+        text: 'var(--g-color-text-primary)',
+        background: 'var(--g-color-base-float)',
+        border: 'var(--g-color-line-generic-solid)',
+    },
+    connection: {
+        background: 'var(--g-color-line-generic-solid)',
+        hoverBackground: 'var(--g-color-line-generic-solid)',
+        selectedBackground: 'var(--g-color-line-generic-solid)',
+    },
+};
+//# sourceMappingURL=colorsConfig.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorsConfig.js","sourceRoot":"","sources":["../../../src/components/Graph/colorsConfig.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,mCAAmC;IACnC,MAAM,EAAE;QACJ,oBAAoB,EAAE,OAAO;QAC7B,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,6BAA6B;QACnC,eAAe,EAAE,gCAAgC;KACpD;IACD,KAAK,EAAE;QACH,IAAI,EAAE,6BAA6B;QACnC,UAAU,EAAE,2BAA2B;QACvC,MAAM,EAAE,mCAAmC;KAC9C;IACD,UAAU,EAAE;QACR,UAAU,EAAE,mCAAmC;QAC/C,eAAe,EAAE,mCAAmC;QACpD,kBAAkB,EAAE,mCAAmC;KAC1D;CACyC,CAAC"}

package/dist/components/Graph/i18n/en.json

@@ -0,0 +1,5 @@
+{
+    "action_zoom-in": "Zoom in",
+    "action_zoom-out": "Zoom out",
+    "label_tables": "Tables"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "action_zoom-in" | "action_zoom-out" | "label_tables", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/components/Graph/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-gravity-graph';
+export default registerKeysets(COMPONENT, { en });
+//# sourceMappingURL=index.js.map

package/dist/components/Graph/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Graph/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,WAAW,CAAC;AAE3B,MAAM,SAAS,GAAG,mBAAmB,CAAC;AAEtC,eAAe,eAAe,CAAC,SAAS,EAAE,EAAC,EAAE,EAAC,CAAC,CAAC"}

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

@@ -0,0 +1,12 @@
+import type { TreeLayoutRequest, TreeLayoutResult } from './types';
+type Schedule = (callback: () => void) => () => void;
+interface RunTreeLayoutOptions {
+    request: TreeLayoutRequest;
+    createWorker: () => Worker;
+    calculateLayout?: () => TreeLayoutResult;
+    onResult: (result: TreeLayoutResult) => void;
+    onError: (error: Error) => void;
+    schedule?: Schedule;
+}
+export declare function runTreeLayout({ request, createWorker, calculateLayout, onResult, onError, schedule, }: RunTreeLayoutOptions): () => void;
+export {};

package/dist/components/Graph/runTreeLayout.js

@@ -0,0 +1,75 @@
+import { prepareTreeLayout } from './treeLayout';
+const scheduleOnMainThread = (callback) => {
+    const timeoutId = globalThis.setTimeout(callback, 0);
+    return () => globalThis.clearTimeout(timeoutId);
+};
+const normalizeError = (error) => {
+    return error instanceof Error ? error : new Error(String(error));
+};
+export function runTreeLayout({ request, createWorker, calculateLayout = () => prepareTreeLayout(request), onResult, onError, schedule = scheduleOnMainThread, }) {
+    let worker;
+    let cancelFallback;
+    let cancelled = false;
+    let settled = false;
+    const terminateWorker = () => {
+        worker === null || worker === void 0 ? void 0 : worker.terminate();
+        worker = undefined;
+    };
+    const reportError = (error) => {
+        if (cancelled || settled) {
+            return;
+        }
+        settled = true;
+        terminateWorker();
+        onError(normalizeError(error));
+    };
+    const complete = (result) => {
+        if (cancelled || settled) {
+            return;
+        }
+        settled = true;
+        terminateWorker();
+        onResult(result);
+    };
+    const scheduleFallback = () => {
+        if (cancelled || settled || cancelFallback) {
+            return;
+        }
+        terminateWorker();
+        cancelFallback = schedule(() => {
+            cancelFallback = undefined;
+            if (cancelled || settled) {
+                return;
+            }
+            try {
+                complete(calculateLayout());
+            }
+            catch (error) {
+                reportError(error);
+            }
+        });
+    };
+    try {
+        worker = createWorker();
+        worker.onmessage = ({ data }) => {
+            if (data.type === 'success') {
+                complete(data.result);
+            }
+            else {
+                reportError(new Error(data.error));
+            }
+        };
+        worker.onerror = scheduleFallback;
+        worker.onmessageerror = scheduleFallback;
+        worker.postMessage(request);
+    }
+    catch (_a) {
+        scheduleFallback();
+    }
+    return () => {
+        cancelled = true;
+        cancelFallback === null || cancelFallback === void 0 ? void 0 : cancelFallback();
+        terminateWorker();
+    };
+}
+//# sourceMappingURL=runTreeLayout.js.map

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

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

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

@@ -0,0 +1,2 @@
+import type { TreeLayoutRequest, TreeLayoutResult } from './types';
+export declare function prepareTreeLayout({ nodes, links }: TreeLayoutRequest): TreeLayoutResult;

package/dist/components/Graph/treeLayout.js

@@ -0,0 +1,284 @@
+import { prepareBlocks, prepareConnections } from './utils';
+class TreeLayoutEngine {
+    constructor(blocks, connections, options = {}) {
+        this.blocks = new Map(blocks.map((block) => [block.id, { ...block }]));
+        this.connections = connections;
+        // Layout settings
+        this.options = {
+            horizontalSpacing: options.horizontalSpacing || 40, // horizontal distance between blocks
+            padding: 12,
+            verticalSpacing: options.verticalSpacing || 20, // vertical distance between levels
+            ...options,
+        };
+        this.tree = null;
+        this.levels = [];
+    }
+    // Building a tree structure
+    buildTree() {
+        const childrenMap = new Map();
+        const parentMap = new Map();
+        for (const block of this.blocks.values()) {
+            childrenMap.set(block.id, []);
+        }
+        // Setting connections
+        for (const connection of this.connections) {
+            const parent = connection.sourceBlockId;
+            const child = connection.targetBlockId;
+            childrenMap.get(parent).push(child);
+            parentMap.set(child, parent);
+        }
+        // Find root (a node without a parent)
+        const rootId = Array.from(this.blocks.keys()).find((id) => !parentMap.has(id));
+        if (!rootId) {
+            throw new Error('Root node not found');
+        }
+        // Recursively building a tree
+        const buildNode = (nodeId, level = 0) => {
+            const block = this.blocks.get(nodeId);
+            const children = childrenMap
+                .get(nodeId)
+                .map((childId) => buildNode(childId, level + 1));
+            return {
+                id: nodeId,
+                block: block,
+                children: children,
+                level: level,
+                x: 0,
+                y: 0,
+                subtreeWidth: 0,
+            };
+        };
+        this.tree = buildNode(rootId);
+        return this.tree;
+    }
+    // Grouping nodes by levels
+    groupByLevels(node = this.tree, levels = []) {
+        if (!node) {
+            return levels;
+        }
+        if (!levels[node.level]) {
+            levels[node.level] = [];
+        }
+        levels[node.level].push(node);
+        for (const child of node.children) {
+            this.groupByLevels(child, levels);
+        }
+        this.levels = levels;
+        return levels;
+    }
+    // Calculating the width of the subtree for each node
+    calculateSubtreeWidths(node = this.tree) {
+        if (node.children.length === 0) {
+            // Leaf node - width is equal to the width of the block
+            node.subtreeWidth = node.block.width;
+        }
+        else {
+            // Recursively calculating the width for children
+            for (const child of node.children) {
+                this.calculateSubtreeWidths(child);
+            }
+            // Subtree width = sum of the widths of the children's subtrees + the margins between them
+            const childrenWidth = node.children.reduce((sum, child) => sum + child.subtreeWidth, 0);
+            const spacingWidth = (node.children.length - 1) * this.options.horizontalSpacing;
+            const totalChildrenWidth = childrenWidth + spacingWidth;
+            // Subtree width = the maximum of the width of the node itself and the total width of the children
+            node.subtreeWidth = Math.max(node.block.width, totalChildrenWidth);
+        }
+        return node.subtreeWidth;
+    }
+    // Placement of nodes by position
+    positionNodes() {
+        if (!this.tree) {
+            return;
+        }
+        // Calculating the Y coordinates for each level
+        let currentY = 0;
+        const levelY = [];
+        for (let level = 0; level < this.levels.length; level++) {
+            levelY[level] = currentY;
+            // We find the maximum height of the blocks at this level
+            const maxHeight = Math.max(...this.levels[level].map((node) => node.block.height));
+            currentY += maxHeight + this.options.verticalSpacing;
+        }
+        // Recursively placing nodes
+        const positionNode = (node, leftX) => {
+            // Setting the Y coordinate
+            node.y = levelY[node.level];
+            if (node.children.length === 0) {
+                // The leaf node is placed in the current position.
+                node.x = leftX;
+            }
+            else {
+                // Place children
+                let childX = leftX;
+                // If the node width is greater than the total width of the children, add an indentation.
+                const childrenWidth = node.children.reduce((sum, child) => sum + child.subtreeWidth, 0);
+                const spacingWidth = (node.children.length - 1) * this.options.horizontalSpacing;
+                const totalChildrenWidth = childrenWidth + spacingWidth;
+                if (node.block.width > totalChildrenWidth) {
+                    const extraSpace = (node.block.width - totalChildrenWidth) / 2;
+                    childX += extraSpace;
+                }
+                // Place each child
+                for (const child of node.children) {
+                    positionNode(child, childX);
+                    childX += child.subtreeWidth + this.options.horizontalSpacing;
+                }
+                // Center the parent node relative to the children
+                const firstChild = node.children[0];
+                const lastChild = node.children[node.children.length - 1];
+                const childrenCenter = (firstChild.x + lastChild.x + lastChild.block.width) / 2;
+                node.x = childrenCenter - node.block.width / 2;
+            }
+        };
+        positionNode(this.tree, 0);
+    }
+    // Normalization of coordinates with padding from the canvas edges
+    normalizeCoordinates() {
+        if (!this.tree) {
+            return;
+        }
+        const allNodes = [];
+        const collectNodes = (node) => {
+            allNodes.push(node);
+            for (const child of node.children) {
+                collectNodes(child);
+            }
+        };
+        collectNodes(this.tree);
+        const minX = Math.min(...allNodes.map((node) => node.x));
+        const minY = Math.min(...allNodes.map((node) => node.y));
+        const offsetX = this.options.padding - minX;
+        const offsetY = this.options.padding - minY;
+        for (const node of allNodes) {
+            node.x += offsetX;
+            node.y += offsetY;
+        }
+    }
+    // Main method of composition
+    layout() {
+        this.buildTree();
+        this.groupByLevels();
+        this.calculateSubtreeWidths();
+        this.positionNodes();
+        this.normalizeCoordinates();
+        return this.getLayoutResult();
+    }
+    // Getting the result of composition
+    getLayoutResult() {
+        if (!this.tree) {
+            return [];
+        }
+        const result = [];
+        const collectResults = (node) => {
+            result.push({
+                id: node.id,
+                x: node.x,
+                y: node.y,
+                width: node.block.width,
+                height: node.block.height,
+                level: node.level,
+                ...node.block,
+            });
+            for (const child of node.children) {
+                collectResults(child);
+            }
+        };
+        collectResults(this.tree);
+        return result;
+    }
+}
+// Function for using the algorithm
+function calculateTreeLayout(blocks, connections, options = {}) {
+    const engine = new TreeLayoutEngine(blocks, connections, options);
+    return engine.layout();
+}
+function calculateTreeEdges(layoutResult, connections) {
+    // Create a position map for convenience of search
+    const positionMap = new Map(layoutResult.map((item) => [item.id, item]));
+    // Group connections by parent block
+    const connectionsByParent = new Map();
+    for (const connection of connections) {
+        const parentId = connection.sourceBlockId;
+        if (!connectionsByParent.has(parentId)) {
+            connectionsByParent.set(parentId, []);
+        }
+        connectionsByParent.get(parentId).push(connection);
+    }
+    const connectionPaths = [];
+    // For each parent block, we calculate the paths to the children
+    for (const [parentId, parentConnections] of connectionsByParent) {
+        const parent = positionMap.get(parentId);
+        if (!parent) {
+            continue;
+        }
+        // Coordinates of the initial point (center of the lower part of the parent)
+        const startX = parent.x + parent.width / 2;
+        const startY = parent.y + parent.height;
+        if (parentConnections.length === 1) {
+            // One child block - simple straight line
+            const connection = parentConnections[0];
+            const child = positionMap.get(connection.targetBlockId);
+            if (child) {
+                const endX = child.x + child.width / 2;
+                const endY = child.y;
+                connectionPaths.push({
+                    connectionId: connection.id,
+                    sourceBlockId: connection.sourceBlockId,
+                    targetBlockId: connection.targetBlockId,
+                    points: [
+                        { x: startX, y: startY },
+                        { x: endX, y: endY },
+                    ],
+                });
+            }
+        }
+        else {
+            // Several child blocks - broken lines
+            // We find the vertical distance between the parent and the nearest child
+            const children = parentConnections
+                .map((conn) => positionMap.get(conn.targetBlockId))
+                .filter((child) => child !== undefined);
+            if (children.length === 0) {
+                continue;
+            }
+            // We find the minimum distance to the children by Y
+            const minChildY = Math.min(...children.map((child) => child.y));
+            // The point of branching - in the middle between the parent and the children
+            const branchY = startY + (minChildY - startY) / 2;
+            // For each child block, we create a broken line
+            for (const connection of parentConnections) {
+                const child = positionMap.get(connection.targetBlockId);
+                if (!child) {
+                    continue;
+                }
+                const endX = child.x + child.width / 2;
+                const endY = child.y;
+                const points = [
+                    { x: startX, y: startY }, // Start - center of the lower part of the parent
+                    { x: startX, y: branchY }, // Vertically down to the point of branching
+                    { x: endX, y: branchY }, // Horizontally to the center of the child block
+                    { x: endX, y: endY }, // Vertically down to the center of the upper part of the child block
+                ];
+                connectionPaths.push({
+                    connectionId: connection.id,
+                    sourceBlockId: connection.sourceBlockId,
+                    targetBlockId: connection.targetBlockId,
+                    points: points,
+                });
+            }
+        }
+    }
+    return connectionPaths;
+}
+export function prepareTreeLayout({ nodes, links }) {
+    const blocks = prepareBlocks(nodes);
+    const connections = prepareConnections(links);
+    const layout = calculateTreeLayout(blocks, connections);
+    const edges = calculateTreeEdges(layout, connections);
+    return {
+        layout,
+        edges,
+    };
+}
+//# sourceMappingURL=treeLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"treeLayout.js","sourceRoot":"","sources":["../../../src/components/Graph/treeLayout.ts"],"names":[],"mappings":"AAWA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,gBAAgB;IAOlB,YAAY,MAAa,EAAE,WAA6B,EAAE,UAAyB,EAAE;QACjF,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,EAAC,GAAG,KAAK,EAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAE/B,kBAAkB;QAClB,IAAI,CAAC,OAAO,GAAG;YACX,iBAAiB,EAAE,OAAO,CAAC,iBAAiB,IAAI,EAAE,EAAE,qCAAqC;YACzF,OAAO,EAAE,EAAE;YACX,eAAe,EAAE,OAAO,CAAC,eAAe,IAAI,EAAE,EAAE,mCAAmC;YACnF,GAAG,OAAO;SACb,CAAC;QAEF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,4BAA4B;IAC5B,SAAS;QACL,MAAM,WAAW,GAAG,IAAI,GAAG,EAAE,CAAC;QAC9B,MAAM,SAAS,GAAG,IAAI,GAAG,EAAE,CAAC;QAE5B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC;YACvC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;QAED,sBAAsB;QACtB,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACxC,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,CAAC;YACxC,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC;YAEvC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACpC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACjC,CAAC;QAED,sCAAsC;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAE/E,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC3C,CAAC;QAED,8BAA8B;QAC9B,MAAM,SAAS,GAAG,CAAC,MAAc,EAAE,KAAK,GAAG,CAAC,EAAY,EAAE;YACtD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACtC,MAAM,QAAQ,GAAG,WAAW;iBACvB,GAAG,CAAC,MAAM,CAAC;iBACX,GAAG,CAAC,CAAC,OAAe,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;YAE7D,OAAO;gBACH,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,KAAK;gBACZ,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,CAAC;gBACJ,YAAY,EAAE,CAAC;aAClB,CAAC;QACN,CAAC,CAAC;QAEF,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAED,2BAA2B;IAC3B,aAAa,CAAC,OAAwB,IAAI,CAAC,IAAI,EAAE,SAAuB,EAAE;QACtE,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO,MAAM,CAAC;QAClB,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACtB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;QAC5B,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE9B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,qDAAqD;IACrD,sBAAsB,CAAC,OAAiB,IAAI,CAAC,IAAK;QAC9C,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,uDAAuD;YACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACzC,CAAC;aAAM,CAAC;YACJ,iDAAiD;YACjD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChC,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;YACvC,CAAC;YAED,0FAA0F;YAC1F,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACtC,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,CAAC,YAAY,EAC1D,CAAC,CACJ,CAAC;YACF,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC;YACjF,MAAM,kBAAkB,GAAG,aAAa,GAAG,YAAY,CAAC;YAExD,kGAAkG;YAClG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;QACvE,CAAC;QAED,OAAO,IAAI,CAAC,YAAY,CAAC;IAC7B,CAAC;IAED,iCAAiC;IACjC,aAAa;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,OAAO;QACX,CAAC;QAED,+CAA+C;QAC/C,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,MAAM,MAAM,GAAa,EAAE,CAAC;QAE5B,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;YACtD,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAEzB,yDAAyD;YACzD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CACtB,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CACnE,CAAC;YACF,QAAQ,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;QACzD,CAAC;QAED,4BAA4B;QAC5B,MAAM,YAAY,GAAG,CAAC,IAAc,EAAE,KAAa,EAAQ,EAAE;YACzD,2BAA2B;YAC3B,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE5B,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC7B,mDAAmD;gBACnD,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC;YACnB,CAAC;iBAAM,CAAC;gBACJ,iBAAiB;gBACjB,IAAI,MAAM,GAAG,KAAK,CAAC;gBAEnB,yFAAyF;gBACzF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACtC,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,CAAC,YAAY,EAC1D,CAAC,CACJ,CAAC;gBACF,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC;gBACjF,MAAM,kBAAkB,GAAG,aAAa,GAAG,YAAY,CAAC;gBAExD,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,EAAE,CAAC;oBACxC,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;oBAC/D,MAAM,IAAI,UAAU,CAAC;gBACzB,CAAC;gBAED,mBAAmB;gBACnB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAChC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;oBAC5B,MAAM,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC;gBAClE,CAAC;gBAED,kDAAkD;gBAClD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACpC,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC1D,MAAM,cAAc,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAChF,IAAI,CAAC,CAAC,GAAG,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;YACnD,CAAC;QACL,CAAC,CAAC;QAEF,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED,kEAAkE;IAClE,oBAAoB;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,OAAO;QACX,CAAC;QAED,MAAM,QAAQ,GAAe,EAAE,CAAC;QAEhC,MAAM,YAAY,GAAG,CAAC,IAAc,EAAE,EAAE;YACpC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChC,YAAY,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACL,CAAC,CAAC;QAEF,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAExB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACzD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAEzD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5C,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC;YAClB,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC;QACtB,CAAC;IACL,CAAC;IAED,6BAA6B;IAC7B,MAAM;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;IAClC,CAAC;IAED,oCAAoC;IACpC,eAAe;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;QACd,CAAC;QAED,MAAM,MAAM,GAAqB,EAAE,CAAC;QAEpC,MAAM,cAAc,GAAG,CAAC,IAAc,EAAE,EAAE;YACtC,MAAM,CAAC,IAAI,CAAC;gBACR,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACvB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;gBACzB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,GAAG,IAAI,CAAC,KAAK;aAChB,CAAC,CAAC;YAEH,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChC,cAAc,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACL,CAAC,CAAC;QAEF,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1B,OAAO,MAAM,CAAC;IAClB,CAAC;CACJ;AAED,mCAAmC;AACnC,SAAS,mBAAmB,CAAC,MAAgB,EAAE,WAA6B,EAAE,OAAO,GAAG,EAAE;IACtF,MAAM,MAAM,GAAG,IAAI,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;IAClE,OAAO,MAAM,CAAC,MAAM,EAAE,CAAC;AAC3B,CAAC;AAED,SAAS,kBAAkB,CACvB,YAA8B,EAC9B,WAA6B;IAE7B,kDAAkD;IAClD,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IAEzE,oCAAoC;IACpC,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAE,CAAC;IAEtC,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE,CAAC;QACnC,MAAM,QAAQ,GAAG,UAAU,CAAC,aAAa,CAAC;QAC1C,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrC,mBAAmB,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC1C,CAAC;QACD,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;IAED,MAAM,eAAe,GAAiB,EAAE,CAAC;IAEzC,gEAAgE;IAChE,KAAK,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAAI,mBAAmB,EAAE,CAAC;QAC9D,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,SAAS;QACb,CAAC;QAED,4EAA4E;QAC5E,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;QAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QAExC,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjC,yCAAyC;YACzC,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YACxC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAExD,IAAI,KAAK,EAAE,CAAC;gBACR,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;gBACvC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;gBAErB,eAAe,CAAC,IAAI,CAAC;oBACjB,YAAY,EAAE,UAAU,CAAC,EAAE;oBAC3B,aAAa,EAAE,UAAU,CAAC,aAAa;oBACvC,aAAa,EAAE,UAAU,CAAC,aAAa;oBACvC,MAAM,EAAE;wBACJ,EAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAC;wBACtB,EAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC;qBACrB;iBACJ,CAAC,CAAC;YACP,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,sCAAsC;YAEtC,yEAAyE;YACzE,MAAM,QAAQ,GAAG,iBAAiB;iBAC7B,GAAG,CAAC,CAAC,IAAoB,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;iBAClE,MAAM,CACH,CAAC,KAAiC,EAA2B,EAAE,CAC3D,KAAK,KAAK,SAAS,CAC1B,CAAC;YAEN,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACxB,SAAS;YACb,CAAC;YAED,oDAAoD;YACpD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAqB,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAEhF,6EAA6E;YAC7E,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAElD,gDAAgD;YAChD,KAAK,MAAM,UAAU,IAAI,iBAAiB,EAAE,CAAC;gBACzC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;gBACxD,IAAI,CAAC,KAAK,EAAE,CAAC;oBACT,SAAS;gBACb,CAAC;gBAED,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;gBACvC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;gBAErB,MAAM,MAAM,GAAG;oBACX,EAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAC,EAAE,iDAAiD;oBACzE,EAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAC,EAAE,4CAA4C;oBACrE,EAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAC,EAAE,gDAAgD;oBACvE,EAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,EAAE,qEAAqE;iBAC5F,CAAC;gBAEF,eAAe,CAAC,IAAI,CAAC;oBACjB,YAAY,EAAE,UAAU,CAAC,EAAE;oBAC3B,aAAa,EAAE,UAAU,CAAC,aAAa;oBACvC,aAAa,EAAE,UAAU,CAAC,aAAa;oBACvC,MAAM,EAAE,MAAM;iBACjB,CAAC,CAAC;YACP,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,eAAe,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAAC,KAAK,EAAE,KAAK,EAAoB;IAC/D,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,kBAAkB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAEtD,OAAO;QACH,MAAM;QACN,KAAK;KACR,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,52 @@
+import type { TBlock, TBlockId, TConnection, TMultipointConnection } from '@gravity-ui/graph';
+import type { GraphNode, Link, TopologyNodeDataStats } from '../../store/reducers/query/types';
+export interface ExtendedTBlock extends TBlock {
+    planNodeId?: number;
+    stats?: TopologyNodeDataStats[];
+    operators?: string[];
+    tables?: string[];
+}
+export type LinkType = 'arrow' | 'line';
+export interface Data<TData = any> {
+    links: Link[];
+    nodes: GraphNode<TData>[];
+}
+export interface LayoutOptions {
+    horizontalSpacing?: number;
+    padding?: number;
+    verticalSpacing?: number;
+}
+export interface TreeNode {
+    id: string;
+    level: number;
+    block: any;
+    children: TreeNode[];
+    subtreeWidth: number;
+    x: number;
+    y: number;
+}
+export type EdgeResult = TMultipointConnection & {
+    connectionId: string | undefined;
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+    sourceBlockId: TBlockId;
+    targetBlockId: TBlockId;
+};
+export type TreeLayoutRequest = Pick<Data, 'links' | 'nodes'>;
+export interface TreeLayoutResult {
+    layout: ExtendedTBlock[];
+    edges: EdgeResult[];
+}
+export type TreeLayoutWorkerResponse = {
+    type: 'success';
+    result: TreeLayoutResult;
+} | {
+    type: 'error';
+    error: string;
+};
+export type TreeConnection = TConnection & {
+    sourceBlockId: TBlockId;
+    targetBlockId: TBlockId;
+};

package/dist/components/Graph/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Graph/types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,6 @@
+import type { TBlock } from '@gravity-ui/graph';
+import type { AbstractGraphColorsConfig } from './colorsConfig';
+import type { Data, TreeConnection } from './types';
+export declare const prepareBlocks: (nodes: Data["nodes"]) => TBlock[];
+export declare const prepareConnections: (links: Data["links"]) => TreeConnection[];
+export declare function parseCustomPropertyValue<T extends AbstractGraphColorsConfig>(colors: T, block?: HTMLElement): T;