diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index aa615fb787..0ebdd718b3 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -68,7 +68,8 @@ initialized, selectedComponent, app, - connectingInput + connectingInput, + bgRuns } = getContext('AppViewerContext') const iterContext = getContext('ListWrapperContext') const rowContext = getContext('RowWrapperContext') @@ -108,6 +109,8 @@ let lazyStaticValues = computeStaticValues() let currentStaticValues = lazyStaticValues + let isBg = id.startsWith('bg_') + $: isBg && updateBgRuns(loading) $: fields && (currentStaticValues = computeStaticValues()) $: if (!deepEqual(currentStaticValues, lazyStaticValues)) { lazyStaticValues = currentStaticValues @@ -505,6 +508,14 @@ let lastJobId: string | undefined = undefined let inputValues: Record = {} + + function updateBgRuns(loading: boolean) { + if (loading) { + bgRuns.update((runs) => [...runs, id]) + } else { + bgRuns.update((runs) => runs.filter((r) => r !== id)) + } + } {#each Object.entries(fields ?? {}) as [key, v] (key)} diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 14772ad515..a88ca77cc1 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -130,6 +130,7 @@ selectedComponent, mode, connectingInput, + bgRuns: writable([]), breakpoint, runnableComponents: writable({}), appPath: path, diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte index 6657f9ebae..68afb94b05 100644 --- a/frontend/src/lib/components/apps/editor/AppPreview.svelte +++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte @@ -77,6 +77,7 @@ app: appStore, summary: writable(summary), selectedComponent, + bgRuns: writable([]), mode, connectingInput, breakpoint, diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte index 171426a27d..feb3bae71c 100644 --- a/frontend/src/lib/components/apps/editor/GridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte @@ -17,6 +17,8 @@ import Toggle from '$lib/components/Toggle.svelte' import Tooltip from '$lib/components/Tooltip.svelte' import { BG_PREFIX } from '../utils' + import { Loader2 } from 'lucide-svelte' + import Popover from '$lib/components/Popover.svelte' export let policy: Policy @@ -29,7 +31,8 @@ focusedGrid, parentWidth, breakpoint, - allIdsInPath + allIdsInPath, + bgRuns } = getContext('AppViewerContext') const { history, scale, componentActive } = getContext('AppEditorContext') @@ -50,9 +53,29 @@ : 'z-50'} {$connectingInput?.opened ? '' : 'bg-surface'} px-4 py-1 items-center gap-4" >

{$summary}

-
- {#if !$connectingInput.opened} - +
+
+ {#if !$connectingInput.opened} + + {/if} +
+ {#if $bgRuns.length > 0} + + ({$bgRuns.length}) + +
+ {#each $bgRuns as bgRun} +
+
{bgRun}
+
+ {/each} +
+
+ {:else} + {/if}
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 398e262492..793c1cdaf6 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -189,6 +189,7 @@ export type AppViewerContext = { mode: Writable connectingInput: Writable breakpoint: Writable + bgRuns: Writable runnableComponents: Writable< Record< string,