feat(frontend): result by id

windmill-labs · Oct 26, 2022 · 6fcf984 · 6fcf984
1 parent e492f71
commit 6fcf984
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 11 deletions.
diff --git a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
@@ -43,6 +43,7 @@
 						<span class="mb-2 text-sm font-bold">Branch predicate</span>
 						<div class="border w-full">
 							<PropPickerWrapper
+								priorId={previousModuleId}
 								{pickableProperties}
 								on:select={({ detail }) => {
 									editor?.insertAtCursor(detail)

diff --git a/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
@@ -9,6 +9,7 @@
 
 	export let flowModule: FlowModule
 	export let parentModule: FlowModule | undefined
+	export let previousModuleId: string | undefined
 
 	let selected: string = 'retries'
 </script>
@@ -29,13 +30,13 @@
 
 				<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 					<div class="p-4 overflow-y-auto">
-						<FlowModuleEarlyStop bind:flowModule {parentModule} />
+						<FlowModuleEarlyStop {previousModuleId} bind:flowModule {parentModule} />
 					</div>
 				</TabContent>
 
 				<TabContent value="suspend" class="flex flex-col flex-1 h-full">
 					<div class="p-4 overflow-y-auto">
-						<FlowModuleSuspend bind:flowModule />
+						<FlowModuleSuspend {previousModuleId} bind:flowModule />
 					</div>
 				</TabContent>
 			</div>

diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -52,6 +52,7 @@
 					{#if mod.value.iterator.type == 'javascript'}
 						<div class="border w-full">
 							<PropPickerWrapper
+								priorId={previousModuleId}
 								{pickableProperties}
 								on:select={({ detail }) => {
 									editor?.insertAtCursor(detail)
@@ -98,13 +99,13 @@
 
 							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
-									<FlowModuleEarlyStop bind:flowModule={mod} {parentModule} />
+									<FlowModuleEarlyStop {previousModuleId} bind:flowModule={mod} {parentModule} />
 								</div>
 							</TabContent>
 
 							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend bind:flowModule={mod} />
+									<FlowModuleSuspend {previousModuleId} bind:flowModule={mod} />
 								</div>
 							</TabContent>
 						</div>

diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -184,7 +184,10 @@
 						<div class="h-[calc(100%-32px)]">
 							{#if selected === 'inputs'}
 								<div class="h-full overflow-auto">
-									<PropPickerWrapper pickableProperties={stepPropPicker.pickableProperties}>
+									<PropPickerWrapper
+										priorId={previousModuleId}
+										pickableProperties={stepPropPicker.pickableProperties}
+									>
 										<p class="items-baseline text-xs text-gray-700 italic hidden md:block mb-2">
 											Move the focus outside of the text editor to recompute the inputs or press
 											Ctrl/Cmd+S
@@ -209,13 +212,14 @@
 								<FlowRetries bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
 							{:else if selected === 'early-stop'}
 								<FlowModuleEarlyStop
+									{previousModuleId}
 									bind:flowModule
 									class="px-4 pb-4 h-full overflow-auto"
 									{parentModule}
 								/>
 							{:else if selected === 'suspend'}
 								<div class="px-4 pb-4 h-full overflow-auto">
-									<FlowModuleSuspend bind:flowModule />
+									<FlowModuleSuspend {previousModuleId} bind:flowModule />
 								</div>
 							{/if}
 						</div>

diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -11,6 +11,7 @@
 
 	const { previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
 
+	export let previousModuleId: string | undefined
 	export let flowModule: FlowModule
 	export let parentModule: FlowModule | undefined
 
@@ -58,6 +59,7 @@
 		<span class="text-xs font-bold">Stop condition expression</span>
 		<div class="border w-full">
 			<PropPickerWrapper
+				priorId={previousModuleId}
 				{pickableProperties}
 				on:select={({ detail }) => {
 					editor?.insertAtCursor(detail)

diff --git a/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte b/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
@@ -11,6 +11,7 @@
 	import type { FlowEditorContext } from '../types'
 
 	export let flowModule: FlowModule
+	export let previousModuleId: string | undefined
 
 	const { selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -86,6 +87,7 @@
 	{#if flowModule.sleep && schema.properties['sleep']}
 		<div class="border">
 			<PropPickerWrapper
+				priorId={previousModuleId}
 				displayContext={false}
 				{pickableProperties}
 				on:select={({ detail }) => {

diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -33,9 +33,9 @@
 	{#if flowModule.value.type === 'forloopflow'}
 		<FlowLoop bind:mod={flowModule} {parentModule} {previousModuleId} />
 	{:else if flowModule.value.type === 'branchone'}
-		<FlowBranchesWrapper bind:flowModule {parentModule} />
+		<FlowBranchesWrapper {previousModuleId} bind:flowModule {parentModule} />
 	{:else if flowModule.value.type === 'branchall'}
-		<FlowBranchesWrapper bind:flowModule {parentModule} />
+		<FlowBranchesWrapper {previousModuleId} bind:flowModule {parentModule} />
 	{:else if flowModule.value.type === 'identity'}
 		<FlowInputs
 			shouldDisableTriggerScripts={parentModule !== undefined || previousModuleId !== undefined}

diff --git a/frontend/src/lib/components/flows/flowStore.ts b/frontend/src/lib/components/flows/flowStore.ts
@@ -1,7 +1,6 @@
 import type { Flow, FlowModule, ForloopFlow, InputTransform } from '$lib/gen'
-import { get, writable } from 'svelte/store'
+import { get, writable, derived } from 'svelte/store'
 import { flowStateStore, initFlowState } from './flowState'
-import { nextId } from './flowStateUtils'
 import { numberToChars } from './utils'
 
 export type FlowMode = 'push' | 'pull'
@@ -16,6 +15,23 @@ export const flowStore = writable<Flow>({
 	extra_perms: {}
 })
 
+function dfs(modules: FlowModule[]): string[] {
+	let result: string[] = []
+	for (const module of modules) {
+		if (module.value.type == 'forloopflow') {
+			result = result.concat(dfs(module.value.modules)).concat(module.id)
+		} else if (module.value.type == 'branchone') {
+			result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat().concat(module.value.default)).concat(module.id))
+		} else if (module.value.type == 'branchall') {
+			result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat()).concat(module.id))
+		} else {
+			result.push(module.id)
+		}
+	}
+	return result
+}
+export const flowIds = derived(flowStore, flow => dfs(flow.value.modules))
+
 export async function initFlow(flow: Flow) {
 
 	let counter = 40

diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -24,6 +24,7 @@
 
 	export let pickableProperties: Object = {}
 	export let displayContext = true
+	export let priorId: string | undefined
 
 	const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
 	const dispatch = createEventDispatcher()
@@ -49,6 +50,7 @@
 	</Pane>
 	<Pane minSize={20} class="px-2 py-2 h-full !duration-[0ms]">
 		<PropPicker
+			{priorId}
 			{displayContext}
 			{pickableProperties}
 			on:select={({ detail }) => {

diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
@@ -205,6 +205,16 @@ export function numberToChars(n: number) {
 	return out
 }
 
+export function charsToNumber(n: string): number {
+	let b = 1
+	let res = 0
+	for (let c of n) {
+		b = b * 26
+		res += (c.charCodeAt(0) - charCode) * b
+	}
+	return res
+}
+
 export function isEmptyFlowModule(flowModule: FlowModule): boolean {
 	return flowModule.value.type === 'identity'
 }

diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -81,7 +81,11 @@
 			{/each}
 		</ul>
 	</span>
-	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
+	<span
+		class="cursor-pointer hover:bg-gray-200 {level == 0 ? 'ml-2' : ''}"
+		class:hidden={!collapsed}
+		on:click={collapse}
+	>
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
 	{#if !isLast && collapsed}

diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -10,9 +10,12 @@
 
 	import ObjectViewer from './ObjectViewer.svelte'
 	import { keepByKey } from './utils'
+	import { flowStateStore } from '../flows/flowState'
+	import { flowIds } from '../flows/flowStore'
 
 	export let pickableProperties: Object = {}
 	export let displayContext = true
+	export let priorId: string | undefined
 	let variables: Record<string, string> = {}
 	let resources: Record<string, any> = {}
 	let displayVariable = false
@@ -28,6 +31,20 @@
 	$: propsFiltered =
 		search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search)
 
+	let priorIds = {}
+	$: {
+		if (priorId) {
+			const allState = $flowStateStore
+			priorIds = Object.fromEntries(
+				Object.entries(allState)
+					.filter(
+						(o) =>
+							$flowIds.includes(o[0]) && $flowIds.indexOf(o[0]) <= $flowIds.indexOf(priorId ?? '')
+					)
+					.map((o) => [o[0], o[1].previewResult])
+			)
+		}
+	}
 	async function loadVariables() {
 		variables = Object.fromEntries(
 			(
@@ -82,6 +99,16 @@
 <div class="overflow-y-auto mb-2">
 	<ObjectViewer json={propsFiltered} on:select />
 </div>
+{#if priorId}
+	<span class="font-bold text-sm">Result by id</span>
+	<div class="overflow-y-auto mb-2">
+		<ObjectViewer
+			collapsed={true}
+			json={priorIds}
+			on:select={(e) => dispatch('select', `result_by_id('${e.detail}')`)}
+		/>
+	</div>
+{/if}
 {#if displayContext}
 	<span class="font-bold text-sm">Variables </span>
 	<div class="overflow-y-auto mb-2">