@capillarytech/blaze-ui 5.23.3-beta.3 → 5.23.3-beta.4

package/CapDnDGraph/index.js

@@ -1,39 +1,40 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { Layout } from '@antv/layout';
-import { Graph, Markup } from '@antv/x6';
-import '@antv/x6-react-shape';
-import cloneDeep from 'lodash/cloneDeep';
-import debounce from 'lodash/debounce';
-import isEmpty from 'lodash/isEmpty';
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { useDrop } from 'react-dnd';
-import { createRoot } from 'react-dom/client'; // REACT-18 Upgrade: import ReactDOM from 'react-dom' (React 16);
-import { IntlProvider } from 'react-intl';
-import CapBorderedBox from "../CapBorderedBox";
-import CapIconsSidebar from "../CapDndGraphSidebar";
-import CapHeading from "../CapHeading";
-import CapIcon from "../CapIcon";
-import CapLabel from "../CapLabel";
-import CapModal from "../CapModal";
-import CapNotification from "../CapNotification";
-import CapRow from "../CapRow";
-import CapTooltip from "../CapTooltip";
-import LocaleHoc from "../LocaleHoc";
-import { CAP_G06, CAP_PRIMARY } from "../styles/_variables";
-import { CUSTOM_EDGE, CUSTOM_EDGE_DASHED, GRAPH_DIRECTION, GRAPH_LAYOUT_TYPE, GRAPH_ALIGNMENT, ENTRY_TRIGGER, EXIT_TRIGGER, WAIT_TILL_EVENT, DECISION_SPLIT, EMPTY_GRAPH_TEXT, PLACEHOLDER_NODE, END_NODE, BLOCK_NODE, SETTINGS, DELETE, VIEW, SOURCE_COORDINATES, SCHEDULE_BLOCK, JOIN, JUMP, JOIN_NOTIFICATION_STYLE, EDIT, IN_PROGRESS } from "./constants";
-import GraphBlockNode from "./GraphBlockNode";
-import "./styles.scss";
-import { recursivelyDeleteNodes, computeJoinGraphNodesData, updateJoinOrJoinedGraphNodeProp, getCombinedNanoId } from "./utils";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var CapDndGraph = props => {
-  var _graphRef$current;
-  var {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Layout } from "@antv/layout";
+import { Graph, Markup } from "@antv/x6";
+import "@antv/x6-react-shape";
+import cloneDeep from "lodash/cloneDeep";
+import debounce from "lodash/debounce";
+import isEmpty from "lodash/isEmpty";
+import PropTypes from "prop-types";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { useDrop } from "react-dnd";
+import { createRoot } from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import CapBorderedBox from "../CapBorderedBox/index.js";
+import CapIconsSidebar from "../CapDndGraphSidebar/index.js";
+import CapHeadingWithStatic from "../CapHeading/index.js";
+import CapIcon from "../CapIcon/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
+import CapModalWithHoc from "../CapModal/index.js";
+import CapNotification from "../CapNotification/index.js";
+import CapRow from "../CapRow/index.js";
+import CapTooltip from "../CapTooltip/index.js";
+import LocaleHoc from "../LocaleHoc/index.js";
+import { CAP_G06, CAP_PRIMARY } from "../styles/_variables.js";
+import { ENTRY_TRIGGER, EXIT_TRIGGER, END_NODE, PLACEHOLDER_NODE, EMPTY_GRAPH_TEXT, SCHEDULE_BLOCK, CUSTOM_EDGE_DASHED, CUSTOM_EDGE, GRAPH_ALIGNMENT, GRAPH_DIRECTION, GRAPH_LAYOUT_TYPE, BLOCK_NODE, JOIN, JUMP, WAIT_TILL_EVENT, JOIN_NOTIFICATION_STYLE, DECISION_SPLIT, DELETE, SETTINGS, VIEW, EDIT, SOURCE_COORDINATES, IN_PROGRESS } from "./constants.js";
+import GraphBlockNode from "./GraphBlockNode.js";
+import './styles.css';/* empty css            */
+import { getCombinedNanoId, recursivelyDeleteNodes, updateJoinOrJoinedGraphNodeProp, computeJoinGraphNodesData } from "./utils.js";
+const CapDndGraph = (props) => {
+  var _a;
+  const {
     sidebarProps = {},
     dndGraphId,
     onClickConfigure,
-    deleteNodesFromMeta = () => {},
-    onDropNewNode = () => {},
+    deleteNodesFromMeta = () => {
+    },
+    onDropNewNode = () => {
+    },
     graphNodes,
     setGraphNodes,
     nodeTitleMapping,
@@ -60,63 +61,75 @@ var CapDndGraph = props => {
     chartDataStatus,
     KpisMappingBlock
   } = props;
-  var graphRef = useRef(null);
-  var dagreLayoutRef = useRef(null);
-  var previouslyFoundEdge = useRef(-1);
-  var edgesData = useRef([]);
-  var graphContainerPositionStart = useRef(null);
-  var unEditableMode = viewMode || testMode;
-  var endIconProps = {
-    type: 'end',
+  const graphRef = useRef(null);
+  const dagreLayoutRef = useRef(null);
+  const previouslyFoundEdge = useRef(-1);
+  const edgesData = useRef([]);
+  const graphContainerPositionStart = useRef(null);
+  const unEditableMode = viewMode || testMode;
+  const endIconProps = {
+    type: "end",
     style: {
       color: CAP_PRIMARY.base,
-      padding: '9px 0'
+      padding: "9px 0"
     },
-    textLabel: /*#__PURE__*/_jsx(CapLabel, {
-      type: "label2",
-      className: "margin-l-2",
-      children: endText
-    })
+    textLabel: /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label2", className: "margin-l-2", children: endText })
   };
-  var [graphData, setGraphData] = useState({
+  const [graphData, setGraphData] = useState({
     nodes: [],
     edges: []
   });
-  var [showConfirmationModal, setShowConfirmationModal] = useState(false);
-  var [blockId, setBlockId] = useState(null);
-  var blockNodes = useMemo(() => graphNodes.filter(node => ![ENTRY_TRIGGER, EXIT_TRIGGER, END_NODE, PLACEHOLDER_NODE, EMPTY_GRAPH_TEXT, SCHEDULE_BLOCK].includes(node == null ? void 0 : node.type)), [graphNodes]);
-
-  /* Register Custom Edges
-  Currently two types of custom edges are supported,
-  Normal line and dashed line*/
-  var registerEdges = useCallback(() => {
-    Graph.registerEdge(CUSTOM_EDGE_DASHED, {
-      zIndex: -1,
-      attrs: {
-        line: {
-          stroke: CAP_G06,
-          strokeWidth: 1,
-          sourceMarker: null,
-          targetMarker: null,
-          strokeDasharray: '3, 3'
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const [blockId, setBlockId] = useState(null);
+  const blockNodes = useMemo(
+    () => graphNodes.filter(
+      (node) => ![
+        ENTRY_TRIGGER,
+        EXIT_TRIGGER,
+        END_NODE,
+        PLACEHOLDER_NODE,
+        EMPTY_GRAPH_TEXT,
+        SCHEDULE_BLOCK
+      ].includes(node == null ? void 0 : node.type)
+    ),
+    [graphNodes]
+  );
+  const registerEdges = useCallback(() => {
+    Graph.registerEdge(
+      CUSTOM_EDGE_DASHED,
+      {
+        zIndex: -1,
+        attrs: {
+          line: {
+            stroke: CAP_G06,
+            strokeWidth: 1,
+            sourceMarker: null,
+            targetMarker: null,
+            strokeDasharray: "3, 3"
+          }
         }
-      }
-    }, true);
-    Graph.registerEdge(CUSTOM_EDGE, {
-      zIndex: -1,
-      attrs: {
-        line: {
-          fill: 'none',
-          strokeLinejoin: 'round',
-          strokeWidth: 1,
-          stroke: CAP_G06,
-          sourceMarker: null,
-          targetMarker: null
+      },
+      true
+    );
+    Graph.registerEdge(
+      CUSTOM_EDGE,
+      {
+        zIndex: -1,
+        attrs: {
+          line: {
+            fill: "none",
+            strokeLinejoin: "round",
+            strokeWidth: 1,
+            stroke: CAP_G06,
+            sourceMarker: null,
+            targetMarker: null
+          }
         }
-      }
-    }, true);
+      },
+      true
+    );
   }, []);
-  var initializeGraphAndLayout = useCallback((testMode, reportMode) => {
+  const initializeGraphAndLayout = useCallback((testMode2, reportMode2) => {
     graphRef.current = new Graph({
       container: document.getElementById(dndGraphId),
       connecting: {
@@ -130,26 +143,21 @@ var CapDndGraph = props => {
         enabled: true,
         pannable: false
       },
-      onEdgeLabelRendered: args => {
-        var {
-          selectors,
-          label
-        } = args;
-        var content = createRoot(selectors.foContent); // REACT-18 Upgrade
+      onEdgeLabelRendered: (args) => {
+        const { selectors, label } = args;
+        const content = createRoot(selectors.foContent);
         if (content && label.text) {
           content.render(
-          /*#__PURE__*/
-          /**Will be replaced by Label component passed as prop */
-          _jsx(CapLabel.CapLabelInline, {
-            type: "label1",
-            className: testMode ? 'cap-graph-test-mode custom-dnd-class' : 'custom-dnd-class',
-            children: /*#__PURE__*/_jsx(CapTooltip, {
-              children: /*#__PURE__*/_jsx("div", {
-                className: "truncate-text",
-                children: label.text
-              })
-            })
-          }));
+            /**Will be replaced by Label component passed as prop */
+            /* @__PURE__ */ jsx(
+              CapLabelWithStatic.CapLabelInline,
+              {
+                type: "label1",
+                className: testMode2 ? "cap-graph-test-mode custom-dnd-class" : "custom-dnd-class",
+                children: /* @__PURE__ */ jsx(CapTooltip, { children: /* @__PURE__ */ jsx("div", { className: "truncate-text", children: label.text }) })
+              }
+            )
+          );
         }
       }
     });
@@ -160,172 +168,141 @@ var CapDndGraph = props => {
       // LR
       align: GRAPH_ALIGNMENT,
       // UL
-      nodesepFunc: node => {
+      nodesepFunc: (node) => {
         if (node.type === ENTRY_TRIGGER) {
-          return reportMode ? 200 : 42;
+          return reportMode2 ? 200 : 42;
         }
-        //vertical gap between nodes
-        return reportMode ? 190 : 15;
+        return reportMode2 ? 190 : 15;
       },
-      ranksepFunc: node => {
+      ranksepFunc: (node) => {
         if (node.type === ENTRY_TRIGGER) {
-          /**Gap between the Entry Trigger and First child */
-          return reportMode ? 120 : 150;
+          return reportMode2 ? 120 : 150;
         }
-        /**Horizontal Gap between other nodes */
-        return reportMode ? 170 : 35;
+        return reportMode2 ? 170 : 35;
       }
     });
   }, []);
-
-  /* Function to prepare data to pass to the graph instance */
-  var prepareGraphNodeEdges = useCallback((reportMode, processChartData, chartDataStatus) => {
-    var commonProps = reportMode ? {
-      chartDataStatus,
-      reportMode,
-      KpisMappingBlock: KpisMappingBlock
-    } : {};
-    var graphNodesData = [];
-    var graphEdges = [];
-    var edgeType = blockNodes.length ? CUSTOM_EDGE : CUSTOM_EDGE_DASHED;
-    var size = 42 + (reportMode ? 10 : 0);
-    /**Distance is calculated by converting the position 1 to absolute value
-     * getDifference return the value that needs to be reduced from absolute value
-     * To create aligned path info distance
-     */
-    var getDifference = index => {
-      switch (index) {
-        case 0:
-          return 2.5;
-        case 1:
-          return 2;
-        default:
-          return index * 1;
-      }
-    };
-    var filteredNodes = reportMode ? graphNodes == null ? void 0 : graphNodes.filter(node => node.type !== SCHEDULE_BLOCK) : graphNodes;
-    filteredNodes == null || filteredNodes.forEach(node => {
-      var _processChartData$2;
-      if ((node == null ? void 0 : node.type) === END_NODE && reportMode) {
-        var _processChartData$;
-        node.props = _extends({}, node == null ? void 0 : node.props, {
-          textLabel: /*#__PURE__*/_jsx(CapLabel, {
-            type: "label2",
-            className: "margin-l-2",
-            children: (processChartData == null || (_processChartData$ = processChartData[0]) == null || (_processChartData$ = _processChartData$[node == null ? void 0 : node.id]) == null || (_processChartData$ = _processChartData$.engagementMetrics) == null ? void 0 : _processChartData$.common) || 0
-          })
+  const prepareGraphNodeEdges = useCallback(
+    (reportMode2, processChartData2, chartDataStatus2) => {
+      const commonProps = reportMode2 ? { chartDataStatus: chartDataStatus2, reportMode: reportMode2, KpisMappingBlock } : {};
+      const graphNodesData = [];
+      let graphEdges = [];
+      const edgeType = blockNodes.length ? CUSTOM_EDGE : CUSTOM_EDGE_DASHED;
+      const size = 42 + (reportMode2 ? 10 : 0);
+      const getDifference = (index2) => {
+        switch (index2) {
+          case 0:
+            return 2.5;
+          case 1:
+            return 2;
+          default:
+            return index2 * 1;
+        }
+      };
+      const filteredNodes = reportMode2 ? graphNodes == null ? void 0 : graphNodes.filter((node) => node.type !== SCHEDULE_BLOCK) : graphNodes;
+      filteredNodes == null ? void 0 : filteredNodes.forEach((node) => {
+        var _a2, _b, _c, _d;
+        if ((node == null ? void 0 : node.type) === END_NODE && reportMode2) {
+          node.props = {
+            ...node == null ? void 0 : node.props,
+            textLabel: /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label2", className: "margin-l-2", children: ((_c = (_b = (_a2 = processChartData2 == null ? void 0 : processChartData2[0]) == null ? void 0 : _a2[node == null ? void 0 : node.id]) == null ? void 0 : _b.engagementMetrics) == null ? void 0 : _c.common) || 0 })
+          };
+        }
+        const Component = node == null ? void 0 : node.component;
+        graphNodesData.push({
+          id: node.id,
+          component: /* @__PURE__ */ jsx(IntlProvider, { locale: intl.locale, messages: intl.messages, children: /* @__PURE__ */ jsx(
+            Component,
+            {
+              ...node == null ? void 0 : node.props,
+              ...commonProps,
+              onClickActionIcon,
+              width: (node == null ? void 0 : node.width) || size,
+              height: (node == null ? void 0 : node.height) || size,
+              processChartData: (_d = processChartData2 == null ? void 0 : processChartData2[0]) == null ? void 0 : _d[node == null ? void 0 : node.id]
+            }
+          ) }),
+          width: node.width || size,
+          height: node.height || size,
+          shape: "react-shape",
+          zIndex: 2,
+          type: node.type
         });
-      }
-      var Component = node == null ? void 0 : node.component; // Passed from parent
-      graphNodesData.push({
-        id: node.id,
-        component: /*#__PURE__*/_jsx(IntlProvider, {
-          locale: intl.locale,
-          messages: intl.messages,
-          children: /*#__PURE__*/_jsx(Component, _extends({}, node == null ? void 0 : node.props, commonProps, {
-            onClickActionIcon: onClickActionIcon,
-            width: (node == null ? void 0 : node.width) || size,
-            height: (node == null ? void 0 : node.height) || size,
-            processChartData: processChartData == null || (_processChartData$2 = processChartData[0]) == null ? void 0 : _processChartData$2[node == null ? void 0 : node.id]
-          }))
-        }),
-        width: node.width || size,
-        height: node.height || size,
-        shape: 'react-shape',
-        zIndex: 2,
-        type: node.type
-      });
-      if (node.showEdge !== false) {
-        //  We do not show edges for two nodes, Exit trigger and Graph Text
-        (node.to || []).forEach((toNodeId, index) => {
-          var _node$pathsInfo;
-          var {
-            previewComponent: PreviewContainer,
-            previewProps
-          } = (node == null || (_node$pathsInfo = node.pathsInfo) == null ? void 0 : _node$pathsInfo[toNodeId]) || {};
-          graphEdges.push({
-            source: node.id,
-            target: toNodeId,
-            zIndex: 1,
-            shape: node.toType === PLACEHOLDER_NODE && node.placeholderToIndex === index ? CUSTOM_EDGE_DASHED : edgeType,
-            defaultLabel: {
-              markup: Markup.getForeignObjectMarkup(),
-              attrs: {
-                fo: {
-                  width: 120,
-                  height: 30,
-                  x: -85 - getDifference(index),
-                  y: -10
+        if (node.showEdge !== false) {
+          (node.to || []).forEach((toNodeId, index2) => {
+            var _a3;
+            const { previewComponent: PreviewContainer, previewProps } = ((_a3 = node == null ? void 0 : node.pathsInfo) == null ? void 0 : _a3[toNodeId]) || {};
+            graphEdges.push({
+              source: node.id,
+              target: toNodeId,
+              zIndex: 1,
+              shape: node.toType === PLACEHOLDER_NODE && node.placeholderToIndex === index2 ? CUSTOM_EDGE_DASHED : edgeType,
+              defaultLabel: {
+                markup: Markup.getForeignObjectMarkup(),
+                attrs: {
+                  fo: {
+                    width: 120,
+                    height: 30,
+                    x: -85 - getDifference(index2),
+                    y: -10
+                  }
                 }
+              },
+              label: {
+                position: 1,
+                text: PreviewContainer && /* @__PURE__ */ jsx(IntlProvider, { locale: intl.locale, messages: intl.messages, children: /* @__PURE__ */ jsx(PreviewContainer, { ...previewProps }) })
               }
-            },
-            label: {
-              position: 1,
-              text: PreviewContainer && /*#__PURE__*/_jsx(IntlProvider, {
-                locale: intl.locale,
-                messages: intl.messages,
-                children: /*#__PURE__*/_jsx(PreviewContainer, _extends({}, previewProps))
-              })
-            }
+            });
           });
+        }
+      });
+      if (unEditableMode) {
+        graphEdges = graphEdges.map((graphEdge) => {
+          var _a2, _b, _c;
+          const edge = cloneDeep(graphEdge);
+          const { target } = edge;
+          const targetNode = graphNodes.find((node) => node.id === target);
+          if (!isEmpty((_a2 = targetNode == null ? void 0 : targetNode.props) == null ? void 0 : _a2.userHistoryProps)) {
+            const attrs = {
+              line: {
+                stroke: (_c = (_b = targetNode == null ? void 0 : targetNode.props) == null ? void 0 : _b.userHistoryProps) == null ? void 0 : _c.color,
+                strokeWidth: 2
+              }
+            };
+            edge.attrs = attrs;
+            edge.zIndex = 2;
+          }
+          return edge;
         });
       }
-    });
-
-    /**Update the graphEdges with appropriate color if viewMode and userHistoryProps */
-    if (unEditableMode) {
-      graphEdges = graphEdges.map(graphEdge => {
-        var _targetNode$props;
-        var edge = cloneDeep(graphEdge);
-        var {
-          target
-        } = edge;
-        var targetNode = graphNodes.find(node => node.id === target);
-        if (!isEmpty(targetNode == null || (_targetNode$props = targetNode.props) == null ? void 0 : _targetNode$props.userHistoryProps)) {
-          var _targetNode$props2;
-          var attrs = {
-            line: {
-              stroke: targetNode == null || (_targetNode$props2 = targetNode.props) == null || (_targetNode$props2 = _targetNode$props2.userHistoryProps) == null ? void 0 : _targetNode$props2.color,
-              strokeWidth: 2
-            }
-          };
-          edge.attrs = attrs;
-          edge.zIndex = 2;
-        }
-        return edge;
+      setGraphData({
+        nodes: graphNodesData,
+        edges: graphEdges
       });
-    }
-    setGraphData({
-      nodes: graphNodesData,
-      edges: graphEdges
-    });
-  }, [graphNodes]);
-
-  // Pass nodes and Edges data to graph
-  var layout = () => {
+    },
+    [graphNodes]
+  );
+  const layout = () => {
     if (graphData.nodes.length) {
-      var model = dagreLayoutRef.current.layout({
+      const model = dagreLayoutRef.current.layout({
         nodes: graphData.nodes,
         edges: graphData.edges
       });
       graphRef.current.fromJSON(model);
     }
   };
-
-  // Set the vertices to edges so that, edges shows with 90 degree angel
-  var setEdgeVertices = () => {
-    if (!graphRef.current) return; // Do nothing if graph is not initialized yet
-    var sourcePosition = null;
-    var edges = graphRef.current.getEdges();
-    edges.forEach(edge => {
-      var source = edge.getSourceNode() || {};
-      var target = edge.getTargetNode() || {};
-      var sourceNode = graphNodes.find(node => node.id === source.id) || {};
+  const setEdgeVertices = () => {
+    if (!graphRef.current) return;
+    let sourcePosition = null;
+    const edges = graphRef.current.getEdges();
+    edges.forEach((edge) => {
+      const source = edge.getSourceNode() || {};
+      const target = edge.getTargetNode() || {};
+      const sourceNode = graphNodes.find((node) => node.id === source.id) || {};
       if (sourceNode.type === ENTRY_TRIGGER && source.getBBox && target.getBBox) {
-        var sourceBBox = source.getBBox();
-        var targetBBox = target.getBBox();
+        const sourceBBox = source.getBBox();
+        const targetBBox = target.getBBox();
         if (!sourcePosition || targetBBox.center.y < sourcePosition.y) {
-          // Sets the top most node's center.y as sourcePosition.y
           sourcePosition = {
             x: sourceBBox.topRight.x,
             y: reportMode ? targetBBox.y : targetBBox.center.y
@@ -333,97 +310,58 @@ var CapDndGraph = props => {
         }
       }
     });
-
-    /** Added fixed x and y co ordinates in case of error in above flow
-     * Position of the source node is fixed, which makes the first node position fixed as well
-     * Below value is the generated value. In case if there is an error in the flow setting source position
-     * This value will be used as fallback
-     */
     if (!sourcePosition) sourcePosition = SOURCE_COORDINATES;
-    edges.forEach(edge => {
-      var source = edge.getSourceNode() || {};
-      var target = edge.getTargetNode() || {};
+    edges.forEach((edge) => {
+      const source = edge.getSourceNode() || {};
+      const target = edge.getTargetNode() || {};
       if (source.getBBox && target.getBBox) {
-        var sourceBBox = source.getBBox();
-        var targetBBox = target.getBBox();
-        var sourceNode = graphNodes.find(node => node.id === source.id) || {};
-        /* By default, edges start from the middle of the node,
-        but for Exit Trigger, we need to start the edge from the top
-        custom logic to place the edge source based on the Entry trigger vertices
-        */
+        const sourceBBox = source.getBBox();
+        const targetBBox = target.getBBox();
+        const sourceNode = graphNodes.find((node) => node.id === source.id) || {};
         if (sourceNode.type === ENTRY_TRIGGER) {
           edge.setSource({
             x: sourcePosition.x,
             y: sourcePosition.y + (reportMode ? 25 : 0)
           });
         }
-
-        /* Logic to show the edges with 90 degree angle instead of straight edge lines,
-        logic taken from ant v x6 examples: https://x6.antv.vision/en/examples/showcase/practices#orgchart
-        */
         if (sourceNode.type !== ENTRY_TRIGGER) {
-          if ((GRAPH_DIRECTION === 'LR' || GRAPH_DIRECTION === 'RL') && sourceBBox.y !== targetBBox.y) {
-            var fix = GRAPH_DIRECTION === 'LR' ? sourceBBox.width : 0;
-            var x = sourceBBox.x + fix / 2;
+          if (sourceBBox.y !== targetBBox.y) {
+            const fix = sourceBBox.width;
+            const x = sourceBBox.x + fix / 2;
             edge.setVertices([
-            // { x, y: sourceBBox.center.y },
-            {
-              x: x + (reportMode ? 300 : 40),
-              y: reportMode ? sourceBBox.y + 26 : sourceBBox.center.y
-            }, {
-              x: x + (reportMode ? 300 : 40),
-              y: reportMode ? targetBBox.y + 26 : targetBBox.center.y
-            }
-            // the above vertices are added to fix issue of edges overlapping end/join/jump nodes with multipath nodes.
+              // { x, y: sourceBBox.center.y },
+              {
+                x: x + (reportMode ? 300 : 40),
+                y: reportMode ? sourceBBox.y + 26 : sourceBBox.center.y
+              },
+              {
+                x: x + (reportMode ? 300 : 40),
+                y: reportMode ? targetBBox.y + 26 : targetBBox.center.y
+              }
+              // the above vertices are added to fix issue of edges overlapping end/join/jump nodes with multipath nodes.
             ]);
-          } else if ((GRAPH_DIRECTION === 'TB' || GRAPH_DIRECTION === 'BT') && sourceBBox.x !== targetBBox.x) {
-            var gap = GRAPH_DIRECTION === 'TB' ? targetBBox.y - sourceBBox.y - sourceBBox.height : -sourceBBox.y + targetBBox.y + targetBBox.height;
-            var _fix = GRAPH_DIRECTION === 'TB' ? sourceBBox.height : 0;
-            var y = sourceBBox.y + _fix + gap / 2;
-            edge.setVertices([
-            // { x: sourceBBox.center.x, y },
-            {
-              x: targetBBox.center.x,
-              y
-            }]);
           } else {
             edge.setVertices([]);
           }
-        } else if ((GRAPH_DIRECTION === 'LR' || GRAPH_DIRECTION === 'RL') && sourceBBox.y !== targetBBox.y) {
-          var _gap = GRAPH_DIRECTION === 'LR' ? targetBBox.x - sourceBBox.x - sourceBBox.width : -sourceBBox.x + targetBBox.x + targetBBox.width;
-          var _fix2 = GRAPH_DIRECTION === 'LR' ? sourceBBox.width : 0;
-          var _x = sourceBBox.x + _fix2 + _gap / 4;
-          edge.setVertices([{
-            x: _x,
-            y: sourcePosition.y + (reportMode ? 25 : 0)
-          }, {
-            x: _x,
-            y: reportMode ? sourceBBox.y + 25 : sourceBBox.center.y
-          }, {
-            x: _x,
-            y: reportMode ? targetBBox.y + 25 : targetBBox.center.y
-          }]);
-        } else if ((GRAPH_DIRECTION === 'TB' || GRAPH_DIRECTION === 'BT') && sourceBBox.x !== targetBBox.x) {
-          var _gap2 = GRAPH_DIRECTION === 'TB' ? targetBBox.y - sourceBBox.y - sourceBBox.height : -sourceBBox.y + targetBBox.y + targetBBox.height;
-          var _fix3 = GRAPH_DIRECTION === 'TB' ? sourceBBox.height : 0;
-          var _y = sourceBBox.y + _fix3 + _gap2 / 2;
-          edge.setVertices([{
-            x: sourceBBox.center.x,
-            y: reportMode ? sourceBBox.y + 40 : _y
-          }, {
-            x: targetBBox.center.x,
-            y: reportMode ? sourceBBox.y + 40 : _y
-          }]);
+        } else if (sourceBBox.y !== targetBBox.y) {
+          const gap = targetBBox.x - sourceBBox.x - sourceBBox.width;
+          const fix = sourceBBox.width;
+          const x = sourceBBox.x + fix + gap / 4;
+          edge.setVertices([
+            { x, y: sourcePosition.y + (reportMode ? 25 : 0) },
+            { x, y: reportMode ? sourceBBox.y + 25 : sourceBBox.center.y },
+            { x, y: reportMode ? targetBBox.y + 25 : targetBBox.center.y }
+          ]);
         } else {
           edge.setVertices([]);
         }
       }
     });
   };
-  var getEntryTrigger = () => graphNodes.find(node => node.type === ENTRY_TRIGGER);
-  var getToNodeId = (endNode, endNodeId, endNodeIdSecondary, blockType) => {
+  const getEntryTrigger = () => graphNodes.find((node) => node.type === ENTRY_TRIGGER);
+  const getToNodeId = (endNode, endNodeId, endNodeIdSecondary, blockType) => {
     if (blockType === JOIN || blockType === JUMP) {
-      return undefined;
+      return void 0;
     } else {
       if (!isEmpty(endNode)) {
         return [endNodeId, endNodeIdSecondary];
@@ -431,34 +369,29 @@ var CapDndGraph = props => {
       return [endNodeId];
     }
   };
-  // Position of Exit Trigger and Empty Graph Text to be placed manually based on the requirement
-  var positionNodesManually = function positionNodesManually(reportMode) {
-    if (reportMode === void 0) {
-      reportMode = false;
-    }
-    var entryTrigger = getEntryTrigger();
-    var exitTrigger = graphNodes.find(node => node.type === EXIT_TRIGGER);
-    var emptyGraphTextNode = graphNodes.find(node => node.type === EMPTY_GRAPH_TEXT);
-    var placeholderNode = graphNodes.find(node => node.type === PLACEHOLDER_NODE); // First placeholder node where we need to show text
-    var scheduleBlock = !reportMode && graphNodes.find(node => node.type === SCHEDULE_BLOCK);
-    var entryTriggerNode = graphRef.current.getCell(entryTrigger.id);
-    var exitTriggerNode = graphRef.current.getCell(exitTrigger == null ? void 0 : exitTrigger.id);
-    var emptyGraphText = emptyGraphTextNode && graphRef.current.getCell(emptyGraphTextNode.id);
-    var nextNode = placeholderNode && graphRef.current.getCell(placeholderNode.id);
-    var scheduleBlockNode = scheduleBlock && graphRef.current.getCell(scheduleBlock.id);
+  const positionNodesManually = (reportMode2 = false) => {
+    const entryTrigger = getEntryTrigger();
+    const exitTrigger = graphNodes.find((node) => node.type === EXIT_TRIGGER);
+    const emptyGraphTextNode = graphNodes.find((node) => node.type === EMPTY_GRAPH_TEXT);
+    const placeholderNode = graphNodes.find((node) => node.type === PLACEHOLDER_NODE);
+    const scheduleBlock = !reportMode2 && graphNodes.find((node) => node.type === SCHEDULE_BLOCK);
+    const entryTriggerNode = graphRef.current.getCell(entryTrigger.id);
+    const exitTriggerNode = graphRef.current.getCell(exitTrigger == null ? void 0 : exitTrigger.id);
+    const emptyGraphText = emptyGraphTextNode && graphRef.current.getCell(emptyGraphTextNode.id);
+    const nextNode = placeholderNode && graphRef.current.getCell(placeholderNode.id);
+    const scheduleBlockNode = scheduleBlock && graphRef.current.getCell(scheduleBlock.id);
     if (entryTriggerNode) {
-      var entryTriggerBBox = entryTriggerNode.getBBox().bottomLeft;
-      var entryTriggerTopBBox = entryTriggerNode.getBBox().topLeft;
+      const entryTriggerBBox = entryTriggerNode.getBBox().bottomLeft;
+      const entryTriggerTopBBox = entryTriggerNode.getBBox().topLeft;
       entryTriggerNode.position(entryTriggerTopBBox.x, entryTriggerTopBBox.y - 16);
       if (entryTriggerNode && scheduleBlock) {
         scheduleBlockNode.position(entryTriggerBBox.x, entryTriggerBBox.y + 16);
-        // Increasing the size of the entry block on the canvas when the journey has linked source jouneys
         if (journeyMetaContext) {
           scheduleBlockNode.position(entryTriggerBBox.x, entryTriggerBBox.y + 100);
         }
       }
       if (exitTriggerNode && scheduleBlock) {
-        var scheduleBlockBBox = scheduleBlockNode.getBBox().bottomLeft;
+        const scheduleBlockBBox = scheduleBlockNode.getBBox().bottomLeft;
         exitTriggerNode.position(scheduleBlockBBox.x, scheduleBlockBBox.y + 16);
       }
       if (exitTriggerNode && !scheduleBlock) {
@@ -470,23 +403,18 @@ var CapDndGraph = props => {
       }
     }
     if (emptyGraphText && nextNode) {
-      var node2BBox = nextNode.getBBox().bottomLeft;
+      const node2BBox = nextNode.getBBox().bottomLeft;
       emptyGraphText.position(node2BBox.x, node2BBox.y + 16);
     }
   };
-  var getEdges = useCallback(() => {
-    var edges = graphRef.current.getEdges();
+  const getEdges = useCallback(() => {
+    const edges = graphRef.current.getEdges();
     edgesData.current = [];
-    edges.forEach(edge => {
-      var {
-        x,
-        y,
-        width,
-        height
-      } = edge.getBBox();
-      var boundClient = null;
+    edges.forEach((edge) => {
+      const { x, y, width, height } = edge.getBBox();
+      let boundClient = null;
       if (graphRef.current.zoom() !== 1) {
-        var domEdge = document.querySelector("g[data-cell-id=\"" + edge.id + "\"").getBoundingClientRect();
+        const domEdge = document.querySelector(`g[data-cell-id="${edge.id}"`).getBoundingClientRect();
         boundClient = {
           start: {
             x: domEdge.x,
@@ -501,27 +429,19 @@ var CapDndGraph = props => {
       edgesData.current.push({
         sourceId: (edge.getSourceNode() || {}).id,
         targetId: (edge.getTargetNode() || {}).id,
-        start: {
-          x,
-          y
-        },
-        end: {
-          x: x + width,
-          y: y + height - (reportMode ? 50 : 0)
-        },
+        start: { x, y },
+        end: { x: x + width, y: y + height - (reportMode ? 50 : 0) },
         vertices: edge.vertices,
         boundClient
       });
     });
-  }, [(_graphRef$current = graphRef.current) == null ? void 0 : _graphRef$current.scale]);
+  }, [(_a = graphRef.current) == null ? void 0 : _a.scale]);
   useEffect(() => {
     registerEdges();
     initializeGraphAndLayout();
     prepareGraphNodeEdges();
-    graphContainerPositionStart.current = document.querySelector('.cap-graph-builder .x6-graph-scroller').getBoundingClientRect().x;
+    graphContainerPositionStart.current = document.querySelector(".cap-graph-builder .x6-graph-scroller").getBoundingClientRect().x;
   }, []);
-
-  // Reinitialize the graph when testMode changes this happens only when the testMode is stopped.
   useEffect(() => {
     registerEdges();
     initializeGraphAndLayout(testMode, reportMode);
@@ -536,125 +456,175 @@ var CapDndGraph = props => {
     getEdges();
     positionNodesManually(reportMode);
   }, [graphData]);
-  var onDrop = useCallback(item => {
-    var newNodeId = getCombinedNanoId(7, 3);
-    var endNodeIdSecondary = getCombinedNanoId(7, 3);
-    var endNode;
-    previouslyFoundEdge.current = -1;
-    if (item.isMultiPath) {
-      endNode = {
-        from: newNodeId,
-        id: endNodeIdSecondary,
-        component: CapIcon,
-        props: _extends({}, endIconProps, {
-          id: endNodeIdSecondary
-        }),
-        type: END_NODE
-      };
-    }
-    var oldToNode;
-    var sourceId;
-    if (!blockNodes.length && getEntryTrigger().to.length === 1) {
-      var entryTrigger = getEntryTrigger();
-      var exitTrigger = graphNodes.find(node => node.type === EXIT_TRIGGER);
-      var scheduleBlock = graphNodes.find(node => node.type === SCHEDULE_BLOCK);
-      var endNodeId = getCombinedNanoId(7, 3);
-      var newSetNodes = [_extends({}, entryTrigger, {
-        to: [newNodeId]
-      }), {
-        from: entryTrigger.id,
-        id: newNodeId,
-        component: GraphBlockNode,
-        props: {
-          iconType: item.iconType,
-          color: item.color,
-          id: newNodeId,
-          blockType: item.id,
-          onClickActionIcon,
-          isMultiPath: item.isMultiPath,
-          nodeTitle: nodeTitleMapping[item.id]
-        },
-        to: getToNodeId(endNode, endNodeId, endNodeIdSecondary, item.id),
-        type: BLOCK_NODE
-      }];
-      if (item.id !== JOIN && item.id !== JUMP) {
-        newSetNodes.push({
+  const onDrop = useCallback(
+    (item) => {
+      const newNodeId = getCombinedNanoId(7, 3);
+      const endNodeIdSecondary = getCombinedNanoId(7, 3);
+      let endNode;
+      previouslyFoundEdge.current = -1;
+      if (item.isMultiPath) {
+        endNode = {
           from: newNodeId,
-          id: endNodeId,
+          id: endNodeIdSecondary,
           component: CapIcon,
-          props: _extends({}, endIconProps, {
-            id: endNodeId
-          }),
+          props: {
+            ...endIconProps,
+            id: endNodeIdSecondary
+          },
           type: END_NODE
-        });
-      }
-
-      //change node id in pathsInfo
-      if (!isEmpty(entryTrigger.pathsInfo)) {
-        newSetNodes[0].pathsInfo = {
-          [newNodeId]: _extends({}, entryTrigger.pathsInfo[entryTrigger.to[0]])
         };
       }
-      [oldToNode] = entryTrigger.to;
-      sourceId = entryTrigger.id;
-      if (item.isMultiPath) {
-        newSetNodes.push(endNode);
-      }
-      if (item.id === WAIT_TILL_EVENT) {
-        newSetNodes[1].pathsInfo = getPathsInfo(WAIT_TILL_EVENT, [endNodeId, endNodeIdSecondary]);
-      }
-      if (exitTrigger) {
-        newSetNodes.splice(1, 0, exitTrigger);
-      }
-      if (scheduleBlock) {
-        newSetNodes.splice(1, 0, scheduleBlock);
-      }
-      previouslyFoundEdge.current = -1;
-      setGraphNodes(newSetNodes);
-      onDropNewNode({
-        blockId: newNodeId,
-        blockType: item.id,
-        oldToNode,
-        sourceId
-      });
-    } else {
-      setGraphNodes(prevNodes => {
-        var nodes = cloneDeep(prevNodes);
-        var placeholderNodeIndex = nodes.findIndex(node => node.type === PLACEHOLDER_NODE);
-        if (placeholderNodeIndex !== -1) {
-          var placeHolderNode = nodes[placeholderNodeIndex];
-          sourceId = placeHolderNode.from;
-          var sourceIndex = nodes.findIndex(node => node.id === sourceId);
-          var sourceToArrayIndex = nodes[sourceIndex].to.findIndex(nodeId => nodeId === placeHolderNode.id);
-          var targetId = placeHolderNode.to[0];
-          var targetIndex = nodes.findIndex(node => node.id === targetId);
-          var targetNode = nodes[targetIndex];
-          // Handling JOIN and JUMP blocks addition in the graph canvas
-          if (item.id === JOIN || item.id === JUMP) {
-            if (targetNode.type === BLOCK_NODE) {
-              //not allowing JOIN and JUMP to be placed in middle of journey
-              nodes.splice(placeholderNodeIndex, 1);
-              //updating source
-              nodes[sourceIndex] = _extends({}, nodes[sourceIndex], {
-                toType: undefined,
-                placeholderToIndex: undefined
-              });
-              nodes[sourceIndex].to[sourceToArrayIndex] = targetId;
-              //displaying error when JOIN and JUMP node is dropped in middle of journey
-              var keyTxt = joinDropErrorText;
-              var messageTxt = joinDropErrorText;
-              if (item.id === JUMP) {
-                keyTxt = jumpDropErrorText;
-                messageTxt = jumpDropErrorText;
+      let oldToNode;
+      let sourceId;
+      if (!blockNodes.length && getEntryTrigger().to.length === 1) {
+        const entryTrigger = getEntryTrigger();
+        const exitTrigger = graphNodes.find((node) => node.type === EXIT_TRIGGER);
+        const scheduleBlock = graphNodes.find((node) => node.type === SCHEDULE_BLOCK);
+        const endNodeId = getCombinedNanoId(7, 3);
+        const newSetNodes = [
+          {
+            ...entryTrigger,
+            to: [newNodeId]
+          },
+          {
+            from: entryTrigger.id,
+            id: newNodeId,
+            component: GraphBlockNode,
+            props: {
+              iconType: item.iconType,
+              color: item.color,
+              id: newNodeId,
+              blockType: item.id,
+              onClickActionIcon,
+              isMultiPath: item.isMultiPath,
+              nodeTitle: nodeTitleMapping[item.id]
+            },
+            to: getToNodeId(endNode, endNodeId, endNodeIdSecondary, item.id),
+            type: BLOCK_NODE
+          }
+        ];
+        if (item.id !== JOIN && item.id !== JUMP) {
+          newSetNodes.push({
+            from: newNodeId,
+            id: endNodeId,
+            component: CapIcon,
+            props: {
+              ...endIconProps,
+              id: endNodeId
+            },
+            type: END_NODE
+          });
+        }
+        if (!isEmpty(entryTrigger.pathsInfo)) {
+          newSetNodes[0].pathsInfo = {
+            [newNodeId]: {
+              ...entryTrigger.pathsInfo[entryTrigger.to[0]]
+            }
+          };
+        }
+        [oldToNode] = entryTrigger.to;
+        sourceId = entryTrigger.id;
+        if (item.isMultiPath) {
+          newSetNodes.push(endNode);
+        }
+        if (item.id === WAIT_TILL_EVENT) {
+          newSetNodes[1].pathsInfo = getPathsInfo(WAIT_TILL_EVENT, [endNodeId, endNodeIdSecondary]);
+        }
+        if (exitTrigger) {
+          newSetNodes.splice(1, 0, exitTrigger);
+        }
+        if (scheduleBlock) {
+          newSetNodes.splice(1, 0, scheduleBlock);
+        }
+        previouslyFoundEdge.current = -1;
+        setGraphNodes(newSetNodes);
+        onDropNewNode({ blockId: newNodeId, blockType: item.id, oldToNode, sourceId });
+      } else {
+        setGraphNodes((prevNodes) => {
+          var _a2, _b, _c, _d;
+          let nodes = cloneDeep(prevNodes);
+          const placeholderNodeIndex = nodes.findIndex((node) => node.type === PLACEHOLDER_NODE);
+          if (placeholderNodeIndex !== -1) {
+            const placeHolderNode = nodes[placeholderNodeIndex];
+            sourceId = placeHolderNode.from;
+            const sourceIndex = nodes.findIndex((node) => node.id === sourceId);
+            const sourceToArrayIndex = nodes[sourceIndex].to.findIndex(
+              (nodeId) => nodeId === placeHolderNode.id
+            );
+            const targetId = placeHolderNode.to[0];
+            const targetIndex = nodes.findIndex((node) => node.id === targetId);
+            const targetNode = nodes[targetIndex];
+            if (item.id === JOIN || item.id === JUMP) {
+              if (targetNode.type === BLOCK_NODE) {
+                nodes.splice(placeholderNodeIndex, 1);
+                nodes[sourceIndex] = {
+                  ...nodes[sourceIndex],
+                  toType: void 0,
+                  placeholderToIndex: void 0
+                };
+                nodes[sourceIndex].to[sourceToArrayIndex] = targetId;
+                let keyTxt = joinDropErrorText;
+                let messageTxt = joinDropErrorText;
+                if (item.id === JUMP) {
+                  keyTxt = jumpDropErrorText;
+                  messageTxt = jumpDropErrorText;
+                }
+                CapNotification.error({
+                  key: keyTxt,
+                  message: messageTxt,
+                  style: JOIN_NOTIFICATION_STYLE
+                });
+              } else if (targetNode.type === END_NODE) {
+                nodes.splice(placeholderNodeIndex, 1, {
+                  id: newNodeId,
+                  component: GraphBlockNode,
+                  props: {
+                    iconType: item.iconType,
+                    color: item.color,
+                    id: newNodeId,
+                    blockType: item.id,
+                    onClickActionIcon,
+                    isMultiPath: false,
+                    nodeTitle: nodeTitleMapping[item.id],
+                    reportMode
+                  },
+                  to: void 0,
+                  from: nodes[sourceIndex].id,
+                  type: BLOCK_NODE
+                });
+                nodes[sourceIndex] = {
+                  ...nodes[sourceIndex],
+                  toType: void 0,
+                  placeholderToIndex: void 0
+                };
+                nodes[sourceIndex].to[sourceToArrayIndex] = newNodeId;
+                if ((sourceId === getEntryTrigger().id || [WAIT_TILL_EVENT, DECISION_SPLIT].includes(
+                  nodes[sourceIndex].props.blockType
+                )) && ((_a2 = nodes[sourceIndex]) == null ? void 0 : _a2.pathsInfo)) {
+                  [oldToNode] = placeHolderNode.to;
+                  nodes[sourceIndex].pathsInfo[newNodeId] = (_b = nodes[sourceIndex]) == null ? void 0 : _b.pathsInfo[targetId];
+                  delete nodes[sourceIndex].pathsInfo[targetId];
+                }
+                nodes.splice(targetIndex, 1);
+                onDropNewNode({ blockId: newNodeId, blockType: item.id, oldToNode, sourceId });
               }
-              CapNotification.error({
-                key: keyTxt,
-                message: messageTxt,
-                style: JOIN_NOTIFICATION_STYLE
+            } else {
+              let from;
+              nodes = nodes.map((node) => {
+                from = "";
+                if (node.from === sourceId && node.id === targetId) {
+                  from = newNodeId;
+                }
+                return {
+                  ...node,
+                  from: from || node.from
+                };
               });
-            } else if (targetNode.type === END_NODE) {
-              var _nodes$sourceIndex;
-              //adding JOIN to node array
+              let toNodes = placeHolderNode.to;
+              if (item.isMultiPath) {
+                toNodes = [...toNodes, endNodeIdSecondary];
+                nodes.push(endNode);
+              }
               nodes.splice(placeholderNodeIndex, 1, {
                 id: newNodeId,
                 component: GraphBlockNode,
@@ -664,147 +634,82 @@ var CapDndGraph = props => {
                   id: newNodeId,
                   blockType: item.id,
                   onClickActionIcon,
-                  isMultiPath: false,
+                  isMultiPath: item.isMultiPath,
                   nodeTitle: nodeTitleMapping[item.id],
                   reportMode
                 },
-                to: undefined,
+                to: toNodes,
                 from: nodes[sourceIndex].id,
                 type: BLOCK_NODE
               });
-              //updating JOIN source
-              nodes[sourceIndex] = _extends({}, nodes[sourceIndex], {
-                toType: undefined,
-                placeholderToIndex: undefined
-              });
-              nodes[sourceIndex].to[sourceToArrayIndex] = newNodeId;
-              if ((sourceId === getEntryTrigger().id || [WAIT_TILL_EVENT, DECISION_SPLIT].includes(nodes[sourceIndex].props.blockType)) && (_nodes$sourceIndex = nodes[sourceIndex]) != null && _nodes$sourceIndex.pathsInfo) {
-                var _nodes$sourceIndex2;
-                [oldToNode] = placeHolderNode.to;
-                nodes[sourceIndex].pathsInfo[newNodeId] = (_nodes$sourceIndex2 = nodes[sourceIndex]) == null ? void 0 : _nodes$sourceIndex2.pathsInfo[targetId];
-                delete nodes[sourceIndex].pathsInfo[targetId];
+              nodes[sourceIndex] = {
+                ...nodes[sourceIndex],
+                toType: void 0,
+                placeholderToIndex: void 0
+              };
+              if (item.id === WAIT_TILL_EVENT) {
+                placeHolderNode.pathsInfo = getPathsInfo(WAIT_TILL_EVENT, toNodes);
               }
-              //removing END_NODE adter JOIN
-              nodes.splice(targetIndex, 1);
-              onDropNewNode({
-                blockId: newNodeId,
-                blockType: item.id,
-                oldToNode,
-                sourceId
-              });
-            }
-          } else {
-            var _nodes$sourceIndex3;
-            var from;
-            nodes = nodes.map(node => {
-              from = '';
-              if (node.from === sourceId && node.id === targetId) {
-                from = newNodeId;
+              if ((sourceId === getEntryTrigger().id || [WAIT_TILL_EVENT, DECISION_SPLIT].includes(nodes[sourceIndex].props.blockType)) && ((_c = nodes[sourceIndex]) == null ? void 0 : _c.pathsInfo)) {
+                [oldToNode] = toNodes;
+                nodes[sourceIndex].pathsInfo[newNodeId] = (_d = nodes[sourceIndex]) == null ? void 0 : _d.pathsInfo[toNodes[0]];
+                delete nodes[sourceIndex].pathsInfo[toNodes[0]];
               }
-              return _extends({}, node, {
-                from: from || node.from
-              });
-            });
-            var toNodes = placeHolderNode.to;
-            if (item.isMultiPath) {
-              toNodes = [...toNodes, endNodeIdSecondary];
-              nodes.push(endNode);
-            }
-            nodes.splice(placeholderNodeIndex, 1, {
-              id: newNodeId,
-              component: GraphBlockNode,
-              props: {
-                iconType: item.iconType,
-                color: item.color,
-                id: newNodeId,
-                blockType: item.id,
-                onClickActionIcon,
-                isMultiPath: item.isMultiPath,
-                nodeTitle: nodeTitleMapping[item.id],
-                reportMode
-              },
-              to: toNodes,
-              from: nodes[sourceIndex].id,
-              type: BLOCK_NODE
-            });
-            nodes[sourceIndex] = _extends({}, nodes[sourceIndex], {
-              toType: undefined,
-              placeholderToIndex: undefined
-            });
-            if (item.id === WAIT_TILL_EVENT) {
-              placeHolderNode.pathsInfo = getPathsInfo(WAIT_TILL_EVENT, toNodes);
-            }
-            if ((sourceId === getEntryTrigger().id || [WAIT_TILL_EVENT, DECISION_SPLIT].includes(nodes[sourceIndex].props.blockType)) && (_nodes$sourceIndex3 = nodes[sourceIndex]) != null && _nodes$sourceIndex3.pathsInfo) {
-              var _nodes$sourceIndex4;
-              [oldToNode] = toNodes;
-              nodes[sourceIndex].pathsInfo[newNodeId] = (_nodes$sourceIndex4 = nodes[sourceIndex]) == null ? void 0 : _nodes$sourceIndex4.pathsInfo[toNodes[0]];
-              delete nodes[sourceIndex].pathsInfo[toNodes[0]];
-            }
-            if (sourceToArrayIndex !== -1) {
-              nodes[sourceIndex].to[sourceToArrayIndex] = newNodeId;
+              if (sourceToArrayIndex !== -1) {
+                nodes[sourceIndex].to[sourceToArrayIndex] = newNodeId;
+              }
+              onDropNewNode({ blockId: newNodeId, blockType: item.id, oldToNode, sourceId });
             }
-            onDropNewNode({
-              blockId: newNodeId,
-              blockType: item.id,
-              oldToNode,
-              sourceId
-            });
           }
-        }
-        return nodes;
-      });
-      previouslyFoundEdge.current = -1;
-    }
-  }, [graphNodes]);
-  var [, drop] = useDrop({
-    accept: 'draggableNode',
-    drop: item => {
+          return nodes;
+        });
+        previouslyFoundEdge.current = -1;
+      }
+    },
+    [graphNodes]
+  );
+  const [, drop] = useDrop({
+    accept: "draggableNode",
+    drop: (item) => {
       onDrop(item);
     },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isOver: !!monitor.isOver()
     }),
     hover: debounce((item, monitor) => {
-      var draggingItemPosition = monitor.getClientOffset();
-      if (draggingItemPosition && (blockNodes.length || !(getEntryTrigger().to.length === 1)) //if more than one path, allow nodes to be dropped
-      ) {
-        var dragPosition = {
+      const draggingItemPosition = monitor.getClientOffset();
+      if (draggingItemPosition && (blockNodes.length || !(getEntryTrigger().to.length === 1))) {
+        let dragPosition = {
           x: draggingItemPosition.x,
           y: draggingItemPosition.y
         };
-        var isZoomed = graphRef.current.zoom() !== 1;
-        // const isZoomed = false;
+        const isZoomed = graphRef.current.zoom() !== 1;
         if (!isZoomed) {
           dragPosition = {
             x: draggingItemPosition.x - graphContainerPositionStart.current - 10,
             y: draggingItemPosition.y - 34 - offset
           };
         }
-        var scrollPosition = isZoomed ? {
-          left: 0,
-          top: 0
-        } : graphRef.current.getScrollbarPosition();
-        var foundEdgeIndex = edgesData.current.findIndex(edgeD => {
-          var pos = isZoomed ? edgeD.boundClient : edgeD;
+        const scrollPosition = isZoomed ? { left: 0, top: 0 } : graphRef.current.getScrollbarPosition();
+        const foundEdgeIndex = edgesData.current.findIndex((edgeD) => {
+          const pos = isZoomed ? edgeD.boundClient : edgeD;
           if (edgeD.vertices.length) {
             return dragPosition.x > edgeD.vertices[0].x - scrollPosition.left && dragPosition.y > edgeD.vertices[0].y - 40 - scrollPosition.top && dragPosition.x < edgeD.end.x - scrollPosition.left && dragPosition.y < edgeD.end.y + 40 - scrollPosition.top;
           }
           return dragPosition.x > pos.start.x - scrollPosition.left && dragPosition.y > pos.start.y - 40 - scrollPosition.top && dragPosition.x < pos.end.x - scrollPosition.left && dragPosition.y < pos.end.y + 40 - scrollPosition.top;
         });
         if (foundEdgeIndex !== -1 && previouslyFoundEdge.current !== foundEdgeIndex) {
-          var nodes = cloneDeep(graphNodes);
-          var {
-            sourceId,
-            targetId
-          } = edgesData.current[foundEdgeIndex];
-          var targetIndex = nodes.findIndex(node => node.id === targetId);
-          var sourceIndex = sourceId === undefined ? 0 : nodes.findIndex(node => node.id === sourceId);
-          var sourceNode = nodes[sourceIndex];
-          var targetNode = nodes[targetIndex];
-          if ((sourceNode == null ? void 0 : sourceNode.type) === PLACEHOLDER_NODE || (targetNode == null ? void 0 : targetNode.type) === PLACEHOLDER_NODE || !targetNode || !sourceNode) return;
-          var sourceChildrens = nodes[sourceIndex].to || [];
-          var toIndex = sourceChildrens.findIndex(nodeId => nodeId === targetId);
-          var id = getCombinedNanoId(7, 3);
+          const nodes = cloneDeep(graphNodes);
+          const { sourceId, targetId } = edgesData.current[foundEdgeIndex];
+          const targetIndex = nodes.findIndex((node) => node.id === targetId);
+          const sourceIndex = sourceId === void 0 ? 0 : nodes.findIndex((node) => node.id === sourceId);
+          const sourceNode = nodes[sourceIndex];
+          const targetNode = nodes[targetIndex];
+          if ((sourceNode == null ? void 0 : sourceNode.type) === PLACEHOLDER_NODE || (targetNode == null ? void 0 : targetNode.type) === PLACEHOLDER_NODE || !targetNode || !sourceNode)
+            return;
+          const sourceChildrens = nodes[sourceIndex].to || [];
+          const toIndex = sourceChildrens.findIndex((nodeId) => nodeId === targetId);
+          const id = getCombinedNanoId(7, 3);
           nodes.splice(targetIndex, 0, {
             from: sourceNode.id,
             id,
@@ -814,106 +719,100 @@ var CapDndGraph = props => {
             height: 42,
             type: PLACEHOLDER_NODE
           });
-          nodes[sourceIndex] = _extends({}, nodes[sourceIndex], {
+          nodes[sourceIndex] = {
+            ...nodes[sourceIndex],
             toType: PLACEHOLDER_NODE,
             placeholderToIndex: toIndex
-          });
+          };
           if (toIndex !== -1) {
             nodes[sourceIndex].to[toIndex] = id;
           }
           previouslyFoundEdge.current = foundEdgeIndex;
-          var secondaryPlaceholderId = null;
-          nodes.forEach(node => {
+          let secondaryPlaceholderId = null;
+          nodes.forEach((node) => {
             if (node.type === PLACEHOLDER_NODE && node.id !== id) secondaryPlaceholderId = node.id;
           });
-          var updatedNodes = secondaryPlaceholderId ? deleteNode(nodes, secondaryPlaceholderId).nodes : nodes;
+          const updatedNodes = secondaryPlaceholderId ? deleteNode(nodes, secondaryPlaceholderId).nodes : nodes;
           setGraphNodes(updatedNodes);
         }
       }
     })
   });
-  var deleteNode = (nodesParam, blockId) => {
-    var _nodes$find, _Object$keys;
-    var nodes = cloneDeep(nodesParam);
-
-    //JOIN specific start --- handling individual join/joined node delete
-    var blockName = ((_nodes$find = nodes.find(node => node.id === blockId)) == null || (_nodes$find = _nodes$find.props) == null || (_nodes$find = _nodes$find.blockData) == null ? void 0 : _nodes$find.name) || '';
-    var linkedToJoinNodeId = [];
-    nodes = nodes.flatMap(node => {
-      var {
-        blockType = '',
-        isConfigured = false,
-        blockData = {}
-      } = (node == null ? void 0 : node.props) || {};
-      var {
-        nextBlock: {
-          pathBlockId = ''
-        } = {}
-      } = blockData;
-      //handling update of graphnodes of join block when joined block is deleted
-      if (blockType === JOIN && isConfigured && pathBlockId === blockId) {
-        var clonedNode = cloneDeep(node);
+  const deleteNode = (nodesParam, blockId2) => {
+    var _a2, _b, _c, _d;
+    let nodes = cloneDeep(nodesParam);
+    const blockName = ((_c = (_b = (_a2 = nodes.find((node) => node.id === blockId2)) == null ? void 0 : _a2.props) == null ? void 0 : _b.blockData) == null ? void 0 : _c.name) || "";
+    const linkedToJoinNodeId = [];
+    nodes = nodes.flatMap((node) => {
+      const { blockType = "", isConfigured = false, blockData = {} } = (node == null ? void 0 : node.props) || {};
+      const { nextBlock: { pathBlockId = "" } = {} } = blockData;
+      if (blockType === JOIN && isConfigured && pathBlockId === blockId2) {
+        const clonedNode = cloneDeep(node);
         clonedNode.props.isConfigured = false;
         clonedNode.props.nodeTitle = nodeTitleMapping.JOIN;
         delete clonedNode.props.blockData.nextBlock;
         delete clonedNode.props.nodePreview;
         return clonedNode;
-      } else if ((blockType === JOIN || blockType === JUMP) && (node == null ? void 0 : node.id) === blockId) {
-        //handling update of graphnodes of joined block when join block is deleted
+      } else if ((blockType === JOIN || blockType === JUMP) && (node == null ? void 0 : node.id) === blockId2) {
         if (isConfigured) {
           linkedToJoinNodeId.push(pathBlockId);
         }
-        //adding END_NODE
-        var endNodeId = getCombinedNanoId(7, 3);
+        const endNodeId = getCombinedNanoId(7, 3);
         node.to = [endNodeId];
-        return [node, {
-          from: node == null ? void 0 : node.id,
-          id: endNodeId,
-          component: CapIcon,
-          props: _extends({}, endIconProps, {
-            id: endNodeId
-          }),
-          type: END_NODE
-        }];
+        return [
+          node,
+          {
+            from: node == null ? void 0 : node.id,
+            id: endNodeId,
+            component: CapIcon,
+            props: {
+              ...endIconProps,
+              id: endNodeId
+            },
+            type: END_NODE
+          }
+        ];
       }
       return node;
     });
-    //handling update of graphnodes of joined block when join block is deleted
-    nodes = nodes.map(node => {
+    nodes = nodes.map((node) => {
       if (linkedToJoinNodeId.includes(node.id)) {
         if (node.props.joinBlockNameArray.length === 1) {
           delete node.props.joinBlockNameArray;
         } else {
-          var joinBlockNameIndex = node.props.joinBlockNameArray.findIndex(i => i === blockName);
+          const joinBlockNameIndex = node.props.joinBlockNameArray.findIndex(
+            (i) => i === blockName
+          );
           node.props.joinBlockNameArray.splice(joinBlockNameIndex, 1);
         }
       }
       return node;
     });
-    //JOIN specific end
-    var foundNode = nodes.find(node => node.id === blockId);
-    var {
-      isMultiPath = false
-    } = (foundNode == null ? void 0 : foundNode.props) || {};
-    var secondaryNode = isMultiPath ? foundNode.to.length > 1 : false;
-    var nodesToDelete = {
-      [blockId]: true
+    const foundNode = nodes.find((node) => node.id === blockId2);
+    const { isMultiPath = false } = (foundNode == null ? void 0 : foundNode.props) || {};
+    const secondaryNode = isMultiPath ? foundNode.to.length > 1 : false;
+    let nodesToDelete = {
+      [blockId2]: true
     };
     if (secondaryNode) {
-      var childrens = foundNode.to.slice(1);
-      nodesToDelete = _extends({}, nodesToDelete, recursivelyDeleteNodes(nodes, childrens));
+      const childrens = foundNode.to.slice(1);
+      nodesToDelete = {
+        ...nodesToDelete,
+        ...recursivelyDeleteNodes(nodes, childrens)
+      };
     }
-    nodes = nodes.map(node => {
+    nodes = nodes.map((node) => {
       if (node.from === foundNode.id) {
-        return _extends({}, node, {
+        return {
+          ...node,
           from: foundNode.from
-        });
+        };
       }
       if (node.id === foundNode.from) {
-        var updatedSource = cloneDeep(node);
-        var toIndex = updatedSource.to && updatedSource.to.findIndex(nodeId => nodeId === foundNode.id);
+        const updatedSource = cloneDeep(node);
+        const toIndex = updatedSource.to && updatedSource.to.findIndex((nodeId) => nodeId === foundNode.id);
         updatedSource.to[toIndex] = foundNode.to && foundNode.to[0];
-        updatedSource.toType = undefined;
+        updatedSource.toType = void 0;
         if (updatedSource.pathsInfo && foundNode.type !== PLACEHOLDER_NODE) {
           updatedSource.pathsInfo[foundNode.to[0]] = updatedSource.pathsInfo[foundNode.id];
           delete updatedSource.pathsInfo[foundNode.id];
@@ -922,78 +821,63 @@ var CapDndGraph = props => {
       }
       return node;
     });
-    var filteredNodes = nodes.filter(node => node && node.id !== blockId && !nodesToDelete[node.id]);
+    const filteredNodes = nodes.filter(
+      (node) => node && node.id !== blockId2 && !nodesToDelete[node.id]
+    );
     return {
-      nodes: ((_Object$keys = Object.keys(nodesToDelete)) == null ? void 0 : _Object$keys.length) > 1 ? updateJoinOrJoinedGraphNodeProp(filteredNodes, computeJoinGraphNodesData(nodes)) : filteredNodes,
+      nodes: ((_d = Object.keys(nodesToDelete)) == null ? void 0 : _d.length) > 1 ? updateJoinOrJoinedGraphNodeProp(filteredNodes, computeJoinGraphNodesData(nodes)) : filteredNodes,
       nodesToDelete,
       newToId: foundNode.type !== PLACEHOLDER_NODE ? foundNode.to[0] : null
     };
   };
-  var deleteNodeHandler = useCallback(blockId => {
-    setGraphNodes(prevNodes => {
-      var {
-        nodes,
+  const deleteNodeHandler = useCallback((blockId2) => {
+    setGraphNodes((prevNodes) => {
+      const { nodes, nodesToDelete, newToId } = deleteNode(prevNodes, blockId2);
+      deleteNodesFromMeta(
         nodesToDelete,
+        prevNodes.find((node) => node.id === blockId2).from,
+        blockId2,
         newToId
-      } = deleteNode(prevNodes, blockId);
-      deleteNodesFromMeta(nodesToDelete, prevNodes.find(node => node.id === blockId).from, blockId, newToId);
+      );
       return nodes;
     });
   }, []);
-  var handleOnClickModalDeleteBtn = () => {
+  const handleOnClickModalDeleteBtn = () => {
     deleteNodeHandler(blockId);
     setShowConfirmationModal(false);
   };
-  var handleOnCloseModal = () => {
+  const handleOnCloseModal = () => {
     setShowConfirmationModal(false);
   };
-  var renderBlockName = blockName => /*#__PURE__*/_jsx(CapLabel.CapLabelInline, {
-    type: "label4",
-    children: blockName
-  });
-  var getJoinDeleteDesc = (deletedNodeName, linkedNodeNameArray) => /*#__PURE__*/_jsxs(CapRow, {
-    className: "join-row",
-    children: [/*#__PURE__*/_jsxs(CapLabel, {
-      type: "label2",
-      children: [theText, " ", renderBlockName(deletedNodeName), " ", blockIsLinkedText, ' ', renderBlockName(linkedNodeNameArray), " ", blockText]
-    }), /*#__PURE__*/_jsx(CapLabel, {
-      type: "label2",
-      children: disconnectText
-    }), /*#__PURE__*/_jsx(CapLabel, {
-      type: "label2",
-      className: "margin-t-8",
-      children: areYouSureText
-    })]
-  });
-  var getDeleteDesc = () => {
-    var deleteDesc = /*#__PURE__*/_jsx(CapLabel, {
-      className: "margin-t-8",
-      type: "label2",
-      children: deleteBlockModalDescriptionText
-    });
-    var joinArr = graphNodes == null ? void 0 : graphNodes.reduce((acc, node) => {
-      var {
-        blockType = '',
-        isConfigured = false,
-        id = '',
-        blockData = {}
-      } = node.props || {};
+  const renderBlockName = (blockName) => /* @__PURE__ */ jsx(CapLabelWithStatic.CapLabelInline, { type: "label4", children: blockName });
+  const getJoinDeleteDesc = (deletedNodeName, linkedNodeNameArray) => /* @__PURE__ */ jsxs(CapRow, { className: "join-row", children: [
+    /* @__PURE__ */ jsxs(CapLabelWithStatic, { type: "label2", children: [
+      theText,
+      " ",
+      renderBlockName(deletedNodeName),
+      " ",
+      blockIsLinkedText,
+      " ",
+      renderBlockName(linkedNodeNameArray),
+      " ",
+      blockText
+    ] }),
+    /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label2", children: disconnectText }),
+    /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label2", className: "margin-t-8", children: areYouSureText })
+  ] });
+  const getDeleteDesc = () => {
+    let deleteDesc = /* @__PURE__ */ jsx(CapLabelWithStatic, { className: "margin-t-8", type: "label2", children: deleteBlockModalDescriptionText });
+    const joinArr = graphNodes == null ? void 0 : graphNodes.reduce((acc, node) => {
+      const { blockType = "", isConfigured = false, id = "", blockData = {} } = node.props || {};
       if (blockType === JOIN && isConfigured) {
-        var {
-          name = '',
-          nextBlock: {
-            pathBlockId = '',
-            pathName = ''
-          } = {}
-        } = blockData;
+        const { name = "", nextBlock: { pathBlockId = "", pathName = "" } = {} } = blockData;
         acc.push([id, name, pathBlockId, pathName]);
       }
       return acc;
     }, []);
-    //arr[0] = join block id, arr[1] = join block name, arr[2] = joined block id, arr[3] = joined block name
-    var deletedNodeName = '';
-    var linkedNodeNameArray = [];
-    joinArr.forEach(arr => {
+    let deletedNodeName = "";
+    const linkedNodeNameArray = [];
+    joinArr.forEach((arr) => {
       if (arr[0] === blockId) {
         deletedNodeName = arr[1];
         linkedNodeNameArray.push(arr[3]);
@@ -1007,55 +891,57 @@ var CapDndGraph = props => {
     }
     return deleteDesc;
   };
-  var getDeleteBlockWarningModal = () => {
-    return /*#__PURE__*/_jsx(CapModal, {
-      className: "delete-block-modal",
-      title: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(CapHeading, {
-          type: "h3",
-          children: deleteBlockModalHeaderText
-        }), getDeleteDesc()]
-      }),
-      visible: showConfirmationModal,
-      onOk: handleOnClickModalDeleteBtn,
-      onCancel: handleOnCloseModal,
-      okText: yesDeleteButtonText,
-      closeText: noButtonText
-    });
+  const getDeleteBlockWarningModal = () => {
+    return /* @__PURE__ */ jsx(
+      CapModalWithHoc,
+      {
+        className: "delete-block-modal",
+        title: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h3", children: deleteBlockModalHeaderText }),
+          getDeleteDesc()
+        ] }),
+        visible: showConfirmationModal,
+        onOk: handleOnClickModalDeleteBtn,
+        onCancel: handleOnCloseModal,
+        okText: yesDeleteButtonText,
+        closeText: noButtonText
+      }
+    );
   };
-  var onClickActionIcon = useCallback(_ref => {
-    var {
-      blockId,
-      actionType
-    } = _ref;
+  const onClickActionIcon = useCallback(({ blockId: blockId2, actionType }) => {
     if (actionType === DELETE) {
       setShowConfirmationModal(true);
-      setBlockId(blockId);
+      setBlockId(blockId2);
     } else if ([SETTINGS, VIEW, EDIT].includes(actionType)) {
-      onClickConfigure(blockId);
+      onClickConfigure(blockId2);
     }
   }, []);
-  return /*#__PURE__*/_jsxs(CapRow, {
-    className: "cap-graph-builder",
-    style: {
-      height: 'calc(100vh - 120px)'
-    },
-    children: [/*#__PURE__*/_jsx(CapIconsSidebar, _extends({}, sidebarProps, {
-      onDropOutsideCanvas: onDrop,
-      isNodeDraggable: unEditableMode ? null : true,
-      viewMode: unEditableMode
-    })), /*#__PURE__*/_jsx("div", {
-      id: dndGraphId,
-      ref: drop,
-      className: testMode ? 'cap-graph-test-mode cap-graph-builder-element' : reportMode ? 'cap-graph-report-mode' : 'cap-graph-builder-element',
-      style: {
-        height: '100%',
-        width: '100%',
-        display: 'inline-block',
-        overflow: 'auto'
+  return /* @__PURE__ */ jsxs(CapRow, { className: "cap-graph-builder", style: { height: "calc(100vh - 120px)" }, children: [
+    /* @__PURE__ */ jsx(
+      CapIconsSidebar,
+      {
+        ...sidebarProps,
+        onDropOutsideCanvas: onDrop,
+        isNodeDraggable: unEditableMode ? null : true,
+        viewMode: unEditableMode
       }
-    }), showConfirmationModal && getDeleteBlockWarningModal()]
-  });
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: dndGraphId,
+        ref: drop,
+        className: testMode ? "cap-graph-test-mode cap-graph-builder-element" : reportMode ? "cap-graph-report-mode" : "cap-graph-builder-element",
+        style: {
+          height: "100%",
+          width: "100%",
+          display: "inline-block",
+          overflow: "auto"
+        }
+      }
+    ),
+    showConfirmationModal && getDeleteBlockWarningModal()
+  ] });
 };
 CapDndGraph.propTypes = {
   sidebarIcons: PropTypes.array,
@@ -1072,6 +958,7 @@ CapDndGraph.defaultProps = {
   processChartData: {},
   chartDataStatus: IN_PROGRESS
 };
-export default LocaleHoc(CapDndGraph, {
-  key: 'CapDndGraph'
-});
+const index = LocaleHoc(CapDndGraph, { key: "CapDndGraph" });
+export {
+  index as default
+};