make rename of component ids more restrictive

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

@@ -117,7 +117,7 @@
 {/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	{#if Array.isArray(result) && result.every(isObject)}
+	{#if Array.isArray(value) && value.every(isObject)}
 		{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
 			<div
 				class="border border-gray-300 shadow-sm divide-y divide-gray-300 flex flex-col h-full"
@@ -191,6 +191,8 @@
 				{JSON.stringify(resolvedConfig.columnDefs)}
 			</pre>
 			</Alert>
+		{:else}
+			<Alert title="Parsing issues" type="error" size="xs">The columnDefs are undefined</Alert>
 		{/if}
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">

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

@@ -146,6 +146,7 @@
 			return r
 		} catch (e) {
 			error = e.message
+			console.error("Eval error in app input '" + id + "' with key '" + key, e)
 			return value
 		}
 	}
@@ -169,6 +170,7 @@
 				error = ''
 				return r
 			} catch (e) {
+				console.debug("Eval error in app input '" + id + "' with key '" + key, e)
 				return e.message
 			}
 		} else if (input.type === 'static') {

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

@@ -641,6 +641,12 @@
 												>
 											{:else if testIsLoading}
 												<div class="p-2"><Loader2 class="animate-spin" /> </div>
+											{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+												<div class="p-2 text-gray-500">Result is undefined</div>
+											{:else}
+												<div class="p-2 text-gray-500">
+													<Loader2 size={14} class="animate-spin mr-2" />
+												</div>
 											{/if}
 										</Pane>
 									</Splitpanes>

frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte

@@ -11,14 +11,14 @@
 
 	export let id: string
 	const dispatch = createEventDispatcher()
-	const regex = /^[a-zA-Z0-9]{1,}$/
+	const regex = /^[a-zA-Z][a-zA-Z0-9]*$/
 	let value = id
 	let button: HTMLButtonElement
 	let input: HTMLInputElement
 	let error = ''
 
 	$: if (!regex.test(value)) {
-		error = 'The ID must include only letters and numbers'
+		error = 'The ID must include only letters and numbers and start with a letter'
 	} else if (forbiddenIds.includes(value)) {
 		error = 'This ID is reserved'
 	} else if (

frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -20,7 +20,7 @@
 
 	const { manuallyOpened, search, hasResult } = getContext<ContextPanelContext>('ContextPanel')
 
-	const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput } =
+	const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput, worldStore } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	$: subids = $search != '' ? allsubIds($app, id) : []
@@ -91,6 +91,8 @@
 
 		$app = $app
 		$selectedComponent = [newId]
+
+		delete $worldStore.outputsById[id]
 	}
 
 	function renameComponent(from: string, to: string, data: AppComponent) {