ydb-embedded-ui 20.4.0 → 21.0.0

package/src/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.ts

@@ -3,14 +3,17 @@ import {formatObject} from '../../../../../components/InfoViewer';
 import {
     formatPQGroupItem,
     formatPQPartitionConfig,
+    formatPQPartitionStrategy,
     formatPQTabletConfig,
 } from '../../../../../components/InfoViewer/formatters';
 import type {
     TEvDescribeSchemeResult,
     TPQPartitionConfig,
+    TPQPartitionStrategy,
     TPQTabletConfig,
     TPersQueueGroupDescription,
 } from '../../../../../types/api/schema';
+import {EPQPartitionStrategyType} from '../../../../../types/api/schema';
 
 export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<InfoViewerItem> => {
     const pqGroupData = data?.PathDescription?.PersQueueGroup;
@@ -21,7 +24,7 @@ export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<In
 
     const {Partitions = [], PQTabletConfig = {PartitionConfig: {LifetimeSeconds: 0}}} = pqGroupData;
 
-    const {Codecs, MeteringMode} = PQTabletConfig;
+    const {Codecs, MeteringMode, PartitionStrategy} = PQTabletConfig;
     const {WriteSpeedInBytesPerSecond, StorageLimitBytes} = PQTabletConfig.PartitionConfig;
 
     //@ts-expect-error
@@ -40,5 +43,23 @@ export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<In
         MeteringMode,
     });
 
-    return [...pqGeneralInfo, ...pqPartitionInfo, ...pqTabletInfo];
+    let pqAutopartitioningInfo: InfoViewerItem[] = [];
+    const strategyType = PartitionStrategy?.PartitionStrategyType;
+    if (PartitionStrategy && strategyType) {
+        // For a disabled strategy only the state itself is meaningful; otherwise show the bounds.
+        const strategyFields: TPQPartitionStrategy =
+            strategyType === EPQPartitionStrategyType.DISABLED
+                ? {PartitionStrategyType: strategyType}
+                : {
+                      PartitionStrategyType: strategyType,
+                      MinPartitionCount: PartitionStrategy.MinPartitionCount,
+                      MaxPartitionCount: PartitionStrategy.MaxPartitionCount,
+                  };
+        pqAutopartitioningInfo = formatObject<TPQPartitionStrategy>(
+            formatPQPartitionStrategy,
+            strategyFields,
+        );
+    }
+
+    return [...pqGeneralInfo, ...pqPartitionInfo, ...pqTabletInfo, ...pqAutopartitioningInfo];
 };

package/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.scss

