ydb-embedded-ui 6.12.0 → 6.13.0

package/dist/containers/Tenant/Query/ExecuteResult/utils.js

@@ -0,0 +1,36 @@
+import { explainVersions } from '../../../../store/reducers/explainQuery/utils';
+import { preparePlan, prepareSimplifiedPlan } from '../../../../utils/prepareQueryExplain';
+import { parseQueryExplainPlan } from '../../../../utils/query';
+export function getPlan(data) {
+    var _a, _b, _c;
+    if (!data) {
+        return {};
+    }
+    const { plan } = data;
+    if (plan) {
+        const queryPlan = parseQueryExplainPlan(plan);
+        const isSupportedVersion = queryPlan.meta.version === explainVersions.v2;
+        if (!isSupportedVersion) {
+            return {};
+        }
+        const { Plan: planWithStats, SimplifiedPlan: simplifiedPlan } = queryPlan;
+        return {
+            plan: planWithStats
+                ? { ...preparePlan(planWithStats), tables: queryPlan.tables }
+                : undefined,
+            simplifiedPlan: simplifiedPlan ? prepareSimplifiedPlan([simplifiedPlan]) : undefined,
+        };
+    }
+    const { stats } = data;
+    const planFromStats = (_c = (_b = (_a = stats === null || stats === void 0 ? void 0 : stats.Executions) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.TxPlansWithStats) === null || _c === void 0 ? void 0 : _c[0];
+    if (!planFromStats) {
+        return {};
+    }
+    try {
+        const planWithStats = JSON.parse(planFromStats);
+        return { plan: preparePlan(planWithStats) };
+    }
+    catch (e) {
+        return {};
+    }
+}

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.d.ts

@@ -1 +1,23 @@
-export function ExplainResult(props: any): import("react/jsx-runtime").JSX.Element;
+import type { PreparedExplainResponse } from '../../../../store/reducers/explainQuery/types';
+import type { ValueOf } from '../../../../types/common';
+import './ExplainResult.scss';
+declare const EXPLAIN_OPTIONS_IDS: {
+    readonly schema: "schema";
+    readonly json: "json";
+    readonly ast: "ast";
+    readonly simplified: "simplified";
+};
+export type QueryExplainTab = ValueOf<typeof EXPLAIN_OPTIONS_IDS>;
+interface ExplainResultProps {
+    theme: string;
+    explain?: PreparedExplainResponse['plan'];
+    simplifiedPlan?: PreparedExplainResponse['simplifiedPlan'];
+    ast?: string;
+    loading?: boolean;
+    isResultsCollapsed?: boolean;
+    error: unknown;
+    onCollapseResults: VoidFunction;
+    onExpandResults: VoidFunction;
+}
+export declare function ExplainResult({ explain, ast, theme, error, loading, onCollapseResults, onExpandResults, isResultsCollapsed, simplifiedPlan, }: ExplainResultProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -1,149 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
-import { Loader, RadioButton } from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
+import { RadioButton } from '@gravity-ui/uikit';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
+import { LoaderWrapper } from '../../../../components/LoaderWrapper/LoaderWrapper';
 import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
-import { explainVersions } from '../../../../store/reducers/explainQuery/utils';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
-import { S_EXPRESSION_LANGUAGE_ID } from '../../../../utils/monaco/constats';
+import { useTypedDispatch } from '../../../../utils/hooks';
 import { parseQueryErrorToString } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
-import { renderExplainNode } from './utils';
+import { QuerySettingsBanner } from '../QuerySettingsBanner/QuerySettingsBanner';
+import { Ast } from './components/Ast/Ast';
+import { Graph } from './components/Graph/Graph';
+import { SimplifiedPlan } from './components/SimplifiedPlan/SimplifiedPlan';
+import { TextExplain } from './components/TextExplain/TextExplain';
+import i18n from './i18n';
 import './ExplainResult.scss';
-import 'react-json-inspector/json-inspector.css';
 const b = cn('ydb-query-explain-result');
-const EDITOR_OPTIONS = {
-    automaticLayout: true,
-    selectOnLineNumbers: true,
-    readOnly: true,
-    minimap: {
-        enabled: false,
-    },
-    wrappingIndent: 'indent',
-};
-const ExplainOptionIds = {
+const EXPLAIN_OPTIONS_IDS = {
     schema: 'schema',
     json: 'json',
     ast: 'ast',
+    simplified: 'simplified',
+};
+const EXPLAIN_OPTIONS_NAMES = {
+    [EXPLAIN_OPTIONS_IDS.schema]: i18n('action.schema'),
+    [EXPLAIN_OPTIONS_IDS.json]: i18n('action.json'),
+    [EXPLAIN_OPTIONS_IDS.ast]: i18n('action.ast'),
+    [EXPLAIN_OPTIONS_IDS.simplified]: i18n('action.explain-plan'),
 };
 const explainOptions = [
-    { value: ExplainOptionIds.schema, content: 'Schema' },
-    { value: ExplainOptionIds.json, content: 'JSON' },
-    { value: ExplainOptionIds.ast, content: 'AST' },
+    { value: EXPLAIN_OPTIONS_IDS.schema, content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.schema] },
+    {
+        value: EXPLAIN_OPTIONS_IDS.simplified,
+        content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.simplified],
+    },
+    { value: EXPLAIN_OPTIONS_IDS.json, content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.json] },
+    { value: EXPLAIN_OPTIONS_IDS.ast, content: EXPLAIN_OPTIONS_NAMES[EXPLAIN_OPTIONS_IDS.ast] },
 ];
