@netdata/charts/dist/components/line/overlays/annotation/index.js

Netdata frontend SDK and chart utilities

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _icon = _interopRequireWildcard(require("../../../icon"));
var _provider = require("../../../provider");
var _tooltip = _interopRequireDefault(require("../../../tooltip"));
var _netdataUi = require("@netdata/netdata-ui");
var _chevron_expand = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/chevron_expand.svg"));
var _universe = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/universe.svg"));
var _correlations = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/correlations.svg"));
var _pencil_outline = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/pencil_outline.svg"));
var _trashcan = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/trashcan.svg"));
var _x = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/x.svg"));
var _check = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/check.svg"));
var _copy = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/copy.svg"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _useHover = require("../../../useHover");
var _highlight = require("../highlight");
var _colorPicker = require("./colorPicker");
var _makeLog = _interopRequireDefault(require("../../../../sdk/makeLog"));
var _form = _interopRequireDefault(require("./form"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof Symbol ? Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return Object.defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = Object.getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l); function g(t) { ["next", "throw", "return"].forEach(function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var hoverTolerance = 5;
var debounceDelay = 1000;
var timeWindow = 300;
var hasActiveSyncs = function hasActiveSyncs(chart, id) {
  var allCharts = chart.getApplicableNodes({});
  return allCharts.some(function (targetChart) {
    if (targetChart.getId() === chart.getId()) return false;
    var overlays = targetChart.getAttribute("overlays");
    return Object.keys(overlays).some(function (overlayId) {
      return overlayId.startsWith("synced_".concat(id, "_from_").concat(chart.getId()));
    });
  });
};
var UniverseButton = (0, _styledComponents["default"])(_icon.Button).withConfig({
  displayName: "annotation__UniverseButton",
  componentId: "sc-1d7hwjx-0"
})(["svg{fill:", ";}"], function (_ref) {
  var theme = _ref.theme,
    $state = _ref.$state;
  if ($state === "global") return theme.colors.primary;
  if ($state === "temp") return theme.colors.warning;
  return theme.colors.textDescription;
});
var StyledAnnotation = (0, _styledComponents["default"])(_netdataUi.Flex).attrs(function (_ref2) {
  var isSynced = _ref2.isSynced;
  return {
    justifyContent: "center",
    alignItems: "center",
    gap: 2,
    height: "50px",
    alignSelf: "center",
    round: true,
    width: {
      min: "120px"
    },
    padding: [1, 2],
    border: {
      side: "all",
      color: isSynced ? "borderPrimary" : "borderSecondary"
    },
    background: "mainBackground",
    backgroundOpacity: isSynced ? 0.6 : 0.8,
    zIndex: 20
  };
}).withConfig({
  displayName: "annotation__StyledAnnotation",
  componentId: "sc-1d7hwjx-1"
})(["", ""], function (_ref3) {
  var isSynced = _ref3.isSynced;
  return isSynced && "\n    opacity: 0.75;\n    border-style: dashed;\n  ";
});
var AnnotationContent = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
  var annotation = _ref4.annotation;
  var chart = (0, _provider.useChart)();
  var text = annotation.text,
    timestamp = annotation.timestamp,
    author = annotation.author,
    color = annotation.color,
    priority = annotation.priority;
  var priorityInfo = _colorPicker.annotationPriorities.find(function (p) {
    return p.color === color || p.name === priority;
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
    alignItems: "center",
    gap: 1,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        width: "8px",
        height: "8px",
        borderRadius: "50%",
        backgroundColor: color || "#0075F2",
        flexShrink: 0
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      column: true,
      gap: [0.5],
      title: text,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        strong: true,
        color: "textLite",
        ellipsis: true,
        children: text
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
        color: "textLite",
        children: [chart.formatDate(timestamp * 1000), " \u2022 ", chart.formatTime(timestamp * 1000), " ", priorityInfo && "\u2022 ".concat(priorityInfo.label), " ", author && "\u2022 ".concat(author)]
      })]
    })]
  });
});
var AnnotationEditForm = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
  var annotation = _ref5.annotation,
    onSave = _ref5.onSave,
    onCancel = _ref5.onCancel;
  var handleSave = function handleSave(formData) {
    onSave(_objectSpread(_objectSpread({}, annotation), formData));
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_form["default"], {
    initialText: annotation.text,
    initialColor: annotation.color || "#0075F2",
    initialPriority: annotation.priority || "info",
    onSave: handleSave,
    onCancel: onCancel,
    autoFocus: true
  });
});
var AnnotationActions = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
  var id = _ref6.id,
    annotation = _ref6.annotation,
    onEdit = _ref6.onEdit;
  var chart = (0, _provider.useChart)();
  var hasCorrelation = (0, _provider.useAttributeValue)("hasCorrelation");
  var _useState = (0, _react.useState)(false),
    _useState2 = _slicedToArray(_useState, 2),
    showDeleteConfirm = _useState2[0],
    setShowDeleteConfirm = _useState2[1];
  var _useState3 = (0, _react.useState)(null),
    _useState4 = _slicedToArray(_useState3, 2),
    clickTimeout = _useState4[0],
    setClickTimeout = _useState4[1];
  var isSynced = !!annotation.originallyFrom;
  var isGlobal = !!annotation.isGlobal;
  var isTemp = isSynced && !isGlobal;
  var isRoot = !isSynced && !isGlobal;
  var isRootWithSyncs = isRoot && hasActiveSyncs(chart, id);
  var handleClearTemp = function handleClearTemp() {
    if (isTemp && annotation.originallyFrom) {
      var allCharts = chart.getApplicableNodes({});
      var sourceChart = allCharts.find(function (c) {
        return c.getId() === annotation.originallyFrom;
      });
      if (sourceChart) {
        chart.sdk.trigger("clearSyncedAnnotations", sourceChart);
      }
    } else {
      chart.sdk.trigger("clearSyncedAnnotations", chart);
    }
  };
  var handleMakeGlobal = function handleMakeGlobal() {
    var globalAnnotation = _objectSpread(_objectSpread({}, annotation), {}, {
      isGlobal: true,
      entity: "global"
    });
    (0, _makeLog["default"])(chart)({
      event: "annotation_made_global",
      annotationId: id
    });
    chart.trigger("annotationUpdate", id, globalAnnotation);
    chart.sdk.trigger("annotationUpdate", chart, id, globalAnnotation);
  };
  var handleMakeChartSpecific = function handleMakeChartSpecific() {
    var contextScope = chart.getAttribute("contextScope");
    var chartEntity = chart.getAttribute("isHead") ? chart.getAttribute("id") : contextScope.join(",");
    var chartSpecificAnnotation = _objectSpread(_objectSpread({}, annotation), {}, {
      isGlobal: false,
      entity: chartEntity
    });
    (0, _makeLog["default"])(chart)({
      event: "annotation_made_chart_specific",
      annotationId: id
    });
    chart.trigger("annotationUpdate", id, chartSpecificAnnotation);
    chart.sdk.trigger("annotationUpdate", chart, id, chartSpecificAnnotation);
    chart.sdk.trigger("clearAnnotationFromOtherCharts", chart, id);
  };
  var handleSyncClick = function handleSyncClick() {
    if (clickTimeout) {
      clearTimeout(clickTimeout);
      setClickTimeout(null);
      if (isGlobal) {
        handleMakeChartSpecific();
      } else {
        handleMakeGlobal();
      }
    } else {
      var timeout = setTimeout(function () {
        setClickTimeout(null);
        if (isGlobal) {
          // Global: single click does nothing (stay global)
        } else if (isTemp || isRootWithSyncs) {
          handleClearTemp();
        } else {
          chart.sdk.trigger("syncAnnotation", chart, id, annotation);
        }
      }, 300);
      setClickTimeout(timeout);
    }
  };
  var handleCorrelation = function handleCorrelation() {
    var range = [annotation.timestamp - timeWindow / 2, annotation.timestamp + timeWindow / 2];
    chart.sdk.trigger("correlation", chart, range);
  };
  var handleEdit = function handleEdit() {
    onEdit();
  };
  var handleDelete = function handleDelete() {
    setShowDeleteConfirm(true);
  };
  var handleGoToChart = function handleGoToChart() {
    chart.sdk.trigger("goToLink", chart, annotation.originallyFrom);
  };
  var handleRemoveSync = function handleRemoveSync() {
    var overlays = chart.getAttribute("overlays");
    // eslint-disable-next-line no-unused-vars
    var removed = overlays[id],
      remainingOverlays = _objectWithoutProperties(overlays, [id].map(_toPropertyKey));
    chart.updateAttribute("overlays", remainingOverlays);
  };
  var handleCopyUrl = /*#__PURE__*/function () {
    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return navigator.clipboard.writeText(window.location.href);
          case 3:
            (0, _makeLog["default"])(chart)({
              event: "annotation_url_copied",
              annotationId: id
            });
            _context.next = 9;
            break;
          case 6:
            _context.prev = 6;
            _context.t0 = _context["catch"](0);
            (0, _makeLog["default"])(chart)({
              event: "annotation_url_copy_failed",
              annotationId: id
            });
          case 9:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 6]]);
    }));
    return function handleCopyUrl() {
      return _ref7.apply(this, arguments);
    };
  }();
  var confirmDelete = function confirmDelete() {
    // Log annotation deletion for debugging
    (0, _makeLog["default"])(chart)({
      event: isSynced ? "annotation_sync_removed" : "annotation_deleted",
      annotationId: id
    });
    if (isSynced) {
      handleRemoveSync();
    } else {
      chart.trigger("annotationDelete", id, annotation);
      chart.sdk.trigger("annotationDelete", chart, id, annotation);
    }
    setShowDeleteConfirm(false);
  };
  var cancelDelete = function cancelDelete() {
    setShowDeleteConfirm(false);
  };
  if (showDeleteConfirm) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      gap: 1,
      alignItems: "center",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextMicro, {
        color: "textLite",
        children: isSynced ? "Remove from this chart?" : "Are you sure?"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _check["default"],
          size: "16px"
        }),
        onClick: confirmDelete,
        "data-testid": "annotation-delete-confirm",
        "data-track": chart.track("annotation-delete-confirm-".concat(isSynced ? "synced" : "local"))
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _x["default"],
          size: "16px"
        }),
        onClick: cancelDelete,
        "data-testid": "annotation-delete-cancel",
        "data-track": chart.track("annotation-delete-cancel")
      })]
    });
  }
  if (isSynced) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      gap: 1,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Go to source chart",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
            svg: _chevron_expand["default"],
            size: "16px"
          }),
          onClick: handleGoToChart,
          "data-testid": "annotation-goto-chart",
          "data-track": chart.track("annotation-goto-source-chart")
        })
      }), hasCorrelation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Run metrics correlation at this point",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
            svg: _correlations["default"],
            size: "16px"
          }),
          onClick: handleCorrelation,
          "data-testid": "annotation-correlation",
          "data-track": chart.track("annotation-correlation")
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Copy URL to annotation",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
            svg: _copy["default"],
            size: "16px"
          }),
          onClick: handleCopyUrl,
          "data-testid": "annotation-copy-url",
          "data-track": chart.track("annotation-copy-url")
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Remove annotation sync",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
            svg: _trashcan["default"],
            size: "16px"
          }),
          onClick: handleDelete,
          "data-testid": "annotation-remove-sync",
          "data-track": chart.track("annotation-remove-sync")
        })
      })]
    });
  }
  var getTooltipContent = function getTooltipContent() {
    if (isGlobal) return "Global annotation • Double-click to make chart-specific";
    if (isTemp) return "Temporarily synced • Click: remove sync • Double-click: make global";
    if (isRootWithSyncs) return "Temporarily synced • Click: remove sync • Double-click: make global";
    return "Click: sync temporarily • Double-click: make global";
  };
  var getButtonState = function getButtonState() {
    if (isGlobal) return "global";
    if (isTemp) return "temp";
    if (isRootWithSyncs) return "temp";
    return "context";
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
    gap: 1,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
      content: getTooltipContent(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(UniverseButton, {
        $state: getButtonState(),
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _universe["default"],
          size: "16px"
        }),
        onClick: handleSyncClick,
        "data-testid": "annotation-".concat(getButtonState()),
        "data-track": chart.track("annotation-".concat(getButtonState(), "-action"))
      })
    }), hasCorrelation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
      content: "Run metrics correlation at this point",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _correlations["default"],
          size: "16px"
        }),
        onClick: handleCorrelation,
        "data-testid": "annotation-correlation",
        "data-track": chart.track("annotation-correlation")
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
      content: "Copy URL to annotation",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _copy["default"],
          size: "16px"
        }),
        onClick: handleCopyUrl,
        "data-testid": "annotation-copy-url",
        "data-track": chart.track("annotation-copy-url")
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
      content: "Edit annotation",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _pencil_outline["default"],
          size: "16px"
        }),
        onClick: handleEdit,
        "data-testid": "annotation-edit",
        "data-track": chart.track("annotation-edit")
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
      content: "Delete annotation",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
          svg: _trashcan["default"],
          size: "16px"
        }),
        onClick: handleDelete,
        "data-testid": "annotation-delete",
        "data-track": chart.track("annotation-delete")
      })
    })]
  });
});
var Annotation = function Annotation(_ref8) {
  var id = _ref8.id;
  var chart = (0, _provider.useChart)();
  var overlays = (0, _provider.useAttributeValue)("overlays");
  var _useHovered = (0, _useHover.useHovered)({}, [id, overlays]),
    _useHovered2 = _slicedToArray(_useHovered, 2),
    ref = _useHovered2[0],
    popoverHovered = _useHovered2[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = _slicedToArray(_useState5, 2),
    mouseHovered = _useState6[0],
    setMouseHovered = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = _slicedToArray(_useState7, 2),
    debouncedHovered = _useState8[0],
    setDebouncedHovered = _useState8[1];
  var _useState9 = (0, _react.useState)(false),
    _useState10 = _slicedToArray(_useState9, 2),
    isEditing = _useState10[0],
    setIsEditing = _useState10[1];
  var annotation = overlays[id];
  var isSynced = !!(annotation !== null && annotation !== void 0 && annotation.originallyFrom);
  (0, _react.useEffect)(function () {
    if (!annotation || !annotation.timestamp || !chart || chart.getAttribute("chartLibrary") !== "dygraph") return;
    var chartUI = chart.getUI();
    if (!chartUI) return;
    var dygraph = chartUI.getDygraph();
    if (!dygraph) return;
    var handleMouseMove = function handleMouseMove(event) {
      var canvas = dygraph.canvas_;
      var rect = canvas.getBoundingClientRect();
      var offsetX = event.clientX - rect.left;
      var annotationX = dygraph.toDomXCoord(annotation.timestamp * 1000);
      var isNearAnnotation = Math.abs(offsetX - annotationX) < hoverTolerance;
      setMouseHovered(isNearAnnotation);
    };
    var canvas = dygraph.canvas_;
    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("mouseleave", function () {
      return setMouseHovered(false);
    });
    return function () {
      canvas.removeEventListener("mousemove", handleMouseMove);
      canvas.removeEventListener("mouseleave", function () {
        return setMouseHovered(false);
      });
    };
  }, [annotation, annotation === null || annotation === void 0 ? void 0 : annotation.timestamp, chart, id]);
  (0, _react.useEffect)(function () {
    var hovered = mouseHovered || popoverHovered;
    if (hovered) {
      setDebouncedHovered(true);
    } else {
      var timeout = setTimeout(function () {
        return setDebouncedHovered(false);
      }, debounceDelay);
      return function () {
        return clearTimeout(timeout);
      };
    }
  }, [mouseHovered, popoverHovered]);
  if (!annotation || annotation.type !== "annotation") return null;
  var handleEdit = function handleEdit() {
    return setIsEditing(true);
  };
  var handleSave = function handleSave(updatedAnnotation) {
    // Log annotation edit for debugging
    (0, _makeLog["default"])(chart)({
      event: "annotation_updated",
      annotationId: id
    });
    chart.trigger("annotationUpdate", id, updatedAnnotation);
    chart.sdk.trigger("annotationUpdate", chart, id, updatedAnnotation);
    setIsEditing(false);
  };
  var handleCancelEdit = function handleCancelEdit() {
    setIsEditing(false);
  };
  var isHovered = mouseHovered || popoverHovered || debouncedHovered;
  if (!isHovered) return null;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAnnotation, {
    ref: ref,
    isSynced: isSynced,
    "data-track": chart.track("annotation-hover-".concat(isSynced ? "synced" : "local")),
    children: isEditing && !isSynced ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnnotationEditForm, {
      annotation: annotation,
      onSave: handleSave,
      onCancel: handleCancelEdit
    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnnotationContent, {
        annotation: annotation
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_highlight.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnnotationActions, {
        id: id,
        annotation: annotation,
        onEdit: handleEdit
      })]
    })
  });
};
var _default = exports["default"] = Annotation;