Fix dependencies issues (#2486)

* fix(frontend): Fix dependencies issues

* fix(frontend): fix build

* fix(frontend): remove code duplication

frontend/src/lib/components/FlowBuilder.svelte

@@ -30,7 +30,7 @@
 	import FlowEditor from './flows/FlowEditor.svelte'
 	import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte'
 	import type { FlowState } from './flows/flowState'
-	import { dfs as dfsApply } from './flows/flowStore'
+	import { dfs as dfsApply } from './flows/dfs'
 	import { dfs, getPreviousIds } from './flows/previousResults'
 	import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -5,7 +5,6 @@
 	import { Button, Drawer, Kbd } from './common'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { dfs } from './flows/flowStore'
 	import type { FlowEditorContext } from './flows/types'
 	import { runFlowPreview } from './flows/utils'
 	import SchemaForm from './SchemaForm.svelte'
@@ -16,6 +15,7 @@
 	import { getModifierKey } from '$lib/utils'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import SavedInputs from './SavedInputs.svelte'
+	import { dfs } from './flows/dfs'
 
 	let capturePayload: CapturePayload
 	export let previewMode: 'upTo' | 'whole'

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -18,7 +18,7 @@
 	import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte'
 	import { deepEqual } from 'fast-equals'
 	import FlowTimeline from './FlowTimeline.svelte'
-	import { dfs } from './flows/flowStore'
+	import { dfs } from './flows/dfs'
 
 	const dispatch = createEventDispatcher()
 

frontend/src/lib/components/apps/types.ts

@@ -25,7 +25,6 @@ import type {
 } from './inputType'
 import type { World } from './rx'
 import type { FilledItem } from './svelte-grid/types'
-import type MoveResize from './svelte-grid/MoveResize.svelte'
 
 export type HorizontalAlignment = 'left' | 'center' | 'right'
 export type VerticalAlignment = 'top' | 'center' | 'bottom'
@@ -205,20 +204,25 @@ export type AppViewerContext = {
 	workspace: string
 	onchange: (() => void) | undefined
 	isEditor: boolean
-	jobs: Writable<string[]>,
+	jobs: Writable<string[]>
 	// jobByComponent: Writable<Record<string, string>>,
-	jobsById: Writable<Record<string, 		{
-		job: string
-		component: string
-		result?: string
-		error?: any
-		transformer?: { result?: string; error?: string }
-		started_at?: number
-		started_compute_at?: number
-		duration_ms?: number
-	}>>,
+	jobsById: Writable<
+		Record<
+			string,
+			{
+				job: string
+				component: string
+				result?: string
+				error?: any
+				transformer?: { result?: string; error?: string }
+				started_at?: number
+				started_compute_at?: number
+				duration_ms?: number
+			}
+		>
+	>
 	noBackend: boolean
-	errorByComponent: Writable<Record<string, {id?: string, error: string}>>
+	errorByComponent: Writable<Record<string, { id?: string; error: string }>>
 	openDebugRun: Writable<((jobID: string) => void) | undefined>
 	focusedGrid: Writable<FocusedGrid | undefined>
 	stateId: Writable<number>
@@ -255,8 +259,8 @@ export type AppViewerContext = {
 
 export type AppEditorContext = {
 	yTop: Writable<number>
-	componentActive: Writable<boolean>,
-	dndItem: Writable<Record<string, (x: number, y:number, topY: number) => void>>
+	componentActive: Writable<boolean>
+	dndItem: Writable<Record<string, (x: number, y: number, topY: number) => void>>
 	refreshComponents: Writable<(() => void) | undefined>
 	history: History<App> | undefined
 	pickVariableCallback: Writable<((path: string) => void) | undefined>

frontend/src/lib/components/copilot/StepGen.svelte

@@ -5,10 +5,10 @@
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
 	import type { FlowCopilotContext, FlowCopilotModule } from './flow'
-	import { nextId } from '../flows/flowStateUtils'
 	import { ScriptService, type FlowModule } from '$lib/gen'
 	import { APP_TO_ICON_COMPONENT } from '../icons'
 	import { sendUserToast } from '$lib/toast'
+	import { nextId } from '../flows/flowModuleNextId'
 	export let index: number
 	export let open: boolean | undefined
 	export let close: () => void

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { dfs } from '$lib/components/flows/flowStore'
+	import { dfs } from '$lib/components/flows/dfs'
 	import FlowCard from '../common/FlowCard.svelte'
 	import { Alert, Badge } from '$lib/components/common'
 	import type { FlowModule, FlowModuleValue, InputTransform, PathScript, RawScript } from '$lib/gen'

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

@@ -14,7 +14,6 @@
 	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
 	import { afterUpdate, getContext, tick } from 'svelte'
 	import type { FlowEditorContext } from '../types'
-	import { loadSchemaFromModule } from '../utils'
 	import FlowModuleScript from './FlowModuleScript.svelte'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
@@ -41,6 +40,7 @@
 	import s3Scripts from './s3Scripts/lib'
 	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
 	import Label from '$lib/components/Label.svelte'
+	import { loadSchemaFromModule } from '../flowInfers'
 
 	const { selectedId, previewArgs, flowStateStore, flowStore, saveDraft } =
 		getContext<FlowEditorContext>('FlowEditorContext')

frontend/src/lib/components/flows/dfs.ts

@@ -0,0 +1,28 @@
+import type { FlowModule } from '$lib/gen/models/FlowModule'
+
+export function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[] {
+	let result: T[] = []
+	for (const module of modules) {
+		if (module.value.type == 'forloopflow') {
+			result = result.concat(f(module))
+			result = result.concat(dfs(module.value.modules, f))
+		} else if (module.value.type == 'branchone') {
+			result = result.concat(f(module))
+			result = result.concat(
+				dfs(
+					module.value.branches
+						.map((b) => b.modules)
+						.flat()
+						.concat(module.value.default),
+					f
+				)
+			)
+		} else if (module.value.type == 'branchall') {
+			result = result.concat(f(module))
+			result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat(), f))
+		} else {
+			result.push(f(module))
+		}
+	}
+	return result
+}

frontend/src/lib/components/flows/flowInfers.ts

@@ -0,0 +1,58 @@
+import { inferArgs, loadSchemaFromPath } from '$lib/infer'
+import { loadSchemaFlow } from '$lib/scripts'
+import type { Schema } from '$lib/common'
+import { emptySchema } from '$lib/utils'
+import type { FlowModule, InputTransform } from '$lib/gen'
+
+export async function loadSchemaFromModule(module: FlowModule): Promise<{
+	input_transforms: Record<string, InputTransform>
+	schema: Schema
+}> {
+	const mod = module.value
+
+	if (mod.type == 'rawscript' || mod.type === 'script' || mod.type === 'flow') {
+		let schema: Schema
+		if (mod.type === 'rawscript') {
+			schema = emptySchema()
+			await inferArgs(mod.language!, mod.content ?? '', schema)
+		} else if (mod.type == 'script' && mod.path && mod.path != '') {
+			schema = await loadSchemaFromPath(mod.path!, mod.hash)
+		} else if (mod.type == 'flow' && mod.path && mod.path != '') {
+			schema = await loadSchemaFlow(mod.path!)
+		} else {
+			return {
+				input_transforms: {},
+				schema: emptySchema()
+			}
+		}
+
+		const keys = Object.keys(schema?.properties ?? {})
+
+		let input_transforms = mod.input_transforms ?? {}
+
+		if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
+			input_transforms = keys.reduce((accu, key) => {
+				let nv =
+					input_transforms[key] ??
+					(module.id == 'failure' && ['message', 'name'].includes(key)
+						? { type: 'javascript', expr: `error.${key}` }
+						: {
+								type: 'static',
+								value: undefined
+						  })
+				accu[key] = nv
+				return accu
+			}, {})
+		}
+
+		return {
+			input_transforms: input_transforms,
+			schema: schema ?? emptySchema()
+		}
+	}
+
+	return {
+		input_transforms: {},
+		schema: emptySchema()
+	}
+}

frontend/src/lib/components/flows/flowModuleNextId.ts

@@ -0,0 +1,18 @@
+import type { Flow } from '$lib/gen/models/Flow'
+import { dfs } from './dfs'
+import type { FlowState } from './flowState'
+import { charsToNumber, numberToChars } from './idUtils'
+
+// Computes the next available id
+export function nextId(flowState: FlowState, fullFlow: Flow): string {
+	const allIds = dfs(fullFlow.value.modules, (fm) => fm.id)
+	const max = allIds.concat(Object.keys(flowState)).reduce((acc, key) => {
+		if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
+			return acc
+		} else {
+			const num = charsToNumber(key)
+			return Math.max(acc, num + 1)
+		}
+	}, 0)
+	return numberToChars(max)
+}

