windmill-components 1.60.4 → 1.83.1

package/components/apps/svelte-grid/utils/helper.js

@@ -0,0 +1,29 @@
+import { makeMatrixFromItems } from './matrix';
+import { findFreeSpaceForItem, normalize, adjust } from './item';
+import { getRowsCount } from './other';
+function makeItem(item) {
+    const { min = { w: 1, h: 1 }, max } = item;
+    return {
+        fixed: false,
+        min: {
+            w: Math.max(1, min.w),
+            h: Math.max(1, min.h)
+        },
+        max: { ...max },
+        ...item
+    };
+}
+const gridHelp = {
+    adjust(items, col) {
+        return adjust(items, col);
+    },
+    item(obj) {
+        return makeItem(obj);
+    },
+    findSpace(item, items, cols) {
+        let matrix = makeMatrixFromItems(items, getRowsCount(items, cols), cols);
+        let position = findFreeSpaceForItem(matrix, item[cols]);
+        return position;
+    }
+};
+export default gridHelp;

package/components/apps/svelte-grid/utils/item.d.ts

@@ -0,0 +1,14 @@
+import type { FilledItem, ItemLayout } from '../types';
+export declare function getItemById(id: any, items: any): any;
+export declare function isEmpty(matrix: any[][], x: number, y: number, w: number, h: number): boolean;
+export declare function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item: ItemLayout): {
+    x: number;
+    y: number;
+};
+export declare function moveItemsAroundItem(active: any, items: any, cols: any, original: any): any;
+export declare function moveItem(active: any, items: any, cols: any, original: any): any;
+export declare function normalize(items: any, col: any): any;
+export declare function adjust<T>(items: FilledItem<T>[], col: any): FilledItem<T>[];
+export declare function getUndefinedItems(items: any, col: any, breakpoints: any): any;
+export declare function getClosestColumn(items: any, item: any, col: any, breakpoints: any): any;
+export declare function specifyUndefinedColumns(items: any, col: any, breakpoints: any): any[];

package/components/apps/svelte-grid/utils/item.js

