ydb-embedded-ui 20.5.0 → 21.1.0

package/dist/components/Graph/Graph.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
-import { getGraphColorsFromElement, prepareGraphOptions } from './colors';
-export function Graph(props) {
-    const containerRef = React.useRef(null);
-    const containerId = React.useId();
-    const { data, opts, shapes } = props;
-    React.useEffect(() => {
-        const graphRoot = containerRef.current;
-        if (!graphRoot) {
-            return undefined;
-        }
-        graphRoot.innerHTML = '';
-        // set width and height to screen size to make a canvas bigger then the container
-        graphRoot.style.setProperty('width', '100vw');
-        graphRoot.style.setProperty('height', '100vh');
-        const graphColors = getGraphColorsFromElement(graphRoot);
-        const topology = getTopology(graphRoot.id, data, prepareGraphOptions(opts, graphColors), shapes);
-        topology.render();
-        graphRoot.style.setProperty('width', '100%');
-        graphRoot.style.setProperty('height', '100%');
-        return () => {
-            topology.destroy();
-        };
-    }, [data, opts, shapes]);
-    return _jsx("div", { id: containerId, ref: containerRef, style: { overflow: 'auto' } });
-}
-const renderExplainNode = (node) => {
-    const parts = node.name.split('|');
-    return parts.length > 1 ? parts[1] : node.name;
-};
-const schemaOptions = {
-    renderNodeTitle: renderExplainNode,
-    textOverflow: 'normal',
-    initialZoomFitsCanvas: true,
-};
-const schemaShapes = {
-    node: getYdbPlanNodeShape,
-};
-export function YDBGraph(props) {
-    return _jsx(Graph, { ...props, opts: schemaOptions, shapes: schemaShapes });
-}
-//# sourceMappingURL=Graph.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Graph.js","sourceRoot":"","sources":["../../../src/components/Graph/Graph.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AAGtE,OAAO,EAAC,yBAAyB,EAAE,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAQxE,MAAM,UAAU,KAAK,CAAI,KAAoB;IACzC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAElC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC;IAEnC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,iFAAiF;QACjF,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC9C,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE/C,MAAM,WAAW,GAAG,yBAAyB,CAAC,SAAS,CAAC,CAAC;QACzD,MAAM,QAAQ,GAAG,WAAW,CACxB,SAAS,CAAC,EAAE,EACZ,IAAI,EACJ,mBAAmB,CAAC,IAAI,EAAE,WAAW,CAAC,EACtC,MAAM,CACT,CAAC;QACF,QAAQ,CAAC,MAAM,EAAE,CAAC;QAClB,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAC7C,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,OAAO,EAAE,CAAC;QACvB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzB,OAAO,cAAK,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,GAAI,CAAC;AAClF,CAAC;AAED,MAAM,iBAAiB,GAAG,CAAC,IAAe,EAAU,EAAE;IAClD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnC,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,aAAa,GAAY;IAC3B,eAAe,EAAE,iBAAiB;IAClC,YAAY,EAAE,QAAiB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB,IAAI,EAAE,mBAAmB;CAC5B,CAAC;AAMF,MAAM,UAAU,QAAQ,CAAI,KAAuB;IAC/C,OAAO,KAAC,KAAK,OAAQ,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAI,CAAC;AAC9E,CAAC"}

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

@@ -1,10 +0,0 @@
-import type { Colors, Options } from '@gravity-ui/paranoid';
-type CssVariableReader = (name: string) => string;
-export interface GraphColors extends Colors {
-    getCommonColor(name: string): string;
-}
-export declare function normalizeCssColor(color: string): string;
-export declare function getGraphColors(readCssVariable?: CssVariableReader): GraphColors;
-export declare function getGraphColorsFromElement(element: Element): GraphColors;
-export declare function prepareGraphOptions(options?: Options, graphColors?: GraphColors): Options;
-export {};

package/dist/components/Graph/colors.js

