windmill-components 1.87.0 → 1.89.1

package/package/components/graph/FlowGraph.svelte

@@ -0,0 +1,461 @@
+<script>import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
+import { FlowStatusModule } from '../../gen';
+import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
+import { defaultIfEmptyString, encodeState, truncateRev } from '../../utils';
+import { createEventDispatcher, setContext } from 'svelte';
+import Svelvet from './svelvet/container/views/Svelvet.svelte';
+import MapItem from '../flows/map/MapItem.svelte';
+import VirtualItem from '../flows/map/VirtualItem.svelte';
+import { writable } from 'svelte/store';
+export let success = undefined;
+export let modules = [];
+export let failureModule = undefined;
+export let minHeight = 0;
+export let maxHeight = undefined;
+export let notSelectable = false;
+export let flowModuleStates = undefined;
+export let rebuildOnChange = undefined;
+export let selectedId = writable(undefined);
+export let insertable = false;
+export let moving = undefined;
+export let scroll = false;
+export let download = false;
+export let fullSize = false;
+setContext('FlowGraphContext', { selectedId });
+let idGenerator;
+let nestedNodes;
+let nodes = [];
+let edges = [];
+let width, height;
+let fullWidth;
+let errorHandlers = {};
+let dispatch = createEventDispatcher();
+$: {
+    rebuildOnChange;
+    moving;
+    width && height && minHeight && $selectedId && flowModuleStates;
+    nodes = edges = [];
+    errorHandlers = {};
+    createGraph();
+}
+async function createGraph() {
+    if (modules) {
+        idGenerator = createIdGenerator();
+    }
+    else {
+        nodes = edges = [];
+        return;
+    }
+    nestedNodes = nodes = [];
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, 'after', undefined, undefined, 0, 0, true, undefined));
+    modules.forEach((m, i) => {
+        const item = getConvertedFlowModule(m, undefined, undefined, 0, i + 1 == modules?.length, modules);
+        item && nestedNodes.push(item);
+    });
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, 'before', undefined, undefined, 0, modules.length, true, undefined));
+    if (!flowModuleStates) {
+        if (failureModule)
+            nestedNodes.push(createErrorHandler(failureModule));
+    }
+    else {
+        Object.entries(flowModuleStates ?? [])
+            .filter(([k, v]) => k.startsWith('failure'))
+            .forEach(([k, v]) => {
+            nestedNodes.push(createErrorHandler({ id: k }, v.parent_module));
+        });
+    }
+    const flatNodes = flattenNestedNodes(nestedNodes);
+    const layered = layoutNodes(flatNodes);
+    nodes = layered.nodes;
+    let hfull = Math.max(layered.height, minHeight);
+    fullWidth = layered.width;
+    height = fullSize ? hfull : Math.min(hfull, maxHeight ?? window.innerHeight - 100);
+    edges = createEdges(nodes);
+}
+function getConvertedFlowModule(module, parent, edgeLabel, loopDepth, insertableEnd, modules) {
+    const type = module.value.type;
+    const parentIds = getParentIds(parent);
+    if (type === 'forloopflow') {
+        //@ts-ignore
+        return flowModuleToLoop(modules, module, parent, loopDepth);
+    }
+    else if (type === 'branchone') {
+        const branches = [
+            { summary: 'Default Branch', modules: module.value.default, removable: false },
+            ...module.value.branches.map((b, i) => ({
+                summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)),
+                modules: b.modules,
+                removable: true
+            }))
+        ];
+        return flowModuleToBranch(module, modules, branches, ['', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)], parent, loopDepth, false);
+    }
+    else if (type === 'branchall') {
+        const branches = module.value.branches.map((b, i) => ({
+            summary: defaultIfEmptyString(b.summary, `Branch ${i + 1}`),
+            modules: b.modules,
+            removable: true
+        }));
+        return flowModuleToBranch(module, modules, branches, [], parent, loopDepth, true);
+    }
+    return flowModuleToNode(parentIds, module, edgeLabel, undefined, loopDepth, insertableEnd, false, modules);
+}
+function getParentIds(items = undefined) {
+    if (typeof items == 'string') {
+        return [items];
+    }
+    const item = items?.at(-1) || nestedNodes.at(-1);
+    if (!item)
+        return [];
+    if (isNode(item)) {
+        const id = item.id;
+        return [id];
+    }
+    else if (isLoop(item)) {
+        return getParentIds(item.items);
+    }
+    else if (isBranch(item)) {
+        return [item.nodeEnd.id];
+    }
+    return [];
+}
+function getStateColor(state) {
+    switch (state) {
+        case FlowStatusModule.type.SUCCESS:
+            return 'rgb(193, 255, 216)';
+        case FlowStatusModule.type.FAILURE:
+            return 'rgb(248 113 113)';
+        case FlowStatusModule.type.IN_PROGRESS:
+            return 'rgb(253, 240, 176)';
+        case FlowStatusModule.type.WAITING_FOR_EVENTS:
+            return 'rgb(229, 176, 253)';
+        case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
+            return 'rgb(255, 208, 193)';
+        default:
+            return '#fff';
+    }
+}
+function getResultColor() {
+    switch (success) {
+        case true:
+            return getStateColor(FlowStatusModule.type.SUCCESS);
+        case false:
+            return getStateColor(FlowStatusModule.type.FAILURE);
+        default:
+            return '#fff';
+    }
+}
+function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules) {
+    return {
+        type: 'node',
+        id: mod.id,
+        position: { x: -1, y: -1 },
+        data: {
+            custom: {
+                component: MapItem,
+                props: {
+                    trigger: parentIds.length == 0,
+                    mod,
+                    insertable,
+                    insertableEnd,
+                    branchable,
+                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
+                    // annotation,
+                    modules,
+                    moving
+                },
+                cb: (e, detail) => {
+                    if (e == 'delete') {
+                        dispatch('delete', detail);
+                    }
+                    else if (e == 'select') {
+                        if (!notSelectable) {
+                            if ($selectedId != mod.id) {
+                                $selectedId = mod.id;
+                                dispatch('select', mod);
+                            }
+                        }
+                    }
+                    else if (e == 'insert') {
+                        dispatch('insert', detail);
+                    }
+                    else if (e == 'newBranch') {
+                        dispatch('newBranch', detail);
+                    }
+                    else if (e == 'move') {
+                        dispatch('move', { module: mod, modules });
+                    }
+                }
+            }
+        },
+        width: NODE.width,
+        height: NODE.height,
+        parentIds,
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
+        edgeLabel,
+        loopDepth
+    };
+}
+function flowModuleToLoop(modules, module, parent, loopDepth) {
+    const loop = {
+        type: 'loop',
+        items: [
+            flowModuleToNode(getParentIds(parent), module, undefined, flowModuleStates?.[module.id]?.iteration_total
+                ? 'Iteration ' + flowModuleStates?.[module.id]?.iteration_total
+                : '', loopDepth, false, false, modules)
+        ]
+    };
+    const innerModules = module.value.modules;
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, 'after', undefined, 1000, loopDepth + 1, 0, true, undefined, undefined));
+    innerModules.forEach((module, i) => {
+        const item = getConvertedFlowModule(module, loop.items, undefined, loopDepth + 1, i + 1 == innerModules?.length, innerModules);
+        item && loop.items.push(item);
+    });
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, 'after', undefined, 1000, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id));
+    return loop;
+}
+function flowModuleToBranch(module, modules, branches, edgesLabel, parent = undefined, loopDepth, branchall) {
+    const node = flowModuleToNode(getParentIds(parent), module, undefined, undefined, loopDepth, false, true, modules);
+    const bitems = [];
+    const branchParent = [node.id];
+    if (branches.length == 0) {
+        bitems.push([
+            createVirtualNode(branchParent, 'No branches', undefined, 'after', undefined, 0, loopDepth, 0, false, undefined)
+        ]);
+    }
+    branches.forEach(({ summary, modules, removable }, i) => {
+        const items = [];
+        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined));
+        if (modules.length) {
+            modules.forEach((module, j) => {
+                const item = getConvertedFlowModule(module, items, undefined, loopDepth, j + 1 == modules?.length, modules);
+                item && items.push(item);
+            });
+        }
+        items.length && bitems.push(items);
+    });
+    return {
+        type: 'branch',
+        node,
+        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, 'after', undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id),
+        items: bitems
+    };
+}
+function flattenNestedNodes(nestedNodes, nodes = []) {
+    const array = nodes;
+    nestedNodes.forEach((node) => {
+        if (isNode(node)) {
+            array.push(node);
+        }
+        else if (isLoop(node)) {
+            flattenNestedNodes(node.items, array);
+        }
+        else if (isBranch(node)) {
+            array.push(node.node);
+            node.items.forEach((item) => {
+                flattenNestedNodes(item, array);
+            });
+            array.push(node.nodeEnd);
+        }
+    });
+    return array;
+}
+function layoutNodes(nodes) {
+    const stratify = dagStratify().id(({ id }) => id);
+    const dag = stratify(nodes);
+    let boxSize;
+    try {
+        const layout = sugiyama()
+            .decross(decrossOpt())
+            .coord(coordCenter())
+            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+        boxSize = layout(dag);
+    }
+    catch {
+        const layout = sugiyama()
+            .coord(coordCenter())
+            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+        boxSize = layout(dag);
+    }
+    return {
+        nodes: dag.descendants().map((des) => ({
+            ...des.data,
+            id: des.data.id,
+            position: {
+                x: des.x
+                    ? des.data.loopDepth * 50 +
+                        des.x +
+                        (fullSize ? fullWidth : width) / 2 -
+                        boxSize.width / 2 -
+                        NODE.width / 2
+                    : 0,
+                y: des.y || 0
+            }
+        })),
+        height: boxSize.height + NODE.height,
+        width: boxSize.width + NODE.width
+    };
+}
+function createEdges(nodes) {
+    const edges = [];
+    nodes.forEach((node) => {
+        node.parentIds.forEach((pid, i) => {
+            // skip virtual nodes such as collect result
+            if (false &&
+                errorHandlers[pid] &&
+                parseInt(node.id) < 900 &&
+                nodes.find((x) => x.id == errorHandlers[pid])) {
+                edges.push({
+                    id: `e-${pid}-${node.id}`,
+                    source: pid,
+                    target: errorHandlers[pid],
+                    labelBgColor: 'white',
+                    arrow: false,
+                    animate: false,
+                    noHandle: true,
+                    label: node.edgeLabel,
+                    type: 'bezier'
+                });
+                edges.push({
+                    id: `e-${pid}-${node.id}`,
+                    source: errorHandlers[pid],
+                    target: node.id,
+                    labelBgColor: 'white',
+                    arrow: false,
+                    animate: false,
+                    noHandle: true,
+                    label: node.edgeLabel,
+                    type: 'bezier'
+                });
+            }
+            else {
+                edges.push({
+                    id: `e-${pid}-${node.id}`,
+                    source: pid,
+                    target: node.id,
+                    labelBgColor: 'white',
+                    arrow: false,
+                    animate: false,
+                    noHandle: true,
+                    label: node.edgeLabel,
+                    edgeColor: '#999',
+                    type: 'bezier'
+                });
+            }
+        });
+    });
+    return edges;
+}
+function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid = undefined) {
+    const id = -idGenerator.next().value - 2 + (offset ?? 0);
+    return {
+        type: 'node',
+        id: id.toString(),
+        position: { x: -1, y: -1 },
+        data: {
+            // html: `
+            // 	<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
+            // 		${label}
+            // 	</div>
+            // `
+            custom: {
+                component: VirtualItem,
+                props: {
+                    label,
+                    insertable,
+                    modules,
+                    bgColor: label == 'Result' ? getResultColor() : '#dfe6ee',
+                    selected: $selectedId == label,
+                    index,
+                    selectable,
+                    whereInsert,
+                    deleteBranch,
+                    id: mid,
+                    moving
+                },
+                cb: (e, detail) => {
+                    if (e == 'insert') {
+                        dispatch('insert', detail);
+                    }
+                    else if (e == 'select') {
+                        $selectedId = detail;
+                        dispatch('select', detail);
+                    }
+                    else if (e == 'deleteBranch') {
+                        $selectedId = label;
+                        dispatch('deleteBranch', detail);
+                    }
+                }
+            }
+        },
+        width: NODE.width,
+        height: NODE.height,
+        borderColor: $selectedId == label ? 'black' : '#999',
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
+        parentIds,
+        edgeLabel,
+        loopDepth
+    };
+}
+function createErrorHandler(mod, parent_module) {
+    const nId = (-idGenerator.next().value - 1 + 1100).toString();
+    parent_module && (errorHandlers[parent_module] = nId);
+    let label = 'Error handler';
+    return {
+        type: 'node',
+        id: nId,
+        position: { x: -1, y: -1 },
+        data: {
+            custom: {
+                component: VirtualItem,
+                props: {
+                    label,
+                    insertable: false,
+                    modules: undefined,
+                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
+                    selected: $selectedId == mod.id,
+                    index: 0,
+                    selectable: true,
+                    id: mod.id
+                },
+                cb: (e, detail) => {
+                    console.log(detail);
+                    if (e == 'select') {
+                        $selectedId = detail;
+                        dispatch('select', detail);
+                    }
+                }
+            }
+        },
+        width: NODE.width,
+        height: NODE.height,
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
+        parentIds: parent_module ? [parent_module] : [],
+        loopDepth: 0
+    };
+}
+</script>
+
+<div bind:clientWidth={width} class={fullSize ? '' : 'w-full h-full overflow-hidden relative'}>
+	{#if width && height}
+		<Svelvet
+			on:expand={() => {
+				localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
+				window.open('/view_graph', '_blank')
+			}}
+			{download}
+			highlightEdges={false}
+			locked
+			{nodes}
+			width={fullSize ? fullWidth : width}
+			{edges}
+			{height}
+			{scroll}
+			background={false}
+			bgColor="rgb(249 250 251)"
+		/>
+	{/if}
+</div>

package/package/components/graph/FlowGraph.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FlowModule } from '../../gen';
+import { type GraphModuleState } from '.';
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        success?: boolean | undefined;
+        modules?: FlowModule[] | undefined;
+        failureModule?: FlowModule | undefined;
+        minHeight?: number | undefined;
+        maxHeight?: number | undefined;
+        notSelectable?: boolean | undefined;
+        flowModuleStates?: Record<string, GraphModuleState> | undefined;
+        rebuildOnChange?: any;
+        selectedId?: Writable<string | undefined> | undefined;
+        insertable?: boolean | undefined;
+        moving?: string | undefined;
+        scroll?: boolean | undefined;
+        download?: boolean | undefined;
+        fullSize?: boolean | undefined;
+    };
+    events: {
+        delete: CustomEvent<any>;
+        select: CustomEvent<any>;
+        insert: CustomEvent<any>;
+        newBranch: CustomEvent<any>;
+        move: CustomEvent<any>;
+        deleteBranch: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowGraphProps = typeof __propDef.props;
+export type FlowGraphEvents = typeof __propDef.events;
+export type FlowGraphSlots = typeof __propDef.slots;
+export default class FlowGraph extends SvelteComponentTyped<FlowGraphProps, FlowGraphEvents, FlowGraphSlots> {
+}
+export {};

package/package/components/graph/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FlowGraph } from './FlowGraph.svelte';
+export * from './model';
+export * from './util';

