datastake-daf 0.6.368 → 0.6.370

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,36 @@ 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: ${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;
 
-	.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={{
@@ -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,
   }),
-};
+};