@gravity-ui/querieskit 1.5.1 → 1.7.0

package/build/cjs/components/QueryGraph/internal/QueryGraphCanvasBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_graph","require","_layout","_presentation","_queryGraphIcons","_interopRequireDefault","e","__esModule","default","imageCache","Map","statusTokens","waiting","running","completed","failed","aborted","statusIconTokens","resourceTokens","START_ANGLE","Math","PI","STATUS_ICON_SIZE_RATIO","STATUS_ICON_BACKGROUND_RADIUS_RATIO","PROGRESS_WIDTH_RATIO","INNER_BORDER_WIDTH_RATIO","COUNTER_MAX_WIDTH_RATIO","LABEL_MAX_WIDTH_RATIO","COUNTER_FONT_SIZE","LABEL_FONT_SIZE","LABEL_GAP","RESOURCE_ICON_SIZE","cssValue","token","element","document","getComputedStyle","documentElement","getPropertyValue","trim","coloredSvgDataUrl","svg","color","markup","split","join","concat","encodeURIComponent","getCanvasImage","onSettled","Image","undefined","key","entry","get","image","state","listeners","Set","set","onload","forEach","listener","clear","onerror","src","add","QueryGraphCanvasBlock","exports","_CanvasBlock","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","redrawAfterImageLoad","performRender","_inherits","_createClass","value","renderMinimalisticBlock","ctx","renderQueryNode","renderSchematicView","renderDetailedView","context","_node$status","_node$label","meta","node","status","_ref","kind","_ref2","_slicedToArray","lineToken","baseToken","save","drawRunningOperation","getQueryGraphProgress","drawNodeShape","content","getQueryGraphNodeContent","_this$state","x","y","width","height","side","drawIcon","iconSvg","fallbackIconSvg","iconColorToken","canvas","fallbackIconColorToken","drawCounter","drawStatusIcon","drawLabel","label","name","restore","_this$state2","beginPath","arc","roundRect","fillStyle","fill","lineWidth","strokeStyle","stroke","progress","_this$state3","centerX","centerY","radius","progressWidth","endAngle","runningBase","runningLine","progressBase","progressLine","background","moveTo","closePath","_this$state4","maxFontSize","getScaleAdjustedFontSize","graph","cameraService","getCameraScale","fontFamily","textAlign","textBaseline","font","fontSize","fitCanvasFontSize","measureText","fillText","getQueryGraphStatusIconSvg","colorToken","_this$state5","backgroundRadius","iconX","iconY","fallbackSvg","fallbackColor","_entry","_entry2","drawImage","trimStart","_this$state6","cameraScale","labelGap","maxWidth","fitted","fitCanvasText","CanvasBlock"],"sources":["QueryGraphCanvasBlock.ts"],"sourcesContent":["/* eslint-disable no-param-reassign -- CanvasRenderingContext2D exposes drawing state as mutable properties. */\nimport {CanvasBlock, type TBlock} from '@gravity-ui/graph';\n\nimport type {QueryGraphNode, QueryGraphNodeStatus} from '../../../types/queryGraph';\nimport {getQueryGraphProgress} from '../helpers/layout';\nimport {\n    fitCanvasFontSize,\n    fitCanvasText,\n    getQueryGraphNodeContent,\n    getScaleAdjustedFontSize,\n} from '../helpers/presentation';\nimport {getQueryGraphStatusIconSvg} from './queryGraphIcons';\n\ntype QueryGraphBlockMeta = {\n    node: QueryGraphNode;\n    iconSvg: string;\n    fallbackIconSvg: string;\n    iconColorToken: string;\n    fallbackIconColorToken: string;\n};\n\nexport type QueryGraphBlock = TBlock<QueryGraphBlockMeta>;\n\ntype ImageCacheEntry = {\n    image: HTMLImageElement;\n    state: 'loading' | 'loaded' | 'failed';\n    listeners: Set<() => void>;\n};\n\nconst imageCache = new Map<string, ImageCacheEntry>();\nconst statusTokens = {\n    'not-started': ['--g-color-line-generic', '--g-color-base-float'],\n    waiting: ['--g-color-text-misc-heavy', '--g-color-base-misc-light'],\n    running: ['--g-color-line-generic', '--g-color-line-generic'],\n    completed: ['--g-color-text-positive-heavy', '--g-color-base-positive-light'],\n    failed: ['--g-color-text-danger-heavy', '--g-color-base-danger-light'],\n    aborted: ['--g-color-text-complementary', '--g-color-base-generic'],\n} as const;\nconst statusIconTokens: Partial<Record<QueryGraphNodeStatus, string>> = {\n    running: '--g-color-text-info',\n    completed: '--g-color-text-positive-heavy',\n    failed: '--g-color-text-danger-heavy',\n    aborted: '--g-color-text-complementary',\n};\nconst resourceTokens = ['--g-color-line-generic', '--g-color-base-float'] as const;\nconst START_ANGLE = -Math.PI / 2;\nconst STATUS_ICON_SIZE_RATIO = 1 / 4;\nconst STATUS_ICON_BACKGROUND_RADIUS_RATIO = 1 / 6;\nconst PROGRESS_WIDTH_RATIO = 1 / 9;\nconst INNER_BORDER_WIDTH_RATIO = 1 / 25;\nconst COUNTER_MAX_WIDTH_RATIO = 7 / 9;\nconst LABEL_MAX_WIDTH_RATIO = 2;\nconst COUNTER_FONT_SIZE = 11;\nconst LABEL_FONT_SIZE = 9;\nconst LABEL_GAP = 4;\nconst RESOURCE_ICON_SIZE = 16;\n\nfunction cssValue(token: string, element?: Element) {\n    if (typeof document === 'undefined') return '';\n    return getComputedStyle(element ?? document.documentElement)\n        .getPropertyValue(token)\n        .trim();\n}\n\nfunction coloredSvgDataUrl(svg: string, color: string) {\n    const markup = svg.split('currentColor').join(color || '#000');\n    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;\n}\n\nfunction getCanvasImage(svg: string, color: string, onSettled: () => void) {\n    if (typeof Image === 'undefined') return undefined;\n    const key = `${color}\\n${svg}`;\n    let entry = imageCache.get(key);\n    if (!entry) {\n        const image = new Image();\n        entry = {image, state: 'loading', listeners: new Set()};\n        imageCache.set(key, entry);\n        image.onload = () => {\n            if (!entry) return;\n            entry.state = 'loaded';\n            entry.listeners.forEach((listener) => listener());\n            entry.listeners.clear();\n        };\n        image.onerror = () => {\n            if (!entry) return;\n            entry.state = 'failed';\n            entry.listeners.forEach((listener) => listener());\n            entry.listeners.clear();\n        };\n        image.src = coloredSvgDataUrl(svg, color);\n    }\n    if (entry.state === 'loading') entry.listeners.add(onSettled);\n    return entry;\n}\n\nexport class QueryGraphCanvasBlock extends CanvasBlock<QueryGraphBlock> {\n    public override renderMinimalisticBlock(ctx: CanvasRenderingContext2D) {\n        this.renderQueryNode(ctx);\n    }\n\n    public override renderSchematicView(ctx: CanvasRenderingContext2D) {\n        this.renderQueryNode(ctx);\n    }\n\n    public override renderDetailedView(ctx: CanvasRenderingContext2D) {\n        this.renderQueryNode(ctx);\n    }\n\n    private readonly redrawAfterImageLoad = () => this.performRender();\n\n    private renderQueryNode(context: CanvasRenderingContext2D) {\n        const {meta} = this.state;\n        if (!meta?.node) return;\n        const {node} = meta;\n        const status = node.status ?? 'not-started';\n        const [lineToken, baseToken] =\n            node.kind === 'operation' ? statusTokens[status] : resourceTokens;\n\n        context.save();\n        if (node.kind === 'operation' && status === 'running') {\n            this.drawRunningOperation(context, getQueryGraphProgress(node));\n        } else {\n            this.drawNodeShape(context, lineToken, baseToken);\n        }\n\n        const content = getQueryGraphNodeContent(node);\n        if (content.kind === 'icon') {\n            const {x, y, width, height} = this.state;\n            const side = node.kind === 'operation' ? width / 2 : RESOURCE_ICON_SIZE;\n            this.drawIcon(\n                context,\n                meta.iconSvg,\n                meta.fallbackIconSvg,\n                x + (width - side) / 2,\n                y + (height - side) / 2,\n                side,\n                cssValue(meta.iconColorToken, context.canvas),\n                cssValue(meta.fallbackIconColorToken, context.canvas),\n            );\n        } else if (content.kind === 'counter') {\n            this.drawCounter(context, content.value);\n        }\n\n        if (node.kind === 'operation') this.drawStatusIcon(context, status);\n        this.drawLabel(context, node.label ?? node.name, node.kind !== 'operation');\n        context.restore();\n    }\n\n    private drawNodeShape(context: CanvasRenderingContext2D, lineToken: string, baseToken: string) {\n        const {x, y, width, height, meta} = this.state;\n        context.beginPath();\n        if (meta?.node.kind === 'operation') {\n            context.arc(x + width / 2, y + height / 2, width / 2 - 1, 0, Math.PI * 2);\n        } else {\n            context.roundRect(x + 1, y + 1, width - 2, height - 2, 12);\n        }\n        context.fillStyle = cssValue(baseToken, context.canvas);\n        context.fill();\n        context.lineWidth = 2;\n        context.strokeStyle = cssValue(lineToken, context.canvas);\n        context.stroke();\n    }\n\n    private drawRunningOperation(context: CanvasRenderingContext2D, progress: number) {\n        const {x, y, width, height} = this.state;\n        const centerX = x + width / 2;\n        const centerY = y + height / 2;\n        const radius = width / 2;\n        const progressWidth = width * PROGRESS_WIDTH_RATIO;\n        const endAngle = START_ANGLE + Math.PI * 2 * progress;\n        const runningBase = cssValue('--g-color-line-generic', context.canvas);\n        const runningLine = cssValue('--g-color-line-generic', context.canvas);\n        const progressBase = cssValue('--g-color-base-info-light', context.canvas);\n        const progressLine = cssValue('--g-color-text-info', context.canvas);\n        const background = cssValue('--g-color-base-background', context.canvas);\n\n        context.beginPath();\n        context.arc(centerX, centerY, radius - progressWidth / 2, 0, Math.PI * 2);\n        context.fillStyle = runningBase;\n        context.fill();\n        context.lineWidth = progressWidth;\n        context.strokeStyle = runningLine;\n        context.stroke();\n\n        if (progress > 0) {\n            context.beginPath();\n            context.moveTo(centerX, centerY);\n            context.arc(centerX, centerY, radius - progressWidth / 2, START_ANGLE, endAngle);\n            context.closePath();\n            context.fillStyle = progressBase;\n            context.fill();\n\n            context.beginPath();\n            context.arc(centerX, centerY, radius - progressWidth / 2, START_ANGLE, endAngle);\n            context.lineWidth = progressWidth;\n            context.strokeStyle = progressLine;\n            context.stroke();\n        }\n\n        context.beginPath();\n        context.arc(centerX, centerY, radius - progressWidth, 0, Math.PI * 2);\n        context.lineWidth = width * INNER_BORDER_WIDTH_RATIO;\n        context.strokeStyle = background;\n        context.stroke();\n    }\n\n    private drawCounter(context: CanvasRenderingContext2D, value: string) {\n        const {x, y, width, height} = this.state;\n        const maxFontSize = getScaleAdjustedFontSize(\n            COUNTER_FONT_SIZE,\n            this.context.graph.cameraService.getCameraScale(),\n        );\n        const fontFamily = cssValue('--g-font-family-sans', context.canvas);\n        context.fillStyle = cssValue('--g-color-text-primary', context.canvas);\n        context.textAlign = 'center';\n        context.textBaseline = 'middle';\n        context.font = `500 ${maxFontSize}px ${fontFamily}`;\n        const fontSize = fitCanvasFontSize(\n            maxFontSize,\n            context.measureText(value).width,\n            width * COUNTER_MAX_WIDTH_RATIO,\n        );\n        context.font = `500 ${fontSize}px ${fontFamily}`;\n        context.fillText(value, x + width / 2, y + height / 2);\n    }\n\n    private drawStatusIcon(context: CanvasRenderingContext2D, status: QueryGraphNodeStatus) {\n        const iconSvg = getQueryGraphStatusIconSvg(status);\n        const colorToken = statusIconTokens[status];\n        if (!iconSvg || !colorToken) return;\n        const {x, y, width} = this.state;\n        const side = width * STATUS_ICON_SIZE_RATIO;\n        const backgroundRadius = width * STATUS_ICON_BACKGROUND_RADIUS_RATIO;\n        const iconX = x + width - side;\n        const iconY = y;\n\n        context.beginPath();\n        context.arc(iconX + side / 2, iconY + side / 2, backgroundRadius, 0, Math.PI * 2);\n        context.fillStyle = cssValue('--g-color-base-background', context.canvas);\n        context.fill();\n        this.drawIcon(\n            context,\n            iconSvg,\n            iconSvg,\n            iconX,\n            iconY,\n            side,\n            cssValue(colorToken, context.canvas),\n            cssValue(colorToken, context.canvas),\n        );\n    }\n\n    private drawIcon(\n        context: CanvasRenderingContext2D,\n        svg: string,\n        fallbackSvg: string,\n        x: number,\n        y: number,\n        side: number,\n        color: string,\n        fallbackColor: string,\n    ) {\n        let entry = getCanvasImage(svg, color, this.redrawAfterImageLoad);\n        if (entry?.state === 'failed' && fallbackSvg !== svg) {\n            entry = getCanvasImage(fallbackSvg, fallbackColor, this.redrawAfterImageLoad);\n        }\n        if (entry?.state === 'loaded') context.drawImage(entry.image, x, y, side, side);\n    }\n\n    private drawLabel(context: CanvasRenderingContext2D, label: string, trimStart: boolean) {\n        const {x, y, width, height} = this.state;\n        const cameraScale = this.context.graph.cameraService.getCameraScale();\n        const fontSize = getScaleAdjustedFontSize(LABEL_FONT_SIZE, cameraScale);\n        const labelGap = getScaleAdjustedFontSize(LABEL_GAP, cameraScale);\n        // Keep the available screen width stable, just like the label's font size.\n        const maxWidth = getScaleAdjustedFontSize(width * LABEL_MAX_WIDTH_RATIO, cameraScale);\n        context.fillStyle = cssValue('--g-color-text-primary', context.canvas);\n        context.textAlign = 'center';\n        context.textBaseline = 'top';\n        context.font = `400 ${fontSize}px ${cssValue('--g-font-family-sans', context.canvas)}`;\n        const fitted = fitCanvasText(context, label, maxWidth, trimStart);\n        context.fillText(fitted, x + width / 2, y + height + labelGap);\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/QueryGraph/internal/QueryGraphPopup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { QueryGraphNode } from '../../../types/queryGraph';
+export declare function QueryGraphPopup({ node }: {
+    node: QueryGraphNode;
+}): React.JSX.Element;

package/build/cjs/components/QueryGraph/internal/QueryGraphPopup.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryGraphPopup = QueryGraphPopup;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.is-array.js");
+require("core-js/modules/es.array.join.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _i18n = _interopRequireDefault(require("../i18n"));
+var _queryGraphIcons = require("./queryGraphIcons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var jobStatuses = ['pending', 'running', 'completed', 'failed', 'aborted'];
+var jobStatusLabels = {
+  pending: 'status_pending',
+  running: 'status_running',
+  completed: 'status_completed',
+  failed: 'status_failed',
+  aborted: 'status_aborted'
+};
+function QueryGraphPopup(_ref) {
+  var _node$popup$details, _node$popup6, _ref2, _node$popup$jobs, _node$popup7;
+  var node = _ref.node;
+  var sections = (0, _react.useMemo)(function () {
+    var _node$popup, _node$popup2, _node$popup3, _node$popup4, _node$popup5;
+    var items = [];
+    if ((_node$popup = node.popup) !== null && _node$popup !== void 0 && (_node$popup = _node$popup.stages) !== null && _node$popup !== void 0 && _node$popup.length) items.push('stages');
+    if ((_node$popup2 = node.popup) !== null && _node$popup2 !== void 0 && (_node$popup2 = _node$popup2.details) !== null && _node$popup2 !== void 0 && _node$popup2.length) items.push('details');
+    if ((_node$popup3 = node.popup) !== null && _node$popup3 !== void 0 && _node$popup3.jobs || node.progress) items.push('jobs');
+    if ((_node$popup4 = node.popup) !== null && _node$popup4 !== void 0 && (_node$popup4 = _node$popup4.inputs) !== null && _node$popup4 !== void 0 && _node$popup4.length || (_node$popup5 = node.popup) !== null && _node$popup5 !== void 0 && (_node$popup5 = _node$popup5.outputs) !== null && _node$popup5 !== void 0 && _node$popup5.length) items.push('schemas');
+    return items;
+  }, [node.popup, node.progress]);
+  var _useState = (0, _react.useState)(sections[0]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    section = _useState2[0],
+    setSection = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!section || !sections.includes(section)) setSection(sections[0]);
+  }, [section, sections]);
+  var labels = {
+    stages: (0, _i18n.default)('value_stages'),
+    details: (0, _i18n.default)('value_details'),
+    jobs: (0, _i18n.default)('value_jobs'),
+    schemas: (0, _i18n.default)('value_schemas')
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "qp-query-graph__popup-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "qp-query-graph__popup-title",
+      children: [(0, _queryGraphIcons.getQueryGraphNodeIcon)(node), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+          variant: "subheader-1",
+          children: node.name
+        }), node.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+          color: "secondary",
+          children: node.label
+        })]
+      })]
+    }), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.SegmentedRadioGroup, {
+      size: "s",
+      width: "max",
+      value: section,
+      onUpdate: function onUpdate(value) {
+        return setSection(value);
+      },
+      children: sections.map(function (item) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.SegmentedRadioGroup.Option, {
+          value: item,
+          children: labels[item]
+        }, item);
+      })
+    }), section === 'stages' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Stages, {
+      node: node
+    }), section === 'details' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Details, {
+      items: (_node$popup$details = (_node$popup6 = node.popup) === null || _node$popup6 === void 0 ? void 0 : _node$popup6.details) !== null && _node$popup$details !== void 0 ? _node$popup$details : []
+    }), section === 'jobs' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Jobs, {
+      jobs: (_ref2 = (_node$popup$jobs = (_node$popup7 = node.popup) === null || _node$popup7 === void 0 ? void 0 : _node$popup7.jobs) !== null && _node$popup$jobs !== void 0 ? _node$popup$jobs : node.progress) !== null && _ref2 !== void 0 ? _ref2 : {}
+    }), section === 'schemas' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Schemas, {
+      node: node
+    }), !sections.length && node.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "secondary",
+      children: node.label
+    })]
+  });
+}
+function Stages(_ref3) {
+  var _node$popup$stages, _node$popup8;
+  var node = _ref3.node;
+  var data = (_node$popup$stages = (_node$popup8 = node.popup) === null || _node$popup8 === void 0 ? void 0 : _node$popup8.stages) !== null && _node$popup$stages !== void 0 ? _node$popup$stages : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Table, {
+    data: data,
+    columns: [{
+      id: 'name',
+      name: (0, _i18n.default)('field_stage')
+    }, {
+      id: 'duration',
+      name: (0, _i18n.default)('field_duration'),
+      align: 'end',
+      template: function template(item) {
+        return formatDuration(item.duration);
+      }
+    }]
+  });
+}
+function Details(_ref4) {
+  var items = _ref4.items;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "qp-query-graph__details",
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Detail, {
+        item: item
+      }, "".concat(item.name, "-").concat(index));
+    })
+  });
+}
+function Detail(_ref5) {
+  var _item$children;
+  var item = _ref5.item;
+  var content = item.value === undefined ? null : formatValue(item.value);
+  if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+      open: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
+        children: item.name
+      }), content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+        color: "secondary",
+        children: content
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Details, {
+        items: item.children
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "qp-query-graph__detail-row",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "secondary",
+      children: item.name
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      children: content
+    })]
+  });
+}
+function Jobs(_ref6) {
+  var _jobs$total, _jobs$completed;
+  var jobs = _ref6.jobs;
+  var rows = jobStatuses.map(function (status) {
+    var _jobs$status;
+    return {
+      status: (0, _i18n.default)(jobStatusLabels[status]),
+      count: (_jobs$status = jobs[status]) !== null && _jobs$status !== void 0 ? _jobs$status : 0
+    };
+  });
+  var total = (_jobs$total = jobs.total) !== null && _jobs$total !== void 0 ? _jobs$total : 0;
+  var completed = (_jobs$completed = jobs.completed) !== null && _jobs$completed !== void 0 ? _jobs$completed : 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "qp-query-graph__jobs",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Progress, {
+      size: "xs",
+      value: total > 0 ? completed / total * 100 : 0
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Table, {
+      data: [].concat((0, _toConsumableArray2.default)(rows), [{
+        status: (0, _i18n.default)('value_total'),
+        count: total
+      }]),
+      columns: [{
+        id: 'status',
+        name: (0, _i18n.default)('field_status')
+      }, {
+        id: 'count',
+        name: (0, _i18n.default)('field_count'),
+        align: 'end'
+      }]
+    })]
+  });
+}
+function Schemas(_ref7) {
+  var _node$popup$inputs, _node$popup9, _node$popup$outputs, _node$popup0;
+  var node = _ref7.node;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "qp-query-graph__schemas",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaGroup, {
+      title: (0, _i18n.default)('value_inputs'),
+      schemas: (_node$popup$inputs = (_node$popup9 = node.popup) === null || _node$popup9 === void 0 ? void 0 : _node$popup9.inputs) !== null && _node$popup$inputs !== void 0 ? _node$popup$inputs : []
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaGroup, {
+      title: (0, _i18n.default)('value_outputs'),
+      schemas: (_node$popup$outputs = (_node$popup0 = node.popup) === null || _node$popup0 === void 0 ? void 0 : _node$popup0.outputs) !== null && _node$popup$outputs !== void 0 ? _node$popup$outputs : []
+    })]
+  });
+}
+function SchemaGroup(_ref8) {
+  var title = _ref8.title,
+    schemas = _ref8.schemas;
+  if (!schemas.length) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+    open: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
+      children: title
+    }), schemas.map(function (schema) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+        open: schemas.length === 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
+          children: schema.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Table, {
+          data: schema.columns,
+          columns: [{
+            id: 'name',
+            name: (0, _i18n.default)('field_name')
+          }, {
+            id: 'type',
+            name: (0, _i18n.default)('field_type'),
+            align: 'end'
+          }]
+        })]
+      }, schema.name);
+    })]
+  });
+}
+function formatDuration(value) {
+  if (value < 1000) return "".concat(value, " ms");
+  return "".concat((value / 1000).toFixed(value < 10000 ? 1 : 0), " s");
+}
+function formatValue(value) {
+  if (Array.isArray(value)) return value.map(formatValue).join(', ');
+  if (value === null) return 'null';
+  return String(value);
+}
+// #sourceMappingURL=QueryGraphPopup.js.map

