minor app fixes

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

@@ -7,6 +7,7 @@
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import { AppService, type CompletedJob } from '$lib/gen'
 	import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
+	import { deepEqual } from 'fast-equals'
 	import { Bug } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
@@ -34,6 +35,7 @@
 	export let recomputeIds: string[] = []
 
 	const {
+		app,
 		worldStore,
 		runnableComponents,
 		workspace,
@@ -48,8 +50,6 @@
 		componentControl
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	$: autoRefresh && handleAutorefresh()
-
 	if (recomputable || autoRefresh) {
 		$runnableComponents[id] = async (inlineScript?: InlineScript) => {
 			await executeComponent(true, inlineScript)
@@ -57,12 +57,6 @@
 		$runnableComponents = $runnableComponents
 	}
 
-	function handleAutorefresh() {
-		if (autoRefresh && $worldStore) {
-			executeComponent(true)
-		}
-	}
-
 	let args: Record<string, any> | undefined = undefined
 	let testIsLoading = false
 	let runnableInputValues: Record<string, any> = {}
@@ -87,15 +81,16 @@
 	let currentStaticValues = lazyStaticValues
 
 	$: fields && (currentStaticValues = computeStaticValues())
-	$: if (JSON.stringify(currentStaticValues) != JSON.stringify(lazyStaticValues)) {
+	$: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
 		lazyStaticValues = currentStaticValues
-		refreshIfAutoRefresh()
+		refreshIfAutoRefresh('static changed')
 	}
 
-	$: fields && (lazyStaticValues = computeStaticValues())
-	$: (runnableInputValues || extraQueryParams || args) && testJobLoader && refreshIfAutoRefresh()
+	$: (runnableInputValues || extraQueryParams || args) &&
+		testJobLoader &&
+		refreshIfAutoRefresh('arg changed')
 
-	function refreshIfAutoRefresh() {
+	function refreshIfAutoRefresh(src: string) {
 		if (autoRefresh) {
 			setDebouncedExecute()
 		}
@@ -188,7 +183,6 @@
 			}
 
 			if (runnable?.type === 'runnableByName') {
-				console.log(inlineScriptOverride)
 				const { inlineScript } = inlineScriptOverride
 					? { inlineScript: inlineScriptOverride }
 					: runnable

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

@@ -4,8 +4,10 @@
 	import { getContext, onMount } from 'svelte'
 	import Button from '../../common/button/Button.svelte'
 	import type { AppViewerContext } from '../types'
+	import { allItems } from '../utils'
 
-	const { runnableComponents, app } = getContext<AppViewerContext>('AppViewerContext')
+	const { runnableComponents, app, mode, worldStore } =
+		getContext<AppViewerContext>('AppViewerContext')
 	let loading: boolean = false
 	let timeout: NodeJS.Timer | undefined = undefined
 	let interval: number | undefined = undefined
@@ -62,6 +64,7 @@
 
 	onMount(() => {
 		document.addEventListener('visibilitychange', visChange)
+		// setTimeout(() => refresh(), 1000)
 		return () => {
 			document.removeEventListener('visibilitychange', visChange)
 			if (timeout) clearInterval(timeout)

frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -45,13 +45,14 @@
 
 		{#if onLoad || onClick}
 			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Event</div>
+				<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#if onLoad}
-						<span class={classNames(badgeClass, colors['green'])}>On load</span>
+						<span class={classNames(badgeClass, colors['green'])}>Start</span>
+						<span class={classNames(badgeClass, colors['green'])}>Refresh</span>
 					{/if}
 					{#if onClick}
-						<span class={classNames(badgeClass, colors['green'])}>On click</span>
+						<span class={classNames(badgeClass, colors['green'])}>Click</span>
 					{/if}
 				</div>
 			</div>
@@ -73,7 +74,7 @@
 
 		{#if recomputedBadges?.length > 0}
 			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Success of</div>
+				<div class="text-xs font-semibold text-slate-800 mb-1">Computation of</div>
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#each recomputedBadges as badge}
 						<span class={classNames(badgeClass, colors['indigo'])}>{badge}</span>

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

@@ -79,7 +79,6 @@ export function buildObservableWorld() {
 			}
 
 			const { componentId, path } = connection
-			console.log('connection', connection)
 			const input = cachedInput(next, `${componentId}-${path}-${id}`)
 
 			const [p] = path ? path.split('.')[0].split('[') : [undefined]