feat: 主动学习添加可视化结果

react-ui/src/pages/ActiveLearn/Instance/index.tsx

@@ -12,6 +12,7 @@ import ActiveLearnBasic from '../components/ActiveLearnBasic';
 import ExperimentHistory from '../components/ExperimentHistory';
 import ExperimentLog from '../components/ExperimentLog';
 import ExperimentResult from '../components/ExperimentResult';
+import ExperimentVisualResult from '../components/ExperimentVisualResult';
 import { ActiveLearnData, ActiveLearnInstanceData } from '../types';
 import styles from './index.less';
 
@@ -20,6 +21,7 @@ enum TabKeys {
   Log = 'log',
   Result = 'result',
   History = 'history',
+  Visual = 'Visual',
 }
 
 const NodePrefix = 'workflow';
@@ -187,6 +189,12 @@ function ActiveLearnInstance() {
         />
       ),
     },
+    {
+      key: TabKeys.Visual,
+      label: '可视化结果',
+      icon: <KFIcon type="icon-Trialliebiao" />,
+      children: <ExperimentVisualResult metricsId={experimentInfo?.experiment_ins_id} />,
+    },
   ];
 
   const tabItems =

react-ui/src/pages/ActiveLearn/components/ExperimentVisualResult/index.tsx

@@ -0,0 +1,38 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-09-02 08:42:57
+ * @Description: 可视化
+ */
+
+import IframePage, { IframePageType } from '@/components/IFramePage';
+import { getExpMetricsReq } from '@/services/experiment/index.js';
+import { to } from '@/utils/promise';
+import SessionStorage from '@/utils/sessionStorage';
+import { useEffect, useState } from 'react';
+
+type ExperimentVisualResultProps = {
+  metricsId?: string;
+};
+
+function ExperimentVisualResult({ metricsId }: ExperimentVisualResultProps) {
+  const [aimUrl, setAimUrl] = useState('');
+  useEffect(() => {
+    // 获取 AIM Url
+    const getExpMetrics = async (metricsId: string) => {
+      const [res] = await to(getExpMetricsReq([metricsId]));
+      if (res && res.data) {
+        const url = res.data;
+        SessionStorage.setItem(SessionStorage.aimUrlKey, url);
+        setAimUrl(url);
+      }
+    };
+
+    if (metricsId) {
+      getExpMetrics(metricsId);
+    }
+  }, [metricsId]);
+
+  return <>{aimUrl && <IframePage type={IframePageType.Aim}></IframePage>}</>;
+}
+
+export default ExperimentVisualResult;

react-ui/src/pages/ActiveLearn/types.ts

@@ -52,6 +52,7 @@ export type ActiveLearnData = {
   update_by?: string;
   update_time?: string;
   status_list: string; // 最近五次运行状态
+  experiment_ins_id: string;
 } & FormData;
 
 // 主动学习实验实例

react-ui/src/pages/AutoML/components/ExperimentInstance/index.less

@@ -11,11 +11,11 @@
   }
 
   .check {
-    width: calc((100% + 32px + 33px) / 6.25 / 2);
+    width: calc((100% + 32px + 33px) / 5 / 2);
   }
 
   .index {
-    width: calc((100% + 32px + 33px) / 6.25 / 2);
+    width: calc((100% + 32px + 33px) / 5 / 2);
   }
 
   .description {

react-ui/src/pages/AutoML/components/ExperimentList/index.tsx

@@ -249,7 +249,7 @@ function ExperimentList({ type }: ExperimentListProps) {
       title: '类型',
       dataIndex: 'type',
       key: 'type',
-      width: 120,
+      width: '10%',
       render: tableCellRender(false, TableCellValueType.Enum, {
         options: autoMLTypeOptions,
       }),
@@ -263,7 +263,7 @@ function ExperimentList({ type }: ExperimentListProps) {
       title: '实验名称',
       dataIndex: config.nameProperty,
       key: 'name',
-      width: '16%',
+      width: '20%',
       render: tableCellRender(false, TableCellValueType.Link, {
         onClick: gotoDetail,
       }),

react-ui/src/pages/AutoML/components/TensorBoard/index.tsx

@@ -26,8 +26,9 @@ function TensorBoard({ namespace, path }: TensorBoardProps) {
       };
       const [res] = await to(runTensorBoardReq(params));
       if (res && res.data) {
-        SessionStorage.setItem(SessionStorage.tensorBoardUrlKey, res.data);
-        setTensorboardUrl(res.data);
+        const url = res.data;
+        SessionStorage.setItem(SessionStorage.tensorBoardUrlKey, url);
+        setTensorboardUrl(url);
       }
     };
 

react-ui/src/pages/Points/index.tsx

@@ -21,6 +21,8 @@ enum TaskType {
   Workflow = 'workflow',
   Ray = 'ray',
   Service = 'service',
+  AutoML = 'machine_learn',
+  ActiveLearn = 'active_learn',
 }
 
 const taskTypeOptions = [
@@ -40,6 +42,14 @@ const taskTypeOptions = [
     value: TaskType.Service,
     label: '服务',
   },
+  {
+    value: TaskType.AutoML,
+    label: '自动机器学习',
+  },
+  {
+    value: TaskType.ActiveLearn,
+    label: '主动学习',
+  },
 ];
 
 export type PointsData = {
@@ -57,6 +67,7 @@ export type PointsData = {
   task_ins_id: number; // 实例id
   task_type: string;
   user_id: number;
+  task_state: 0 | 1; // 任务是否被删除，0：删除
 };
 
 export type PointsStatistics = {
@@ -81,6 +92,16 @@ const formatTask = (value: string, record: PointsData) => {
         url = `/pipeline/hyperparameter/instance/${record.task_id}/${record.task_ins_id}`;
       }
       break;
+    case TaskType.AutoML:
+      if (record.task_id && record.task_ins_id) {
+        url = `/pipeline/automl/instance/${record.task_id}/${record.task_ins_id}`;
+      }
+      break;
+    case TaskType.ActiveLearn:
+      if (record.task_id && record.task_ins_id) {
+        url = `/pipeline/active-learn/instance/${record.task_id}/${record.task_ins_id}`;
+      }
+      break;
     case TaskType.Service:
       if (record.task_id && record.task_ins_id) {
         url = `/dataset/modelDeployment/serviceInfo/${record.task_id}/versionInfo/${record.task_ins_id}`;
@@ -90,7 +111,7 @@ const formatTask = (value: string, record: PointsData) => {
       break;
   }
 
-  if (url) {
+  if (url && record.task_state === 1) {
     return <Link to={url}>{value}</Link>;
   } else {
     return <span>{value}</span>;