@gravity-ui/querieskit 1.5.1 → 1.6.0

package/build/esm/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/esm/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/esm/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/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