"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Controls = Controls;
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _react = _interopRequireWildcard(require("react"));
var _common = require("@kbn/kibana-react-plugin/common");
var _use_apm_plugin_context = require("../../../context/apm_plugin/use_apm_plugin_context");
var _use_theme = require("../../../hooks/use_theme");
var _apm_link = require("../../shared/links/apm/apm_link");
var _use_url_params = require("../../../context/url_params_context/use_url_params");
var _cytoscape = require("./cytoscape");
var _cytoscape_options = require("./cytoscape_options");
var _use_apm_params = require("../../../hooks/use_apm_params");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const ControlsContainer = (0, _common.euiStyled)('div')`
  left: ${({
  theme
}) => theme.eui.euiSize};
  position: absolute;
  top: ${({
  theme
}) => theme.eui.euiSizeS};
  z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */
`;
const Button = (0, _common.euiStyled)(_eui.EuiButtonIcon)`
  display: block;
  margin: ${({
  theme
}) => theme.eui.euiSizeXS};
`;
const ZoomInButton = (0, _common.euiStyled)(Button)`
  margin-bottom: ${({
  theme
}) => theme.eui.euiSizeS};
`;
const Panel = (0, _common.euiStyled)(_eui.EuiPanel)`
  margin-bottom: ${({
  theme
}) => theme.eui.euiSizeS};
`;
const steps = 5;
function doZoom(cy, increment, duration) {
  if (cy) {
    const level = cy.zoom() + increment;
    // @ts-expect-error `.position()` _does_ work on a NodeCollection. It returns the position of the first element in the collection.
    const primaryCenter = cy.nodes('.primary').position();
    const {
      x1,
      y1,
      w,
      h
    } = cy.nodes().boundingBox({});
    const graphCenter = {
      x: x1 + w / 2,
      y: y1 + h / 2
    };
    cy.animate({
      duration,
      zoom: {
        level,
        position: primaryCenter || graphCenter
      }
    });
  }
}
function useDebugDownloadUrl(cy) {
  const [downloadUrl, setDownloadUrl] = (0, _react.useState)(undefined);
  const debug = sessionStorage.getItem('apm_debug') === 'true';

  // Handle elements changes to update the download URL
  (0, _react.useEffect)(() => {
    const elementsHandler = event => {
      var _event$cy$json;
      // @ts-expect-error The `true` argument to `cy.json` is to flatten the elements
      // (instead of having them broken into nodes/edges.) DefinitelyTyped has
      // this wrong.
      const elementsJson = (_event$cy$json = event.cy.json(true)) === null || _event$cy$json === void 0 ? void 0 : _event$cy$json.elements.map(element => ({
        data: element.data
      }));
      setDownloadUrl(elementsJson.length > 0 && debug ? `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify({
        elements: elementsJson
      }, null, '  '))}` : undefined);
    };
    if (cy) {
      cy.on('add remove', elementsHandler);
    }
    return () => {
      if (cy) {
        cy.off('add remove', undefined, elementsHandler);
      }
    };
  }, [cy, debug]);
  return downloadUrl;
}
function Controls() {
  const {
    core
  } = (0, _use_apm_plugin_context.useApmPluginContext)();
  const {
    basePath
  } = core.http;
  const theme = (0, _use_theme.useTheme)();
  const cy = (0, _react.useContext)(_cytoscape.CytoscapeContext);
  const {
    urlParams
  } = (0, _use_url_params.useLegacyUrlParams)();
  const {
    query: {
      kuery
    }
  } = (0, _use_apm_params.useAnyOfApmParams)('/service-map', '/services/{serviceName}/service-map', '/mobile-services/{serviceName}/service-map');
  const [zoom, setZoom] = (0, _react.useState)(cy && cy.zoom() || 1);
  const duration = parseInt(theme.eui.euiAnimSpeedFast, 10);
  const downloadUrl = useDebugDownloadUrl(cy);
  const viewFullMapUrl = (0, _apm_link.getLegacyApmHref)({
    basePath,
    path: '/service-map',
    search: `kuery=${encodeURIComponent(kuery)}`,
    query: urlParams
  });

  // Handle zoom events
  (0, _react.useEffect)(() => {
    const zoomHandler = event => {
      setZoom(event.cy.zoom());
    };
    if (cy) {
      cy.on('zoom', zoomHandler);
    }
    return () => {
      if (cy) {
        cy.off('zoom', undefined, zoomHandler);
      }
    };
  }, [cy]);
  function center() {
    if (cy) {
      const eles = cy.nodes();
      cy.animate({
        ...(0, _cytoscape_options.getAnimationOptions)(theme),
        center: {
          eles
        },
        fit: {
          eles,
          padding: (0, _cytoscape_options.getNodeHeight)(theme)
        }
      });
    }
  }
  function zoomIn() {
    doZoom(cy, increment, duration);
  }
  function zoomOut() {
    doZoom(cy, -increment, duration);
  }
  if (!cy) {
    return null;
  }
  const maxZoom = cy.maxZoom();
  const isMaxZoom = zoom === maxZoom;
  const minZoom = cy.minZoom();
  const isMinZoom = zoom === minZoom;
  const increment = (maxZoom - minZoom) / steps;
  const centerLabel = _i18n.i18n.translate('xpack.apm.serviceMap.center', {
    defaultMessage: 'Center'
  });
  const downloadLabel = _i18n.i18n.translate('xpack.apm.serviceMap.download', {
    defaultMessage: 'Download'
  });
  const viewFullMapLabel = _i18n.i18n.translate('xpack.apm.serviceMap.viewFullMap', {
    defaultMessage: 'View full service map'
  });
  const zoomInLabel = _i18n.i18n.translate('xpack.apm.serviceMap.zoomIn', {
    defaultMessage: 'Zoom in'
  });
  const zoomOutLabel = _i18n.i18n.translate('xpack.apm.serviceMap.zoomOut', {
    defaultMessage: 'Zoom out'
  });
  const showViewFullMapButton = cy.nodes('.primary').length > 0;
  return /*#__PURE__*/_react.default.createElement(ControlsContainer, null, /*#__PURE__*/_react.default.createElement(Panel, {
    hasShadow: true,
    paddingSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    anchorClassName: "eui-displayInline",
    content: zoomInLabel
  }, /*#__PURE__*/_react.default.createElement(ZoomInButton, {
    "aria-label": zoomInLabel,
    color: "text",
    disabled: isMaxZoom,
    iconType: "plusInCircleFilled",
    onClick: zoomIn
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    anchorClassName: "eui-displayInline",
    content: zoomOutLabel
  }, /*#__PURE__*/_react.default.createElement(Button, {
    "aria-label": zoomOutLabel,
    color: "text",
    disabled: isMinZoom,
    iconType: "minusInCircleFilled",
    onClick: zoomOut
  }))), /*#__PURE__*/_react.default.createElement(Panel, {
    hasShadow: true,
    paddingSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    anchorClassName: "eui-displayInline",
    content: centerLabel
  }, /*#__PURE__*/_react.default.createElement(Button, {
    "aria-label": centerLabel,
    color: "text",
    iconType: "crosshairs",
    onClick: center
  }))), showViewFullMapButton && /*#__PURE__*/_react.default.createElement(Panel, {
    hasShadow: true,
    paddingSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    anchorClassName: "eui-displayInline",
    content: viewFullMapLabel
  }, /*#__PURE__*/_react.default.createElement(Button, {
    "aria-label": viewFullMapLabel,
    color: "text",
    "data-test-subj": "viewFullMapButton",
    href: viewFullMapUrl,
    iconType: "apps"
  }))), downloadUrl && /*#__PURE__*/_react.default.createElement(Panel, {
    hasShadow: true,
    paddingSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    anchorClassName: "eui-displayInline",
    content: downloadLabel
  }, /*#__PURE__*/_react.default.createElement(Button, {
    "aria-label": downloadLabel,
    color: "text",
    download: "service-map.json",
    href: downloadUrl,
    iconType: "download"
  }))));
}