center flowgraph

frontend/src/lib/components/CenteredModal.svelte

@@ -2,7 +2,7 @@
 	import { SettingsService } from '$lib/gen'
 
 	export let subtitle: string | undefined = undefined
-	export let title = 'Welcome to Windmill (beta)'
+	export let title = 'Windmill'
 	let version = ''
 
 	SettingsService.backendVersion().then((x) => {

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -17,6 +17,7 @@
 	export let initialPath: string
 
 	export let defaultTab = 'metadata'
+	let topHeight = 0
 </script>
 
 <div class="h-full overflow-hidden">
@@ -24,9 +25,10 @@
 		<div class="h-full flex-1">
 			<Splitpanes horizontal>
 				<Pane size={50} minSize={20}>
-					<div class="max-w-full w-full overflow-hidden h-full">
+					<div bind:clientHeight={topHeight} class="max-w-full w-full overflow-hidden h-full">
 						{#if $flowStore.value.modules}
 							<FlowGraph
+								minHeight={topHeight}
 								modules={$flowStore.value.modules}
 								failureModule={$flowStore.value.failure_module}
 							/>

frontend/src/lib/components/graph/FlowGraph.svelte

@@ -21,6 +21,7 @@
 
 	export let modules: FlowModule[] | undefined = []
 	export let failureModule: FlowModule | undefined = undefined
+	export let minHeight: number = 0
 
 	const idGenerator = createIdGenerator()
 	let nestedNodes: NestedNodes
@@ -30,10 +31,13 @@
 
 	let dispatch = createEventDispatcher()
 
-	$: if (modules?.length) {
-		createGraph(modules, failureModule)
-	} else {
-		nodes = edges = []
+	$: {
+		width && height && minHeight
+		if (modules?.length) {
+			createGraph(modules, failureModule)
+		} else {
+			nodes = edges = []
+		}
 	}
 
 	function createGraph(modules: FlowModule[], failureModule?: FlowModule) {
@@ -53,7 +57,7 @@
 		const flatNodes = flattenNestedNodes(nestedNodes)
 		const layered = layoutNodes(flatNodes)
 		nodes = layered.nodes
-		width = layered.width
+		// width = layered.width
 		height = layered.height
 		edges = createEdges(nodes)
 	}
@@ -236,23 +240,25 @@
 		return array
 	}
 
-	function layoutNodes(nodes: Node[]): { nodes: Node[]; width: number; height: number } {
-		if (!nodes.length) return { nodes: [], width: 0, height: 0 }
+	function layoutNodes(nodes: Node[]): { nodes: Node[]; height: number } {
+		if (!nodes.length) return { nodes: [], height: 0 }
 		const stratify = dagStratify().id(({ id }: Node) => '' + id)
 		const dag = stratify(nodes)
 		const layout = sugiyama()
 			.decross(decrossOpt())
 			.coord(coordCenter())
 			.nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical])
-		const { width, height } = layout(dag)
+		const boxSize = layout(dag)
 		return {
 			nodes: dag.descendants().map((des) => ({
 				...des.data,
 				id: +des.data.id,
-				position: { x: des.x ? des.x - NODE.width / 2 : 0, y: des.y || 0 }
+				position: {
+					x: des.x ? des.x + (width - boxSize.width - NODE.width) / 2 : 0,
+					y: des.y || 0
+				}
 			})),
-			width: width,
-			height: height + NODE.height
+			height: Math.max(boxSize.height + NODE.height, minHeight)
 		}
 	}
 
@@ -316,13 +322,8 @@
 	}
 </script>
 
-<div
-	on:scroll={() => console.log('X')}
-	bind:clientWidth={width}
-	bind:clientHeight={height}
-	class="w-full h-full overflow-hidden"
->
+<div bind:clientWidth={width} class="w-full h-full overflow-hidden">
 	{#if width && height}
-		<Svelvet {nodes} {edges} {width} {height} bgColor="rgb(249 250 251)" />
+		<Svelvet {nodes} {width} {edges} {height} bgColor="rgb(249 250 251)" />
 	{/if}
 </div>

frontend/src/routes/user/login@user.svelte

@@ -110,7 +110,7 @@
 
 <div class="min-h-screen antialiased text-gray-900">
 	<!-- Enable submit form on enter -->
-	<CenteredModal>
+	<CenteredModal title="Login to Windmill">
 		<div class="justify-center text-center flex flex-col">
 			{#each providers as { type, icon, name }}
 				{#if logins.includes(type)}