@gravity-ui/querieskit 1.5.1 → 1.6.0

package/README.md

@@ -57,6 +57,34 @@ Prefer widgets for product screens. Use modules and components when you need a c
 
 ## Usage
 
+### Widget imports
+
+All six widgets support both root and individual imports:
+
+```tsx
+import {SavedQueries} from '@gravity-ui/querieskit';
+```
+
+Alternatively, start directly from the widget's entrypoint:
+
+```tsx
+import {SavedQueries} from '@gravity-ui/querieskit/widgets/SavedQueries';
+import type {SavedQueriesProps} from '@gravity-ui/querieskit/widgets/SavedQueries';
+```
+
+Individual entrypoints are available for `QueriesHistory`, `SavedQueries`,
+`TutorialsHistory`, `QueriesNavigation`, `QueryResults`, and `DashboardCharts`.
+They expose each widget's existing public exports, including its props and helpers.
+Shared data types remain available from the package root.
+
+Individual imports limit the dependency graph the bundler needs to traverse.
+Both forms support tree-shaking with an ESM-aware bundler; individual imports do
+not necessarily produce a smaller bundle. Existing root imports remain supported.
+Keep CSS processing enabled so that the selected widget's styles are included.
+Some bundlers, including esbuild, retain CSS from unused root re-exports even when
+their JavaScript is removed. Individual widget imports avoid introducing those
+unrelated styles.
+
 ### QueriesHistory
 
 Ready-made query history sidebar: search, filters, editable titles, row actions, and optional compare mode.

package/build/cjs/components/QueryGraph/QueryGraph.css

@@ -0,0 +1,70 @@
+.qp-query-graph {
+  position: relative;
+  min-height: 360px;
+  height: 100%;
+  overflow: hidden;
+  background: var(--g-color-base-background);
+}
+.qp-query-graph__canvas {
+  width: 100%;
+  height: 100%;
+  min-height: 360px;
+}
+.qp-query-graph__toolbox {
+  position: absolute;
+  z-index: 4;
+  top: var(--g-spacing-4);
+  left: var(--g-spacing-4);
+  display: flex;
+  width: 28px;
+  flex-direction: column;
+}
+.qp-query-graph__popup {
+  position: absolute;
+  z-index: 5;
+  width: min(440px, 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);
+}
+.qp-query-graph__popup-content, .qp-query-graph__jobs, .qp-query-graph__schemas, .qp-query-graph__details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+}
+.qp-query-graph__popup-title {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.qp-query-graph__popup-title > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.qp-query-graph__detail-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--g-spacing-3);
+}
+.qp-query-graph__state {
+  height: 100%;
+  min-height: 360px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--g-spacing-6);
+  text-align: center;
+}
+.qp-query-graph__large-graph {
+  display: flex;
+  max-width: 480px;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--g-spacing-4);
+}
+/*# sourceMappingURL=QueryGraph.css.map */

