datastake-daf 0.6.370 → 0.6.372

package/.env

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,13 @@
+{
+	"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"
+}

package/dist/components/index.js

@@ -12668,7 +12668,7 @@ const {
   Paragraph: Paragraph$1
 } = antd.Typography;
 const checkHasActiveFilterValues = filtersConfig => {
-  if (!(filtersConfig !== null && filtersConfig !== void 0 && filtersConfig.filtersConfig) || !(filtersConfig !== null && filtersConfig !== void 0 && filtersConfig.selectedFilters)) return false;
+  if (!filtersConfig?.filtersConfig || !filtersConfig?.selectedFilters) return false;
   const filterConfigKeys = Object.keys(filtersConfig.filtersConfig);
   const selectedFilters = filtersConfig.selectedFilters;
   return filterConfigKeys.some(key => {
@@ -12676,28 +12676,27 @@ const checkHasActiveFilterValues = filtersConfig => {
     return value !== undefined && value !== null && value !== "";
   });
 };
-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 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 [showFilters, setShowFilters] = React.useState(() => checkHasActiveFilterValues(filtersConfig));
   const hasFilters = filtersConfig && Object.keys(filtersConfig).length > 0;
   React.useEffect(() => {
@@ -12739,9 +12738,9 @@ const useHeader = _ref => {
   const buttonCont = React.useRef();
   const [mainContWidth, setMainContWidth] = React.useState(600);
   const [buttonContWidth, setButtonContWidth] = React.useState(0);
-  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]);
+  const hasSupportText = !!supportText?.length;
+  const hasTags = !!tags?.length;
+  const hasButtons = React.useMemo(() => !!(actionButtons?.length || extraButtons?.length), [actionButtons, extraButtons]);
   React.useEffect(() => {
     const mainContObserver = new ResizeObserver(entries => {
       const _mainEntry = entries[0];
@@ -51013,14 +51012,12 @@ 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",
@@ -51039,9 +51036,8 @@ 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",
@@ -51151,20 +51147,13 @@ 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;
-  /* 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;
+  box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
 
   .left {
     width: 32px;
@@ -51256,8 +51245,7 @@ PrimaryNode.propTypes = {
     icon: PropTypes__default["default"].string,
     backgroundColor: PropTypes__default["default"].string,
     totalSources: PropTypes__default["default"].number,
-    onClick: PropTypes__default["default"].func,
-    isPdf: PropTypes__default["default"].bool
+    onClick: PropTypes__default["default"].func
   })
 };
 
@@ -51378,9 +51366,7 @@ 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;
@@ -51391,7 +51377,6 @@ 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",
@@ -51410,7 +51395,6 @@ function NameNode({
         opacity: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
-      $isPdf: isPdf,
       style: {
         opacity: data.isEmpty ? 0.5 : 1
       },
@@ -51461,7 +51445,7 @@ function NameNode({
               }
             })
           }) : null]
-        }), !isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             marginLeft: "auto"
           },
@@ -51498,35 +51482,27 @@ function NameNode({
   });
 }
 const Style$d = dt.div`
-    width: ${NAME_CARD_WIDTH}px;
-    height: ${NAME_CARD_HEIGHT}px;
-    display: flex;
-    background: white;
-    border-radius: 8px;
-    overflow: hidden;
-    ${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;
+	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;
 
-    .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: 0px 12px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        border-bottom: none;
-    }
+	.right {
+		padding: 16px 12px;
+		width: 100%
+		border-bottom: 1px solid var(--base-gray-30);
+	}
 `;
 
 const Style$c = dt.div`
@@ -51752,7 +51728,6 @@ function ExpandedNode({
   });
 }
 
-// components/Edges/TooltipEdge.jsx
 function ToolTipEdge({
   sourceX,
   sourceY,
@@ -51762,20 +51737,7 @@ function ToolTipEdge({
   data,
   targetPosition
 }) {
-  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({
+  const [smoothPath] = react.getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -51792,8 +51754,8 @@ function ToolTipEdge({
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.BaseEdge, {
-      path: edgePath
-    }), " ", /*#__PURE__*/jsxRuntime.jsx(react.EdgeLabelRenderer, {
+      path: smoothPath
+    }), /*#__PURE__*/jsxRuntime.jsx(react.EdgeLabelRenderer, {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "button-edge__label nodrag nopan",
         style: {
@@ -51991,7 +51953,6 @@ function VerticalPathEdge({
   });
 }
 
-// components/Edges/DefaultEdge.jsx
 const ACTIVE_OPACITY = 1;
 const DISABLED_OPACITY = 0.5;
 const EDGE_STROKE = "#9DA4AE";
@@ -52011,22 +51972,12 @@ function DefaultEdge({
     associatedNodes = [],
     renderTooltipItems = () => [],
     getTotal = () => 0,
-    tooltipTitle,
-    isPdf // Destructure isPdf from data
+    tooltipTitle
   } = 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] = 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
+  const [edgePath] = react.getSmoothStepPath({
     sourceX,
     sourceY,
     targetX,
@@ -52126,7 +52077,6 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
   t,
   withDuration = true,
   onFilterChange,
-  isPdf,
   ...props
 }, ref) {
   const {
@@ -52183,7 +52133,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
           duration: withDuration ? 300 : undefined
         },
         ...props,
-        children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
           position: "bottom-right",
           showFitView: false,
           showInteractive: false,
@@ -52700,8 +52650,7 @@ function positionDataNodes(_ref2) {
     total,
     mainNode,
     type,
-    hasContent,
-    isPdf
+    hasContent
   } = _ref2;
   const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
   const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -52719,40 +52668,19 @@ function positionDataNodes(_ref2) {
     }
     return DEFAULT_SIBLING_SPACE;
   };
-  siblingSpace();
+  const Y_SPACE_FROM_SIBLINGS = siblingSpace();
   const X_SPACE_FROM_ICON_NODE = 130;
-  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;
-    }
+  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),
@@ -52798,8 +52726,7 @@ function StakeholderMappings(_ref3) {
           isEmpty: true,
           name: emptyString,
           icon: (data === null || data === void 0 ? void 0 : data.icon) || "DashboardStakeholder",
-          t: t,
-          isPdf: isPdf
+          t: t
         },
         position: {
           x: centerX - MAIN_NODE_WIDTH / 2,
@@ -52821,8 +52748,7 @@ 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",
-        isPdf: isPdf
+        iconColor: (data === null || data === void 0 ? void 0 : data.iconColor) || "#08949a"
       },
       position: {
         x: centerX - MAIN_NODE_WIDTH / 2,
@@ -52872,13 +52798,11 @@ 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$data3, _node$data4, _node$data5, _node$data6, _node$data7;
+        var _node$data, _node$data2, _node$data3, _node$data4, _node$data5;
         iconEdges.push({
           id: "".concat(node.id, "-empty"),
           source: node.id,
@@ -52886,8 +52810,7 @@ function StakeholderMappings(_ref3) {
           type: "tooltipEdge",
           data: {
             isEmpty: true,
-            isOnlyOne: true,
-            isPdf: isPdf
+            isOnlyOne: true
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52897,10 +52820,9 @@ function StakeholderMappings(_ref3) {
           type: "nameNode",
           data: {
             isEmpty: true,
-            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
+            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
           },
           position: positionDataNodes({
             isLeftSide: node.data.order % 2 !== 0,
@@ -52910,22 +52832,21 @@ function StakeholderMappings(_ref3) {
             total: 1,
             mainNode,
             type: "nameNode",
-            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
+            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
           })
         }];
       }
       if (isPdf) {
-        var _node$data8, _node$data9, _node$data10, _node$data11, _node$data12, _node$data13, _node$data14, _node$data15, _node$data16;
+        var _node$data6, _node$data7, _node$data8, _node$data9, _node$data10, _node$data11, _node$data12, _node$data13, _node$data14;
         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$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
+            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
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52934,11 +52855,11 @@ function StakeholderMappings(_ref3) {
           id: node.data.name + "-name-node",
           type: "nameNode",
           data: {
-            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,
+            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,
             isPdf: true,
             t: t
           },
@@ -52946,17 +52867,16 @@ 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$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
+            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
           })
         }];
       }
       return children.map((child, index) => {
-        var _node$data17;
+        var _node$data15;
         iconEdges.push({
           id: "".concat(node.id, "-").concat(child.id),
           source: node.id,
@@ -52968,8 +52888,7 @@ function StakeholderMappings(_ref3) {
             value: child.value,
             tooltipHeader: child.tooltipHeader,
             tooltipLabel: (child === null || child === void 0 ? void 0 : child.tooltipLabel) || "Holding",
-            totalSources: child.totalSources || 0,
-            isPdf: isPdf
+            totalSources: child.totalSources || 0
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52996,8 +52915,7 @@ function StakeholderMappings(_ref3) {
             backgroundColor: child.backgroundColor || "#ade9e1",
             iconColor: child.iconColor || "#08949a",
             icon: child.icon || "UserCircle",
-            content: children.length,
-            isPdf: isPdf
+            content: children.length
           },
           position: positionDataNodes({
             isLeftSide,
@@ -53007,8 +52925,7 @@ function StakeholderMappings(_ref3) {
             total,
             mainNode,
             type: child.type || "primaryNode",
-            hasContent: node !== null && node !== void 0 && (_node$data17 = node.data) !== null && _node$data17 !== void 0 && _node$data17.content ? true : false,
-            isPdf: isPdf
+            hasContent: node !== null && node !== void 0 && (_node$data15 = node.data) !== null && _node$data15 !== void 0 && _node$data15.content ? true : false
           })
         };
       });
@@ -53022,8 +52939,7 @@ function StakeholderMappings(_ref3) {
         type: "default",
         data: {
           group: child.id,
-          type: "mainNode",
-          isPdf: isPdf
+          type: "mainNode"
         }
       };
     });
@@ -53049,8 +52965,7 @@ function StakeholderMappings(_ref3) {
         duration: 300
       });
     },
-    ref: reactFlowWrapper,
-    isPdf: isPdf
+    ref: reactFlowWrapper
   });
 }
 var index$1 = withProvider(StakeholderMappings);

package/package.json

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

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

@@ -457,34 +457,6 @@ 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/index.jsx

@@ -14,7 +14,6 @@ import {
 	MAIN_NODE_HEIGHT,
 	ICON_NODE_WIDTH,
 	ICON_NODE_HEIGHT,
-	NAME_CARD_HEIGHT,
 } from "../components/Nodes/index.jsx";
 
 const DATA_NODE_SIZE = {
@@ -73,7 +72,6 @@ function positionDataNodes({
 	mainNode,
 	type,
 	hasContent,
-	isPdf,
 }) {
 	const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
 	const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -105,46 +103,13 @@ function positionDataNodes({
 	const END_Y = startY + totalHeight;
 
 	const yOffset = index * MIN_SPACE_REQUIRED;
-	let yPosition;
 
+	let yPosition = startY + yOffset;
 
-    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;
-
-		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;
-		}
+	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 {
@@ -195,7 +160,6 @@ function StakeholderMappings({
 					name: emptyString,
 					icon: data?.icon || "DashboardStakeholder",
 					t: t,
-					isPdf: isPdf,
 				},
 				position: {
 					x: centerX - MAIN_NODE_WIDTH / 2,
@@ -219,7 +183,6 @@ function StakeholderMappings({
 				totalSources: data?.totalSources,
 				backgroundColor: data?.backgroundColor || "#ade9e1",
 				iconColor: data?.iconColor || "#08949a",
-				isPdf: isPdf,
 			},
 			position: {
 				x: centerX - MAIN_NODE_WIDTH / 2,
@@ -284,7 +247,6 @@ 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({
@@ -295,7 +257,6 @@ function StakeholderMappings({
 					data: {
 						isEmpty: true,
 						isOnlyOne: true,
-						isPdf: isPdf,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -312,7 +273,6 @@ 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,
@@ -341,7 +301,6 @@ 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",
@@ -366,7 +325,6 @@ function StakeholderMappings({
 							isLeftSide: node.data.order % 2 !== 0,
 							isAboveMainNode: node.data.order <= 2,
 							iconNode: node,
-							isPdf: true,
 							index: 0,
 							total: 1,
 							mainNode,
@@ -393,7 +351,6 @@ 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",
@@ -425,7 +382,6 @@ function StakeholderMappings({
 						iconColor: child.iconColor || "#08949a",
 						icon: child.icon || "UserCircle",
 						content: children.length,
-						isPdf: isPdf,
 					},
 					position: positionDataNodes({
 						isLeftSide,
@@ -436,7 +392,6 @@ function StakeholderMappings({
 						mainNode,
 						type: child.type || "primaryNode",
 						hasContent: node?.data?.content ? true : false,
-						isPdf: isPdf,
 					}),
 				};
 			});
@@ -452,7 +407,6 @@ function StakeholderMappings({
 				data: {
 					group: child.id,
 					type: "mainNode",
-					isPdf: isPdf,
 				},
 			};
 		});
@@ -490,7 +444,6 @@ function StakeholderMappings({
 				});
 			}}
 			ref={reactFlowWrapper}
-			isPdf={isPdf}
 		/>
 	);
 }

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

@@ -32,7 +32,6 @@ const BaseGraph = forwardRef(function BaseGraph(
 		t,
 		withDuration = true,
 		onFilterChange,
-		isPdf,
 		...props
 	},
 	ref,
@@ -88,45 +87,43 @@ const BaseGraph = forwardRef(function BaseGraph(
 					}}
 					{...props}
 				>
-					{!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>	
-					)}
+					<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,7 +1,6 @@
-// components/Edges/DefaultEdge.jsx
 import React from "react";
 import { Popover } from "antd";
-import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Position, getStraightPath } from "@xyflow/react"; // Import getStraightPath
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Position } from "@xyflow/react";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
 // import { activeOpacity, disabledOpacity, edgeStroke, edgeStrokeActive } from '../../config';
 
@@ -26,31 +25,21 @@ 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] = 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 [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 centerY = data.moreLeft ? sourceY : targetY;
 
@@ -134,4 +123,4 @@ export default function DefaultEdge({
 			/>
 		</g>
 	);
-}
+}

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

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

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

@@ -1,4 +1,3 @@
-// components/Nodes/NameNode.jsx
 import React from "react";
 import styled from "styled-components";
 import { Handle, Position } from "@xyflow/react";
@@ -14,8 +13,6 @@ 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
@@ -37,7 +34,6 @@ export default function NameNode({ data }) {
         }}
       />
       <Style
-        $isPdf={isPdf}
         style={{
           opacity: data.isEmpty ? 0.5 : 1,
         }}
@@ -99,21 +95,19 @@ export default function NameNode({ data }) {
             ) : null}
           </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={{
+              marginLeft: "auto",
+            }}
+            className="go-to"
+            onClick={() => {
+              if (typeof data.onClick === "function") {
+                data.onClick();
+              }
+            }}
+          >
+            <CustomIcon height={14} width={14} name="LinkNewTab" />
+          </div>
         </div>
       </Style>
       <Handle
@@ -135,36 +129,25 @@ 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;
-    overflow: hidden;
-    ${(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;
+	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;
 
-    .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: 0px 12px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        border-bottom: none;
-    }
-`;
+	.right {
+		padding: 16px 12px;
+		width: 100%
+		border-bottom: 1px solid var(--base-gray-30);
+	}
+`;

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

@@ -1,7 +1,6 @@
-// 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";
@@ -11,7 +10,6 @@ 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
@@ -32,7 +30,7 @@ export default function PrimaryNode({ id, data }) {
           opacity: 0,
         }}
       />
-      <Style $isPdf={isPdf} className="flex"> {/* Pass isPdf to styled component */}
+      <Style className="flex">
         <div
           className="left flex flex-column justify-center"
           style={{
@@ -135,23 +133,13 @@ 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;
-  /* 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;
+  box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
 
   .left {
     width: 32px;
@@ -245,6 +233,5 @@ PrimaryNode.propTypes = {
     backgroundColor: PropTypes.string,
     totalSources: PropTypes.number,
     onClick: PropTypes.func,
-    isPdf: PropTypes.bool,
   }),
-};
+};