windmill-components 1.309.7 → 1.352.0

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

@@ -1,13 +1,16 @@
-<script>import { onMount, createEventDispatcher } from 'svelte';
+<script>import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils';
+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 rowHeight = ROW_HEIGHT;
 export let cols;
-export let gap = [10, 10];
+export let gap = [ROW_GAP_X, ROW_GAP_Y];
 export let throttleUpdate = 100;
+export let maxRow;
+export let breakpoint;
 export let allIdsInPath = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
@@ -60,9 +63,15 @@ onMount(() => {
 			{@const width =
 				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
 				gapX * 2}
-			{@const height = (item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+			{@const height =
+				(item?.[breakpoint === 'sm' ? 3 : 12]?.fullHeight
+					? maxRow - item[getComputedCols].y
+					: 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
@@ -70,7 +79,7 @@ onMount(() => {
 					: ''} top: {top}px; left: {left}px;"
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} />
+					<slot dataItem={item} item={item[getComputedCols]} hidden={false} />
 				{/if}
 			</div>
 		{/each}

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

@@ -1,12 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { EditorBreakpoint } from '../types';
 import type { FilledItem } from '../svelte-grid/types';
 declare class __sveltets_Render<T> {
     props(): {
         items: FilledItem<T>[];
-        rowHeight: number;
+        rowHeight?: number | undefined;
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
+        maxRow: number;
+        breakpoint: EditorBreakpoint;
         allIdsInPath?: string[] | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
@@ -21,6 +24,7 @@ declare class __sveltets_Render<T> {
         default: {
             dataItem: FilledItem<T>;
             item: Required<import("../svelte-grid/types").ItemLayout>;
+            hidden: boolean;
         };
     };
 }

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -47,6 +47,7 @@ function setInter(inter) {
     interval = inter;
     onClick(!inter);
 }
+let refreshing = [];
 function refresh() {
     let isFirstLoad = false;
     if (!firstLoad) {
@@ -56,14 +57,27 @@ function refresh() {
     }
     loading = true;
     console.log('refresh all');
+    refreshing = [];
     const promises = Object.keys($runnableComponents)
         .flatMap((id) => {
         if (!$runnableComponents?.[id]?.autoRefresh &&
             (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
             return;
         }
-        console.log('refresh start', id);
-        return $runnableComponents?.[id]?.cb?.map((f) => f().then(() => console.log('refreshed', id)));
+        let cb = $runnableComponents?.[id]?.cb;
+        if (cb) {
+            console.log('refresh start', id);
+            refreshing.push(id);
+            return cb.map((f) => f()
+                .then(() => {
+                console.log('refreshed', id);
+                refreshing = refreshing.filter((x) => x !== id);
+            })
+                .catch((e) => {
+                console.error('refresh error', id);
+                refreshing = refreshing.filter((x) => x !== id);
+            }));
+        }
     })
         .filter(Boolean);
     Promise.all(promises).finally(() => {
@@ -113,7 +127,7 @@ let items = [
 		btnClasses="!rounded-r-none text-tertiary !text-2xs {timeout ? '!border !border-blue-500' : ''}"
 		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
 			? `every ${interval / 1000} seconds`
-			: 'once'}"
+			: 'once'} {refreshing.length > 0 ? `(live: ${refreshing.join(', ')}))` : ''}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={14} /> &nbsp;{componentNumber}
 	</Button>

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -33,12 +33,14 @@ function updateSelectedJob() {
         }
     }
 }
+let logDrawerOpen = false;
+let resultDrawerOpen = false;
 </script>
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
-{#if $runnableJobEditorPanel.focused && $selectedComponentInEditor}
-	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor]}
+{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen}
+	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor ?? '']}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="absolute z-[100] top-0 right-0 border-t h-full"
@@ -53,6 +55,7 @@ function updateSelectedJob() {
 					</div>
 				{:else}
 					<LogViewer
+						bind:drawerOpen={logDrawerOpen}
 						small
 						jobId={testJob?.id}
 						duration={testJob?.['duration_ms']}
@@ -65,12 +68,13 @@ function updateSelectedJob() {
 			</Pane>
 			<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
 				{#if frontendJob}
-					<pre class="overflow-x-auto break-words relative h-full px-2"
-						><DisplayResult result={frontendJob} /></pre
+					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
+						><DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} /></pre
 					>
 				{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<pre class="overflow-x-auto break-words relative h-full px-2"
+					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
 						><DisplayResult
+							bind:drawerOpen={resultDrawerOpen}
 							workspaceId={testJob?.workspace_id}
 							jobId={testJob?.id}
 							result={testJob.result}

package/package/components/apps/editor/SettingsPanel.svelte

@@ -5,8 +5,8 @@ import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
 import BackgroundScriptSettings from './settingsPanel/script/BackgroundScriptSettings.svelte';
-import Recompute from './settingsPanel/Recompute.svelte';
-const { selectedComponent, app, stateId } = getContext('AppViewerContext');
+import EventHandlerItem from './settingsPanel/EventHandlerItem.svelte';
+const { selectedComponent, app, stateId, runnableComponents } = getContext('AppViewerContext');
 let firstComponent = $selectedComponent?.[0];
 $: $selectedComponent?.[0] != firstComponent && (firstComponent = $selectedComponent?.[0]);
 $: hiddenInlineScript = $app?.hiddenInlineScripts
@@ -28,7 +28,9 @@ function findTableActionSettings(app, id) {
         }
         else if (x?.data?.type === 'aggridcomponent' ||
             x?.data?.type === 'aggridcomponentee' ||
-            x?.data?.type === 'dbexplorercomponent') {
+            x?.data?.type === 'dbexplorercomponent' ||
+            x?.data?.type === 'aggridinfinitecomponent' ||
+            x?.data?.type === 'aggridinfinitecomponentee') {
             if (x?.data?.actions) {
                 const tableAction = x.data.actions.find((x) => x.id === id);
                 if (tableAction) {
@@ -85,7 +87,9 @@ const dispatch = createEventDispatcher();
 					if (
 						(parent.data.type === 'aggridcomponent' ||
 							parent.data.type === 'aggridcomponentee' ||
-							parent.data.type === 'dbexplorercomponent') &&
+							parent.data.type === 'dbexplorercomponent' ||
+							parent.data.type === 'aggridinfinitecomponent' ||
+							parent.data.type === 'aggridinfinitecomponentee') &&
 						Array.isArray(parent.data.actions)
 					) {
 						parent.data.actions = parent.data.actions.filter(
@@ -138,7 +142,17 @@ const dispatch = createEventDispatcher();
 				</PanelSection>
 			</div>
 		{/if}
-		<Recompute bind:recomputeIds={hiddenInlineScript.script.recomputeIds} ownId={id} />
+		<PanelSection
+			title={`Event handlers`}
+			tooltip="Event handlers are used to trigger actions on other components when a specific event occurs. For example, you can trigger a recompute on a component when a script has successfully run."
+		>
+			<EventHandlerItem
+				title="on success"
+				tooltip="This event is triggered when the script runs successfully."
+				items={Object.keys($runnableComponents).filter((_id) => _id !== id)}
+				bind:value={hiddenInlineScript.script.recomputeIds}
+			/>
+		</PanelSection>
 		<div class="grow shrink" />
 	{/key}
 {/if}

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

@@ -4,10 +4,11 @@ import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import { expandGriditem, findGridItem, selectId } from './appUtils';
+import { expandGriditem, findGridItem, maxHeight, selectId } from './appUtils';
 import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import GridViewer from './GridViewer.svelte';
+import GridEditorMenu from './GridEditorMenu.svelte';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
 let classes = '';
@@ -44,6 +45,7 @@ function lock(dataItem) {
     $app = $app;
 }
 let container = undefined;
+$: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint);
 </script>
 
 <div
@@ -83,9 +85,8 @@ let container = undefined;
 					}}
 					selectedIds={$selectedComponent}
 					let:dataItem
-					rowHeight={36}
+					let:hidden
 					cols={columnConfiguration}
-					gap={[4, 2]}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
@@ -99,31 +100,44 @@ let container = undefined;
 							'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)
+						<GridEditorMenu id={dataItem.id}>
+							<Component
+								{hidden}
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+								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
-								}
+									if (!parentGridItem) {
+										return
+									}
 
-								$selectedComponent = [dataItem.id]
-								push(editorContext?.history, $app)
+									$selectedComponent = [dataItem.id]
+									push(editorContext?.history, $app)
 
-								expandGriditem(
-									$app.subgrids?.[subGridId] ?? [],
-									dataItem.id,
-									$breakpoint,
-									parentGridItem
-								)
-								$app = $app
-							}}
-						/>
+									expandGriditem(
+										$app.subgrids?.[subGridId] ?? [],
+										dataItem.id,
+										$breakpoint,
+										parentGridItem
+									)
+									$app = $app
+								}}
+								on:fillHeight={() => {
+									const gridItem = findGridItem($app, dataItem.id)
+									const b = $breakpoint === 'sm' ? 3 : 12
+
+									if (gridItem?.[b]) {
+										gridItem[b].fullHeight = !gridItem[b].fullHeight
+									}
+									$app = $app
+								}}
+							/>
+						</GridEditorMenu>
 					</ComponentWrapper>
 				</Grid>
 			</div>
@@ -132,11 +146,12 @@ let container = undefined;
 				allIdsInPath={$allIdsInPath}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
-				rowHeight={36}
+				let:hidden
 				cols={columnConfiguration}
-				gap={[4, 2]}
+				breakpoint={$breakpoint}
 				parentWidth={$parentWidth - 17}
 				{containerWidth}
+				{maxRow}
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
@@ -144,10 +159,12 @@ let container = undefined;
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
+						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 						render={visible}
 						component={dataItem.data}
 						selected={Boolean($selectedComponent?.includes(dataItem.id))}
 						locked={isFixed(dataItem)}
+						{hidden}
 					/>
 				</div>
 			</GridViewer>

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

@@ -3,7 +3,7 @@ import type { App, BaseAppComponent, ConnectingInput, EditorBreakpoint, FocusedG
 import { components, type AppComponent, type BaseComponent, type InitialAppComponent, type TypedComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
-import type { StaticAppInput, EvalAppInput, EvalV2AppInput, StaticAppInputOnDemand } from '../inputType';
+import type { StaticAppInput, EvalAppInput, EvalV2AppInput, StaticAppInputOnDemand, AppInputs } from '../inputType';
 import { type Writable } from 'svelte/store';
 export declare function findComponentSettings(app: App, id: string | undefined): {
     item: GridItem;
@@ -72,4 +72,9 @@ export declare function expandGriditem(grid: GridItem[], id: string, $breakpoint
 export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
 export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string, componentType?: TypedComponent['type']): ConnectingInput;
 export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
+export declare function collectOneOfFields(fields: AppInputs, app: App): Record<string, any[]>;
+export declare const ROW_HEIGHT = 36;
+export declare const ROW_GAP_Y = 2;
+export declare const ROW_GAP_X = 4;
+export declare function maxHeight(grid: GridItem[], windowHeight: number, breakpoint?: EditorBreakpoint): number;
 export {};

package/package/components/apps/editor/appUtils.js

@@ -43,7 +43,9 @@ export function dfs(grid, id, subgrids) {
         }
         else if ((item.data.type == 'aggridcomponent' ||
             item.data.type == 'aggridcomponentee' ||
-            item.data.type == 'dbexplorercomponent') &&
+            item.data.type == 'dbexplorercomponent' ||
+            item.data.type == 'aggridinfinitecomponent' ||
+            item.data.type == 'aggridinfinitecomponentee') &&
             item.data.actions?.find((x) => id == x.id)) {
             return [item.id, id];
         }
@@ -128,7 +130,9 @@ export function allsubIds(app, parentId) {
             }
             if ((item.data.type === 'aggridcomponent' ||
                 item.data.type === 'aggridcomponentee' ||
-                item.data.type === 'dbexplorercomponent') &&
+                item.data.type === 'dbexplorercomponent' ||
+                item.data.type === 'aggridinfinitecomponent' ||
+                item.data.type === 'aggridinfinitecomponentee') &&
                 Array.isArray(item.data.actions)) {
                 subIds.push(...item.data.actions?.map((x) => x.id));
             }
@@ -150,7 +154,9 @@ export function getNextGridItemId(app) {
         }
         else if ((x.data.type === 'aggridcomponent' ||
             x.data.type === 'aggridcomponentee' ||
-            x.data.type === 'dbexplorercomponent') &&
+            x.data.type === 'dbexplorercomponent' ||
+            x.data.type === 'aggridinfinitecomponent' ||
+            x.data.type === 'aggridinfinitecomponentee') &&
             Array.isArray(x.data.actions)) {
             return [x.id, ...x.data.actions.map((x) => x.id)];
         }
@@ -181,7 +187,8 @@ export function createNewGridItem(grid, id, data, columns) {
     const newComponent = {
         fixed: false,
         x: 0,
-        y: 0
+        y: 0,
+        fullHeight: false
     };
     let newData = JSON.parse(JSON.stringify(data));
     newData.id = id;
@@ -333,7 +340,9 @@ export function copyComponent(app, item, parentGrid, subgrids, alreadyVisited) {
         }
         else if (item.data.type === 'aggridcomponent' ||
             item.data.type === 'aggridcomponentee' ||
-            item.data.type === 'dbexplorercomponent') {
+            item.data.type === 'dbexplorercomponent' ||
+            item.data.type === 'aggridinfinitecomponent' ||
+            item.data.type === 'aggridinfinitecomponentee') {
             return {
                 ...item.data,
                 id,
@@ -372,7 +381,9 @@ export function getAllSubgridsAndComponentIds(app, component) {
     }
     if (component.type === 'aggridcomponent' ||
         component.type === 'aggridcomponentee' ||
-        component.type === 'dbexplorercomponent') {
+        component.type === 'dbexplorercomponent' ||
+        component.type === 'aggridinfinitecomponent' ||
+        component.type === 'aggridinfinitecomponentee') {
         components.push(...(component.actions?.map((x) => x.id) ?? []));
     }
     if (component.type === 'menucomponent') {
@@ -403,7 +414,9 @@ export function getAllGridItems(app) {
         }
         else if ((x?.data?.type === 'aggridcomponent' ||
             x?.data?.type === 'aggridcomponentee' ||
-            x?.data?.type === 'dbexplorercomponent') &&
+            x?.data?.type === 'dbexplorercomponent' ||
+            x?.data?.type === 'aggridinfinitecomponent' ||
+            x?.data?.type === 'aggridinfinitecomponentee') &&
             Array.isArray(x?.data?.actions)) {
             return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))];
         }
@@ -629,3 +642,68 @@ export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
     });
     return filteredJSON;
 }
+export function collectOneOfFields(fields, app) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'evalv2')
+        .map(([k, v]) => {
+        let field = v;
+        if (!field.connections || field.connections.length !== 1) {
+            return [k, undefined];
+        }
+        const c = field.connections[0];
+        const gridItem = findGridItem(app, c.componentId);
+        if (field.expr !== c.componentId + '.' + c.id) {
+            return [k, undefined];
+        }
+        if (gridItem) {
+            const c = gridItem.data;
+            if (c) {
+                if (c.type === 'resourceselectcomponent' ||
+                    c.type === 'selectcomponent' ||
+                    c.type === 'multiselectcomponent' ||
+                    c.type === 'multiselectcomponentv2') {
+                    if ((c.type === 'selectcomponent' ||
+                        c.type === 'multiselectcomponent' ||
+                        c.type === 'multiselectcomponentv2') &&
+                        c.configuration?.create?.type === 'static' &&
+                        c.configuration?.create?.value === true) {
+                        return [k, undefined];
+                    }
+                    if (c.configuration?.items?.type === 'static') {
+                        const items = c.configuration.items.value;
+                        if (items && Array.isArray(items)) {
+                            if (c.type === 'multiselectcomponent' || c.type === 'multiselectcomponentv2') {
+                                return [k, items];
+                            }
+                            else {
+                                const options = items
+                                    .filter((item) => item && typeof item === 'object' && 'value' in item && item.value)
+                                    .map((item) => item.value);
+                                return [k, options];
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return [k, undefined];
+    })
+        .filter(([k, v]) => v !== undefined));
+}
+export const ROW_HEIGHT = 36;
+export const ROW_GAP_Y = 2;
+export const ROW_GAP_X = 4;
+export function maxHeight(grid, windowHeight, breakpoint = 'lg') {
+    const totalRowHeight = ROW_HEIGHT + ROW_GAP_Y;
+    let maxRows = Math.floor((windowHeight - ROW_GAP_Y) / totalRowHeight);
+    if (!grid.length) {
+        return maxRows;
+    }
+    const breakpointKey = breakpoint === 'sm' ? 3 : 12;
+    const maxRowPerGrid = grid.reduce((max, item) => {
+        const y = item[breakpointKey].y;
+        const h = item[breakpointKey].h;
+        return Math.max(max, y + h);
+    }, 0);
+    return Math.max(maxRowPerGrid, maxRows);
+}