@@ -1,5 +1,7 @@
 .ydb-query-explain-graph {
     &__canvas-container {
+        position: relative;
+
         overflow-y: auto;
 
         width: 100%;

package/src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import type {Data} from '@gravity-ui/paranoid';
-
-import {YDBGraph} from '../../../../../../components/Graph/Graph';
+import {GravityGraph} from '../../../../../../components/Graph/GravityGraph';
 import type {PreparedPlan} from '../../../../../../store/reducers/query/types';
 import {cn} from '../../../../../../utils/cn';
 import i18n from '../../i18n';
@@ -17,22 +15,30 @@ interface GraphProps {
     theme?: string;
 }
 
-function isValidGraphData(data: Partial<Data>): data is Data {
+function isValidGraphData(data: Partial<PreparedPlan>) {
     return Boolean(data.links && data.nodes && data.nodes.length);
 }
 
 export function Graph({explain = {}, theme}: GraphProps) {
     const {links, nodes} = explain;
 
-    const data = React.useMemo(() => ({links, nodes}), [links, nodes]);
+    const data = React.useMemo(() => ({links: links || [], nodes: nodes || []}), [links, nodes]);
+    const [failedData, setFailedData] = React.useState<typeof data>();
+    const handleLayoutError = React.useCallback(
+        (error: Error) => {
+            console.error(error);
+            setFailedData(data);
+        },
+        [data],
+    );
 
-    if (!isValidGraphData(data)) {
+    if (!isValidGraphData(data) || failedData === data) {
         return <StubMessage message={i18n('description.graph-is-not-supported')} />;
     }
 
     return (
         <div className={b('canvas-container')}>
-            <YDBGraph key={theme} data={data} />
+            <GravityGraph data={data} onError={handleLayoutError} theme={theme} />
         </div>
     );
 }

package/src/graphLayout.worker.ts

@@ -0,0 +1,21 @@
+import {prepareTreeLayout} from './components/Graph/treeLayout';
+import type {TreeLayoutRequest, TreeLayoutWorkerResponse} from './components/Graph/types';
+
+const workerScope = globalThis as unknown as {
+    onmessage: ((event: MessageEvent<TreeLayoutRequest>) => void) | null;
+    postMessage: (response: TreeLayoutWorkerResponse) => void;
+};
+
+workerScope.onmessage = ({data}) => {
+    try {
+        workerScope.postMessage({
+            type: 'success',
+            result: prepareTreeLayout(data),
+        });
+    } catch (error) {
+        workerScope.postMessage({
+            type: 'error',
+            error: error instanceof Error ? error.message : String(error),
+        });
+    }
+};

package/src/lib.ts

@@ -40,6 +40,7 @@ export type {ExternalQueryToOpen} from './containers/Tenant/Query/hooks/useOpenE
 export type {DrawerContextType} from './components/Drawer';
 export type {GetMonitoringLink, GetMonitoringClusterLink} from './utils/monitoring';
 export type {
+    CreateGraphLayoutWorker,
     GetAdditionalDatabaseInfoItems,
     GetReportProblemUrl,
     IllustrationComponent,

package/src/store/reducers/query/parsers/preparePlanData.ts

@@ -1,9 +1,7 @@
-import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
-
 import type {QueryPlan, ScriptPlan, TKqpStatsQuery} from '../../../../types/api/query';
 import {preparePlan, prepareSimplifiedPlan} from '../../../../utils/prepareQueryExplain';
 import {parseQueryExplainPlan} from '../../../../utils/query';
-import type {PreparedQueryData} from '../types';
+import type {ExplainPlanNodeData, GraphNode, Link, PreparedQueryData} from '../types';
 
 const explainVersions = {
     v2: '0.2',

package/src/store/reducers/query/types.ts

@@ -1,5 +1,3 @@
-import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
-
 import type {
     PlanTable,
     QueryPlan,
@@ -27,6 +25,48 @@ export interface QueryInHistory extends RawQueryInHistory {
     status?: QueryExecutionStatusType;
 }
 
+export interface Link {
+    from: string;
+    to: string;
+}
+
+export interface Metric {
+    name: string;
+    value: string;
+    theme?: 'warning' | 'danger';
+}
+
+export interface GraphNode<TData = any> {
+    name: string;
+    status?: string;
+    meta?: string;
+    group?: string;
+    data?: TData;
+    metrics?: Metric[];
+}
+
+export interface ExplainPlanNodeData {
+    id?: number;
+    type: 'query' | 'result' | 'stage' | 'connection' | 'materialize';
+    name?: string;
+    operators?: string[];
+    tables?: string[];
+    cte?: string;
+    stats?: TopologyNodeDataStats[];
+}
+export interface TopologyNodeDataStatsItem {
+    name: string;
+    value: string | number;
+}
+export interface TopologyNodeDataStatsSection {
+    name: string;
+    items: TopologyNodeDataStatsItem[];
+}
+export interface TopologyNodeDataStats {
+    group: string;
+    stats: TopologyNodeDataStatsSection[] | TopologyNodeDataStatsItem[];
+}
+
 export interface PreparedPlan {
     links?: Link[];
     nodes?: GraphNode<ExplainPlanNodeData>[];

package/src/types/api/schema/persQueueGroup.ts

@@ -67,6 +67,25 @@ export interface TPQTabletConfig {
     Partitions?: TPartition[];
 
     MeteringMode?: EMeteringMode;
+
+    PartitionStrategy?: TPQPartitionStrategy;
+}
+
+export enum EPQPartitionStrategyType {
+    DISABLED = 'DISABLED',
+    CAN_SPLIT = 'CAN_SPLIT',
+    CAN_SPLIT_AND_MERGE = 'CAN_SPLIT_AND_MERGE',
+    PAUSED = 'PAUSED',
+}
+
+/** Strategy for automatically changing the number of topic partitions depending on the load */
+export interface TPQPartitionStrategy {
+    MinPartitionCount?: number;
+    MaxPartitionCount?: number;
+    ScaleThresholdSeconds?: number;
+    ScaleUpPartitionWriteSpeedThresholdPercent?: number;
+    ScaleDownPartitionWriteSpeedThresholdPercent?: number;
+    PartitionStrategyType?: EPQPartitionStrategyType;
 }
 
 export interface TPQPartitionConfig {

package/src/uiFactory/types.ts

@@ -19,6 +19,7 @@ import type {GetLogsLink} from '../utils/logs';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../utils/monitoring';
 
 export type IllustrationComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+export type CreateGraphLayoutWorker = () => Worker;
 
 export type IllustrationName =
     | 'InternalError'
@@ -54,6 +55,9 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
 
     enableMultiTabQueryEditor?: boolean;
 
+    /** Creates a fresh computation-graph layout worker for each layout run. */
+    createGraphLayoutWorker?: CreateGraphLayoutWorker;
+
     healthcheck: {
         issueCategories: ReadonlyArray<H>;
         isIssueTypeOfCategory: (type: string, category: H) => boolean;

package/src/utils/prepareQueryExplain.ts

@@ -2,12 +2,11 @@ import type {
     ExplainPlanNodeData,
     GraphNode,
     Link,
+    SimplifiedPlanItem,
     TopologyNodeDataStats,
     TopologyNodeDataStatsItem,
     TopologyNodeDataStatsSection,
-} from '@gravity-ui/paranoid';
-
-import type {SimplifiedPlanItem} from '../store/reducers/query/types';
+} from '../store/reducers/query/types';
 import type {PlanNode, SimplifiedNode} from '../types/api/query';
 
 const CONNECTION_NODE_META_FIELDS = new Set(['PlanNodeId', 'PlanNodeType', 'Node Type', 'Plans']);
@@ -96,11 +95,19 @@ function getNodeType(plan: PlanNode) {
 export function preparePlan(plan: PlanNode) {
     const nodes: GraphNode<ExplainPlanNodeData>[] = [];
     const links: Link[] = [];
+    let generatedNodeId = 0;
+
+    const getGraphNodeId = (node: PlanNode) => {
+        return node.PlanNodeId === undefined
+            ? `generated-plan-node:${generatedNodeId++}`
+            : String(node.PlanNodeId);
+    };
 
     function parsePlans(plans: PlanNode[] = [], from: string) {
         plans.forEach((p) => {
+            const nodeId = getGraphNodeId(p);
             const node: GraphNode<ExplainPlanNodeData> = {
-                name: String(p.PlanNodeId),
+                name: nodeId,
                 data: {
                     id: p.PlanNodeId,
                     type: getNodeType(p),
@@ -117,8 +124,9 @@ export function preparePlan(plan: PlanNode) {
     }
 
     const rootPlan = plan;
+    const rootNodeId = getGraphNodeId(rootPlan);
     const rootNode: GraphNode<ExplainPlanNodeData> = {
-        name: String(rootPlan.PlanNodeId),
+        name: rootNodeId,
         data: {
             id: rootPlan.PlanNodeId,
             type: getNodeType(rootPlan),

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

@@ -1,12 +0,0 @@
-import type { Data, Options, Shapes } from '@gravity-ui/paranoid';
-interface GraphProps<T> {
-    data: Data<T>;
-    opts?: Options;
-    shapes?: Shapes;
-}
-export declare function Graph<T>(props: GraphProps<T>): import("react/jsx-runtime").JSX.Element;
-interface YDBGraphProps<T> {
-    data: Data<T>;
-}
-export declare function YDBGraph<T>(props: YDBGraphProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

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