ydb-embedded-ui 20.4.0 → 21.0.0

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

package/src/components/Graph/runTreeLayout.ts

@@ -0,0 +1,105 @@
+import {prepareTreeLayout} from './treeLayout';
+import type {TreeLayoutRequest, TreeLayoutResult, TreeLayoutWorkerResponse} 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;
+}
+
+const scheduleOnMainThread: Schedule = (callback) => {
+    const timeoutId = globalThis.setTimeout(callback, 0);
+
+    return () => globalThis.clearTimeout(timeoutId);
+};
+
+const normalizeError = (error: unknown) => {
+    return error instanceof Error ? error : new Error(String(error));
+};
+
+export function runTreeLayout({
+    request,
+    createWorker,
+    calculateLayout = () => prepareTreeLayout(request),
+    onResult,
+    onError,
+    schedule = scheduleOnMainThread,
+}: RunTreeLayoutOptions) {
+    let worker: Worker | undefined;
+    let cancelFallback: (() => void) | undefined;
+    let cancelled = false;
+    let settled = false;
+
+    const terminateWorker = () => {
+        worker?.terminate();
+        worker = undefined;
+    };
+
+    const reportError = (error: unknown) => {
+        if (cancelled || settled) {
+            return;
+        }
+
+        settled = true;
+        terminateWorker();
+        onError(normalizeError(error));
+    };
+
+    const complete = (result: TreeLayoutResult) => {
+        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}: MessageEvent<TreeLayoutWorkerResponse>) => {
+            if (data.type === 'success') {
+                complete(data.result);
+            } else {
+                reportError(new Error(data.error));
+            }
+        };
+        worker.onerror = scheduleFallback;
+        worker.onmessageerror = scheduleFallback;
+        worker.postMessage(request);
+    } catch {
+        scheduleFallback();
+    }
+
+    return () => {
+        cancelled = true;
+        cancelFallback?.();
+        terminateWorker();
+    };
+}