package/package/components/graph/index.js

@@ -0,0 +1,3 @@
+export { default as FlowGraph } from './FlowGraph.svelte';
+export * from './model';
+export * from './util';

package/package/components/graph/model.d.ts

@@ -0,0 +1,36 @@
+import type { FlowStatusModule } from "../../gen";
+import type { UserNodeType } from "./svelvet/types";
+export type ModuleHost = 'workspace' | 'inline' | 'hub';
+export type Node = UserNodeType & {
+    parentIds: string[];
+    edgeLabel?: string;
+    host?: ModuleHost;
+    type: 'node';
+    loopDepth: number;
+};
+export type Loop = {
+    type: 'loop';
+    items: NestedNodes;
+};
+export type Branch = {
+    node: Node;
+    nodeEnd: Node;
+    type: 'branch';
+    items: NestedNodes[];
+};
+export type GraphItem = Node | Loop | Branch;
+export type GraphModuleState = {
+    type: FlowStatusModule.type;
+    args: any;
+    logs?: string;
+    result?: any;
+    scheduled_for?: string;
+    job_id?: string;
+    parent_module?: string;
+    iteration_total?: number;
+    retries?: number;
+};
+export type NestedNodes = GraphItem[];
+export declare function isNode(item: GraphItem | NestedNodes | undefined): item is Node;
+export declare function isLoop(item: GraphItem | NestedNodes | undefined): item is Loop;
+export declare function isBranch(item: GraphItem | NestedNodes | undefined): item is Branch;

