datastake-daf 0.6.367 → 0.6.369

package/dist/components/index.js

@@ -51013,12 +51013,14 @@ function DualAxesChart(_ref) {
   });
 }
 
+// components/Nodes/PrimaryNode.jsx
 const MAIN_NODE_WIDTH = 300;
 const MAIN_NODE_HEIGHT = 150;
 function PrimaryNode({
   id,
   data
 }) {
+  const isPdf = data?.isPdf; // Get isPdf from data prop
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.Handle, {
       type: "source",
@@ -51037,8 +51039,9 @@ function PrimaryNode({
         opacity: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(Style$f, {
+      $isPdf: isPdf,
       className: "flex",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [" ", /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "left flex flex-column justify-center",
         style: {
           background: data.backgroundColor || "#ade9e1",
@@ -51148,13 +51151,20 @@ function PrimaryNode({
 }
 const Style$f = dt.div`
   width: ${MAIN_NODE_WIDTH}px;
+  height: ${MAIN_NODE_HEIGHT}px; /* Explicitly set height */
   display: flex;
   background: white;
   border-radius: 8px;
-  box-shadow: 0px 3.76px 10.03px 0px #00000014;
-  box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
   overflow: hidden;
-  box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+  /* Conditional styles for PDF vs screen */
+  ${props => props.$isPdf ? `
+        border: 1px solid var(--base-gray-30); /* Ensure a visible border in PDF */
+        box-shadow: none; /* Remove shadow for PDF */
+      ` : `
+        box-shadow: 0px 3.76px 10.03px 0px #00000014, 0px 1.88px 3.76px -2.51px #0000001f, 0px 5.64px 17.56px 5.02px #0000000d;
+      `}
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
 
   .left {
     width: 32px;
@@ -51246,7 +51256,8 @@ PrimaryNode.propTypes = {
     icon: PropTypes__default["default"].string,
     backgroundColor: PropTypes__default["default"].string,
     totalSources: PropTypes__default["default"].number,
-    onClick: PropTypes__default["default"].func
+    onClick: PropTypes__default["default"].func,
+    isPdf: PropTypes__default["default"].bool
   })
 };
 
@@ -51367,7 +51378,9 @@ const Style$e = dt.div`
 	}
 `;
 
+// components/Nodes/NameNode.jsx
 const NAME_CARD_WIDTH = 315;
+const NAME_CARD_HEIGHT = 37;
 const {
   useToken: useToken$7
 } = antd.theme;
@@ -51486,16 +51499,17 @@ function NameNode({
 }
 const Style$d = dt.div`
     width: ${NAME_CARD_WIDTH}px;
+    height: ${NAME_CARD_HEIGHT}px;
     display: flex;
     background: white;
     border-radius: 8px;
-    /* Box-shadows for screen */
-    box-shadow: 0px 3.76px 10.03px 0px #00000014;
-    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
     overflow: hidden;
-    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
-    /* Ensure borders/colors survive PDF rendering */
-    border: ${props => props.$isPdf ? '1px solid var(--base-gray-30)' : 'none'};
+    ${props => props.$isPdf ? `
+        border: 1px solid var(--base-gray-30);
+        box-shadow: none;
+      ` : `
+        box-shadow: 0px 3.76px 10.03px 0px #00000014, 0px 1.88px 3.76px -2.51px #0000001f, 0px 5.64px 17.56px 5.02px #0000000d;
+      `}
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
 
@@ -51507,9 +51521,11 @@ const Style$d = dt.div`
     }
 
     .right {
-        padding: 16px 12px;
+        padding: 0px 12px;
         width: 100%;
-        border-bottom: 1px solid var(--base-gray-30);
+        display: flex;
+        align-items: center;
+        border-bottom: none;
     }
 `;
 
@@ -51736,6 +51752,7 @@ function ExpandedNode({
   });
 }
 
+// components/Edges/TooltipEdge.jsx
 function ToolTipEdge({
   sourceX,
   sourceY,
@@ -51745,7 +51762,20 @@ function ToolTipEdge({
   data,
   targetPosition
 }) {
-  const [smoothPath] = react.getSmoothStepPath({
+  const {
+    isOnlyOne,
+    isPdf
+  } = data; // Destructure isPdf from data
+
+  const [edgePath] = isPdf && isOnlyOne // Condition for straight path in PDF for single nodes
+  ? react.getStraightPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  }) : react.getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -51762,8 +51792,8 @@ function ToolTipEdge({
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.BaseEdge, {
-      path: smoothPath
-    }), /*#__PURE__*/jsxRuntime.jsx(react.EdgeLabelRenderer, {
+      path: edgePath
+    }), " ", /*#__PURE__*/jsxRuntime.jsx(react.EdgeLabelRenderer, {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "button-edge__label nodrag nopan",
         style: {
@@ -51961,6 +51991,7 @@ function VerticalPathEdge({
   });
 }
 
+// components/Edges/DefaultEdge.jsx
 const ACTIVE_OPACITY = 1;
 const DISABLED_OPACITY = 0.5;
 const EDGE_STROKE = "#9DA4AE";
@@ -51980,12 +52011,22 @@ function DefaultEdge({
     associatedNodes = [],
     renderTooltipItems = () => [],
     getTotal = () => 0,
-    tooltipTitle
+    tooltipTitle,
+    isPdf // Destructure isPdf from data
   } = data;
   const isSelected = associatedNodes?.includes(source) && associatedNodes?.includes(target) && activeNode;
   const opacity = activeNode ? isSelected ? ACTIVE_OPACITY : DISABLED_OPACITY : ACTIVE_OPACITY;
   const arrowHeadId = `arrow-head-${id}`;
-  const [edgePath] = react.getSmoothStepPath({
+  const [edgePath] = isPdf // Use straight path for PDF
+  ? react.getStraightPath({
+    sourceX,
+    sourceY,
+    sourcePosition: data.type === "left" ? react.Position.Left : react.Position.Right,
+    targetX,
+    targetY,
+    targetPosition: data.type === "left" ? react.Position.Right : react.Position.Left
+  }) : react.getSmoothStepPath({
+    // Use smooth path for normal rendering
     sourceX,
     sourceY,
     targetX,
@@ -52613,7 +52654,7 @@ const DATA_NODE_SIZE = {
   },
   nameNode: {
     width: NAME_CARD_WIDTH,
-    height: ICON_NODE_HEIGHT
+    height: NAME_CARD_HEIGHT
   }
 };
 function positionIconNodes(_ref) {
@@ -52678,19 +52719,40 @@ function positionDataNodes(_ref2) {
     }
     return DEFAULT_SIBLING_SPACE;
   };
-  const Y_SPACE_FROM_SIBLINGS = siblingSpace();
+  siblingSpace();
   const X_SPACE_FROM_ICON_NODE = 130;
-  const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
-  const totalHeight = total * MIN_SPACE_REQUIRED;
-  const iconNodeCenterY = iconNode.position.y + ICON_NODE_HEIGHT / 2 + (hasContent ? 26.5 : type === "primaryNode" ? 15 : 16.5);
-  const startY = iconNodeCenterY - totalHeight / 2;
-  const END_Y = startY + totalHeight;
-  const yOffset = index * MIN_SPACE_REQUIRED;
-  let yPosition = startY + yOffset;
-  if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
-    yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
-  } else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
-    yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+  iconNode.position.y + ICON_NODE_HEIGHT / 2 + (hasContent ? 26.5 : type === "primaryNode" ? 15 : 16.5);
+  let yPosition;
+  const iconNodeHandleCenterY = iconNode.position.y + ICON_NODE_HEIGHT / 2 + (hasContent ? 10 : 0);
+  if (type === "nameNode" && total === 1) {
+    yPosition = iconNodeHandleCenterY - DATA_NODE_HEIGHT / 2;
+  } else {
+    const siblingSpace = () => {
+      var _iconNode$data2;
+      if (type === "primaryNode") {
+        var _iconNode$data$childr2;
+        if ((iconNode === null || iconNode === void 0 || (_iconNode$data$childr2 = iconNode.data.children) === null || _iconNode$data$childr2 === void 0 ? void 0 : _iconNode$data$childr2.length) === 1 && hasContent) {
+          return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+        }
+        return DEFAULT_PRIMARY_NODE_SPACE;
+      }
+      if ((iconNode === null || iconNode === void 0 || (_iconNode$data2 = iconNode.data) === null || _iconNode$data2 === void 0 || (_iconNode$data2 = _iconNode$data2.children) === null || _iconNode$data2 === void 0 ? void 0 : _iconNode$data2.length) === 0) {
+        return NO_CHILDREN_SIBLING_SPACE;
+      }
+      return DEFAULT_SIBLING_SPACE;
+    };
+    const Y_SPACE_FROM_SIBLINGS = siblingSpace();
+    const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+    const totalHeight = total * MIN_SPACE_REQUIRED;
+    const startY = iconNodeHandleCenterY - totalHeight / 2;
+    const END_Y = startY + totalHeight;
+    const yOffset = index * MIN_SPACE_REQUIRED;
+    yPosition = startY + yOffset;
+    if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+      yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
+    } else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+      yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+    }
   }
   return {
     x: isLeftSide ? iconNode.position.x - (DATA_NODE_WIDTH + X_SPACE_FROM_ICON_NODE) : iconNode.position.x + (X_SPACE_FROM_ICON_NODE + ICON_NODE_WIDTH),
@@ -52736,7 +52798,8 @@ function StakeholderMappings(_ref3) {
           isEmpty: true,
           name: emptyString,
           icon: (data === null || data === void 0 ? void 0 : data.icon) || "DashboardStakeholder",
-          t: t
+          t: t,
+          isPdf: isPdf
         },
         position: {
           x: centerX - MAIN_NODE_WIDTH / 2,
@@ -52758,7 +52821,8 @@ function StakeholderMappings(_ref3) {
         onClick: (data === null || data === void 0 ? void 0 : data.onClick) || undefined,
         totalSources: data === null || data === void 0 ? void 0 : data.totalSources,
         backgroundColor: (data === null || data === void 0 ? void 0 : data.backgroundColor) || "#ade9e1",
-        iconColor: (data === null || data === void 0 ? void 0 : data.iconColor) || "#08949a"
+        iconColor: (data === null || data === void 0 ? void 0 : data.iconColor) || "#08949a",
+        isPdf: isPdf
       },
       position: {
         x: centerX - MAIN_NODE_WIDTH / 2,
@@ -52808,11 +52872,13 @@ function StakeholderMappings(_ref3) {
       setSelectedIconNodes(openIconNOdes.map(node => node.id));
     }
     const dataNodes = openIconNOdes.flatMap(node => {
+      var _node$data, _node$data2;
       const children = node.data.children || [];
       const total = (children === null || children === void 0 ? void 0 : children.length) || 0;
       const iconNodeId = node.id;
+      (node === null || node === void 0 || (_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.content) !== undefined && (node === null || node === void 0 || (_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.content) !== null;
       if (children.length === 0) {
-        var _node$data, _node$data2, _node$data3, _node$data4, _node$data5;
+        var _node$data3, _node$data4, _node$data5, _node$data6, _node$data7;
         iconEdges.push({
           id: "".concat(node.id, "-empty"),
           source: node.id,
@@ -52820,7 +52886,8 @@ function StakeholderMappings(_ref3) {
           type: "tooltipEdge",
           data: {
             isEmpty: true,
-            isOnlyOne: true
+            isOnlyOne: true,
+            isPdf: isPdf
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52830,9 +52897,10 @@ function StakeholderMappings(_ref3) {
           type: "nameNode",
           data: {
             isEmpty: true,
-            name: ((_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.emptyName) || "No".concat((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.name, " identified"),
-            icon: (_node$data3 = node.data) === null || _node$data3 === void 0 ? void 0 : _node$data3.type,
-            t: t
+            name: ((_node$data3 = node.data) === null || _node$data3 === void 0 ? void 0 : _node$data3.emptyName) || "No".concat((_node$data4 = node.data) === null || _node$data4 === void 0 ? void 0 : _node$data4.name, " identified"),
+            icon: (_node$data5 = node.data) === null || _node$data5 === void 0 ? void 0 : _node$data5.type,
+            t: t,
+            isPdf: isPdf
           },
           position: positionDataNodes({
             isLeftSide: node.data.order % 2 !== 0,
@@ -52842,21 +52910,22 @@ function StakeholderMappings(_ref3) {
             total: 1,
             mainNode,
             type: "nameNode",
-            hasContent: (node === null || node === void 0 || (_node$data4 = node.data) === null || _node$data4 === void 0 ? void 0 : _node$data4.content) !== undefined && (node === null || node === void 0 || (_node$data5 = node.data) === null || _node$data5 === void 0 ? void 0 : _node$data5.content) !== null ? true : false
+            hasContent: (node === null || node === void 0 || (_node$data6 = node.data) === null || _node$data6 === void 0 ? void 0 : _node$data6.content) !== undefined && (node === null || node === void 0 || (_node$data7 = node.data) === null || _node$data7 === void 0 ? void 0 : _node$data7.content) !== null ? true : false
           })
         }];
       }
       if (isPdf) {
-        var _node$data6, _node$data7, _node$data8, _node$data9, _node$data10, _node$data11, _node$data12, _node$data13, _node$data14;
+        var _node$data8, _node$data9, _node$data10, _node$data11, _node$data12, _node$data13, _node$data14, _node$data15, _node$data16;
         iconEdges.push({
           id: "".concat(node.id, "-empty"),
           source: node.id,
           target: node.data.name + "-name-node",
           type: "tooltipEdge",
           data: {
-            name: node === null || node === void 0 || (_node$data6 = node.data) === null || _node$data6 === void 0 ? void 0 : _node$data6.name,
-            content: node === null || node === void 0 || (_node$data7 = node.data) === null || _node$data7 === void 0 ? void 0 : _node$data7.content,
-            isOnlyOne: true
+            name: node === null || node === void 0 || (_node$data8 = node.data) === null || _node$data8 === void 0 ? void 0 : _node$data8.name,
+            content: node === null || node === void 0 || (_node$data9 = node.data) === null || _node$data9 === void 0 ? void 0 : _node$data9.content,
+            isOnlyOne: true,
+            isPdf: true
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52865,11 +52934,11 @@ function StakeholderMappings(_ref3) {
           id: node.data.name + "-name-node",
           type: "nameNode",
           data: {
-            name: node === null || node === void 0 || (_node$data8 = node.data) === null || _node$data8 === void 0 ? void 0 : _node$data8.name,
-            content: node === null || node === void 0 || (_node$data9 = node.data) === null || _node$data9 === void 0 ? void 0 : _node$data9.content,
-            icon: (_node$data10 = node.data) === null || _node$data10 === void 0 ? void 0 : _node$data10.type,
-            backgroundColor: node === null || node === void 0 || (_node$data11 = node.data) === null || _node$data11 === void 0 ? void 0 : _node$data11.activeColour,
-            iconColor: node === null || node === void 0 || (_node$data12 = node.data) === null || _node$data12 === void 0 ? void 0 : _node$data12.hoverColor,
+            name: node === null || node === void 0 || (_node$data10 = node.data) === null || _node$data10 === void 0 ? void 0 : _node$data10.name,
+            content: node === null || node === void 0 || (_node$data11 = node.data) === null || _node$data11 === void 0 ? void 0 : _node$data11.content,
+            icon: (_node$data12 = node.data) === null || _node$data12 === void 0 ? void 0 : _node$data12.type,
+            backgroundColor: node === null || node === void 0 || (_node$data13 = node.data) === null || _node$data13 === void 0 ? void 0 : _node$data13.activeColour,
+            iconColor: node === null || node === void 0 || (_node$data14 = node.data) === null || _node$data14 === void 0 ? void 0 : _node$data14.hoverColor,
             isPdf: true,
             t: t
           },
@@ -52882,12 +52951,12 @@ function StakeholderMappings(_ref3) {
             total: 1,
             mainNode,
             type: "nameNode",
-            hasContent: (node === null || node === void 0 || (_node$data13 = node.data) === null || _node$data13 === void 0 ? void 0 : _node$data13.content) !== undefined && (node === null || node === void 0 || (_node$data14 = node.data) === null || _node$data14 === void 0 ? void 0 : _node$data14.content) !== null ? true : false
+            hasContent: (node === null || node === void 0 || (_node$data15 = node.data) === null || _node$data15 === void 0 ? void 0 : _node$data15.content) !== undefined && (node === null || node === void 0 || (_node$data16 = node.data) === null || _node$data16 === void 0 ? void 0 : _node$data16.content) !== null ? true : false
           })
         }];
       }
       return children.map((child, index) => {
-        var _node$data15;
+        var _node$data17;
         iconEdges.push({
           id: "".concat(node.id, "-").concat(child.id),
           source: node.id,
@@ -52899,7 +52968,8 @@ function StakeholderMappings(_ref3) {
             value: child.value,
             tooltipHeader: child.tooltipHeader,
             tooltipLabel: (child === null || child === void 0 ? void 0 : child.tooltipLabel) || "Holding",
-            totalSources: child.totalSources || 0
+            totalSources: child.totalSources || 0,
+            isPdf: isPdf
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52926,7 +52996,8 @@ function StakeholderMappings(_ref3) {
             backgroundColor: child.backgroundColor || "#ade9e1",
             iconColor: child.iconColor || "#08949a",
             icon: child.icon || "UserCircle",
-            content: children.length
+            content: children.length,
+            isPdf: isPdf
           },
           position: positionDataNodes({
             isLeftSide,
@@ -52936,7 +53007,8 @@ function StakeholderMappings(_ref3) {
             total,
             mainNode,
             type: child.type || "primaryNode",
-            hasContent: node !== null && node !== void 0 && (_node$data15 = node.data) !== null && _node$data15 !== void 0 && _node$data15.content ? true : false
+            hasContent: node !== null && node !== void 0 && (_node$data17 = node.data) !== null && _node$data17 !== void 0 && _node$data17.content ? true : false,
+            isPdf: isPdf
           })
         };
       });
@@ -52950,7 +53022,8 @@ function StakeholderMappings(_ref3) {
         type: "default",
         data: {
           group: child.id,
-          type: "mainNode"
+          type: "mainNode",
+          isPdf: isPdf
         }
       };
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.367",
+	"version": "0.6.369",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Graphs/StakeholderMappings/index.jsx

@@ -14,6 +14,7 @@ import {
 	MAIN_NODE_HEIGHT,
 	ICON_NODE_WIDTH,
 	ICON_NODE_HEIGHT,
+	NAME_CARD_HEIGHT,
 } from "../components/Nodes/index.jsx";
 
 const DATA_NODE_SIZE = {
@@ -27,7 +28,7 @@ const DATA_NODE_SIZE = {
 	},
 	nameNode: {
 		width: NAME_CARD_WIDTH,
-		height: ICON_NODE_HEIGHT,
+		height: NAME_CARD_HEIGHT,
 	},
 };
 
@@ -104,13 +105,46 @@ function positionDataNodes({
 	const END_Y = startY + totalHeight;
 
 	const yOffset = index * MIN_SPACE_REQUIRED;
+	let yPosition;
+
+
+    const iconNodeHandleCenterY = iconNode.position.y + (ICON_NODE_HEIGHT / 2) + (hasContent ? 10 : 0);
+
+
+	if (type === "nameNode" && total === 1) {
+		yPosition = iconNodeHandleCenterY - (DATA_NODE_HEIGHT / 2);
+	} else {
+       
+		const siblingSpace = () => {
+			if (type === "primaryNode") {
+				if (iconNode?.data.children?.length === 1 && hasContent) { 
+					return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+				}
+				return DEFAULT_PRIMARY_NODE_SPACE;
+			}
+			if (iconNode?.data?.children?.length === 0) {
+				return NO_CHILDREN_SIBLING_SPACE;
+			}
+			return DEFAULT_SIBLING_SPACE;
+		};
+
+		const Y_SPACE_FROM_SIBLINGS = siblingSpace();
+		const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+
+		const totalHeight = total * MIN_SPACE_REQUIRED;
 
-	let yPosition = startY + yOffset;
+		const startY = iconNodeHandleCenterY - totalHeight / 2;
+		const END_Y = startY + totalHeight;
 
-	if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
-		yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
-	} else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
-		yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+		const yOffset = index * MIN_SPACE_REQUIRED;
+
+		yPosition = startY + yOffset;
+
+		if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+			yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
+		} else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+			yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+		}
 	}
 
 	return {
@@ -161,6 +195,7 @@ function StakeholderMappings({
 					name: emptyString,
 					icon: data?.icon || "DashboardStakeholder",
 					t: t,
+					isPdf: isPdf,
 				},
 				position: {
 					x: centerX - MAIN_NODE_WIDTH / 2,
@@ -184,6 +219,7 @@ function StakeholderMappings({
 				totalSources: data?.totalSources,
 				backgroundColor: data?.backgroundColor || "#ade9e1",
 				iconColor: data?.iconColor || "#08949a",
+				isPdf: isPdf,
 			},
 			position: {
 				x: centerX - MAIN_NODE_WIDTH / 2,
@@ -248,6 +284,7 @@ function StakeholderMappings({
 			const children = node.data.children || [];
 			const total = children?.length || 0;
 			const iconNodeId = node.id;
+			const iconNodeHasContent = node?.data?.content !== undefined && node?.data?.content !== null;
 
 			if (children.length === 0) {
 				iconEdges.push({
@@ -258,6 +295,7 @@ function StakeholderMappings({
 					data: {
 						isEmpty: true,
 						isOnlyOne: true,
+						isPdf: isPdf,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -274,6 +312,7 @@ function StakeholderMappings({
 							name: node.data?.emptyName || `No${node.data?.name} identified`,
 							icon: node.data?.type,
 							t: t,
+							isPdf: isPdf,
 						},
 						position: positionDataNodes({
 							isLeftSide: node.data.order % 2 !== 0,
@@ -302,6 +341,7 @@ function StakeholderMappings({
 						name: node?.data?.name,
 						content: node?.data?.content,
 						isOnlyOne: true,
+						isPdf: true,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -353,6 +393,7 @@ function StakeholderMappings({
 						tooltipHeader: child.tooltipHeader,
 						tooltipLabel: child?.tooltipLabel || "Holding",
 						totalSources: child.totalSources || 0,
+						isPdf: isPdf,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -384,6 +425,7 @@ function StakeholderMappings({
 						iconColor: child.iconColor || "#08949a",
 						icon: child.icon || "UserCircle",
 						content: children.length,
+						isPdf: isPdf,
 					},
 					position: positionDataNodes({
 						isLeftSide,
@@ -394,6 +436,7 @@ function StakeholderMappings({
 						mainNode,
 						type: child.type || "primaryNode",
 						hasContent: node?.data?.content ? true : false,
+						isPdf: isPdf,
 					}),
 				};
 			});
@@ -409,6 +452,7 @@ function StakeholderMappings({
 				data: {
 					group: child.id,
 					type: "mainNode",
+					isPdf: isPdf,
 				},
 			};
 		});

package/src/@daf/core/components/Graphs/components/Edges/DefaultEdge.jsx

@@ -1,6 +1,7 @@
+// components/Edges/DefaultEdge.jsx
 import React from "react";
 import { Popover } from "antd";
-import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Position } from "@xyflow/react";
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Position, getStraightPath } from "@xyflow/react"; // Import getStraightPath
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
 // import { activeOpacity, disabledOpacity, edgeStroke, edgeStrokeActive } from '../../config';
 
@@ -25,21 +26,31 @@ export default function DefaultEdge({
 		renderTooltipItems = () => [],
 		getTotal = () => 0,
 		tooltipTitle,
+        isPdf, // Destructure isPdf from data
 	} = data;
 	const isSelected =
 		associatedNodes?.includes(source) && associatedNodes?.includes(target) && activeNode;
 	const opacity = activeNode ? (isSelected ? ACTIVE_OPACITY : DISABLED_OPACITY) : ACTIVE_OPACITY;
 	const arrowHeadId = `arrow-head-${id}`;
 
-	const [edgePath] = getSmoothStepPath({
-		sourceX,
-		sourceY,
-		targetX,
-		targetY,
-		sourcePosition: data.type === "left" ? Position.Left : Position.Right,
-		targetPosition: data.type === "left" ? Position.Right : Position.Left,
-		borderRadius: 20,
-	});
+	const [edgePath] = isPdf // Use straight path for PDF
+        ? getStraightPath({
+            sourceX,
+            sourceY,
+            sourcePosition: data.type === "left" ? Position.Left : Position.Right,
+            targetX,
+            targetY,
+            targetPosition: data.type === "left" ? Position.Right : Position.Left,
+        })
+        : getSmoothStepPath({ // Use smooth path for normal rendering
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+            sourcePosition: data.type === "left" ? Position.Left : Position.Right,
+            targetPosition: data.type === "left" ? Position.Right : Position.Left,
+            borderRadius: 20,
+        });
 
 	const centerY = data.moreLeft ? sourceY : targetY;
 
@@ -123,4 +134,4 @@ export default function DefaultEdge({
 			/>
 		</g>
 	);
-}
+}

package/src/@daf/core/components/Graphs/components/Edges/TooltipEdge.jsx

@@ -1,10 +1,11 @@
+// components/Edges/TooltipEdge.jsx
 import { Popover, Tag } from "antd";
 import {
 	BaseEdge,
 	EdgeLabelRenderer,
 	getEdgeCenter,
 	getSmoothStepPath,
-	// getStraightPath,
+	getStraightPath, // Import getStraightPath
 } from "@xyflow/react";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
@@ -30,15 +31,26 @@ export default function ToolTipEdge({
 	data,
 	targetPosition,
 }) {
-	const [smoothPath] = getSmoothStepPath({
-		sourceX,
-		sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition,
-		borderRadius: 15,
-	});
+    const { isOnlyOne, isPdf } = data; // Destructure isPdf from data
+
+    const [edgePath] = isPdf && isOnlyOne // Condition for straight path in PDF for single nodes
+        ? getStraightPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+        })
+        : getSmoothStepPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+            borderRadius: 15,
+        });
 
 	const center = getEdgeCenter({
 		sourceX,
@@ -49,7 +61,7 @@ export default function ToolTipEdge({
 
 	return (
 		<>
-			<BaseEdge path={smoothPath} />
+			<BaseEdge path={edgePath} /> {/* Use edgePath here */}
 			<EdgeLabelRenderer>
 				<div
 					className="button-edge__label nodrag nopan"
@@ -107,4 +119,4 @@ export default function ToolTipEdge({
 			</EdgeLabelRenderer>
 		</>
 	);
-}
+}

package/src/@daf/core/components/Graphs/components/Nodes/NameNode.jsx

@@ -1,3 +1,4 @@
+// components/Nodes/NameNode.jsx
 import React from "react";
 import styled from "styled-components";
 import { Handle, Position } from "@xyflow/react";
@@ -135,16 +136,20 @@ export default function NameNode({ data }) {
 
 const Style = styled.div`
     width: ${NAME_CARD_WIDTH}px;
+    height: ${NAME_CARD_HEIGHT}px;
     display: flex;
     background: white;
     border-radius: 8px;
-    /* Box-shadows for screen */
-    box-shadow: 0px 3.76px 10.03px 0px #00000014;
-    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
     overflow: hidden;
-    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
-    /* Ensure borders/colors survive PDF rendering */
-    border: ${(props) => (props.$isPdf ? '1px solid var(--base-gray-30)' : 'none')};
+    ${(props) =>
+		props.$isPdf
+			? `
+        border: 1px solid var(--base-gray-30);
+        box-shadow: none;
+      `
+			: `
+        box-shadow: 0px 3.76px 10.03px 0px #00000014, 0px 1.88px 3.76px -2.51px #0000001f, 0px 5.64px 17.56px 5.02px #0000000d;
+      `}
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
 
@@ -156,8 +161,10 @@ const Style = styled.div`
     }
 
     .right {
-        padding: 16px 12px;
+        padding: 0px 12px;
         width: 100%;
-        border-bottom: 1px solid var(--base-gray-30);
+        display: flex;
+        align-items: center;
+        border-bottom: none;
     }
-`;
+`;

package/src/@daf/core/components/Graphs/components/Nodes/PrimaryNode.jsx

@@ -1,6 +1,7 @@
+// components/Nodes/PrimaryNode.jsx
 import React from "react";
 import styled from "styled-components";
-import { Handle, Position } from "@xyflow/react"; //
+import { Handle, Position } from "@xyflow/react";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
 import { Tooltip } from "antd";
 import PropTypes from "prop-types";
@@ -10,6 +11,7 @@ export const MAIN_NODE_WIDTH = 300;
 export const MAIN_NODE_HEIGHT = 150;
 
 export default function PrimaryNode({ id, data }) {
+  const isPdf = data?.isPdf; // Get isPdf from data prop
   return (
     <>
       <Handle
@@ -30,7 +32,7 @@ export default function PrimaryNode({ id, data }) {
           opacity: 0,
         }}
       />
-      <Style className="flex">
+      <Style $isPdf={isPdf} className="flex"> {/* Pass isPdf to styled component */}
         <div
           className="left flex flex-column justify-center"
           style={{
@@ -133,13 +135,23 @@ export default function PrimaryNode({ id, data }) {
 
 const Style = styled.div`
   width: ${MAIN_NODE_WIDTH}px;
+  height: ${MAIN_NODE_HEIGHT}px; /* Explicitly set height */
   display: flex;
   background: white;
   border-radius: 8px;
-  box-shadow: 0px 3.76px 10.03px 0px #00000014;
-  box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
   overflow: hidden;
-  box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+  /* Conditional styles for PDF vs screen */
+  ${(props) =>
+		props.$isPdf
+			? `
+        border: 1px solid var(--base-gray-30); /* Ensure a visible border in PDF */
+        box-shadow: none; /* Remove shadow for PDF */
+      `
+			: `
+        box-shadow: 0px 3.76px 10.03px 0px #00000014, 0px 1.88px 3.76px -2.51px #0000001f, 0px 5.64px 17.56px 5.02px #0000000d;
+      `}
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
 
   .left {
     width: 32px;
@@ -233,5 +245,6 @@ PrimaryNode.propTypes = {
     backgroundColor: PropTypes.string,
     totalSources: PropTypes.number,
     onClick: PropTypes.func,
+    isPdf: PropTypes.bool,
   }),
-};
+};