@gravity-ui/querieskit 1.5.1 → 1.6.0

package/build/esm/components/QueryGraph/internal/QueryGraphCanvasBlock.js

@@ -0,0 +1,299 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _callSuper from "@babel/runtime/helpers/callSuper";
+import _inherits from "@babel/runtime/helpers/inherits";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.fill.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.for-each.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.set.js";
+import "core-js/modules/es.set.difference.v2.js";
+import "core-js/modules/es.set.intersection.v2.js";
+import "core-js/modules/es.set.is-disjoint-from.v2.js";
+import "core-js/modules/es.set.is-subset-of.v2.js";
+import "core-js/modules/es.set.is-superset-of.v2.js";
+import "core-js/modules/es.set.symmetric-difference.v2.js";
+import "core-js/modules/es.set.union.v2.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/esnext.map.get-or-insert.js";
+import "core-js/modules/esnext.map.get-or-insert-computed.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+/* eslint-disable no-param-reassign -- CanvasRenderingContext2D exposes drawing state as mutable properties. */
+import { CanvasBlock } from '@gravity-ui/graph';
+import { getQueryGraphProgress } from "../helpers/layout";
+import { fitCanvasFontSize, fitCanvasText, getQueryGraphNodeContent, getScaleAdjustedFontSize } from "../helpers/presentation";
+import { getQueryGraphStatusIconSvg } from "./queryGraphIcons";
+var imageCache = new Map();
+var statusTokens = {
+  'not-started': ['--g-color-line-generic', '--g-color-base-float'],
+  waiting: ['--g-color-text-misc-heavy', '--g-color-base-misc-light'],
+  running: ['--g-color-line-generic', '--g-color-line-generic'],
+  completed: ['--g-color-text-positive-heavy', '--g-color-base-positive-light'],
+  failed: ['--g-color-text-danger-heavy', '--g-color-base-danger-light'],
+  aborted: ['--g-color-text-complementary', '--g-color-base-generic']
+};
+var statusIconTokens = {
+  running: '--g-color-text-info',
+  completed: '--g-color-text-positive-heavy',
+  failed: '--g-color-text-danger-heavy',
+  aborted: '--g-color-text-complementary'
+};
+var resourceTokens = ['--g-color-line-generic', '--g-color-base-float'];
+var START_ANGLE = -Math.PI / 2;
+var STATUS_ICON_SIZE_RATIO = 1 / 4;
+var STATUS_ICON_BACKGROUND_RADIUS_RATIO = 1 / 6;
+var PROGRESS_WIDTH_RATIO = 1 / 9;
+var INNER_BORDER_WIDTH_RATIO = 1 / 25;
+var COUNTER_MAX_WIDTH_RATIO = 7 / 9;
+var LABEL_MAX_WIDTH_RATIO = 2;
+var COUNTER_FONT_SIZE = 11;
+var LABEL_FONT_SIZE = 9;
+var LABEL_GAP = 4;
+var RESOURCE_ICON_SIZE = 16;
+function cssValue(token, element) {
+  if (typeof document === 'undefined') return '';
+  return getComputedStyle(element !== null && element !== void 0 ? element : document.documentElement).getPropertyValue(token).trim();
+}
+function coloredSvgDataUrl(svg, color) {
+  var markup = svg.split('currentColor').join(color || '#000');
+  return "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(markup));
+}
+function getCanvasImage(svg, color, onSettled) {
+  if (typeof Image === 'undefined') return undefined;
+  var key = "".concat(color, "\n").concat(svg);
+  var entry = imageCache.get(key);
+  if (!entry) {
+    var image = new Image();
+    entry = {
+      image: image,
+      state: 'loading',
+      listeners: new Set()
+    };
+    imageCache.set(key, entry);
+    image.onload = function () {
+      if (!entry) return;
+      entry.state = 'loaded';
+      entry.listeners.forEach(function (listener) {
+        return listener();
+      });
+      entry.listeners.clear();
+    };
+    image.onerror = function () {
+      if (!entry) return;
+      entry.state = 'failed';
+      entry.listeners.forEach(function (listener) {
+        return listener();
+      });
+      entry.listeners.clear();
+    };
+    image.src = coloredSvgDataUrl(svg, color);
+  }
+  if (entry.state === 'loading') entry.listeners.add(onSettled);
+  return entry;
+}
+export var QueryGraphCanvasBlock = /*#__PURE__*/function (_CanvasBlock) {
+  function QueryGraphCanvasBlock() {
+    var _this;
+    _classCallCheck(this, QueryGraphCanvasBlock);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, QueryGraphCanvasBlock, [].concat(args));
+    _this.redrawAfterImageLoad = function () {
+      return _this.performRender();
+    };
+    return _this;
+  }
+  _inherits(QueryGraphCanvasBlock, _CanvasBlock);
+  return _createClass(QueryGraphCanvasBlock, [{
+    key: "renderMinimalisticBlock",
+    value: function renderMinimalisticBlock(ctx) {
+      this.renderQueryNode(ctx);
+    }
+  }, {
+    key: "renderSchematicView",
+    value: function renderSchematicView(ctx) {
+      this.renderQueryNode(ctx);
+    }
+  }, {
+    key: "renderDetailedView",
+    value: function renderDetailedView(ctx) {
+      this.renderQueryNode(ctx);
+    }
+  }, {
+    key: "renderQueryNode",
+    value: function renderQueryNode(context) {
+      var _node$status, _node$label;
+      var meta = this.state.meta;
+      if (!(meta !== null && meta !== void 0 && meta.node)) return;
+      var node = meta.node;
+      var status = (_node$status = node.status) !== null && _node$status !== void 0 ? _node$status : 'not-started';
+      var _ref = node.kind === 'operation' ? statusTokens[status] : resourceTokens,
+        _ref2 = _slicedToArray(_ref, 2),
+        lineToken = _ref2[0],
+        baseToken = _ref2[1];
+      context.save();
+      if (node.kind === 'operation' && status === 'running') {
+        this.drawRunningOperation(context, getQueryGraphProgress(node));
+      } else {
+        this.drawNodeShape(context, lineToken, baseToken);
+      }
+      var content = getQueryGraphNodeContent(node);
+      if (content.kind === 'icon') {
+        var _this$state = this.state,
+          x = _this$state.x,
+          y = _this$state.y,
+          width = _this$state.width,
+          height = _this$state.height;
+        var side = node.kind === 'operation' ? width / 2 : RESOURCE_ICON_SIZE;
+        this.drawIcon(context, meta.iconSvg, meta.fallbackIconSvg, x + (width - side) / 2, y + (height - side) / 2, side, cssValue(meta.iconColorToken, context.canvas), cssValue(meta.fallbackIconColorToken, context.canvas));
+      } else if (content.kind === 'counter') {
+        this.drawCounter(context, content.value);
+      }
+      if (node.kind === 'operation') this.drawStatusIcon(context, status);
+      this.drawLabel(context, (_node$label = node.label) !== null && _node$label !== void 0 ? _node$label : node.name, node.kind !== 'operation');
+      context.restore();
+    }
+  }, {
+    key: "drawNodeShape",
+    value: function drawNodeShape(context, lineToken, baseToken) {
+      var _this$state2 = this.state,
+        x = _this$state2.x,
+        y = _this$state2.y,
+        width = _this$state2.width,
+        height = _this$state2.height,
+        meta = _this$state2.meta;
+      context.beginPath();
+      if ((meta === null || meta === void 0 ? void 0 : meta.node.kind) === 'operation') {
+        context.arc(x + width / 2, y + height / 2, width / 2 - 1, 0, Math.PI * 2);
+      } else {
+        context.roundRect(x + 1, y + 1, width - 2, height - 2, 12);
+      }
+      context.fillStyle = cssValue(baseToken, context.canvas);
+      context.fill();
+      context.lineWidth = 2;
+      context.strokeStyle = cssValue(lineToken, context.canvas);
+      context.stroke();
+    }
+  }, {
+    key: "drawRunningOperation",
+    value: function drawRunningOperation(context, progress) {
+      var _this$state3 = this.state,
+        x = _this$state3.x,
+        y = _this$state3.y,
+        width = _this$state3.width,
+        height = _this$state3.height;
+      var centerX = x + width / 2;
+      var centerY = y + height / 2;
+      var radius = width / 2;
+      var progressWidth = width * PROGRESS_WIDTH_RATIO;
+      var endAngle = START_ANGLE + Math.PI * 2 * progress;
+      var runningBase = cssValue('--g-color-line-generic', context.canvas);
+      var runningLine = cssValue('--g-color-line-generic', context.canvas);
+      var progressBase = cssValue('--g-color-base-info-light', context.canvas);
+      var progressLine = cssValue('--g-color-text-info', context.canvas);
+      var background = cssValue('--g-color-base-background', context.canvas);
+      context.beginPath();
+      context.arc(centerX, centerY, radius - progressWidth / 2, 0, Math.PI * 2);
+      context.fillStyle = runningBase;
+      context.fill();
+      context.lineWidth = progressWidth;
+      context.strokeStyle = runningLine;
+      context.stroke();
+      if (progress > 0) {
+        context.beginPath();
+        context.moveTo(centerX, centerY);
+        context.arc(centerX, centerY, radius - progressWidth / 2, START_ANGLE, endAngle);
+        context.closePath();
+        context.fillStyle = progressBase;
+        context.fill();
+        context.beginPath();
+        context.arc(centerX, centerY, radius - progressWidth / 2, START_ANGLE, endAngle);
+        context.lineWidth = progressWidth;
+        context.strokeStyle = progressLine;
+        context.stroke();
+      }
+      context.beginPath();
+      context.arc(centerX, centerY, radius - progressWidth, 0, Math.PI * 2);
+      context.lineWidth = width * INNER_BORDER_WIDTH_RATIO;
+      context.strokeStyle = background;
+      context.stroke();
+    }
+  }, {
+    key: "drawCounter",
+    value: function drawCounter(context, value) {
+      var _this$state4 = this.state,
+        x = _this$state4.x,
+        y = _this$state4.y,
+        width = _this$state4.width,
+        height = _this$state4.height;
+      var maxFontSize = getScaleAdjustedFontSize(COUNTER_FONT_SIZE, this.context.graph.cameraService.getCameraScale());
+      var fontFamily = cssValue('--g-font-family-sans', context.canvas);
+      context.fillStyle = cssValue('--g-color-text-primary', context.canvas);
+      context.textAlign = 'center';
+      context.textBaseline = 'middle';
+      context.font = "500 ".concat(maxFontSize, "px ").concat(fontFamily);
+      var fontSize = fitCanvasFontSize(maxFontSize, context.measureText(value).width, width * COUNTER_MAX_WIDTH_RATIO);
+      context.font = "500 ".concat(fontSize, "px ").concat(fontFamily);
+      context.fillText(value, x + width / 2, y + height / 2);
+    }
+  }, {
+    key: "drawStatusIcon",
+    value: function drawStatusIcon(context, status) {
+      var iconSvg = getQueryGraphStatusIconSvg(status);
+      var colorToken = statusIconTokens[status];
+      if (!iconSvg || !colorToken) return;
+      var _this$state5 = this.state,
+        x = _this$state5.x,
+        y = _this$state5.y,
+        width = _this$state5.width;
+      var side = width * STATUS_ICON_SIZE_RATIO;
+      var backgroundRadius = width * STATUS_ICON_BACKGROUND_RADIUS_RATIO;
+      var iconX = x + width - side;
+      var iconY = y;
+      context.beginPath();
+      context.arc(iconX + side / 2, iconY + side / 2, backgroundRadius, 0, Math.PI * 2);
+      context.fillStyle = cssValue('--g-color-base-background', context.canvas);
+      context.fill();
+      this.drawIcon(context, iconSvg, iconSvg, iconX, iconY, side, cssValue(colorToken, context.canvas), cssValue(colorToken, context.canvas));
+    }
+  }, {
+    key: "drawIcon",
+    value: function drawIcon(context, svg, fallbackSvg, x, y, side, color, fallbackColor) {
+      var _entry, _entry2;
+      var entry = getCanvasImage(svg, color, this.redrawAfterImageLoad);
+      if (((_entry = entry) === null || _entry === void 0 ? void 0 : _entry.state) === 'failed' && fallbackSvg !== svg) {
+        entry = getCanvasImage(fallbackSvg, fallbackColor, this.redrawAfterImageLoad);
+      }
+      if (((_entry2 = entry) === null || _entry2 === void 0 ? void 0 : _entry2.state) === 'loaded') context.drawImage(entry.image, x, y, side, side);
+    }
+  }, {
+    key: "drawLabel",
+    value: function drawLabel(context, label, trimStart) {
+      var _this$state6 = this.state,
+        x = _this$state6.x,
+        y = _this$state6.y,
+        width = _this$state6.width,
+        height = _this$state6.height;
+      var cameraScale = this.context.graph.cameraService.getCameraScale();
+      var fontSize = getScaleAdjustedFontSize(LABEL_FONT_SIZE, cameraScale);
+      var labelGap = getScaleAdjustedFontSize(LABEL_GAP, cameraScale);
+      context.fillStyle = cssValue('--g-color-text-primary', context.canvas);
+      context.textAlign = 'center';
+      context.textBaseline = 'top';
+      context.font = "400 ".concat(fontSize, "px ").concat(cssValue('--g-font-family-sans', context.canvas));
+      var fitted = fitCanvasText(context, label, width * LABEL_MAX_WIDTH_RATIO, trimStart);
+      context.fillText(fitted, x + width / 2, y + height + labelGap);
+    }
+  }]);
+}(CanvasBlock);
+// #sourceMappingURL=QueryGraphCanvasBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["CanvasBlock","getQueryGraphProgress","fitCanvasFontSize","fitCanvasText","getQueryGraphNodeContent","getScaleAdjustedFontSize","getQueryGraphStatusIconSvg","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","_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","drawNodeShape","content","_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","graph","cameraService","getCameraScale","fontFamily","textAlign","textBaseline","font","fontSize","measureText","fillText","colorToken","_this$state5","backgroundRadius","iconX","iconY","fallbackSvg","fallbackColor","_entry","_entry2","drawImage","trimStart","_this$state6","cameraScale","labelGap","fitted"],"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        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, width * LABEL_MAX_WIDTH_RATIO, trimStart);\n        context.fillText(fitted, x + width / 2, y + height + labelGap);\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/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/esm/components/QueryGraph/internal/QueryGraphPopup.js

