windmill-components 1.82.5 → 1.82.7

package/components/apps/components/buttons/AppFormButton.svelte

@@ -3,14 +3,12 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Portal from 'svelte-portal';
-import Modal from '../../../common/modal/Modal.svelte';
 import { concatCustomCss } from '../../utils';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -27,10 +25,7 @@ let outputs = initOutput($worldStore, id, {
 });
 let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let isLoading = false;
-let ownClick = false;
 let errors = {};
-let open = false;
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
@@ -39,18 +34,9 @@ $: noInputs =
 $: 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;
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 let runnableWrapper;
+let loading = false;
 </script>
 
 {#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
@@ -62,73 +48,63 @@ let runnableWrapper;
 	/>
 {/each}
 
-<Portal>
-	<Modal
-		{open}
-		title={resolvedConfig.label ?? ''}
-		class={css?.popup?.class}
-		style={css?.popup?.style}
-		on:canceled={() => {
-			open = false
-		}}
-		on:confirmed={() => {
-			open = false
-		}}
+<AlwaysMountedModal
+	title={resolvedConfig.label ?? ''}
+	class={css?.popup?.class}
+	style={css?.popup?.style}
+>
+	<RunnableWrapper
+		bind:this={runnableWrapper}
+		{recomputeIds}
+		{render}
+		bind:runnableComponent
+		{componentInput}
+		{id}
+		{extraQueryParams}
+		autoRefresh={false}
+		forceSchemaDisplay={true}
+		runnableClass="!block"
+		{outputs}
+		doOnSuccess={resolvedConfig.onSuccess}
 	>
-		<RunnableWrapper
-			bind:this={runnableWrapper}
-			{recomputeIds}
-			{render}
-			bind:runnableComponent
-			{componentInput}
-			{id}
-			{extraQueryParams}
-			autoRefresh={false}
-			forceSchemaDisplay={true}
-			runnableClass="!block"
-			{outputs}
-			doOnSuccess={resolvedConfig.onSuccess}
-		>
-			<div class="flex flex-col gap-2 px-4 w-full">
-				<div>
-					{#if noInputs}
-						<div class="text-gray-600 italic text-sm my-4">
-							Run forms are associated with a runnable that has user inputs.
-							<br />
-							Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-							<strong>
-								User Input
-								<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-							</strong>
-						</div>
-					{/if}
-				</div>
-				<div class="flex justify-end">
-					<Button
-						{loading}
-						btnClasses="my-1"
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-							window.dispatchEvent(new Event('pointerup'))
-						}}
-						on:click={async () => {
-							if (!runnableComponent) {
-								runnableWrapper.onSuccess()
-							} else {
-								await runnableComponent?.runComponent()
-							}
-							open = false
-						}}
-						size="xs"
-						color="dark"
-					>
-						Submit
-					</Button>
-				</div>
+		<div class="flex flex-col gap-2 px-4 w-full">
+			<div>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				<Button
+					{loading}
+					btnClasses="my-1"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+					}}
+					on:click={async () => {
+						if (!runnableComponent) {
+							runnableWrapper.onSuccess()
+						} else {
+							await runnableComponent?.runComponent()
+						}
+						getModal().close()
+					}}
+					size="xs"
+					color="dark"
+				>
+					Submit
+				</Button>
 			</div>
