From 4e50278ae7cd44cded6b52db0f16331bcd27a420 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sat, 25 Mar 2023 07:59:32 +0100 Subject: [PATCH] fix(apps): improve app table actionButtons behavior under many clicks --- .../apps/components/buttons/AppButton.svelte | 22 ++---------------- .../apps/components/buttons/AppForm.svelte | 14 +++-------- .../components/buttons/AppFormButton.svelte | 15 +----------- .../apps/components/display/PlotlyHtml.svelte | 2 +- .../components/display/table/AppTable.svelte | 23 ++++++++++++------- .../helpers/RunnableComponent.svelte | 16 ++++++++----- .../components/helpers/RunnableWrapper.svelte | 3 ++- .../apps/editor/component/Component.svelte | 2 +- frontend/src/lib/components/apps/types.ts | 1 - 9 files changed, 35 insertions(+), 63 deletions(-) diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte index d974227922..d6f4e9945a 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte @@ -49,9 +49,6 @@ let runnableComponent: RunnableComponent - let isLoading: boolean = false - let ownClick: boolean = false - let beforeIconComponent: any let afterIconComponent: any @@ -72,21 +69,6 @@ $: resolvedConfig?.triggerOnAppLoad && runnableComponent?.runComponent() - $: if (outputs?.loading != undefined) { - outputs.loading.set(false, true) - } - - $: outputs?.loading.subscribe({ - id: 'loading-' + id, - next: (value) => { - isLoading = value - if (ownClick && !value) { - ownClick = false - } - } - }) - - $: loading = isLoading && ownClick let errors: Record = {} $: errorsMessage = Object.values(errors) .filter((x) => x != '') @@ -103,14 +85,13 @@ await preclickAction() } - ownClick = true - if (!runnableComponent) { runnableWrapper.onSuccess() } else { await runnableComponent?.runComponent() } } + let loading = false {#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)} @@ -129,6 +110,7 @@ bind:this={runnableWrapper} {recomputeIds} bind:runnableComponent + bind:loading {componentInput} doOnSuccess={resolvedConfig.onSuccess} {id} diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte index 6daa90cc0d..4960fcb855 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte @@ -43,18 +43,9 @@ $stateId != undefined && (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0) - $: if (outputs?.loading != undefined) { - outputs.loading.set(false, true) - } - - $: outputs?.loading.subscribe({ - id: 'loading-' + id, - next: (value) => { - isLoading = value - } - }) - $: css = concatCustomCss($app.css?.formcomponent, customCss) + + let loading = false {#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)} @@ -70,6 +61,7 @@ {recomputeIds} {render} bind:runnableComponent + bind:loading {componentInput} {id} doOnSuccess={resolvedConfig.onSuccess} diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte index 4932efe1f5..6abdba977c 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte @@ -40,8 +40,6 @@ ) let runnableComponent: RunnableComponent - let isLoading: boolean = false - let ownClick: boolean = false let errors: Record = {} $: errorsMessage = Object.values(errors) @@ -55,20 +53,9 @@ outputs.loading.set(false, true) } - $: outputs?.loading.subscribe({ - id: 'loading-' + id, - next: (value) => { - isLoading = value - if (ownClick && !value) { - ownClick = false - } - } - }) - - $: loading = isLoading && ownClick - $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss) let runnableWrapper: RunnableWrapper + let loading = false {#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)} diff --git a/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte b/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte index 3575b30883..c1f8de9812 100644 --- a/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte +++ b/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte @@ -40,7 +40,7 @@ w && Plotly.newPlot( divEl, - [result], + Array.isArray(result) ? result : [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false } ) diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte index bd0a9f0073..50ba00b386 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte @@ -260,7 +260,8 @@ on:click={() => toggleRow(row, rowIndex)} >
- {#each actionButtons as actionButton, actionIndex (actionIndex)} + {#each actionButtons as actionButton, actionIndex (actionButton?.id)} +
{ if (actionButton.id !== $hoverStore) { @@ -294,12 +295,15 @@ extraKey={'idx' + rowIndex} {render} noWFull - {...actionButton} preclickAction={async () => { toggleRow(row, rowIndex) }} + id={actionButton.id} + customCss={actionButton.customCss} + configuration={actionButton.configuration} + recomputeIds={actionButton.recomputeIds} extraQueryParams={{ row: row.original }} - bind:componentInput={actionButton.componentInput} + componentInput={actionButton.componentInput} controls={{ left: () => { if (actionIndex === 0) { @@ -327,12 +331,15 @@ extraKey={'idx' + rowIndex} {render} noWFull - {...actionButton} + id={actionButton.id} + customCss={actionButton.customCss} + configuration={actionButton.configuration} + recomputeIds={actionButton.recomputeIds} preclickAction={async () => { toggleRow(row, rowIndex) }} extraQueryParams={{ row: row.original }} - bind:componentInput={actionButton.componentInput} + componentInput={actionButton.componentInput} /> {/if}
@@ -358,9 +365,9 @@
The result should be an array of objects. Received: - 
-				{JSON.stringify(result, null, 4)}
-
+ 
{JSON.stringify(result, null, 4)}
{/if} diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 0551487774..47b70fb67b 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -33,6 +33,7 @@ export let outputs: { result: Output; loading: Output } export let extraKey = '' export let doNotRecomputeOnInputChanged: boolean = false + export let loading = false const { worldStore, @@ -63,6 +64,8 @@ let runnableInputValues: Record = {} let executeTimeout: NodeJS.Timeout | undefined = undefined + $: outputs.loading?.set(loading) + function setDebouncedExecute() { executeTimeout && clearTimeout(executeTimeout) executeTimeout = setTimeout(() => { @@ -142,7 +145,7 @@ async function executeComponent(noToast = false, inlineScriptOverride?: InlineScript) { if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') { - outputs.loading?.set(true) + loading = true try { const r = await eval_like( runnable.inlineScript?.content, @@ -158,7 +161,7 @@ } catch (e) { sendUserToast('Error running frontend script: ' + e.message, true) } - outputs.loading?.set(false) + loading = false return } if (noBackend) { @@ -171,7 +174,7 @@ return } - outputs.loading?.set(true) + loading = true try { let njob = await testJobLoader?.abstractRun(() => { @@ -220,7 +223,8 @@ $jobs = [{ job: njob, component: id }, ...$jobs] } } catch (e) { - outputs.loading?.set(false) + setResult({ error: e.body ?? e.message }) + loading = false } } @@ -228,7 +232,7 @@ try { await executeComponent() } catch (e) { - console.error(e) + setResult({ error: e.body ?? e.message }) } } @@ -322,7 +326,7 @@ setResult(e.detail.result) } } - outputs.loading?.set(false) + loading = false }} bind:isLoading={testIsLoading} bind:job={testJob} diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte index ef759947c0..4a95889834 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte @@ -13,7 +13,7 @@ export let id: string export let result: any = undefined export let initializing: boolean = true - + export let loading: boolean = false export let extraQueryParams: Record = {} export let autoRefresh: boolean = true export let runnableComponent: RunnableComponent | undefined = undefined @@ -100,6 +100,7 @@ {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)} {:else if component.type === 'aggridcomponent'} diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 0cb21bba40..4b97ce6cf1 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -4,7 +4,6 @@ import type { History } from '$lib/history' import type { Writable } from 'svelte/store' import type { AppComponent, components } from './editor/component/components' -import type { StyleProperty, StylePropertyKey } from './editor/componentsPanel/quickStyleProperties' import type { AppInput, ConnectedAppInput,