windmill-components 1.75.0 → 1.78.0

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

@@ -11,7 +11,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'text'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,6 +21,5 @@ export type AppTextProps = typeof __propDef.props;
 export type AppTextEvents = typeof __propDef.events;
 export type AppTextSlots = typeof __propDef.slots;
 export default class AppText extends SvelteComponentTyped<AppTextProps, AppTextEvents, AppTextSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -6,14 +6,18 @@ import { Scatter } from 'svelte-chartjs';
 import InputValue from '../helpers/InputValue.svelte';
 import { getContext } from 'svelte';
 import { concatCustomCss } from '../../utils';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['loading', 'result'];
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let logarithmicScale = false;
 let zoomable = false;
 let pannable = false;
@@ -57,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} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {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

@@ -10,7 +10,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,6 +20,5 @@ export type AppTimeseriesProps = typeof __propDef.props;
 export type AppTimeseriesEvents = typeof __propDef.events;
 export type AppTimeseriesSlots = typeof __propDef.slots;
 export default class AppTimeseries extends SvelteComponentTyped<AppTimeseriesProps, AppTimeseriesEvents, AppTimeseriesSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -1,11 +1,16 @@
-<script>import { onMount } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 // export let configuration: Record<string, AppInput>
 export let initializing = undefined;
 export let render;
-export const staticOutputs = ['result', 'loading'];
+const { worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let result = undefined;
 let divEl = null;
 let Plotly;
@@ -22,11 +27,11 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, [result], { width: w, height: h, margin: { l: 40, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, [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} flexWrap {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

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

@@ -6,7 +6,6 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         pointerdown: PointerEvent;
@@ -19,6 +18,5 @@ export type PlotlyHtmlProps = typeof __propDef.props;
 export type PlotlyHtmlEvents = typeof __propDef.events;
 export type PlotlyHtmlSlots = typeof __propDef.slots;
 export default class PlotlyHtml extends SvelteComponentTyped<PlotlyHtmlProps, PlotlyHtmlEvents, PlotlyHtmlSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -1,4 +1,5 @@
-<script>import { onMount } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
@@ -6,9 +7,13 @@ export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let render;
-export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 let divEl = null;
+const { worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let vegaEmbed;
 onMount(async () => {
     if (divEl) {
@@ -41,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} flexWrap {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         pointerdown: PointerEvent;
@@ -20,6 +19,5 @@ export type VegaLiteHtmlProps = typeof __propDef.props;
 export type VegaLiteHtmlEvents = typeof __propDef.events;
 export type VegaLiteHtmlSlots = typeof __propDef.slots;
 export default class VegaLiteHtml extends SvelteComponentTyped<VegaLiteHtmlProps, VegaLiteHtmlEvents, VegaLiteHtmlSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -6,14 +6,20 @@ import InputValue from '../../helpers/InputValue.svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { isObject } from '../../../../../utils';
 import Alert from '../../../../common/alert/Alert.svelte';
+import { initOutput } from '../../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let render;
-export const staticOutputs = ['selectedRow', 'loading', 'result', 'selectedRowIndex'];
 let result = undefined;
 const { worldStore, selectedComponent } = getContext('AppViewerContext');
+let outputs = initOutput($worldStore, id, {
+    selectedRowIndex: 0,
+    selectedRow: {},
+    result: [],
+    loading: false
+});
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
     if (selectedRowIndex !== rowIndex) {
@@ -33,8 +39,7 @@ $: selectedRowIndex === -1 &&
     mounted &&
     outputs &&
     toggleRow({ original: result[0] }, 0);
-$: outputs = $worldStore?.outputsById[id];
-$: outputs?.result?.set(result);
+$: outputs?.result?.set(result ?? []);
 let clientHeight;
 let clientWidth;
 let columnDefs = undefined;
@@ -58,7 +63,7 @@ function onCellValueChanged(event) {
 <InputValue {id} input={configuration.pagination} bind:value={pagination} />
 <InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
-<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {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"
@@ -86,7 +91,10 @@ function onCellValueChanged(event) {
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
+			The result should be an array of objects, received:
+			<pre class="overflow-auto">
+				{JSON.stringify(result)}
+			</pre>
 		</Alert>
 	{/if}
 </RunnableWrapper>

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

@@ -9,7 +9,6 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +19,5 @@ export type AppAggridTableProps = typeof __propDef.props;
 export type AppAggridTableEvents = typeof __propDef.events;
 export type AppAggridTableSlots = typeof __propDef.slots;
 export default class AppAggridTable extends SvelteComponentTyped<AppAggridTableProps, AppAggridTableEvents, AppAggridTableSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -11,6 +11,7 @@ import { tableOptions } from './tableOptions';
 import Alert from '../../../../common/alert/Alert.svelte';
 import { concatCustomCss } from '../../../utils';
 import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
@@ -18,13 +19,6 @@ export let actionButtons;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = [
-    'selectedRow',
-    'loading',
-    'result',
-    'search',
-    'selectedRowIndex'
-];
 let result = undefined;
 let search = undefined;
 let searchValue = '';
@@ -39,7 +33,7 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { app, worldStore, staticOutputs: staticOutputsStore } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex, force = false) {
     if (selectedRowIndex !== rowIndex || force) {
@@ -96,7 +90,13 @@ let filteredResult = [];
 $: filteredResult && setOptions(filteredResult);
 $: search === 'By Component' && (filteredResult = searchInResult(result ?? [], searchValue));
 $: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result ?? []);
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    selectedRowIndex: 0,
+    selectedRow: undefined,
+    loading: false,
+    result: [],
+    search: ''
+});
 function rerender() {
     table = createSvelteTable(options);
     if (result) {
@@ -109,7 +109,7 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class={twMerge(
@@ -201,7 +201,11 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 								{/each}
 
 								{#if actionButtons.length > 0}
-									<td class="p-2 " on:click={() => toggleRow(row, rowIndex)}>
+									<td
+										class="p-2"
+										on:keypress={() => toggleRow(row, rowIndex)}
+										on:click={() => toggleRow(row, rowIndex)}
+									>
 										<div class="center-center h-full w-full flex-wrap gap-1">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
 												{#if rowIndex == 0}
@@ -214,7 +218,6 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 														}}
 														extraQueryParams={{ row: row.original }}
 														bind:componentInput={actionButton.componentInput}
-														bind:staticOutputs={$staticOutputsStore[actionButton.id]}
 													/>
 												{:else}
 													<AppButton
@@ -248,7 +251,10 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
+			The result should be an array of objects. Received:
+			<pre class="overflow-auto">
+				{JSON.stringify(result)}
+			</pre>
 		</Alert>
 	{/if}
 </RunnableWrapper>

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

@@ -11,7 +11,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,6 +21,5 @@ export type AppTableProps = typeof __propDef.props;
 export type AppTableEvents = typeof __propDef.events;
 export type AppTableSlots = typeof __propDef.slots;
 export default class AppTable extends SvelteComponentTyped<AppTableProps, AppTableEvents, AppTableSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -1,16 +1,24 @@
-<script>import RunnableComponent from './RunnableComponent.svelte';
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import RunnableComponent from './RunnableComponent.svelte';
 export let id;
 export let name;
 export let inlineScript;
 export let fields;
+export let autoRefresh = false;
 let result = undefined;
-export const staticOutputs = ['result', 'loading'];
+const { worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 </script>
 
 <RunnableComponent
 	render={false}
 	{id}
 	{fields}
+	{autoRefresh}
 	bind:result
 	runnable={{
 		name,
@@ -18,6 +26,7 @@ export const staticOutputs = ['result', 'loading'];
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
+	recomputable
 >
 	<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>;
-        staticOutputs?: string[] | undefined;
+        autoRefresh?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +20,5 @@ export type HiddenComponentProps = typeof __propDef.props;
 export type HiddenComponentEvents = typeof __propDef.events;
 export type HiddenComponentSlots = typeof __propDef.slots;
 export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -1,11 +1,18 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
 import { deepEqual } from 'fast-equals';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
+import { computeGlobalContext, eval_like } from './eval';
 export let input;
 export let value;
 export let id = undefined;
 export let error = '';
+export let extraContext = {};
+const { componentControl } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+if (input == undefined) {
+    dispatch('done');
+}
 let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
 $: if (input && !deepEqual(input, lastInput)) {
     lastInput = JSON.parse(JSON.stringify(input));
@@ -14,8 +21,8 @@ $: if (input && !deepEqual(input, lastInput)) {
         lastInput.value = input?.['value'];
     }
 }
-const { worldStore } = getContext('AppViewerContext');
-$: state = $worldStore?.state;
+const { worldStore, state, mode } = getContext('AppViewerContext');
+$: stateId = $worldStore?.stateId;
 let timeout = undefined;
 const debounce_ms = 50;
 function debounce(cb) {
@@ -27,21 +34,26 @@ function debounce(cb) {
 $: lastInput && $worldStore && debounce(handleConnection);
 $: lastInput &&
     lastInput.type == 'template' &&
+    $stateId &&
     $state &&
-    debounce(() => (value = getValue(lastInput)));
+    debounce(async () => {
+        value = await getValue(lastInput);
+        dispatch('done');
+    });
 $: lastInput &&
     lastInput.type == 'eval' &&
+    $stateId &&
     $state &&
-    debounce(() => (value = evalExpr(lastInput)));
-function handleConnection() {
+    debounce(async () => (value = await evalExpr(lastInput)));
+async function handleConnection() {
     if (lastInput.type === 'connected') {
-        $worldStore?.connect(lastInput, onValueChange);
+        $worldStore?.connect(lastInput, onValueChange, id);
     }
     else if (lastInput.type === 'static' || lastInput.type == 'template') {
-        value = getValue(lastInput);
+        value = await getValue(lastInput);
     }
     else if (lastInput.type == 'eval') {
-        value = evalExpr(lastInput);
+        value = await evalExpr(lastInput);
     }
     else if (lastInput.type == 'upload') {
         value = lastInput.value;
@@ -49,10 +61,11 @@ function handleConnection() {
     else {
         value = undefined;
     }
+    dispatch('done');
 }
-function evalExpr(input) {
+async function evalExpr(input) {
     try {
-        const r = eval_like(input.expr, computeGlobalContext());
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
         error = '';
         return r;
     }
@@ -61,20 +74,10 @@ function evalExpr(input) {
         return value;
     }
 }
-function computeGlobalContext() {
-    return Object.fromEntries(Object.entries($worldStore?.outputsById ?? {})
-        .filter(([k, _]) => k != id)
-        .map(([key, value]) => {
-        return [
-            key,
-            Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
-        ];
-    }));
-}
-export function getValue(input) {
+async function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = eval_like('`' + input.eval + '`', computeGlobalContext());
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
             error = '';
             return r;
         }
@@ -89,26 +92,6 @@ export function getValue(input) {
         return input.eval;
     }
 }
-function create_context_function_template(eval_string, context) {
-    return `
-  return function (context) {
-    "use strict";
-    ${Object.keys(context).length > 0
-        ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
-        : ``}
-    return ${eval_string};
-  }                                                                                                                   
-  `;
-}
-function make_context_evaluator(eval_string, context) {
-    let template = create_context_function_template(eval_string, context);
-    let functor = Function(template);
-    return functor();
-}
-function eval_like(text, context = {}) {
-    let evaluator = make_context_evaluator(text, context);
-    return evaluator(context);
-}
 function onValueChange(newValue) {
     if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
         const { connection } = lastInput;

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

@@ -2,13 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        input: AppInput;
+        input: AppInput | undefined;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
         error?: string | undefined;
-        getValue?: ((input: AppInput) => any) | undefined;
+        extraContext?: Record<string, any> | undefined;
     };
     events: {
+        done: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -17,6 +19,5 @@ export type InputValueProps = typeof __propDef.props;
 export type InputValueEvents = typeof __propDef.events;
 export type InputValueSlots = typeof __propDef.slots;
 export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
-    get getValue(): (input: AppInput) => any;
 }
 export {};

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

@@ -8,12 +8,12 @@ export let result;
 export let render;
 // Sync the result to the output
 const { worldStore } = getContext('AppViewerContext');
-$: outputs = $worldStore?.outputsById[id];
+$: outputs = $worldStore?.outputsById?.[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 function setOutput(v) {
-    outputs.result?.set(v, true);
+    outputs?.result?.set(v, true);
 }
 $: result && outputs && setOutput(result);
 </script>

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

@@ -1,6 +1,4 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import { faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { RefreshCcw, RefreshCw } from 'lucide-svelte';
+<script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
 const { runnableComponents, worldStore } = getContext('AppViewerContext');
@@ -10,6 +8,7 @@ async function refresh() {
 }
 let loading = false;
 $: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
+    id: 'refresh-' + componentId,
     next: (value) => {
         loading = value;
     }

package/components/apps/components/helpers/ResizeWrapper.svelte

@@ -2,7 +2,7 @@
 import { findGridItem } from '../../editor/appUtils';
 export let id;
 export let shouldWrap = false;
-const { app, breakpoint } = getContext('AppViewerContext');
+const { app, breakpoint, mode } = getContext('AppViewerContext');
 $: gridItem = findGridItem($app, id);
 let wrapper;
 $: {
@@ -10,13 +10,12 @@ $: {
         const wrapperHeight = wrapper.getBoundingClientRect().height;
         const width = $breakpoint === 'sm' ? 3 : 12;
         gridItem[width].h = Math.ceil(wrapperHeight / 36);
-        gridItem = gridItem;
     }
 }
 </script>
 
-{#if shouldWrap}
-	<div bind:this={wrapper}>
+{#if shouldWrap && $mode !== 'preview'}
+	<div class="h-full w-full" bind:this={wrapper}>
 		<slot />
 	</div>
 {:else}