refactor: fix import typo in node-renderer/index.ts (#1861)

eosphoros-ai · Aug 21, 2024 · fc4c5ee · fc4c5ee
2 parents 0585158 + 3997754
commit fc4c5ee
Show file tree

Hide file tree

Showing 20 changed files with 223 additions and 536 deletions.
diff --git a/web/app/i18n.ts b/web/app/i18n.ts
@@ -1,12 +1,13 @@
+import { Domain } from '@mui/icons-material';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 const en = {
-  UploadDataSuccessfully: 'file uploaded successfully',
-  UploadDataFailed: 'file upload failed',
-  UploadData: 'Upload Data',
-  CodeEditor: 'Code Editor:',
-  openCodeEditor:'Open Code Editor',
+  Upload_Data_Successfully: 'file uploaded successfully',
+  Upload_Data_Failed: 'file upload failed',
+  Upload_Data: 'Upload Data',
+  Code_Editor: 'Code Editor',
+  Open_Code_Editor: 'Open Code Editor',
   Knowledge_Space: 'Knowledge',
   space: 'space',
   Vector: 'Vector',
@@ -23,6 +24,7 @@ const en = {
   Please_select_file: 'Please select one file',
   Description: 'Description',
   Storage: 'Storage',
+  Domain: 'Domain',
   Please_input_the_description: 'Please input the description',
   Please_select_the_storage: 'Please select the storage',
   Please_select_the_domain_type: 'Please select the domain type',
@@ -229,7 +231,7 @@ const en = {
   Chinese: 'Chinese',
   English: 'English',
   refreshSuccess: 'Refresh Success',
-  Download: 'Download'
+  Download: 'Download',
 } as const;
 
 export type I18nKeys = keyof typeof en;
@@ -239,11 +241,11 @@ export interface Resources {
 }
 
 const zh: Resources['translation'] = {
-  UploadDataSuccessfully: '文件上传成功',
-  UploadDataFailed: '文件上传失败',
-  UploadData: '上传数据',
-  CodeEditor: '代码编辑:',
-  openCodeEditor: '打开代码编辑器',
+  Upload_Data_Successfully: '文件上传成功',
+  Upload_Data_Failed: '文件上传失败',
+  Upload_Data: '上传数据',
+  Code_Editor: '代码编辑器',
+  Open_Code_Editor: '打开代码编辑器',
   Knowledge_Space: '知识库',
   space: '知识库',
   Vector: '向量',

diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx
@@ -71,68 +71,58 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
     reactFlow.setEdges((edges) => edges.filter((edge) => edge.source !== node.id && edge.target !== node.id));
   }
 
-  // function onChange(value: any) {
-  //   data.value = value;
-  // }
-
-  function onValuesChange(changedValues: any, allValues: any) {
-    // onChange(changedValues);
-    console.log('Changed xxx', changedValues);
-    console.log('All xxx', allValues);
-    console.log('xxxx', parameters);
+  function updateCurrentNodeValue(changedKey: string, changedVal: any) {
+    parameters.forEach((item) => {
+      if (item.name === changedKey) {
+        item.value = changedVal;
+      }
+    });
+  }
 
-    const [changedKey, changedVal] = Object.entries(changedValues)[0];
-    console.log('====', changedKey, changedVal);
+  async function updateDependsNodeValue(changedKey: string, changedVal: any) {
+    if (!changedVal) return;
 
-    // 获取以当前改变项目为 refresh_depends 的参数name
-    const needChangeNodes = parameters.filter(({ ui }) => ui?.refresh_depends?.includes(changedKey));
-    console.log('needChangeNodes====', needChangeNodes);
+    const dependParamNodes = parameters.filter(({ ui }) => ui?.refresh_depends?.includes(changedKey));
 
-    if (needChangeNodes?.length === 0) return;
+    if (dependParamNodes?.length === 0) return;
 
-    needChangeNodes.forEach(async (item) => {
+    dependParamNodes.forEach(async (item) => {
       const params = {
         id: removeIndexFromNodeId(data?.id),
         type_name: data.type_name,
         type_cls: data.type_cls,
         flow_type: 'operator' as const,
         refresh: [
           {
-            name: item.name, // 要刷新的参数的name
+            name: item.name,
             depends: [
               {
-                name: changedKey, // 依赖的参数的name
-                value: changedVal, // 依赖的参数的值
+                name: changedKey,
+                value: changedVal,
                 has_value: true,
               },
             ],
           },
         ],
       };
 
-      // const params = {
-      //   id: 'operator_example_refresh_operator___$$___example___$$___v1',
-      //   type_name: 'ExampleFlowRefreshOperator',
-      //   type_cls: 'unusual_prefix_90027f35e50ecfda77e3c7c7b20a0272d562480c_awel_flow_ui_components.ExampleFlowRefreshOperator',
-      //   flow_type: 'operator' as const,
-      //   refresh: [
-      //     {
-      //       name: 'recent_time', // 要刷新的参数的name
-      //       depends: [
-      //         {
-      //           name: 'time_interval', // 依赖的参数的name
-      //           value: 3, // 依赖的参数的值
-      //           has_value: true,
-      //         },
-      //       ],
-      //     },
-      //   ],
-      // };
-
       const [_, res] = await apiInterceptors(refreshFlowNodeById(params));
+      // TODO: update node value
+      console.log('res', res);
     });
   }
 
+  function onParameterValuesChange(changedValues: any, allValues: any) {
+    // TODO: update node value
+    console.log('Changed xxx', changedValues);    
+    console.log('All xxx', allValues);
+
+    const [changedKey, changedVal] = Object.entries(changedValues)[0];
+
+    updateCurrentNodeValue(changedKey, changedVal);
+    updateDependsNodeValue(changedKey, changedVal);
+  }
+
   return (
     <Popover
       placement="rightTop"
@@ -194,15 +184,11 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
         {parameters?.length > 0 && (
           <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
             <TypeLabel label="Parameters" />
-            {/* <div className="flex flex-col space-y-3 text-neutral-500"> */}
-
-            <Form form={form} layout="vertical" onValuesChange={onValuesChange} className="flex flex-col text-neutral-500">
+            <Form form={form} layout="vertical" onValuesChange={onParameterValuesChange} className="flex flex-col space-y-3 text-neutral-500">
               {parameters?.map((item, index) => (
-                <NodeParamHandler key={`${node.id}_param_${index}`} node={node} data={item} label="parameters" index={index} />
+                <NodeParamHandler key={`${node.id}_param_${index}`} node={node} paramData={item} label="parameters" index={index} />
               ))}
             </Form>
-
-            {/* </div> */}
           </div>
         )}
 

diff --git a/web/components/flow/node-handler.tsx b/web/components/flow/node-handler.tsx
@@ -101,10 +101,8 @@ const NodeHandler: React.FC<NodeHandlerProps> = ({ node, data, type, label, inde
         isValidConnection={(connection) => isValidConnection(connection)}
       />
       <Typography
-        className={classNames('bg-white dark:bg-[#232734] w-full py-1 rounded text-neutral-500', {
+        className={classNames('bg-white dark:bg-[#232734] w-full px-2 py-1 rounded text-neutral-500', {
           'text-right': label === 'outputs',
-          'pl-2': label === 'inputs',
-          'pr-2': label === 'outputs',
         })}
       >
         <Popconfirm