@gravity-ui/querieskit 1.5.0 → 1.6.0

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;

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

@@ -0,0 +1,150 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.string.starts-with.js";
+import "core-js/modules/es.weak-map.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/esnext.weak-map.get-or-insert.js";
+import "core-js/modules/esnext.weak-map.get-or-insert-computed.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React from 'react';
+import { CircleCheck, CircleMinus, CirclePlay, CircleXmark, CodeCommit, CodeMerge, Eraser, LayoutHeaderCellsLarge, ListTimeline, Molecule, Shuffle } from '@gravity-ui/icons';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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__*/_jsxs("svg", _objectSpread(_objectSpread({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/_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__*/_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__*/_jsx("svg", _objectSpread(_objectSpread({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/_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__*/_jsxs("svg", _objectSpread(_objectSpread({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/_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__*/_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: ListTimeline,
+  map: MapOperationIcon,
+  reduce: ReduceOperationIcon,
+  'map-reduce': MapReduceOperationIcon,
+  merge: CodeMerge,
+  sort: Shuffle,
+  erase: Eraser,
+  commit: CodeCommit,
+  operation: Molecule
+};
+var statusIcons = {
+  running: CirclePlay,
+  completed: CircleCheck,
+  failed: CircleXmark,
+  aborted: CircleMinus
+};
+var statusIconSvgCache = new Map();
+var defaultIconSvgCache = new Map();
+var customIconSvgCache = new WeakMap();
+export function getDefaultQueryGraphNodeIcon(node) {
+  var _node$operationType;
+  var IconComponent = node.kind === 'operation' ? operationIcons[(_node$operationType = node.operationType) !== null && _node$operationType !== void 0 ? _node$operationType : 'operation'] : LayoutHeaderCellsLarge;
+  return /*#__PURE__*/_jsx(IconComponent, {});
+}
+export function getQueryGraphNodeIcon(node) {
+  return /*#__PURE__*/React.isValidElement(node.icon) && queryGraphIconToSvg(node.icon) ? node.icon : getDefaultQueryGraphNodeIcon(node);
+}
+export 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.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
+  };
+}
+export function queryGraphIconToSvg(icon) {
+  if (! /*#__PURE__*/React.isValidElement(icon)) return undefined;
+  try {
+    var markup = renderToStaticMarkup(icon);
+    return markup.startsWith('<svg') ? markup : undefined;
+  } catch (_unused) {
+    return undefined;
+  }
+}
+export function getQueryGraphStatusIconSvg(status) {
+  if (statusIconSvgCache.has(status)) return statusIconSvgCache.get(status);
+  var StatusIcon = statusIcons[status];
+  var svg = StatusIcon ? queryGraphIconToSvg(/*#__PURE__*/_jsx(StatusIcon, {})) : undefined;
+  statusIconSvgCache.set(status, svg);
+  return svg;
+}
+// #sourceMappingURL=queryGraphIcons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","CircleCheck","CircleMinus","CirclePlay","CircleXmark","CodeCommit","CodeMerge","Eraser","LayoutHeaderCellsLarge","ListTimeline","Molecule","Shuffle","renderToStaticMarkup","jsx","_jsx","jsxs","_jsxs","MapOperationIcon","props","_objectSpread","width","height","viewBox","fill","xmlns","children","fillRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ReduceOperationIcon","MapReduceOperationIcon","operationIcons","read","map","reduce","merge","sort","erase","commit","operation","statusIcons","running","completed","failed","aborted","statusIconSvgCache","Map","defaultIconSvgCache","customIconSvgCache","WeakMap","getDefaultQueryGraphNodeIcon","node","_node$operationType","IconComponent","kind","operationType","getQueryGraphNodeIcon","isValidElement","icon","queryGraphIconToSvg","getQueryGraphNodeIconSvgs","_node$operationType2","defaultKey","concat","defaultIconColorToken","fallbackIconSvg","get","_queryGraphIconToSvg","set","iconSvg","iconColorToken","fallbackIconColorToken","has","undefined","markup","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/esm/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 {};

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

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLayeredLayout } from '@gravity-ui/graph';
+export function useQueryGraphLayout(_ref) {
+  var structureKey = _ref.structureKey,
+    blocks = _ref.blocks,
+    connections = _ref.connections,
+    onError = _ref.onError;
+  var onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  var requestedKeyRef = useRef(structureKey);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    resolved = _useState2[0],
+    setResolved = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var handleError = useCallback(function (nextError) {
+    var _onErrorRef$current;
+    setError(nextError);
+    (_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, nextError);
+  }, []);
+  var _useLayeredLayout = useLayeredLayout({
+      blocks: blocks,
+      connections: connections,
+      onError: handleError
+    }),
+    result = _useLayeredLayout.result,
+    isLoading = _useLayeredLayout.isLoading;
+  useEffect(function () {
+    setError(undefined);
+  }, [structureKey]);
+  useEffect(function () {
+    if (isLoading) requestedKeyRef.current = structureKey;
+  }, [isLoading, structureKey]);
+  useEffect(function () {
+    if (!isLoading && result && requestedKeyRef.current === structureKey) {
+      setResolved({
+        structureKey: structureKey,
+        result: result
+      });
+    }
+  }, [isLoading, result, structureKey]);
+  return {
+    result: resolved === null || resolved === void 0 ? void 0 : resolved.result,
+    resolvedStructureKey: resolved === null || resolved === void 0 ? void 0 : resolved.structureKey,
+    isInitialLoading: isLoading && !resolved,
+    error: error
+  };
+}
+// #sourceMappingURL=useQueryGraphLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useState","useLayeredLayout","useQueryGraphLayout","_ref","structureKey","blocks","connections","onError","onErrorRef","current","requestedKeyRef","_useState","_useState2","_slicedToArray","resolved","setResolved","_useState3","_useState4","error","setError","handleError","nextError","_onErrorRef$current","call","_useLayeredLayout","result","isLoading","undefined","resolvedStructureKey","isInitialLoading"],"sources":["useQueryGraphLayout.ts"],"sourcesContent":["import {useCallback, useEffect, useRef, useState} from 'react';\nimport {type ConverterResult, useLayeredLayout} from '@gravity-ui/graph';\n\ntype QueryGraphLayoutInput = {\n    structureKey: string;\n    blocks: Array<{id: string; width: number; height: number}>;\n    connections: Array<{\n        id: string;\n        sourceBlockId: string;\n        targetBlockId: string;\n    }>;\n    onError?: (error: Error) => void;\n};\n\ntype ResolvedLayout = {structureKey: string; result: ConverterResult};\n\nexport function useQueryGraphLayout({\n    structureKey,\n    blocks,\n    connections,\n    onError,\n}: QueryGraphLayoutInput) {\n    const onErrorRef = useRef(onError);\n    onErrorRef.current = onError;\n    const requestedKeyRef = useRef(structureKey);\n    const [resolved, setResolved] = useState<ResolvedLayout>();\n    const [error, setError] = useState<Error>();\n\n    const handleError = useCallback((nextError: Error) => {\n        setError(nextError);\n        onErrorRef.current?.(nextError);\n    }, []);\n    const {result, isLoading} = useLayeredLayout({blocks, connections, onError: handleError});\n\n    useEffect(() => {\n        setError(undefined);\n    }, [structureKey]);\n    useEffect(() => {\n        if (isLoading) requestedKeyRef.current = structureKey;\n    }, [isLoading, structureKey]);\n    useEffect(() => {\n        if (!isLoading && result && requestedKeyRef.current === structureKey) {\n            setResolved({structureKey, result});\n        }\n    }, [isLoading, result, structureKey]);\n\n    return {\n        result: resolved?.result,\n        resolvedStructureKey: resolved?.structureKey,\n        isInitialLoading: isLoading && !resolved,\n        error,\n    };\n}\n"],"mappings":";AAAA,SAAQA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,OAAO;AAC9D,SAA8BC,gBAAgB,QAAO,mBAAmB;AAexE,OAAO,SAASC,mBAAmBA,CAAAC,IAAA,EAKT;EAAA,IAJtBC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IACZC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;EAEP,IAAMC,UAAU,GAAGT,MAAM,CAACQ,OAAO,CAAC;EAClCC,UAAU,CAACC,OAAO,GAAGF,OAAO;EAC5B,IAAMG,eAAe,GAAGX,MAAM,CAACK,YAAY,CAAC;EAC5C,IAAAO,SAAA,GAAgCX,QAAQ,CAAiB,CAAC;IAAAY,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAnDG,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAC5B,IAAAI,UAAA,GAA0BhB,QAAQ,CAAQ,CAAC;IAAAiB,UAAA,GAAAJ,cAAA,CAAAG,UAAA;IAApCE,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EAEtB,IAAMG,WAAW,GAAGvB,WAAW,CAAC,UAACwB,SAAgB,EAAK;IAAA,IAAAC,mBAAA;IAClDH,QAAQ,CAACE,SAAS,CAAC;IACnB,CAAAC,mBAAA,GAAAd,UAAU,CAACC,OAAO,cAAAa,mBAAA,eAAlBA,mBAAA,CAAAC,IAAA,CAAAf,UAAU,EAAWa,SAAS,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EACN,IAAAG,iBAAA,GAA4BvB,gBAAgB,CAAC;MAACI,MAAM,EAANA,MAAM;MAAEC,WAAW,EAAXA,WAAW;MAAEC,OAAO,EAAEa;IAAW,CAAC,CAAC;IAAlFK,MAAM,GAAAD,iBAAA,CAANC,MAAM;IAAEC,SAAS,GAAAF,iBAAA,CAATE,SAAS;EAExB5B,SAAS,CAAC,YAAM;IACZqB,QAAQ,CAACQ,SAAS,CAAC;EACvB,CAAC,EAAE,CAACvB,YAAY,CAAC,CAAC;EAClBN,SAAS,CAAC,YAAM;IACZ,IAAI4B,SAAS,EAAEhB,eAAe,CAACD,OAAO,GAAGL,YAAY;EACzD,CAAC,EAAE,CAACsB,SAAS,EAAEtB,YAAY,CAAC,CAAC;EAC7BN,SAAS,CAAC,YAAM;IACZ,IAAI,CAAC4B,SAAS,IAAID,MAAM,IAAIf,eAAe,CAACD,OAAO,KAAKL,YAAY,EAAE;MAClEW,WAAW,CAAC;QAACX,YAAY,EAAZA,YAAY;QAAEqB,MAAM,EAANA;MAAM,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACC,SAAS,EAAED,MAAM,EAAErB,YAAY,CAAC,CAAC;EAErC,OAAO;IACHqB,MAAM,EAAEX,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEW,MAAM;IACxBG,oBAAoB,EAAEd,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEV,YAAY;IAC5CyB,gBAAgB,EAAEH,SAAS,IAAI,CAACZ,QAAQ;IACxCI,KAAK,EAALA;EACJ,CAAC;AACL","ignoreList":[]}

package/build/esm/components/QueryGraph/story/largeGraphData.d.ts

@@ -0,0 +1,3 @@
+import type { QueryGraphEdge, QueryGraphNode } from '../../../types/queryGraph';
+export declare const largeGraphNodes: QueryGraphNode[];
+export declare const largeGraphEdges: QueryGraphEdge[];