@capillarytech/blaze-ui 5.2.2 → 5.2.4

package/CapLevelGraphRenderer/index.js

@@ -4974,11 +4974,30 @@ var _client = __webpack_require__(5338);
 var _CapTooltip = _interopRequireDefault(__webpack_require__(85684));
 var _jsxRuntime = __webpack_require__(74848);
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Custom tooltip tool for x6 graph edges
+ * Extends ToolsView.ToolItem to provide tooltip functionality on edge hover
+ *
+ * Note: Uses type assertions for @antv/x6 properties as the library's TypeScript
+ * definitions may not fully expose all ToolItem properties.
+ */
 class TooltipTool extends _x.ToolsView.ToolItem {
+  /** DOM element for tooltip rendering */
+
+  /** Delay in milliseconds before showing/hiding tooltip */
+
+  /** Current tooltip visibility state */
+
+  /** Timer reference for delayed tooltip operations */
+
+  /** React root instance for rendering tooltip */
+
   constructor(props) {
     super(props);
     this.onMouseMove = e => {
-      window.clearTimeout(this.timer);
+      if (this.timer) {
+        window.clearTimeout(this.timer);
+      }
       this.updatePosition(e);
       this.timer = window.setTimeout(() => {
         if (this.tooltipVisible) {
@@ -4988,24 +5007,31 @@ class TooltipTool extends _x.ToolsView.ToolItem {
       }, this.delay);
     };
     this.delay = 100;
+    this.tooltipVisible = false;
   }
   render() {
     super.render();
     this.knob = _x.ToolsView.createElement('div', false);
     this.knob.style.position = 'absolute';
-    this.container.appendChild(this.knob);
+    const container = this.container;
+    container.appendChild(this.knob);
     this.updatePosition();
     document.addEventListener('mousemove', this.onMouseMove);
     return this;
   }
   toggleTooltip(visible) {
-    const root = (0, _client.createRoot)(this.knob);
+    if (!this.root) {
+      this.root = (0, _client.createRoot)(this.knob);
+    }
     if (visible) {
-      root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltip.default, {
-        title: this.options.tooltip,
-        visible: true,
+      const tooltipText = this.options.tooltip;
+      this.root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltip.default, {
+        title: tooltipText,
+        open: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
       }));
+    } else {
+      this.root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}));
     }
     this.tooltipVisible = visible;
   }
