datastake-daf 0.6.372 → 0.6.374

package/dist/components/index.js

@@ -12668,7 +12668,7 @@ const {
   Paragraph: Paragraph$1
 } = antd.Typography;
 const checkHasActiveFilterValues = filtersConfig => {
-  if (!filtersConfig?.filtersConfig || !filtersConfig?.selectedFilters) return false;
+  if (!(filtersConfig !== null && filtersConfig !== void 0 && filtersConfig.filtersConfig) || !(filtersConfig !== null && filtersConfig !== void 0 && filtersConfig.selectedFilters)) return false;
   const filterConfigKeys = Object.keys(filtersConfig.filtersConfig);
   const selectedFilters = filtersConfig.selectedFilters;
   return filterConfigKeys.some(key => {
@@ -12676,27 +12676,28 @@ const checkHasActiveFilterValues = filtersConfig => {
     return value !== undefined && value !== null && value !== "";
   });
 };
-const useHeader = ({
-  title = "",
-  tooltip = "",
-  supportText = "",
-  tags = [],
-  actionButtons: _actionButtons = [],
-  titleTooltip,
-  className,
-  addedHeader = null,
-  addedHeaderFirst,
-  extraButtons: _extraButtons = [],
-  onDownload,
-  downloadDisabled,
-  goBackTo,
-  loading,
-  renderExtraComponents,
-  app = "",
-  isViewMode = false,
-  filtersConfig = {}
-}) => {
-  const hasActiveFilterValues = React.useMemo(() => checkHasActiveFilterValues(filtersConfig), [filtersConfig?.filtersConfig, filtersConfig?.selectedFilters]);
+const useHeader = _ref => {
+  let {
+    title = "",
+    tooltip = "",
+    supportText = "",
+    tags = [],
+    actionButtons: _actionButtons = [],
+    titleTooltip,
+    className,
+    addedHeader = null,
+    addedHeaderFirst,
+    extraButtons: _extraButtons = [],
+    onDownload,
+    downloadDisabled,
+    goBackTo,
+    loading,
+    renderExtraComponents,
+    app = "",
+    isViewMode = false,
+    filtersConfig = {}
+  } = _ref;
+  const hasActiveFilterValues = React.useMemo(() => checkHasActiveFilterValues(filtersConfig), [filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.filtersConfig, filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.selectedFilters]);
   const [showFilters, setShowFilters] = React.useState(() => checkHasActiveFilterValues(filtersConfig));
   const hasFilters = filtersConfig && Object.keys(filtersConfig).length > 0;
   React.useEffect(() => {
@@ -12738,9 +12739,9 @@ const useHeader = ({
   const buttonCont = React.useRef();
   const [mainContWidth, setMainContWidth] = React.useState(600);
   const [buttonContWidth, setButtonContWidth] = React.useState(0);
-  const hasSupportText = !!supportText?.length;
-  const hasTags = !!tags?.length;
-  const hasButtons = React.useMemo(() => !!(actionButtons?.length || extraButtons?.length), [actionButtons, extraButtons]);
+  const hasSupportText = !!(supportText !== null && supportText !== void 0 && supportText.length);
+  const hasTags = !!(tags !== null && tags !== void 0 && tags.length);
+  const hasButtons = React.useMemo(() => !!(actionButtons !== null && actionButtons !== void 0 && actionButtons.length || extraButtons !== null && extraButtons !== void 0 && extraButtons.length), [actionButtons, extraButtons]);
   React.useEffect(() => {
     const mainContObserver = new ResizeObserver(entries => {
       const _mainEntry = entries[0];
@@ -51012,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",
@@ -51036,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",
@@ -51072,7 +51076,7 @@ function PrimaryNode({
                 },
                 children: data?.name || ""
               })
-            }), data.onClick && /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), !data.isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "go-to",
               onClick: () => {
                 if (typeof data.onClick === "function") {
@@ -51147,13 +51151,14 @@ 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;
+  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;
@@ -51245,7 +51250,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
   })
 };
 
@@ -51366,6 +51372,7 @@ const Style$e = dt.div`
 	}
 `;
 
+// components/Nodes/NameNode.jsx
 const NAME_CARD_WIDTH = 315;
 const {
   useToken: useToken$7
@@ -51377,6 +51384,7 @@ function NameNode({
     token
   } = useToken$7();
   const translateFN = typeof data?.t === "function" ? data.t : key => key;
+  const isPdf = data?.isPdf;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.Handle, {
       type: "source",
@@ -51395,6 +51403,7 @@ function NameNode({
         opacity: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
+      $isPdf: isPdf,
       style: {
         opacity: data.isEmpty ? 0.5 : 1
       },
@@ -51445,7 +51454,7 @@ function NameNode({
               }
             })
           }) : null]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), !isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             marginLeft: "auto"
           },
@@ -51482,27 +51491,30 @@ function NameNode({
   });
 }
 const Style$d = dt.div`
-	width: ${NAME_CARD_WIDTH}px;
-	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;
+    width: ${NAME_CARD_WIDTH}px;
+    height: 55px;
+    display: flex;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    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;
-		background: red;
-		border-top-left-radius: 12px;
-		border-bottom-left-radius: 12px;
-	}
+    .left {
+        width: 32px;
+        background: red;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
 
-	.right {
-		padding: 16px 12px;
-		width: 100%
-		border-bottom: 1px solid var(--base-gray-30);
-	}
+    .right {
+        padding: 0px 12px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        border-bottom: none;
+    }
 `;
 
 const Style$c = dt.div`
@@ -51728,6 +51740,7 @@ function ExpandedNode({
   });
 }
 
+// components/Edges/TooltipEdge.jsx
 function ToolTipEdge({
   sourceX,
   sourceY,
@@ -51737,7 +51750,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,
@@ -51754,8 +51780,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: {
@@ -51953,6 +51979,7 @@ function VerticalPathEdge({
   });
 }
 
+// components/Edges/DefaultEdge.jsx
 const ACTIVE_OPACITY = 1;
 const DISABLED_OPACITY = 0.5;
 const EDGE_STROKE = "#9DA4AE";
@@ -51972,12 +51999,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,
@@ -52077,6 +52114,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
   t,
   withDuration = true,
   onFilterChange,
+  isPdf,
   ...props
 }, ref) {
   const {
@@ -52133,7 +52171,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
           duration: withDuration ? 300 : undefined
         },
         ...props,
-        children: /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
+        children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
           position: "bottom-right",
           showFitView: false,
           showInteractive: false,
@@ -52650,37 +52688,67 @@ function positionDataNodes(_ref2) {
     total,
     mainNode,
     type,
-    hasContent
+    hasContent,
+    isPdf
   } = _ref2;
   const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
   const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
-  const siblingSpace = () => {
-    var _iconNode$data;
-    if (type === "primaryNode") {
-      var _iconNode$data$childr;
-      if ((iconNode === null || iconNode === void 0 || (_iconNode$data$childr = iconNode.data.children) === null || _iconNode$data$childr === void 0 ? void 0 : _iconNode$data$childr.length) === 1 && hasContent) {
-        return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+
+  // 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 X_SPACE_FROM_ICON_NODE = 130;
+  // const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+
+  // const totalHeight = total * MIN_SPACE_REQUIRED;
+
+  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;
+  const iconNodeHandleCenterY = iconNode.position.y + ICON_NODE_HEIGHT / 2 + (hasContent ? 10 : 0);
+  if (type === "nameNode" && total === 1 || isPdf) {
+    yPosition = iconNodeHandleCenterY - DATA_NODE_HEIGHT / 2 - 7;
+  } else {
+    const siblingSpace = () => {
+      var _iconNode$data;
+      if (type === "primaryNode") {
+        var _iconNode$data$childr;
+        if ((iconNode === null || iconNode === void 0 || (_iconNode$data$childr = iconNode.data.children) === null || _iconNode$data$childr === void 0 ? void 0 : _iconNode$data$childr.length) === 1 && hasContent) {
+          return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+        }
+        return DEFAULT_PRIMARY_NODE_SPACE;
       }
-      return DEFAULT_PRIMARY_NODE_SPACE;
-    }
-    if ((iconNode === null || iconNode === void 0 || (_iconNode$data = iconNode.data) === null || _iconNode$data === void 0 || (_iconNode$data = _iconNode$data.children) === null || _iconNode$data === void 0 ? void 0 : _iconNode$data.length) === 0) {
-      return NO_CHILDREN_SIBLING_SPACE;
+      if ((iconNode === null || iconNode === void 0 || (_iconNode$data = iconNode.data) === null || _iconNode$data === void 0 || (_iconNode$data = _iconNode$data.children) === null || _iconNode$data === void 0 ? void 0 : _iconNode$data.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 DEFAULT_SIBLING_SPACE;
-  };
-  const Y_SPACE_FROM_SIBLINGS = 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;
   }
   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),
@@ -52726,7 +52794,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,
@@ -52748,7 +52817,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,
@@ -52798,11 +52868,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,
@@ -52810,7 +52882,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"
         });
@@ -52820,9 +52893,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,
@@ -52832,21 +52906,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"
         });
@@ -52855,11 +52930,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
           },
@@ -52867,16 +52942,17 @@ function StakeholderMappings(_ref3) {
             isLeftSide: node.data.order % 2 !== 0,
             isAboveMainNode: node.data.order <= 2,
             iconNode: node,
+            isPdf: true,
             index: 0,
             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,
@@ -52888,7 +52964,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"
         });
@@ -52915,7 +52992,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,
@@ -52925,7 +53003,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
           })
         };
       });
@@ -52939,7 +53018,8 @@ function StakeholderMappings(_ref3) {
         type: "default",
         data: {
           group: child.id,
-          type: "mainNode"
+          type: "mainNode",
+          isPdf: isPdf
         }
       };
     });
@@ -52965,7 +53045,8 @@ function StakeholderMappings(_ref3) {
         duration: 300
       });
     },
-    ref: reactFlowWrapper
+    ref: reactFlowWrapper,
+    isPdf: isPdf
   });
 }
 var index$1 = withProvider(StakeholderMappings);

package/package.json

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

package/src/@daf/core/components/Charts/ColumnChart/ColumnChart.stories.jsx

@@ -457,6 +457,34 @@ export const Pdf = {
 		showBackground: true,
 		isPercentage: true,
 		shouldSeperateLegendName: true,
+		formattedXAxis: (s) => {
+			if (!s) return "";
+		  
+			const limit = 20;
+			let result = "";
+			let line = "";
+		  
+			for (let word of s.split(" ")) {
+			  if ((line + word).length <= limit) {
+				line += (line ? " " : "") + word;
+			  } else if (word.length > limit) {
+				// break long word with hyphen
+				while (word.length > limit) {
+				  result += word.slice(0, limit - 1) + "-\n";
+				  word = word.slice(limit - 1);
+				}
+				line = word;
+			  } else {
+				// move current line into result
+				if (line) result += line + "\n";
+				line = word;
+			  }
+			}
+		  
+			if (line) result += line;
+		  
+			return result;
+		  },
 	},
 	render: (args) => {
 		return <Widget title="Pdf Column Chart" className={"with-border-header"}>

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

@@ -116,6 +116,24 @@ export const WithEmptyState = {
 	},
 };
 
+export const Pdf = {
+	args: {},
+	render: () => {
+		return (
+			<Widget title="Stakeholder Mappings" className="with-border-header no-px no-p-body">
+				<div
+					style={{
+						height: "70vh",
+						width: "100%",
+					}}
+				>
+					<StakeholderMappings data={storyConfig5} isPdf={false} />
+				</div>
+			</Widget>
+		);
+	},
+};
+
 export const Test = {
 	args: {},
 	render: () => {

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

@@ -72,44 +72,77 @@ function positionDataNodes({
 	mainNode,
 	type,
 	hasContent,
+	isPdf,
 }) {
 	const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
 	const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
 
-	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 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 X_SPACE_FROM_ICON_NODE = 130;
-	const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+	// const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
 
-	const totalHeight = total * MIN_SPACE_REQUIRED;
+	// 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 startY = iconNodeCenterY - totalHeight / 2;
+	// const END_Y = startY + totalHeight;
 
-	const yOffset = index * MIN_SPACE_REQUIRED;
+	// const yOffset = index * MIN_SPACE_REQUIRED;
+	let yPosition;
 
-	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;
+    const iconNodeHandleCenterY = iconNode.position.y + (ICON_NODE_HEIGHT / 2) + (hasContent ? 10 : 0);
+
+
+	if ((type === "nameNode" && total === 1) || isPdf) {
+		yPosition = iconNodeHandleCenterY - (DATA_NODE_HEIGHT / 2) - 7;
+	} 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;
+
+		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 {
@@ -160,6 +193,7 @@ function StakeholderMappings({
 					name: emptyString,
 					icon: data?.icon || "DashboardStakeholder",
 					t: t,
+					isPdf: isPdf,
 				},
 				position: {
 					x: centerX - MAIN_NODE_WIDTH / 2,
@@ -183,6 +217,7 @@ function StakeholderMappings({
 				totalSources: data?.totalSources,
 				backgroundColor: data?.backgroundColor || "#ade9e1",
 				iconColor: data?.iconColor || "#08949a",
+				isPdf: isPdf,
 			},
 			position: {
 				x: centerX - MAIN_NODE_WIDTH / 2,
@@ -247,6 +282,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({
@@ -257,6 +293,7 @@ function StakeholderMappings({
 					data: {
 						isEmpty: true,
 						isOnlyOne: true,
+						isPdf: isPdf,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -273,6 +310,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,
@@ -301,6 +339,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",
@@ -325,6 +364,7 @@ function StakeholderMappings({
 							isLeftSide: node.data.order % 2 !== 0,
 							isAboveMainNode: node.data.order <= 2,
 							iconNode: node,
+							isPdf: true,
 							index: 0,
 							total: 1,
 							mainNode,
@@ -351,6 +391,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",
@@ -382,6 +423,7 @@ function StakeholderMappings({
 						iconColor: child.iconColor || "#08949a",
 						icon: child.icon || "UserCircle",
 						content: children.length,
+						isPdf: isPdf,
 					},
 					position: positionDataNodes({
 						isLeftSide,
@@ -392,6 +434,7 @@ function StakeholderMappings({
 						mainNode,
 						type: child.type || "primaryNode",
 						hasContent: node?.data?.content ? true : false,
+						isPdf: isPdf,
 					}),
 				};
 			});
@@ -407,6 +450,7 @@ function StakeholderMappings({
 				data: {
 					group: child.id,
 					type: "mainNode",
+					isPdf: isPdf,
 				},
 			};
 		});
@@ -444,6 +488,7 @@ function StakeholderMappings({
 				});
 			}}
 			ref={reactFlowWrapper}
+			isPdf={isPdf}
 		/>
 	);
 }

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -32,6 +32,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 		t,
 		withDuration = true,
 		onFilterChange,
+		isPdf,
 		...props
 	},
 	ref,
@@ -87,43 +88,45 @@ const BaseGraph = forwardRef(function BaseGraph(
 					}}
 					{...props}
 				>
-					<Controls position="bottom-right" showFitView={false} showInteractive={false}>
-						<ControlButton
-							onClick={() => {
-								fitView({
-									padding: 0.1,
-									nodes: [...nodesToFit],
-									duration: withDuration ? 300 : undefined,
-								});
-							}}
-						>
-							<AimOutlined height={20} width={20} />
-						</ControlButton>
-						<ControlButton
-							onClick={() => {
-								const viewport = getViewport();
-								setViewport({
-									x: viewport.x,
-									y: viewport.y + 20,
-									zoom: viewport.zoom,
-								});
-							}}
-						>
-							<UpOutlined height={20} width={20}></UpOutlined>
-						</ControlButton>
-						<ControlButton
-							onClick={() => {
-								const viewport = getViewport();
-								setViewport({
-									x: viewport.x,
-									y: viewport.y - 20,
-									zoom: viewport.zoom,
-								});
-							}}
-						>
-							<DownOutlined height={20} width={20}></DownOutlined>
-						</ControlButton>
-					</Controls>
+					{!isPdf && (
+						<Controls position="bottom-right" showFitView={false} showInteractive={false}>
+							<ControlButton
+								onClick={() => {
+									fitView({
+										padding: 0.1,
+										nodes: [...nodesToFit],
+										duration: withDuration ? 300 : undefined,
+									});
+								}}
+							>
+								<AimOutlined height={20} width={20} />
+							</ControlButton>
+							<ControlButton
+								onClick={() => {
+									const viewport = getViewport();
+									setViewport({
+										x: viewport.x,
+										y: viewport.y + 20,
+										zoom: viewport.zoom,
+									});
+								}}
+							>
+								<UpOutlined height={20} width={20}></UpOutlined>
+							</ControlButton>
+							<ControlButton
+								onClick={() => {
+									const viewport = getViewport();
+									setViewport({
+										x: viewport.x,
+										y: viewport.y - 20,
+										zoom: viewport.zoom,
+									});
+								}}
+							>
+								<DownOutlined height={20} width={20}></DownOutlined>
+							</ControlButton>
+						</Controls>	
+					)}
 				</ReactFlow>
 			</div>
 		</ComponentWithFocus>

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";
@@ -13,6 +14,8 @@ const { useToken } = theme;
 export default function NameNode({ data }) {
   const { token } = useToken();
   const translateFN = typeof data?.t === "function" ? data.t : (key) => key;
+  const isPdf = data?.isPdf;
+
   return (
     <>
       <Handle
@@ -34,6 +37,7 @@ export default function NameNode({ data }) {
         }}
       />
       <Style
+        $isPdf={isPdf}
         style={{
           opacity: data.isEmpty ? 0.5 : 1,
         }}
@@ -95,19 +99,21 @@ export default function NameNode({ data }) {
             ) : null}
           </div>
 
-          <div
-            style={{
-              marginLeft: "auto",
-            }}
-            className="go-to"
-            onClick={() => {
-              if (typeof data.onClick === "function") {
-                data.onClick();
-              }
-            }}
-          >
-            <CustomIcon height={14} width={14} name="LinkNewTab" />
-          </div>
+          {!isPdf && (
+            <div
+                style={{
+                  marginLeft: "auto",
+                }}
+                className="go-to"
+                onClick={() => {
+                  if (typeof data.onClick === "function") {
+                    data.onClick();
+                  }
+                }}
+              >
+                <CustomIcon height={14} width={14} name="LinkNewTab" />
+            </div> 
+          )}
         </div>
       </Style>
       <Handle
@@ -129,25 +135,28 @@ export default function NameNode({ data }) {
 }
 
 const Style = styled.div`
-	width: ${NAME_CARD_WIDTH}px;
-	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;
+    width: ${NAME_CARD_WIDTH}px;
+    height: 55px;
+    display: flex;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    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;
-		background: red;
-		border-top-left-radius: 12px;
-		border-bottom-left-radius: 12px;
-	}
+    .left {
+        width: 32px;
+        background: red;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
 
-	.right {
-		padding: 16px 12px;
-		width: 100%
-		border-bottom: 1px solid var(--base-gray-30);
-	}
-`;
+    .right {
+        padding: 0px 12px;
+        width: 100%;
+        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={{
@@ -68,7 +70,7 @@ export default function PrimaryNode({ id, data }) {
                   {data?.name || ""}
                 </span>
               </Tooltip>
-              {data.onClick && (
+              {!data.isPdf && (
                 <div
                   className="go-to"
                   onClick={() => {
@@ -133,13 +135,14 @@ 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;
+  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 +236,6 @@ PrimaryNode.propTypes = {
     backgroundColor: PropTypes.string,
     totalSources: PropTypes.number,
     onClick: PropTypes.func,
+    isPdf: PropTypes.bool,
   }),
-};
+};

package/.env

@@ -1,8 +0,0 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKED=
-REACT_APP_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"cSpell.words": ["cukura"],
-	"files.autoSave": "afterDelay",
-	"editor.wordWrap": "on",
-	"editor.autoClosingBrackets": "always",
-	"editor.autoClosingComments": "always",
-	"editor.autoClosingQuotes": "always",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"notebook.defaultFormatter": "esbenp.prettier-vscode",
-	"javascript.format.semicolons": "insert"
-}