package/build/cjs/components/QueryGraph/internal/QueryGraphPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_i18n","_interopRequireDefault","_queryGraphIcons","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","jobStatuses","jobStatusLabels","pending","running","completed","failed","aborted","QueryGraphPopup","_ref","_node$popup$details","_node$popup6","_ref2","_node$popup$jobs","_node$popup7","node","sections","useMemo","_node$popup","_node$popup2","_node$popup3","_node$popup4","_node$popup5","items","popup","stages","length","push","details","jobs","progress","inputs","outputs","_useState","useState","_useState2","_slicedToArray","section","setSection","useEffect","includes","labels","i18n","schemas","_jsxs","className","children","getQueryGraphNodeIcon","_jsx","Text","variant","name","label","color","SegmentedRadioGroup","size","width","value","onUpdate","map","item","Option","Stages","Details","Jobs","Schemas","_ref3","_node$popup$stages","_node$popup8","data","Table","columns","id","align","template","formatDuration","duration","_ref4","index","Detail","concat","_ref5","_item$children","content","undefined","formatValue","open","_ref6","_jobs$total","_jobs$completed","rows","status","_jobs$status","count","total","Progress","_toConsumableArray","_ref7","_node$popup$inputs","_node$popup9","_node$popup$outputs","_node$popup0","SchemaGroup","title","_ref8","schema","toFixed","Array","isArray","join","String"],"sources":["QueryGraphPopup.tsx"],"sourcesContent":["import React, {useEffect, useMemo, useState} from 'react';\nimport {Progress, SegmentedRadioGroup, Table, Text} from '@gravity-ui/uikit';\n\nimport type {\n    QueryGraphDetail,\n    QueryGraphJobCounts,\n    QueryGraphNode,\n    QueryGraphSchema,\n} from '../../../types/queryGraph';\nimport i18n from '../i18n';\nimport {getQueryGraphNodeIcon} from './queryGraphIcons';\n\ntype Section = 'stages' | 'details' | 'jobs' | 'schemas';\nconst jobStatuses = ['pending', 'running', 'completed', 'failed', 'aborted'] as const;\nconst jobStatusLabels = {\n    pending: 'status_pending',\n    running: 'status_running',\n    completed: 'status_completed',\n    failed: 'status_failed',\n    aborted: 'status_aborted',\n} as const;\n\nexport function QueryGraphPopup({node}: {node: QueryGraphNode}) {\n    const sections = useMemo(() => {\n        const items: Section[] = [];\n        if (node.popup?.stages?.length) items.push('stages');\n        if (node.popup?.details?.length) items.push('details');\n        if (node.popup?.jobs || node.progress) items.push('jobs');\n        if (node.popup?.inputs?.length || node.popup?.outputs?.length) items.push('schemas');\n        return items;\n    }, [node.popup, node.progress]);\n    const [section, setSection] = useState<Section | undefined>(sections[0]);\n\n    useEffect(() => {\n        if (!section || !sections.includes(section)) setSection(sections[0]);\n    }, [section, sections]);\n\n    const labels: Record<Section, string> = {\n        stages: i18n('value_stages'),\n        details: i18n('value_details'),\n        jobs: i18n('value_jobs'),\n        schemas: i18n('value_schemas'),\n    };\n\n    return (\n        <div className=\"qp-query-graph__popup-content\">\n            <div className=\"qp-query-graph__popup-title\">\n                {getQueryGraphNodeIcon(node)}\n                <div>\n                    <Text variant=\"subheader-1\">{node.name}</Text>\n                    {node.label && <Text color=\"secondary\">{node.label}</Text>}\n                </div>\n            </div>\n            {sections.length > 1 && (\n                <SegmentedRadioGroup\n                    size=\"s\"\n                    width=\"max\"\n                    value={section}\n                    onUpdate={(value) => setSection(value as Section)}\n                >\n                    {sections.map((item) => (\n                        <SegmentedRadioGroup.Option key={item} value={item}>\n                            {labels[item]}\n                        </SegmentedRadioGroup.Option>\n                    ))}\n                </SegmentedRadioGroup>\n            )}\n            {section === 'stages' && <Stages node={node} />}\n            {section === 'details' && <Details items={node.popup?.details ?? []} />}\n            {section === 'jobs' && <Jobs jobs={node.popup?.jobs ?? node.progress ?? {}} />}\n            {section === 'schemas' && <Schemas node={node} />}\n            {!sections.length && node.label && <Text color=\"secondary\">{node.label}</Text>}\n        </div>\n    );\n}\n\nfunction Stages({node}: {node: QueryGraphNode}) {\n    const data = node.popup?.stages ?? [];\n    return (\n        <Table\n            data={data}\n            columns={[\n                {id: 'name', name: i18n('field_stage')},\n                {\n                    id: 'duration',\n                    name: i18n('field_duration'),\n                    align: 'end',\n                    template: (item) => formatDuration(item.duration),\n                },\n            ]}\n        />\n    );\n}\n\nfunction Details({items}: {items: QueryGraphDetail[]}) {\n    return (\n        <div className=\"qp-query-graph__details\">\n            {items.map((item, index) => (\n                <Detail key={`${item.name}-${index}`} item={item} />\n            ))}\n        </div>\n    );\n}\n\nfunction Detail({item}: {item: QueryGraphDetail}) {\n    const content = item.value === undefined ? null : formatValue(item.value);\n    if (item.children?.length) {\n        return (\n            <details open>\n                <summary>{item.name}</summary>\n                {content && <Text color=\"secondary\">{content}</Text>}\n                <Details items={item.children} />\n            </details>\n        );\n    }\n    return (\n        <div className=\"qp-query-graph__detail-row\">\n            <Text color=\"secondary\">{item.name}</Text>\n            <Text>{content}</Text>\n        </div>\n    );\n}\n\nfunction Jobs({jobs}: {jobs: QueryGraphJobCounts}) {\n    const rows = jobStatuses.map((status) => ({\n        status: i18n(jobStatusLabels[status]),\n        count: jobs[status] ?? 0,\n    }));\n    const total = jobs.total ?? 0;\n    const completed = jobs.completed ?? 0;\n    return (\n        <div className=\"qp-query-graph__jobs\">\n            <Progress size=\"xs\" value={total > 0 ? (completed / total) * 100 : 0} />\n            <Table\n                data={[...rows, {status: i18n('value_total'), count: total}]}\n                columns={[\n                    {id: 'status', name: i18n('field_status')},\n                    {id: 'count', name: i18n('field_count'), align: 'end'},\n                ]}\n            />\n        </div>\n    );\n}\n\nfunction Schemas({node}: {node: QueryGraphNode}) {\n    return (\n        <div className=\"qp-query-graph__schemas\">\n            <SchemaGroup title={i18n('value_inputs')} schemas={node.popup?.inputs ?? []} />\n            <SchemaGroup title={i18n('value_outputs')} schemas={node.popup?.outputs ?? []} />\n        </div>\n    );\n}\n\nfunction SchemaGroup({title, schemas}: {title: string; schemas: QueryGraphSchema[]}) {\n    if (!schemas.length) return null;\n    return (\n        <details open>\n            <summary>{title}</summary>\n            {schemas.map((schema) => (\n                <details key={schema.name} open={schemas.length === 1}>\n                    <summary>{schema.name}</summary>\n                    <Table\n                        data={schema.columns}\n                        columns={[\n                            {id: 'name', name: i18n('field_name')},\n                            {id: 'type', name: i18n('field_type'), align: 'end'},\n                        ]}\n                    />\n                </details>\n            ))}\n        </details>\n    );\n}\n\nfunction formatDuration(value: number) {\n    if (value < 1000) return `${value} ms`;\n    return `${(value / 1000).toFixed(value < 10000 ? 1 : 0)} s`;\n}\n\nfunction formatValue(value: QueryGraphDetail['value']): string {\n    if (Array.isArray(value)) return value.map(formatValue).join(', ');\n    if (value === null) return 'null';\n    return String(value);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/QueryGraph/internal/queryGraphIcons.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { QueryGraphNode, QueryGraphNodeStatus } from '../../../types/queryGraph';
+export declare function getDefaultQueryGraphNodeIcon(node: QueryGraphNode): React.ReactElement;
+export declare function getQueryGraphNodeIcon(node: QueryGraphNode): React.ReactElement;
+export declare function getQueryGraphNodeIconSvgs(node: QueryGraphNode): {
+    iconSvg: string;
+    fallbackIconSvg: string;
+    iconColorToken: string;
+    fallbackIconColorToken: string;
+};
+export declare function queryGraphIconToSvg(icon: React.ReactNode): string | undefined;
+export declare function getQueryGraphStatusIconSvg(status: QueryGraphNodeStatus): string | undefined;

package/build/cjs/components/QueryGraph/internal/queryGraphIcons.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultQueryGraphNodeIcon = getDefaultQueryGraphNodeIcon;
+exports.getQueryGraphNodeIcon = getQueryGraphNodeIcon;
+exports.getQueryGraphNodeIconSvgs = getQueryGraphNodeIconSvgs;
+exports.getQueryGraphStatusIconSvg = getQueryGraphStatusIconSvg;
+exports.queryGraphIconToSvg = queryGraphIconToSvg;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.string.starts-with.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.map.get-or-insert.js");
+require("core-js/modules/esnext.map.get-or-insert-computed.js");
+require("core-js/modules/esnext.weak-map.get-or-insert.js");
+require("core-js/modules/esnext.weak-map.get-or-insert-computed.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@gravity-ui/icons");
+var _server = require("react-dom/server");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Map, Reduce and MapReduce paths are adapted from the corresponding neutral
+// operation icons in ytsaurus/ytsaurus-ui (Apache-2.0).
+var MapOperationIcon = function MapOperationIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M3 2.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M2.25.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5M3 8a.75.75 0 1 1-1.5 0A.75.75 0 0 1 3 8m-.75-2.25a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5M3 13.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M2.25 11a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m11.5-8a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m0-2.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m0-3a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m.75 7.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-.75-2.25a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M4 2.8h8M4 8h8m-5-2.5L9.5 8 7 10.5m-3 2.8h8",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  }));
+};
+var ReduceOperationIcon = function ReduceOperationIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M4 2.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M3.25.5a2.25 2.25 0 0 1 2.122 1.5h.378a3 3 0 0 1 3 3v2.25h3.94l-1.22-1.22a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.06-1.06l1.22-1.22H8.75V11a3 3 0 0 1-3 3h-.378a2.25 2.25 0 1 1 0-1.5h.378A1.5 1.5 0 0 0 7.25 11V8.75H5.372a2.25 2.25 0 1 1 0-1.5H7.25V5a1.5 1.5 0 0 0-1.5-1.5h-.378A2.25 2.25 0 1 1 3.25.5M4 8a.75.75 0 1 1-1.5 0A.75.75 0 0 1 4 8m0 5.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0"
+    })
+  }));
+};
+var MapReduceOperationIcon = function MapReduceOperationIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M3 2.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M4.372 3.5A2.25 2.25 0 1 1 4.372 2H6.25a3 3 0 0 1 3 3v.896A2.25 2.25 0 0 1 10.572 7.25H14a.75.75 0 0 1 0 1.5h-3.428A2.25 2.25 0 0 1 9.25 10.104V11a3 3 0 0 1-3 3H4.372a2.25 2.25 0 1 1 0-1.5H6.25a1.5 1.5 0 0 0 1.5-1.5v-.861a2.25 2.25 0 0 1-1.423-1.393L6.25 8.75H4.372a2.25 2.25 0 1 1 0-1.5H6.25l.077.004A2.25 2.25 0 0 1 7.75 5.861V5a1.5 1.5 0 0 0-1.5-1.5zM3 8a.75.75 0 1 1-1.5 0A.75.75 0 0 1 3 8m0 5.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M9.2 8a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M12.5 5.5 15 8l-2.5 2.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  }));
+};
+var operationIcons = {
+  read: _icons.ListTimeline,
+  map: MapOperationIcon,
+  reduce: ReduceOperationIcon,
+  'map-reduce': MapReduceOperationIcon,
+  merge: _icons.CodeMerge,
+  sort: _icons.Shuffle,
+  erase: _icons.Eraser,
+  commit: _icons.CodeCommit,
+  operation: _icons.Molecule
+};
+var statusIcons = {
+  running: _icons.CirclePlay,
+  completed: _icons.CircleCheck,
+  failed: _icons.CircleXmark,
+  aborted: _icons.CircleMinus
+};
+var statusIconSvgCache = new Map();
+var defaultIconSvgCache = new Map();
+var customIconSvgCache = new WeakMap();
+function getDefaultQueryGraphNodeIcon(node) {
+  var _node$operationType;
+  var IconComponent = node.kind === 'operation' ? operationIcons[(_node$operationType = node.operationType) !== null && _node$operationType !== void 0 ? _node$operationType : 'operation'] : _icons.LayoutHeaderCellsLarge;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {});
+}
+function getQueryGraphNodeIcon(node) {
+  return /*#__PURE__*/_react.default.isValidElement(node.icon) && queryGraphIconToSvg(node.icon) ? node.icon : getDefaultQueryGraphNodeIcon(node);
+}
+function getQueryGraphNodeIconSvgs(node) {
+  var _node$operationType2;
+  var defaultKey = node.kind === 'operation' ? "operation:".concat((_node$operationType2 = node.operationType) !== null && _node$operationType2 !== void 0 ? _node$operationType2 : 'operation') : 'resource';
+  var defaultIconColorToken = '--g-color-text-misc';
+  var fallbackIconSvg = defaultIconSvgCache.get(defaultKey);
+  if (!fallbackIconSvg) {
+    var _queryGraphIconToSvg;
+    fallbackIconSvg = (_queryGraphIconToSvg = queryGraphIconToSvg(getDefaultQueryGraphNodeIcon(node))) !== null && _queryGraphIconToSvg !== void 0 ? _queryGraphIconToSvg : '';
+    defaultIconSvgCache.set(defaultKey, fallbackIconSvg);
+  }
+  if (! /*#__PURE__*/_react.default.isValidElement(node.icon)) {
+    return {
+      iconSvg: fallbackIconSvg,
+      fallbackIconSvg: fallbackIconSvg,
+      iconColorToken: defaultIconColorToken,
+      fallbackIconColorToken: defaultIconColorToken
+    };
+  }
+  var iconSvg = customIconSvgCache.get(node.icon);
+  if (!customIconSvgCache.has(node.icon)) {
+    iconSvg = queryGraphIconToSvg(node.icon);
+    customIconSvgCache.set(node.icon, iconSvg);
+  }
+  return {
+    iconSvg: iconSvg !== null && iconSvg !== void 0 ? iconSvg : fallbackIconSvg,
+    fallbackIconSvg: fallbackIconSvg,
+    iconColorToken: iconSvg ? '--g-color-text-primary' : defaultIconColorToken,
+    fallbackIconColorToken: defaultIconColorToken
+  };
+}
+function queryGraphIconToSvg(icon) {
+  if (! /*#__PURE__*/_react.default.isValidElement(icon)) return undefined;
+  try {
+    var markup = (0, _server.renderToStaticMarkup)(icon);
+    return markup.startsWith('<svg') ? markup : undefined;
+  } catch (_unused) {
+    return undefined;
+  }
+}
+function getQueryGraphStatusIconSvg(status) {
+  if (statusIconSvgCache.has(status)) return statusIconSvgCache.get(status);
+  var StatusIcon = statusIcons[status];
+  var svg = StatusIcon ? queryGraphIconToSvg(/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})) : undefined;
+  statusIconSvgCache.set(status, svg);
+  return svg;
+}
+// #sourceMappingURL=queryGraphIcons.js.map

