fix app list initialization issues

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

@@ -33,7 +33,7 @@
 	let Plotly
 	onMount(async () => {
 		//@ts-ignore
-		await import('https://cdn.plot.ly/plotly-2.18.0.min.js')
+		await import('https://cdn.jsdelivr.net/npm/plotly.js-dist@2.18.0/plotly.min.js')
 
 		Plotly = window['Plotly']
 	})

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

@@ -4,7 +4,7 @@
 	import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte'
 
 	import { isObject } from '$lib/utils'
-	import { getContext, tick } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppInput } from '../../../inputType'
 	import type { AppViewerContext, RichConfigurations } from '../../../types'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'

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

@@ -116,6 +116,8 @@
 	}
 
 	async function evalExpr(input: EvalAppInput): Promise<any> {
+		if (iterContext && $iterContext.disabled) return
+
 		try {
 			const r = await eval_like(
 				input.expr,
@@ -136,6 +138,8 @@
 	}
 
 	async function getValue(input: AppInput) {
+		if (iterContext && $iterContext.disabled) return
+
 		if (!input) return
 		if (input.type === 'template' && isCodeInjection(input.eval)) {
 			try {
@@ -162,6 +166,8 @@
 	}
 
 	function onValueChange(newValue: any): void {
+		if (iterContext && $iterContext.disabled) return
+
 		if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
 			const { connection } = lastInput
 			if (!connection) {

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

@@ -161,6 +161,10 @@
 
 	async function executeComponent(noToast = false, inlineScriptOverride?: InlineScript) {
 		console.debug(`Executing ${id}`)
+		if (iterContext && $iterContext.disabled) {
+			console.debug(`Skipping execution of ${id} because it is part of a disabled list`)
+			return
+		}
 		if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
 			loading = true
 			try {

frontend/src/lib/components/apps/components/layout/AppList.svelte

@@ -55,58 +55,63 @@
 
 <InitializeComponent {id} />
 
-<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
-	<div
-		class="w-full flex flex-wrap overflow-auto {isCard ? 'h-full gap-2' : 'divide-y max-h-full'}"
+{#if render}
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
 	>
-		{#if $app.subgrids?.[`${id}-0`]}
-			{#if Array.isArray(result)}
-				{#each result ?? [] as value, index}
-					<div
-						style={`${
-							isCard
-								? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
-								: ''
-						} max-height: ${resolvedConfig.heightPx}px;`}
-						class="overflow-auto {!isCard ? 'w-full' : 'border'}"
-					>
-						<ListWrapper {value} {index}>
-							<SubGridEditor
-								visible={render}
-								{id}
-								class={css?.container?.class}
-								style={css?.container?.style}
-								subGridId={`${id}-0`}
-								containerHeight={resolvedConfig.heightPx}
-								on:focus={() => {
-									if (!$connectingInput.opened) {
-										$selectedComponent = [id]
-									}
-									onFocus()
-								}}
-							/>
-						</ListWrapper>
-					</div>
-				{/each}
-			{:else}
-				<ListWrapper value={undefined} index={0}>
-					<SubGridEditor
-						visible={false}
-						{id}
-						class={css?.container?.class}
-						style={css?.container?.style}
-						subGridId={`${id}-0`}
-						containerHeight={resolvedConfig.heightPx}
-						on:focus={() => {
-							if (!$connectingInput.opened) {
-								$selectedComponent = [id]
-							}
-							onFocus()
-						}}
-					/>
-				</ListWrapper>
-				<div class="text-center text-gray-500">Input data is not an array</div>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+
+		<div
+			class="w-full flex flex-wrap overflow-auto {isCard ? 'h-full gap-2' : 'divide-y max-h-full'}"
+		>
+			{#if $app.subgrids?.[`${id}-0`]}
+				{#if Array.isArray(result) && result.length > 0}
+					{#each result ?? [] as value, index}
+						<div
+							style={`${
+								isCard
+									? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
+									: ''
+							} max-height: ${resolvedConfig.heightPx}px;`}
+							class="overflow-auto {!isCard ? 'w-full' : 'border'}"
+						>
+							<ListWrapper {value} {index}>
+								<SubGridEditor
+									visible={render}
+									{id}
+									class={css?.container?.class}
+									style={css?.container?.style}
+									subGridId={`${id}-0`}
+									containerHeight={resolvedConfig.heightPx}
+									on:focus={() => {
+										if (!$connectingInput.opened) {
+											$selectedComponent = [id]
+										}
+										onFocus()
+									}}
+								/>
+							</ListWrapper>
+						</div>
+					{/each}
+				{:else}
+					<ListWrapper disabled value={undefined} index={0}>
+						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+					</ListWrapper>
+					{#if !Array.isArray(result)}
+						<div class="text-center text-gray-500">Input data is not an array</div>
+					{/if}
+				{/if}
 			{/if}
-		{/if}
-	</div>
-</RunnableWrapper>
+		</div>
+	</RunnableWrapper>
+{:else}
+	<ListWrapper disabled value={undefined} index={0}>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+	</ListWrapper>
+{/if}

frontend/src/lib/components/apps/components/layout/ListWrapper.svelte

@@ -5,10 +5,11 @@
 
 	export let index: number
 	export let value: any
+	export let disabled = false
 
-	const ctx = writable({ index, value })
+	const ctx = writable({ index, value, disabled })
 
-	$: $ctx = { index, value }
+	$: $ctx = { index, value, disabled }
 	setContext<ListContext>('ListWrapperContext', ctx)
 </script>
 

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

@@ -99,6 +99,10 @@
 	]
 </script>
 
+<!-- {allItems($app.grid, $app.subgrids)
+	.map((x) => x.id)
+	.filter((x) => !$initialized.initializedComponents?.includes(x))} -->
+
 <div class="flex items-center">
 	<Button
 		disabled={componentNumber == 0}

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

@@ -153,6 +153,7 @@ export interface CancelablePromise<T> extends Promise<T> {
 export type ListContext = Writable<{
 	index: number
 	value: any
+	disabled: boolean
 }>
 
 export type AppViewerContext = {