-function GraphRoot(props) {
-    const paranoid = React.useRef();
-    const { data, opts, shapes, theme } = props;
-    React.useEffect(() => {
-        const graphRoot = document.getElementById('graphRoot');
-        if (!graphRoot) {
-            throw new Error("Can't find element with id #graphRoot");
-        }
-        graphRoot.innerHTML = '';
-        paranoid.current = getTopology('graphRoot', data, opts, shapes);
-        paranoid.current.render();
-        return () => {
-            paranoid.current = undefined;
-        };
-    }, [theme]);
-    React.useEffect(() => {
-        var _a, _b;
-        (_b = (_a = paranoid.current) === null || _a === void 0 ? void 0 : _a.updateData) === null || _b === void 0 ? void 0 : _b.call(_a, props.data);
-    }, [props.data]);
-    return _jsx("div", { id: "graphRoot", style: { height: '100vh' } });
-}
-export function ExplainResult(props) {
+export function ExplainResult({ explain, ast, theme, error, loading, onCollapseResults, onExpandResults, isResultsCollapsed, simplifiedPlan, }) {
     const dispatch = useTypedDispatch();
-    const [activeOption, setActiveOption] = React.useState(ExplainOptionIds.schema);
-    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+    const [activeOption, setActiveOption] = React.useState(EXPLAIN_OPTIONS_IDS.schema);
+    const [isPending, startTransition] = React.useTransition();
     React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
     }, [dispatch]);
