From 19fa1dd20c20dd1a0aad44cc613421544469d4d8 Mon Sep 17 00:00:00 2001
From: Xiaoyun Zhang <xiaoyuz@microsoft.com>
Date: Sat, 12 Oct 2024 01:04:00 -0700
Subject: [PATCH] [WebUI] Fix small bugs (#87)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update

* update“

* update
---
 stepwise-studio/components/markdown.tsx       |  2 +-
 stepwise-studio/components/parameter-card.tsx |  7 +--
 stepwise-studio/components/step-node.tsx      | 34 ++++++++---
 .../components/step-run-sidebar.tsx           | 19 +++----
 stepwise-studio/components/variable-card.tsx  | 10 ++--
 stepwise-studio/components/workflow.tsx       | 57 ++++++++++++++++---
 6 files changed, 91 insertions(+), 38 deletions(-)

diff --git a/stepwise-studio/components/markdown.tsx b/stepwise-studio/components/markdown.tsx
index 5003c67..45e6d18 100644
--- a/stepwise-studio/components/markdown.tsx
+++ b/stepwise-studio/components/markdown.tsx
@@ -10,7 +10,7 @@ export const Markdown = (props: ReactMarkdownOptions) => {
 	return (
 		<ReactMarkdown
 			{...props}
-			className="prose prose-default max-w-none rounded-md p-1 px-2 "
+			className="prose prose-default max-w-none rounded-md p-1 px-2 cursor-text "
 			remarkPlugins={[remarkGfm]}
 			components={{
 				code: ({ node, inline, className, children, ...props }) => {
diff --git a/stepwise-studio/components/parameter-card.tsx b/stepwise-studio/components/parameter-card.tsx
index f99bc17..4e1578c 100644
--- a/stepwise-studio/components/parameter-card.tsx
+++ b/stepwise-studio/components/parameter-card.tsx
@@ -40,23 +40,22 @@ export const ParameterCard: React.FC<ParameterCardProps> = (props) => {
 		<div
 			style={{ userSelect: "text" }}
 			className={cn(
-				"w-full flex flex-col gap-1 rounded cursor-default px-2 py-1 nodrag nopan ",
+				"w-full flex flex-col gap-1 rounded cursor-default px-1 py-1 nodrag nopan ",
 			)}
 		>
 			<div
 				className="flex flex-wrap gap-x-5 justify-between hover:cursor-pointer"
 				onClick={() => setCollapsed(!collapsed)}
 			>
-				<div className="flex gap-2 items-center">
+				<div className="flex flex-wrap gap-2 items-center">
 					<p>{name}</p>
 					{parameterType != "" && (
 						<p
 							className={cn(
 								badgeVariants({
 									variant: "green",
-									size: "tiny",
 								}),
-								"px-1 py-0 border truncate flex items-center",
+								"px-3 py-0 h-4 justify-center text-sm truncate flex items-center",
 							)}
 						>
 							{getDisplayType(parameterType)}
diff --git a/stepwise-studio/components/step-node.tsx b/stepwise-studio/components/step-node.tsx
index 2e83430..3f223c2 100644
--- a/stepwise-studio/components/step-node.tsx
+++ b/stepwise-studio/components/step-node.tsx
@@ -81,7 +81,7 @@ export interface StepNodeProps extends StepRunDTO {
 	onClearClick: (step: StepDTO) => void;
 	onSubmitOutput: (output: VariableDTO) => void;
 	onCancelInput: () => void;
-	onResize: (height: number, width: number) => void;
+	onResize: (height?: number, width?: number) => void;
 	isWorkflowRunning: boolean;
 	width?: number;
 	height?: number;
@@ -346,6 +346,24 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 
 	useEffect(() => {
 		if (stepNodeRef.current) {
+			// this usually means that the content of this node has changed
+			// so we want to automatically adjust the weight to present the content in a nicer way
+			// by setting the width to undefined, the prop.data.onResize will be invoked
+			// and the new width will be re-calculated when the node is re-rendered
+			// if (
+			// 	height !== stepNodeRef.current.offsetHeight &&
+			// 	width === stepNodeRef.current.offsetWidth &&
+			// 	width !== undefined
+			// ) {
+			// 	console.log("Setting width to undefined");
+			// 	prop.data.onResize(
+			// 		undefined,
+			// 		undefined,
+			// 	);
+
+			// 	return;
+			// }
+
 			if (
 				height !== stepNodeRef.current.offsetHeight ||
 				width !== stepNodeRef.current.offsetWidth
@@ -354,6 +372,8 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 					stepNodeRef.current.offsetHeight ?? height,
 					width ?? stepNodeRef.current.offsetWidth,
 				);
+
+				return;
 			}
 		}
 	}, [
@@ -370,7 +390,7 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 				"border-2 rounded-md shadow-md p-2 bg-background/50 group",
 				// set weight and height
 				isSelected ? "border-primary/40" : "border-transparent",
-				width ?? "max-w-48",
+				width ?? "max-w-80",
 				shouldWaitForInput(status, stepType) ? "border-primary" : "",
 			)}
 			ref={stepNodeRef}
@@ -383,11 +403,11 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 						border: "none",
 					}}
 					onResize={(event, param) => {
-						setWidth(param.width);
-						setHeight(param.height);
+						if (Math.abs(param.width - width) > 10) {
+							setWidth(param.width);
+						}
 					}}
 					onResizeEnd={(event, param) => {
-						setHeight(stepNodeRef.current!.offsetHeight);
 						setWidth(stepNodeRef.current!.offsetWidth);
 					}}
 					minWidth={128}
@@ -406,10 +426,10 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 			)}
 			{/* settings bar */}
 			{/* appear when hover */}
-			<div className="invisible flex group-hover:visible absolute -top-5 right-0 bg-background/50 rounded gap-1 m-0 p-1">
+			<div className="invisible flex group-hover:visible absolute -top-7 right-0 bg-background/50 rounded gap-1 m-0 p-1">
 				<Button
 					variant={"outline"}
-					size={"xxsIcon"}
+					size={"tinyIcon"}
 					className="m-0 p-0"
 					onClick={() => prop.data.onClearClick(step)}
 				>
diff --git a/stepwise-studio/components/step-run-sidebar.tsx b/stepwise-studio/components/step-run-sidebar.tsx
index 73c2a7a..d6a8686 100644
--- a/stepwise-studio/components/step-run-sidebar.tsx
+++ b/stepwise-studio/components/step-run-sidebar.tsx
@@ -27,21 +27,16 @@ const StepRunCard: React.FC<StepRunProps> = (props) => {
 		setStepRun(props.stepRun);
 	}, [props.stepRun]);
 
+	const iconSize = 16;
+
 	return (
 		<div className="flex w-full flex-col gap-2 p-2 bg-accent rounded-lg">
 			<div className="flex justify-between flex-wrap  gap-2">
-				<div className="flex items-center gap-2">
-					<div
-						className={cn(
-							buttonVariants({
-								variant: "outline",
-								size: "tinyIcon",
-							}),
-						)}
-					>
-						{stepRun?.step && <SquareFunction size={16} />}
-						{stepRun?.result && <VariableIcon size={16} />}
-					</div>
+				<div className="flex items-center gap-1">
+					{stepRun?.step && !stepRun?.result && (
+						<SquareFunction size={iconSize} />
+					)}
+					{stepRun?.result && <VariableIcon size={iconSize} />}
 					<span className="text-xs">
 						{stepRun?.step?.name ?? stepRun?.result?.name}
 					</span>
diff --git a/stepwise-studio/components/variable-card.tsx b/stepwise-studio/components/variable-card.tsx
index d9dd80c..ebec157 100644
--- a/stepwise-studio/components/variable-card.tsx
+++ b/stepwise-studio/components/variable-card.tsx
@@ -27,12 +27,10 @@ export const VariableCard: React.FC<VariableCardProps> = (props) => {
 	}, [props.variable]);
 
 	return (
-		<div>
+		<div className="bg-transparent items-center flex flex-col gap-1 rounded-md p-1 ">
 			{variable.type !== "StepWiseImage" && variable.displayValue && (
-				<div className="flex flex-col gap-1 rounded-md">
-					<Markdown className="text-xs w-full overflow-x-auto">
-						{variable.displayValue}
-					</Markdown>
+				<div className="w-full overflow-x-auto">
+					<Markdown>{variable.displayValue}</Markdown>
 				</div>
 			)}
 
@@ -40,7 +38,7 @@ export const VariableCard: React.FC<VariableCardProps> = (props) => {
 				<img
 					src={previewImageUrl}
 					alt="Preview"
-					className="w-full rounded-lg"
+					className="rounded-lg max-h-48"
 				/>
 			)}
 		</div>
diff --git a/stepwise-studio/components/workflow.tsx b/stepwise-studio/components/workflow.tsx
index 582074f..119588b 100644
--- a/stepwise-studio/components/workflow.tsx
+++ b/stepwise-studio/components/workflow.tsx
@@ -23,6 +23,8 @@ import ReactFlow, {
 	ReactFlowProvider,
 	MarkerType,
 	NodeChange,
+	useOnViewportChange,
+	Viewport,
 } from "reactflow";
 import "reactflow/dist/style.css";
 import { StepNode, StepNodeProps } from "./step-node";
@@ -42,6 +44,7 @@ import {
 export type WorkflowLayout = {
 	stepPositions: { [key: string]: { x: number; y: number } };
 	stepSizes: { [key: string]: { width: number; height: number } | undefined };
+	viewPort: Viewport;
 };
 export type WorkflowData = WorkflowDTO &
 	WorkflowLayout &
@@ -154,7 +157,6 @@ export function clearStepRunResult(
 			var param = run.step?.parameters?.find(
 				(param) => param.variable_name === step.name,
 			)!;
-			console.log("param: ", param);
 			return {
 				...run,
 				status: "NotReady",
@@ -176,11 +178,23 @@ export function clearStepRunResult(
 const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 	const [nodes, setNodes, onNodesChange] = useNodesState<StepNodeProps>([]);
 	const [edges, setEdges, _] = useEdgesState([]);
-	const [maxStep, setMaxStep] = useState<number>(props.dto?.maxSteps ?? 1);
+	const [maxStep, setMaxStep] = useState<number>(props.dto?.maxSteps ?? 5);
 	const [maxParallelRun, setMaxParallelRun] = useState<number>(
-		props.dto?.maxParallelRun ?? 10,
+		props.dto?.maxParallelRun ?? 3,
 	);
-	const { fitView } = useReactFlow();
+	const { fitView, getViewport, setViewport } = useReactFlow();
+	useOnViewportChange({
+		onEnd: (viewport) => {
+			setWorkflow((prev) => {
+				if (!prev) return prev;
+				return {
+					...prev,
+					transform: [viewport.x, viewport.y],
+					zoom: viewport.zoom,
+				};
+			});
+		},
+	});
 	const { theme } = useTheme();
 	const [workflow, setWorkflow] = useState<WorkflowData | undefined>(
 		undefined,
@@ -197,6 +211,9 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 			props.dto.stepRuns ?? [],
 		);
 		setWorkflow({ ...props.dto, stepRuns: latestSnapshot });
+		if (props.dto.viewPort) {
+			setViewport(props.dto.viewPort);
+		}
 		setIsRunning(false);
 	}, [props.dto]);
 
@@ -325,7 +342,10 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 								...prev,
 								stepSizes: {
 									...prev.stepSizes,
-									[step.name]: { height, width },
+									[step.name]:
+										height && width
+											? { height, width }
+											: undefined,
 								},
 							};
 						});
@@ -361,11 +381,33 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 		return { nodes, edges };
 	};
 
+	useOnViewportChange({
+		onChange: (viewport) => {
+			console.log("Viewport changed: ", viewport);
+			setWorkflow((prev) => {
+				if (!prev) return prev;
+				return {
+					...prev,
+					viewPort: viewport,
+				};
+			});
+		},
+		onEnd: (viewport) => {
+			console.log("Viewport changed: ", viewport);
+			setWorkflow((prev) => {
+				if (!prev) return prev;
+				return {
+					...prev,
+					viewPort: viewport,
+				};
+			});
+		},
+	});
+
 	useEffect(() => {
 		if (!workflow) return;
 		setCompletedRunSteps(workflow.stepRuns ?? []);
 		var graph = createGraphFromWorkflow(workflow, isRunning);
-		console.log("Graph: ", graph);
 		setNodes(graph.nodes);
 		setEdges(graph.edges);
 		props.onWorkflowChange?.(workflow);
@@ -387,7 +429,6 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 			);
 			es.addEventListener("StepRunDTO", async (event) => {
 				var data = JSON.parse(event.data) as StepRunDTO;
-				console.log("Received step run data: ", data);
 				existingRunSteps.push(data);
 				var latestSnapshot = createLatestStepRunSnapShotFromWorkflow(
 					workflow,
@@ -512,7 +553,7 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 				),
 			};
 		});
-	}, [nodes, edges, setNodes, setEdges, fitView]);
+	}, [nodes, edges, setNodes, setEdges, fitView, getViewport]);
 
 	const onMaxStepsChange = (maxSteps: number) => {
 		setMaxStep(maxSteps);