import { t as transform, s as select, e as event, z as zoom$1 } from "./zoom-d67a025a.es.js";
import Vue, { defineComponent } from "vue";
import { T as Typography, I as Icon, C as Container, a as Tag, n as normalizeComponent, c as createPopper } from "./index-d387159c.es.js";
import "moment";
import "v-tooltip";
import "@cldcvr/flow-aws-icon";
import "@cldcvr/flow-gcp-icon";
import "@cldcvr/flow-product-icon";
import "@cldcvr/flow-system-icon";
import "lodash-es";
import "vee-validate";
var render$1 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", {
    staticClass: "lineage-node-wrapper",
    style: _vm.styleObj,
    attrs: {
      "child": _vm.d.isChildNode,
      "type": _vm.d.type,
      "root": _vm.d.root,
      "xmlns": "http://www.w3.org/1999/xhtml"
    }
  }, [_c("Container", {
    attrs: {
      "gap": 4,
      "padding": 0,
      "align": "left stretch",
      "grow": 1
    }
  }, [_c("div", {
    staticClass: "node-i-wrapper node-icon"
  }, [_c("div", {
    staticClass: "node-icon-container"
  }, [_c("Icon", {
    attrs: {
      "name": _vm.d.icon ? _vm.d.icon : "i-table",
      "type": "filled",
      "size": "small",
      "effects": false
    }
  })], 1)]), _c("Container", {
    attrs: {
      "direction": "column",
      "align": "left top",
      "gap": 2,
      "padding": "0px 0px 0px 8px"
    }
  }, [_c("Container", {
    attrs: {
      "gap": 8,
      "padding": 0
    }
  }, [_vm.duplicateAlphabet ? _c("div", {
    staticClass: "duplicate-indicator"
  }, [_vm._v(" " + _vm._s(_vm.duplicateAlphabet) + " ")]) : _vm._e(), _c("Typography", {
    attrs: {
      "type": _vm.d.isChildNode ? "p2" : "p1",
      "color": "dark"
    }
  }, [_vm._v(" " + _vm._s(_vm.d.name) + " ")]), _c("div", {
    staticClass: "node-i-wrapper start"
  }, [_c("div", {
    staticClass: "node-icon-container"
  }, [_vm.d.state === "verified" ? _c("Icon", {
    attrs: {
      "size": "small",
      "name": "i-tick-double",
      "type": "filled"
    }
  }) : _vm._e()], 1)])], 1), _c("Typography", {
    attrs: {
      "type": "p2",
      "color": _vm.d.root ? "default" : "light",
      "overflow": "ellipsis"
    }
  }, [_vm._v(" " + _vm._s(_vm.d.description) + " ")])], 1), _vm.d.features ? _c("Container", {
    attrs: {
      "padding": 0,
      "gap": 12,
      "align": "right center",
      "grow": 1,
      "overflow": "auto"
    }
  }, _vm._l(_vm.d.features, function(f) {
    return _c("div", {
      key: f,
      staticClass: "node-i-wrapper start"
    }, [_c("div", {
      staticClass: "node-icon-container"
    }, [_c("Icon", {
      attrs: {
        "name": f,
        "type": "filled",
        "state": "primary",
        "size": "20px"
      }
    })], 1)]);
  }), 0) : _vm._e()], 1), _c("div", {
    staticClass: "node-i-wrapper end margin-lt-auto"
  }, [_c("div", {
    staticClass: "node-icon-container"
  }, [_vm.d.hasChildren ? _c("Icon", {
    staticClass: "toggle-child",
    attrs: {
      "name": _vm.d.childCollpsed ? "i-chevron-down" : "i-chevron-up",
      "type": "filled",
      "size": "x-small",
      "effects": !_vm.d.root
    }
  }) : _vm._e()], 1)]), _c("div", {
    staticClass: "node-info-wrapper"
  }, [_vm.tag ? _c("div", {
    staticClass: "node-i-wrapper start node-tag"
  }, [_c("div", {
    staticClass: "node-icon-container"
  }, [_c("Tag", {
    attrs: {
      "size": _vm.tag.size ? _vm.tag.size : "small",
      "background": _vm.tag.background,
      "color": _vm.tag.color
    }
  }, [_c("Typography", {
    attrs: {
      "type": "p3",
      "weight": "bold",
      "transform": "uppercase",
      "color": _vm.tag.color ? "inherit" : "black"
    }
  }, [_vm._v(" " + _vm._s(_vm.tag.text) + " ")])], 1)], 1)]) : _vm._e(), _vm.d.root ? _c("div", {
    staticClass: "node-i-wrapper start"
  }, [_c("div", {
    staticClass: "node-icon-container"
  }, [_c("Icon", {
    attrs: {
      "name": "i-location",
      "type": "filled",
      "state": "primary",
      "effects": false
    }
  })], 1)]) : _vm._e(), _vm.d.type === "disabled" ? _c("div", {
    staticClass: "node-i-wrapper start"
  }, [_c("div", {
    staticClass: "node-icon-container",
    staticStyle: {
      "height": "16px"
    }
  }, [_c("Icon", {
    attrs: {
      "name": "i-stop",
      "type": "filled",
      "size": "small",
      "effects": false
    }
  })], 1)]) : _vm._e(), _vm.subTag ? _c("div", {
    staticClass: "node-i-wrapper end"
  }, [_c("div", {
    staticClass: "node-icon-container"
  }, [_c("Tag", {
    staticClass: "margin-lt-auto",
    attrs: {
      "size": _vm.subTag.size ? _vm.subTag.size : "small",
      "background": _vm.subTag.background,
      "color": _vm.subTag.color
    }
  }, [_c("Typography", {
    attrs: {
      "type": "p3",
      "weight": "bold",
      "transform": "uppercase",
      "color": _vm.subTag.color ? "inherit" : "black"
    }
  }, [_vm._v(" " + _vm._s(_vm.subTag.text) + " ")])], 1)], 1)]) : _vm._e()])], 1);
};
var staticRenderFns$1 = [];
var Node_vue_vue_type_style_index_0_lang = "";
const __vue2_script$1 = defineComponent({
  name: "Node",
  components: {
    Typography,
    Icon,
    Container,
    Tag
  },
  props: {
    d: {
      type: Object,
      default: () => {
      }
    },
    dupnames: {
      type: Array,
      default: () => []
    },
    size: {
      type: Object,
      default: () => {
        return {
          width: 36,
          height: 36
        };
      }
    }
  },
  computed: {
    styleObj() {
      return {
        width: `${this.size.width}px`,
        height: `${this.size.height}px`
      };
    },
    tag() {
      if (this.d.tag && typeof this.d.tag === "string") {
        if (this.d.tag.toLowerCase() === "s") {
          return { text: this.d.tag, background: "var(--secondary-200)" };
        } else if (this.d.tag.toLowerCase() === "t") {
          return { text: this.d.tag, background: "var(--color6-100)" };
        } else if (this.d.tag.toLowerCase() === "d") {
          return { text: this.d.tag, background: "var(--color5-200)" };
        } else {
          return { text: this.d.tag, background: null };
        }
      } else if (this.d.tag && typeof this.d.tag === "object") {
        return this.d.tag;
      }
      return null;
    },
    subTag() {
      if (this.d.subTag && typeof this.d.subTag === "string") {
        return { text: this.d.subTag, background: "var(--color3-100)" };
      } else if (this.d.subTag && typeof this.d.subTag === "object") {
        return this.d.subTag;
      }
      return null;
    },
    duplicateAlphabet() {
      const allAlpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
      const idx = this.dupnames.indexOf(this.d.name);
      return idx === -1 ? null : allAlpha.charAt(idx);
    }
  }
});
const __cssModules$1 = {};
var __component__$1 = /* @__PURE__ */ normalizeComponent(
  __vue2_script$1,
  render$1,
  staticRenderFns$1,
  false,
  __vue2_injectStyles$1,
  null,
  null,
  null
);
function __vue2_injectStyles$1(context) {
  for (let o in __cssModules$1) {
    this[o] = __cssModules$1[o];
  }
}
var Node = /* @__PURE__ */ function() {
  return __component__$1.exports;
}();
function renderScrollbars() {
  const scrollableChilds = this.nodes.filter((n) => n.hasScrollbar && n.children);
  const scroll = this.container.selectAll("rect.scroll-track").data(scrollableChilds);
  scroll.enter().append("rect").attr("id", (d) => {
    return `${d.id}-scroll-track`;
  }).attr("class", "scroll-track").attr("visibility", "hidden").attr("x", (d) => {
    return d.x + this.nodeSize.width - 10;
  }).attr("y", (d) => {
    return d.y + this.nodeSize.height + 4;
  }).attr("rx", 8).attr("ry", 8).attr("width", 10).attr("height", (d) => {
    return d.max * (this.childNodeSize.height + 4) - 4;
  }).attr("stroke", "var(--dashboard-element)").attr("fill", "var(--dashboard-background)").attr("stroke-width", 1);
  scroll.enter().append("rect").attr("id", (d) => {
    return `${d.id}-scroll`;
  }).attr("class", "scroll").attr("visibility", "hidden").attr("rx", 8).attr("ry", 8).attr("x", (d) => {
    return d.x + this.nodeSize.width - 10;
  }).attr("y", (d) => {
    const baseY = d.y + this.nodeSize.height + 4;
    const totalHeight = d.max * (this.childNodeSize.height + 4) - 4;
    const singleNodeScrollH = totalHeight / d.children.length;
    return baseY + singleNodeScrollH * d.offset;
  }).attr("width", 10).attr("height", (d) => {
    const totalHeight = d.max * (this.childNodeSize.height + 4) - 4;
    return totalHeight * d.max / d.children.length;
  }).attr("fill", "var(--dashboard-element)");
  const paginationFooter = this.container.selectAll("rect.pagination-footer").data(scrollableChilds).enter().append("g").attr("id", (d) => {
    return `${d.id}-pagination-footer`;
  }).attr("class", "pagination-footer-wrapper");
  paginationFooter.append("rect").attr("id", (d) => {
    return `${d.id}-scroll`;
  }).attr("class", (d) => {
    let baseClass = "pagination-footer";
    if (d.offset !== d.children.length - d.max) {
      baseClass += " shadow";
    }
    return baseClass;
  }).attr("rx", 4).attr("ry", 4).attr("x", (d) => {
    return d.paginationFooter.x;
  }).attr("y", (d) => {
    return d.paginationFooter.y;
  }).attr("width", this.childNodeSize.width).attr("height", this.childNodeSize.height).attr("fill", "var(--dashboard-element)");
  paginationFooter.append("text").attr("class", "pagination-message").text((d) => {
    return `${d.offset + 1} - ${d.offset + d.max} of ${d.children.length}`;
  }).attr("x", (d) => {
    return d.paginationFooter.x + this.childNodeSize.width - 12;
  }).attr("y", (d) => {
    return d.paginationFooter.y + this.childNodeSize.height / 2;
  }).attr("dominant-baseline", "middle").attr("text-anchor", "end").attr("fill", "var(--dashboard-font-light)");
  paginationFooter.append("text").attr("class", "pagination-dots").text(() => {
    return "\xB7\xB7\xB7";
  }).attr("x", (d) => {
    return d.paginationFooter.x + 8;
  }).attr("y", (d) => {
    return d.paginationFooter.y + this.childNodeSize.height / 2;
  }).attr("dominant-baseline", "middle").attr("text-anchor", "start").attr("fill", "var(--dashboard-font-light)");
  paginationFooter.append("text").attr("class", "pagination-plus-more").text((d) => {
    const remaining = d.children.length - (d.offset + d.max);
    return remaining > 0 ? `+${remaining} More` : "";
  }).attr("x", (d) => {
    return d.paginationFooter.x + 36;
  }).attr("y", (d) => {
    return d.paginationFooter.y + this.childNodeSize.height / 2;
  }).attr("dominant-baseline", "middle").attr("text-anchor", "start").attr("fill", "var(--dashboard-font-light)");
}
function buildNodes(chartData) {
  const computedNodes = [];
  const [nodeWidth, nodeHeight] = [this.nodeSize.width, this.nodeSize.height];
  const cNodeHeight = this.childNodeSize.height;
  const [hSpace, vSpace] = [this.gap[0], this.gap[1]];
  const [chartWidth, chartHeight] = [this.size.width, this.size.height];
  const [centerX, centerY] = [chartWidth / 2, chartHeight / 2];
  chartData.root = true;
  if (chartData.offset === void 0) {
    const paginationObj = this.pagination();
    paginationObj.max = this.maxChildren;
    Object.setPrototypeOf(chartData, paginationObj);
  }
  const rootLevelNodes = [chartData];
  if (chartData.open === false && chartData.children) {
    chartData._children = chartData.children;
    chartData.children = null;
  }
  if (chartData.paginatedChild && chartData.paginatedChild.length > 0) {
    chartData.paginatedChild.forEach((child) => {
      child.parent = chartData;
      rootLevelNodes.push(child);
    });
  }
  const levels = {
    0: rootLevelNodes
  };
  if (chartData.to) {
    this.buildLevel(levels, chartData.to, 1);
  }
  if (chartData.from) {
    this.buildLevel(levels, chartData.from, -1);
  }
  for (const [level, nodes] of Object.entries(levels)) {
    const childNodes = nodes.filter((n) => n.parent ? true : false);
    const parentNodes = nodes.filter((n) => n.parent ? false : true);
    let childNodeHeight = 0;
    let parentNodeHeight = 0;
    if (childNodes) {
      childNodeHeight = (cNodeHeight + 4) * childNodes.length;
    }
    if (parentNodes) {
      parentNodeHeight = nodeHeight * parentNodes.length;
      parentNodeHeight += vSpace * (parentNodes.length - 1);
    }
    const levelHeight = childNodeHeight + parentNodeHeight;
    const start = {
      y: centerY - levelHeight / 2,
      x: centerX - nodeWidth / 2 + level * (hSpace + nodeWidth)
    };
    parentNodes.forEach((n) => {
      n.x = start.x;
      n.y = start.y;
      computedNodes.push(n);
      if (n.paginatedChild && n.paginatedChild.length > 0) {
        n.hasChildren = true;
        n.childCollpsed = false;
        n.hasScrollbar = false;
        if (n.children && n.paginatedChild.length < n.children.length) {
          n.hasScrollbar = true;
        }
        this.computeChilds(n, start, computedNodes);
        if (n.hasScrollbar) {
          start.y += cNodeHeight + 4;
          n.paginationFooter = { x: start.x, y: start.y };
        }
      } else if (n._children && n._children.length > 0) {
        n.hasChildren = true;
        n.childCollpsed = true;
      } else {
        n.hasChildren = false;
        n.childCollpsed = false;
      }
      if (n.paginatedChild && n.paginatedChild.length > 0) {
        start.y += cNodeHeight + vSpace;
      } else {
        start.y += nodeHeight + vSpace;
      }
    });
  }
  const dimention = computedNodes.reduce(
    (dim, n) => {
      if (dim.minX > n.x && n.x < 0) {
        dim.minX = n.x - 40;
      }
      if (dim.minY > n.y && n.y < 0) {
        dim.minY = n.y - 40;
      }
      if (dim.maxX < n.x + nodeWidth) {
        dim.maxX = n.x + nodeWidth;
      }
      if (dim.maxY < n.y + nodeHeight) {
        dim.maxY = n.y + nodeHeight;
      }
      return dim;
    },
    { minX: 0, maxX: centerX + nodeWidth, minY: 0, maxY: chartHeight }
  );
  this.viewBoxWidth = dimention.minX * -1 + dimention.maxX + 40;
  this.viewBoxHeight = dimention.minY * -1 + dimention.maxY + 100;
  if (this.viewBoxWidth > this.size.width || this.viewBoxHeight > this.size.height) {
    this.svg.attr(
      "viewBox",
      `${dimention.minX} ${dimention.minY} ${this.viewBoxWidth} ${this.viewBoxHeight}`
    );
  }
  const nodenames = computedNodes.filter((n) => !n.isChildNode).map(function(item) {
    return item.name;
  });
  this.dupnames = nodenames.filter(function(item, idx) {
    return nodenames.indexOf(item) != idx;
  });
  return computedNodes;
}
function toggleChildren(d) {
  if (d.children) {
    d.open = false;
    d._children = d.children;
    d.children = null;
    this.init(true);
  } else {
    d.open = true;
    d.children = d._children;
    d._children = null;
    this.init(true);
  }
}
function computeChilds(n, start, computedNodes) {
  n.paginatedChild.forEach((c, cidx) => {
    if (cidx === 0) {
      start.y += this.nodeSize.height + 4;
    } else {
      start.y += this.childNodeSize.height + 4;
    }
    c.x = start.x;
    c.y = start.y;
    c.isChildNode = true;
    computedNodes.push(c);
  });
}
function buildLevel(levels, nodes, idx = 0) {
  nodes.forEach((node) => {
    if (!levels[idx]) {
      levels[idx] = [];
    }
    if (node.offset === void 0) {
      const paginationObj = this.pagination();
      paginationObj.max = this.maxChildren;
      Object.setPrototypeOf(node, paginationObj);
    }
    levels[idx].push(node);
    if (node.paginatedChild && node.paginatedChild.length > 0) {
      node.paginatedChild.forEach((child) => {
        child.parent = node;
        levels[idx].push(child);
      });
    }
    if (node.open === false && node.children) {
      node._children = node.children;
      node.children = null;
    }
    if (node.to) {
      this.buildLevel(levels, node.to, idx + 1);
    }
    if (node.from) {
      this.buildLevel(levels, node.from, idx - 1);
    }
  });
}
function highlightPath(d, nodes) {
  document.querySelectorAll(".lineage-highlight").forEach((el) => {
    el.classList.remove("lineage-highlight");
  });
  document.querySelectorAll(".node,.link,.link-arrow,.pagination-footer-wrapper").forEach((el) => {
    el.classList.add("lineage-lowlight");
  });
  const highlightFrom = (id) => {
    const nodeInDom = document.querySelector(`#${id}`);
    if (nodeInDom) {
      nodeInDom.classList.remove("lineage-lowlight");
    }
    const paginationBarInDom = document.querySelector(`#${id}-pagination-footer`);
    if (paginationBarInDom) {
      paginationBarInDom.classList.remove("lineage-lowlight");
    }
    const childs = document.querySelectorAll(`.child-node-${id}`);
    if (childs) {
      childs.forEach((el) => {
        el.classList.remove("lineage-lowlight");
      });
    }
    document.querySelectorAll(`[id^="${id}->"]`).forEach((el) => {
      el.classList.add("lineage-highlight");
      el.classList.remove("lineage-lowlight");
      const fromid = el.getAttribute("id").split("->")[1];
      highlightFrom(fromid);
    });
  };
  const highlightTo = (id) => {
    const nodeInDom = document.querySelector(`#${id}`);
    if (nodeInDom) {
      nodeInDom.classList.remove("lineage-lowlight");
    }
    const paginationBarInDom = document.querySelector(`#${id}-pagination-footer`);
    if (paginationBarInDom) {
      paginationBarInDom.classList.remove("lineage-lowlight");
    }
    const childs = document.querySelectorAll(`.child-node-${id}`);
    if (childs) {
      childs.forEach((el) => {
        el.classList.remove("lineage-lowlight");
      });
    }
    document.querySelectorAll(`[id$="->${id}"],[id$="->${id}~arrow"]`).forEach((el) => {
      el.classList.add("lineage-highlight");
      el.classList.remove("lineage-lowlight");
      const fromid = el.getAttribute("id").split("->")[0];
      highlightTo(fromid);
    });
  };
  const nodesToHighlight = nodes.filter((n) => n.name === d.name);
  if (nodesToHighlight) {
    nodesToHighlight.forEach((n) => {
      highlightFrom(n.id);
      highlightTo(n.id);
    });
  }
}
function removeHighlight() {
  document.querySelectorAll(".lineage-highlight").forEach((el) => {
    el.classList.remove("lineage-highlight");
  });
  document.querySelectorAll(".lineage-lowlight").forEach((el) => {
    el.classList.remove("lineage-lowlight");
  });
}
function renderLinks(container) {
  const links = this.buildLinks(this.nodes);
  const link = container.selectAll("path.link").data(links, function(d) {
    return d.id;
  });
  link.enter().append("path", "g").attr("class", "link").attr("d", (d) => {
    return this.diagonal(d.source, d.target);
  }).attr("stroke", function(d) {
    if (d.linkType === "source") {
      return "var(--color2-100)";
    }
    if (d.linkType === "transfrom") {
      return "var(--color6-100)";
    }
    if (d.linkType === "hidden") {
      return "transparent";
    }
    return "var(--dashboard-font-light)";
  }).attr("stroke-width", function(d) {
    if (d.linkType === "source") {
      return 4;
    }
    if (d.linkType === "transfrom") {
      return 4;
    }
    return 2;
  }).attr("stroke-dasharray", function(d) {
    return d.linkType === "dashed" ? 6 : 0;
  }).attr("id", function(d) {
    return d.id;
  }).attr("fill", "none").attr("marker-start", function(d) {
    if (d.linkType === "hidden") {
      return null;
    }
    return "url(#dot)";
  }).attr("marker-end", function(d) {
    if (d.linkType === "hidden") {
      return null;
    }
    return "url(#dot)";
  }).on("click", (d) => {
    this.$emit("link-click", d);
  });
  container.selectAll("text.marker").data(links).enter().append("text").attr("class", "link-arrow").attr("id", function(d) {
    return `${d.id}~arrow`;
  }).attr("stroke", "var(--dashboard-background)").attr("stroke-width", 1).attr("dy", 8.5).append("textPath").attr("text-anchor", "middle").attr("xlink:href", function(d) {
    return `#${d.id}`;
  }).attr("startOffset", "50%").attr("fill", "var(--dashboard-font-light)").text(function(d) {
    if (d.linkType === "hidden") {
      return null;
    }
    return "\u25B6";
  }).on("click", (d) => {
    this.$emit("link-click", d);
  });
}
function buildLinks(nodes) {
  const links = [];
  nodes.forEach((node) => {
    if (node.from) {
      node.from.forEach((source) => {
        const src = nodes.find((n) => n.id === source.id);
        if (src) {
          links.push({
            source: src,
            target: node,
            linkType: source.linkType ? source.linkType : "default",
            id: `${src.id}->${node.id}`
          });
        }
      });
    }
    if (node.to) {
      node.to.forEach((target) => {
        const trg = nodes.find((n) => n.id === target.id);
        if (trg) {
          links.push({
            source: node,
            target: trg,
            linkType: target.linkType ? target.linkType : "default",
            id: `${node.id}->${trg.id}`
          });
        }
      });
    }
  });
  const extraLinks = getExtraLinks(this.root);
  extraLinks.forEach((link) => {
    const from = nodes.find((n) => n.id === link.from.id);
    const to = nodes.find((n) => n.id === link.to.id);
    if (from && to) {
      links.push({
        source: from,
        target: to,
        linkType: link.linkType ? link.linkType : "default",
        id: `${from.id}->${to.id}`
      });
    } else if (from) {
      const target = getAletrnateHiddenNode(this.root, nodes, link, "to");
      if (target) {
        links.push({
          source: from,
          target,
          linkType: link.linkType ? link.linkType : "default",
          id: `${from.id}->${target.id}`
        });
      }
    } else if (to) {
      const source = getAletrnateHiddenNode(this.root, nodes, link, "from");
      if (source) {
        links.push({
          source,
          target: to,
          linkType: link.linkType ? link.linkType : "default",
          id: `${source.id}->${to.id}`
        });
      }
    } else {
      const source = getAletrnateHiddenNode(this.root, nodes, link, "from");
      const target = getAletrnateHiddenNode(this.root, nodes, link, "to");
      if (source && target) {
        links.push({
          source,
          target,
          linkType: link.linkType ? link.linkType : "default",
          id: `${source.id}->${target.id}`
        });
      }
    }
  });
  return links;
}
function getAletrnateHiddenNode(root, nodes, link, linkDirection) {
  const meta = getNodeMeta(root, link[linkDirection].id);
  if (meta) {
    const src = nodes.find((n) => n.id === meta.parentId);
    if (src) {
      if (src.offset && src.offset > meta.index) {
        return src;
      } else {
        return { ...src.paginationFooter, isChildNode: true };
      }
    }
  }
}
function getExtraLinks(node) {
  const links = [];
  if (node.from) {
    node.from.forEach((from) => {
      links.push(...getExtraLinks(from));
    });
  }
  if (node.to) {
    node.to.forEach((to) => {
      links.push(...getExtraLinks(to));
    });
  }
  if (node.children) {
    node.children.forEach((c) => {
      links.push(...getExtraLinks(c));
    });
  }
  if (node.links) {
    if (node.links.from) {
      node.links.from.forEach((from) => {
        links.push({ from, to: node, linkType: from.linkType });
      });
    }
    if (node.links.to) {
      node.links.to.forEach((to) => {
        links.push({ from: node, to, linkType: to.linkType });
      });
    }
  }
  return links;
}
function getNodeMeta(node, id) {
  const index = isYourChild(node, id);
  if (index > -1) {
    return { parentId: node.id, index };
  } else {
    if (node.from) {
      for (let i = 0; i < node.from.length; i++) {
        const meta = getNodeMeta(node.from[i], id);
        if (meta && meta.index > -1) {
          return meta;
        }
      }
    }
    if (node.to) {
      for (let i = 0; i < node.to.length; i++) {
        const meta = getNodeMeta(node.to[i], id);
        if (meta && meta.index > -1) {
          return meta;
        }
      }
    }
    return null;
  }
}
function isYourChild(node, childid) {
  if (node.hasChildren && node.children) {
    return node.children.findIndex((c) => c.id === childid);
  } else {
    return void 0;
  }
}
function diagonal(s, d) {
  const xoffset = this.nodeSize.width + 4;
  const yoffset = this.nodeSize.height / 2;
  const cxoffset = this.childNodeSize.width + 4;
  const cyoffset = this.childNodeSize.height / 2;
  const sx = s.x + (s.isChildNode ? cxoffset : xoffset);
  const sy = s.y + (s.isChildNode ? cyoffset : yoffset);
  const dy = d.y + (d.isChildNode ? cyoffset : yoffset);
  const dx = d.x - 4;
  const path = `M ${sx} ${sy}
				      C ${(sx + dx) / 2} ${sy},
				        ${(sx + dx) / 2} ${dy},
				        ${dx} ${dy}`;
  return path;
}
function reset() {
  if (this.container) {
    const t = transform(this.container.node());
    t.k = 1;
    t.x = 0;
    t.y = 0;
    this.zoomContainer(t);
    this.enableReset = false;
  }
}
function zoomIn() {
  if (this.container) {
    const t = transform(this.container.node());
    t.k += 0.1;
    if (t.k > 4) {
      t.k = 4;
    }
    this.zoomContainer(t);
  }
}
function zoomOut() {
  if (this.container) {
    const t = transform(this.container.node());
    t.k -= 0.1;
    if (t.k < 0.3) {
      t.k = 0.3;
    }
    this.zoomContainer(t);
  }
}
function zoomContainer(transform2) {
  this.enableReset = true;
  this.container.attr("transform", transform2);
  if (this.isSafari()) {
    document.querySelectorAll(".lineage-node-wrapper .node-icon-container").forEach((elem) => {
      const scale = transform2.k;
      elem.style.transform = `scale(${scale}) `;
      elem.style["transform-origin"] = "0% 0% 0px";
    });
  }
}
var zoom = {
  reset,
  zoomIn,
  zoomOut,
  zoomContainer
};
var render = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", {
    ref: "lineage-container",
    staticClass: "flow-lineage-container"
  }, [_c("div", {
    staticClass: "flow-lineage-header"
  }, [_vm._t("header")], 2), _c("div", {
    ref: "lineage",
    staticClass: "flow-lineage-chart",
    attrs: {
      "id": _vm.id
    }
  }), _c("div", {
    ref: "lineage-popover"
  }, [_vm.popoverDataNode.id ? _vm._t("popover", null, {
    "d": _vm.popoverDataNode,
    "close": _vm.togglePopOver
  }) : _vm._e()], 2), _c("div", {
    staticClass: "node-lineage-overlay",
    attrs: {
      "open": _vm.overlay
    },
    on: {
      "click": function($event) {
        $event.stopPropagation();
        return _vm.togglePopOver($event);
      }
    }
  })]);
};
var staticRenderFns = [];
var Lineage_vue_vue_type_style_index_0_lang = "";
const __vue2_script = defineComponent({
  name: "Lineage",
  components: {
    Node
  },
  props: {
    nodeSize: {
      type: Object,
      default: () => {
        return {
          width: 300,
          height: 50
        };
      }
    },
    childNodeSize: {
      type: Object,
      default: () => {
        return {
          width: 300,
          height: 36
        };
      }
    },
    gap: {
      type: Array,
      default: () => [150, 50]
    },
    maxChildren: {
      type: Number,
      default: 6
    },
    root: {
      type: Object,
      default: () => {
      }
    },
    highlightPathOn: {
      type: String,
      default: "click",
      validator(value) {
        return ["click", "hover"].includes(value);
      }
    }
  },
  data() {
    return {
      id: "lineageChart",
      size: {
        width: 1500,
        height: 800
      },
      nodeComponent: null,
      container: null,
      highlightedNodeId: null,
      overlay: false,
      popoverDataNode: {},
      pagination: () => {
        return {
          offset: 0,
          max: 6,
          get paginatedChild() {
            if (this.children && this.children.length <= this.max) {
              return this.children;
            } else {
              if (this.children && this.offset >= this.children.length) {
                this.offset -= this.max;
              }
              if (this.offset < 0) {
                this.offset = 0;
              }
              if (this.children && this.children.length - this.offset < this.max) {
                this.offset = this.children.length - this.max;
              }
              return this.children ? this.children.slice(this.offset, this.offset + this.max) : [];
            }
          }
        };
      }
    };
  },
  watch: {
    root: {
      handler: "init",
      deep: true
    },
    gap: {
      handler: "init",
      deep: true
    },
    nodeSize: {
      handler: "init",
      deep: true
    }
  },
  mounted() {
    this.init();
    window.addEventListener("resize", () => {
      this.init();
    });
  },
  beforeMount() {
    this.id = this.generateId();
    this.nodeComponent = Vue.extend(Node);
  },
  methods: {
    renderScrollbars,
    buildNodes,
    highlightPath,
    renderLinks,
    buildLinks,
    removeHighlight,
    ...zoom,
    diagonal,
    toggleChildren,
    computeChilds,
    buildLevel,
    initializeContainer() {
      this.size.width = this.$refs.lineage.offsetWidth;
      this.size.height = this.$refs.lineage.offsetHeight;
      const margin = { top: 0, right: 0, bottom: 0, left: 0 };
      const width = this.size.width - margin.left - margin.right;
      const height = this.size.height - margin.top - margin.bottom;
      const wrapper = document.getElementById(this.id);
      wrapper.innerHTML = "";
      this.svg = select(`#${this.id}`).append("svg").attr("class", "lineage-svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).on("click", () => {
        if (event.target.classList.contains("lineage-svg")) {
          this.removeHighlight();
          this.togglePopOver();
        }
      });
      const container = this.svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
      this.svg.call(
        zoom$1().scaleExtent([0.3, 4]).on("zoom", () => {
          this.zoomContainer(event.transform);
          if (event.sourceEvent.type === "mousemove" && this.isSafari()) {
            const t = transform(this.container.node());
            t.k += 1e-4;
            this.zoomContainer(t);
          }
        })
      ).on("dblclick.zoom", null);
      return container;
    },
    init(update = false) {
      let container = null;
      if (update && this.container) {
        container = this.container;
      } else {
        container = this.initializeContainer();
        this.container = container;
      }
      this.nodes = this.buildNodes(this.root);
      container.selectAll("*").remove();
      container.append("svg:defs").append("svg:marker").attr("id", "dot").attr("viewBox", "0 0 8 8").attr("refX", 4).attr("refY", 4).attr("markerWidth", 4).attr("markerHeight", 4).attr("orient", "auto").append("svg:circle").attr("fill", "var(--dashboard-font-light)").attr("r", 4).attr("cx", 4).attr("cy", 4);
      this.renderLinks(container);
      let i = 0;
      const node = container.selectAll("g.node").data(this.nodes, function(d) {
        return d.id || (d.id = ++i);
      });
      const nodeEnter = node.enter().append("g").attr("class", (d) => {
        let c = "node c-node";
        if (d.isChildNode) {
          c += ` child-node-${d.parent.id}`;
        }
        return c;
      }).attr("id", function(d) {
        return d.id;
      }).attr("transform", (d) => {
        return `translate(${d.x},${d.y})`;
      }).on("click", (d) => {
        const isToggle = event.target.closest("div.toggle-child") ? true : false;
        if (isToggle) {
          this.toggleChildren(d);
        } else {
          this.$emit("node-click", d);
          if (this.highlightPathOn === "click") {
            if (d.id !== this.highlightedNodeId) {
              this.highlightedNodeId = d.id;
              this.highlightPath(d, this.nodes);
            } else {
              this.highlightedNodeId = null;
              this.removeHighlight();
            }
          }
        }
      }).on("wheel", (d) => {
        event.stopPropagation();
        event.preventDefault();
        if (d.parent) {
          if (event.deltaY > 0) {
            d.parent.offset += 1;
          } else {
            d.parent.offset -= 1;
          }
          this.init(true);
        } else {
          console.log("null parent");
        }
      }).on("mouseover", (d) => {
        if (this.highlightPathOn === "hover") {
          this.highlightedNodeId = d.id;
          this.highlightPath(d, this.nodes);
        }
        if (d.parent && d.parent.hasScrollbar) {
          select(`#${d.parent.id}-scroll-track`).attr("visibility", "visible");
          select(`#${d.parent.id}-scroll`).attr("visibility", "visible");
        }
      }).on("mouseleave", (d) => {
        if (this.highlightPathOn === "hover") {
          this.highlightedNodeId = null;
          this.removeHighlight();
        }
        if (d.parent && d.parent.hasScrollbar) {
          select(`#${d.parent.id}-scroll-track`).attr("visibility", "hidden");
          select(`#${d.parent.id}-scroll`).attr("visibility", "hidden");
        }
      }).on("contextmenu", (d) => {
        this.handleRightClick(d);
      });
      nodeEnter.append("foreignObject").attr("width", (d) => {
        if (d.isChildNode) {
          return this.childNodeSize.width;
        }
        return this.nodeSize.width;
      }).attr("height", (d) => {
        if (d.isChildNode) {
          return this.childNodeSize.height;
        }
        return this.nodeSize.height;
      }).html((d) => {
        let size = { ...this.nodeSize };
        if (d.isChildNode) {
          size = { ...this.childNodeSize };
        }
        const propsData = { d, size, dupnames: this.dupnames };
        const nodeInstance = new this.nodeComponent({
          propsData
        });
        return nodeInstance.$mount().$el.outerHTML;
      });
      this.renderScrollbars();
      if ((this.viewBoxWidth > this.size.width || this.viewBoxHeight > this.size.height) && this.isSafari()) {
        const sc = this.size.width / this.viewBoxWidth;
        this.scaleForSafari = sc;
        document.querySelectorAll(".lineage-node-wrapper .node-icon-container > *").forEach((elem) => {
          elem.style.transform = ` scale(${sc}) `;
          elem.style["transform-origin"] = "0% 0% 0px";
        });
        const t = transform(this.container.node());
        this.zoomContainer(t);
        this.svg.dispatch("click");
      }
    },
    handleRightClick(d) {
      event.stopPropagation();
      event.preventDefault();
      this.togglePopOver(d);
    },
    togglePopOver(d = {}) {
      document.querySelectorAll("[popover-for]").forEach((el) => {
        el.style.display = "none";
      });
      const target = document.querySelector(`#${d.id}`);
      const content = this.$refs["lineage-popover"];
      if (content) {
        content.style.display = "block";
      }
      if (target && content && this.currentPopper == null) {
        this.popoverDataNode = d;
        this.$emit("node-right-click", d);
        this.overlay = true;
        this.currentPopper = createPopper(target, content, {
          placement: "auto-end",
          strategy: "fixed"
        });
      } else {
        this.popoverDataNode = {};
        this.overlay = false;
        if (this.currentPopper) {
          this.currentPopper.destroy();
          this.currentPopper = null;
        }
        if (content) {
          content.style.display = "none";
        }
      }
    },
    isSafari() {
      return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
    generateId() {
      let id = "";
      const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      const charsLength = chars.length;
      for (let i = 0; i < 10; i++) {
        id += chars.charAt(Math.floor(Math.random() * charsLength));
      }
      return id;
    }
  }
});
const __cssModules = {};
var __component__ = /* @__PURE__ */ normalizeComponent(
  __vue2_script,
  render,
  staticRenderFns,
  false,
  __vue2_injectStyles,
  null,
  null,
  null
);
function __vue2_injectStyles(context) {
  for (let o in __cssModules) {
    this[o] = __cssModules[o];
  }
}
var Lineage = /* @__PURE__ */ function() {
  return __component__.exports;
}();
export { Lineage as default };
//# sourceMappingURL=Lineage-08b74b65.es.js.map