@@ -5013,8 +5039,9 @@ class TooltipTool extends _x.ToolsView.ToolItem {
     const {
       style
     } = this.knob;
-    if (e) {
-      const p = this.graph.clientToGraph(e.clientX, e.clientY);
+    const graph = this.graph;
+    if (e && graph) {
+      const p = graph.clientToGraph(e.clientX, e.clientY);
       style.display = 'block';
       style.left = p.x + "px";
       style.top = p.y + "px";
@@ -5026,18 +5053,36 @@ class TooltipTool extends _x.ToolsView.ToolItem {
   }
   onMouseLeave() {
     this.updatePosition();
-    window.clearTimeout(this.timer);
-    window.setTimeout(() => this.toggleTooltip(false), this.delay);
+    if (this.timer) {
+      window.clearTimeout(this.timer);
+    }
+    this.timer = window.setTimeout(() => {
+      this.toggleTooltip(false);
+    }, this.delay);
     document.removeEventListener('mousemove', this.onMouseMove);
   }
   delegateEvents() {
-    this.cellView.on('cell:mouseleave', this.onMouseLeave, this);
+    const cellView = this.cellView;
+    cellView.on('cell:mouseleave', this.onMouseLeave, this);
     return super.delegateEvents();
   }
   onRemove() {
-    this.cellView.off('cell:mouseleave', this.onMouseLeave, this);
+    const cellView = this.cellView;
+    cellView.off('cell:mouseleave', this.onMouseLeave);
+    if (this.timer) {
+      window.clearTimeout(this.timer);
+    }
+    if (this.root) {
+      this.root.unmount();
+    }
+    document.removeEventListener('mousemove', this.onMouseMove);
   }
 }
+
+/**
+ * Type for TooltipTool config method
+ */
+
 TooltipTool.config({
   tagName: 'div',
   isSVGElement: false
@@ -12639,15 +12684,14 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.cap-level-graph-renderer-v2 .level-graph-pagination-container,.cap-level-graph-renderer-v2 .level-graph-pagination-row,.cap-level-graph-renderer-v2 .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-right{display:flex}.cap-level-graph-renderer-v2 .level-graph-pagination-row{justify-content:flex-end;height:1.714rem;margin-bottom:2.571rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left{margin-right:1.714rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left>span+.anticon{margin:0}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-right{justify-content:center;align-items:center;min-width:fit-content;height:100%;padding:0}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-level-graph-renderer-v2 .level-graph-pagination-container,.cap-level-graph-renderer-v2 .level-graph-pagination-row,.cap-level-graph-renderer-v2 .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-right{display:flex}.cap-level-graph-renderer-v2 .level-graph-pagination-row{justify-content:flex-end;height:1.714rem;margin-bottom:2.571rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left{margin-right:1.714rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left > span + .anticon{margin:0}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-right{justify-content:center;align-items:center;min-width:fit-content;height:100%;padding:0}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"cap-level-graph-renderer-v2": `cap-level-graph-renderer-v2`,
 	"level-graph-pagination-container": `level-graph-pagination-container`,
 	"level-graph-pagination-row": `level-graph-pagination-row`,
 	"level-graph-pagination-left": `level-graph-pagination-left`,
-	"level-graph-pagination-right": `level-graph-pagination-right`,
-	"anticon": `anticon`
+	"level-graph-pagination-right": `level-graph-pagination-right`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -17906,11 +17950,10 @@ var _x = __webpack_require__(28890);
 __webpack_require__(90460);
 var _classnames = _interopRequireDefault(__webpack_require__(46942));
 var _get = _interopRequireDefault(__webpack_require__(58156));
-var _propTypes = _interopRequireDefault(__webpack_require__(43363));
 var _react = _interopRequireWildcard(__webpack_require__(9206));
 var _CapButton = _interopRequireDefault(__webpack_require__(80739));
 var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
-__webpack_require__(50742);
+var _styles = _interopRequireDefault(__webpack_require__(50742));
 var _Tooltip = _interopRequireDefault(__webpack_require__(30405));
 var _jsxRuntime = __webpack_require__(74848);
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -17924,62 +17967,73 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * Mock Data
  * nodes = [{ id: 'tier1', height: 295 }, { id: 'tier2', height: 500 }]
  * connections = [ { sourceId: 'tier2', targetId: 'tier1' }]
- */
+ */ // Type for Edge with addTools/removeTools methods (not in @antv/x6 TypeScript definitions)
 const nodePostionObj = {};
 const edgeObj = {};
 const idSeparator = ' ';
 const CapLevelGraphRenderer = _ref => {
   let {
-    nodes,
+    nodes = [],
     graphId,
-    className,
-    graphWidth,
-    showToolTip,
-    connections,
-    graphStyles,
-    graphHeight,
-    offsetHeight,
-    defaultStartX,
-    defaultStartY,
-    scrollerProps,
-    containerStyles,
-    lineStrokeColor,
-    defaultEleWidth,
-    scrollClassName,
-    forwardConnProps,
-    reverseConnProps,
-    defaultEleDistance,
-    offsetLineDistance,
-    allowForwardArrowTooltip,
-    allowReverseArrowTooltip
+    className = '',
+    graphWidth = '500px',
+    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;
   const graphRef = (0, _react.useRef)(null);
   const [scrollbarPosition, setScrollbarPosition] = (0, _react.useState)(0);
-  const totalAvailWidth = nodes.length * defaultEleWidth + defaultEleDistance * (nodes.length - 1) - parseInt(graphWidth, 10);
+  const totalAvailWidth = nodes.length * defaultEleWidth + defaultEleDistance * (nodes.length - 1) - parseInt(String(graphWidth), 10);
   (0, _react.useEffect)(() => {
-    // Initlize graph and events
+    // Initialize graph and events
     initializeGraph();
     initializeEvents();
   }, []);
   (0, _react.useEffect)(() => {
-    // Draw nodes after graph inilization
+    // Draw nodes after graph initialization
     drawNodes();
   }, [nodes, connections]);
   (0, _react.useEffect)(() => {
-    // Initilize and set scroll position on pagination change
-    graphRef.current.setScrollbarPosition(scrollbarPosition);
+    // Initialize and set scroll position on pagination change
+    if (graphRef.current) {
+      graphRef.current.setScrollbarPosition(scrollbarPosition);
+    }
   }, [nodes, connections, scrollbarPosition]);
 
-  // Initlize Graph area
+  // Initialize Graph area
   const initializeGraph = (0, _react.useCallback)(() => {
     if (showToolTip) {
       _x.Graph.registerEdgeTool('tooltip', _Tooltip.default, true);
     }
+    const container = document.getElementById(graphId);
+    if (!container) {
+      console.error("[CapLevelGraphRenderer] Container with id \"" + graphId + "\" not found");
+      return;
+    }
+    // Convert string width/height to numbers if needed
+    const width = typeof graphWidth === 'string' ? parseInt(graphWidth, 10) : graphWidth;
+    const height = typeof graphHeight === 'string' ? parseInt(graphHeight, 10) : graphHeight;
     graphRef.current = new _x.Graph({
-      container: document.getElementById(graphId),
+      container,
       resizing: false,
-      width: graphWidth,
-      height: graphHeight,
+      width,
+      height,
+      // @ts-expect-error - @antv/x6 Graph options may not have complete TypeScript definitions
       fitView: true,
       scroller: _extends({
         padding: 0,
@@ -17990,7 +18044,7 @@ const CapLevelGraphRenderer = _ref => {
       }, scrollerProps),
       interacting: false
     });
-  }, []);
+  }, [graphId, graphWidth, graphHeight, scrollClassName, scrollerProps, showToolTip]);
   const drawNodes = (0, _react.useCallback)(function (eleWidth, distance, offsetY) {
     if (eleWidth === void 0) {
       eleWidth = defaultEleWidth;
@@ -18001,13 +18055,15 @@ const CapLevelGraphRenderer = _ref => {
     if (offsetY === void 0) {
       offsetY = offsetHeight;
     }
+    if (!graphRef.current) return;
     let nextX = defaultStartX;
     nodes.forEach((_ref2, index) => {
+      var _graphRef$current;
       let {
         id,
         component,
         height,
-        props,
+        props = {},
         toolTip = ''
       } = _ref2;
       const Component = component;
@@ -18015,7 +18071,7 @@ const CapLevelGraphRenderer = _ref => {
       const y = defaultStartY;
       const endX = nextX + eleWidth;
       // draw the node
-      graphRef.current.addNode({
+      (_graphRef$current = graphRef.current) == null || _graphRef$current.addNode({
         id,
         x,
         y,
@@ -18026,7 +18082,7 @@ const CapLevelGraphRenderer = _ref => {
         zIndex: 2
       });
 
-      // Adding node poisitions to obj
+      // Adding node positions to obj
       nodePostionObj[id] = {
         x,
         y,
@@ -18041,12 +18097,13 @@ const CapLevelGraphRenderer = _ref => {
       nextX = endX + distance;
       // Skip connection for last node
       if (nodes[index + 1]) {
+        var _graphRef$current2;
         // offsetY - Connection offset height from node point
         const forwardEdgeId = "" + id + idSeparator + nodes[index + 1].id;
         edgeObj[forwardEdgeId] = {
           forward: true
         };
-        graphRef.current.addEdge({
+        (_graphRef$current2 = graphRef.current) == null || _graphRef$current2.addEdge({
           id: forwardEdgeId,
           sourcePoint: {
             x: endX,
@@ -18065,12 +18122,13 @@ const CapLevelGraphRenderer = _ref => {
       }
       // Forward connection ends
     });
-    calculateAndDrawRevConnections(nodes);
-  }, [nodes]);
+    calculateAndDrawRevConnections();
+  }, [nodes, defaultEleWidth, defaultEleDistance, offsetHeight, defaultStartX, defaultStartY, lineStrokeColor, forwardConnProps]);
 
   // Calculate levels / Split connections based on level and Draw reverse connection
   const calculateAndDrawRevConnections = (0, _react.useCallback)(() => {
-    let connectionListTemp = connections;
+    if (!graphRef.current) return;
+    let connectionListTemp = [...connections];
     // maintains in and out list for each node
     const connectionObj = {};
     // maintains connections by level
@@ -18093,15 +18151,15 @@ const CapLevelGraphRenderer = _ref => {
             return source.id !== sourceId || target.id !== targetId;
           });
           // check if two nodes have connection or not
-          const isConncection = filterConnection.length !== connectionListTemp.length;
-          if (isConncection) {
+          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 intracts
-            if (targetIndex <= lastTargetIndex && levelIndex !== 1) {
+            // Put in next level when two connection get interacts
+            if (lastTargetIndex !== undefined && targetIndex <= lastTargetIndex && levelIndex !== 1) {
               levels.push({
                 sourceId: source.id,
                 targetId: target.id
@@ -18144,8 +18202,8 @@ const CapLevelGraphRenderer = _ref => {
     drawReverseConnections(nodes, connectionObj, levelList);
   }, [connections, nodes]);
 
-  // Get height bewteen a two nodes having connection
-  // This Avoid connection overloops over node
+  // Get height between two nodes having connection
+  // This Avoid connection overlaps over node
   const getMaxHeight = (nodeList, sourceId, targetId) => {
     let maxY1 = 0;
     let isStart = false;
@@ -18153,9 +18211,11 @@ const CapLevelGraphRenderer = _ref => {
       let {
         id
       } = _ref4;
+      const position = nodePostionObj[id];
+      if (!position) return;
       const {
         y1
-      } = nodePostionObj[id];
+      } = position;
       if (id === targetId) {
         isStart = true;
       }
@@ -18171,38 +18231,45 @@ const CapLevelGraphRenderer = _ref => {
 
   // Draw reverse connection
   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;
         let {
           sourceId,
           targetId
         } = _ref5;
+        const sourcePosition = nodePostionObj[sourceId];
+        const targetPosition = nodePostionObj[targetId];
+        if (!sourcePosition || !targetPosition) return;
+
         // Get source and target total connection count
         const srcConCount = connectionObj[sourceId].in.length + connectionObj[sourceId].out.length + 1;
         const targetConCount = connectionObj[targetId].in.length + connectionObj[targetId].out.length + 1;
 
         // split connection based on connection count for a node
-        let x = nodePostionObj[sourceId].x + nodePostionObj[sourceId].width / srcConCount;
-        let x1 = nodePostionObj[targetId].x1 - nodePostionObj[targetId].width / targetConCount;
+        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 = nodePostionObj[sourceId].x + nodePostionObj[sourceId].width / srcConCount * ([...connectionObj[sourceId].out, ...connectionObj[sourceId].in].indexOf(targetId) + 1);
+          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 = nodePostionObj[targetId].x1 - nodePostionObj[targetId].width / targetConCount * ([...connectionObj[targetId].in, ...connectionObj[targetId].out].indexOf(sourceId) + 1);
+          x1 = targetPosition.x1 - targetPosition.width / targetConCount * ([...connectionObj[targetId].in, ...connectionObj[targetId].out].indexOf(sourceId) + 1);
         }
 
-        // Handle connection overloops over node
+        // Handle connection overlaps over node
         const maxHeight = getMaxHeight(nodeList, sourceId, targetId);
         const {
           y1: y
-        } = nodePostionObj[sourceId];
+        } = sourcePosition;
         const {
           y1
-        } = nodePostionObj[targetId];
+        } = targetPosition;
         const v1 = {
           x,
           y: maxHeight + offsetLineDistance * (index + 1)
@@ -18215,7 +18282,7 @@ const CapLevelGraphRenderer = _ref => {
         edgeObj[reverseEdgeId] = {
           reverse: true
         };
-        graphRef.current.addEdge({
+        (_graphRef$current3 = graphRef.current) == null || _graphRef$current3.addEdge({
           id: reverseEdgeId,
           sourcePoint: [x, y],
           target: [x1, y1],
@@ -18232,8 +18299,9 @@ const CapLevelGraphRenderer = _ref => {
             }, reverseConnProps)
           }
         }).setConnector('jumpover');
-        // adding emtpy edge at last level
+        // adding empty edge at last level
         if (levelList.length - 1 === index && levels.length - 1 === levelItemIndex) {
+          var _graphRef$current4;
           const v3 = {
             x: v1.x - 8,
             y: v1.y + 8
@@ -18242,7 +18310,7 @@ const CapLevelGraphRenderer = _ref => {
             x: v2.x - 8,
             y: v2.y + 8
           };
-          graphRef.current.addEdge({
+          (_graphRef$current4 = graphRef.current) == null || _graphRef$current4.addEdge({
             id: "" + sourceId + idSeparator + targetId + "-end",
             sourcePoint: [x, y],
             target: [x1, y1],
@@ -18264,6 +18332,7 @@ const CapLevelGraphRenderer = _ref => {
     });
   };
   const initializeEvents = (0, _react.useCallback)(() => {
+    if (!graphRef.current) return;
     graphRef.current.on('node:mousedown', data => {
       const targetElement = (0, _get.default)(data, 'e.target', {});
       if (targetElement.tagName === 'INPUT') {
@@ -18276,12 +18345,13 @@ const CapLevelGraphRenderer = _ref => {
           edge = {}
         } = _ref6;
         const edgeId = edge.id;
-        if (edgeObj[edgeId] && (allowForwardArrowTooltip && edgeObj[edgeId].forward || allowReverseArrowTooltip && edgeObj[edgeId].reverse)) {
+        if (edgeId && edgeObj[edgeId] && (allowForwardArrowTooltip && edgeObj[edgeId].forward || allowReverseArrowTooltip && edgeObj[edgeId].reverse)) {
           const [sourceId, targetId] = edgeId.split(idSeparator);
           const sourceToolTip = (0, _get.default)(nodePostionObj, [sourceId, 'toolTip']);
           const targetToolTip = (0, _get.default)(nodePostionObj, [targetId, 'toolTip']);
           if (sourceToolTip && targetToolTip) {
-            edge.addTools([{
+            // Type assertion needed because @antv/x6 Edge type may not expose addTools in TypeScript definitions
+            edge.addTools == null || edge.addTools([{
               name: 'tooltip',
               args: {
                 tooltip: sourceToolTip + " - " + targetToolTip
@@ -18294,33 +18364,34 @@ const CapLevelGraphRenderer = _ref => {
         let {
           edge
         } = _ref7;
-        edge.removeTools();
+        // Type assertion needed because @antv/x6 Edge type may not expose removeTools in TypeScript definitions
+        edge.removeTools == null || edge.removeTools();
       });
     }
-  });
+  }, [showToolTip, allowForwardArrowTooltip, allowReverseArrowTooltip]);
   const onPreviousPageClick = (0, _react.useCallback)(() => {
-    let newScrollValue = parseFloat((scrollbarPosition - (defaultEleWidth + defaultEleDistance)).toFixed(5), 10);
+    let newScrollValue = parseFloat((scrollbarPosition - (defaultEleWidth + defaultEleDistance)).toFixed(5));
     if (newScrollValue < 0) {
       newScrollValue = 0;
     }
     if (newScrollValue >= 0) setScrollbarPosition(newScrollValue);
-  }, [scrollbarPosition]);
+  }, [scrollbarPosition, defaultEleWidth, defaultEleDistance]);
   const onNextPageClick = (0, _react.useCallback)(() => {
-    let newScrollValue = parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5), 10);
+    let newScrollValue = parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5));
     if (newScrollValue > totalAvailWidth) {
       newScrollValue = totalAvailWidth;
     }
     if (newScrollValue <= totalAvailWidth) setScrollbarPosition(newScrollValue);
-  }, [nodes, scrollbarPosition]);
+  }, [nodes, scrollbarPosition, defaultEleWidth, defaultEleDistance, totalAvailWidth]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('cap-level-graph-renderer-v2', className),
+    className: (0, _classnames.default)(_styles.default['cap-level-graph-renderer-v2'], className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "level-graph-pagination-row",
+      className: _styles.default['level-graph-pagination-row'],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "level-graph-pagination-container",
+        className: _styles.default['level-graph-pagination-container'],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapButton.default, {
           type: "flat",
-          className: "pointer-cursor level-graph-pagination-left",
+          className: "pointer-cursor " + _styles.default['level-graph-pagination-left'],
           disabled: scrollbarPosition <= 0,
           onClick: onPreviousPageClick,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
@@ -18328,8 +18399,8 @@ const CapLevelGraphRenderer = _ref => {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapButton.default, {
           type: "flat",
-          className: "pointer-cursor level-graph-pagination-right",
-          disabled: parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5), 10) > totalAvailWidth,
+          className: "pointer-cursor " + _styles.default['level-graph-pagination-right'],
+          disabled: parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5)) > totalAvailWidth,
           onClick: onNextPageClick,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
             type: "chevron-right"
@@ -18337,7 +18408,7 @@ const CapLevelGraphRenderer = _ref => {
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "graph-renderer-container",
+      className: _styles.default['graph-renderer-container'],
       style: _extends({}, containerStyles),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         id: graphId,
@@ -18346,53 +18417,6 @@ const CapLevelGraphRenderer = _ref => {
     })]
   });
 };
-CapLevelGraphRenderer.propTypes = {
-  nodes: _propTypes.default.array,
-  showToolTip: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  connections: _propTypes.default.array,
-  graphStyles: _propTypes.default.object,
-  offsetHeight: _propTypes.default.number,
-  defaultStartX: _propTypes.default.number,
-  defaultStartY: _propTypes.default.number,
-  scrollerProps: _propTypes.default.object,
-  scrollClassName: _propTypes.default.string,
-  containerStyles: _propTypes.default.object,
-  lineStrokeColor: _propTypes.default.string,
-  defaultEleWidth: _propTypes.default.number,
-  reverseConnProps: _propTypes.default.object,
-  forwardConnProps: _propTypes.default.object,
-  defaultEleDistance: _propTypes.default.number,
-  offsetLineDistance: _propTypes.default.number,
-  graphId: _propTypes.default.string.isRequired,
-  graphWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  graphHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  allowForwardArrowTooltip: _propTypes.default.bool,
-  allowReverseArrowTooltip: _propTypes.default.bool
-};
-CapLevelGraphRenderer.defaultProps = {
-  nodes: [],
-  className: '',
-  graphStyles: {},
-  connections: [],
-  defaultStartX: 0,
-  defaultStartY: 0,
-  offsetHeight: 20,
-  scrollerProps: {},
-  showToolTip: false,
-  containerStyles: {},
-  graphWidth: '500px',
-  scrollClassName: '',
-  graphHeight: '500px',
-  reverseConnProps: {},
-  forwardConnProps: {},
-  defaultEleWidth: 100,
-  defaultEleDistance: 20,
-  offsetLineDistance: 18,
-  lineStrokeColor: 'gray',
-  allowForwardArrowTooltip: false,
-  allowReverseArrowTooltip: false
-};
 var _default = exports["default"] = CapLevelGraphRenderer;
 })();