@gravity-ui/querieskit 1.5.1 → 1.7.0

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

@@ -0,0 +1,510 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.flat-map.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.unscopables.flat-map.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.find.js";
+import "core-js/modules/es.iterator.flat-map.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.trim.js";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { BezierMultipointConnection, ECanDrag, GraphState } from '@gravity-ui/graph';
+import { GraphCanvas, useGraph, useGraphEvent } from '@gravity-ui/graph/react';
+import { MagnifierMinus, MagnifierPlus, SquareDashed } from '@gravity-ui/icons';
+import { Button, Icon, Loader, Text, Tooltip, useThemeValue } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import { createQueryGraphConnections, getQueryGraphNodeSize, validateQueryGraph } from "./helpers/layout";
+import i18n from "./i18n";
+import { QueryGraphCanvasBlock } from "./internal/QueryGraphCanvasBlock";
+import { QueryGraphPopup } from "./internal/QueryGraphPopup";
+import { getQueryGraphNodeIconSvgs } from "./internal/queryGraphIcons";
+import { useQueryGraphLayout } from "./internal/useQueryGraphLayout";
+import "./QueryGraph.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-query-graph');
+var FIT_PADDING = 120;
+var ZOOM_STEP = 0.08;
+var renderEmptyBlock = function renderEmptyBlock() {
+  return /*#__PURE__*/_jsx(React.Fragment, {});
+};
+export function QueryGraph(_ref) {
+  var nodes = _ref.nodes,
+    edges = _ref.edges,
+    loading = _ref.loading,
+    errorContent = _ref.errorContent,
+    className = _ref.className,
+    _ref$autoCenter = _ref.autoCenter,
+    autoCenter = _ref$autoCenter === void 0 ? true : _ref$autoCenter,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? true : _ref$active,
+    _ref$largeGraphThresh = _ref.largeGraphThreshold,
+    largeGraphThreshold = _ref$largeGraphThresh === void 0 ? 250 : _ref$largeGraphThresh,
+    renderNodePopup = _ref.renderNodePopup,
+    onNodeClick = _ref.onNodeClick,
+    onError = _ref.onError;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLargeGraph = _useState2[0],
+    setShowLargeGraph = _useState2[1];
+  var nodesRef = useRef(nodes);
+  var edgesRef = useRef(edges);
+  nodesRef.current = nodes;
+  edgesRef.current = edges;
+  var structureKey = useMemo(function () {
+    return "".concat(nodes.map(function (_ref2) {
+      var id = _ref2.id,
+        kind = _ref2.kind;
+      return "".concat(id, ":").concat(kind);
+    }).join('|'), "::").concat(edges.map(function (_ref3) {
+      var id = _ref3.id,
+        source = _ref3.source,
+        target = _ref3.target;
+      return "".concat(id, ":").concat(source, ":").concat(target);
+    }).join('|'));
+  }, [edges, nodes]);
+  var validationError = useMemo(function () {
+    try {
+      validateQueryGraph(nodesRef.current, edgesRef.current);
+      return undefined;
+    } catch (nextError) {
+      return nextError instanceof Error ? nextError : new Error('Unable to build query graph');
+    }
+    // Only graph structure affects validation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [structureKey]);
+  useEffect(function () {
+    if (validationError) onError === null || onError === void 0 || onError(validationError);
+  }, [onError, validationError]);
+  var shouldConfirm = largeGraphThreshold !== false && nodes.length > largeGraphThreshold;
+  if (loading) return /*#__PURE__*/_jsx(State, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Loader, {
+      size: "m"
+    })
+  });
+  if (errorContent) return /*#__PURE__*/_jsx(State, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: "danger",
+      children: errorContent
+    })
+  });
+  if (validationError) return /*#__PURE__*/_jsx(State, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: "danger",
+      children: validationError.message
+    })
+  });
+  if (!nodes.length) return /*#__PURE__*/_jsx(State, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: "secondary",
+      children: i18n('context_empty')
+    })
+  });
+  if (shouldConfirm && !showLargeGraph) {
+    return /*#__PURE__*/_jsx(State, {
+      className: className,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: block('large-graph'),
+        children: [/*#__PURE__*/_jsx(Text, {
+          children: i18n('context_large-graph', {
+            count: nodes.length
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          view: "action",
+          onClick: function onClick() {
+            return setShowLargeGraph(true);
+          },
+          children: i18n('action_show-graph')
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(QueryGraphWithLayout, {
+    nodes: nodes,
+    edges: edges,
+    structureKey: structureKey,
+    autoCenter: autoCenter,
+    active: active,
+    renderNodePopup: renderNodePopup,
+    onNodeClick: onNodeClick,
+    onError: onError,
+    className: className
+  });
+}
+function QueryGraphWithLayout(_ref4) {
+  var nodes = _ref4.nodes,
+    edges = _ref4.edges,
+    structureKey = _ref4.structureKey,
+    autoCenter = _ref4.autoCenter,
+    active = _ref4.active,
+    renderNodePopup = _ref4.renderNodePopup,
+    onNodeClick = _ref4.onNodeClick,
+    onError = _ref4.onError,
+    className = _ref4.className;
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    popup = _useState4[0],
+    setPopup = _useState4[1];
+  var rootRef = useRef(null);
+  var nodesRef = useRef(nodes);
+  var edgesRef = useRef(edges);
+  nodesRef.current = nodes;
+  edgesRef.current = edges;
+  var layoutBlocks = useMemo(function () {
+    return nodesRef.current.map(function (node) {
+      return _objectSpread({
+        id: node.id
+      }, getQueryGraphNodeSize(node));
+    });
+  },
+  // Node status and presentation do not affect layout.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [structureKey]);
+  var layoutConnections = useMemo(function () {
+    return edgesRef.current.map(function (edge) {
+      return {
+        id: edge.id,
+        sourceBlockId: edge.source,
+        targetBlockId: edge.target
+      };
+    });
+  },
+  // Only graph structure affects layout.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [structureKey]);
+  var _useQueryGraphLayout = useQueryGraphLayout({
+      structureKey: structureKey,
+      blocks: layoutBlocks,
+      connections: layoutConnections,
+      onError: onError
+    }),
+    result = _useQueryGraphLayout.result,
+    resolvedStructureKey = _useQueryGraphLayout.resolvedStructureKey,
+    isInitialLoading = _useQueryGraphLayout.isInitialLoading,
+    error = _useQueryGraphLayout.error;
+  var graphBlocks = useMemo(function () {
+    return nodes.flatMap(function (node) {
+      var position = result === null || result === void 0 ? void 0 : result.blocks[node.id];
+      if (!position) return [];
+      var _getQueryGraphNodeIco = getQueryGraphNodeIconSvgs(node),
+        iconSvg = _getQueryGraphNodeIco.iconSvg,
+        fallbackIconSvg = _getQueryGraphNodeIco.fallbackIconSvg,
+        iconColorToken = _getQueryGraphNodeIco.iconColorToken,
+        fallbackIconColorToken = _getQueryGraphNodeIco.fallbackIconColorToken;
+      return [_objectSpread(_objectSpread({
+        id: node.id,
+        is: 'query-node',
+        name: node.name,
+        selected: false,
+        anchors: [],
+        meta: {
+          node: node,
+          iconSvg: iconSvg,
+          fallbackIconSvg: fallbackIconSvg,
+          iconColorToken: iconColorToken,
+          fallbackIconColorToken: fallbackIconColorToken
+        }
+      }, getQueryGraphNodeSize(node)), position)];
+    });
+  }, [nodes, result]);
+  var graphConnections = useMemo(function () {
+    return createQueryGraphConnections(edges, result === null || result === void 0 ? void 0 : result.edges);
+  }, [edges, result]);
+  if (error) return /*#__PURE__*/_jsx(State, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: "danger",
+      children: error.message
+    })
+  });
+  if (isInitialLoading || !result || !resolvedStructureKey) return /*#__PURE__*/_jsx(State, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Loader, {
+      size: "m"
+    })
+  });
+  return (
+    /*#__PURE__*/
+    // The renderer is declared below to keep the public component and its states together.
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    _jsx(QueryGraphRenderer, {
+      ref: rootRef,
+      blocks: graphBlocks,
+      connections: graphConnections,
+      nodes: nodes,
+      structureKey: resolvedStructureKey,
+      autoCenter: autoCenter,
+      active: active,
+      popup: popup,
+      setPopup: setPopup,
+      renderNodePopup: renderNodePopup,
+      onNodeClick: onNodeClick,
+      className: className
+    })
+  );
+}
+var QueryGraphRenderer = /*#__PURE__*/React.forwardRef(function QueryGraphRendererComponent(_ref5, forwardedRef) {
+  var blocks = _ref5.blocks,
+    connections = _ref5.connections,
+    nodes = _ref5.nodes,
+    structureKey = _ref5.structureKey,
+    autoCenter = _ref5.autoCenter,
+    active = _ref5.active,
+    popup = _ref5.popup,
+    setPopup = _ref5.setPopup,
+    renderNodePopup = _ref5.renderNodePopup,
+    onNodeClick = _ref5.onNodeClick,
+    className = _ref5.className;
+  var rootRef = useRef(null);
+  useImperativeHandle(forwardedRef, function () {
+    return rootRef.current;
+  });
+  var attachedRef = useRef(false);
+  var centeredRef = useRef(false);
+  var previousActiveRef = useRef(false);
+  var previousStructureRef = useRef(structureKey);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    attached = _useState6[0],
+    setAttached = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hoveredNodeId = _useState8[0],
+    setHoveredNodeId = _useState8[1];
+  var themeValue = useThemeValue();
+  var _useGraph = useGraph({
+      name: 'query-graph',
+      settings: {
+        connection: BezierMultipointConnection,
+        canDrag: ECanDrag.NONE,
+        canDragCamera: true,
+        canZoomCamera: true,
+        canCreateNewConnections: false,
+        useBezierConnections: true,
+        bezierConnectionDirection: 'horizontal',
+        showConnectionArrows: true,
+        useBlocksAnchors: false,
+        blockComponents: {
+          'query-node': QueryGraphCanvasBlock
+        }
+      }
+    }),
+    graph = _useGraph.graph,
+    api = _useGraph.api,
+    setEntities = _useGraph.setEntities,
+    start = _useGraph.start,
+    stop = _useGraph.stop;
+  var _useState9 = useState(graph.cameraService.getCameraState().scale),
+    _useState0 = _slicedToArray(_useState9, 2),
+    scale = _useState0[0],
+    setScale = _useState0[1];
+  var _graph$cameraService$ = graph.cameraService.getCameraState(),
+    scaleMin = _graph$cameraService$.scaleMin,
+    scaleMax = _graph$cameraService$.scaleMax;
+  useGraphEvent(graph, 'camera-change', function (_ref6) {
+    var nextScale = _ref6.scale;
+    return setScale(nextScale);
+  });
+  useGraphEvent(graph, 'mouseenter', function (_ref7) {
+    var _state$meta;
+    var target = _ref7.target;
+    var state = target === null || target === void 0 ? void 0 : target.state;
+    if (state !== null && state !== void 0 && (_state$meta = state.meta) !== null && _state$meta !== void 0 && _state$meta.node) setHoveredNodeId(state.meta.node.id);
+  });
+  useGraphEvent(graph, 'mouseleave', function (_ref8) {
+    var _state$meta2;
+    var target = _ref8.target;
+    var state = target === null || target === void 0 ? void 0 : target.state;
+    if (state !== null && state !== void 0 && (_state$meta2 = state.meta) !== null && _state$meta2 !== void 0 && _state$meta2.node) setHoveredNodeId(undefined);
+  });
+  useEffect(function () {
+    if (!rootRef.current) return;
+    var background = getComputedStyle(rootRef.current).getPropertyValue('--g-color-base-background').trim();
+    var connection = getComputedStyle(rootRef.current).getPropertyValue('--g-color-line-generic-accent').trim();
+    if (!background || !connection) return;
+    var colors = api.getGraphColors();
+    api.updateGraphColors(_objectSpread(_objectSpread({}, colors), {}, {
+      canvas: _objectSpread(_objectSpread({}, colors.canvas), {}, {
+        belowLayerBackground: background,
+        layerBackground: background,
+        border: background,
+        dots: background
+      }),
+      connection: _objectSpread(_objectSpread({}, colors.connection), {}, {
+        background: connection
+      })
+    }));
+  }, [api, themeValue]);
+  var visibleConnections = useMemo(function () {
+    return connections.map(function (connection) {
+      return _objectSpread(_objectSpread({}, connection), {}, {
+        selected: Boolean(hoveredNodeId && (connection.sourceBlockId === hoveredNodeId || connection.targetBlockId === hoveredNodeId))
+      });
+    });
+  }, [connections, hoveredNodeId]);
+  useEffect(function () {
+    return setEntities({
+      blocks: blocks,
+      connections: visibleConnections
+    });
+  }, [blocks, setEntities, visibleConnections]);
+  useEffect(function () {
+    if (!attachedRef.current) return;
+    if (active) start();else stop();
+  }, [active, start, stop]);
+  useEffect(function () {
+    var changed = previousStructureRef.current !== structureKey;
+    var becameActive = active && !previousActiveRef.current;
+    var frame;
+    if (attached && active && (!centeredRef.current || becameActive || autoCenter && changed)) {
+      frame = requestAnimationFrame(function () {
+        api.zoomToViewPort({
+          padding: FIT_PADDING
+        });
+        centeredRef.current = true;
+      });
+    }
+    previousActiveRef.current = Boolean(active);
+    previousStructureRef.current = structureKey;
+    setPopup(undefined);
+    return function () {
+      if (frame !== undefined) cancelAnimationFrame(frame);
+    };
+  }, [active, api, attached, autoCenter, setPopup, structureKey]);
+  var handleClick = function handleClick(_ref9) {
+    var _state$meta3;
+    var target = _ref9.target,
+      sourceEvent = _ref9.sourceEvent;
+    var state = target === null || target === void 0 ? void 0 : target.state;
+    if (!(state !== null && state !== void 0 && (_state$meta3 = state.meta) !== null && _state$meta3 !== void 0 && _state$meta3.node) || !rootRef.current) {
+      setPopup(undefined);
+      return;
+    }
+    var mouseEvent = sourceEvent;
+    var rect = rootRef.current.getBoundingClientRect();
+    var left = Math.min(Math.max(16, mouseEvent.clientX - rect.left + 12), rect.width - 456);
+    var top = Math.min(Math.max(16, mouseEvent.clientY - rect.top + 12), rect.height - 240);
+    setPopup({
+      nodeId: state.meta.node.id,
+      left: Math.max(16, left),
+      top: Math.max(16, top)
+    });
+    onNodeClick === null || onNodeClick === void 0 || onNodeClick(state.meta.node, mouseEvent);
+  };
+  var selectedNode = popup ? nodes.find(function (node) {
+    return node.id === popup.nodeId;
+  }) : undefined;
+  var defaultContent = selectedNode ? /*#__PURE__*/_jsx(QueryGraphPopup, {
+    node: selectedNode
+  }) : null;
+  var popupContent = null;
+  if (selectedNode) {
+    popupContent = renderNodePopup ? renderNodePopup({
+      node: selectedNode,
+      defaultContent: defaultContent
+    }) : defaultContent;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ref: rootRef,
+    className: block(null, className),
+    children: [/*#__PURE__*/_jsx(GraphCanvas, {
+      graph: graph,
+      className: block('canvas'),
+      click: handleClick,
+      renderBlock: renderEmptyBlock,
+      onStateChanged: function onStateChanged(_ref0) {
+        var state = _ref0.state;
+        if (state === GraphState.ATTACHED) {
+          if (active) start();
+          attachedRef.current = true;
+          setAttached(true);
+        }
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: block('toolbox'),
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        content: i18n('action_zoom-in'),
+        placement: "right",
+        children: /*#__PURE__*/_jsx(Button, {
+          view: "raised",
+          pin: "round-brick",
+          "aria-label": i18n('action_zoom-in'),
+          disabled: scale >= scaleMax,
+          onClick: function onClick() {
+            return changeZoom(graph, ZOOM_STEP);
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            data: MagnifierPlus
+          })
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        content: i18n('action_fit'),
+        placement: "right",
+        children: /*#__PURE__*/_jsx(Button, {
+          view: "raised",
+          pin: "brick-brick",
+          "aria-label": i18n('action_fit'),
+          onClick: function onClick() {
+            return api.zoomToViewPort({
+              padding: FIT_PADDING
+            });
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            data: SquareDashed
+          })
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        content: i18n('action_zoom-out'),
+        placement: "right",
+        children: /*#__PURE__*/_jsx(Button, {
+          view: "raised",
+          pin: "brick-round",
+          "aria-label": i18n('action_zoom-out'),
+          disabled: scale <= scaleMin,
+          onClick: function onClick() {
+            return changeZoom(graph, -ZOOM_STEP);
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            data: MagnifierMinus
+          })
+        })
+      })]
+    }), popup && popupContent !== null && /*#__PURE__*/_jsx("div", {
+      className: block('popup'),
+      style: {
+        left: popup.left,
+        top: popup.top
+      },
+      children: popupContent
+    })]
+  });
+});
+function changeZoom(graph, delta) {
+  var camera = graph.cameraService;
+  var state = camera.getCameraState();
+  var nextScale = Math.min(state.scaleMax, Math.max(state.scaleMin, state.scale + delta));
+  camera.zoom(state.width / 2, state.height / 2, nextScale);
+}
+function State(_ref1) {
+  var className = _ref1.className,
+    children = _ref1.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: block(null, className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: block('state'),
+      children: children
+    })
+  });
+}
+// #sourceMappingURL=QueryGraph.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useImperativeHandle","useMemo","useRef","useState","BezierMultipointConnection","ECanDrag","GraphState","GraphCanvas","useGraph","useGraphEvent","MagnifierMinus","MagnifierPlus","SquareDashed","Button","Icon","Loader","Text","Tooltip","useThemeValue","cn","createQueryGraphConnections","getQueryGraphNodeSize","validateQueryGraph","i18n","QueryGraphCanvasBlock","QueryGraphPopup","getQueryGraphNodeIconSvgs","useQueryGraphLayout","jsx","_jsx","jsxs","_jsxs","block","FIT_PADDING","ZOOM_STEP","renderEmptyBlock","Fragment","QueryGraph","_ref","nodes","edges","loading","errorContent","className","_ref$autoCenter","autoCenter","_ref$active","active","_ref$largeGraphThresh","largeGraphThreshold","renderNodePopup","onNodeClick","onError","_useState","_useState2","_slicedToArray","showLargeGraph","setShowLargeGraph","nodesRef","edgesRef","current","structureKey","concat","map","_ref2","id","kind","join","_ref3","source","target","validationError","undefined","nextError","Error","shouldConfirm","length","State","children","size","color","message","count","view","onClick","QueryGraphWithLayout","_ref4","_useState3","_useState4","popup","setPopup","rootRef","layoutBlocks","node","_objectSpread","layoutConnections","edge","sourceBlockId","targetBlockId","_useQueryGraphLayout","blocks","connections","result","resolvedStructureKey","isInitialLoading","error","graphBlocks","flatMap","position","_getQueryGraphNodeIco","iconSvg","fallbackIconSvg","iconColorToken","fallbackIconColorToken","is","name","selected","anchors","meta","graphConnections","QueryGraphRenderer","ref","forwardRef","QueryGraphRendererComponent","_ref5","forwardedRef","attachedRef","centeredRef","previousActiveRef","previousStructureRef","_useState5","_useState6","attached","setAttached","_useState7","_useState8","hoveredNodeId","setHoveredNodeId","themeValue","_useGraph","settings","connection","canDrag","NONE","canDragCamera","canZoomCamera","canCreateNewConnections","useBezierConnections","bezierConnectionDirection","showConnectionArrows","useBlocksAnchors","blockComponents","graph","api","setEntities","start","stop","_useState9","cameraService","getCameraState","scale","_useState0","setScale","_graph$cameraService$","scaleMin","scaleMax","_ref6","nextScale","_ref7","_state$meta","state","_ref8","_state$meta2","background","getComputedStyle","getPropertyValue","trim","colors","getGraphColors","updateGraphColors","canvas","belowLayerBackground","layerBackground","border","dots","visibleConnections","Boolean","changed","becameActive","frame","requestAnimationFrame","zoomToViewPort","padding","cancelAnimationFrame","handleClick","_ref9","_state$meta3","sourceEvent","mouseEvent","rect","getBoundingClientRect","left","Math","min","max","clientX","width","top","clientY","height","nodeId","selectedNode","find","defaultContent","popupContent","click","renderBlock","onStateChanged","_ref0","ATTACHED","content","placement","pin","disabled","changeZoom","data","style","delta","camera","zoom","_ref1"],"sources":["QueryGraph.tsx"],"sourcesContent":["import React, {useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {\n    BezierMultipointConnection,\n    ECanDrag,\n    GraphState,\n    type TMultipointConnection,\n} from '@gravity-ui/graph';\nimport {GraphCanvas, useGraph, useGraphEvent} from '@gravity-ui/graph/react';\nimport {MagnifierMinus, MagnifierPlus, SquareDashed} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Text, Tooltip, useThemeValue} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\n\nimport type {QueryGraphNode, QueryGraphProps} from '../../types/queryGraph';\nimport {\n    createQueryGraphConnections,\n    getQueryGraphNodeSize,\n    validateQueryGraph,\n} from './helpers/layout';\nimport i18n from './i18n';\nimport {type QueryGraphBlock, QueryGraphCanvasBlock} from './internal/QueryGraphCanvasBlock';\nimport {QueryGraphPopup} from './internal/QueryGraphPopup';\nimport {getQueryGraphNodeIconSvgs} from './internal/queryGraphIcons';\nimport {useQueryGraphLayout} from './internal/useQueryGraphLayout';\n\nimport './QueryGraph.scss';\n\nconst block = cn('qp-query-graph');\nconst FIT_PADDING = 120;\nconst ZOOM_STEP = 0.08;\nconst renderEmptyBlock = () => <React.Fragment />;\n\ntype PopupState = {nodeId: string; left: number; top: number};\n\nexport function QueryGraph({\n    nodes,\n    edges,\n    loading,\n    errorContent,\n    className,\n    autoCenter = true,\n    active = true,\n    largeGraphThreshold = 250,\n    renderNodePopup,\n    onNodeClick,\n    onError,\n}: QueryGraphProps) {\n    const [showLargeGraph, setShowLargeGraph] = useState(false);\n    const nodesRef = useRef(nodes);\n    const edgesRef = useRef(edges);\n    nodesRef.current = nodes;\n    edgesRef.current = edges;\n\n    const structureKey = useMemo(\n        () =>\n            `${nodes.map(({id, kind}) => `${id}:${kind}`).join('|')}::${edges\n                .map(({id, source, target}) => `${id}:${source}:${target}`)\n                .join('|')}`,\n        [edges, nodes],\n    );\n\n    const validationError = useMemo(() => {\n        try {\n            validateQueryGraph(nodesRef.current, edgesRef.current);\n            return undefined;\n        } catch (nextError) {\n            return nextError instanceof Error\n                ? nextError\n                : new Error('Unable to build query graph');\n        }\n        // Only graph structure affects validation.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [structureKey]);\n    useEffect(() => {\n        if (validationError) onError?.(validationError);\n    }, [onError, validationError]);\n\n    const shouldConfirm = largeGraphThreshold !== false && nodes.length > largeGraphThreshold;\n    if (loading)\n        return (\n            <State className={className}>\n                <Loader size=\"m\" />\n            </State>\n        );\n    if (errorContent)\n        return (\n            <State className={className}>\n                <Text color=\"danger\">{errorContent}</Text>\n            </State>\n        );\n    if (validationError)\n        return (\n            <State className={className}>\n                <Text color=\"danger\">{validationError.message}</Text>\n            </State>\n        );\n    if (!nodes.length)\n        return (\n            <State className={className}>\n                <Text color=\"secondary\">{i18n('context_empty')}</Text>\n            </State>\n        );\n    if (shouldConfirm && !showLargeGraph) {\n        return (\n            <State className={className}>\n                <div className={block('large-graph')}>\n                    <Text>{i18n('context_large-graph', {count: nodes.length})}</Text>\n                    <Button view=\"action\" onClick={() => setShowLargeGraph(true)}>\n                        {i18n('action_show-graph')}\n                    </Button>\n                </div>\n            </State>\n        );\n    }\n\n    return (\n        <QueryGraphWithLayout\n            nodes={nodes}\n            edges={edges}\n            structureKey={structureKey}\n            autoCenter={autoCenter}\n            active={active}\n            renderNodePopup={renderNodePopup}\n            onNodeClick={onNodeClick}\n            onError={onError}\n            className={className}\n        />\n    );\n}\n\ntype QueryGraphWithLayoutProps = Pick<\n    QueryGraphProps,\n    | 'nodes'\n    | 'edges'\n    | 'autoCenter'\n    | 'active'\n    | 'renderNodePopup'\n    | 'onNodeClick'\n    | 'onError'\n    | 'className'\n> & {structureKey: string};\n\nfunction QueryGraphWithLayout({\n    nodes,\n    edges,\n    structureKey,\n    autoCenter,\n    active,\n    renderNodePopup,\n    onNodeClick,\n    onError,\n    className,\n}: QueryGraphWithLayoutProps) {\n    const [popup, setPopup] = useState<PopupState>();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const nodesRef = useRef(nodes);\n    const edgesRef = useRef(edges);\n    nodesRef.current = nodes;\n    edgesRef.current = edges;\n\n    const layoutBlocks = useMemo(\n        () =>\n            nodesRef.current.map((node) => ({\n                id: node.id,\n                ...getQueryGraphNodeSize(node),\n            })),\n        // Node status and presentation do not affect layout.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [structureKey],\n    );\n    const layoutConnections = useMemo(\n        () =>\n            edgesRef.current.map((edge) => ({\n                id: edge.id,\n                sourceBlockId: edge.source,\n                targetBlockId: edge.target,\n            })),\n        // Only graph structure affects layout.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [structureKey],\n    );\n    const {result, resolvedStructureKey, isInitialLoading, error} = useQueryGraphLayout({\n        structureKey,\n        blocks: layoutBlocks,\n        connections: layoutConnections,\n        onError,\n    });\n\n    const graphBlocks = useMemo<QueryGraphBlock[]>(\n        () =>\n            nodes.flatMap((node) => {\n                const position = result?.blocks[node.id];\n                if (!position) return [];\n                const {iconSvg, fallbackIconSvg, iconColorToken, fallbackIconColorToken} =\n                    getQueryGraphNodeIconSvgs(node);\n                return [\n                    {\n                        id: node.id,\n                        is: 'query-node',\n                        name: node.name,\n                        selected: false,\n                        anchors: [],\n                        meta: {\n                            node,\n                            iconSvg,\n                            fallbackIconSvg,\n                            iconColorToken,\n                            fallbackIconColorToken,\n                        },\n                        ...getQueryGraphNodeSize(node),\n                        ...position,\n                    },\n                ];\n            }),\n        [nodes, result],\n    );\n    const graphConnections = useMemo<TMultipointConnection[]>(\n        () => createQueryGraphConnections(edges, result?.edges),\n        [edges, result],\n    );\n\n    if (error)\n        return (\n            <State className={className}>\n                <Text color=\"danger\">{error.message}</Text>\n            </State>\n        );\n    if (isInitialLoading || !result || !resolvedStructureKey)\n        return (\n            <State className={className}>\n                <Loader size=\"m\" />\n            </State>\n        );\n\n    return (\n        // The renderer is declared below to keep the public component and its states together.\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <QueryGraphRenderer\n            ref={rootRef}\n            blocks={graphBlocks}\n            connections={graphConnections}\n            nodes={nodes}\n            structureKey={resolvedStructureKey}\n            autoCenter={autoCenter}\n            active={active}\n            popup={popup}\n            setPopup={setPopup}\n            renderNodePopup={renderNodePopup}\n            onNodeClick={onNodeClick}\n            className={className}\n        />\n    );\n}\n\ntype RendererProps = Pick<\n    QueryGraphProps,\n    'autoCenter' | 'active' | 'renderNodePopup' | 'onNodeClick' | 'className'\n> & {\n    blocks: QueryGraphBlock[];\n    connections: TMultipointConnection[];\n    nodes: QueryGraphNode[];\n    structureKey: string;\n    popup?: PopupState;\n    setPopup: React.Dispatch<React.SetStateAction<PopupState | undefined>>;\n};\n\nconst QueryGraphRenderer = React.forwardRef<HTMLDivElement, RendererProps>(\n    function QueryGraphRendererComponent(\n        {\n            blocks,\n            connections,\n            nodes,\n            structureKey,\n            autoCenter,\n            active,\n            popup,\n            setPopup,\n            renderNodePopup,\n            onNodeClick,\n            className,\n        },\n        forwardedRef,\n    ) {\n        const rootRef = useRef<HTMLDivElement | null>(null);\n        useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement);\n        const attachedRef = useRef(false);\n        const centeredRef = useRef(false);\n        const previousActiveRef = useRef(false);\n        const previousStructureRef = useRef(structureKey);\n        const [attached, setAttached] = useState(false);\n        const [hoveredNodeId, setHoveredNodeId] = useState<string>();\n        const themeValue = useThemeValue();\n        const {graph, api, setEntities, start, stop} = useGraph({\n            name: 'query-graph',\n            settings: {\n                connection: BezierMultipointConnection,\n                canDrag: ECanDrag.NONE,\n                canDragCamera: true,\n                canZoomCamera: true,\n                canCreateNewConnections: false,\n                useBezierConnections: true,\n                bezierConnectionDirection: 'horizontal',\n                showConnectionArrows: true,\n                useBlocksAnchors: false,\n                blockComponents: {'query-node': QueryGraphCanvasBlock},\n            },\n        });\n        const [scale, setScale] = useState(graph.cameraService.getCameraState().scale);\n        const {scaleMin, scaleMax} = graph.cameraService.getCameraState();\n        useGraphEvent(graph, 'camera-change', ({scale: nextScale}) => setScale(nextScale));\n        useGraphEvent(graph, 'mouseenter', ({target}) => {\n            const state = (target as {state?: QueryGraphBlock} | undefined)?.state;\n            if (state?.meta?.node) setHoveredNodeId(state.meta.node.id);\n        });\n        useGraphEvent(graph, 'mouseleave', ({target}) => {\n            const state = (target as {state?: QueryGraphBlock} | undefined)?.state;\n            if (state?.meta?.node) setHoveredNodeId(undefined);\n        });\n\n        useEffect(() => {\n            if (!rootRef.current) return;\n\n            const background = getComputedStyle(rootRef.current)\n                .getPropertyValue('--g-color-base-background')\n                .trim();\n            const connection = getComputedStyle(rootRef.current)\n                .getPropertyValue('--g-color-line-generic-accent')\n                .trim();\n            if (!background || !connection) return;\n\n            const colors = api.getGraphColors();\n            api.updateGraphColors({\n                ...colors,\n                canvas: {\n                    ...colors.canvas,\n                    belowLayerBackground: background,\n                    layerBackground: background,\n                    border: background,\n                    dots: background,\n                },\n                connection: {\n                    ...colors.connection,\n                    background: connection,\n                },\n            });\n        }, [api, themeValue]);\n\n        const visibleConnections = useMemo(\n            () =>\n                connections.map((connection) => ({\n                    ...connection,\n                    selected: Boolean(\n                        hoveredNodeId &&\n                        (connection.sourceBlockId === hoveredNodeId ||\n                            connection.targetBlockId === hoveredNodeId),\n                    ),\n                })),\n            [connections, hoveredNodeId],\n        );\n        useEffect(\n            () => setEntities({blocks, connections: visibleConnections}),\n            [blocks, setEntities, visibleConnections],\n        );\n        useEffect(() => {\n            if (!attachedRef.current) return;\n            if (active) start();\n            else stop();\n        }, [active, start, stop]);\n        useEffect(() => {\n            const changed = previousStructureRef.current !== structureKey;\n            const becameActive = active && !previousActiveRef.current;\n            let frame: number | undefined;\n            if (\n                attached &&\n                active &&\n                (!centeredRef.current || becameActive || (autoCenter && changed))\n            ) {\n                frame = requestAnimationFrame(() => {\n                    api.zoomToViewPort({padding: FIT_PADDING});\n                    centeredRef.current = true;\n                });\n            }\n            previousActiveRef.current = Boolean(active);\n            previousStructureRef.current = structureKey;\n            setPopup(undefined);\n            return () => {\n                if (frame !== undefined) cancelAnimationFrame(frame);\n            };\n        }, [active, api, attached, autoCenter, setPopup, structureKey]);\n\n        const handleClick: NonNullable<React.ComponentProps<typeof GraphCanvas>['click']> = ({\n            target,\n            sourceEvent,\n        }) => {\n            const state = (target as {state?: QueryGraphBlock; isBlock?: boolean} | undefined)\n                ?.state;\n            if (!state?.meta?.node || !rootRef.current) {\n                setPopup(undefined);\n                return;\n            }\n            const mouseEvent = sourceEvent as MouseEvent;\n            const rect = rootRef.current.getBoundingClientRect();\n            const left = Math.min(\n                Math.max(16, mouseEvent.clientX - rect.left + 12),\n                rect.width - 456,\n            );\n            const top = Math.min(\n                Math.max(16, mouseEvent.clientY - rect.top + 12),\n                rect.height - 240,\n            );\n            setPopup({\n                nodeId: state.meta.node.id,\n                left: Math.max(16, left),\n                top: Math.max(16, top),\n            });\n            onNodeClick?.(state.meta.node, mouseEvent);\n        };\n\n        const selectedNode = popup ? nodes.find((node) => node.id === popup.nodeId) : undefined;\n        const defaultContent = selectedNode ? <QueryGraphPopup node={selectedNode} /> : null;\n        let popupContent: React.ReactNode = null;\n        if (selectedNode) {\n            popupContent = renderNodePopup\n                ? renderNodePopup({node: selectedNode, defaultContent})\n                : defaultContent;\n        }\n\n        return (\n            <div ref={rootRef} className={block(null, className)}>\n                <GraphCanvas\n                    graph={graph}\n                    className={block('canvas')}\n                    click={handleClick}\n                    renderBlock={renderEmptyBlock}\n                    onStateChanged={({state}) => {\n                        if (state === GraphState.ATTACHED) {\n                            if (active) start();\n                            attachedRef.current = true;\n                            setAttached(true);\n                        }\n                    }}\n                />\n                <div className={block('toolbox')}>\n                    <Tooltip content={i18n('action_zoom-in')} placement=\"right\">\n                        <Button\n                            view=\"raised\"\n                            pin=\"round-brick\"\n                            aria-label={i18n('action_zoom-in')}\n                            disabled={scale >= scaleMax}\n                            onClick={() => changeZoom(graph, ZOOM_STEP)}\n                        >\n                            <Icon data={MagnifierPlus} />\n                        </Button>\n                    </Tooltip>\n                    <Tooltip content={i18n('action_fit')} placement=\"right\">\n                        <Button\n                            view=\"raised\"\n                            pin=\"brick-brick\"\n                            aria-label={i18n('action_fit')}\n                            onClick={() => api.zoomToViewPort({padding: FIT_PADDING})}\n                        >\n                            <Icon data={SquareDashed} />\n                        </Button>\n                    </Tooltip>\n                    <Tooltip content={i18n('action_zoom-out')} placement=\"right\">\n                        <Button\n                            view=\"raised\"\n                            pin=\"brick-round\"\n                            aria-label={i18n('action_zoom-out')}\n                            disabled={scale <= scaleMin}\n                            onClick={() => changeZoom(graph, -ZOOM_STEP)}\n                        >\n                            <Icon data={MagnifierMinus} />\n                        </Button>\n                    </Tooltip>\n                </div>\n                {popup && popupContent !== null && (\n                    <div className={block('popup')} style={{left: popup.left, top: popup.top}}>\n                        {popupContent}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n\nfunction changeZoom(graph: ReturnType<typeof useGraph>['graph'], delta: number) {\n    const camera = graph.cameraService;\n    const state = camera.getCameraState();\n    const nextScale = Math.min(state.scaleMax, Math.max(state.scaleMin, state.scale + delta));\n    camera.zoom(state.width / 2, state.height / 2, nextScale);\n}\n\nfunction State({className, children}: {className?: string; children: React.ReactNode}) {\n    return (\n        <div className={block(null, className)}>\n            <div className={block('state')}>{children}</div>\n        </div>\n    );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/QueryGraph/QueryGraph.scss

