fix app fields

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -6,6 +6,7 @@
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import { AppService, type CompletedJob } from '$lib/gen'
 	import { defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
+	import { deepEqual } from 'fast-equals'
 	import { getContext, onMount } from 'svelte'
 	import { computeFields } from '../../editor/inlineScriptsPanel/utils'
 	import type { AppInputs, Runnable } from '../../inputType'
@@ -38,7 +39,8 @@
 		jobs,
 		noBackend,
 		errorByComponent,
-		mode
+		mode,
+		stateId
 	} = getContext<AppEditorContext>('AppEditorContext')
 
 	onMount(() => {
@@ -113,13 +115,11 @@
 			// Inline scripts directly provide the schema
 			if (inlineScript) {
 				const newSchema = inlineScript.schema
-
 				const newFields = computeFields(newSchema, defaultUserInput, fields)
 
-				if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
-					setTimeout(() => {
-						fields = newFields
-					}, 0)
+				if (!deepEqual(newFields, fields)) {
+					fields = newFields
+					$stateId++
 				}
 			}
 		}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -81,7 +81,8 @@
 		noBackend: false,
 		errorByComponent,
 		openDebugRun: writable(undefined),
-		focusedGrid
+		focusedGrid,
+		stateId: writable(0)
 	})
 
 	let timeout: NodeJS.Timeout | undefined = undefined

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -62,7 +62,8 @@
 		noBackend,
 		errorByComponent: writable({}),
 		openDebugRun: writable(undefined),
-		focusedGrid: writable(undefined)
+		focusedGrid: writable(undefined),
+		stateId: writable(0)
 	})
 
 	let mounted = false

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -36,7 +36,7 @@
 		$app.grid.map((gridItem) => {
 			const disabledGridItem = fct(gridItem)
 
-			if (disabledGridItem.data.subGrids) {
+			if (disabledGridItem?.data?.subGrids) {
 				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map(
 					(subgrid: GridItem[]) => subgrid?.map((subgridItem: GridItem) => fct(subgridItem)) ?? []
 				)
@@ -106,7 +106,7 @@
 			intervalId = setTimeout(() => {
 				lazyGrid.set($app.grid)
 				intervalId = undefined
-			}, 100)
+			}, 500)
 		}
 	}
 
@@ -198,7 +198,7 @@
 					>
 						<Component
 							{pointerdown}
-							bind:pComponent={gridComponent.data}
+							bind:component={gridComponent.data}
 							selected={$selectedComponent === dataItem.data.id}
 							locked={isFixed(gridComponent)}
 							on:delete={() => removeGridElement(gridComponent.data)}

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -122,7 +122,7 @@
 						>
 							<Component
 								{pointerdown}
-								bind:pComponent={gridComponent.data}
+								bind:component={gridComponent.data}
 								selected={$selectedComponent === dataItem.data.id}
 								locked={isFixed(gridComponent)}
 								on:lock={() => lock(gridComponent)}

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -5,7 +5,6 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppEditorContext } from '../../types'
 	import ComponentHeader from '../ComponentHeader.svelte'
-	import { deepEqual } from 'fast-equals'
 
 	import {
 		AppBarChart,
@@ -40,7 +39,7 @@
 	import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
 	import AppDrawer from '../../components/layout/AppDrawer.svelte'
 
-	export let pComponent: AppComponent
+	export let component: AppComponent
 	export let selected: boolean
 	export let locked: boolean = false
 	export let pointerdown: boolean = false
@@ -51,10 +50,7 @@
 	let initializing: boolean | undefined = undefined
 	let componentContainerHeight: number = 0
 
-	let component = JSON.parse(JSON.stringify(pComponent))
-	$: if (pComponent && !deepEqual(pComponent, component)) {
-		component = JSON.parse(JSON.stringify(pComponent))
-	}
+	$: console.log('component', component)
 </script>
 
 <div
@@ -234,7 +230,7 @@
 		{:else if component.type === 'imagecomponent'}
 			<AppImage {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'drawercomponent'}
-			<AppDrawer {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppDrawer {...component} />
 		{/if}
 	</div>
 </div>

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -31,8 +31,15 @@
 	export let parent: string | undefined
 	export let noGrid = false
 
-	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const {
+		app,
+		staticOutputs,
+		runnableComponents,
+		selectedComponent,
+		worldStore,
+		focusedGrid,
+		stateId
+	} = getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
 		$dirtyStore = true
@@ -110,31 +117,35 @@
 						/>
 					{/if}
 				</div>
-				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
-					<div class="border w-full">
-						<PanelSection
-							smallPadding
-							title={`Runnable Inputs (${
-								Object.keys(component.componentInput.fields ?? {}).length
-							})`}
-						>
-							<svelte:fragment slot="action">
-								<Tooltip>
-									The runnable inputs of a button component are not settable by the user. They must
-									be defined statically or connected.
-								</Tooltip>
-							</svelte:fragment>
+				{#key $stateId}
+					{#if component.componentInput?.type === 'runnable'}
+						{#if Object.keys(component.componentInput.fields ?? {}).length > 0}
+							<div class="border w-full">
+								<PanelSection
+									smallPadding
+									title={`Runnable Inputs (${
+										Object.keys(component.componentInput.fields ?? {}).length
+									})`}
+								>
+									<svelte:fragment slot="action">
+										<Tooltip>
+											The runnable inputs of a button component are not settable by the user. They
+											must be defined statically or connected.
+										</Tooltip>
+									</svelte:fragment>
 
-							<InputsSpecsEditor
-								id={component.id}
-								shouldCapitalize={false}
-								bind:inputSpecs={component.componentInput.fields}
-								userInputEnabled={component.type !== 'buttoncomponent'}
-								{rowColumns}
-							/>
-						</PanelSection>
-					</div>
-				{/if}
+									<InputsSpecsEditor
+										id={component.id}
+										shouldCapitalize={false}
+										bind:inputSpecs={component.componentInput.fields}
+										userInputEnabled={component.type !== 'buttoncomponent'}
+										{rowColumns}
+									/>
+								</PanelSection>
+							</div>
+						{/if}
+					{/if}
+				{/key}
 			</PanelSection>
 		{/if}
 

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

@@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	configuration: Record<
 		string,
 		GeneralAppInput &
-			(
-				| StaticAppInput
-				| ConnectedAppInput
-				| UserAppInput
-				| RowAppInput
-				| EvalAppInput
-				| UploadAppInput
-			)
+		(
+			| StaticAppInput
+			| ConnectedAppInput
+			| UserAppInput
+			| RowAppInput
+			| EvalAppInput
+			| UploadAppInput
+		)
 	>
 	card: boolean | undefined
 	customCss?: ComponentCustomCSS
@@ -131,6 +131,7 @@ export type AppEditorContext = {
 	errorByComponent: Writable<Record<string, { error: string; componentId: string }>>
 	openDebugRun: Writable<((componentID: string) => void) | undefined>
 	focusedGrid: Writable<FocusedGrid | undefined>
+	stateId: Writable<number>
 }
 
 export type FocusedGrid = { parentComponentId: string; subGridIndex: number }