feat: add refresh button to dag (#600)

Author: Cahllagerfeld

src/app/runs/[id]/Dag.tsx

@@ -49,6 +49,15 @@ export function DAG() {
 		fitView(); // Keep an eye on performance here
 	}, [width, height]);
 
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			fitView({ duration: 200 });
+		}, 100);
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [data]);
+
 	useLayoutEffect(() => {
 		onDagreLayout();
 	}, [data?.nodes, data?.edges, onDagreLayout]);
@@ -82,7 +91,7 @@ export function DAG() {
 			onEdgesChange={onEdgesChange}
 			fitView
 		>
-			<DagControls />
+			<DagControls runId={runId} />
 		</ReactFlow>
 	);
 }

src/components/dag-visualizer/Controls.tsx

@@ -2,11 +2,21 @@ import { Button } from "@zenml-io/react-component-library/components";
 import Plus from "@/assets/icons/plus.svg?react";
 import Minus from "@/assets/icons/minus.svg?react";
 import Maximize from "@/assets/icons/maximize.svg?react";
+import Refresh from "@/assets/icons/refresh.svg?react";
 import { useReactFlow } from "reactflow";
+import { usePipelineRun } from "../../data/pipeline-runs/pipeline-run-detail-query";
+import { usePipelineRunGraph } from "../../data/pipeline-runs/pipeline-run-graph-query";
 
-export function DagControls() {
+type Props = {
+	runId: string;
+};
+
+export function DagControls({ runId }: Props) {
 	const { fitView, zoomIn, zoomOut } = useReactFlow();
 
+	const run = usePipelineRun({ runId });
+	const graph = usePipelineRunGraph({ runId });
+
 	return (
 		<div aria-label="Dag Controls" className="absolute left-4 top-4 z-10 flex flex-col gap-1">
 			<div className="divide-y divide-neutral-300 overflow-hidden rounded-md border border-neutral-300">
@@ -39,6 +49,18 @@ export function DagControls() {
 			>
 				<Maximize className="h-5 w-5 fill-theme-text-primary" />
 			</Button>
+			<Button
+				className="h-6 w-6 bg-theme-surface-primary p-0.5"
+				onClick={() => {
+					run.refetch();
+					graph.refetch();
+				}}
+				emphasis="subtle"
+				intent="secondary"
+			>
+				<span className="sr-only">Refresh</span>
+				<Refresh className="h-5 w-5 fill-theme-text-primary" />
+			</Button>
 		</div>
 	);
 }