windmill-components 1.60.4 → 1.83.1

package/components/apps/editor/appUtils.js

@@ -0,0 +1,437 @@
+import { getNextId } from '../../flows/flowStateUtils';
+import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
+import { gridColumns } from '../gridUtils';
+import { allItems } from '../utils';
+import gridHelp from '../svelte-grid/utils/helper';
+export function dfs(grid, id, subgrids) {
+    for (const item of grid) {
+        if (item.id === id) {
+            return [id];
+        }
+        else if (item.data.type == 'tablecomponent' && item.data.actionButtons.find((x) => x.id)) {
+            return [item.id, id];
+        }
+        else {
+            for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
+                const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
+                if (res) {
+                    return [item.id, ...res];
+                }
+            }
+        }
+    }
+    return undefined;
+}
+function findGridItemById(root, subGrids, id) {
+    for (const gridItem of allItems(root, subGrids)) {
+        if (gridItem.id === id) {
+            return gridItem;
+        }
+    }
+    return undefined;
+}
+export function findGridItemParentGrid(app, id) {
+    const gridItem = app.grid.find((x) => x.id === id);
+    if (gridItem || app.subgrids === undefined) {
+        return undefined;
+    }
+    else {
+        for (const key of Object.keys(app.subgrids ?? {})) {
+            const subGrid = app.subgrids[key];
+            const gridItemIdx = subGrid.findIndex((x) => x.id === id);
+            if (gridItemIdx > -1) {
+                return key;
+            }
+        }
+    }
+}
+export function allsubIds(app, parentId) {
+    let item = findGridItem(app, parentId);
+    if (!item?.data.numberOfSubgrids) {
+        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];
+}
+export function findGridItem(app, id) {
+    return findGridItemById(app.grid, app.subgrids, id);
+}
+export function getNextGridItemId(app) {
+    const subgridsKeys = allItems(app.grid, app.subgrids).map((x) => x.id);
+    const withoutDash = subgridsKeys.map((element) => element.split('-')[0]);
+    const id = getNextId([...new Set(withoutDash)]);
+    return id;
+}
+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 = {
+        fixed: false,
+        x: 0,
+        y: 0
+    };
+    let newData = JSON.parse(JSON.stringify(data));
+    newData.id = id;
+    const newItem = {
+        data: newData,
+        id: id
+    };
+    gridColumns.forEach((column) => {
+        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 };
+    });
+    return newItem;
+}
+export function getGridItems(app, focusedGrid) {
+    if (!focusedGrid) {
+        return app.grid;
+    }
+    else {
+        const { parentComponentId, subGridIndex } = focusedGrid;
+        const key = `${parentComponentId}-${subGridIndex ?? 0}`;
+        return app?.subgrids?.[key] ?? [];
+    }
+}
+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 = {};
+    }
+    // We only want to set subgrids when we are not moving
+    if (!keepId) {
+        for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+            app.subgrids[`${id}-${i}`] = [];
+        }
+    }
+    const key = focusedGrid
+        ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}`
+        : undefined;
+    let grid = focusedGrid ? app.subgrids[key] : app.grid;
+    const newItem = createNewGridItem(grid, id, data, columns);
+    grid.push(newItem);
+    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}`;
+            const subgrid = app.subgrids[key];
+            if (subgrid) {
+                subgrids.push(key);
+                for (const item of subgrid) {
+                    let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data);
+                    subgrids.push(...recSubgrids);
+                    components.push(...recComponents);
+                }
+            }
+        }
+    }
+    return [subgrids, components];
+}
+export function deleteGridItem(app, component, parent, shouldKeepSubGrid) {
+    let [subgrids, components] = getAllSubgridsAndComponentIds(app, component);
+    if (app.subgrids && !shouldKeepSubGrid) {
+        subgrids.forEach((id) => {
+            delete app.subgrids[id];
+        });
+    }
+    if (parent) {
+        app.subgrids &&
+            (app.subgrids[parent] = app.subgrids[parent].filter((item) => item.id !== component?.id));
+    }
+    else {
+        app.grid = app.grid.filter((item) => item.id !== component?.id);
+    }
+    return components;
+}
+export function findAvailableSpace(grid, gridItem, editorBreakpoint, parentGridItem = undefined) {
+    if (gridItem) {
+        const breakpoint = editorBreakpoint === 'sm' ? 3 : 12;
+        const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 16;
+        const maxWidth = 12;
+        const availableSpace = {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0
+        };
+        const items = grid.map((item) => {
+            return {
+                id: item.id,
+                x: item[breakpoint].x,
+                y: item[breakpoint].y,
+                w: item[breakpoint].w,
+                h: item[breakpoint].h
+            };
+        });
+        const item = items.find((item) => item.id === gridItem.id);
+        if (!item) {
+            return availableSpace;
+        }
+        if (item.x > 0) {
+            for (let x = item.x - 1; x >= 0; x--) {
+                const itemToCheck = { ...item, x, w: 1 };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.left++;
+                }
+            }
+        }
+        if (item.x + item.w < maxWidth) {
+            for (let x = item.x + item.w; x < maxWidth; x++) {
+                const itemToCheck = { ...item, x, w: 1 };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.right++;
+                }
+            }
+        }
+        if (item.y > 0) {
+            for (let y = item.y - 1; y >= 0; y--) {
+                const itemToCheck = { ...item, h: 1, y };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.top++;
+                }
+            }
+        }
+        if (item.y + item.h < maxHeight) {
+            for (let y = item.y + item.h; y < maxHeight; y++) {
+                const itemToCheck = { ...item, h: 1, y };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.bottom++;
+                }
+            }
+        }
+        return availableSpace;
+    }
+}
+function isOverlapping(item1, item2) {
+    return (item1.x < item2.x + item2.w &&
+        item1.x + item1.w > item2.x &&
+        item1.y < item2.y + item2.h &&
+        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 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;
+    }
+    const { left, right, top, bottom } = availableSpace;
+    const width = $breakpoint === 'sm' ? 3 : 12;
+    const item = gridComponent[width];
+    item.x = item.x - left;
+    item.y = item.y - top;
+    item.w = item.w + left + right;
+    item.h = item.h + top + bottom;
+}
+export function sortGridItemsPosition(gridItems, width) {
+    return gridItems.sort((a, b) => {
+        const aX = a[width].x;
+        const aY = a[width].y;
+        const bX = b[width].x;
+        const bY = b[width].y;
+        if (aY < bY) {
+            return -1;
+        }
+        else if (aY > bY) {
+            return 1;
+        }
+        else {
+            if (aX < bX) {
+                return -1;
+            }
+            else if (aX > bX) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        }
+    });
+}
+export function connectInput(connectingInput, componentId, path) {
+    if (connectingInput) {
+        connectingInput = {
+            opened: false,
+            input: {
+                connection: {
+                    componentId,
+                    path
+                },
+                type: 'connected'
+            },
+            hoveredComponent: undefined
+        };
+    }
+    return connectingInput;
+}
+export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
+    if (!search || search == '') {
+        return json;
+    }
+    let filteredJSON = {};
+    Object.keys(json).forEach((key) => {
+        if (key.toLowerCase().includes(search.toLowerCase()) ||
+            extraSearch?.toLowerCase().includes(search.toLowerCase()) ||
+            (typeof json[key] === 'string' && json[key].toLowerCase().includes(search.toLowerCase())) ||
+            (typeof json[key] === 'number' &&
+                json[key].toString().toLowerCase().includes(search.toLowerCase()))) {
+            filteredJSON[key] = json[key];
+        }
+        else if (typeof json[key] === 'object') {
+            const res = recursivelyFilterKeyInJSON(json[key], search, extraSearch);
+            if (Object.keys(res).length !== 0) {
+                filteredJSON[key] = res;
+            }
+        }
+    });
+    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;
+    }
+}