package/build/cjs/components/QueryGraph/QueryGraph.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["QueryGraph.scss"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,iBAAA;EACA,YAAA;EACA,gBAAA;EACA,0CAAA;AACJ;AACI;EACI,WAAA;EACA,YAAA;EACA,iBAAA;AACR;AAEI;EACI,kBAAA;EACA,UAAA;EACA,uBAAA;EACA,wBAAA;EACA,aAAA;EACA,WAAA;EACA,sBAAA;AAAR;AAGI;EACI,kBAAA;EACA,UAAA;EACA,4CAAA;EACA,2CAAA;EACA,cAAA;EACA,2BAAA;EACA,6CAAA;EACA,uCAAA;EACA,gDAAA;EACA,qCAAA;AADR;AAII;EAII,aAAA;EACA,sBAAA;EACA,uBAAA;AALR;AAQI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;AANR;AAQQ;EACI,aAAA;EACA,YAAA;EACA,sBAAA;AANZ;AAUI;EACI,aAAA;EACA,8BAAA;EACA,uBAAA;AARR;AAWI;EACI,YAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,2BAAA;EACA,kBAAA;AATR;AAYI;EACI,aAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;AAVR","file":"QueryGraph.css","sourcesContent":[".qp-query-graph {\n    position: relative;\n    min-height: 360px;\n    height: 100%;\n    overflow: hidden;\n    background: var(--g-color-base-background);\n\n    &__canvas {\n        width: 100%;\n        height: 100%;\n        min-height: 360px;\n    }\n\n    &__toolbox {\n        position: absolute;\n        z-index: 4;\n        top: var(--g-spacing-4);\n        left: var(--g-spacing-4);\n        display: flex;\n        width: 28px;\n        flex-direction: column;\n    }\n\n    &__popup {\n        position: absolute;\n        z-index: 5;\n        width: min(440px, calc(100% - var(--g-spacing-8)));\n        max-height: calc(100% - var(--g-spacing-8));\n        overflow: auto;\n        padding: var(--g-spacing-4);\n        border: 1px solid var(--g-color-line-generic);\n        border-radius: var(--g-border-radius-l);\n        box-shadow: 0 4px 24px var(--g-color-sfx-shadow);\n        background: var(--g-color-base-float);\n    }\n\n    &__popup-content,\n    &__jobs,\n    &__schemas,\n    &__details {\n        display: flex;\n        flex-direction: column;\n        gap: var(--g-spacing-3);\n    }\n\n    &__popup-title {\n        display: flex;\n        align-items: center;\n        gap: var(--g-spacing-2);\n\n        > div {\n            display: flex;\n            min-width: 0;\n            flex-direction: column;\n        }\n    }\n\n    &__detail-row {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--g-spacing-3);\n    }\n\n    &__state {\n        height: 100%;\n        min-height: 360px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: var(--g-spacing-6);\n        text-align: center;\n    }\n\n    &__large-graph {\n        display: flex;\n        max-width: 480px;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--g-spacing-4);\n    }\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { QueryGraphProps } from '../../types/queryGraph';
+import './QueryGraph.scss';
+export declare function QueryGraph({ nodes, edges, loading, errorContent, className, autoCenter, active, largeGraphThreshold, renderNodePopup, onNodeClick, onError, }: QueryGraphProps): React.JSX.Element;

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

