feat(frontend): Fix recomputeIds + app table

frontend/src/lib/components/apps/components/buttons/AppButton.svelte

@@ -86,6 +86,33 @@
 	$: errorsMessage = Object.values(errors)
 		.filter((x) => x != '')
 		.join('\n')
+
+	async function handleClick(event: CustomEvent) {
+		event?.stopPropagation()
+		event?.preventDefault()
+
+		if (preclickAction) {
+			await preclickAction()
+		}
+
+		ownClick = true
+
+		if (!runnableComponent) {
+			if (gotoUrl) {
+				if (gotoNewTab) {
+					window.open(gotoUrl, '_blank')
+				} else {
+					goto(gotoUrl)
+				}
+			}
+		} else {
+			await runnableComponent?.runComponent()
+		}
+
+		if (recomputeIds) {
+			await Promise.all(recomputeIds.map((id) => $runnableComponents?.[id]?.()))
+		}
+	}
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -131,32 +158,7 @@
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))
 			}}
-			on:click={async (e) => {
-				if (preclickAction) {
-					await preclickAction()
-				}
-				e?.stopPropagation()
-				e?.preventDefault()
-				ownClick = true
-
-				if (!runnableComponent) {
-					if (gotoUrl) {
-						if (gotoNewTab) {
-							window.open(gotoUrl, '_blank')
-						} else {
-							goto(gotoUrl)
-						}
-					}
-				} else {
-					await runnableComponent?.runComponent()
-				}
-
-				if (recomputeIds) {
-					recomputeIds.forEach((id) => {
-						$runnableComponents[id]?.()
-					})
-				}
-			}}
+			on:click={handleClick}
 			{size}
 			{color}
 			{loading}

frontend/src/lib/components/apps/components/display/AppPdf.svelte

@@ -118,7 +118,6 @@
 	function scrollToPage(page: number) {
 		page = pageNumber = minMax(page, 1, pages.length)
 		const offset = (wrapper?.children.item(page - 1) as HTMLCanvasElement | null)?.offsetTop
-		// debugger
 		if (!offset) {
 			return
 		}

frontend/src/lib/components/apps/components/display/table/AppTable.svelte

@@ -64,11 +64,11 @@
 
 	let selectedRowIndex = -1
 
-	function toggleRow(row: Record<string, any>, rowIndex: number) {
-		if (selectedRowIndex !== rowIndex) {
+	function toggleRow(row: Record<string, any>, rowIndex: number, force: boolean = false) {
+		if (selectedRowIndex !== rowIndex || force) {
 			selectedRowIndex = rowIndex
-			outputs?.selectedRow.set(row.original)
-			outputs?.selectedRowIndex.set(rowIndex)
+			outputs?.selectedRow.set(row.original, force)
+			outputs?.selectedRowIndex.set(rowIndex, force)
 		}
 	}
 
@@ -138,6 +138,9 @@
 
 	function rerender() {
 		table = createSvelteTable(options)
+		if (result) {
+			toggleRow({ original: result[0] }, 0, true)
+		}
 	}
 
 	$: result && rerender()

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

@@ -126,7 +126,6 @@
 	}
 
 	function onValueChange(newValue: any): void {
-		console.log('newValue', newValue, id)
 		if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
 			const { connection } = lastInput
 

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

@@ -19,8 +19,6 @@
 			gridItem = gridItem
 		}
 	}
-
-	$: console.log(shouldWrap)
 </script>
 
 {#if shouldWrap}

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

@@ -195,6 +195,7 @@
 				customCss={component.customCss}
 				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
 			/>
 		{:else if component.type === 'selectcomponent'}
 			<AppSelect
@@ -222,6 +223,7 @@
 				customCss={component.customCss}
 				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
 			/>
 		{:else if component.type === 'formbuttoncomponent'}
 			<AppFormButton
@@ -232,6 +234,7 @@
 				customCss={component.customCss}
 				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
 			/>
 		{:else if component.type === 'checkboxcomponent'}
 			<AppCheckbox