package/build/cjs/components/QueryGraph/internal/queryGraphIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_icons","_server","_jsxRuntime","e","__esModule","default","MapOperationIcon","props","_jsxs","_objectSpread","width","height","viewBox","fill","xmlns","children","_jsx","fillRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ReduceOperationIcon","MapReduceOperationIcon","operationIcons","read","ListTimeline","map","reduce","merge","CodeMerge","sort","Shuffle","erase","Eraser","commit","CodeCommit","operation","Molecule","statusIcons","running","CirclePlay","completed","CircleCheck","failed","CircleXmark","aborted","CircleMinus","statusIconSvgCache","Map","defaultIconSvgCache","customIconSvgCache","WeakMap","getDefaultQueryGraphNodeIcon","node","_node$operationType","IconComponent","kind","operationType","LayoutHeaderCellsLarge","getQueryGraphNodeIcon","React","isValidElement","icon","queryGraphIconToSvg","getQueryGraphNodeIconSvgs","_node$operationType2","defaultKey","concat","defaultIconColorToken","fallbackIconSvg","get","_queryGraphIconToSvg","set","iconSvg","iconColorToken","fallbackIconColorToken","has","undefined","markup","renderToStaticMarkup","startsWith","_unused","getQueryGraphStatusIconSvg","status","StatusIcon","svg"],"sources":["queryGraphIcons.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    CircleCheck,\n    CircleMinus,\n    CirclePlay,\n    CircleXmark,\n    CodeCommit,\n    CodeMerge,\n    Eraser,\n    LayoutHeaderCellsLarge,\n    ListTimeline,\n    Molecule,\n    Shuffle,\n} from '@gravity-ui/icons';\nimport {renderToStaticMarkup} from 'react-dom/server';\n\nimport type {\n    QueryGraphNode,\n    QueryGraphNodeStatus,\n    QueryGraphOperationType,\n} from '../../../types/queryGraph';\n\ntype SvgIcon = (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;\n\n// Map, Reduce and MapReduce paths are adapted from the corresponding neutral\n// operation icons in ytsaurus/ytsaurus-ui (Apache-2.0).\nconst MapOperationIcon: SvgIcon = (props) => (\n    <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n    >\n        <path\n            fill=\"currentColor\"\n            fillRule=\"evenodd\"\n            d=\"M3 2.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M2.25.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5M3 8a.75.75 0 1 1-1.5 0A.75.75 0 0 1 3 8m-.75-2.25a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5M3 13.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M2.25 11a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m11.5-8a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m0-2.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m0-3a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m.75 7.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-.75-2.25a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5\"\n        />\n        <path\n            d=\"M4 2.8h8M4 8h8m-5-2.5L9.5 8 7 10.5m-3 2.8h8\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n);\n\nconst ReduceOperationIcon: SvgIcon = (props) => (\n    <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n    >\n        <path\n            fill=\"currentColor\"\n            fillRule=\"evenodd\"\n            d=\"M4 2.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M3.25.5a2.25 2.25 0 0 1 2.122 1.5h.378a3 3 0 0 1 3 3v2.25h3.94l-1.22-1.22a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.06-1.06l1.22-1.22H8.75V11a3 3 0 0 1-3 3h-.378a2.25 2.25 0 1 1 0-1.5h.378A1.5 1.5 0 0 0 7.25 11V8.75H5.372a2.25 2.25 0 1 1 0-1.5H7.25V5a1.5 1.5 0 0 0-1.5-1.5h-.378A2.25 2.25 0 1 1 3.25.5M4 8a.75.75 0 1 1-1.5 0A.75.75 0 0 1 4 8m0 5.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0\"\n        />\n    </svg>\n);\n\nconst MapReduceOperationIcon: SvgIcon = (props) => (\n    <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n    >\n        <path\n            fill=\"currentColor\"\n            fillRule=\"evenodd\"\n            d=\"M3 2.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M4.372 3.5A2.25 2.25 0 1 1 4.372 2H6.25a3 3 0 0 1 3 3v.896A2.25 2.25 0 0 1 10.572 7.25H14a.75.75 0 0 1 0 1.5h-3.428A2.25 2.25 0 0 1 9.25 10.104V11a3 3 0 0 1-3 3H4.372a2.25 2.25 0 1 1 0-1.5H6.25a1.5 1.5 0 0 0 1.5-1.5v-.861a2.25 2.25 0 0 1-1.423-1.393L6.25 8.75H4.372a2.25 2.25 0 1 1 0-1.5H6.25l.077.004A2.25 2.25 0 0 1 7.75 5.861V5a1.5 1.5 0 0 0-1.5-1.5zM3 8a.75.75 0 1 1-1.5 0A.75.75 0 0 1 3 8m0 5.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M9.2 8a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0\"\n        />\n        <path\n            d=\"M12.5 5.5 15 8l-2.5 2.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n);\n\nconst operationIcons: Record<QueryGraphOperationType, SvgIcon> = {\n    read: ListTimeline,\n    map: MapOperationIcon,\n    reduce: ReduceOperationIcon,\n    'map-reduce': MapReduceOperationIcon,\n    merge: CodeMerge,\n    sort: Shuffle,\n    erase: Eraser,\n    commit: CodeCommit,\n    operation: Molecule,\n};\n\nconst statusIcons: Partial<Record<QueryGraphNodeStatus, SvgIcon>> = {\n    running: CirclePlay,\n    completed: CircleCheck,\n    failed: CircleXmark,\n    aborted: CircleMinus,\n};\nconst statusIconSvgCache = new Map<QueryGraphNodeStatus, string | undefined>();\nconst defaultIconSvgCache = new Map<string, string>();\nconst customIconSvgCache = new WeakMap<object, string | undefined>();\n\nexport function getDefaultQueryGraphNodeIcon(node: QueryGraphNode): React.ReactElement {\n    const IconComponent =\n        node.kind === 'operation'\n            ? operationIcons[node.operationType ?? 'operation']\n            : LayoutHeaderCellsLarge;\n    return <IconComponent />;\n}\n\nexport function getQueryGraphNodeIcon(node: QueryGraphNode): React.ReactElement {\n    return React.isValidElement(node.icon) && queryGraphIconToSvg(node.icon)\n        ? node.icon\n        : getDefaultQueryGraphNodeIcon(node);\n}\n\nexport function getQueryGraphNodeIconSvgs(node: QueryGraphNode) {\n    const defaultKey =\n        node.kind === 'operation' ? `operation:${node.operationType ?? 'operation'}` : 'resource';\n    const defaultIconColorToken = '--g-color-text-misc';\n    let fallbackIconSvg = defaultIconSvgCache.get(defaultKey);\n    if (!fallbackIconSvg) {\n        fallbackIconSvg = queryGraphIconToSvg(getDefaultQueryGraphNodeIcon(node)) ?? '';\n        defaultIconSvgCache.set(defaultKey, fallbackIconSvg);\n    }\n\n    if (!React.isValidElement(node.icon)) {\n        return {\n            iconSvg: fallbackIconSvg,\n            fallbackIconSvg,\n            iconColorToken: defaultIconColorToken,\n            fallbackIconColorToken: defaultIconColorToken,\n        };\n    }\n    let iconSvg = customIconSvgCache.get(node.icon);\n    if (!customIconSvgCache.has(node.icon)) {\n        iconSvg = queryGraphIconToSvg(node.icon);\n        customIconSvgCache.set(node.icon, iconSvg);\n    }\n    return {\n        iconSvg: iconSvg ?? fallbackIconSvg,\n        fallbackIconSvg,\n        iconColorToken: iconSvg ? '--g-color-text-primary' : defaultIconColorToken,\n        fallbackIconColorToken: defaultIconColorToken,\n    };\n}\n\nexport function queryGraphIconToSvg(icon: React.ReactNode): string | undefined {\n    if (!React.isValidElement(icon)) return undefined;\n    try {\n        const markup = renderToStaticMarkup(icon);\n        return markup.startsWith('<svg') ? markup : undefined;\n    } catch {\n        return undefined;\n    }\n}\n\nexport function getQueryGraphStatusIconSvg(status: QueryGraphNodeStatus) {\n    if (statusIconSvgCache.has(status)) return statusIconSvgCache.get(status);\n    const StatusIcon = statusIcons[status];\n    const svg = StatusIcon ? queryGraphIconToSvg(<StatusIcon />) : undefined;\n    statusIconSvgCache.set(status, svg);\n    return svg;\n}\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/QueryGraph/internal/useQueryGraphLayout.d.ts

@@ -0,0 +1,22 @@
+import { type ConverterResult } from '@gravity-ui/graph';
+type QueryGraphLayoutInput = {
+    structureKey: string;
+    blocks: Array<{
+        id: string;
+        width: number;
+        height: number;
+    }>;
+    connections: Array<{
+        id: string;
+        sourceBlockId: string;
+        targetBlockId: string;
+    }>;
+    onError?: (error: Error) => void;
+};
+export declare function useQueryGraphLayout({ structureKey, blocks, connections, onError, }: QueryGraphLayoutInput): {
+    result: ConverterResult | undefined;
+    resolvedStructureKey: string | undefined;
+    isInitialLoading: boolean;
+    error: Error | undefined;
+};
+export {};