package/package/components/graph/model.js

@@ -0,0 +1,9 @@
+export function isNode(item) {
+    return item?.['type'] === 'node';
+}
+export function isLoop(item) {
+    return item?.['type'] === 'loop';
+}
+export function isBranch(item) {
+    return item?.['type'] === 'branch';
+}

package/package/components/graph/svelvet/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 OSLabs Beta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package/components/graph/svelvet/collapsible/controllers/util.d.ts

@@ -0,0 +1,15 @@
+import type { EdgeType, NodeType, ResizeNodeType, StoreType } from '../../store/types/types';
+import type { UserEdgeType, UserNodeType } from '../../types/types';
+import type { CollapsibleType } from '../types/types';
+import type { AnchorType } from '../../edges/types/types';
+export declare function populateCollapsibleStore(store: StoreType, userNodes: UserNodeType[], userEdges: UserEdgeType[], canvasId: string): void;
+export declare function toggleExpandAndCollapse(store: StoreType, nodeId: string): void;
+export declare function getCollapsibles(store: StoreType, filter?: {
+    [key: string]: any;
+}): CollapsibleType[];
+export declare function filterByCollapsible(store: StoreType, nodes: NodeType[], resizeNodes: ResizeNodeType[], anchors: AnchorType[], edges: EdgeType[]): {
+    filteredNodes: NodeType[];
+    filteredResizeNodes: ResizeNodeType[];
+    filteredAnchors: AnchorType[];
+    filteredEdges: EdgeType[];
+};