feat: migrate to gravity-ui/graph

package.json

@@ -17,6 +17,7 @@
     "@gravity-ui/components": "^4.4.0",
     "@gravity-ui/date-components": "^3.2.3",
     "@gravity-ui/date-utils": "^2.5.6",
+    "@gravity-ui/graph": "^1.1.4",
     "@gravity-ui/i18n": "^1.7.0",
     "@gravity-ui/icons": "^2.13.0",
     "@gravity-ui/illustrations": "^2.1.0",

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>;
+};

src/components/Graph/BlockComponents/QueryBlockComponent.tsx

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

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>;
+};

src/components/Graph/BlockComponents/StageBlockComponent.tsx

@@ -0,0 +1,31 @@
+import {Text} from '@gravity-ui/uikit';
+
+import {TooltipComponent} from '../TooltipComponent';
+import type {ExtendedTBlock} from '../types';
+
+type Props = {
+    block: ExtendedTBlock;
+    className: string;
+};
+
+export const StageBlockComponent = ({className, block}: Props) => {
+    const content = (
+        <div className={className}>
+            {block.operators
+                ? block.operators.map((item) => <div key={item}>{item}</div>)
+                : block.name}
+            {block.tables ? (
+                <div>
+                    <Text color="secondary">Tables: </Text>
+                    {block.tables.join(', ')}
+                </div>
+            ) : null}
+        </div>
+    );
+
+    if (!block.stats?.length) {
+        return content;
+    }
+
+    return <TooltipComponent block={block}>{content}</TooltipComponent>;
+};

src/components/Graph/GraphControls.tsx

@@ -0,0 +1,45 @@
+import type {Graph} from '@gravity-ui/graph';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+
+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 = () => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale * ZOOM_STEP});
+    };
+
+    const onZoomOutClick = () => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale / ZOOM_STEP});
+    };
+
+    const onResetZoomClick = () => {
+        graph.zoom({scale: 1});
+    };
+
+    return (
+        <div className={b('zoom-controls')}>
+            <Button view="raised" onClick={onZoomInClick}>
+                <Icon data={MagnifierPlusIcon} size={16} />
+            </Button>
+            <Button view="raised" onClick={onZoomOutClick}>
+                <Icon data={MagnifierMinusIcon} size={16} />
+            </Button>
+            <Button view="raised" onClick={onResetZoomClick}>
+                1:1
+            </Button>
+        </div>
+    );
+};

src/components/Graph/GravityGraph.scss

@@ -0,0 +1,121 @@
+.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;
+    }
+
+    &__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 {
+        width: 300px;
+        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;
+    }
+}