From 81695ad60924860fcee16ab7c9daded317c85bcb Mon Sep 17 00:00:00 2001
From: Aagya-Sharma <sharmaaagya7@gmail.com>
Date: Thu, 7 Nov 2024 16:39:43 +0545
Subject: [PATCH 1/3] feat:copy button in artifact and step node

---
 .../dag-visualizer/ArtifactNode.tsx           | 10 +++-
 .../dag-visualizer/NodeCopyButton.tsx         | 52 +++++++++++++++++++
 src/components/dag-visualizer/StepNode.tsx    | 11 +++-
 3 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/components/dag-visualizer/NodeCopyButton.tsx

diff --git a/src/components/dag-visualizer/ArtifactNode.tsx b/src/components/dag-visualizer/ArtifactNode.tsx
index 89570f45d..1ca93d319 100644
--- a/src/components/dag-visualizer/ArtifactNode.tsx
+++ b/src/components/dag-visualizer/ArtifactNode.tsx
@@ -4,6 +4,7 @@ import { NodeProps, useStore } from "reactflow";
 import { ArtifactIcon } from "../ArtifactIcon";
 import { ArtifactSheet } from "../artifacts/artifact-node-sheet";
 import { BaseNode } from "./BaseNode";
+import { CopyNodeButton } from "./NodeCopyButton";
 
 export function ArtifactNode({ data, selected }: NodeProps<ArtifactVersion & { name: string }>) {
 	const { unselectNodesAndEdges } = useStore((state) => ({
@@ -30,7 +31,7 @@ export function ArtifactNode({ data, selected }: NodeProps<ArtifactVersion & { n
 			<ArtifactSheet onOpenChange={openChangeHandler} artifactVersionId={data.id}>
 				<button
 					data-selected={!!selected}
-					className="group flex h-[50px] min-w-0 max-w-[300px] items-center justify-center gap-1 rounded-rounded border border-primary-100 bg-primary-25 py-1 pl-1 pr-2 transition-all duration-200 hover:border-primary-400 data-[selected=true]:border-primary-500 data-[selected=true]:bg-primary-500"
+					className="group group flex h-[50px] min-w-0 max-w-[300px] items-center justify-center gap-1 rounded-rounded border border-primary-100 bg-primary-25 py-1 pl-1 pr-2 transition-all duration-200 hover:border-primary-400 data-[selected=true]:border-primary-500 data-[selected=true]:bg-primary-500"
 				>
 					<div className="rounded-rounded bg-primary-50 p-0.5 group-data-[selected=true]:bg-white/20">
 						<ArtifactIcon
@@ -47,6 +48,13 @@ export function ArtifactNode({ data, selected }: NodeProps<ArtifactVersion & { n
 							{getTypeFromArtifact(data.body?.data_type.attribute || "")}
 						</p>
 					</div>
+					<CopyNodeButton
+						code={`from zenml.client import Client
+
+    artifact = Client().get_artifact_version('${data.id}')
+    loaded_artifact = artifact.load()`}
+						type="artifact"
+					/>
 				</button>
 			</ArtifactSheet>
 		</BaseNode>
diff --git a/src/components/dag-visualizer/NodeCopyButton.tsx b/src/components/dag-visualizer/NodeCopyButton.tsx
new file mode 100644
index 000000000..024f2e106
--- /dev/null
+++ b/src/components/dag-visualizer/NodeCopyButton.tsx
@@ -0,0 +1,52 @@
+import Copy from "@/assets/icons/copy.svg?react";
+import { useState } from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from "@zenml-io/react-component-library/components/client";
+
+export function CopyNodeButton({ code, type }: { code: string; type: string }) {
+	const [copied, setCopied] = useState(false);
+	const [tooltipOpen, setTooltipOpen] = useState(false);
+
+	function copyToClipboard(code: string) {
+		if (navigator.clipboard) {
+			navigator.clipboard.writeText(code);
+			setCopied(true);
+			setTooltipOpen(true);
+
+			setTimeout(() => {
+				setTooltipOpen(false);
+				setCopied(false);
+			}, 2000);
+		}
+	}
+	return (
+		<TooltipProvider>
+			<Tooltip open={tooltipOpen} onOpenChange={setTooltipOpen}>
+				<TooltipTrigger asChild>
+					<div className="relative flex items-center">
+						<div
+							className="hidden cursor-pointer transition-all group-hover:flex"
+							onClick={(e) => {
+								e.stopPropagation(); // Prevent the click event from bubbling up
+								copyToClipboard(code);
+							}}
+						>
+							<Copy
+								className={`${
+									type === "step" ? "fill-theme-text-tertiary" : "fill-primary-400"
+								} h-5 `}
+							/>
+						</div>
+					</div>
+				</TooltipTrigger>
+				<TooltipContent className="w-full max-w-md whitespace-normal transition-opacity">
+					{copied ? "Copied!" : `Copy code to load ${type}`}
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+}
diff --git a/src/components/dag-visualizer/StepNode.tsx b/src/components/dag-visualizer/StepNode.tsx
index 181270c82..a84fba63e 100644
--- a/src/components/dag-visualizer/StepNode.tsx
+++ b/src/components/dag-visualizer/StepNode.tsx
@@ -4,6 +4,8 @@ import { NodeProps, ReactFlowState, useStore } from "reactflow";
 import { BaseNode } from "./BaseNode";
 import { StepSheet } from "../steps/step-sheet";
 import { ExecutionStatusIcon, getExecutionStatusBackgroundColor } from "../ExecutionStatus";
+import { CopyNodeButton } from "./NodeCopyButton";
+import { useParams } from "react-router-dom";
 
 const selector = (state: ReactFlowState) => ({
 	unselectAll: state.unselectNodesAndEdges
@@ -11,6 +13,7 @@ const selector = (state: ReactFlowState) => ({
 
 export function StepNode({ data, selected }: NodeProps<Step>) {
 	const { unselectAll } = useStore(selector);
+	const { runId } = useParams() as { runId: string };
 
 	function openChangeHandler(isOpen: boolean) {
 		if (!isOpen) {
@@ -28,7 +31,7 @@ export function StepNode({ data, selected }: NodeProps<Step>) {
 				<button
 					data-selected={!!selected}
 					className={clsx(
-						"h-[50px] max-w-[300px] rounded-md border  bg-theme-surface-primary transition-all duration-200  hover:shadow-md  data-[selected=true]:shadow-md",
+						"group h-[50px] max-w-[300px] rounded-md  border bg-theme-surface-primary transition-all duration-200  hover:shadow-md  data-[selected=true]:shadow-md",
 						{
 							"border-theme-border-moderate hover:border-neutral-400 data-[selected=true]:border-theme-border-bold":
 								data.body?.status !== "failed",
@@ -43,6 +46,12 @@ export function StepNode({ data, selected }: NodeProps<Step>) {
 							<ExecutionStatusIcon status={data.body?.status} className="h-4 w-4" />
 						</div>
 						<p className="truncate font-semibold">{data.name}</p>
+						<CopyNodeButton
+							code={`from zenml.client import Client
+    run = Client().get_pipeline_run('${runId}') 
+    config = run.config`}
+							type="step"
+						/>
 					</div>
 				</button>
 			</StepSheet>

From 5db4b5088d15a87c633e23a64f5e77b2fff7f41a Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Mon, 11 Nov 2024 11:48:41 +0000
Subject: [PATCH 2/3] fix: more changes

---
 .../dag-visualizer/ArtifactNode.tsx           | 11 ++++--
 .../dag-visualizer/NodeCopyButton.tsx         | 37 ++++++++++---------
 src/components/dag-visualizer/StepNode.tsx    | 20 +++++-----
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/components/dag-visualizer/ArtifactNode.tsx b/src/components/dag-visualizer/ArtifactNode.tsx
index 1ca93d319..742607844 100644
--- a/src/components/dag-visualizer/ArtifactNode.tsx
+++ b/src/components/dag-visualizer/ArtifactNode.tsx
@@ -1,5 +1,5 @@
+import Copy from "@/assets/icons/copy.svg?react";
 import { ArtifactVersion } from "@/types/artifact-versions";
-
 import { NodeProps, useStore } from "reactflow";
 import { ArtifactIcon } from "../ArtifactIcon";
 import { ArtifactSheet } from "../artifacts/artifact-node-sheet";
@@ -31,7 +31,7 @@ export function ArtifactNode({ data, selected }: NodeProps<ArtifactVersion & { n
 			<ArtifactSheet onOpenChange={openChangeHandler} artifactVersionId={data.id}>
 				<button
 					data-selected={!!selected}
-					className="group group flex h-[50px] min-w-0 max-w-[300px] items-center justify-center gap-1 rounded-rounded border border-primary-100 bg-primary-25 py-1 pl-1 pr-2 transition-all duration-200 hover:border-primary-400 data-[selected=true]:border-primary-500 data-[selected=true]:bg-primary-500"
+					className="group flex h-[50px] min-w-0 max-w-[300px] items-center justify-center gap-1 rounded-rounded border border-primary-100 bg-primary-25 py-1 pl-1 pr-2 transition-all duration-200 hover:border-primary-400 data-[selected=true]:border-primary-500 data-[selected=true]:bg-primary-500"
 				>
 					<div className="rounded-rounded bg-primary-50 p-0.5 group-data-[selected=true]:bg-white/20">
 						<ArtifactIcon
@@ -43,18 +43,23 @@ export function ArtifactNode({ data, selected }: NodeProps<ArtifactVersion & { n
 						<p className="truncate text-text-sm font-semibold text-theme-text-brand group-data-[selected=true]:text-theme-text-negative">
 							{data.name}
 						</p>
+
 						<p className="truncate text-text-xs text-theme-text-secondary group-data-[selected=true]:text-white/70">
 							{/* As artifact_type doesn't correspond to the last part of the string */}
 							{getTypeFromArtifact(data.body?.data_type.attribute || "")}
 						</p>
 					</div>
 					<CopyNodeButton
+						className="h-4 w-4 shrink-0 rounded-sm hover:bg-primary-100 active:bg-primary-200"
 						code={`from zenml.client import Client
 
     artifact = Client().get_artifact_version('${data.id}')
     loaded_artifact = artifact.load()`}
 						type="artifact"
-					/>
+					>
+						<Copy className="h-3 w-3 fill-primary-400" />
+						<div className="sr-only">Copy code to load artifact</div>
+					</CopyNodeButton>
 				</button>
 			</ArtifactSheet>
 		</BaseNode>
diff --git a/src/components/dag-visualizer/NodeCopyButton.tsx b/src/components/dag-visualizer/NodeCopyButton.tsx
index 024f2e106..39390997a 100644
--- a/src/components/dag-visualizer/NodeCopyButton.tsx
+++ b/src/components/dag-visualizer/NodeCopyButton.tsx
@@ -1,13 +1,18 @@
-import Copy from "@/assets/icons/copy.svg?react";
-import { useState } from "react";
+import { HTMLAttributes, useState } from "react";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger
 } from "@zenml-io/react-component-library/components/client";
+import { cn } from "@zenml-io/react-component-library/utilities";
 
-export function CopyNodeButton({ code, type }: { code: string; type: string }) {
+export function CopyNodeButton({
+	className,
+	code,
+	type,
+	...rest
+}: HTMLAttributes<HTMLDivElement> & { code: string; type: "artifact" | "step" }) {
 	const [copied, setCopied] = useState(false);
 	const [tooltipOpen, setTooltipOpen] = useState(false);
 
@@ -27,21 +32,17 @@ export function CopyNodeButton({ code, type }: { code: string; type: string }) {
 		<TooltipProvider>
 			<Tooltip open={tooltipOpen} onOpenChange={setTooltipOpen}>
 				<TooltipTrigger asChild>
-					<div className="relative flex items-center">
-						<div
-							className="hidden cursor-pointer transition-all group-hover:flex"
-							onClick={(e) => {
-								e.stopPropagation(); // Prevent the click event from bubbling up
-								copyToClipboard(code);
-							}}
-						>
-							<Copy
-								className={`${
-									type === "step" ? "fill-theme-text-tertiary" : "fill-primary-400"
-								} h-5 `}
-							/>
-						</div>
-					</div>
+					<div
+						{...rest}
+						className={cn(
+							"hidden cursor-pointer items-center justify-center transition-all group-hover:flex",
+							className
+						)}
+						onClick={(e) => {
+							e.stopPropagation(); // Prevent the click event from bubbling up
+							copyToClipboard(code);
+						}}
+					></div>
 				</TooltipTrigger>
 				<TooltipContent className="w-full max-w-md whitespace-normal transition-opacity">
 					{copied ? "Copied!" : `Copy code to load ${type}`}
diff --git a/src/components/dag-visualizer/StepNode.tsx b/src/components/dag-visualizer/StepNode.tsx
index a84fba63e..a53509e24 100644
--- a/src/components/dag-visualizer/StepNode.tsx
+++ b/src/components/dag-visualizer/StepNode.tsx
@@ -1,11 +1,11 @@
+import Copy from "@/assets/icons/copy.svg?react";
 import { Step } from "@/types/steps";
 import { clsx } from "clsx";
 import { NodeProps, ReactFlowState, useStore } from "reactflow";
-import { BaseNode } from "./BaseNode";
-import { StepSheet } from "../steps/step-sheet";
 import { ExecutionStatusIcon, getExecutionStatusBackgroundColor } from "../ExecutionStatus";
+import { StepSheet } from "../steps/step-sheet";
+import { BaseNode } from "./BaseNode";
 import { CopyNodeButton } from "./NodeCopyButton";
-import { useParams } from "react-router-dom";
 
 const selector = (state: ReactFlowState) => ({
 	unselectAll: state.unselectNodesAndEdges
@@ -13,7 +13,6 @@ const selector = (state: ReactFlowState) => ({
 
 export function StepNode({ data, selected }: NodeProps<Step>) {
 	const { unselectAll } = useStore(selector);
-	const { runId } = useParams() as { runId: string };
 
 	function openChangeHandler(isOpen: boolean) {
 		if (!isOpen) {
@@ -27,11 +26,10 @@ export function StepNode({ data, selected }: NodeProps<Step>) {
 	return (
 		<BaseNode>
 			<StepSheet onOpenChange={openChangeHandler} stepId={data.id}>
-				{/* TODO check shadow in design system */}
 				<button
 					data-selected={!!selected}
 					className={clsx(
-						"group h-[50px] max-w-[300px] rounded-md  border bg-theme-surface-primary transition-all duration-200  hover:shadow-md  data-[selected=true]:shadow-md",
+						"group h-[50px] max-w-[300px] rounded-md border bg-theme-surface-primary transition-all duration-200 hover:shadow-md data-[selected=true]:shadow-md",
 						{
 							"border-theme-border-moderate hover:border-neutral-400 data-[selected=true]:border-theme-border-bold":
 								data.body?.status !== "failed",
@@ -47,11 +45,15 @@ export function StepNode({ data, selected }: NodeProps<Step>) {
 						</div>
 						<p className="truncate font-semibold">{data.name}</p>
 						<CopyNodeButton
+							className="h-4 w-4 shrink-0 rounded-sm hover:bg-theme-surface-secondary active:bg-neutral-300"
 							code={`from zenml.client import Client
-    run = Client().get_pipeline_run('${runId}') 
-    config = run.config`}
+step = Client().get_run_step(${data.id})
+config = step.config`}
 							type="step"
-						/>
+						>
+							<Copy className="h-3 w-3 fill-theme-text-tertiary" />
+							<div className="sr-only">Copy code to load step</div>
+						</CopyNodeButton>
 					</div>
 				</button>
 			</StepSheet>

From dff72b811f19f5cc1594032dcc1e53af81f0d70f Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Mon, 11 Nov 2024 12:57:52 +0000
Subject: [PATCH 3/3] fix: Code

---
 src/components/dag-visualizer/ArtifactNode.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dag-visualizer/ArtifactNode.tsx b/src/components/dag-visualizer/ArtifactNode.tsx
index 742607844..1aa0361be 100644
--- a/src/components/dag-visualizer/ArtifactNode.tsx
+++ b/src/components/dag-visualizer/ArtifactNode.tsx
@@ -52,9 +52,9 @@ export function ArtifactNode({ data, selected }: NodeProps<ArtifactVersion & { n
 					<CopyNodeButton
 						className="h-4 w-4 shrink-0 rounded-sm hover:bg-primary-100 active:bg-primary-200"
 						code={`from zenml.client import Client
-
-    artifact = Client().get_artifact_version('${data.id}')
-    loaded_artifact = artifact.load()`}
+							
+artifact = Client().get_artifact_version('${data.id}')
+loaded_artifact = artifact.load()`}
 						type="artifact"
 					>
 						<Copy className="h-3 w-3 fill-primary-400" />