From 840fbbcbb1f969ef3b000f9e50d5c5dde8371995 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 28 Aug 2023 12:36:54 +0200
Subject: [PATCH] fix: fix refresh init in presence of app stepper

---
 .../apps/components/buttons/AppButton.svelte       |  1 -
 .../apps/components/helpers/HiddenComponent.svelte |  1 +
 .../components/helpers/NonRunnableComponent.svelte |  5 +++++
 .../components/helpers/RunnableComponent.svelte    | 14 ++++++++++----
 .../apps/components/helpers/RunnableWrapper.svelte |  4 +++-
 .../apps/components/layout/AppList.svelte          |  3 ++-
 .../apps/components/layout/AppStepper.svelte       |  1 +
 .../apps/editor/RecomputeAllComponents.svelte      |  3 +--
 .../components/apps/editor/SubGridEditor.svelte    |  2 +-
 9 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 819da2643f..fb5b6eafad 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -66,7 +66,6 @@
 		listInputs(id, inputOutput)
 	}
 
-	console.log('FOO')
 	if (controls) {
 		$componentControl[id] = controls
 	}
diff --git a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
index a2d7b6602d..f49810c0ae 100644
--- a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
@@ -34,6 +34,7 @@
 
 {#if runnable && (runnable.type == 'runnableByPath' || (runnable.type == 'runnableByName' && runnable.inlineScript != undefined))}
 	<RunnableComponent
+		hasChildrens={false}
 		render={false}
 		{id}
 		fields={runnable.fields}
diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
index 6401043308..89aec99d7c 100644
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -10,6 +10,7 @@
 	export let id: string
 	export let result: any
 	export let render: boolean
+	export let hasChildrens: boolean
 
 	// Sync the result to the output
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
@@ -34,6 +35,10 @@
 
 {#if render}
 	<slot />
+{:else if hasChildrens}
+	<div class="invisible h-0 overflow-hidden'}">
+		<slot />
+	</div>
 {:else}
 	<div class="w-full h-full" />
 {/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 0607399238..933149ea74 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -42,6 +42,7 @@
 	export let recomputableByRefreshButton: boolean
 	export let errorHandledByComponent: boolean = false
 	export let hideRefreshButton: boolean = false
+	export let hasChildrens: boolean
 
 	const {
 		worldStore,
@@ -502,9 +503,14 @@
 	bind:this={resultJobLoader}
 />
 
-{#if render}
-	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
-		{#if (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
+{#if render || hasChildrens}
+	<div
+		class="h-full flex relative flex-row flex-wrap {wrapperClass} {render
+			? 'visible'
+			: 'invisible h-0 overflow-hidden'}"
+		style={wrapperStyle}
+	>
+		{#if render && (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
 			<div class="px-2 h-fit min-h-0">
 				<LightweightSchemaForm
 					schema={schemaStripped}
@@ -558,7 +564,7 @@
 				<slot />
 			</div>
 		{/if}
-		{#if !initializing && autoRefresh === true && !hideRefreshButton}
+		{#if render && !initializing && autoRefresh === true && !hideRefreshButton}
 			<div class="flex absolute top-1 right-1 z-50">
 				<RefreshButton {loading} componentId={id} />
 			</div>
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index 508aa04e72..ed35c8241d 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -67,6 +67,7 @@
 	export let extraKey: string | undefined = undefined
 	export let refreshOnStart: boolean = false
 	export let errorHandledByComponent: boolean = false
+	export let hasChildrens: boolean = false
 
 	const { staticExporter, noBackend, componentControl, runnableComponents } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -180,6 +181,7 @@
 	<RunnableComponent
 		{refreshOnStart}
 		{extraKey}
+		{hasChildrens}
 		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}
@@ -207,7 +209,7 @@
 		<slot />
 	</RunnableComponent>
 {:else}
-	<NonRunnableComponent {render} bind:result {id} {componentInput}>
+	<NonRunnableComponent {hasChildrens} {render} bind:result {id} {componentInput}>
 		<slot />
 	</NonRunnableComponent>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index a92dcbc35a..1cdb69e8a7 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -114,7 +114,8 @@
 <InitializeComponent {id} />
 
 <RunnableWrapper
-	render={true}
+	hasChildrens
+	{render}
 	{outputs}
 	autoRefresh
 	{componentInput}
diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
index a164b07dec..f0bf894469 100644
--- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
@@ -114,6 +114,7 @@
 
 <InitializeComponent {id} />
 <RunnableWrapper
+	hasChildrens
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 54778e82a6..d434ef2ca6 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -16,7 +16,7 @@
 	let firstLoad = false
 
 	$: !firstLoad &&
-		$initialized.initializedComponents?.length ==
+		$initialized.initializedComponents?.length >=
 			allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
 		refresh()
 	$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length
@@ -102,7 +102,6 @@
 <!-- {allItems($app.grid, $app.subgrids)
 	.map((x) => x.id)
 	.filter((x) => !$initialized.initializedComponents?.includes(x))} -->
-
 <div class="flex items-center">
 	<Button
 		disabled={componentNumber == 0}
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 6aea124b69..2ca4f3db27 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -64,7 +64,7 @@
 <div
 	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
 		? 'visible'
-		: 'invisible h-0 overflow-hidden'} 	"
+		: 'invisible h-0 overflow-hidden'}"
 	bind:this={container}
 	on:pointerdown={onpointerdown}
 >