fix: get correct data type by spec (#17)

Author: NewByVector

packages/secretnote/src/components/log-viewer/view.tsx

@@ -111,7 +111,12 @@ const LogView = (props: IProps) => {
     });
     setTerminalInstance(instance);
     return () => {
-      instance.dispose();
+      // https://github.com/xtermjs/xterm.js/issues/4757#issuecomment-1712841561
+      try {
+        instance.dispose();
+      } catch (e) {
+        // pass
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

packages/secretnote/src/modules/component-cell/cell-component/cell-code.ts

@@ -0,0 +1,149 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ComponentSpec, Value, IOType } from '@/components/component-form';
+
+const clusterConfig = {
+  public_config: {
+    ray_fed_config: {
+      parties: ['alice', 'bob'],
+      addresses: ['alice:8000', 'bob:8000'],
+    },
+    spu_configs: [
+      {
+        name: 'spu',
+        parties: ['alice', 'bob'],
+        addresses: ['alice:8001', 'bob:8001'],
+      },
+    ],
+  },
+  private_config: { self_party: '{self_party}', ray_head_addr: '127.0.0.1:6379' },
+  desc: {
+    parties: ['alice', 'bob'],
+    devices: [
+      {
+        name: 'spu',
+        type: 'spu',
+        parties: ['alice', 'bob'],
+        config:
+          '{"runtime_config":{"protocol":"REF2K","field":"FM64"},"link_desc":{"connect_retry_times":60,"connect_retry_interval_ms":1000,"brpc_channel_protocol":"http","brpc_channel_connection_type":"pooled","recv_timeout_ms":1200000,"http_timeout_ms":1200000}}',
+      },
+    ],
+  },
+};
+
+const getAttrValue = (component: ComponentSpec, key: string, value: any) => {
+  const commonAttr = (component.attrs || []).find((attr) => attr.name === key);
+  if (commonAttr) {
+    const type = commonAttr.type;
+    switch (type) {
+      case 'AT_INT':
+        return { i64: value };
+      case 'AT_BOOL':
+        return { b: value };
+      case 'AT_STRING':
+        return { s: value };
+      default:
+        return { s: value };
+    }
+  } else {
+    // input has no marked data type in the attr, so it can only be fixed
+    return { ss: [value] };
+  }
+};
+
+const getIOMetaType = (type: IOType) => {
+  if (type === 'sf.table.individual') {
+    return 'type.googleapis.com/secretflow.spec.v1.IndividualTable';
+  } else if (type === 'sf.table.vertical_table') {
+    return 'type.googleapis.com/secretflow.spec.v1.VerticalTable';
+  }
+  return '';
+};
+
+const generateComponentCellCode = (component: ComponentSpec, config: Value) => {
+  if (!(component && config)) {
+    return '';
+  }
+
+  const componentConfig: any = {
+    domain: component.domain,
+    name: component.name,
+    version: component.version,
+    attr_paths: [],
+    attrs: [],
+    inputs: [],
+    output_uris: [],
+  };
+
+  const { input, output, ...others } = config;
+
+  // attr
+  Object.entries(others).forEach(([key, value]) => {
+    componentConfig.attr_paths.push(key);
+    const attrValue = getAttrValue(component, key, value);
+    componentConfig.attrs.push(attrValue);
+  });
+
+  // input
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Object.entries(input).forEach(([key, value]: [string, any]) => {
+    const { type, tables } = value;
+
+    if (type && tables) {
+      componentConfig.inputs.push({
+        name: key,
+        type: type,
+        data_refs: tables.data_ref.map((ref: any) => ({
+          uri: ref.uri,
+          party: ref.party,
+          format: 'csv',
+        })),
+        meta: {
+          '@type': getIOMetaType(type),
+          schema: tables.schema,
+          line_count: -1,
+        },
+      });
+    }
+  });
+
+  // output
+  Object.entries(output).forEach(([, value]) => {
+    componentConfig.output_uris.push(value);
+  });
+
+  return `
+    from secretflow.spec.v1.evaluation_pb2 import NodeEvalParam
+    from secretflow.spec.extend.cluster_pb2 import SFClusterConfig
+    from secretflow.component.entry import comp_eval
+    from google.protobuf.json_format import Parse
+    from secretflow.spec.v1.data_pb2 import StorageConfig
+    import os
+
+    cluster_config_str = r"""
+    ${JSON.stringify(clusterConfig)}
+    """
+
+
+    component_config_str = r"""
+    ${JSON.stringify(componentConfig)}
+    """
+
+    self_party = os.getenv("SELF_PARTY", "alice")
+    cluster_config = SFClusterConfig()
+    Parse(cluster_config_str.replace('{self_party}', self_party), cluster_config)
+
+    node_eval_config = NodeEvalParam()
+    Parse(component_config_str, node_eval_config)
+
+    storage_config = StorageConfig(
+        type="local_fs",
+        local_fs=StorageConfig.LocalFSConfig(wd="/home/vscode/examples"),
+    )
+
+    res = comp_eval(node_eval_config, storage_config, cluster_config)
+
+    print(f"The execution is complete and the result is: \\n{res}")
+    `;
+};
+
+export { generateComponentCellCode };

packages/secretnote/src/modules/component-cell/cell-component/index.less

@@ -54,6 +54,14 @@
       }
     }
   }
+
+  .loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .component-cascader {

packages/secretnote/src/modules/component-cell/cell-component/index.tsx

@@ -1,11 +1,12 @@
 import type { IOutput } from '@difizen/libro-jupyter';
-import { Tabs, type TabsProps, Empty } from 'antd';
-import { forwardRef, type ForwardedRef, useMemo, useEffect } from 'react';
+import { Tabs, type TabsProps, Empty, Spin } from 'antd';
+import { forwardRef, type ForwardedRef, useMemo } from 'react';
 
 import { ComponentForm } from '@/components/component-form';
 import type { ComponentSpec, Value } from '@/components/component-form';
 import LogView from '@/components/log-viewer';
 
+import { generateComponentCellCode } from './cell-code';
 import { ComponentOptions, getComponentByIds, getComponentIds } from './options';
 import './index.less';
 
@@ -15,6 +16,7 @@ interface CellComponentProps {
   defaultComponentConfig?: Value;
   onComponentConfigChange?: (changedValues: Value, values: Value) => void;
   outputs: IOutput[];
+  loading?: boolean;
 }
 
 const CellComponent = forwardRef(
@@ -26,6 +28,7 @@ const CellComponent = forwardRef(
       defaultComponentConfig,
       onComponentConfigChange,
       outputs,
+      loading,
     } = props;
 
     const outputLogs = useMemo(() => {
@@ -49,7 +52,17 @@ const CellComponent = forwardRef(
       {
         key: '1',
         label: 'Log',
-        children: <div className="sf-component-log">{outputLogs}</div>,
+        children: (
+          <div className="sf-component-log">
+            {loading ? (
+              <div className="loading">
+                <Spin />
+              </div>
+            ) : (
+              outputLogs
+            )}
+          </div>
+        ),
       },
       {
         key: '2',
@@ -102,4 +115,4 @@ const CellComponent = forwardRef(
 );
 CellComponent.displayName = 'CellComponent';
 
-export { CellComponent, getComponentByIds, getComponentIds };
+export { CellComponent, getComponentByIds, getComponentIds, generateComponentCellCode };