From fc9e1eee0eba17c6ffd63164497920dfc59c3b69 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 18 Mar 2023 16:25:34 +0100
Subject: [PATCH] minor app fixes

---
 .../helpers/RunnableComponent.svelte          | 22 +++++++------------
 .../apps/editor/RecomputeAllComponents.svelte |  5 ++++-
 .../triggerLists/TriggerBadgesList.svelte     |  9 ++++----
 frontend/src/lib/components/apps/rx.ts        |  1 -
 4 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index aa4da64981..06ba1c68db 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/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
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index a7cbe0d053..ec97d6ecb0 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/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)
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte
index 33bb30f40f..64a52c6a0e 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/apps/rx.ts b/frontend/src/lib/components/apps/rx.ts
index aceeff3312..e45747431e 100644
--- a/frontend/src/lib/components/apps/rx.ts
+++ b/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]