improve quickadd column

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

@@ -13,6 +13,7 @@
 	export let componentInput: StaticInput<any[]>
 	export let subFieldType: InputType | undefined = undefined
 	export let selectOptions: StaticOptions['selectOptions'] | undefined = undefined
+	export let id: string | undefined
 
 	const dispatch = createEventDispatcher()
 	const flipDurationMs = 200
@@ -253,6 +254,7 @@
 					<div class="flex flex-row gap-2 items-center relative my-1 w-full">
 						<div class="grow min-w-0">
 							<SubTypeEditor
+								{id}
 								subFieldType={raw ? 'object' : subFieldType}
 								bind:componentInput
 								bind:value={item.value}
@@ -292,6 +294,7 @@
 		</Button>
 		{#if subFieldType === 'table-column' || subFieldType == 'ag-grid'}
 			<QuickAddColumn
+				{id}
 				columns={componentInput.value?.map((item) => item.field)}
 				on:add={({ detail }) => {
 					if (!componentInput.value) componentInput.value = []
@@ -315,40 +318,4 @@
 			/>
 		{/if}
 	{/if}
-	<!-- {#if subFieldType === 'db-explorer'}
-		<SynchronizeColumns
-			columns={componentInput.value?.map((item) => item.field)}
-			on:add={({ detail }) => {
-				if (!Array.isArray(detail)) {
-					return
-				}
-
-				if (detail.length === 0) {
-					return
-				}
-
-				componentInput.value = []
-				items = []
-
-				detail.forEach((col) => {
-					if (!componentInput.value) componentInput.value = []
-					if (subFieldType === 'table-column') {
-						componentInput.value.push({ field: col, headerName: col, type: 'text' })
-					} else if (subFieldType === 'ag-grid') {
-						componentInput.value.push({ field: col, headerName: col, flex: 1 })
-					} else if (subFieldType === 'db-explorer') {
-						componentInput.value.push({ field: col, headerName: col, flex: 1 })
-					}
-					componentInput = componentInput
-
-					if (componentInput.value) {
-						items.push({
-							value: componentInput.value[componentInput.value.length - 1],
-							id: generateRandomString()
-						})
-					}
-				})
-			}}
-		/>
-	{/if} -->
 </div>

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

@@ -225,6 +225,7 @@
 						<div class="flex flex-col w-full gap-2 mt-2">
 							{#if componentSettings.item.data.componentInput.type === 'static'}
 								<StaticInputEditor
+									id={component.id}
 									fieldType={componentInput?.fieldType}
 									subFieldType={componentInput?.subFieldType}
 									format={componentInput?.format}

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

@@ -157,6 +157,7 @@
 		{:else if componentInput?.type === 'static'}
 			<div class={'w-full flex flex-row-reverse'}>
 				<StaticInputEditor
+					{id}
 					{fieldType}
 					{subFieldType}
 					{selectOptions}

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

@@ -7,29 +7,26 @@
 	import { isObject } from '$lib/utils'
 
 	export let columns: string[] = []
+	export let id: string | undefined
 
 	let remainingColumns: string[] = []
 
-	const { worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 	const dispatch = createEventDispatcher()
 
 	let result = []
 
 	function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>> | undefined) {
 		if (observableOutputs) {
-			Object.entries(observableOutputs).forEach(([k, output]) => {
-				output?.subscribe(
-					{
-						id: 'alloutputs-quickadd' + $selectedComponent?.[0] + '-' + k,
-						next: (value) => {
-							if (k === 'result') {
-								result = value
-							}
-						}
-					},
-					result
-				)
-			})
+			observableOutputs?.['result']?.subscribe(
+				{
+					id: 'alloutputs-quickadd-' + id + '-result',
+					next: (value) => {
+						result = value
+					}
+				},
+				result
+			)
 		}
 	}
 
@@ -46,8 +43,7 @@
 		}
 	}
 
-	$: $selectedComponent?.[0] &&
-		subscribeToAllOutputs($worldStore?.outputsById?.[$selectedComponent?.[0]])
+	$: id && subscribeToAllOutputs($worldStore?.outputsById?.[id])
 	$: updateRemainingColumns(result, columns)
 </script>
 

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

@@ -5,6 +5,7 @@
 	export let value: any
 	export let componentInput: StaticInput<any>
 	export let subFieldType: InputType | undefined
+	export let id: string | undefined
 
 	let fakeComponentInput: StaticInput<any> = {
 		...componentInput,
@@ -15,4 +16,9 @@
 	$: fakeComponentInput && (value = fakeComponentInput.value)
 </script>
 
-<StaticInputEditor fieldType={subFieldType} bind:componentInput={fakeComponentInput} on:remove />
+<StaticInputEditor
+	{id}
+	fieldType={subFieldType}
+	bind:componentInput={fakeComponentInput}
+	on:remove
+/>

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

@@ -1,86 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
-	import type { Output } from '../../rx'
-	import type { AppViewerContext } from '../../types'
-	import Button from '$lib/components/common/button/Button.svelte'
-	import { Columns } from 'lucide-svelte'
-	import { isObject } from '$lib/utils'
-
-	export let columns: string[] = []
-
-	let remainingColumns: string[] = []
-
-	const { worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
-	const dispatch = createEventDispatcher()
-
-	let result = []
-
-	function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>> | undefined) {
-		if (observableOutputs) {
-			Object.entries(observableOutputs).forEach(([k, output]) => {
-				output?.subscribe(
-					{
-						id: 'alloutputs-quickadd' + $selectedComponent?.[0] + '-' + k,
-						next: (value) => {
-							if (k === 'result') {
-								result = value
-							}
-						}
-					},
-					result
-				)
-			})
-		}
-	}
-
-	function updateRemainingColumns(result: any[], columns: string[]) {
-		if (Array.isArray(result) && result?.length > 0) {
-			const allKeysSet: Set<string> = result.reduce((acc, obj) => {
-				if (isObject(obj)) {
-					Object.keys(obj).forEach((key) => acc.add(key))
-				}
-				return acc
-			}, new Set<string>())
-
-			remainingColumns = Array.from(allKeysSet).filter((x: string) => !columns?.includes(x) ?? true)
-		}
-	}
-
-	$: $selectedComponent?.[0] &&
-		subscribeToAllOutputs($worldStore?.outputsById?.[$selectedComponent?.[0]])
-	$: updateRemainingColumns(result, columns)
-
-	function haveSameStringElements(arr1: string[], arr2: string[]): boolean {
-		if (arr1.length !== arr2.length) {
-			return false
-		}
-
-		const sortedArr1 = [...arr1].sort()
-		const sortedArr2 = [...arr2].sort()
-
-		for (let i = 0; i < sortedArr1.length; i++) {
-			if (sortedArr1[i] !== sortedArr2[i]) {
-				return false
-			}
-		}
-
-		return true
-	}
-
-	$: shouldDisplaySyncButton = !haveSameStringElements(columns, remainingColumns)
-</script>
-
-{#if shouldDisplaySyncButton}
-	<div class="flex flex-row gap-2 items-center flex-wrap">
-		<Button
-			on:click={() => {
-				dispatch('add', remainingColumns)
-			}}
-			size="xs2"
-			color="dark"
-			startIcon={{ icon: Columns }}
-		>
-			Synchronize columns
-		</Button>
-	</div>
-{/if}

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -27,6 +27,7 @@
 	export let selectOptions: StaticOptions['selectOptions'] | undefined = undefined
 	export let placeholder: string | undefined = undefined
 	export let format: string | undefined = undefined
+	export let id: string | undefined
 
 	const { onchange } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -150,7 +151,7 @@
 				</div>
 			{/if}
 		{:else if fieldType === 'array'}
-			<ArrayStaticInputEditor {subFieldType} bind:componentInput on:deleteArrayItem />
+			<ArrayStaticInputEditor {id} {subFieldType} bind:componentInput on:deleteArrayItem />
 		{:else if fieldType === 'schema'}
 			<div class="w-full">
 				<SchemaEditor bind:schema={componentInput.value} lightMode />