@motiadev/workbench 0.2.2 → 0.3.0-beta.79

package/dist/src/views/flow/hooks/use-get-flow-state.js

@@ -1,38 +1,55 @@
 import { useEdgesState, useNodesState } from '@xyflow/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { ApiFlowNode } from '../nodes/api-flow-node';
 import { NoopFlowNode } from '../nodes/noop-flow-node';
 import { EventFlowNode } from '../nodes/event-flow-node';
 import { CronNode } from '@/publicComponents/cron-node';
+import isEqual from 'fast-deep-equal';
+import { useSaveWorkflowConfig } from '@/views/flow/hooks/use-save-workflow-config';
+const DEFAULT_POSITION = { x: 0, y: 0 };
 const getNodePosition = (flowConfig, stepName) => {
-    const position = flowConfig[stepName];
-    return position || { x: 0, y: 0 };
+    return flowConfig?.config[stepName] || DEFAULT_POSITION;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const nodeComponentCache = new Map();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const BASE_NODE_TYPES = {
+    event: EventFlowNode,
+    api: ApiFlowNode,
+    noop: NoopFlowNode,
+    cron: CronNode,
 };
 async function importFlow(flow, flowConfig) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const nodeTypes = {
-        event: EventFlowNode,
-        api: ApiFlowNode,
-        noop: NoopFlowNode,
-        cron: CronNode,
-    };
-    // Load custom node components if they exist
-    for (const step of flow.steps) {
-        if (step.nodeComponentPath) {
-            const module = await import(/* @vite-ignore */ `/@fs/${step.nodeComponentPath}`);
-            nodeTypes[step.nodeComponentPath] = module.Node ?? module.default;
+    const nodeTypes = { ...BASE_NODE_TYPES };
+    const customNodePromises = flow.steps
+        .filter((step) => step.nodeComponentPath)
+        .map(async (step) => {
+        const path = step.nodeComponentPath;
+        // Check cache first
+        if (nodeComponentCache.has(path)) {
+            nodeTypes[path] = nodeComponentCache.get(path);
+            return;
+        }
+        try {
+            const module = await import(/* @vite-ignore */ `/@fs/${path}`);
+            const component = module.Node ?? module.default;
+            nodeComponentCache.set(path, component);
+            nodeTypes[path] = component;
+        }
+        catch (error) {
+            console.error(`Failed to load custom node component: ${path}`, error);
         }
-    }
-    // Create nodes from steps
+    });
+    await Promise.all(customNodePromises);
     const nodes = flow.steps.map((step) => ({
         id: step.id,
-        type: step.nodeComponentPath ? step.nodeComponentPath : step.type,
+        type: step.nodeComponentPath || step.type,
         filePath: step.filePath,
-        position: step.filePath ? getNodePosition(flowConfig, step.filePath) : { x: 0, y: 0 },
+        position: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_POSITION,
         data: step,
         language: step.language,
     }));
-    // Use the edges provided by the API, adding required ReactFlow properties
     const edges = flow.edges.map((edge) => ({
         ...edge,
         type: 'base',
@@ -41,17 +58,70 @@ async function importFlow(flow, flowConfig) {
 }
 export const useGetFlowState = (flow, flowConfig) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [nodeTypes, setNodeTypes] = useState();
+    const [nodeTypes, setNodeTypes] = useState(BASE_NODE_TYPES);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const saveConfig = useSaveWorkflowConfig();
+    const flowIdRef = useRef('');
+    const saveTimeoutRef = useRef(null);
+    const lastSavedConfigRef = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const memoizedFlowConfig = useMemo(() => flowConfig, [flowConfig?.id, flowConfig?.config]);
     useEffect(() => {
         if (!flow || flow.error)
             return;
-        importFlow(flow, flowConfig).then(({ nodes, edges, nodeTypes }) => {
-            setNodes(nodes);
-            setEdges(edges);
-            setNodeTypes(nodeTypes);
-        });
-    }, [flow, flowConfig, setNodes, setEdges, setNodeTypes]);
-    return { nodes, edges, onNodesChange, onEdgesChange, nodeTypes };
+        if (isEqual(lastSavedConfigRef.current, memoizedFlowConfig?.config))
+            return;
+        lastSavedConfigRef.current = memoizedFlowConfig?.config;
+        flowIdRef.current = flow.id;
+        const importFlowAsync = async () => {
+            try {
+                const { nodes, edges, nodeTypes } = await importFlow(flow, flowConfig);
+                setNodes(nodes);
+                setEdges(edges);
+                setNodeTypes(nodeTypes);
+            }
+            catch (error) {
+                console.error('Failed to import flow:', error);
+            }
+        };
+        importFlowAsync();
+    }, [flow, memoizedFlowConfig, setNodes, setEdges, flowConfig]);
+    const saveFlowConfig = useCallback((nodesToSave) => {
+        if (saveTimeoutRef.current) {
+            clearTimeout(saveTimeoutRef.current);
+        }
+        saveTimeoutRef.current = setTimeout(async () => {
+            const steps = nodesToSave.reduce((acc, node) => {
+                if (node.data.filePath) {
+                    acc[node.data.filePath] = {
+                        x: Math.round(node.position.x),
+                        y: Math.round(node.position.y),
+                    };
+                }
+                return acc;
+            }, {});
+            if (!isEqual(steps, lastSavedConfigRef.current)) {
+                lastSavedConfigRef.current = steps;
+                const newConfig = { id: flowIdRef.current, config: steps };
+                try {
+                    await saveConfig(newConfig);
+                }
+                catch (error) {
+                    console.error('Failed to save flow config:', error);
+                }
+            }
+        }, 300);
+    }, [saveConfig]);
+    useEffect(() => {
+        if (nodes.length > 0) {
+            saveFlowConfig(nodes);
+        }
+        return () => {
+            if (saveTimeoutRef.current) {
+                clearTimeout(saveTimeoutRef.current);
+            }
+        };
+    }, [nodes, saveFlowConfig]);
+    return useMemo(() => ({ nodes, edges, onNodesChange, onEdgesChange, nodeTypes }), [nodes, edges, onNodesChange, onEdgesChange, nodeTypes]);
 };

package/dist/src/views/flow/hooks/use-save-workflow-config.d.ts

@@ -1,9 +1,2 @@
-export type NodePosition = {
-    [key: string]: {
-        x: number;
-        y: number;
-    };
-};
-export declare const useSaveWorkflowConfig: (flowId: string) => {
-    saveConfig: (body: NodePosition) => Promise<any>;
-};
+import { FlowConfigResponse } from '@/views/flow/hooks/use-get-flow-state';
+export declare const useSaveWorkflowConfig: () => (body: FlowConfigResponse) => Promise<any>;

package/dist/src/views/flow/hooks/use-save-workflow-config.js

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
-export const useSaveWorkflowConfig = (flowId) => {
-    const saveConfig = useCallback(async (body) => {
+export const useSaveWorkflowConfig = () => {
+    return useCallback(async (body) => {
         try {
-            const response = await fetch(`/flows/${flowId}/config`, {
+            const response = await fetch(`/flows/${body.id}/config`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ [flowId]: body }),
+                body: JSON.stringify(body),
             });
             if (!response.ok) {
                 throw new Error(`Failed to save config: ${response.statusText}`);
@@ -18,6 +18,5 @@ export const useSaveWorkflowConfig = (flowId) => {
             console.error('Error saving workflow config:', error);
             throw error;
         }
-    }, [flowId]);
-    return { saveConfig };
+    }, []);
 };

package/dist/src/views/flow/legend.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@/components/ui/button';
+import { Button } from '@motiadev/ui';
 import { cn } from '@/lib/utils';
 import { LayoutList, X } from 'lucide-react';
 import { useState } from 'react';

package/dist/src/views/flow/node-organizer.js

@@ -1,6 +1,6 @@
 import { useNodesInitialized, useReactFlow } from '@xyflow/react';
 import dagre from 'dagre';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 const organizeNodes = (nodes, edges) => {
     const dagreGraph = new dagre.graphlib.Graph({ compound: true });
     dagreGraph.setDefaultEdgeLabel(() => ({}));
@@ -37,8 +37,10 @@ const organizeNodes = (nodes, edges) => {
 export const NodeOrganizer = ({ onInitialized }) => {
     const { setNodes, getNodes, getEdges, fitView } = useReactFlow();
     const nodesInitialized = useNodesInitialized();
+    const initialized = useRef(false);
     useEffect(() => {
-        if (nodesInitialized) {
+        if (nodesInitialized && !initialized.current) {
+            initialized.current = true;
             const nodes = getNodes();
             const edges = getEdges();
             const organizedNodes = organizeNodes(nodes, edges);