windmill-components 1.78.0 → 1.82.0

package/components/apps/editor/appUtils.js

@@ -1,5 +1,5 @@
 import { getNextId } from '../../flows/flowStateUtils';
-import { getRecommendedDimensionsByComponent } from './component';
+import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
@@ -13,14 +13,14 @@ function findGridItemById(root, subGrids, id) {
 }
 export function findGridItemParentGrid(app, id) {
     const gridItem = app.grid.find((x) => x.id === id);
-    if (gridItem) {
+    if (gridItem || app.subgrids === undefined) {
         return undefined;
     }
     else {
-        for (const key in app.subgrids) {
+        for (const key of Object.keys(app.subgrids ?? {})) {
             const subGrid = app.subgrids[key];
-            const gridItem = subGrid.find((x) => x.id === id);
-            if (gridItem) {
+            const gridItemIdx = subGrid.findIndex((x) => x.id === id);
+            if (gridItemIdx > -1) {
                 return key;
             }
         }
@@ -29,7 +29,13 @@ export function findGridItemParentGrid(app, id) {
 export function allsubIds(app, parentId) {
     let item = findGridItem(app, parentId);
     if (!item?.data.numberOfSubgrids) {
-        return [parentId];
+        let subIds = [parentId];
+        if (item) {
+            if (item.data.type === 'tablecomponent') {
+                subIds.push(...item.data.actionButtons?.map((x) => x.id));
+            }
+        }
+        return subIds;
     }
     return getAllSubgridsAndComponentIds(app, item?.data)[1];
 }
@@ -42,10 +48,23 @@ export function getNextGridItemId(app) {
     const id = getNextId([...new Set(withoutDash)]);
     return id;
 }
-export function createNewGridItem(grid, id, data) {
+export function getAllRecomputeIdsForComponent(app, id) {
+    if (!app || !id)
+        return [];
+    const items = allItems(app.grid, app.subgrids);
+    const recomputedBy = [];
+    items.forEach((item) => {
+        if (item.data.type === 'buttoncomponent') {
+            if (item.data.recomputeIds?.includes(id)) {
+                recomputedBy.push(item.id);
+            }
+        }
+    });
+    return recomputedBy;
+}
+export function createNewGridItem(grid, id, data, columns) {
     const newComponent = {
-        resizable: true,
-        draggable: true,
+        fixed: false,
         x: 0,
         y: 0
     };
@@ -56,17 +75,17 @@ export function createNewGridItem(grid, id, data) {
         id: id
     };
     gridColumns.forEach((column) => {
-        const rec = getRecommendedDimensionsByComponent(newData.type, column);
-        newItem[column] = {
-            ...newComponent,
-            min: { w: 1, h: 1 },
-            max: { w: column, h: 100 },
-            w: rec.w,
-            h: rec.h,
-            customDragger: false,
-            customResizer: false,
-            fixed: false
-        };
+        if (!columns) {
+            const rec = getRecommendedDimensionsByComponent(newData.type, column);
+            newItem[column] = {
+                ...newComponent,
+                w: rec.w,
+                h: rec.h
+            };
+        }
+        else {
+            newItem[column] = columns[column];
+        }
         const position = gridHelp.findSpace(newItem, grid, column);
         newItem[column] = { ...newItem[column], ...position };
     });
@@ -82,8 +101,57 @@ export function getGridItems(app, focusedGrid) {
         return app?.subgrids?.[key] ?? [];
     }
 }
-export function insertNewGridItem(app, data, focusedGrid, keepId) {
-    const id = keepId ? data.id : getNextGridItemId(app);
+function cleanseValue(key, value) {
+    if (!value) {
+        return [key, undefined];
+    }
+    if (value.type === 'static') {
+        return [key, { type: value.type, value: value.value }];
+    }
+    else {
+        return [key, { type: value.type, expr: value.expr }];
+    }
+}
+export function appComponentFromType(type) {
+    return (id) => {
+        const init = JSON.parse(JSON.stringify(ccomponents[type].initialData));
+        return {
+            type,
+            //TODO remove tooltip and onlyStatic from there
+            configuration: Object.fromEntries(Object.entries(init.configuration).map(([key, value]) => {
+                if (value.type != 'oneOf') {
+                    return cleanseValue(key, value);
+                }
+                else {
+                    return [
+                        key,
+                        {
+                            type: value.type,
+                            selected: value.selected,
+                            configuration: Object.fromEntries(Object.entries(value.configuration).map(([key, val]) => [
+                                key,
+                                Object.fromEntries(Object.entries(val).map(([key, val]) => cleanseValue(key, val)))
+                            ]))
+                        }
+                    ];
+                }
+            })),
+            componentInput: init.componentInput,
+            panes: init.panes,
+            tabs: init.tabs,
+            customCss: {},
+            recomputeIds: init.recomputeIds ? [] : undefined,
+            actionButtons: init.actionButtons ? [] : undefined,
+            numberOfSubgrids: init.numberOfSubgrids,
+            horizontalAlignment: init.horizontalAlignment,
+            verticalAlignment: init.verticalAlignment,
+            id
+        };
+    };
+}
+export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId) {
+    const id = keepId ?? getNextGridItemId(app);
+    const data = builddata(id);
     if (!app.subgrids) {
         app.subgrids = {};
     }
@@ -97,16 +165,16 @@ export function insertNewGridItem(app, data, focusedGrid, keepId) {
         ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}`
         : undefined;
     let grid = focusedGrid ? app.subgrids[key] : app.grid;
-    const newItem = createNewGridItem(grid, id, data);
+    const newItem = createNewGridItem(grid, id, data, columns);
     grid.push(newItem);
-    if (focusedGrid) {
-        app.subgrids[key] = grid;
-    }
     return id;
 }
 export function getAllSubgridsAndComponentIds(app, component) {
     const subgrids = [];
     let components = [component.id];
+    if (component.type === 'tablecomponent') {
+        components.push(...component.actionButtons?.map((x) => x.id));
+    }
     if (app.subgrids && component.numberOfSubgrids) {
         for (let i = 0; i < component.numberOfSubgrids; i++) {
             const key = `${component.id}-${i}`;
@@ -130,18 +198,12 @@ export function deleteGridItem(app, component, parent, shouldKeepSubGrid) {
             delete app.subgrids[id];
         });
     }
-    if (!parent) {
-        let index = app.grid.findIndex((x) => x.id == component.id);
-        if (index > -1) {
-            app.grid.splice(index, 1);
-        }
+    if (parent) {
+        app.subgrids &&
+            (app.subgrids[parent] = app.subgrids[parent].filter((item) => item.id !== component?.id));
     }
     else {
-        let grid = app.subgrids[parent];
-        let index = grid.findIndex((x) => x.id == component.id);
-        if (index > -1) {
-            grid.splice(index, 1);
-        }
+        app.grid = app.grid.filter((item) => item.id !== component?.id);
     }
     return components;
 }
@@ -227,12 +289,36 @@ function isOverlapping(item1, item2) {
         item1.y + item1.h > item2.y);
 }
 export function initOutput(world, id, init) {
+    world.initializedOutputs += 1;
     if (!world) {
         return {};
     }
     return Object.fromEntries(Object.entries(init).map(([key, value]) => [key, world.newOutput(id, key, value)]));
 }
-export function expandGriditem(grid, gridComponent, $breakpoint, parentGridItem = undefined) {
+export function initConfig(r, configuration) {
+    return JSON.parse(JSON.stringify(Object.fromEntries(Object.entries(r).map(([key, value]) => value.type == 'static'
+        ? [
+            key,
+            configuration?.[key]?.type == 'static' ? configuration?.[key]?.['value'] : undefined
+        ]
+        : value.type == 'oneOf'
+            ? [
+                key,
+                {
+                    selected: value.selected,
+                    type: 'oneOf',
+                    configuration: Object.fromEntries(Object.entries(value.configuration).map(([choice, config]) => [
+                        choice,
+                        initConfig(config, configuration?.[key]?.configuration?.[choice])
+                    ]))
+                }
+            ]
+            : [key, undefined]))));
+}
+export function expandGriditem(grid, id, $breakpoint, parentGridItem = undefined) {
+    const gridComponent = grid.find((item) => item.id === id);
+    if (!gridComponent)
+        return;
     const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem);
     if (!availableSpace) {
         return;
@@ -308,3 +394,25 @@ export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
     });
     return filteredJSON;
 }
+export function clearErrorByComponentId(id, errorByComponent) {
+    return Object.entries(errorByComponent).reduce((acc, [key, value]) => {
+        if (value.componentId !== id) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+export function clearJobsByComponentId(id, jobs) {
+    return jobs.filter((job) => job.component !== id);
+}
+// Returns the error message for the latest job for a component if an error occurred, otherwise undefined
+export function getErrorFromLatestResult(id, errorByComponent, jobs) {
+    // find last jobId for component id
+    const lastJob = jobs.find((job) => job.component === id);
+    if (lastJob?.job && errorByComponent[lastJob.job]) {
+        return errorByComponent[lastJob.job].error;
+    }
+    else {
+        return undefined;
+    }
+}

package/components/apps/editor/component/Component.svelte

@@ -2,30 +2,40 @@
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
+import { ccomponents, components } from './components';
 import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
 export let component;
 export let selected;
 export let locked = false;
-export let pointerdown = false;
 export let render;
-const { mode, connectingInput, app, errorByComponent } = getContext('AppViewerContext');
-let hover = false;
+const { mode, app, errorByComponent, hoverStore } = getContext('AppViewerContext');
+const editorContext = getContext('AppEditorContext');
+const movingcomponent = editorContext?.movingcomponent;
+$: ismoving = movingcomponent != undefined && $mode == 'dnd' && $movingcomponent === component.id;
 let initializing = undefined;
 let componentContainerHeight = 0;
 $: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
 $: hasError = componentWithErrors.includes(component.id);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-	on:pointerenter={() => (hover = true)}
-	on:pointerleave={() => (hover = false)}
+	on:mouseover|stopPropagation={() => {
+		if (component.id !== $hoverStore) {
+			$hoverStore = component.id
+		}
+	}}
+	on:mouseout|stopPropagation={() => {
+		if ($hoverStore !== undefined) {
+			$hoverStore = undefined
+		}
+	}}
 	class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}"
 >
 	{#if $mode !== 'preview'}
 		<ComponentHeader
-			{hover}
-			{pointerdown}
+			hover={$hoverStore === component.id}
 			{component}
 			{selected}
 			on:delete
@@ -35,16 +45,26 @@ $: hasError = componentWithErrors.includes(component.id);
 		/>
 	{/if}
 
+	{#if ismoving}
+		<div class="absolute -top-8 w-40 ">
+			<button
+				class="border p-0.5 text-xs"
+				on:click={() => {
+					$movingcomponent = undefined
+				}}>Cancel move</button
+			>
+		</div>
+	{/if}
 	<div
 		class={twMerge(
-			'h-full bg-white/40',
-			selected && $mode !== 'preview' ? 'border border-blue-500' : '',
-			!selected && $mode !== 'preview' ? 'border-gray-100' : '',
-			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
-			component.softWrap || hasError ? '' : 'overflow-auto',
+			'h-full bg-white/40 outline-1',
+			$hoverStore === component.id && $mode !== 'preview' ? 'outline outline-blue-600' : '',
+			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
+			ccomponents[component.type].softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
-			$app.css?.['app']?.['component']?.class
+			$app.css?.['app']?.['component']?.class,
+			ismoving ? 'animate-pulse' : ''
 		)}
 		style={$app.css?.['app']?.['component']?.style}
 		bind:clientHeight={componentContainerHeight}
@@ -264,6 +284,7 @@ $: hasError = componentWithErrors.includes(component.id);
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				bind:initializing
 				{render}
 			/>
 		{:else if component.type === 'horizontaldividercomponent'}
@@ -293,8 +314,9 @@ $: hasError = componentWithErrors.includes(component.id);
 				id={component.id}
 				customCss={component.customCss}
 				{render}
+				bind:initializing
 			/>
-		{:else if component.type === 'tabscomponent'}
+		{:else if component.type === 'tabscomponent' && component.tabs}
 			<AppTabs
 				configuration={component.configuration}
 				id={component.id}
@@ -302,11 +324,9 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				{componentContainerHeight}
 				{render}
-				bind:initializing
 			/>
 		{:else if component.type === 'containercomponent'}
 			<AppContainer
-				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
 				{componentContainerHeight}
@@ -314,7 +334,6 @@ $: hasError = componentWithErrors.includes(component.id);
 			/>
 		{:else if component.type === 'verticalsplitpanescomponent'}
 			<AppSplitpanes
-				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
 				panes={component.panes}
@@ -323,7 +342,6 @@ $: hasError = componentWithErrors.includes(component.id);
 			/>
 		{:else if component.type === 'horizontalsplitpanescomponent'}
 			<AppSplitpanes
-				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
 				panes={component.panes}
@@ -381,8 +399,5 @@ $: hasError = componentWithErrors.includes(component.id);
 	</div>
 </div>
 {#if initializing}
-	<div 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 class="absolute inset-0 center-center flex-col bg- border animate-skeleton" />
 {/if}

package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './components';
+import { type AppComponent } from './components';
 declare const __propDef: {
     props: {
         component: AppComponent;
         selected: boolean;
         locked?: boolean | undefined;
-        pointerdown?: boolean | undefined;
         render: boolean;
     };
     events: {

package/components/apps/editor/component/ComponentNavigation.svelte

@@ -2,8 +2,9 @@
 import { findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
 import { push } from '../../../../history';
 import { sendUserToast } from '../../../../utils';
+import { gridColumns } from '../../gridUtils';
 const { app, selectedComponent, worldStore, focusedGrid, componentControl } = getContext('AppViewerContext');
-const { history } = getContext('AppEditorContext');
+const { history, movingcomponent } = getContext('AppEditorContext');
 let tempGridItem = undefined;
 let copiedGridItem = undefined;
 function getSortedGridItemsOfChildren() {
@@ -29,13 +30,23 @@ function left(event) {
         const sortedGridItems = getGridItems();
         const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
         if (currentIndex !== -1 && currentIndex > 0) {
-            $selectedComponent = sortedGridItems[currentIndex - 1].id;
+            const left = sortedGridItems[currentIndex - 1];
+            if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
+                $selectedComponent = left.data.actionButtons[left.data.actionButtons.length - 1].id;
+            }
+            else {
+                $selectedComponent = left.id;
+            }
         }
     }
     event.preventDefault();
 }
 function right(event) {
     let r = $componentControl[$selectedComponent]?.right?.();
+    if (typeof r === 'string') {
+        $selectedComponent = r;
+        r = $componentControl[r]?.right?.(true);
+    }
     if (!r) {
         const sortedGridItems = getGridItems();
         const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
@@ -90,6 +101,7 @@ function handleCut(event) {
     if (!$selectedComponent) {
         return;
     }
+    $movingcomponent = $selectedComponent;
     push(history, $app);
     const gridItem = findGridItem($app, $selectedComponent);
     copiedGridItem = gridItem;
@@ -101,26 +113,30 @@ function handleCut(event) {
 }
 function handlePaste(event) {
     push(history, $app);
-    if (tempGridItem) {
+    $movingcomponent = undefined;
+    if (tempGridItem != undefined) {
         if ($focusedGrid &&
             getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
             sendUserToast('Cannot paste a component into itself', true);
             return;
         }
-        let parentGrid = findGridItemParentGrid($app, tempGridItem.data.id);
-        const grid = parentGrid ? $app.subgrids[parentGrid] : $app.grid;
-        let idx = grid.findIndex((item) => {
-            return item.id == tempGridItem.data.id;
-        });
-        if (idx > -1) {
-            grid.splice(idx, 1);
+        let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
+        if (parentGrid) {
+            $app.subgrids &&
+                ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
+        }
+        else {
+            $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
         }
-        insertNewGridItem($app, tempGridItem.data, $focusedGrid, true);
+        const gridItem = tempGridItem;
+        insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
         copiedGridItem = tempGridItem;
+        $selectedComponent = tempGridItem.id;
         tempGridItem = undefined;
     }
     else if (copiedGridItem) {
-        insertNewGridItem($app, copiedGridItem.data, $focusedGrid, false);
+        const gridItem = copiedGridItem;
+        $selectedComponent = insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])));
     }
     $worldStore = $worldStore;
     $app = $app;