@@ -1,53 +0,0 @@
-import { colord } from 'colord';
-const GRAPH_COLOR_VARIABLES = {
-    success: '--g-color-text-positive',
-    error: '--g-color-text-danger',
-    warning: '--g-color-text-warning',
-    errorBackground: '--g-color-base-danger-light',
-    warningBackground: '--g-color-base-warning-light',
-    mute: '--g-color-line-generic',
-    stroke: '--g-color-text-hint',
-    fill: '--g-color-base-generic-ultralight',
-    nodeFill: '--g-color-base-float',
-    nodeShadow: '--g-color-sfx-shadow',
-    titleColor: '--g-color-text-primary',
-    textColor: '--g-color-text-complementary',
-    buttonBorderColor: '--g-color-line-generic',
-    groupBorderColor: '--g-color-base-info-light-hover',
-    groupFill: '--g-color-base-info-light',
-    titleHoverColor: '--g-color-text-link-hover',
-    nodeHover: '--g-color-base-float-hover',
-    specialHover: '--g-color-line-brand',
-};
-export function normalizeCssColor(color) {
-    const value = color.trim();
-    const normalizedColor = colord(value);
-    return normalizedColor.isValid() ? normalizedColor.toRgbString() : value;
-}
-function getDefaultCssVariableReader() {
-    const styles = getComputedStyle(document.body);
-    return (name) => styles.getPropertyValue(name);
-}
-export function getGraphColors(readCssVariable = getDefaultCssVariableReader()) {
-    const colors = Object.fromEntries(Object.entries(GRAPH_COLOR_VARIABLES)
-        .map(([key, variable]) => [key, normalizeCssColor(readCssVariable(variable))])
-        .filter(([, value]) => value));
-    return {
-        ...colors,
-        getCommonColor: (name) => normalizeCssColor(readCssVariable(`--g-color-${name}`)),
-    };
-}
-export function getGraphColorsFromElement(element) {
-    const styles = getComputedStyle(element);
-    return getGraphColors((name) => styles.getPropertyValue(name));
-}
-export function prepareGraphOptions(options, graphColors = getGraphColors()) {
-    return {
-        ...options,
-        colors: {
-            ...graphColors,
-            ...options === null || options === void 0 ? void 0 : options.colors,
-        },
-    };
-}
-//# sourceMappingURL=colors.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/Graph/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAQ9B,MAAM,qBAAqB,GAAG;IAC1B,OAAO,EAAE,yBAAyB;IAClC,KAAK,EAAE,uBAAuB;IAC9B,OAAO,EAAE,wBAAwB;IACjC,eAAe,EAAE,6BAA6B;IAC9C,iBAAiB,EAAE,8BAA8B;IACjD,IAAI,EAAE,wBAAwB;IAC9B,MAAM,EAAE,qBAAqB;IAC7B,IAAI,EAAE,mCAAmC;IACzC,QAAQ,EAAE,sBAAsB;IAChC,UAAU,EAAE,sBAAsB;IAClC,UAAU,EAAE,wBAAwB;IACpC,SAAS,EAAE,8BAA8B;IACzC,iBAAiB,EAAE,wBAAwB;IAC3C,gBAAgB,EAAE,iCAAiC;IACnD,SAAS,EAAE,2BAA2B;IACtC,eAAe,EAAE,2BAA2B;IAC5C,SAAS,EAAE,4BAA4B;IACvC,YAAY,EAAE,sBAAsB;CACA,CAAC;AAEzC,MAAM,UAAU,iBAAiB,CAAC,KAAa;IAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3B,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtC,OAAO,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;AAC7E,CAAC;AAED,SAAS,2BAA2B;IAChC,MAAM,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,cAAc,CAC1B,kBAAqC,2BAA2B,EAAE;IAElE,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAC7B,MAAM,CAAC,OAAO,CAAC,qBAAqB,CAAC;SAChC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SAC7E,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAC1B,CAAC;IAEZ,OAAO;QACH,GAAG,MAAM;QACT,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;KACpF,CAAC;AACN,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,OAAgB;IACtD,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzC,OAAO,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,mBAAmB,CAC/B,OAAiB,EACjB,cAA2B,cAAc,EAAE;IAE3C,OAAO;QACH,GAAG,OAAO;QACV,MAAM,EAAE;YACJ,GAAG,WAAW;YACd,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;SACrB;KACJ,CAAC;AACN,CAAC"}