-    const onSelectOption = (tabId) => {
-        setActiveOption(tabId);
-    };
-    const renderLoader = () => {
-        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
-    };
     const renderStub = () => {
-        return (_jsx("div", { className: b('text-message'), children: `There is no ${activeOption} for the request` }));
-    };
-    const hasContent = () => {
-        var _a, _b;
-        switch (activeOption) {
-            case ExplainOptionIds.schema:
-                return Boolean((_b = (_a = props.explain) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.length);
-            case ExplainOptionIds.json:
-                return Boolean(props.explain);
-            case ExplainOptionIds.ast:
-                return Boolean(props.ast);
-            default:
-                return false;
-        }
-    };
-    const renderTextExplain = () => {
-        var _a;
-        const content = (_jsx(JSONTree, { data: (_a = props.explain) === null || _a === void 0 ? void 0 : _a.pristine, isExpanded: () => true, className: b('inspector'), searchOptions: {
-                debounceTime: 300,
-            } }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
-    };
-    const renderAstExplain = () => {
-        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: S_EXPRESSION_LANGUAGE_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", theme: `vs-${props.theme}` }) }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
-    };
-    const renderGraph = () => {
-        const { explain = {}, theme } = props;
-        const { links, nodes, version } = explain;
-        const isSupportedVersion = version === explainVersions.v2;
-        const isEnoughDataForGraph = links && nodes && nodes.length;
-        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", { className: b('explain-canvas-container', {
-                hidden: activeOption !== ExplainOptionIds.schema,
-            }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
-                    renderNodeTitle: renderExplainNode,
-                    textOverflow: 'normal',
-                    initialZoomFitsCanvas: true,
-                }, shapes: {
-                    node: getYdbPlanNodeShape,
-                } }) })) : null;
-        return (_jsxs(React.Fragment, { children: [!isFullscreen && content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
-    };
-    const renderError = () => {
-        return _jsx("div", { className: b('text-message'), children: parseQueryErrorToString(props.error) });
+        return (_jsx("div", { className: b('text-message'), children: i18n('description.empty-result', {
+                activeOption: EXPLAIN_OPTIONS_NAMES[activeOption],
+            }) }));
     };
     const renderContent = () => {
-        const { error, loading } = props;
-        if (loading) {
-            return renderLoader();
-        }
+        var _a;
         if (error) {
-            return renderError();
-        }
-        if (!hasContent()) {
-            return renderStub();
+            return _jsx("div", { className: b('text-message'), children: parseQueryErrorToString(error) });
         }
         switch (activeOption) {
-            case ExplainOptionIds.json: {
-                return renderTextExplain();
+            case EXPLAIN_OPTIONS_IDS.json: {
+                if (!(explain === null || explain === void 0 ? void 0 : explain.pristine)) {
+                    return renderStub();
+                }
+                return _jsx(TextExplain, { explain: explain.pristine });
+            }
+            case EXPLAIN_OPTIONS_IDS.ast: {
+                if (!ast) {
+                    return renderStub();
+                }
+                return _jsx(Ast, { ast: ast, theme: theme });
             }
-            case ExplainOptionIds.ast: {
-                return renderAstExplain();
+            case EXPLAIN_OPTIONS_IDS.schema: {
+                if (!((_a = explain === null || explain === void 0 ? void 0 : explain.nodes) === null || _a === void 0 ? void 0 : _a.length)) {
+                    return renderStub();
+                }
+                return _jsx(Graph, { theme: theme, explain: explain });
             }
-            case ExplainOptionIds.schema: {
-                return renderGraph();
+            case EXPLAIN_OPTIONS_IDS.simplified: {
+                if (!(simplifiedPlan === null || simplifiedPlan === void 0 ? void 0 : simplifiedPlan.length)) {
+                    return renderStub();
+                }
+                return _jsx(SimplifiedPlan, { plan: simplifiedPlan });
             }
             default:
                 return null;
         }
     };
-    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('controls'), children: !props.loading && (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: props.error }), !props.error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: onSelectOption })] }))] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(props.error) || !hasContent() }), _jsx(PaneVisibilityToggleButtons, { onCollapse: props.onCollapseResults, onExpand: props.onExpandResults, isCollapsed: props.isResultsCollapsed, initialDirection: "bottom" })] })] })) }), _jsx("div", { className: b('result'), children: renderContent() })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('controls'), children: !loading && (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), !error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: (tabId) => {
+                                                startTransition(() => setActiveOption(tabId));
+                                            } })] }))] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] })) }), _jsx(QuerySettingsBanner, {}), _jsx(LoaderWrapper, { loading: loading || isPending, children: _jsx(Fullscreen, { className: b('result'), children: renderContent() }) })] }));
 }

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/mixins.scss';
-
 .ydb-query-explain-result {
     &__result {
         display: flex;
@@ -10,6 +8,7 @@
     &__text-message {
         padding: 15px 20px;
     }
+
     &__controls {
         position: sticky;
         z-index: 2;
@@ -35,34 +34,6 @@
         display: flex;
         gap: 4px;
     }
-    &__explain-canvas-container {
-        overflow-y: auto;
-
-        width: 100%;
-        height: 100%;
-        &_hidden {
-            display: none;
-        }
-    }
-    &__inspector {
-        overflow-y: auto;
-
-        padding: 15px 20px;
-        @include json-tree-styles();
-
-        &_fullscreen {
-            padding: 10px;
-        }
-    }
-
-    &__ast {
-        overflow: hidden;
-
-        width: 100%;
-        height: 100%;
-
-        white-space: pre-wrap;
-    }
     &__loader {
         display: flex;
         justify-content: center;

package/dist/containers/Tenant/Query/ExplainResult/components/Ast/Ast.d.ts

@@ -0,0 +1,7 @@
+import './Ast.scss';
+interface AstProps {
+    ast: string;
+    theme: string;
+}
+export declare function Ast({ ast, theme }: AstProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/components/Ast/Ast.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MonacoEditor from 'react-monaco-editor';
+import { cn } from '../../../../../../utils/cn';
+import { S_EXPRESSION_LANGUAGE_ID } from '../../../../../../utils/monaco/constats';
+import './Ast.scss';
+const b = cn('ydb-query-explain-ast');
+const EDITOR_OPTIONS = {
+    automaticLayout: true,
+    selectOnLineNumbers: true,
+    readOnly: true,
+    minimap: {
+        enabled: false,
+    },
+    wrappingIndent: 'indent',
+};
+export function Ast({ ast, theme }) {
+    return (_jsx("div", { className: b(), children: _jsx(MonacoEditor, { language: S_EXPRESSION_LANGUAGE_ID, value: ast, options: EDITOR_OPTIONS, theme: `vs-${theme}` }) }));
+}

package/dist/containers/Tenant/Query/ExplainResult/components/Ast/Ast.scss

@@ -0,0 +1,8 @@
+.ydb-query-explain-ast {
+    overflow: hidden;
+
+    width: 100%;
+    height: 100%;
+
+    white-space: pre-wrap;
+}

package/dist/containers/Tenant/Query/ExplainResult/components/Graph/Graph.d.ts

@@ -0,0 +1,8 @@
+import type { PreparedExplainResponse } from '../../../../../../store/reducers/explainQuery/types';
+import './Graph.scss';
+interface GraphProps {
+    explain: PreparedExplainResponse['plan'];
+    theme: string;
+}
+export declare function Graph({ explain, theme }: GraphProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/components/Graph/Graph.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { YDBGraph } from '../../../../../../components/Graph/Graph';
+import { explainVersions } from '../../../../../../store/reducers/explainQuery/utils';
+import { cn } from '../../../../../../utils/cn';
+import i18n from '../../i18n';
+import './Graph.scss';
+const b = cn('ydb-query-explain-graph');
+export function Graph({ explain, theme }) {
+    const { links, nodes, version } = explain !== null && explain !== void 0 ? explain : {};
+    const isSupportedVersion = version === explainVersions.v2;
+    const isEnoughDataForGraph = links && nodes && nodes.length;
+    const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", { className: b('canvas-container'), children: _jsx(YDBGraph, { data: { links, nodes } }, theme) })) : (_jsx("div", { className: b('text-message'), children: i18n('description.graph-is-not-supported') }));
+    return content;
+}

package/dist/containers/Tenant/Query/ExplainResult/components/Graph/Graph.scss

@@ -0,0 +1,14 @@
+.ydb-query-explain-graph {
+    &__canvas-container {
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
+        &_hidden {
+            display: none;
+        }
+    }
+    &__text-message {
+        padding: 15px 20px;
+    }
+}

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/MetricsCell.d.ts

@@ -0,0 +1,6 @@
+interface MetricsCellProps {
+    value: unknown;
+    formatter: (value: number) => string;
+}
+export declare function MetricsCell({ value, formatter }: MetricsCellProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/MetricsCell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNumeric } from '../../../../../../utils/utils';
+import { block } from './utils';
+export function MetricsCell({ value, formatter }) {
+    if (!isNumeric(value)) {
+        return undefined;
+    }
+    const numberValue = Number(value);
+    const content = formatter(numberValue);
+    return _jsx("div", { className: block('metrics-cell'), children: content });
+}

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/OperationCell.d.ts

@@ -0,0 +1,13 @@
+import type { Row } from '@tanstack/react-table';
+import type { SimlifiedPlanOperatorOtherParams } from '../../../../../../types/api/query';
+interface OperationCellProps<TData> {
+    row: Row<TData>;
+    depth?: number;
+    params: {
+        name: string;
+        operationParams?: SimlifiedPlanOperatorOtherParams;
+        lines?: string;
+    };
+}
+export declare function OperationCell<TData>({ row, depth, params }: OperationCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/OperationCell.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ArrowToggle, Button, Flex } from '@gravity-ui/uikit';
+import { OperationParams } from './OperationParams';
+import { block } from './utils';
+const LEVEL_PADDING = 25;
+const FIRST_PADDING = 9;
+function Divider({ modifiers, left }) {
+    return (_jsx("div", { className: block('divider', modifiers), style: {
+            left,
+        } }));
+}
+function getDividers(lines, hasLeafs) {
+    const linesArray = lines.split('.').map(Number);
+    const dividers = [];
+    for (let i = 0; i < linesArray.length; i++) {
+        //logic for calculating left coordinate: FIRST_PADDING - is a padding from start of a level to the middle of toggle button
+        // LEVEL_PADDING is a difference between levels
+        // (i-1): in `lines` we have digits that point, should we paint a line for previous levels or not
+        if (i === linesArray.length - 1 && i !== 0) {
+            if (linesArray[i]) {
+                //horizontal pointer to the node (├)
+                dividers.push(_jsx(Divider, { modifiers: { horizontal: true }, left: FIRST_PADDING + 1 + LEVEL_PADDING * (i - 1) }, 'last'));
+            }
+            else {
+                //pointer to the last child in the branch (└)
+                dividers.push(_jsx(Divider, { modifiers: { last: true }, left: FIRST_PADDING + LEVEL_PADDING * (i - 1) }, 'last'));
+            }
+        }
+        if (i === linesArray.length - 1 && hasLeafs) {
+            //starting vertical line if node has leafs
+            dividers.push(_jsx(Divider, { modifiers: { first: true }, left: FIRST_PADDING + LEVEL_PADDING * i }, 'first'));
+        }
+        if (linesArray[i]) {
+            //vertical line indicating level
+            dividers.push(_jsx(Divider, { left: FIRST_PADDING + LEVEL_PADDING * (i - 1) }, i));
+        }
+    }
+    return dividers;
+}
+export function OperationCell({ row, depth = 0, params }) {
+    const { name, operationParams, lines = '' } = params;
+    const hasLeafs = row.getLeafRows().length > 0;
+    const dividers = React.useMemo(() => getDividers(lines, hasLeafs), [lines, hasLeafs]);
+    return (_jsxs("div", { style: {
+            paddingLeft: LEVEL_PADDING * depth,
+        }, className: block('operation-name'), children: [dividers, _jsxs(Flex, { gap: 1, alignItems: "flex-start", className: block('operation-content'), children: [row.getCanExpand() && (_jsx(Button, { view: "flat", size: "xs", onClick: row.getToggleExpandedHandler(), children: _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: row.getIsExpanded() ? 'bottom' : 'right', size: 14 }) }) })), _jsx("div", { className: block('operation-name-content'), children: _jsxs("div", { children: [name, "\u00A0", _jsx(OperationParams, { params: operationParams })] }) })] })] }));
+}

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/OperationParams.d.ts

@@ -0,0 +1,6 @@
+import type { SimlifiedPlanOperatorOtherParams } from '../../../../../../types/api/query';
+interface OperationParamsProps {
+    params?: SimlifiedPlanOperatorOtherParams;
+}
+export declare function OperationParams({ params }: OperationParamsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/OperationParams.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { block } from './utils';
+const operatorPropertyToColor = {
+    Table: 'var(--g-color-text-info)',
+    Predicate: 'var(--g-color-text-positive)',
+    Condition: 'var(--g-color-text-utility)',
+};
+function getOperatorPropertyColor(property) {
+    if (property in operatorPropertyToColor) {
+        return operatorPropertyToColor[property];
+    }
+    return 'var(--g-color-text-secondary)';
+}
+function prepareValue(value) {
+    if (value === undefined) {
+        return '';
+    }
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    else {
+        return value.toString();
+    }
+}
+function reorderParamsEntries(params) {
+    const reordered = [];
+    const { Table, Predicate, Condition, ...rest } = params;
+    if (Table) {
+        reordered.push(['Table', Table]);
+    }
+    if (Predicate) {
+        reordered.push(['Predicate', Predicate]);
+    }
+    if (Condition) {
+        reordered.push(['Condition', Condition]);
+    }
+    return reordered.concat(Object.entries(rest));
+}
+function getOperationParams(params = {}) {
+    const result = [];
+    const paramsEntries = Object.entries(params);
+    if (paramsEntries.length === 1) {
+        const value = paramsEntries[0][1];
+        const color = getOperatorPropertyColor(paramsEntries[0][0]);
+        // if there is only one param, display value without key
+        result.push(_jsx("span", { style: { color }, children: prepareValue(value) }, "param"));
+    }
+    else {
+        const reorderedParamsEntries = reorderParamsEntries(params);
+        for (let i = 0; i < reorderedParamsEntries.length; i++) {
+            const [key, value] = reorderedParamsEntries[i];
+            const color = getOperatorPropertyColor(key);
+            if (i > 0) {
+                result.push(', ');
+            }
+            result.push(_jsxs("span", { style: { color }, children: [key, ": ", prepareValue(value)] }, i));
+        }
+    }
+    return result;
+}
+export function OperationParams({ params }) {
+    if (!params) {
+        return null;
+    }
+    return _jsxs("span", { className: block('operation-params'), children: ["(", getOperationParams(params), ")"] });
+}

package/dist/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/SimplifiedPlan.d.ts

@@ -0,0 +1,7 @@
+import type { SimplifiedPlanItem } from '../../../../../../store/reducers/explainQuery/types';
+import './SimplifiedPlan.scss';
+interface SimplifiedPlanProps {
+    plan: SimplifiedPlanItem[];
+}
+export declare function SimplifiedPlan({ plan }: SimplifiedPlanProps): import("react/jsx-runtime").JSX.Element;
+export {};