@@ -0,0 +1,517 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryGraph = QueryGraph;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.flat-map.js");
+require("core-js/modules/es.array.join.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.unscopables.flat-map.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.find.js");
+require("core-js/modules/es.iterator.flat-map.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
+var _graph = require("@gravity-ui/graph");
+var _react2 = require("@gravity-ui/graph/react");
+var _icons = require("@gravity-ui/icons");
+var _uikit = require("@gravity-ui/uikit");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+var _layout = require("./helpers/layout");
+var _i18n = _interopRequireDefault(require("./i18n"));
+var _QueryGraphCanvasBlock = require("./internal/QueryGraphCanvasBlock");
+var _QueryGraphPopup = require("./internal/QueryGraphPopup");
+var _queryGraphIcons = require("./internal/queryGraphIcons");
+var _useQueryGraphLayout2 = require("./internal/useQueryGraphLayout");
+require("./QueryGraph.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var block = (0, _bemCnLite.default)('qp-query-graph');
+var FIT_PADDING = 120;
+var ZOOM_STEP = 0.08;
+var renderEmptyBlock = function renderEmptyBlock() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {});
+};
+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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLargeGraph = _useState2[0],
+    setShowLargeGraph = _useState2[1];
+  var nodesRef = (0, _react.useRef)(nodes);
+  var edgesRef = (0, _react.useRef)(edges);
+  nodesRef.current = nodes;
+  edgesRef.current = edges;
+  var structureKey = (0, _react.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 = (0, _react.useMemo)(function () {
+    try {
+      (0, _layout.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]);
+  (0, _react.useEffect)(function () {
+    if (validationError) onError === null || onError === void 0 || onError(validationError);
+  }, [onError, validationError]);
+  var shouldConfirm = largeGraphThreshold !== false && nodes.length > largeGraphThreshold;
+  if (loading) return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Loader, {
+      size: "m"
+    })
+  });
+  if (errorContent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "danger",
+      children: errorContent
+    })
+  });
+  if (validationError) return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "danger",
+      children: validationError.message
+    })
+  });
+  if (!nodes.length) return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "secondary",
+      children: (0, _i18n.default)('context_empty')
+    })
+  });
+  if (shouldConfirm && !showLargeGraph) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+      className: className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: block('large-graph'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+          children: (0, _i18n.default)('context_large-graph', {
+            count: nodes.length
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          view: "action",
+          onClick: function onClick() {
+            return setShowLargeGraph(true);
+          },
+          children: (0, _i18n.default)('action_show-graph')
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.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 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    popup = _useState4[0],
+    setPopup = _useState4[1];
+  var rootRef = (0, _react.useRef)(null);
+  var nodesRef = (0, _react.useRef)(nodes);
+  var edgesRef = (0, _react.useRef)(edges);
+  nodesRef.current = nodes;
+  edgesRef.current = edges;
+  var layoutBlocks = (0, _react.useMemo)(function () {
+    return nodesRef.current.map(function (node) {
+      return (0, _objectSpread2.default)({
+        id: node.id
+      }, (0, _layout.getQueryGraphNodeSize)(node));
+    });
+  },
+  // Node status and presentation do not affect layout.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [structureKey]);
+  var layoutConnections = (0, _react.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 = (0, _useQueryGraphLayout2.useQueryGraphLayout)({
+      structureKey: structureKey,
+      blocks: layoutBlocks,
+      connections: layoutConnections,
+      onError: onError
+    }),
+    result = _useQueryGraphLayout.result,
+    resolvedStructureKey = _useQueryGraphLayout.resolvedStructureKey,
+    isInitialLoading = _useQueryGraphLayout.isInitialLoading,
+    error = _useQueryGraphLayout.error;
+  var graphBlocks = (0, _react.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 = (0, _queryGraphIcons.getQueryGraphNodeIconSvgs)(node),
+        iconSvg = _getQueryGraphNodeIco.iconSvg,
+        fallbackIconSvg = _getQueryGraphNodeIco.fallbackIconSvg,
+        iconColorToken = _getQueryGraphNodeIco.iconColorToken,
+        fallbackIconColorToken = _getQueryGraphNodeIco.fallbackIconColorToken;
+      return [(0, _objectSpread2.default)((0, _objectSpread2.default)({
+        id: node.id,
+        is: 'query-node',
+        name: node.name,
+        selected: false,
+        anchors: [],
+        meta: {
+          node: node,
+          iconSvg: iconSvg,
+          fallbackIconSvg: fallbackIconSvg,
+          iconColorToken: iconColorToken,
+          fallbackIconColorToken: fallbackIconColorToken
+        }
+      }, (0, _layout.getQueryGraphNodeSize)(node)), position)];
+    });
+  }, [nodes, result]);
+  var graphConnections = (0, _react.useMemo)(function () {
+    return (0, _layout.createQueryGraphConnections)(edges, result === null || result === void 0 ? void 0 : result.edges);
+  }, [edges, result]);
+  if (error) return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "danger",
+      children: error.message
+    })
+  });
+  if (isInitialLoading || !result || !resolvedStructureKey) return /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.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
+    (0, _jsxRuntime.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.default.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 = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(forwardedRef, function () {
+    return rootRef.current;
+  });
+  var attachedRef = (0, _react.useRef)(false);
+  var centeredRef = (0, _react.useRef)(false);
+  var previousActiveRef = (0, _react.useRef)(false);
+  var previousStructureRef = (0, _react.useRef)(structureKey);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    attached = _useState6[0],
+    setAttached = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    hoveredNodeId = _useState8[0],
+    setHoveredNodeId = _useState8[1];
+  var themeValue = (0, _uikit.useThemeValue)();
+  var _useGraph = (0, _react2.useGraph)({
+      name: 'query-graph',
+      settings: {
+        connection: _graph.BezierMultipointConnection,
+        canDrag: _graph.ECanDrag.NONE,
+        canDragCamera: true,
+        canZoomCamera: true,
+        canCreateNewConnections: false,
+        useBezierConnections: true,
+        bezierConnectionDirection: 'horizontal',
+        showConnectionArrows: true,
+        useBlocksAnchors: false,
+        blockComponents: {
+          'query-node': _QueryGraphCanvasBlock.QueryGraphCanvasBlock
+        }
+      }
+    }),
+    graph = _useGraph.graph,
+    api = _useGraph.api,
+    setEntities = _useGraph.setEntities,
+    start = _useGraph.start,
+    stop = _useGraph.stop;
+  var _useState9 = (0, _react.useState)(graph.cameraService.getCameraState().scale),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    scale = _useState0[0],
+    setScale = _useState0[1];
+  var _graph$cameraService$ = graph.cameraService.getCameraState(),
+    scaleMin = _graph$cameraService$.scaleMin,
+    scaleMax = _graph$cameraService$.scaleMax;
+  (0, _react2.useGraphEvent)(graph, 'camera-change', function (_ref6) {
+    var nextScale = _ref6.scale;
+    return setScale(nextScale);
+  });
+  (0, _react2.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);
+  });
+  (0, _react2.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);
+  });
+  (0, _react.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((0, _objectSpread2.default)((0, _objectSpread2.default)({}, colors), {}, {
+      canvas: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, colors.canvas), {}, {
+        belowLayerBackground: background,
+        layerBackground: background,
+        border: background,
+        dots: background
+      }),
+      connection: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, colors.connection), {}, {
+        background: connection
+      })
+    }));
+  }, [api, themeValue]);
+  var visibleConnections = (0, _react.useMemo)(function () {
+    return connections.map(function (connection) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, connection), {}, {
+        selected: Boolean(hoveredNodeId && (connection.sourceBlockId === hoveredNodeId || connection.targetBlockId === hoveredNodeId))
+      });
+    });
+  }, [connections, hoveredNodeId]);
+  (0, _react.useEffect)(function () {
+    return setEntities({
+      blocks: blocks,
+      connections: visibleConnections
+    });
+  }, [blocks, setEntities, visibleConnections]);
+  (0, _react.useEffect)(function () {
+    if (!attachedRef.current) return;
+    if (active) start();else stop();
+  }, [active, start, stop]);
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_QueryGraphPopup.QueryGraphPopup, {
+    node: selectedNode
+  }) : null;
+  var popupContent = null;
+  if (selectedNode) {
+    popupContent = renderNodePopup ? renderNodePopup({
+      node: selectedNode,
+      defaultContent: defaultContent
+    }) : defaultContent;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: rootRef,
+    className: block(null, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.GraphCanvas, {
+      graph: graph,
+      className: block('canvas'),
+      click: handleClick,
+      renderBlock: renderEmptyBlock,
+      onStateChanged: function onStateChanged(_ref0) {
+        var state = _ref0.state;
+        if (state === _graph.GraphState.ATTACHED) {
+          if (active) start();
+          attachedRef.current = true;
+          setAttached(true);
+        }
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: block('toolbox'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Tooltip, {
+        content: (0, _i18n.default)('action_zoom-in'),
+        placement: "right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          view: "raised",
+          pin: "round-brick",
+          "aria-label": (0, _i18n.default)('action_zoom-in'),
+          disabled: scale >= scaleMax,
+          onClick: function onClick() {
+            return changeZoom(graph, ZOOM_STEP);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+            data: _icons.MagnifierPlus
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Tooltip, {
+        content: (0, _i18n.default)('action_fit'),
+        placement: "right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          view: "raised",
+          pin: "brick-brick",
+          "aria-label": (0, _i18n.default)('action_fit'),
+          onClick: function onClick() {
+            return api.zoomToViewPort({
+              padding: FIT_PADDING
+            });
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+            data: _icons.SquareDashed
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Tooltip, {
+        content: (0, _i18n.default)('action_zoom-out'),
+        placement: "right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          view: "raised",
+          pin: "brick-round",
+          "aria-label": (0, _i18n.default)('action_zoom-out'),
+          disabled: scale <= scaleMin,
+          onClick: function onClick() {
+            return changeZoom(graph, -ZOOM_STEP);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+            data: _icons.MagnifierMinus
+          })
+        })
+      })]
+    }), popup && popupContent !== null && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
+    className: block(null, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: block('state'),
+      children: children
+    })
+  });
+}
+// #sourceMappingURL=QueryGraph.js.map