improve flow viewer

frontend/src/app.css

@@ -23,6 +23,10 @@
 		display: none !important;
 	}
 
+	.nowrap pre code.hljs {
+		whitespace: normal !important;
+	}
+
 	svelte-virtual-list-row {
 		overflow: visible !important;
 	}
@@ -31,8 +35,6 @@
 		border-top-width: 1px !important;
 		border-bottom-width: 0px !important;
 	}
-
-	
 }
 
 @layer components {
@@ -42,4 +44,3 @@
 		cursor: pointer !important;
 	}
 }
-

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -5,6 +5,11 @@
 	import IconedPath from './IconedPath.svelte'
 	import { scriptPathToHref } from '../utils'
 	import type { FlowModule, FlowValue } from '$lib/gen'
+	import { Drawer, DrawerContent } from './common'
+	import { Highlight } from 'svelte-highlight'
+	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
+	import typescript from 'svelte-highlight/languages/typescript'
+	import { cleanExpr } from './flows/utils'
 	export let flow: {
 		summary: string
 		description?: string
@@ -13,8 +18,60 @@
 	}
 	export let overflowAuto = false
 	let stepDetail: FlowModule | undefined = undefined
+	let codeViewer: Drawer
 </script>
 
+<Drawer bind:this={codeViewer} size="900px">
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+		{#if stepDetail}
+			{#if stepDetail.value.type == 'script'}
+				<div class="mb-4">
+					<a
+						rel="noreferrer"
+						target="_blank"
+						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						class=""
+					>
+						<IconedPath path={stepDetail?.value?.path ?? ''} />
+					</a>
+				</div>
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer
+						inputTransforms={stepDetail?.value?.input_transforms ??
+							stepDetail?.input_transforms ??
+							{}}
+					/>
+				</div>
+				{#if stepDetail.value.path.startsWith('hub/')}
+					<div class="mt-6">
+						<h3>Code</h3>
+						<iframe
+							class="w-full h-full  text-sm"
+							title="embedded script from hub"
+							frameborder="0"
+							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+						/>
+					</div>
+				{/if}
+			{:else if stepDetail.value.type == 'rawscript'}
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer
+						inputTransforms={stepDetail?.value?.input_transforms ??
+							stepDetail?.input_transforms ??
+							{}}
+					/>
+				</div>
+
+				<h3 class="mb-2">Code</h3>
+				<span class="!text-xs">
+					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				</span>
+			{/if}
+		{/if}
+	</DrawerContent>
+</Drawer>
 <div class="grid grid-cols-3 w-full h-full">
 	<div class="h-full col-span-2 w-full border border-gray-700" class:overflow-auto={overflowAuto}>
 		<FlowGraph
@@ -45,8 +102,14 @@
 					/>
 				</div>
 
-				<h3 class="mb-2">Code</h3>
-				<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				<h3 class="mb-2"
+					>Code &nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+						>Expand</button
+					>
+				</h3>
+				<span class="!text-xs">
+					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				</span>
 			{:else if stepDetail.value.type == 'script'}
 				<div class="mb-4">
 					<a
@@ -68,7 +131,11 @@
 				</div>
 				{#if stepDetail.value.path.startsWith('hub/')}
 					<div class="mt-6">
-						<h3>Code</h3>
+						<h3
+							>Code&nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+								>Expand</button
+							>
+						</h3>
 						<iframe
 							class="w-full h-full  text-sm"
 							title="embedded script from hub"
@@ -77,6 +144,24 @@
 						/>
 					</div>
 				{/if}
+			{:else if stepDetail.value.type == 'forloopflow'}
+				<p
+					>For loop with iterator: {#if stepDetail.value.iterator.type == 'static'}<ObjectViewer
+							json={stepDetail.value.iterator.value}
+						/>{:else}
+						<span class="text-xs">
+							<Highlight
+								offsetTop={0}
+								language={typescript}
+								code={cleanExpr(stepDetail.value.iterator.expr)}
+							/>
+						</span>
+					{/if}</p
+				>
+			{:else if stepDetail.value.type == 'branchall'}
+				<p>Run all branches</p>
+			{:else if stepDetail.value.type == 'branchone'}
+				<p>Run one branch based on a predicate</p>
 			{/if}
 		{/if}
 	</div>

frontend/src/lib/components/HighlightCode.svelte

@@ -26,4 +26,4 @@
 	$: lang = getLang(language)
 </script>
 
-<Highlight language={lang} {code} />
+<Highlight className="nowrap {$$props.class}" language={lang} {code} />

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

@@ -32,7 +32,7 @@
 
 	let selectedNode: string | undefined = undefined
 
-	const idGenerator = createIdGenerator()
+	let idGenerator: Generator
 	let nestedNodes: NestedNodes
 	let nodes: Node[] = []
 	let edges: Edge[] = []
@@ -43,6 +43,7 @@
 	$: {
 		width && height && minHeight && selectedNode && flowModuleStates
 		if (modules) {
+			idGenerator = createIdGenerator()
 			createGraph(modules, failureModule)
 		} else {
 			nodes = edges = []
@@ -181,6 +182,7 @@
 		}
 		const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]'
 		const graphId = idGenerator.next().value
+		let nodeId = onClickDetail.id ?? numberToChars(graphId - 1)
 		return {
 			id: graphId,
 			position: { x: -1, y: -1 },
@@ -199,22 +201,22 @@
 					</div>
 				</div>
 				<div class="text-2xs absolute -top-6 text-gray-600 truncate">${
-					flowModuleStates?.[onClickDetail.id]?.scheduled_for ?? ''
+					flowModuleStates?.[nodeId]?.scheduled_for ?? ''
 				}<div>
 			`
 			},
 			host,
 			width: NODE.width,
 			height: NODE.height,
-			borderColor: selectedNode == onClickDetail.id ? 'black' : '#999',
-			bgColor:
-				selectedNode == onClickDetail.id
-					? '#f5f5f5'
-					: getStateColor(flowModuleStates?.[onClickDetail.id]?.type),
+			borderColor: selectedNode == nodeId ? 'black' : '#999',
+			bgColor: selectedNode == nodeId ? '#f5f5f5' : getStateColor(flowModuleStates?.[nodeId]?.type),
 			parentIds,
 			clickCallback: (node) => {
 				if (!notSelectable) {
-					selectedNode = onClickDetail.id
+					selectedNode = nodeId
+				}
+				if (onClickDetail.id == undefined) {
+					onClickDetail.id = numberToChars(graphId - 1)
 				}
 				dispatch('click', onClickDetail)
 			},

frontend/src/routes/index.svelte

@@ -77,7 +77,7 @@
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:this={flowViewer} size="900px">
+<Drawer bind:this={flowViewer} size="1200px">
 	<DrawerContent title="Hub flow" on:close={flowViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
 			<Button

frontend/tailwind.config.cjs

@@ -285,7 +285,6 @@ const config = {
 					fontFamily: theme('fontFamily.mono'),
 					fontSize: theme('fontSize.sm') + ' !important',
 					lineHeight: theme('lineHeight.4') + ' !important',
-					whiteSpace: 'pre-wrap'
 				}
 			})
 			addComponents({