windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/GridViewer.svelte

@@ -0,0 +1,91 @@
+<script>import { onMount, createEventDispatcher } from 'svelte';
+import { getColumn, throttle } from '../svelte-grid/utils/other';
+import { getContainerHeight } from '../svelte-grid/utils/container';
+import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
+const dispatch = createEventDispatcher();
+export let items;
+export let rowHeight;
+export let cols;
+export let gap = [10, 10];
+export let throttleUpdate = 100;
+export let allIdsInPath = undefined;
+export let containerWidth = undefined;
+export let parentWidth = undefined;
+let getComputedCols;
+let container;
+$: [gapX, gapY] = gap;
+let xPerPx = 0;
+let yPerPx = rowHeight;
+$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
+const onResize = throttle(() => {
+    items = specifyUndefinedColumns(items, getComputedCols, cols);
+    dispatch('resize', {
+        cols: getComputedCols,
+        xPerPx,
+        yPerPx,
+        width: containerWidth
+    });
+}, throttleUpdate);
+onMount(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+        requestAnimationFrame(() => {
+            let width = entries[0].contentRect.width;
+            if (width === containerWidth)
+                return;
+            getComputedCols = getColumn(parentWidth ?? width, cols);
+            xPerPx = width / getComputedCols;
+            if (!containerWidth) {
+                items = specifyUndefinedColumns(items, getComputedCols, cols);
+                dispatch('mount', {
+                    cols: getComputedCols,
+                    xPerPx,
+                    yPerPx // same as rowHeight
+                });
+            }
+            else {
+                onResize();
+            }
+            containerWidth = width;
+        });
+    });
+    sizeObserver.observe(container);
+    return () => sizeObserver.disconnect();
+});
+</script>
+
+<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
+	{#if xPerPx}
+		{#each items as item (item.id)}
+			{@const onTop = allIdsInPath?.includes(item.id)}
+			{@const width =
+				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
+				gapX * 2}
+			{@const height = (item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+			{@const top = (item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
+			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
+			<div
+				class="svlt-grid-item"
+				style="width: {width}px; height:{height}px; {onTop
+					? 'z-index: 1000;'
+					: ''} top: {top}px; left: {left}px;"
+			>
+				{#if item[getComputedCols]}
+					<slot dataItem={item} item={item[getComputedCols]} />
+				{/if}
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.svlt-grid-container {
+		position: relative;
+		width: 100%;
+	}
+	.svlt-grid-item {
+		touch-action: none;
+		position: absolute;
+		will-change: auto;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}</style>

package/components/apps/editor/GridViewer.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FilledItem } from '../svelte-grid/types';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: FilledItem<T>[];
+        rowHeight: number;
+        cols: [number, number][];
+        gap?: number[] | undefined;
+        throttleUpdate?: number | undefined;
+        allIdsInPath?: string[] | undefined;
+        containerWidth?: number | undefined;
+        parentWidth?: number | undefined;
+    };
+    events(): {
+        resize: CustomEvent<any>;
+        mount: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            dataItem: FilledItem<T>;
+            item: Required<import("../svelte-grid/types").ItemLayout>;
+        };
+    };
+}
+export type GridViewerProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type GridViewerEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type GridViewerSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class GridViewer<T> extends SvelteComponentTyped<GridViewerProps<T>, GridViewerEvents<T>, GridViewerSlots<T>> {
+}
+export {};

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -2,12 +2,18 @@
 import { ChevronDown, RefreshCw } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
 import Button from '../../common/button/Button.svelte';
-const { runnableComponents } = getContext('AppEditorContext');
+import { allItems } from '../utils';
+const { runnableComponents, app, worldStore } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
 let interval = undefined;
 let shouldRefresh = false;
-$: componentNumber = Object.keys($runnableComponents).length;
+let firstLoad = false;
+$: !firstLoad &&
+    $worldStore.initializedOutputs ==
+        allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
+    refresh();
+$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
 function onClick(stopAfterClear = true) {
     if (timeout) {
         clearInterval(timeout);
@@ -27,9 +33,16 @@ function setInter(inter) {
     onClick(!inter);
 }
 function refresh() {
+    if (!firstLoad) {
+        $worldStore.initialized = true;
+        firstLoad = true;
+    }
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
-        return $runnableComponents?.[id]?.();
+        if (!$runnableComponents?.[id]?.autoRefresh) {
+            return;
+        }
+        return $runnableComponents?.[id]?.cb?.();
     })).finally(() => {
         loading = false;
     });
@@ -47,6 +60,7 @@ function visChange() {
 }
 onMount(() => {
     document.addEventListener('visibilitychange', visChange);
+    // setTimeout(() => refresh(), 1000)
     return () => {
         document.removeEventListener('visibilitychange', visChange);
         if (timeout)
@@ -57,18 +71,21 @@ onMount(() => {
 
 <div class="flex items-center">
 	<Button
+		disabled={componentNumber == 0}
 		on:click={() => onClick()}
-		color="{timeout ? 'blue' : 'light'}"
-		variant="{timeout ? 'contained' : 'border'}"
+		color={timeout ? 'blue' : 'light'}
+		variant={timeout ? 'contained' : 'border'}
 		size="xs"
 		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
-		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval ? `every ${interval / 1000} seconds` : 'once'}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
 	>
-		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
+		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
 	</Button>
 	<Dropdown
 		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color="{timeout ? 'blue' : 'light'}"
+		color={timeout ? 'blue' : 'light'}
 		variant="border"
 		dropdownItems={[
 			{
@@ -78,7 +95,7 @@ onMount(() => {
 			...[1, 2, 3, 4, 5, 6].map((i) => ({
 				displayName: `Every ${i * 5} seconds`,
 				action: () => setInter(i * 5000)
-			})),
+			}))
 		]}
 	>
 		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>

package/components/apps/editor/SettingsPanel.svelte

@@ -1,13 +1,118 @@
-<script>import { getContext } from 'svelte';
+<script>import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { getContext } from 'svelte';
+import { allItems } from '../utils';
+import { findGridItem } from './appUtils';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
-import TablePanel from './TablePanel.svelte';
-const { selectedComponent, lazyGrid } = getContext('AppEditorContext');
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+import BackgroundScriptTriggerList from './settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte';
+const { selectedComponent, app, stateId } = getContext('AppViewerContext');
+$: hiddenInlineScript = $app?.hiddenInlineScripts
+    ?.map((x, i) => ({ script: x, index: i }))
+    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
+$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
+$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
+function findTableActionSettings(app, id) {
+    return allItems(app.grid, app.subgrids)
+        .map((x) => {
+        if (x?.data?.type === 'tablecomponent') {
+            if (x?.data?.actionButtons) {
+                const tableAction = x.data.actionButtons.find((x) => x.id === id);
+                if (tableAction) {
+                    return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id };
+                }
+            }
+        }
+    })
+        .find((x) => x);
+}
+function findComponentSettings(app, id) {
+    if (!id)
+        return undefined;
+    if (app?.grid) {
+        const gridItem = app.grid.find((x) => x.data?.id === id);
+        if (gridItem) {
+            return { item: gridItem, parent: undefined };
+        }
+    }
+    if (app?.subgrids) {
+        for (const key of Object.keys(app.subgrids ?? {})) {
+            const gridItem = app.subgrids[key].find((x) => x.data?.id === id);
+            if (gridItem) {
+                return { item: gridItem, parent: key };
+            }
+        }
+    }
+    return undefined;
+}
 </script>
 
-{#each $lazyGrid as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
-	{/if}
-{/each}
+{#if componentSettings}
+	{#key componentSettings?.item?.id}
+		<ComponentPanel bind:componentSettings />
+	{/key}
+{:else if tableActionSettings}
+	{#key tableActionSettings?.item?.data?.id}
+		<ComponentPanel
+			noGrid
+			rowColumns
+			bind:componentSettings={tableActionSettings}
+			duplicateMoveAllowed={false}
+			onDelete={() => {
+				if (tableActionSettings) {
+					const parent = findGridItem($app, tableActionSettings.parent)
+					if (!parent) return
+
+					if (parent.data.type === 'tablecomponent') {
+						parent.data.actionButtons = parent.data.actionButtons.filter(
+							(x) => x.id !== tableActionSettings?.item.id
+						)
+					}
+				}
+			}}
+		/>
+	{/key}
+{:else if hiddenInlineScript}
+	<div class="min-h-full flex flex-col divide-y">
+		<PanelSection title={`Configuration`}>
+			<div class="flex items-center">
+				<Toggle
+					bind:checked={hiddenInlineScript.script.autoRefresh}
+					options={{ right: 'Run on start and app refresh' }}
+				/>
+				<Tooltip>
+					You may want to disable this so that the background script is only triggered by changes to
+					other values or triggered by another computation on a button (See 'Recompute Others')
+				</Tooltip>
+			</div>
+		</PanelSection>
+
+		<div class="p-2">
+			{#if hiddenInlineScript.script.inlineScript}
+				<BackgroundScriptTriggerList
+					fields={hiddenInlineScript.script.fields}
+					autoRefresh={hiddenInlineScript.script.autoRefresh}
+					id={`bg_${hiddenInlineScript.index}`}
+					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
+					bind:inlineScript={hiddenInlineScript.script.inlineScript}
+				/>
+			{:else}
+				<span class="text-gray-600 text-xs">No hiddenInlineScript.script defined</span>
+			{/if}
+		</div>
+		{#if Object.keys(hiddenInlineScript.script.fields).length > 0}
+			<PanelSection title={`Inputs`}>
+				{#key $stateId}
+					<InputsSpecsEditor
+						id={`bg_${hiddenInlineScript.index}`}
+						shouldCapitalize={false}
+						bind:inputSpecs={hiddenInlineScript.script.fields}
+						userInputEnabled={false}
+					/>
+				{/key}
+			</PanelSection>
+		{/if}
+		<div class="grow shrink" />
+	</div>
+{/if}

package/components/apps/editor/SubGridEditor.svelte

@@ -0,0 +1,146 @@
+<script>import { classNames } from '../../../utils';
+import { createEventDispatcher, getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import Component from './component/Component.svelte';
+import { expandGriditem, findGridItem } from './appUtils';
+import { push } from '../../../history';
+import Grid from '../svelte-grid/Grid.svelte';
+import GridViewer from './GridViewer.svelte';
+import { selectId } from '../utils';
+import ComponentWrapper from './component/ComponentWrapper.svelte';
+export let containerHeight = undefined;
+export let containerWidth = undefined;
+let classes = '';
+export { classes as class };
+export let style = '';
+export let noPadding = false;
+export let noYPadding = false;
+export let subGridId;
+export let visible = true;
+export let id;
+export let shouldHighlight = true;
+const dispatch = createEventDispatcher();
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const editorContext = getContext('AppEditorContext');
+const { manuallyOpened } = getContext('ContextPanel');
+$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
+const onpointerdown = (e) => {
+    dispatch('focus');
+};
+function selectComponent(e, id) {
+    if (!$connectingInput.opened) {
+        selectId(e, id, selectedComponent, $app);
+    }
+}
+function lock(dataItem) {
+    let fComponent = findGridItem($app, dataItem.id);
+    if (fComponent) {
+        fComponent = toggleFixed(fComponent);
+    }
+    $app = $app;
+}
+let container = undefined;
+</script>
+
+<div
+	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
+		? 'visible'
+		: 'invisible h-0 overflow-hidden'} 	"
+	bind:this={container}
+	on:pointerdown={onpointerdown}
+>
+	<div
+		class={twMerge(
+			'overflow-auto',
+			noYPadding ? '' : 'py-2',
+			classes ?? '',
+			noPadding ? 'px-0' : 'px-2'
+		)}
+		style="height: {containerHeight}px; {style ?? ''}"
+	>
+		{#if $mode !== 'preview'}
+			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
+				<Grid
+					allIdsInPath={$allIdsInPath}
+					items={$app.subgrids?.[subGridId] ?? []}
+					on:redraw={(e) => {
+						push(editorContext?.history, $app)
+						if ($app.subgrids) {
+							$app.subgrids[subGridId] = e.detail
+						}
+					}}
+					selectedIds={$selectedComponent}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					fastStart={true}
+					gap={[4, 2]}
+					scroller={container}
+					parentWidth={$parentWidth - 17}
+					{containerWidth}
+				>
+					<ComponentWrapper
+						id={dataItem.id}
+						type={dataItem.data.type}
+						class={classNames(
+							'h-full w-full center-center',
+							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+							'top-0'
+						)}
+					>
+						<Component
+							render={visible}
+							component={dataItem.data}
+							selected={Boolean($selectedComponent?.includes(dataItem.id))}
+							locked={isFixed(dataItem)}
+							on:lock={() => lock(dataItem)}
+							on:expand={() => {
+								const parentGridItem = findGridItem($app, id)
+
+								if (!parentGridItem) {
+									return
+								}
+
+								$selectedComponent = [dataItem.id]
+								push(editorContext?.history, $app)
+
+								expandGriditem(
+									$app.subgrids?.[subGridId] ?? [],
+									dataItem.id,
+									$breakpoint,
+									parentGridItem
+								)
+								$app = $app
+							}}
+						/>
+					</ComponentWrapper>
+				</Grid>
+			</div>
+		{:else}
+			<GridViewer
+				allIdsInPath={$allIdsInPath}
+				items={$app.subgrids?.[subGridId] ?? []}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				gap={[4, 2]}
+				parentWidth={$parentWidth - 17}
+				{containerWidth}
+			>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
+					class={classNames('h-full w-full center-center', 'top-0')}
+				>
+					<Component
+						render={visible}
+						component={dataItem.data}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						locked={isFixed(dataItem)}
+					/>
+				</div>
+			</GridViewer>
+		{/if}
+	</div>
+</div>

package/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        containerHeight?: number | undefined;
+        containerWidth?: number | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        noPadding?: boolean | undefined;
+        noYPadding?: boolean | undefined;
+        subGridId: string;
+        visible?: boolean | undefined;
+        id: string;
+        shouldHighlight?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubGridEditorProps = typeof __propDef.props;
+export type SubGridEditorEvents = typeof __propDef.events;
+export type SubGridEditorSlots = typeof __propDef.slots;
+export default class SubGridEditor extends SvelteComponentTyped<SubGridEditorProps, SubGridEditorEvents, SubGridEditorSlots> {
+}
+export {};

package/components/apps/editor/appUtils.d.ts

@@ -0,0 +1,73 @@
+import type { App, BaseAppComponent, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
+import { components, type AppComponent, type BaseComponent } from './component';
+import type { Output, World } from '../rx';
+import type { FilledItem } from '../svelte-grid/types';
+import type { EvalAppInput, StaticAppInput } from '../inputType';
+export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
+export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
+export declare function allsubIds(app: App, parentId: string): string[];
+export declare function findGridItem(app: App, id: string): GridItem | undefined;
+export declare function getNextGridItemId(app: App): string;
+export declare function getAllRecomputeIdsForComponent(app: App, id: string | undefined): string[];
+export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent, columns?: Record<number, any>): GridItem;
+export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
+export declare function appComponentFromType<T extends keyof typeof components>(type: T): (id: string) => BaseAppComponent & BaseComponent<T>;
+export declare function insertNewGridItem(app: App, builddata: (id: string) => AppComponent, focusedGrid: FocusedGrid | undefined, columns?: Record<string, any>, keepId?: string): string;
+export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
+export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined, shouldKeepSubGrid: boolean): string[];
+type AvailableSpace = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare function findAvailableSpace(grid: GridItem[], gridItem: GridItem, editorBreakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): AvailableSpace | undefined;
+type Outputtable<Type> = {
+    -readonly [Property in keyof Type]: Output<Type[Property]>;
+};
+export declare function initOutput<I extends Record<string, any>>(world: World, id: string, init: I): Outputtable<I>;
+export declare function initConfig<T extends Record<string, StaticAppInput | EvalAppInput | {
+    type: 'oneOf';
+    selected: string;
+    configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>;
+}>>(r: T, configuration?: Record<string, StaticAppInput | {
+    type: 'oneOf';
+    selected: string;
+    configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>;
+} | any>): {
+    [Property in keyof T]: T[Property] extends StaticAppInput ? T[Property]['value'] | undefined : T[Property] extends {
+        type: 'oneOf';
+    } ? {
+        type: 'oneOf';
+        selected: keyof T[Property]['configuration'];
+        configuration: {
+            [Choice in keyof T[Property]['configuration']]: {
+                [IT in keyof T[Property]['configuration'][Choice]]: T[Property]['configuration'][Choice][IT] extends StaticAppInput ? T[Property]['configuration'][Choice][IT]['value'] | undefined : undefined;
+            };
+        };
+    } : undefined;
+};
+export declare function expandGriditem(grid: GridItem[], id: string, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
+export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
+export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string): ConnectingInput;
+export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
+export declare function clearErrorByComponentId(id: string, errorByComponent: Record<string, {
+    error: string;
+    componentId: string;
+}>): {};
+export declare function clearJobsByComponentId(id: string, jobs: {
+    job: string;
+    component: string;
+}[]): {
+    job: string;
+    component: string;
+}[];
+export declare function getErrorFromLatestResult(id: string, errorByComponent: Record<string, // job id
+{
+    error: string;
+    componentId: string;
+}>, jobs: {
+    job: string;
+    component: string;
+}[]): string | undefined;
+export {};