@@ -0,0 +1,234 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.number.to-fixed.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.includes.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { Progress, SegmentedRadioGroup, Table, Text } from '@gravity-ui/uikit';
+import i18n from "../i18n";
+import { getQueryGraphNodeIcon } from "./queryGraphIcons";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var jobStatuses = ['pending', 'running', 'completed', 'failed', 'aborted'];
+var jobStatusLabels = {
+  pending: 'status_pending',
+  running: 'status_running',
+  completed: 'status_completed',
+  failed: 'status_failed',
+  aborted: 'status_aborted'
+};
+export function QueryGraphPopup(_ref) {
+  var _node$popup$details, _node$popup6, _ref2, _node$popup$jobs, _node$popup7;
+  var node = _ref.node;
+  var sections = 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 = useState(sections[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    section = _useState2[0],
+    setSection = _useState2[1];
+  useEffect(function () {
+    if (!section || !sections.includes(section)) setSection(sections[0]);
+  }, [section, sections]);
+  var labels = {
+    stages: i18n('value_stages'),
+    details: i18n('value_details'),
+    jobs: i18n('value_jobs'),
+    schemas: i18n('value_schemas')
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "qp-query-graph__popup-content",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "qp-query-graph__popup-title",
+      children: [getQueryGraphNodeIcon(node), /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "subheader-1",
+          children: node.name
+        }), node.label && /*#__PURE__*/_jsx(Text, {
+          color: "secondary",
+          children: node.label
+        })]
+      })]
+    }), sections.length > 1 && /*#__PURE__*/_jsx(SegmentedRadioGroup, {
+      size: "s",
+      width: "max",
+      value: section,
+      onUpdate: function onUpdate(value) {
+        return setSection(value);
+      },
+      children: sections.map(function (item) {
+        return /*#__PURE__*/_jsx(SegmentedRadioGroup.Option, {
+          value: item,
+          children: labels[item]
+        }, item);
+      })
+    }), section === 'stages' && /*#__PURE__*/_jsx(Stages, {
+      node: node
+    }), section === 'details' && /*#__PURE__*/_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__*/_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__*/_jsx(Schemas, {
+      node: node
+    }), !sections.length && node.label && /*#__PURE__*/_jsx(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__*/_jsx(Table, {
+    data: data,
+    columns: [{
+      id: 'name',
+      name: i18n('field_stage')
+    }, {
+      id: 'duration',
+      name: i18n('field_duration'),
+      align: 'end',
+      template: function template(item) {
+        return formatDuration(item.duration);
+      }
+    }]
+  });
+}
+function Details(_ref4) {
+  var items = _ref4.items;
+  return /*#__PURE__*/_jsx("div", {
+    className: "qp-query-graph__details",
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/_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__*/_jsxs("details", {
+      open: true,
+      children: [/*#__PURE__*/_jsx("summary", {
+        children: item.name
+      }), content && /*#__PURE__*/_jsx(Text, {
+        color: "secondary",
+        children: content
+      }), /*#__PURE__*/_jsx(Details, {
+        items: item.children
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: "qp-query-graph__detail-row",
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: "secondary",
+      children: item.name
+    }), /*#__PURE__*/_jsx(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: i18n(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__*/_jsxs("div", {
+    className: "qp-query-graph__jobs",
+    children: [/*#__PURE__*/_jsx(Progress, {
+      size: "xs",
+      value: total > 0 ? completed / total * 100 : 0
+    }), /*#__PURE__*/_jsx(Table, {
+      data: [].concat(_toConsumableArray(rows), [{
+        status: i18n('value_total'),
+        count: total
+      }]),
+      columns: [{
+        id: 'status',
+        name: i18n('field_status')
+      }, {
+        id: 'count',
+        name: i18n('field_count'),
+        align: 'end'
+      }]
+    })]
+  });
+}
+function Schemas(_ref7) {
+  var _node$popup$inputs, _node$popup9, _node$popup$outputs, _node$popup0;
+  var node = _ref7.node;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "qp-query-graph__schemas",
+    children: [/*#__PURE__*/_jsx(SchemaGroup, {
+      title: i18n('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__*/_jsx(SchemaGroup, {
+      title: i18n('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__*/_jsxs("details", {
+    open: true,
+    children: [/*#__PURE__*/_jsx("summary", {
+      children: title
+    }), schemas.map(function (schema) {
+      return /*#__PURE__*/_jsxs("details", {
+        open: schemas.length === 1,
+        children: [/*#__PURE__*/_jsx("summary", {
+          children: schema.name
+        }), /*#__PURE__*/_jsx(Table, {
+          data: schema.columns,
+          columns: [{
+            id: 'name',
+            name: i18n('field_name')
+          }, {
+            id: 'type',
+            name: i18n('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/esm/components/QueryGraph/internal/QueryGraphPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","useState","Progress","SegmentedRadioGroup","Table","Text","i18n","getQueryGraphNodeIcon","jsx","_jsx","jsxs","_jsxs","jobStatuses","jobStatusLabels","pending","running","completed","failed","aborted","QueryGraphPopup","_ref","_node$popup$details","_node$popup6","_ref2","_node$popup$jobs","_node$popup7","node","sections","_node$popup","_node$popup2","_node$popup3","_node$popup4","_node$popup5","items","popup","stages","length","push","details","jobs","progress","inputs","outputs","_useState","_useState2","_slicedToArray","section","setSection","includes","labels","schemas","className","children","variant","name","label","color","size","width","value","onUpdate","map","item","Option","Stages","Details","Jobs","Schemas","_ref3","_node$popup$stages","_node$popup8","data","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","_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/esm/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;