frontend/src/lib/components/flows/flowState.ts

@@ -18,7 +18,6 @@ export type FlowState = Record<string, FlowModuleState>
  * We also hold the data of the results of a test job, ran by the user.
  */
 
-
 export async function initFlowState(flow: Flow, flowStateStore: Writable<FlowState>) {
 	const modulesState: FlowState = {}
 
@@ -63,7 +62,6 @@ async function mapFlowModule(flowModule: FlowModule, modulesState: FlowState) {
 		const flowModuleState = await loadFlowModuleState(flowModule)
 		modulesState[flowModule.id] = flowModuleState
 	}
-
 }
 
 async function mapFlowModules(flowModules: FlowModule[], modulesState: FlowState) {

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -13,10 +13,10 @@ import { userStore, workspaceStore } from '$lib/stores'
 import { getScriptByPath } from '$lib/scripts'
 import { get, type Writable } from 'svelte/store'
 import type { FlowModuleState, FlowState } from './flowState'
-import { charsToNumber, numberToChars } from './idUtils'
-import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule } from './utils'
+import { emptyFlowModuleState, findNextAvailablePath } from './utils'
 import { NEVER_TESTED_THIS_FAR } from './models'
-import { dfs } from './flowStore'
+import { loadSchemaFromModule } from './flowInfers'
+import { nextId } from './flowModuleNextId'
 
 export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState> {
 	try {
@@ -36,20 +36,6 @@ export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowM
 	}
 }
 
