From 1097dccfe5421cf72f94c368f64bf62ae76df555 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sat, 8 Apr 2023 12:32:19 +0200 Subject: [PATCH] change default recomputeOnInputChanges --- .../components/helpers/HiddenComponent.svelte | 4 +- .../helpers/RunnableComponent.svelte | 5 +- .../components/helpers/RunnableWrapper.svelte | 2 +- .../apps/components/inputs/AppSelect.svelte | 9 --- .../components/apps/editor/AppPreview.svelte | 2 +- .../components/apps/editor/GridEditor.svelte | 4 +- .../apps/editor/SettingsPanel.svelte | 3 +- .../lib/components/apps/editor/appUtils.ts | 8 ++ .../apps/editor/component/Component.svelte | 17 +++- .../editor/component/ComponentWrapper.svelte | 1 + .../ComponentInputTypeEditor.svelte | 78 ++++++++++--------- .../settingsPanel/SelectedRunnable.svelte | 16 ++-- .../mainInput/RunnableSelector.svelte | 4 +- .../BackgroundScriptTriggerList.svelte | 20 +++-- .../triggerLists/ComponentTriggerList.svelte | 4 +- .../triggerLists/TriggerBadgesList.svelte | 10 +-- frontend/src/lib/components/apps/inputType.ts | 2 + frontend/src/lib/components/apps/types.ts | 2 + .../(logged)/user/(user)/login/+page.svelte | 8 +- 19 files changed, 115 insertions(+), 84 deletions(-) diff --git a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte index 4d26d53917..eca6f865ce 100644 --- a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte @@ -14,7 +14,7 @@ export let name: string export let inlineScript: InlineScript | undefined export let fields: Record - export let doNotRecomputeOnInputChanged: boolean + export let recomputeOnInputChanged: boolean export let recomputableByRefreshButton: boolean let result: any = undefined @@ -32,7 +32,7 @@ {id} {fields} autoRefresh={true} - {doNotRecomputeOnInputChanged} + {recomputeOnInputChanged} bind:result transformer={undefined} runnable={{ diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 5c1489c102..96e32e294d 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -31,7 +31,7 @@ export let render: boolean export let outputs: { result: Output; loading: Output } export let extraKey = '' - export let doNotRecomputeOnInputChanged: boolean = false + export let recomputeOnInputChanged: boolean = false export let loading = false export let recomputableByRefreshButton: boolean = true @@ -99,7 +99,8 @@ runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [] function refreshIfAutoRefresh(_src: string) { - const refreshEnabled = autoRefresh && (!doNotRecomputeOnInputChanged || refreshOn?.length > 0) + const refreshEnabled = + autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0) if (refreshEnabled && $worldStore.initialized) { setDebouncedExecute() } diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte index 6c80b5596c..90de58cefb 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte @@ -107,7 +107,7 @@ runnable={componentInput.runnable} transformer={componentInput.transformer} {autoRefresh} - bind:doNotRecomputeOnInputChanged={componentInput.doNotRecomputeOnInputChanged} + bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged} {id} {extraQueryParams} {forceSchemaDisplay} diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte index a07516075f..51f7d4289a 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte @@ -127,25 +127,16 @@ css?.input?.style} {value} {placeholder} - on:click={() => { - if (!$connectingInput.opened) { - $selectedComponent = [id] - } - }} on:focus={() => { if (!$connectingInput.opened) { $selectedComponent = [id] } }} - floatingConfig={{ - strategy: 'fixed' - }} >
{#if create} {item.created ? 'Add new: ' : ''} {/if} - {item.label}
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte index 404e8df823..d222d9af27 100644 --- a/frontend/src/lib/components/apps/editor/AppPreview.svelte +++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte @@ -169,7 +169,7 @@ inlineScript={script.inlineScript} name={script.name} fields={script.fields} - doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false} + recomputeOnInputChanged={script.recomputeOnInputChanged ?? true} recomputableByRefreshButton={script.autoRefresh ?? false} /> {/if} diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte index 96147e5616..f4181efbce 100644 --- a/frontend/src/lib/components/apps/editor/GridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte @@ -87,7 +87,7 @@ {/if}
-
+
Hide bar on view
@@ -164,7 +164,7 @@ inlineScript={script.inlineScript} name={script.name} fields={script.fields} - doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false} + recomputeOnInputChanged={script.recomputeOnInputChanged ?? true} recomputableByRefreshButton={script.autoRefresh ?? false} /> {/if} diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte index ae516facf1..fc85bdd434 100644 --- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte @@ -102,7 +102,8 @@ fields={hiddenInlineScript.script.fields} autoRefresh={hiddenInlineScript.script.autoRefresh} id={`bg_${hiddenInlineScript.index}`} - bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged} + bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged} + doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged} bind:inlineScript={hiddenInlineScript.script.inlineScript} /> {:else} diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index f287757dc6..2225ff2281 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -52,6 +52,14 @@ export function selectId( selectedComponent: Writable, app: App ) { + // this ensure handleClickOutside are triggered + window.dispatchEvent( + new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }) + ) if (e.shiftKey) { selectedComponent.update((old) => { if (old && old?.[0]) { diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index ea19a24794..86df1f4e36 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -94,7 +94,7 @@ {/if} {#if ismoving} -
+
{#if initializing} -
+ +
{ + if (component.id !== $hoverStore) { + $hoverStore = component.id + } + }} + on:mouseout|stopPropagation={() => { + if ($hoverStore !== undefined) { + $hoverStore = undefined + } + }} + class="absolute inset-0 center-center flex-col bg- border animate-skeleton" + /> {/if} diff --git a/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte b/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte index bc535c00a5..40297f672b 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte @@ -13,6 +13,7 @@ function selectComponent(e: PointerEvent, id: string) { if (!$connectingInput.opened) { + e.stopPropagation() selectId(e, id, selectedComponent, $app) if ($focusedGrid?.parentComponentId != id) { $focusedGrid = undefined diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte index f0fb44114f..488f48fd15 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte @@ -22,49 +22,51 @@ {#if componentInput.fieldType !== 'any'} -
- onchange?.()} bind:selected={componentInput.type}> - {#if componentInput.fieldType === 'template'} - - {brackets}  - - {:else} +
+
+ onchange?.()} bind:selected={componentInput.type}> + {#if componentInput.fieldType === 'template'} + + {brackets}  + + {:else} + + {#if clientWidth > 250} + + {/if} + + {/if} + {#if clientWidth > 250} - + {/if} - {/if} - - - {#if clientWidth > 250} - - {/if} - - - {#if clientWidth > 250} - - {/if} - - + + {#if clientWidth > 250} + + {/if} + + +
{/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte index f71f4caf33..c03bf4f7cd 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte @@ -30,6 +30,12 @@ function clear() { appInput = clearResultAppInput(appInput) } + + if (appInput.recomputeOnInputChanged === undefined) { + appInput.recomputeOnInputChanged = true + } else if (appInput.doNotRecomputeOnInputChanged == true) { + appInput.recomputeOnInputChanged = false + }
@@ -40,7 +46,7 @@ {appInput.runnable.path} {/if} -
+
{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
{/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte index ec084e884a..daa0abc0b5 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte @@ -181,7 +181,7 @@ color="light" variant="border" startIcon={{ icon: faPlus }} - btnClasses="truncate" + btnClasses="truncate w-full" > Create an inline script @@ -190,7 +190,7 @@ size="sm" color="blue" startIcon={{ icon: faMousePointer }} - btnClasses="truncate" + btnClasses="truncate w-full" > Select a script or flow diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte index c96caa4be9..9366963bad 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte @@ -7,7 +7,6 @@ } from '$lib/components/apps/inputType' import type { InlineScript } from '$lib/components/apps/types' import Toggle from '$lib/components/Toggle.svelte' - import Tooltip from '$lib/components/Tooltip.svelte' import TriggerBadgesList from './TriggerBadgesList.svelte' import { getDependencies } from './triggerListUtils' @@ -16,7 +15,16 @@ export let autoRefresh: boolean = false export let id: string export let inlineScript: InlineScript - export let doNotRecomputeOnInputChanged: boolean = false + export let recomputeOnInputChanged: boolean | undefined = true + export let doNotRecomputeOnInputChanged: undefined | boolean = undefined + + if (doNotRecomputeOnInputChanged == true) { + recomputeOnInputChanged = false + } + + if (recomputeOnInputChanged == undefined) { + recomputeOnInputChanged = true + } $: dependencies = getDependencies(fields) @@ -25,11 +33,9 @@
- If not toggled, whenever an input is changed, the script will be re-run.
{/if} @@ -38,5 +44,5 @@ {id} inputDependencies={dependencies} onLoad={autoRefresh} - {doNotRecomputeOnInputChanged} + {recomputeOnInputChanged} /> diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte index 0fa69d7e22..dc0f043f6a 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte @@ -16,7 +16,7 @@ export let fields: Record export let appComponent: AppComponent export let runnable: RunnableByName - export let doNotRecomputeOnInputChanged: boolean = false + export let recomputeOnInputChanged: boolean = false const onClick = ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes( appComponent.type @@ -33,7 +33,7 @@ inputDependencies={onClick ? [] : getDependencies(fields)} bind:inlineScript={runnable.inlineScript} {onLoad} - {doNotRecomputeOnInputChanged} + {recomputeOnInputChanged} id={$selectedComponent?.[0]} {onClick} /> 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 6bbbb64495..54f8054edc 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte @@ -11,7 +11,7 @@ export let onClick: boolean = false export let onLoad: boolean = false export let id: string | undefined = undefined - export let doNotRecomputeOnInputChanged: boolean = false + export let recomputeOnInputChanged: boolean = false const colors = { red: 'text-red-800 border-red-600 bg-red-100', @@ -84,11 +84,11 @@
{#if recomputedBadges.length === 0 && !onLoad && !onClick && inputDependencies?.length === 0 && !frontendDependencies} -

+

This script has no triggers. It will never run.

{:else} -
Triggered by
+
Triggered by
{#if onLoad || onClick}
@@ -104,7 +104,7 @@
{/if} - {#if inputDependencies.length > 0 && !doNotRecomputeOnInputChanged} + {#if inputDependencies.length > 0 && (recomputeOnInputChanged ?? true)}
Change on values
@@ -130,7 +130,7 @@
{/if} {/if} - {#if frontendDependencies && !doNotRecomputeOnInputChanged} + {#if frontendDependencies && !recomputeOnInputChanged}
Change on values
diff --git a/frontend/src/lib/components/apps/inputType.ts b/frontend/src/lib/components/apps/inputType.ts index 0ec7c684d7..16675a86b3 100644 --- a/frontend/src/lib/components/apps/inputType.ts +++ b/frontend/src/lib/components/apps/inputType.ts @@ -89,7 +89,9 @@ export type ResultInput = { fields: Record type: 'runnable' value?: any + // kept for migration purposes doNotRecomputeOnInputChanged?: boolean + recomputeOnInputChanged?: boolean } type AppInputSpec = ( diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index e845b759a0..5b4f5555d7 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -114,7 +114,9 @@ export type App = { inlineScript: InlineScript | undefined fields: Record autoRefresh?: boolean + //deprecated and to be removed after migration doNotRecomputeOnInputChanged?: boolean + recomputeOnInputChanged?: boolean }> css?: Partial>> subgrids?: Record diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte index 9e99a996c1..bb8a726057 100644 --- a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte @@ -204,7 +204,7 @@ {/if} {#if showPassword} -
+
{#if isCloudHosted()}

@@ -216,7 +216,7 @@ -

+
Password -
+
-
+