-		</RunnableWrapper>
-	</Modal>
-</Portal>
+		</div>
+	</RunnableWrapper>
+</AlwaysMountedModal>
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
@@ -141,7 +117,7 @@ let runnableWrapper;
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			open = true
+			getModal().open()
 		}}
 	>
 		{resolvedConfig.label}

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -19,22 +19,28 @@ const outputs = initOutput($worldStore, id, {
 </script>
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div
-		class={twMerge(
-			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-			$app.css?.['displaycomponent']?.['header']?.class,
-			customCss?.header?.class
-		)}
-	>
-		Results
-	</div>
-	<div
-		class={twMerge(
-			'p-2',
-			$app.css?.['displaycomponent']?.['container']?.class,
-			customCss?.container?.class
-		)}
-	>
-		<DisplayResult {result} {requireHtmlApproval} />
+	<div class="flex flex-col w-full h-full">
+		<div
+			class={twMerge(
+				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				$app.css?.['displaycomponent']?.['header']?.class,
+				customCss?.header?.class
+			)}
+		>
+			Results
+		</div>
+		<div
+			style={twMerge(
+				$app.css?.['displaycomponent']?.['container']?.style,
+				customCss?.container?.style
+			)}
+			class={twMerge(
+				'p-2 grow',
+				$app.css?.['displaycomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			<DisplayResult {result} {requireHtmlApproval} />
+		</div>
 	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppHtml.svelte

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -26,6 +26,10 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
+	<button
+		class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
+		on:click={() => ($selectedComponent = [id])}>Select</button
+	>
 	<RunnableWrapper
 		{outputs}
 		{render}
@@ -46,5 +50,7 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 					: 'No html'}
 			/>
 		{/key}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/display/AppMap.svelte

@@ -41,7 +41,7 @@ $: if (map && markers) {
 }
 function selectComponent() {
     if (!$connectingInput.opened) {
-        $selectedComponent = id;
+        $selectedComponent = [id];
         $focusedGrid = undefined;
     }
 }

package/components/apps/components/display/AppPdf.svelte

@@ -289,7 +289,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 				style="padding-top: {controlsHeight ?? 0}px; {css?.container?.style ?? ''}"
 			/>
 		{/if}
-		{#if $mode !== 'preview' && $selectedComponent === id}
+		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
 			<button
 				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90 
 			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"

package/components/apps/components/display/PlotlyHtml.svelte

@@ -1,12 +1,15 @@
 <script>import { getContext, onMount } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-// export let configuration: Record<string, AppInput>
+export let configuration;
 export let initializing = undefined;
 export let render;
 const { worldStore } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['plotlycomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -27,9 +30,23 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], {
+        width: w,
+        height: h,
+        margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
+        ...resolvedConfig.layout
+    }, { responsive: true, displayModeBar: false });
 </script>
 
+{#each Object.keys(components['plotlycomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />

package/components/apps/components/display/PlotlyHtml.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         render: boolean;
     };

package/components/apps/components/display/table/AppAggridTable.svelte

@@ -72,7 +72,7 @@ function onCellValueChanged(event) {
 		>
 			<div
 				on:pointerdown|stopPropagation={() => {
-					$selectedComponent = id
+					$selectedComponent = [id]
 				}}
 				style:height="{clientHeight}px"
 				style:width="{clientWidth}px"

package/components/apps/components/display/table/AppTable.svelte

@@ -112,7 +112,7 @@ $componentControl[id] = {
         }
         const hasActions = actionButtons.length >= 1;
         if (hasActions) {
-            $selectedComponent = actionButtons[0].id;
+            $selectedComponent = [actionButtons[0].id];
             return true;
         }
         return false;
@@ -221,7 +221,8 @@ $componentControl[id] = {
 										on:click={() => toggleRow(row, rowIndex)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
-											{#each actionButtons as actionButton, actionIndex (actionIndex)}
+											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
+												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 												<div
 													on:mouseover|stopPropagation={() => {
 														if (actionButton.id !== $hoverStore) {
@@ -233,13 +234,13 @@ $componentControl[id] = {
 															$hoverStore = undefined
 														}
 													}}
-													class={(actionButton.id === $selectedComponent ||
+													class={($selectedComponent?.includes(actionButton.id) ||
 														$hoverStore === actionButton.id) &&
 													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
+													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -255,19 +256,22 @@ $componentControl[id] = {
 															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) {
-																		$selectedComponent = id
+																		$selectedComponent = [id]
 																		return true
 																	} else if (actionIndex > 0) {
-																		$selectedComponent = actionButtons[actionIndex - 1].id
+																		$selectedComponent = [actionButtons[actionIndex - 1].id]
 																		return true
 																	}
 																	return false
@@ -276,7 +280,7 @@ $componentControl[id] = {
 																	if (actionIndex === actionButtons.length - 1) {
 																		return id
 																	} else if (actionIndex < actionButtons.length - 1) {
-																		$selectedComponent = actionButtons[actionIndex + 1].id
+																		$selectedComponent = [actionButtons[actionIndex + 1].id]
 																		return true
 																	}
 																	return false
@@ -288,12 +292,15 @@ $componentControl[id] = {
 															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}
 												</div>
@@ -319,9 +326,9 @@ $componentControl[id] = {
 		<div class="flex flex-col h-full w-full overflow-auto">
 			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
 				The result should be an array of objects. Received:
-				<pre class="w-full bg-white p-2 rounded-md">
-				{JSON.stringify(result, null, 4)}
-				</pre>
+				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
+					>{JSON.stringify(result, null, 4)}</pre
+				>
 			</Alert>
 		</div>
 	{/if}

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -5,7 +5,8 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged = false;
+export let doNotRecomputeOnInputChanged;
+export let recomputableByRefreshButton;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
 let outputs = initOutput($worldStore, id, {
@@ -28,8 +29,8 @@ let outputs = initOutput($worldStore, id, {
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
-	recomputable
 	{outputs}
+	{recomputableByRefreshButton}
 >
 	<slot />
 </RunnableComponent>

package/components/apps/components/helpers/HiddenComponent.svelte.d.ts

@@ -7,7 +7,8 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        doNotRecomputeOnInputChanged: boolean;
+        recomputableByRefreshButton: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/InputValue.svelte

@@ -9,7 +9,7 @@ export let id = undefined;
 export let error = '';
 export let extraContext = {};
 export let key = '';
-const { componentControl } = getContext('AppViewerContext');
+const { componentControl, runnableComponents } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
@@ -67,7 +67,7 @@ async function handleConnection() {
 }
 async function evalExpr(input) {
     try {
-        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
         error = '';
         return r;
     }
@@ -81,7 +81,7 @@ async function getValue(input) {
         return;
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
             error = '';
             return r;
         }

package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,18 +1,11 @@
 <script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents, worldStore } = getContext('AppViewerContext');
+export let loading;
+const { runnableComponents } = getContext('AppViewerContext');
 async function refresh() {
-    window.dispatchEvent(new Event('pointerup'));
-    await $runnableComponents[componentId]?.();
+    await $runnableComponents[componentId]?.cb?.();
 }
-let loading = false;
-$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
-    id: 'refresh-' + componentId,
-    next: (value) => {
-        loading = value;
-    }
-});
 </script>
 
 <button

package/components/apps/components/helpers/RefreshButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
+        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -23,22 +23,25 @@ export let wrapperClass = '';
 export let wrapperStyle = '';
 export let initializing = undefined;
 export let render;
-export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
+export let loading = false;
+export let recomputableByRefreshButton = true;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-if (recomputable || autoRefresh) {
-    $runnableComponents[id] = async (inlineScript) => {
+$runnableComponents[id] = {
+    autoRefresh: autoRefresh && recomputableByRefreshButton,
+    cb: async (inlineScript) => {
         await executeComponent(true, inlineScript);
-    };
-    $runnableComponents = $runnableComponents;
-}
+    }
+};
+$runnableComponents = $runnableComponents;
 let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
+$: outputs.loading?.set(loading);
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
@@ -103,16 +106,16 @@ function stripSchema(inputs, s) {
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        outputs.loading?.set(true);
+        loading = true;
         try {
-            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
+            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
             await setResult(r);
             $state = $state;
         }
         catch (e) {
             sendUserToast('Error running frontend script: ' + e.message, true);
         }
-        outputs.loading?.set(false);
+        loading = false;
         return;
     }
     if (noBackend) {
@@ -124,7 +127,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
-    outputs.loading?.set(true);
+    loading = true;
     try {
         let njob = await testJobLoader?.abstractRun(() => {
             const nonStaticRunnableInputs = {};
@@ -172,7 +175,8 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
     }
     catch (e) {
-        outputs.loading?.set(false);
+        setResult({ error: e.body ?? e.message });
+        loading = false;
     }
 }
 export async function runComponent() {
@@ -180,7 +184,7 @@ export async function runComponent() {
         await executeComponent();
     }
     catch (e) {
-        console.error(e);
+        setResult({ error: e.body ?? e.message });
     }
 }
 let lastStartedAt = Date.now();
@@ -196,7 +200,7 @@ async function setResult(res) {
     const hasRes = res !== undefined && res !== null;
     if (transformer) {
         $worldStore.newOutput(id, 'raw', res);
-        res = await eval_like(transformer.content, computeGlobalContext($worldStore, id, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore);
+        res = await eval_like(transformer.content, computeGlobalContext($worldStore, id, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
         if (hasRes && res === undefined) {
             res = {
                 error: {
@@ -256,7 +260,7 @@ async function setResult(res) {
 				setResult(e.detail.result)
 			}
 		}
-		outputs.loading?.set(false)
+		loading = false
 	}}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
@@ -307,7 +311,7 @@ async function setResult(res) {
 		{/if}
 		{#if !initializing && autoRefresh === true}
 			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton componentId={id} />
+				<RefreshButton {loading} componentId={id} />
 			</div>
 		{/if}
 	</div>