ci4sManagement-cloud/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx

import BasicTableInfo, { BasicInfoData } from '@/components/BasicTableInfo';
import SubAreaTitle from '@/components/SubAreaTitle';
import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceInfo';
import {
  DataSource,
  DatasetData,
  ModelData,
  ProjectDependency,
  ResourceType,
  TrainTask,
  resourceConfig,
} from '@/pages/Dataset/config';
import ModelMetrics from '@/pages/Model/components/ModelMetrics';
import { getGitUrl } from '@/utils';
import styles from './index.less';

type ResourceIntroProps = {
  resourceType: ResourceType;
  info: DatasetData | ModelData;
  resourceId: number;
  identifier: string;
  owner: string;
  version?: string;
};

const formatDataset = (datasets?: DatasetData[]) => {
  if (!datasets || datasets.length === 0) {
    return undefined;
  }
  return datasets.map((item) => ({
    value: item.name,
    url: `${origin}/dataset/dataset/info/${item.id}?tab=${ResourceInfoTabKeys.Version}&version=${item.version}&name=${item.name}&owner=${item.owner}&identifier=${item.identifier}`,
  }));
};

const getProjectUrl = (project?: ProjectDependency) => {
  if (!project || !project.url || !project.branch) {
    return undefined;
  }
  const { url, branch } = project;
  return getGitUrl(url, branch);
};

const formatProject = (project?: ProjectDependency) => {
  if (!project) {
    return undefined;
  }
  return {
    value: project.name,
    url: getProjectUrl(project),
  };
};

const formatTrainTask = (task?: TrainTask) => {
  if (!task) {
    return undefined;
  }
  return {
    value: task.name,
    url: `${origin}/pipeline/experiment/instance/${task.workflow_id}/${task.ins_id}`,
  };
};

const formatSource = (source?: string) => {
  if (source === DataSource.Create) {
    return '用户上传';
  } else if (source === DataSource.HandExport) {
    return '手动导入';
  } else if (source === DataSource.AtuoExport) {
    return '实验自动导入';
  }
  return source;
};

const getDatasetDatas = (data: DatasetData): BasicInfoData[] => [
  {
    label: '数据集名称',
    value: data.name,
    ellipsis: true,
  },
  {
    label: '版本',
    value: data.version,
    ellipsis: true,
  },
  {
    label: '创建人',
    value: data.create_by,
    ellipsis: true,
  },
  {
    label: '更新时间',
    value: data.update_time,
    ellipsis: true,
  },
  {
    label: '数据来源',
    value: data.dataset_source,
    format: formatSource,
    ellipsis: true,
  },
  {
    label: '训练任务',
    value: data.train_task,
    format: formatTrainTask,
    ellipsis: true,
  },
  {
    label: '处理代码',
    value: data.processing_code,
    format: formatProject,
    ellipsis: true,
  },
  {
    label: '数据集分类',
    value: data.data_type,
    ellipsis: true,
  },
  {
    label: '研究方向',
    value: data.data_tag,
    ellipsis: true,
  },
];

const getModelDatas = (data: ModelData): BasicInfoData[] => [
  {
    label: '模型名称',
    value: data.name,
    ellipsis: true,
  },
  {
    label: '版本',
    value: data.version,
    ellipsis: true,
  },
  {
    label: '创建人',
    value: data.create_by,
    ellipsis: true,
  },
  {
    label: '更新时间',
    value: data.update_time,
    ellipsis: true,
  },
  {
    label: '训练镜像',
    value: data.image,
    ellipsis: true,
  },
  {
    label: '训练代码',
    value: data.project_depency,
    format: formatProject,
    ellipsis: true,
  },
  {
    label: '训练数据集',
    value: data.train_datasets,
    format: formatDataset,
    ellipsis: true,
  },
  {
    label: '测试数据集',
    value: data.test_datasets,
    format: formatDataset,
    ellipsis: true,
  },
  {
    label: '模型来源',
    value: data.model_source,
    format: formatSource,
    ellipsis: true,
  },
  {
    label: '训练任务',
    value: data.train_task,
    format: formatTrainTask,
    ellipsis: true,
  },
  {
    label: '模型框架',
    value: data.model_type,
    ellipsis: true,
  },
  {
    label: '模型能力',
    value: data.model_tag,
    ellipsis: true,
  },
];

function ResourceIntro({
  resourceType,
  info,
  resourceId,
  identifier,
  owner,
  version,
}: ResourceIntroProps) {
  const config = resourceConfig[resourceType];
  const basicDatas: BasicInfoData[] =
    resourceType === ResourceType.Dataset
      ? getDatasetDatas(info as DatasetData)
      : getModelDatas(info as ModelData);

  return (
    <div className={styles['resource-intro']}>
      <div className={styles['resource-intro__top']}>
        <SubAreaTitle
          title="基本信息"
          image={require('@/assets/img/mirror-basic.png')}
          style={{ marginBottom: '15px' }}
        ></SubAreaTitle>
        <div className={styles['resource-intro__top__basic']}>
          <BasicTableInfo datas={basicDatas} labelWidth={135}></BasicTableInfo>
        </div>
        <div className={styles['resource-intro__top__title']}>{`${config.name}描述`}</div>
        <div className={styles['resource-intro__top__desc']}>{info.description ?? '暂无描述'}</div>
        <div className={styles['resource-intro__top__title']}>版本描述</div>
        <div className={styles['resource-intro__top__desc']}>{info.version_desc ?? '暂无描述'}</div>
        <SubAreaTitle
          title="实例用法"
          image={require('@/assets/img/usage-icon.png')}
          style={{ margin: '25px 0 15px' }}
        ></SubAreaTitle>
        <div
          className={styles['resource-intro__top__usage']}
          dangerouslySetInnerHTML={{ __html: info.usage ?? '暂无实例用法' }}
        ></div>
      </div>
      {resourceType === ResourceType.Model && version && (
        <ModelMetrics
          resourceId={resourceId}
          identifier={identifier}
          owner={owner}
          version={version}
        ></ModelMetrics>
      )}
    </div>
  );
}

export default ResourceIntro;