windmill-components 1.79.0 → 1.82.1

package/components/apps/components/display/AppTimeseries.svelte

@@ -14,7 +14,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -61,7 +61,7 @@ $: css = concatCustomCss($app.css?.timeseriescomponent, customCss);
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'timeseriescomponent'> | undefined;
         render: boolean;
     };
     events: {

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

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let render;
 const { worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -27,11 +27,11 @@ $: 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 } }, { responsive: true, displayModeBar: false });
 </script>
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/VegaLiteHtml.svelte

@@ -10,7 +10,7 @@ export let render;
 let result = undefined;
 let divEl = null;
 const { worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -46,7 +46,7 @@ $: vegaEmbed &&
 <InputValue {id} input={configuration.canvas} bind:value={canvas} />
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

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

@@ -63,7 +63,7 @@ function onCellValueChanged(event) {
 <InputValue {id} input={configuration.pagination} bind:value={pagination} />
 <InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full"

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

@@ -33,7 +33,7 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { app, worldStore, componentControl, selectedComponent } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex, force = false) {
     if (selectedRowIndex !== rowIndex || force) {
@@ -122,7 +122,7 @@ $componentControl[id] = {
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class={twMerge(
@@ -221,13 +221,26 @@ $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
-													class={actionButton.id === $selectedComponent
+													on:mouseover|stopPropagation={() => {
+														if (actionButton.id !== $hoverStore) {
+															$hoverStore = actionButton.id
+														}
+													}}
+													on:mouseout|stopPropagation={() => {
+														if ($hoverStore !== undefined) {
+															$hoverStore = undefined
+														}
+													}}
+													class={(actionButton.id === $selectedComponent ||
+														$hoverStore === actionButton.id) &&
+													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent}
+													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -240,14 +253,18 @@ $componentControl[id] = {
 													{/if}
 													{#if rowIndex == 0}
 														<AppButton
+															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) {
@@ -272,14 +289,18 @@ $componentControl[id] = {
 														/>
 													{:else}
 														<AppButton
+															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>
@@ -297,16 +318,18 @@ $componentControl[id] = {
 				paginationEnabled={pagination}
 				{result}
 				{table}
-				class={css?.tableFooter.class}
-				style={css?.tableFooter.style}
+				class={css?.tableFooter?.class}
+				style={css?.tableFooter?.style}
 			/>
 		</div>
 	{:else if result != undefined}
-		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects. Received:
-			<pre class="overflow-auto">
-				{JSON.stringify(result)}
-			</pre>
-		</Alert>
+		<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 whitespace-pre-wrap"
+					>{JSON.stringify(result, null, 4)}</pre
+				>
+			</Alert>
+		</div>
 	{/if}
 </RunnableWrapper>

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         configuration: RichConfigurations;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'> | undefined;
+        customCss?: ComponentCustomCSS<'tablecomponent'> | undefined;
         render: boolean;
     };
     events: {

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

@@ -5,10 +5,10 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let autoRefresh = false;
+export let doNotRecomputeOnInputChanged = false;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -18,8 +18,10 @@ initOutput($worldStore, id, {
 	render={false}
 	{id}
 	{fields}
-	{autoRefresh}
+	autoRefresh={true}
+	{doNotRecomputeOnInputChanged}
 	bind:result
+	transformer={undefined}
 	runnable={{
 		name,
 		inlineScript,
@@ -27,6 +29,7 @@ initOutput($worldStore, id, {
 	}}
 	wrapperClass="hidden"
 	recomputable
+	{outputs}
 >
 	<slot />
 </RunnableComponent>

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

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

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

@@ -1,6 +1,6 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
 import { deepEqual } from 'fast-equals';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 import { computeGlobalContext, eval_like } from './eval';
 export let input;
@@ -9,14 +9,13 @@ export let id = undefined;
 export let error = '';
 export let extraContext = {};
 export let key = '';
-$: console.log(value);
 const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
 }
 let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
-$: console.log(input);
+onDestroy(() => (lastInput = undefined));
 $: if (input && !deepEqual(input, lastInput)) {
     lastInput = JSON.parse(JSON.stringify(input));
     // Needed because of file uploads
@@ -49,17 +48,16 @@ $: lastInput &&
     $state &&
     debounce(async () => (value = await evalExpr(lastInput)));
 async function handleConnection() {
-    console.log('handleConnection', lastInput);
-    if (lastInput.type === 'connected') {
+    if (lastInput?.type === 'connected') {
         $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`);
     }
-    else if (lastInput.type === 'static' || lastInput.type == 'template') {
+    else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
         value = await getValue(lastInput);
     }
-    else if (lastInput.type == 'eval') {
+    else if (lastInput?.type == 'eval') {
         value = await evalExpr(lastInput);
     }
-    else if (lastInput.type == 'upload') {
+    else if (lastInput?.type == 'upload') {
         value = lastInput.value;
     }
     else {
@@ -79,6 +77,8 @@ async function evalExpr(input) {
     }
 }
 async function getValue(input) {
+    if (!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);
@@ -97,7 +97,7 @@ async function getValue(input) {
     }
 }
 function onValueChange(newValue) {
-    if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
+    if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
         const { connection } = lastInput;
         if (!connection) {
             // No connection

package/components/apps/components/helpers/Loader.svelte

@@ -0,0 +1,18 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+export let loading;
+</script>
+
+{#if !loading}
+	<slot />
+{:else}
+	<div class="w-full h-full">
+		<div
+			out:fade|local={{ duration: 50 }}
+			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+		>
+			<Loader2 class="animate-spin" size={16} />
+			<span class="text-xs mt-1">Loading</span>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponentTyped<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -9,9 +9,6 @@ export let render;
 // Sync the result to the output
 const { worldStore } = getContext('AppViewerContext');
 $: outputs = $worldStore?.outputsById?.[id];
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
 function setOutput(v) {
     outputs?.result?.set(v, true);
 }
@@ -25,13 +22,5 @@ $: result && outputs && setOutput(result);
 {#if render}
 	<slot />
 {:else}
-	<div class="w-full h-full">
-		<div
-			out:fade|local={{ duration: 50 }}
-			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
-		>
-			<Loader2 class="animate-spin" size={16} />
-			<span class="text-xs mt-1">Loading</span>
-		</div>
-	</div>
+	<div class="w-full h-full" />
 {/if}

package/components/apps/components/helpers/ResolveConfig.svelte

@@ -0,0 +1,29 @@
+<script>import { InputValue } from '.';
+export let id;
+export let extraKey = '';
+export let key;
+export let resolvedConfig;
+export let configuration;
+$: configuration?.type == 'oneOf' && handleSelected(configuration.selected);
+function handleSelected(selected) {
+    if (resolvedConfig?.selected != undefined && resolvedConfig?.selected != selected) {
+        resolvedConfig.selected = selected;
+    }
+}
+</script>
+
+{#if configuration?.type == 'oneOf' && resolvedConfig?.type == 'oneOf'}
+	{@const choice = resolvedConfig.selected}
+	{#each Object.keys(configuration.configuration?.[choice] ?? {}) as nestedKey (nestedKey)}
+		{#if resolvedConfig.configuration?.[choice] != undefined}
+			<InputValue
+				key={key + choice + nestedKey + extraKey}
+				{id}
+				input={configuration?.configuration?.[choice]?.[nestedKey]}
+				bind:value={resolvedConfig.configuration[choice][nestedKey]}
+			/>
+		{/if}
+	{/each}
+{:else}
+	<InputValue key={key + extraKey} {id} input={configuration} bind:value={resolvedConfig} />
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        extraKey?: string | undefined;
+        key: string;
+        resolvedConfig: any;
+        configuration: RichConfiguration;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResolveConfigProps = typeof __propDef.props;
+export type ResolveConfigEvents = typeof __propDef.events;
+export type ResolveConfigSlots = typeof __propDef.slots;
+export default class ResolveConfig extends SvelteComponentTyped<ResolveConfigProps, ResolveConfigEvents, ResolveConfigSlots> {
+}
+export {};