@capillarytech/blaze-ui 5.23.3-beta.1 → 5.23.3-beta.10

package/CapLevelGraphRenderer/index.js

@@ -1,86 +1,67 @@
-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); }
-/**
- *
- * CapLevelGraphRenderer
- *
- * It render graph with custom node and draw level by level backward edge
- *
- * Mock Data
- * nodes = [{ id: 'tier1', height: 295 }, { id: 'tier2', height: 500 }]
- * connections = [ { sourceId: 'tier2', targetId: 'tier1' }]
- */
-
-import { Graph } from '@antv/x6';
-import '@antv/x6-react-shape';
-import classnames from 'classnames';
-import get from 'lodash/get';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import CapButton from "../CapButton";
-import CapIcon from "../CapIcon";
-import './styles.scss';
-import TooltipTool from "./Tooltip";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var nodePostionObj = {};
-var edgeObj = {};
-var idSeparator = ' ';
-var CapLevelGraphRenderer = _ref => {
-  var {
-    nodes = [],
-    graphId,
-    className = '',
-    graphWidth = '500px',
-    //It can create issue in rem so keeping as same like cap-ui-library
-    graphHeight = '500px',
-    showToolTip = false,
-    connections = [],
-    graphStyles = {},
-    offsetHeight = 20,
-    defaultStartX = 0,
-    defaultStartY = 0,
-    scrollerProps = {},
-    scrollClassName = '',
-    containerStyles = {},
-    lineStrokeColor = 'gray',
-    defaultEleWidth = 100,
-    defaultEleDistance = 20,
-    offsetLineDistance = 18,
-    forwardConnProps = {},
-    reverseConnProps = {},
-    allowForwardArrowTooltip = false,
-    allowReverseArrowTooltip = false
-  } = _ref;
-  var graphRef = useRef(null);
-  var [scrollbarPosition, setScrollbarPosition] = useState(0);
-  var totalAvailWidth = nodes.length * defaultEleWidth + defaultEleDistance * (nodes.length - 1) - parseInt(String(graphWidth), 10);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Graph } from "@antv/x6";
+import "@antv/x6-react-shape";
+import classNames from "classnames";
+import get from "lodash/get";
+import { useRef, useState, useEffect, useCallback } from "react";
+import CapButton from "../CapButton/index.js";
+import CapIcon from "../CapIcon/index.js";
+import styles from "./styles.module.scss.js";
+import TooltipTool from "./Tooltip.js";
+const nodePostionObj = {};
+const edgeObj = {};
+const idSeparator = " ";
+const CapLevelGraphRenderer = ({
+  nodes = [],
+  graphId,
+  className = "",
+  graphWidth = "500px",
+  //It can create issue in rem so keeping as same like cap-ui-library
+  graphHeight = "500px",
+  showToolTip = false,
+  connections = [],
+  graphStyles = {},
+  offsetHeight = 20,
+  defaultStartX = 0,
+  defaultStartY = 0,
+  scrollerProps = {},
+  scrollClassName = "",
+  containerStyles = {},
+  lineStrokeColor = "gray",
+  defaultEleWidth = 100,
+  defaultEleDistance = 20,
+  offsetLineDistance = 18,
+  forwardConnProps = {},
+  reverseConnProps = {},
+  allowForwardArrowTooltip = false,
+  allowReverseArrowTooltip = false
+}) => {
+  const graphRef = useRef(null);
+  const [scrollbarPosition, setScrollbarPosition] = useState(0);
+  const totalAvailWidth = nodes.length * defaultEleWidth + defaultEleDistance * (nodes.length - 1) - parseInt(String(graphWidth), 10);
   useEffect(() => {
-    // Initialize graph and events
     initializeGraph();
     initializeEvents();
   }, []);
   useEffect(() => {
-    // Draw nodes after graph initialization
     drawNodes();
   }, [nodes, connections]);
   useEffect(() => {
-    // Initialize and set scroll position on pagination change
     if (graphRef.current) {
       graphRef.current.setScrollbarPosition(scrollbarPosition);
     }
   }, [nodes, connections, scrollbarPosition]);
-
-  // Initialize Graph area
-  var initializeGraph = useCallback(() => {
+  const initializeGraph = useCallback(() => {
     if (showToolTip) {
-      Graph.registerEdgeTool('tooltip', TooltipTool, true);
+      Graph.registerEdgeTool("tooltip", TooltipTool, true);
     }
-    var container = document.getElementById(graphId);
+    const container = document.getElementById(graphId);
     if (!container) {
-      console.error("[CapLevelGraphRenderer] Container with id \"" + graphId + "\" not found");
+      console.error(`[CapLevelGraphRenderer] Container with id "${graphId}" not found`);
       return;
     }
-    // Convert string width/height to numbers if needed
-    var width = typeof graphWidth === 'string' ? parseInt(graphWidth, 10) : graphWidth;
-    var height = typeof graphHeight === 'string' ? parseInt(graphHeight, 10) : graphHeight;
+    const width = typeof graphWidth === "string" ? parseInt(graphWidth, 10) : graphWidth;
+    const height = typeof graphHeight === "string" ? parseInt(graphHeight, 10) : graphHeight;
     graphRef.current = new Graph({
       container,
       resizing: false,
@@ -88,146 +69,106 @@ var CapLevelGraphRenderer = _ref => {
       height,
       // @ts-expect-error - @antv/x6 Graph options may not have complete TypeScript definitions
       fitView: true,
-      scroller: _extends({
+      scroller: {
         padding: 0,
         enabled: true,
         pannable: false,
         autoResize: true,
-        className: scrollClassName
-      }, scrollerProps),
+        className: scrollClassName,
+        ...scrollerProps
+      },
       interacting: false
     });
   }, [graphId, graphWidth, graphHeight, scrollClassName, scrollerProps, showToolTip]);
-  var drawNodes = useCallback(function (eleWidth, distance, offsetY) {
-    if (eleWidth === void 0) {
-      eleWidth = defaultEleWidth;
-    }
-    if (distance === void 0) {
-      distance = defaultEleDistance;
-    }
-    if (offsetY === void 0) {
-      offsetY = offsetHeight;
-    }
-    if (!graphRef.current) return;
-    var nextX = defaultStartX;
-    nodes.forEach((_ref2, index) => {
-      var _graphRef$current;
-      var {
-        id,
-        component,
-        height,
-        props = {},
-        toolTip = ''
-      } = _ref2;
-      var Component = component;
-      var x = nextX;
-      var y = defaultStartY;
-      var endX = nextX + eleWidth;
-      // draw the node
-      (_graphRef$current = graphRef.current) == null || _graphRef$current.addNode({
-        id,
-        x,
-        y,
-        width: eleWidth,
-        height,
-        component: /*#__PURE__*/_jsx(Component, _extends({}, props)),
-        shape: 'react-shape',
-        zIndex: 2
-      });
-
-      // Adding node positions to obj
-      nodePostionObj[id] = {
-        x,
-        y,
-        x1: endX,
-        y1: y + height,
-        height,
-        width: eleWidth,
-        toolTip
-      };
-
-      // Draw forward connection left to right - starts
-      nextX = endX + distance;
-      // Skip connection for last node
-      if (nodes[index + 1]) {
-        var _graphRef$current2;
-        // offsetY - Connection offset height from node point
-        var forwardEdgeId = "" + id + idSeparator + nodes[index + 1].id;
-        edgeObj[forwardEdgeId] = {
-          forward: true
-        };
-        (_graphRef$current2 = graphRef.current) == null || _graphRef$current2.addEdge({
-          id: forwardEdgeId,
-          sourcePoint: {
-            x: endX,
-            y: y + offsetY
-          },
-          targetPoint: {
-            x: nextX,
-            y: y + offsetY
-          },
-          attrs: {
-            line: _extends({
-              stroke: lineStrokeColor
-            }, forwardConnProps)
-          }
+  const drawNodes = useCallback(
+    (eleWidth = defaultEleWidth, distance = defaultEleDistance, offsetY = offsetHeight) => {
+      if (!graphRef.current) return;
+      let nextX = defaultStartX;
+      nodes.forEach(({ id, component, height, props = {}, toolTip = "" }, index) => {
+        var _a, _b;
+        const Component = component;
+        const x = nextX;
+        const y = defaultStartY;
+        const endX = nextX + eleWidth;
+        (_a = graphRef.current) == null ? void 0 : _a.addNode({
+          id,
+          x,
+          y,
+          width: eleWidth,
+          height,
+          component: /* @__PURE__ */ jsx(Component, { ...props }),
+          shape: "react-shape",
+          zIndex: 2
         });
-      }
-      // Forward connection ends
-    });
-    calculateAndDrawRevConnections();
-  }, [nodes, defaultEleWidth, defaultEleDistance, offsetHeight, defaultStartX, defaultStartY, lineStrokeColor, forwardConnProps]);
-
-  // Calculate levels / Split connections based on level and Draw reverse connection
-  var calculateAndDrawRevConnections = useCallback(() => {
+        nodePostionObj[id] = {
+          x,
+          y,
+          x1: endX,
+          y1: y + height,
+          height,
+          width: eleWidth,
+          toolTip
+        };
+        nextX = endX + distance;
+        if (nodes[index + 1]) {
+          const forwardEdgeId = `${id}${idSeparator}${nodes[index + 1].id}`;
+          edgeObj[forwardEdgeId] = { forward: true };
+          (_b = graphRef.current) == null ? void 0 : _b.addEdge({
+            id: forwardEdgeId,
+            sourcePoint: { x: endX, y: y + offsetY },
+            targetPoint: { x: nextX, y: y + offsetY },
+            attrs: {
+              line: {
+                stroke: lineStrokeColor,
+                ...forwardConnProps
+              }
+            }
+          });
+        }
+      });
+      calculateAndDrawRevConnections();
+    },
+    [
+      nodes,
+      defaultEleWidth,
+      defaultEleDistance,
+      offsetHeight,
+      defaultStartX,
+      defaultStartY,
+      lineStrokeColor,
+      forwardConnProps
+    ]
+  );
+  const calculateAndDrawRevConnections = useCallback(() => {
     if (!graphRef.current) return;
-    var connectionListTemp = [...connections];
-    // maintains in and out list for each node
-    var connectionObj = {};
-    // maintains connections by level
-    var levelList = [];
-    // Iterate level by level
-    for (var levelIndex = 1; levelIndex <= nodes.length; levelIndex++) {
-      var levels = [];
-      var lastTargetIndex = void 0;
-      // Iterate nodes by reverse order
-      var _loop = function _loop() {
-        var targetIndex = sourceIndex - levelIndex;
+    let connectionListTemp = [...connections];
+    const connectionObj = {};
+    const levelList = [];
+    for (let levelIndex = 1; levelIndex <= nodes.length; levelIndex++) {
+      let levels = [];
+      let lastTargetIndex;
+      for (let sourceIndex = nodes.length - 1; sourceIndex >= 0; sourceIndex--) {
+        const targetIndex = sourceIndex - levelIndex;
         if (nodes[sourceIndex] && nodes[targetIndex]) {
-          var source = nodes[sourceIndex];
-          var target = nodes[targetIndex];
-          var filterConnection = connectionListTemp.filter(_ref3 => {
-            var {
-              sourceId,
-              targetId
-            } = _ref3;
-            return source.id !== sourceId || target.id !== targetId;
-          });
-          // check if two nodes have connection or not
-          var isConnection = filterConnection.length !== connectionListTemp.length;
+          const source = nodes[sourceIndex];
+          const target = nodes[targetIndex];
+          const filterConnection = connectionListTemp.filter(
+            ({ sourceId, targetId }) => source.id !== sourceId || target.id !== targetId
+          );
+          const isConnection = filterConnection.length !== connectionListTemp.length;
           if (isConnection) {
-            // If connection, connections is assigned with filterList to avoid unwanted iteration
             connectionListTemp = filterConnection;
             if (!lastTargetIndex && levelIndex !== 1) {
               lastTargetIndex = targetIndex;
             }
-            // Put in next level when two connection get interacts
-            if (lastTargetIndex !== undefined && targetIndex <= lastTargetIndex && levelIndex !== 1) {
-              levels.push({
-                sourceId: source.id,
-                targetId: target.id
-              });
+            if (lastTargetIndex !== void 0 && targetIndex <= lastTargetIndex && levelIndex !== 1) {
+              levels.push({ sourceId: source.id, targetId: target.id });
               levelList.push(levels);
               levels = [];
             }
             if (levelIndex === 1) {
-              levels.push({
-                sourceId: source.id,
-                targetId: target.id
-              });
+              levels.push({ sourceId: source.id, targetId: target.id });
             }
-
-            // Handle connections in and out list
             if (!connectionObj[source.id]) {
               connectionObj[source.id] = {
                 in: [],
@@ -246,32 +187,20 @@ var CapLevelGraphRenderer = _ref => {
             }
           }
         }
-      };
-      for (var sourceIndex = nodes.length - 1; sourceIndex >= 0; sourceIndex--) {
-        _loop();
       }
-      // Added connection in level list
       if (levels.length > 0) {
         levelList.push(levels);
       }
     }
     drawReverseConnections(nodes, connectionObj, levelList);
   }, [connections, nodes]);
-
-  // Get height between two nodes having connection
-  // This Avoid connection overlaps over node
-  var getMaxHeight = (nodeList, sourceId, targetId) => {
-    var maxY1 = 0;
-    var isStart = false;
-    nodeList.forEach(_ref4 => {
-      var {
-        id
-      } = _ref4;
-      var position = nodePostionObj[id];
+  const getMaxHeight = (nodeList, sourceId, targetId) => {
+    let maxY1 = 0;
+    let isStart = false;
+    nodeList.forEach(({ id }) => {
+      const position = nodePostionObj[id];
       if (!position) return;
-      var {
-        y1
-      } = position;
+      const { y1 } = position;
       if (id === targetId) {
         isStart = true;
       }
@@ -284,102 +213,72 @@ var CapLevelGraphRenderer = _ref => {
     });
     return maxY1;
   };
-
-  // Draw reverse connection
-  var drawReverseConnections = (nodeList, connectionObj, levelList) => {
+  const drawReverseConnections = (nodeList, connectionObj, levelList) => {
     if (!graphRef.current) return;
-
-    // Iterate level list by level by level
     levelList.forEach((levels, index) => {
-      // Iterate connection on a each level
-      levels.forEach((_ref5, levelItemIndex) => {
-        var _graphRef$current3;
-        var {
-          sourceId,
-          targetId
-        } = _ref5;
-        var sourcePosition = nodePostionObj[sourceId];
-        var targetPosition = nodePostionObj[targetId];
+      levels.forEach(({ sourceId, targetId }, levelItemIndex) => {
+        var _a, _b;
+        const sourcePosition = nodePostionObj[sourceId];
+        const targetPosition = nodePostionObj[targetId];
         if (!sourcePosition || !targetPosition) return;
-
-        // Get source and target total connection count
-        var srcConCount = connectionObj[sourceId].in.length + connectionObj[sourceId].out.length + 1;
-        var targetConCount = connectionObj[targetId].in.length + connectionObj[targetId].out.length + 1;
-
-        // split connection based on connection count for a node
-        var x = sourcePosition.x + sourcePosition.width / srcConCount;
-        var x1 = targetPosition.x1 - targetPosition.width / targetConCount;
+        const srcConCount = connectionObj[sourceId].in.length + connectionObj[sourceId].out.length + 1;
+        const targetConCount = connectionObj[targetId].in.length + connectionObj[targetId].out.length + 1;
+        let x = sourcePosition.x + sourcePosition.width / srcConCount;
+        let x1 = targetPosition.x1 - targetPosition.width / targetConCount;
         if (connectionObj[sourceId].out.includes(targetId)) {
-          // set start position of connection, based on connection count and arrangements
           x = sourcePosition.x + sourcePosition.width / srcConCount * ([...connectionObj[sourceId].out, ...connectionObj[sourceId].in].indexOf(targetId) + 1);
         }
         if (connectionObj[targetId].in.includes(sourceId)) {
-          // set end position of connection, based on connection count and arrangements
           x1 = targetPosition.x1 - targetPosition.width / targetConCount * ([...connectionObj[targetId].in, ...connectionObj[targetId].out].indexOf(sourceId) + 1);
         }
-
-        // Handle connection overlaps over node
-        var maxHeight = getMaxHeight(nodeList, sourceId, targetId);
-        var {
-          y1: y
-        } = sourcePosition;
-        var {
-          y1
-        } = targetPosition;
-        var v1 = {
-          x,
-          y: maxHeight + offsetLineDistance * (index + 1)
-        };
-        var v2 = {
-          x: x1,
-          y: maxHeight + offsetLineDistance * (index + 1)
-        };
-        var reverseEdgeId = "" + sourceId + idSeparator + targetId;
-        edgeObj[reverseEdgeId] = {
-          reverse: true
-        };
-        (_graphRef$current3 = graphRef.current) == null || _graphRef$current3.addEdge({
+        const maxHeight = getMaxHeight(nodeList, sourceId, targetId);
+        const { y1: y } = sourcePosition;
+        const { y1 } = targetPosition;
+        const v1 = { x, y: maxHeight + offsetLineDistance * (index + 1) };
+        const v2 = { x: x1, y: maxHeight + offsetLineDistance * (index + 1) };
+        const reverseEdgeId = `${sourceId}${idSeparator}${targetId}`;
+        edgeObj[reverseEdgeId] = { reverse: true };
+        (_a = graphRef.current) == null ? void 0 : _a.addEdge({
           id: reverseEdgeId,
           sourcePoint: [x, y],
           target: [x1, y1],
           vertices: [v1, v2],
           router: {
-            name: 'orth',
+            name: "orth",
             args: {
               padding: {}
             }
           },
           attrs: {
-            line: _extends({
-              stroke: lineStrokeColor
-            }, reverseConnProps)
+            line: {
+              stroke: lineStrokeColor,
+              ...reverseConnProps
+            }
           }
-        }).setConnector('jumpover');
-        // adding empty edge at last level
+        }).setConnector("jumpover");
         if (levelList.length - 1 === index && levels.length - 1 === levelItemIndex) {
-          var _graphRef$current4;
-          var v3 = {
+          const v3 = {
             x: v1.x - 8,
             y: v1.y + 8
           };
-          var v4 = {
+          const v4 = {
             x: v2.x - 8,
             y: v2.y + 8
           };
-          (_graphRef$current4 = graphRef.current) == null || _graphRef$current4.addEdge({
-            id: "" + sourceId + idSeparator + targetId + "-end",
+          (_b = graphRef.current) == null ? void 0 : _b.addEdge({
+            id: `${sourceId}${idSeparator}${targetId}-end`,
             sourcePoint: [x, y],
             target: [x1, y1],
             vertices: [v3, v4],
             router: {
-              name: 'orth',
+              name: "orth",
               args: {
                 padding: {}
               }
             },
             attrs: {
               line: {
-                stroke: 'transparent'
+                stroke: "transparent"
               }
             }
           });
@@ -387,91 +286,85 @@ var CapLevelGraphRenderer = _ref => {
       });
     });
   };
-  var initializeEvents = useCallback(() => {
+  const initializeEvents = useCallback(() => {
     if (!graphRef.current) return;
-    graphRef.current.on('node:mousedown', data => {
-      var targetElement = get(data, 'e.target', {});
-      if (targetElement.tagName === 'INPUT') {
+    graphRef.current.on("node:mousedown", (data) => {
+      const targetElement = get(data, "e.target", {});
+      if (targetElement.tagName === "INPUT") {
         targetElement.focus();
       }
     });
     if (showToolTip) {
-      graphRef.current.on('edge:mouseenter', _ref6 => {
-        var {
-          edge = {}
-        } = _ref6;
-        var edgeId = edge.id;
+      graphRef.current.on("edge:mouseenter", ({ edge = {} }) => {
+        var _a;
+        const edgeId = edge.id;
         if (edgeId && edgeObj[edgeId] && (allowForwardArrowTooltip && edgeObj[edgeId].forward || allowReverseArrowTooltip && edgeObj[edgeId].reverse)) {
-          var [sourceId, targetId] = edgeId.split(idSeparator);
-          var sourceToolTip = get(nodePostionObj, [sourceId, 'toolTip']);
-          var targetToolTip = get(nodePostionObj, [targetId, 'toolTip']);
+          const [sourceId, targetId] = edgeId.split(idSeparator);
+          const sourceToolTip = get(nodePostionObj, [sourceId, "toolTip"]);
+          const targetToolTip = get(nodePostionObj, [targetId, "toolTip"]);
           if (sourceToolTip && targetToolTip) {
-            // Type assertion needed because @antv/x6 Edge type may not expose addTools in TypeScript definitions
-            var edgeWithTools = edge;
-            edgeWithTools.addTools == null || edgeWithTools.addTools([{
-              name: 'tooltip',
-              args: {
-                tooltip: sourceToolTip + " - " + targetToolTip
+            const edgeWithTools = edge;
+            (_a = edgeWithTools.addTools) == null ? void 0 : _a.call(edgeWithTools, [
+              {
+                name: "tooltip",
+                args: {
+                  tooltip: `${sourceToolTip} - ${targetToolTip}`
+                }
               }
-            }]);
+            ]);
           }
         }
       });
-      graphRef.current.on('edge:mouseleave', _ref7 => {
-        var {
-          edge
-        } = _ref7;
-        // Type assertion needed because @antv/x6 Edge type may not expose removeTools in TypeScript definitions
-        edge.removeTools == null || edge.removeTools();
+      graphRef.current.on("edge:mouseleave", ({ edge }) => {
+        var _a;
+        (_a = edge.removeTools) == null ? void 0 : _a.call(edge);
       });
     }
   }, [showToolTip, allowForwardArrowTooltip, allowReverseArrowTooltip]);
-  var onPreviousPageClick = useCallback(() => {
-    var newScrollValue = parseFloat((scrollbarPosition - (defaultEleWidth + defaultEleDistance)).toFixed(5));
+  const onPreviousPageClick = useCallback(() => {
+    let newScrollValue = parseFloat(
+      (scrollbarPosition - (defaultEleWidth + defaultEleDistance)).toFixed(5)
+    );
     if (newScrollValue < 0) {
       newScrollValue = 0;
     }
     if (newScrollValue >= 0) setScrollbarPosition(newScrollValue);
   }, [scrollbarPosition, defaultEleWidth, defaultEleDistance]);
-  var onNextPageClick = useCallback(() => {
-    var newScrollValue = parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5));
+  const onNextPageClick = useCallback(() => {
+    let newScrollValue = parseFloat(
+      (scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5)
+    );
     if (newScrollValue > totalAvailWidth) {
       newScrollValue = totalAvailWidth;
     }
     if (newScrollValue <= totalAvailWidth) setScrollbarPosition(newScrollValue);
   }, [nodes, scrollbarPosition, defaultEleWidth, defaultEleDistance, totalAvailWidth]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classnames("cap-level-graph-renderer-v2_lW7fP", className),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "level-graph-pagination-row_L8yI0",
-      children: /*#__PURE__*/_jsxs("div", {
-        className: "level-graph-pagination-container_ZuCVd",
-        children: [/*#__PURE__*/_jsx(CapButton, {
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-level-graph-renderer-v2"], className), children: [
+    /* @__PURE__ */ jsx("div", { className: styles["level-graph-pagination-row"], children: /* @__PURE__ */ jsxs("div", { className: styles["level-graph-pagination-container"], children: [
+      /* @__PURE__ */ jsx(
+        CapButton,
+        {
           type: "flat",
-          className: "" + "level-graph-pagination-left_tb3E6",
+          className: `${styles["level-graph-pagination-left"]}`,
           disabled: scrollbarPosition <= 0,
           onClick: onPreviousPageClick,
-          children: /*#__PURE__*/_jsx(CapIcon, {
-            type: "chevron-left"
-          })
-        }), /*#__PURE__*/_jsx(CapButton, {
+          children: /* @__PURE__ */ jsx(CapIcon, { type: "chevron-left" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CapButton,
+        {
           type: "flat",
-          className: "" + "level-graph-pagination-right_-OyIn",
+          className: `${styles["level-graph-pagination-right"]}`,
           disabled: parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5)) > totalAvailWidth,
           onClick: onNextPageClick,
-          children: /*#__PURE__*/_jsx(CapIcon, {
-            type: "chevron-right"
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: styles['graph-renderer-container'],
-      style: _extends({}, containerStyles),
-      children: /*#__PURE__*/_jsx("div", {
-        id: graphId,
-        style: _extends({}, graphStyles)
-      })
-    })]
-  });
+          children: /* @__PURE__ */ jsx(CapIcon, { type: "chevron-right" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: styles["graph-renderer-container"], style: { ...containerStyles }, children: /* @__PURE__ */ jsx("div", { id: graphId, style: { ...graphStyles } }) })
+  ] });
+};
+export {
+  CapLevelGraphRenderer as default
 };
-export default CapLevelGraphRenderer;