@@ -0,0 +1,192 @@
+import { makeMatrix, makeMatrixFromItemsIgnore, findCloseBlocks, findItemsById, makeMatrixFromItems } from './matrix';
+import { getRowsCount } from './other';
+export function getItemById(id, items) {
+    return items.find((value) => value.id === id);
+}
+export function isEmpty(matrix, x, y, w, h) {
+    for (var i = 0; i < h; i++) {
+        if (matrix[y + i]) {
+            for (var j = 0; j < w; j++) {
+                if (matrix[y + i][x + j] != undefined) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+function distance(a, b) {
+    return Math.abs(a.x - b.x + 0.25) + Math.abs(a.y - b.y + 0.25);
+}
+export function findFreeSpaceForItem(matrix, item) {
+    const cols = matrix[0].length;
+    const w = Math.min(cols, item.w);
+    const h = item.h;
+    let xNtime = cols - w;
+    let getMatrixRows = matrix.length;
+    const range = Array.from({ length: getMatrixRows }, (_, y) => Array.from({ length: xNtime }, (_, x) => ({ x, y })))
+        .flat(1)
+        .sort((a, b) => {
+        let dst1 = distance(a, item);
+        let dst2 = distance(b, item);
+        if (dst1 > dst2) {
+            return 1;
+        }
+        else if (dst1 < dst2) {
+            return -1;
+        }
+        else {
+            return 0;
+        }
+    });
+    for (const { x, y } of range.values()) {
+        if (isEmpty(matrix, x, y, w, h)) {
+            return { x, y };
+        }
+    }
+    return {
+        y: getMatrixRows,
+        x: 0
+    };
+}
+const getItem = (item, col) => {
+    return { ...item[col], id: item.id };
+};
+const updateItem = (elements, active, position, col) => {
+    return elements.map((value) => {
+        if (value.id === active.id) {
+            return { ...value, [col]: { ...value[col], ...position } };
+        }
+        return value;
+    });
+};
+export function moveItemsAroundItem(active, items, cols, original) {
+    // Get current item from the breakpoint
+    const activeItem = getItem(active, cols);
+    const ids = items.map((value) => value.id).filter((value) => value !== activeItem.id);
+    const els = items.filter((value) => value.id !== activeItem.id);
+    // Update items
+    let newItems = updateItem(items, active, activeItem, cols);
+    let matrix = makeMatrixFromItemsIgnore(newItems, ids, getRowsCount(newItems, cols), cols);
+    let tempItems = newItems;
+    // Exclude resolved elements ids in array
+    let exclude = [];
+    els.forEach((item) => {
+        // Find position for element
+        let position = findFreeSpaceForItem(matrix, item[cols]);
+        // Exclude item
+        exclude.push(item.id);
+        tempItems = updateItem(tempItems, item, position, cols);
+        // Recreate ids of elements
+        let getIgnoreItems = ids.filter((value) => exclude.indexOf(value) === -1);
+        // Update matrix for next iteration
+        matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
+    });
+    // Return result
+    return tempItems;
+}
+export function moveItem(active, items, cols, original) {
+    // Get current item from the breakpoint
+    const item = getItem(active, cols);
+    // Create matrix from the items expect the active
+    let matrix = makeMatrixFromItemsIgnore(items, [item.id], getRowsCount(items, cols), cols);
+    // Getting the ids of items under active Array<String>
+    const closeBlocks = findCloseBlocks(matrix, item);
+    // Getting the objects of items under active Array<Object>
+    let closeObj = findItemsById(closeBlocks, items);
+    // Getting whenever of these items is fixed
+    const fixed = closeObj.find((value) => value[cols].fixed);
+    // If found fixed, reset the active to its original position
+    if (fixed)
+        return items;
+    // Update items
+    items = updateItem(items, active, item, cols);
+    // Create matrix of items expect close elements
+    matrix = makeMatrixFromItemsIgnore(items, closeBlocks, getRowsCount(items, cols), cols);
+    // Create temp vars
+    let tempItems = items;
+    let tempCloseBlocks = closeBlocks;
+    // Exclude resolved elements ids in array
+    let exclude = [];
+    // Iterate over close elements under active item
+    closeObj.forEach((item) => {
+        // Find position for element
+        let position = findFreeSpaceForItem(matrix, item[cols]);
+        // Exclude item
+        exclude.push(item.id);
+        // Assign the position to the element in the column
+        tempItems = updateItem(tempItems, item, position, cols);
+        // Recreate ids of elements
+        let getIgnoreItems = tempCloseBlocks.filter((value) => exclude.indexOf(value) === -1);
+        // Update matrix for next iteration
+        matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
+    });
+    // Return result
+    return tempItems;
+}
+// Helper function
+export function normalize(items, col) {
+    let result = items.slice();
+    result.forEach((value) => {
+        const getItem = value[col];
+        if (!getItem.static) {
+            result = moveItem(getItem, result, col, { ...getItem });
+        }
+    });
+    return result;
+}
+// Helper function
+export function adjust(items, col) {
+    let matrix = makeMatrix(getRowsCount(items, col), col);
+    let res = [];
+    items.forEach((item) => {
+        let position = findFreeSpaceForItem(matrix, item[col]);
+        res.push({
+            ...item,
+            [col]: {
+                ...item[col],
+                ...position
+            }
+        });
+        matrix = makeMatrixFromItems(res, getRowsCount(res, col), col);
+    });
+    return res;
+}
+export function getUndefinedItems(items, col, breakpoints) {
+    return items
+        .map((value) => {
+        if (!value[col]) {
+            return value.id;
+        }
+    })
+        .filter(Boolean);
+}
+export function getClosestColumn(items, item, col, breakpoints) {
+    return breakpoints
+        .map(([_, column]) => item[column] && column)
+        .filter(Boolean)
+        .reduce(function (acc, value) {
+        const isLower = Math.abs(value - col) < Math.abs(acc - col);
+        return isLower ? value : acc;
+    });
+}
+export function specifyUndefinedColumns(items, col, breakpoints) {
+    let matrix = makeMatrixFromItems(items, getRowsCount(items, col), col);
+    const getUndefinedElements = getUndefinedItems(items, col, breakpoints);
+    let newItems = [...items];
+    getUndefinedElements.forEach((elementId) => {
+        const getElement = items.find((item) => item.id === elementId);
+        const closestColumn = getClosestColumn(items, getElement, col, breakpoints);
+        const position = findFreeSpaceForItem(matrix, getElement[closestColumn]);
+        const newItem = {
+            ...getElement,
+            [col]: {
+                ...getElement[closestColumn],
+                ...position
+            }
+        };
+        newItems = newItems.map((value) => (value.id === elementId ? newItem : value));
+        matrix = makeMatrixFromItems(newItems, getRowsCount(newItems, col), col);
+    });
+    return newItems;
+}

package/components/apps/svelte-grid/utils/matrix.d.ts

@@ -0,0 +1,6 @@
+import type { FilledItem } from "../types";
+export declare const makeMatrix: (w: number, h: number) => any[][];
+export declare function makeMatrixFromItems<T>(items: FilledItem<T>[], row: number, col: number): FilledItem<T>[][];
+export declare function findCloseBlocks<T>(matrix: FilledItem<T>[][], curObject: any): string[];
+export declare function makeMatrixFromItemsIgnore(items: any, ignoreList: any, _row: any, _col: any): any[][];
+export declare function findItemsById<T>(closeBlocks: string[], items: FilledItem<T>[]): FilledItem<T>[];

package/components/apps/svelte-grid/utils/matrix.js

@@ -0,0 +1,53 @@
+export const makeMatrix = (rows, cols) => Array.from(Array(rows), () => new Array(cols)); // make 2d array
+export function makeMatrixFromItems(items, row, col) {
+    let matrix = makeMatrix(row, col);
+    for (var i = 0; i < items.length; i++) {
+        const value = items[i][col];
+        if (value) {
+            const { x, y, h } = value;
+            const id = items[i].id;
+            const w = Math.min(col, value.w);
+            for (var j = y; j < y + h; j++) {
+                const row = matrix[j];
+                for (var k = x; k < x + w; k++) {
+                    row[k] = { ...value, id };
+                }
+            }
+        }
+    }
+    return matrix;
+}
+export function findCloseBlocks(matrix, curObject) {
+    const { h, x, y } = curObject;
+    const w = Math.min(matrix[0].length, curObject.w);
+    const tempR = matrix.slice(y, y + h);
+    let result = [];
+    for (var i = 0; i < tempR.length; i++) {
+        let tempA = tempR[i].slice(x, x + w);
+        result = [...result, ...tempA.map((val) => val?.id).filter((id) => id !== undefined && id !== curObject.id)];
+    }
+    return [...new Set(result)];
+}
+export function makeMatrixFromItemsIgnore(items, ignoreList, _row, _col) {
+    let matrix = makeMatrix(_row, _col);
+    for (var i = 0; i < items.length; i++) {
+        const value = items[i][_col];
+        const id = items[i].id;
+        const { x, y, h } = value;
+        const w = Math.min(_col, value.w);
+        if (ignoreList.indexOf(id) === -1) {
+            for (var j = y; j < y + h; j++) {
+                const row = matrix[j];
+                if (row) {
+                    for (var k = x; k < x + w; k++) {
+                        row[k] = { ...value, id };
+                    }
+                }
+            }
+        }
+    }
+    return matrix;
+}
+export function findItemsById(closeBlocks, items) {
+    return items.filter((value) => closeBlocks.indexOf(value.id) !== -1);
+}

package/components/apps/svelte-grid/utils/other.d.ts

@@ -0,0 +1,3 @@
+export declare function throttle(func: any, timeFrame: any): (...args: any[]) => void;
+export declare function getRowsCount(items: any, cols: any): number;
+export declare const getColumn: (containerWidth: any, columns: any) => any;

package/components/apps/svelte-grid/utils/other.js

@@ -0,0 +1,30 @@
+export function throttle(func, timeFrame) {
+    let lastTime = new Date().getTime();
+    return function (...args) {
+        let now = new Date().getTime();
+        if (now - lastTime >= timeFrame) {
+            func(...args);
+            lastTime = now;
+        }
+    };
+}
+export function getRowsCount(items, cols) {
+    const getItemsMaxHeight = items.map((val) => {
+        const item = val[cols];
+        return (item && item.y) + (item && item.h) || 0;
+    });
+    return Math.max(...getItemsMaxHeight, 1);
+}
+export const getColumn = (containerWidth, columns) => {
+    const sortColumns = columns.slice().sort((a, b) => a[0] - b[0]);
+    const breakpoint = sortColumns.find((value) => {
+        const [width] = value;
+        return containerWidth <= width;
+    });
+    if (breakpoint) {
+        return breakpoint[1];
+    }
+    else {
+        return sortColumns[sortColumns.length - 1][1];
+    }
+};

package/components/apps/types.d.ts

@@ -1,89 +1,86 @@
 import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
-import type { FilledItem } from 'svelte-grid';
+import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
-import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from './inputType';
+import type { AppComponent, components } from './editor/component/components';
+import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, ResultAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
-type BaseComponent<T extends string> = {
-    type: T;
-};
-export type TextComponent = BaseComponent<'textcomponent'>;
-export type TextInputComponent = BaseComponent<'textinputcomponent'>;
-export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
-export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
-export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
-export type SliderComponent = BaseComponent<'slidercomponent'>;
-export type HtmlComponent = BaseComponent<'htmlcomponent'>;
-export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>;
-export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
-export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
-    recomputeIds: string[] | undefined;
-};
-export type FormComponent = BaseComponent<'formcomponent'> & {
-    recomputeIds: string[] | undefined;
-};
-export type RunFormComponent = BaseComponent<'runformcomponent'>;
-export type BarChartComponent = BaseComponent<'barchartcomponent'>;
-export type PieChartComponent = BaseComponent<'piechartcomponent'>;
-export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
-export type TableComponent = BaseComponent<'tablecomponent'> & {
-    actionButtons: (BaseAppComponent & ButtonComponent)[];
-};
-export type DisplayComponent = BaseComponent<'displaycomponent'>;
-export type ImageComponent = BaseComponent<'imagecomponent'>;
-export type InputComponent = BaseComponent<'inputcomponent'>;
-export type SelectComponent = BaseComponent<'selectcomponent'>;
-export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
-export type RadioComponent = BaseComponent<'radiocomponent'>;
+import type { FilledItem } from './svelte-grid/types';
 export type HorizontalAlignment = 'left' | 'center' | 'right';
 export type VerticalAlignment = 'top' | 'center' | 'bottom';
 export type Aligned = {
     horizontalAlignment: HorizontalAlignment;
     verticalAlignment: VerticalAlignment;
 };
+export interface GeneralAppInput {
+    onlyStatic?: boolean;
+    tooltip?: string;
+    placeholder?: string;
+}
+export type ComponentCssProperty = {
+    class?: string;
+    style?: string;
+};
+export type ComponentCustomCSS<T extends keyof typeof components> = Partial<(typeof components)[T]['customCss']>;
+export type Configuration = StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput | ResultAppInput;
+export type StaticConfiguration = GeneralAppInput & StaticAppInput;
+export type RichConfigurationT<T> = (T & {
+    type: AppInput['type'];
+}) | {
+    type: 'oneOf';
+    selected: string;
+    tooltip?: string;
+    labels?: Record<string, string>;
+    configuration: Record<string, Record<string, T>>;
+};
+export type RichConfiguration = RichConfigurationT<Configuration>;
+export type RichConfigurations = Record<string, RichConfiguration>;
+export type StaticRichConfigurations = Record<string, RichConfigurationT<GeneralAppInput & (StaticAppInput | EvalAppInput)>>;
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput) & {
-        onlyStatic?: boolean;
-        evaluatedValue?: boolean;
-        tooltip?: string;
-    }>;
-    card: boolean | undefined;
-    /**
-     * If `true` then the wrapper will allow items to flow outside of it's borders.
-     *
-     * *For example when the component has a popup like `Select`*
-     */
-    softWrap?: boolean;
+    configuration: RichConfigurations;
+    customCss?: Record<string, ComponentCssProperty>;
+    numberOfSubgrids?: number;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent | VegaLiteComponent);
 export type ComponentSet = {
     title: string;
-    components: AppComponent[];
+    components: Readonly<AppComponent['type'][]>;
 };
 type SectionID = string;
 export type AppSection = {
     components: AppComponent[];
     id: SectionID;
 };
-export type GridItem = FilledItem<{
-    data: AppComponent;
-    id: string;
-}>;
+export type GridItem = FilledItem<AppComponent>;
 export type InlineScript = {
     content: string;
-    language: Preview.language;
-    path: string;
-    schema: Schema;
+    language: Preview.language | 'frontend';
+    path?: string;
+    schema?: Schema;
+    refreshOn?: {
+        id: string;
+        key: string;
+    }[];
 };
+export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type App = {
     grid: GridItem[];
     fullscreen: boolean;
+    norefreshbar?: boolean;
     unusedInlineScripts: Array<{
         name: string;
         inlineScript: InlineScript;
     }>;
+    hiddenInlineScripts: Array<{
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        autoRefresh?: boolean;
+        doNotRecomputeOnInputChanged?: boolean;
+    }>;
+    css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
+    subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {
     opened: boolean;
@@ -91,17 +88,18 @@ export type ConnectingInput = {
     sourceName?: string;
     hoveredComponent: string | undefined;
 };
-export type AppEditorContext = {
-    worldStore: Writable<World | undefined>;
-    staticOutputs: Writable<Record<string, string[]>>;
-    lazyGrid: Writable<GridItem[]>;
+export type AppViewerContext = {
+    worldStore: Writable<World>;
     app: Writable<App>;
     summary: Writable<string>;
-    selectedComponent: Writable<string | undefined>;
+    selectedComponent: Writable<string[] | undefined>;
     mode: Writable<EditorMode>;
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
-    runnableComponents: Writable<Record<string, () => Promise<void>>>;
+    runnableComponents: Writable<Record<string, {
+        autoRefresh: boolean;
+        cb: (inlineScript?: InlineScript) => Promise<void>;
+    }>>;
     staticExporter: Writable<Record<string, () => any>>;
     appPath: string;
     workspace: string;
@@ -112,8 +110,41 @@ export type AppEditorContext = {
         component: string;
     }[]>;
     noBackend: boolean;
+    errorByComponent: Writable<Record<string, {
+        error: string;
+        componentId: string;
+    }>>;
+    openDebugRun: Writable<((componentID: string) => void) | undefined>;
+    focusedGrid: Writable<FocusedGrid | undefined>;
+    stateId: Writable<number>;
+    parentWidth: Writable<number>;
+    state: Writable<Record<string, any>>;
+    componentControl: Writable<Record<string, {
+        left?: () => boolean;
+        right?: (skipTableActions?: boolean | undefined) => string | boolean;
+        setTab?: (index: number) => void;
+    }>>;
+    hoverStore: Writable<string | undefined>;
+    allIdsInPath: Writable<string[]>;
+};
+export type AppEditorContext = {
+    history: History<App> | undefined;
+    pickVariableCallback: Writable<((path: string) => void) | undefined>;
+    ontextfocus: Writable<(() => void) | undefined>;
+    selectedComponentInEditor: Writable<string | undefined>;
+    movingcomponents: Writable<string[] | undefined>;
+};
+export type FocusedGrid = {
+    parentComponentId: string;
+    subGridIndex: number;
 };
 export type EditorMode = 'dnd' | 'preview';
 export type EditorBreakpoint = 'sm' | 'lg';
+export declare const IS_APP_PUBLIC_CONTEXT_KEY: "isAppPublicContext";
 type ComponentID = string;
+export type ContextPanelContext = {
+    search: Writable<string>;
+    manuallyOpened: Writable<Record<string, boolean>>;
+    hasResult: Writable<Record<string, boolean>>;
+};
 export {};

package/components/apps/types.js

@@ -1 +1 @@
-export {};
+export const IS_APP_PUBLIC_CONTEXT_KEY = 'isAppPublicContext';

package/components/apps/utils.d.ts

@@ -1,13 +1,12 @@
 import type { Schema } from '../../common';
+import type { App, ComponentCssProperty, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
-import type { App, AppComponent } from './types';
+import { type Writable } from 'svelte/store';
+export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
+export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
-export declare const displayData: Record<AppComponent['type'], {
-    name: string;
-    icon: any;
-}>;
 export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
 export declare function fieldTypeToTsType(inputType: InputType): string;
 export declare function isScriptByNameDefined(appInput: AppInput | undefined): boolean;
@@ -17,4 +16,8 @@ export declare function toStatic(app: App, staticExporter: Record<string, () =>
     app: App;
     summary: string;
 };
-export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string;
+export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean, state: Record<string, any>, goto: boolean): string;
+export declare function getAllScriptNames(app: App): string[];
+export declare function toPascalCase(text: string): string;
+export declare function toKebabCase(text: string): string;
+export declare function concatCustomCss<T extends Record<string, ComponentCssProperty>>(appCss?: Record<string, ComponentCssProperty>, componentCss?: T): T | undefined;