fix(demo): should validate form before test run (#540)

* fix(demo): should validate form before test run

* fix(demo): test run panel width

* chore(demo): update initial data

apps/demo-free-layout/src/components/testrun/testrun-form/index.module.less

@@ -17,7 +17,7 @@
 
 .fieldGroup {
   margin-bottom: 8px;
-  width: 326px;
+  width: 358px;
 
   &:last-child {
     margin-bottom: 0;
@@ -69,7 +69,7 @@
   padding: 8px 8px 8px 4px;
   border-radius: 4px;
   border: 1px solid #52649a0f;
-  width: 312px;
+  width: 348px;
 
   :global(.cm-editor) {
     height: 100% !important;

apps/demo-free-layout/src/components/testrun/testrun-panel/index.module.less

@@ -56,7 +56,7 @@
 
 .button {
   border-radius: 8px;
-  width: 326px;
+  width: 358px;
   height: 40px;
   margin: 16px;
 

apps/demo-free-layout/src/components/testrun/testrun-panel/index.tsx

@@ -46,11 +46,9 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
     }
     setResult(undefined);
     setErrors(undefined);
-    setRunning(true);
-    try {
-      await runtimeService.taskRun(values);
-    } catch (e: any) {
-      setErrors([e.message]);
+    const taskID = await runtimeService.taskRun(values);
+    if (taskID) {
+      setRunning(true);
     }
   };
 
@@ -124,7 +122,7 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
       mask={false}
       motion={false}
       onCancel={onClose}
-      width={368}
+      width={400}
       headerStyle={{
         display: 'none',
       }}

apps/demo-free-layout/src/components/tools/run.tsx

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { useState } from 'react';
-
-import { useService } from '@flowgram.ai/free-layout-editor';
-import { Button } from '@douyinfe/semi-ui';
-
-import { WorkflowRuntimeService } from '../../plugins/runtime-plugin/runtime-service';
-
-/**
- * Run the simulation and highlight the lines
- */
-export function Run() {
-  const [isRunning, setRunning] = useState(false);
-  const runtimeService = useService(WorkflowRuntimeService);
-  const onRun = async () => {
-    setRunning(true);
-    await runtimeService.taskRun('{}');
-    setRunning(false);
-  };
-  return (
-    <Button
-      onClick={onRun}
-      loading={isRunning}
-      style={{ backgroundColor: 'rgba(171,181,255,0.3)', borderRadius: '8px' }}
-    >
-      Run
-    </Button>
-  );
-}

apps/demo-free-layout/src/initial-data.ts

@@ -125,27 +125,70 @@ export const initialData: FlowDocumentJSON = {
       },
     },
     {
-      id: 'group_5ci0o',
-      type: 'group',
+      id: 'http_rDGIH',
+      type: 'http',
       meta: {
         position: {
-          x: 1644,
-          y: 730.1999999999999,
+          x: 640,
+          y: 447.35,
         },
       },
-      data: {},
+      data: {
+        title: 'HTTP_1',
+        outputs: {
+          type: 'object',
+          properties: {
+            body: {
+              type: 'string',
+            },
+            headers: {
+              type: 'object',
+            },
+            statusCode: {
+              type: 'integer',
+            },
+          },
+        },
+        api: {
+          method: 'GET',
+          url: {
+            type: 'template',
+            content: '',
+          },
+        },
+        body: {
+          bodyType: 'JSON',
+        },
+        timeout: {
+          timeout: 10000,
+          retryTimes: 1,
+        },
+      },
+    },
+    {
+      id: 'loop_Ycnsk',
+      type: 'loop',
+      meta: {
+        position: {
+          x: 1480,
+          y: 90.00000000000003,
+        },
+      },
+      data: {
+        title: 'Loop_1',
+      },
       blocks: [
         {
-          id: 'llm_8--A3',
+          id: 'llm_6aSyo',
           type: 'llm',
           meta: {
             position: {
-              x: 180,
+              x: 344,
               y: 0,
             },
           },
           data: {
-            title: 'LLM_1',
+            title: 'LLM_3',
             inputsValues: {
               modelName: {
                 type: 'constant',
@@ -169,7 +212,7 @@ export const initialData: FlowDocumentJSON = {
               },
               prompt: {
                 type: 'constant',
-                content: '# User Input\nquery:{{start_0.query}}\nenable:{{start_0.enable}}',
+                content: '',
               },
             },
             inputs: {
@@ -213,16 +256,16 @@ export const initialData: FlowDocumentJSON = {
           },
         },
         {
-          id: 'llm_vTyMa',
+          id: 'llm_ZqKlP',
           type: 'llm',
           meta: {
             position: {
-              x: 640,
-              y: 10,
+              x: 804,
+              y: 0,
             },
           },
           data: {
-            title: 'LLM_2',
+            title: 'LLM_4',
             inputsValues: {
               modelName: {
                 type: 'constant',
@@ -246,7 +289,7 @@ export const initialData: FlowDocumentJSON = {
               },
               prompt: {
                 type: 'constant',
-                content: '# LLM Input\nresult:{{llm_8--A3.result}}',
+                content: '',
               },
             },
             inputs: {
@@ -289,51 +332,66 @@ export const initialData: FlowDocumentJSON = {
             },
           },
         },
+        {
+          id: 'block_start_PUDtS',
+          type: 'block-start',
+          meta: {
+            position: {
+              x: 32,
+              y: 163.1,
+            },
+          },
+          data: {},
+        },
+        {
+          id: 'block_end_leBbs',
+          type: 'block-end',
+          meta: {
+            position: {
+              x: 1116,
+              y: 163.1,
+            },
+          },
+          data: {},
+        },
       ],
       edges: [
         {
-          sourceNodeID: 'condition_0',
-          targetNodeID: 'llm_8--A3',
-          sourcePortID: 'if_0',
+          sourceNodeID: 'block_start_PUDtS',
+          targetNodeID: 'llm_6aSyo',
         },
         {
-          sourceNodeID: 'llm_8--A3',
-          targetNodeID: 'llm_vTyMa',
+          sourceNodeID: 'llm_6aSyo',
+          targetNodeID: 'llm_ZqKlP',
         },
         {
-          sourceNodeID: 'llm_vTyMa',
-          targetNodeID: 'end_0',
+          sourceNodeID: 'llm_ZqKlP',
+          targetNodeID: 'block_end_leBbs',
         },
       ],
     },
     {
-      id: 'loop_ANNyh',
-      type: 'loop',
+      id: 'group_nYl6D',
+      type: 'group',
       meta: {
         position: {
-          x: 1480,
-          y: 90,
-        },
-      },
-      data: {
-        title: 'Loop_1',
-        loopFor: {
-          type: 'ref',
-          content: ['start_0', 'array_obj'],
+          x: 1644,
+          y: 730.2,
         },
       },
+      data: {},
       blocks: [
         {
-          id: 'llm_6aSyo',
+          id: 'llm_8--A3',
           type: 'llm',
           meta: {
             position: {
-              x: 344,
+              x: 180,
               y: 0,
             },
           },
           data: {
-            title: 'LLM_3',
+            title: 'LLM_1',
             inputsValues: {
               modelName: {
                 type: 'constant',
@@ -357,7 +415,7 @@ export const initialData: FlowDocumentJSON = {
               },
               prompt: {
                 type: 'constant',
-                content: '',
+                content: '# User Input\nquery:{{start_0.query}}\nenable:{{start_0.enable}}',
               },
             },
             inputs: {
@@ -401,16 +459,16 @@ export const initialData: FlowDocumentJSON = {
           },
         },
         {
-          id: 'llm_ZqKlP',
+          id: 'llm_vTyMa',
           type: 'llm',
           meta: {
             position: {
-              x: 804,
-              y: 0,
+              x: 640,
+              y: 10,
             },
           },
           data: {
-            title: 'LLM_4',
+            title: 'LLM_2',
             inputsValues: {
               modelName: {
                 type: 'constant',
@@ -434,7 +492,7 @@ export const initialData: FlowDocumentJSON = {
               },
               prompt: {
                 type: 'constant',
-                content: '',
+                content: '# LLM Input\nresult:{{llm_8--A3.result}}',
               },
             },
             inputs: {
@@ -477,71 +535,23 @@ export const initialData: FlowDocumentJSON = {
             },
           },
         },
-        {
-          id: 'block_start_loop_ANNyh',
-          type: 'block-start',
-          meta: {
-            position: {
-              x: 31.999999999999943,
-              y: 163.1,
-            },
-          },
-          data: {},
-        },
-        {
-          id: 'block_end_loop_ANNyh',
-          type: 'block-end',
-          meta: {
-            position: {
-              x: 1116,
-              y: 163.1,
-            },
-          },
-          data: {},
-        },
       ],
       edges: [
         {
-          sourceNodeID: 'block_start_loop_ANNyh',
-          targetNodeID: 'llm_6aSyo',
+          sourceNodeID: 'condition_0',
+          targetNodeID: 'llm_8--A3',
+          sourcePortID: 'if_f0rOAt',
         },
         {
-          sourceNodeID: 'llm_6aSyo',
-          targetNodeID: 'llm_ZqKlP',
+          sourceNodeID: 'llm_8--A3',
+          targetNodeID: 'llm_vTyMa',
         },
         {
-          sourceNodeID: 'llm_ZqKlP',
-          targetNodeID: 'block_end_loop_ANNyh',
+          sourceNodeID: 'llm_vTyMa',
+          targetNodeID: 'end_0',
         },
       ],
     },
-    {
-      id: 'http_rDGIH',
-      type: 'http',
-      meta: {
-        position: {
-          x: 640,
-          y: 511.20000000000005,
-        },
-      },
-      data: {
-        title: 'HTTP_1',
-        outputs: {
-          type: 'object',
-          properties: {
-            body: {
-              type: 'string',
-            },
-            headers: {
-              type: 'object',
-            },
-            statusCode: {
-              type: 'integer',
-            },
-          },
-        },
-      },
-    },
   ],
   edges: [
     {
@@ -554,12 +564,12 @@ export const initialData: FlowDocumentJSON = {
     },
     {
       sourceNodeID: 'condition_0',
-      targetNodeID: 'llm_8--A3',
+      targetNodeID: 'loop_Ycnsk',
       sourcePortID: 'if_0',
     },
     {
       sourceNodeID: 'condition_0',
-      targetNodeID: 'loop_ANNyh',
+      targetNodeID: 'llm_8--A3',
       sourcePortID: 'if_f0rOAt',
     },
     {
@@ -567,7 +577,7 @@ export const initialData: FlowDocumentJSON = {
       targetNodeID: 'end_0',
     },
     {
-      sourceNodeID: 'loop_ANNyh',
+      sourceNodeID: 'loop_Ycnsk',
       targetNodeID: 'end_0',
     },
   ],

apps/demo-free-layout/src/plugins/runtime-plugin/runtime-service/index.ts

@@ -73,11 +73,15 @@ export class WorkflowRuntimeService {
     );
   }
 
-  public async taskRun(inputs: WorkflowInputs): Promise<void> {
+  public async taskRun(inputs: WorkflowInputs): Promise<string | undefined> {
     if (this.taskID) {
       await this.taskCancel();
     }
-    if (!this.validateForm()) {
+    const isFormValid = await this.validateForm();
+    if (!isFormValid) {
+      this.resultEmitter.fire({
+        errors: ['Form validation failed'],
+      });
       return;
     }
     const schema = this.document.toJSON();
@@ -92,18 +96,30 @@ export class WorkflowRuntimeService {
       return;
     }
     this.reset();
-    const output = await this.runtimeClient.TaskRun({
-      schema: JSON.stringify(schema),
-      inputs,
-    });
-    if (!output) {
-      this.resultEmitter.fire({});
+    let taskID: string | undefined;
+    try {
+      const output = await this.runtimeClient.TaskRun({
+        schema: JSON.stringify(schema),
+        inputs,
+      });
+      taskID = output?.taskID;
+    } catch (e) {
+      this.resultEmitter.fire({
+        errors: [(e as Error)?.message],
+      });
+      return;
+    }
+    if (!taskID) {
+      this.resultEmitter.fire({
+        errors: ['Task run failed'],
+      });
       return;
     }
-    this.taskID = output.taskID;
+    this.taskID = taskID;
     this.syncTaskReportIntervalID = setInterval(() => {
       this.syncTaskReport();
     }, SYNC_TASK_REPORT_INTERVAL);
+    return this.taskID;
   }
 
   public async taskCancel(): Promise<void> {