ydb-embedded-ui 20.5.0 → 21.1.0

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

package/src/components/Graph/GravityGraph.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+
+import {GraphState} from '@gravity-ui/graph';
+import type {TBlockId} from '@gravity-ui/graph';
+import type {HookGraphParams} from '@gravity-ui/graph/react';
+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 type {Data} from './types';
+import {parseCustomPropertyValue} from './utils';
+
+import './GravityGraph.scss';
+
+interface Props<T> {
+    data: Data<T>;
+    onError: (error: Error) => void;
+    theme?: string;
+}
+
+const config: HookGraphParams = {
+    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: any, block: any) => {
+    const map: Record<string, React.ComponentType<any>> = {
+        query: QueryBlockComponent,
+        result: ResultBlockComponent,
+        stage: StageBlockComponent,
+        connection: ConnectionBlockComponent,
+    };
+
+    const Component = map[block.is as keyof typeof map];
+
+    return (
+        <GraphBlock graph={graph} block={block} className={b('block')}>
+            {Component ? (
+                <React.Fragment>
+                    <Component
+                        graph={graph}
+                        block={block}
+                        className={b('block-content', block.is)}
+                    />
+                    {block.planNodeId !== undefined && block.is !== 'result' && (
+                        <div className={b('block-id')}>#{block.planNodeId}</div>
+                    )}
+                </React.Fragment>
+            ) : (
+                block.id
+            )}
+        </GraphBlock>
+    );
+};
+
+export function GravityGraph<T>({data, onError, theme}: Props<T>) {
+    const {graph, start} = useGraph(config);
+    const cameraSizeRef = React.useRef({width: 0, height: 0});
+    const graphBlockIdsRef = React.useRef<TBlockId[]>([]);
+    const fitFrameRef = React.useRef<number>();
+    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 (
+        <React.Fragment>
+            <GraphCanvas graph={graph} renderBlock={renderBlockFn} />
+            <GraphControls graph={graph} />
+        </React.Fragment>
+    );
+}

package/src/components/Graph/NonSelectableConnection.tsx

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

package/src/components/Graph/TooltipComponent.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+import {Popover, Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';
+
+import type {
+    TopologyNodeDataStatsItem,
+    TopologyNodeDataStatsSection,
+} from '../../store/reducers/query/types';
+import {cn} from '../../utils/cn';
+
+import type {ExtendedTBlock} from './types';
+
+const b = cn('ydb-gravity-graph');
+type Props = {
+    block: ExtendedTBlock;
+    children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+};
+
+const getStatsContent = (stat: TopologyNodeDataStatsItem | TopologyNodeDataStatsSection) => {
+    if ('value' in stat) {
+        return (
+            <p className={b('tooltip-stat-row')} key={stat.name}>
+                <span>{stat.name}:</span>
+                <span>{stat.value}</span>
+            </p>
+        );
+    }
+
+    return (
+        <section className={b('tooltip-stat-group')} key={stat.name}>
+            <div className={b('tooltip-stat-group-name')}>{stat.name}:</div>
+            {stat.items?.map(({name, value}: TopologyNodeDataStatsItem) => (
+                <p className={b('tooltip-stat-row')} key={name}>
+                    <span>{name}:</span>
+                    <span>{value}</span>
+                </p>
+            ))}
+        </section>
+    );
+};
+
+const useTooltipContent = (block: ExtendedTBlock) => {
+    const firstTab = block?.stats?.[0]?.group || '';
+    const [activeTab, setActiveTab] = React.useState(firstTab);
+    const validatedActiveTab = block.stats?.some(({group}) => group === activeTab)
+        ? activeTab
+        : firstTab;
+
+    React.useEffect(() => {
+        if (activeTab !== validatedActiveTab) {
+            setActiveTab(validatedActiveTab);
+        }
+    }, [activeTab, validatedActiveTab]);
+
+    return React.useMemo(
+        () => (
+            <TabProvider value={validatedActiveTab} onUpdate={setActiveTab}>
+                <TabList className={b('tooltip-tabs')}>
+                    {block?.stats?.map((item) => (
+                        <Tab value={item.group} key={item.group}>
+                            {item.group}
+                        </Tab>
+                    ))}
+                </TabList>
+                {block?.stats?.map((item) => (
+                    <TabPanel value={item.group} key={item.group}>
+                        {item.stats?.map(getStatsContent)}
+                    </TabPanel>
+                ))}
+            </TabProvider>
+        ),
+        [block?.stats, validatedActiveTab],
+    );
+};
+
+export const TooltipComponent = ({block, children}: Props) => {
+    const content = useTooltipContent(block);
+    const trigger = React.cloneElement(children, {
+        role: children.props.role ?? 'button',
+        tabIndex: children.props.tabIndex ?? 0,
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
+            children.props.onKeyDown?.(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                event.currentTarget.click();
+            } else if (event.key === ' ') {
+                event.preventDefault();
+            }
+        },
+        onKeyUp: (event: React.KeyboardEvent<HTMLElement>) => {
+            children.props.onKeyUp?.(event);
+            if (!event.defaultPrevented && event.key === ' ') {
+                event.currentTarget.click();
+            }
+        },
+    });
+
+    return (
+        <Popover
+            content={content}
+            hasArrow
+            trigger="click"
+            placement="right-start"
+            className="ydb-gravity-graph__tooltip-content"
+            strategy="fixed"
+        >
+            {trigger}
+        </Popover>
+    );
+};

package/src/components/Graph/colorsConfig.ts

@@ -0,0 +1,21 @@
+export type AbstractGraphColorsConfig = Partial<Record<string, Partial<Record<string, string>>>>;
+
+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)',
+    },
+} as const satisfies AbstractGraphColorsConfig;

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

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

package/src/components/Graph/i18n/index.ts

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