@@ -0,0 +1,81 @@
+.qp-query-graph {
+    position: relative;
+    min-height: 360px;
+    height: 100%;
+    overflow: hidden;
+    background: var(--g-color-base-background);
+
+    &__canvas {
+        width: 100%;
+        height: 100%;
+        min-height: 360px;
+    }
+
+    &__toolbox {
+        position: absolute;
+        z-index: 4;
+        top: var(--g-spacing-4);
+        left: var(--g-spacing-4);
+        display: flex;
+        width: 28px;
+        flex-direction: column;
+    }
+
+    &__popup {
+        position: absolute;
+        z-index: 5;
+        width: min(440px, calc(100% - var(--g-spacing-8)));
+        max-height: calc(100% - var(--g-spacing-8));
+        overflow: auto;
+        padding: var(--g-spacing-4);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-l);
+        box-shadow: 0 4px 24px var(--g-color-sfx-shadow);
+        background: var(--g-color-base-float);
+    }
+
+    &__popup-content,
+    &__jobs,
+    &__schemas,
+    &__details {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+    }
+
+    &__popup-title {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+
+        > div {
+            display: flex;
+            min-width: 0;
+            flex-direction: column;
+        }
+    }
+
+    &__detail-row {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--g-spacing-3);
+    }
+
+    &__state {
+        height: 100%;
+        min-height: 360px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--g-spacing-6);
+        text-align: center;
+    }
+
+    &__large-graph {
+        display: flex;
+        max-width: 480px;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--g-spacing-4);
+    }
+}