-// Computes the next available id
-export function nextId(flowState: FlowState, fullFlow: Flow): string {
-	const allIds = dfs(fullFlow.value.modules, (fm) => fm.id)
-	const max = allIds.concat(Object.keys(flowState)).reduce((acc, key) => {
-		if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
-			return acc
-		} else {
-			const num = charsToNumber(key)
-			return Math.max(acc, num + 1)
-		}
-	}, 0)
-	return numberToChars(max)
-}
-
 export async function pickScript(
 	path: string,
 	summary: string,

frontend/src/lib/components/flows/flowStore.ts

@@ -1,4 +1,4 @@
-import type { Flow, FlowModule } from '$lib/gen'
+import type { Flow } from '$lib/gen'
 import { writable, type Writable } from 'svelte/store'
 import { initFlowState, type FlowState } from './flowState'
 
@@ -6,33 +6,6 @@ export type FlowMode = 'push' | 'pull'
 
 export const importFlowStore = writable<Flow | undefined>(undefined)
 
-export function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[] {
-	let result: T[] = []
-	for (const module of modules) {
-		if (module.value.type == 'forloopflow') {
-			result = result.concat(f(module))
-			result = result.concat(dfs(module.value.modules, f))
-		} else if (module.value.type == 'branchone') {
-			result = result.concat(f(module))
-			result = result.concat(
-				dfs(
-					module.value.branches
-						.map((b) => b.modules)
-						.flat()
-						.concat(module.value.default),
-					f
-				)
-			)
-		} else if (module.value.type == 'branchall') {
-			result = result.concat(f(module))
-			result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat(), f))
-		} else {
-			result.push(f(module))
-		}
-	}
-	return result
-}
-
 export async function initFlow(
 	flow: Flow,
 	flowStore: Writable<Flow>,

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -13,7 +13,7 @@
 	import FlowSettingsItem from './FlowSettingsItem.svelte'
 	import FlowConstantsItem from './FlowConstantsItem.svelte'
 
-	import { dfs } from '../flowStore'
+	import { dfs } from '../dfs'
 	import { FlowGraph } from '$lib/components/graph'
 	import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte'
 	import { push } from '$lib/history'

frontend/src/lib/components/flows/utils.ts

@@ -1,4 +1,3 @@
-import type { Schema } from '$lib/common'
 import {
 	JobService,
 	ScriptService,
@@ -7,8 +6,6 @@ import {
 	type InputTransform,
 	type Job
 } from '$lib/gen'
-import { inferArgs, loadSchemaFromPath } from '$lib/infer'
-import { loadSchemaFlow } from '$lib/scripts'
 import { workspaceStore } from '$lib/stores'
 import { cleanExpr, emptySchema } from '$lib/utils'
 import { get } from 'svelte/store'
@@ -91,59 +88,6 @@ export function cleanInputs(flow: Flow | any): Flow {
 	return newFlow
 }
 
-export async function loadSchemaFromModule(module: FlowModule): Promise<{
-	input_transforms: Record<string, InputTransform>
-	schema: Schema
-}> {
-	const mod = module.value
-
-	if (mod.type == 'rawscript' || mod.type === 'script' || mod.type === 'flow') {
-		let schema: Schema
-		if (mod.type === 'rawscript') {
-			schema = emptySchema()
-			await inferArgs(mod.language!, mod.content ?? '', schema)
-		} else if (mod.type == 'script' && mod.path && mod.path != '') {
-			schema = await loadSchemaFromPath(mod.path!, mod.hash)
-		} else if (mod.type == 'flow' && mod.path && mod.path != '') {
-			schema = await loadSchemaFlow(mod.path!)
-		} else {
-			return {
-				input_transforms: {},
-				schema: emptySchema()
-			}
-		}
-
-		const keys = Object.keys(schema?.properties ?? {})
-
-		let input_transforms = mod.input_transforms ?? {}
-
-		if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
-			input_transforms = keys.reduce((accu, key) => {
-				let nv =
-					input_transforms[key] ??
-					(module.id == 'failure' && ['message', 'name'].includes(key)
-						? { type: 'javascript', expr: `error.${key}` }
-						: {
-								type: 'static',
-								value: undefined
-						  })
-				accu[key] = nv
-				return accu
-			}, {})
-		}
-
-		return {
-			input_transforms: input_transforms,
-			schema: schema ?? emptySchema()
-		}
-	}
-
-	return {
-		input_transforms: {},
-		schema: emptySchema()
-	}
-}
-
 export function getDefaultExpr(
 	key: string = 'myfield',
 	previousModuleId: string | undefined,

frontend/src/lib/components/tutorials/FlowBranchAll.svelte

@@ -3,8 +3,8 @@
 	import type { FlowEditorContext } from '../flows/types'
 	import { triggerAddFlowStep, selectFlowStepKind } from './utils'
 	import Tutorial from './Tutorial.svelte'
-	import { nextId } from '../flows/flowStateUtils'
 	import { updateProgress } from '$lib/tutorialUtils'
+	import { nextId } from '../flows/flowModuleNextId'
 
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 

frontend/src/lib/components/tutorials/FlowBranchOne.svelte

@@ -8,8 +8,8 @@
 		updateFlowModuleById
 	} from './utils'
 	import Tutorial from './Tutorial.svelte'
-	import { nextId } from '../flows/flowStateUtils'
 	import { updateProgress } from '$lib/tutorialUtils'
+	import { nextId } from '../flows/flowModuleNextId'
 
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()

frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte

@@ -9,8 +9,8 @@
 		updateFlowModuleById
 	} from './utils'
 	import Tutorial from './Tutorial.svelte'
-	import { nextId } from '../flows/flowStateUtils'
 	import { updateProgress } from '$lib/tutorialUtils'
+	import { nextId } from '../flows/flowModuleNextId'
 
 	const dispatch = createEventDispatcher()
 	const { flowStore, selectedId, flowStateStore } =