package/src/components/Graph/Graph.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-
-import {getTopology, getYdbPlanNodeShape} from '@gravity-ui/paranoid';
-import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
-
-import {getGraphColorsFromElement, prepareGraphOptions} from './colors';
-
-interface GraphProps<T> {
-    data: Data<T>;
-    opts?: Options;
-    shapes?: Shapes;
-}
-
-export function Graph<T>(props: GraphProps<T>) {
-    const containerRef = React.useRef<HTMLDivElement>(null);
-    const containerId = React.useId();
-
-    const {data, opts, shapes} = props;
-
-    React.useEffect(() => {
-        const graphRoot = containerRef.current;
-        if (!graphRoot) {
-            return undefined;
-        }
-
-        graphRoot.innerHTML = '';
-        // set width and height to screen size to make a canvas bigger then the container
-        graphRoot.style.setProperty('width', '100vw');
-        graphRoot.style.setProperty('height', '100vh');
-
-        const graphColors = getGraphColorsFromElement(graphRoot);
-        const topology = getTopology(
-            graphRoot.id,
-            data,
-            prepareGraphOptions(opts, graphColors),
-            shapes,
-        );
-        topology.render();
-        graphRoot.style.setProperty('width', '100%');
-        graphRoot.style.setProperty('height', '100%');
-        return () => {
-            topology.destroy();
-        };
-    }, [data, opts, shapes]);
-
-    return <div id={containerId} ref={containerRef} style={{overflow: 'auto'}} />;
-}
-
-const renderExplainNode = (node: GraphNode): string => {
-    const parts = node.name.split('|');
-    return parts.length > 1 ? parts[1] : node.name;
-};
-
-const schemaOptions: Options = {
-    renderNodeTitle: renderExplainNode,
-    textOverflow: 'normal' as const,
-    initialZoomFitsCanvas: true,
-};
-
-const schemaShapes = {
-    node: getYdbPlanNodeShape,
-};
-
-interface YDBGraphProps<T> {
-    data: Data<T>;
-}
-
-export function YDBGraph<T>(props: YDBGraphProps<T>) {
-    return <Graph<T> {...props} opts={schemaOptions} shapes={schemaShapes} />;
-}

package/src/components/Graph/colors.ts

@@ -1,75 +0,0 @@
-import type {Colors, Options} from '@gravity-ui/paranoid';
-import {colord} from 'colord';
-
-type CssVariableReader = (name: string) => string;
-
-export interface GraphColors extends Colors {
-    getCommonColor(name: string): string;
-}
-
-const GRAPH_COLOR_VARIABLES = {
-    success: '--g-color-text-positive',
-    error: '--g-color-text-danger',
-    warning: '--g-color-text-warning',
-    errorBackground: '--g-color-base-danger-light',
-    warningBackground: '--g-color-base-warning-light',
-    mute: '--g-color-line-generic',
-    stroke: '--g-color-text-hint',
-    fill: '--g-color-base-generic-ultralight',
-    nodeFill: '--g-color-base-float',
-    nodeShadow: '--g-color-sfx-shadow',
-    titleColor: '--g-color-text-primary',
-    textColor: '--g-color-text-complementary',
-    buttonBorderColor: '--g-color-line-generic',
-    groupBorderColor: '--g-color-base-info-light-hover',
-    groupFill: '--g-color-base-info-light',
-    titleHoverColor: '--g-color-text-link-hover',
-    nodeHover: '--g-color-base-float-hover',
-    specialHover: '--g-color-line-brand',
-} satisfies Record<keyof Colors, string>;
-
-export function normalizeCssColor(color: string) {
-    const value = color.trim();
-    const normalizedColor = colord(value);
-
-    return normalizedColor.isValid() ? normalizedColor.toRgbString() : value;
-}
-
-function getDefaultCssVariableReader(): CssVariableReader {
-    const styles = getComputedStyle(document.body);
-
-    return (name) => styles.getPropertyValue(name);
-}
-
-export function getGraphColors(
-    readCssVariable: CssVariableReader = getDefaultCssVariableReader(),
-): GraphColors {
-    const colors = Object.fromEntries(
-        Object.entries(GRAPH_COLOR_VARIABLES)
-            .map(([key, variable]) => [key, normalizeCssColor(readCssVariable(variable))])
-            .filter(([, value]) => value),
-    ) as Colors;
-
-    return {
-        ...colors,
-        getCommonColor: (name) => normalizeCssColor(readCssVariable(`--g-color-${name}`)),
-    };
-}
-
-export function getGraphColorsFromElement(element: Element): GraphColors {
-    const styles = getComputedStyle(element);
-    return getGraphColors((name) => styles.getPropertyValue(name));
-}
-
-export function prepareGraphOptions(
-    options?: Options,
-    graphColors: GraphColors = getGraphColors(),
-): Options {
-    return {
-        ...options,
-        colors: {
-            ...graphColors,
-            ...options?.colors,
-        },
-    };
-}