[improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. (#431)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { Form, Input, Spin, Select, message } from 'antd';
 import type { FormInstance } from 'antd/lib/form';
 import { getDbNames, getTables } from '../../service';
-import SqlEditor from '@/components/SqlEditor';
 import { ISemantic } from '../../data';
+import { isString } from 'lodash';
 
 const FormItem = Form.Item;
 const { TextArea } = Input;
@@ -109,28 +109,40 @@ const DataSourceBasicForm: React.FC<Props> = ({ isEdit, databaseConfigList, mode
 
       <FormItem
         name="name"
-        label="数据源中文名"
-        rules={[{ required: true, message: '请输入数据源中文名' }]}
+        label="模型中文名"
+        rules={[{ required: true, message: '请输入模型中文名' }]}
       >
         <Input placeholder="名称不可重复" />
       </FormItem>
       <FormItem
         name="bizName"
-        label="数据源英文名"
-        rules={[{ required: true, message: '请输入数据源英文名' }]}
+        label="模型英文名"
+        rules={[{ required: true, message: '请输入模型英文名' }]}
       >
         <Input placeholder="名称不可重复" disabled={isEdit} />
       </FormItem>
-      <FormItem name="description" label="数据源描述">
-        <TextArea placeholder="请输入数据源描述" />
-      </FormItem>
-      {/* <FormItem
-        name="filterSql"
-        label="过滤SQL"
-        tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
+      <FormItem
+        name="alias"
+        label="别名"
+        getValueFromEvent={(value) => {
+          return value.join(',');
+        }}
+        getValueProps={(value) => {
+          return {
+            value: isString(value) ? value.split(',') : [],
+          };
+        }}
       >
-        <SqlEditor height={'150px'} />
-      </FormItem> */}
+        <Select
+          mode="tags"
+          placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
+          tokenSeparators={[',']}
+          maxTagCount={9}
+        />
+      </FormItem>
+      <FormItem name="description" label="模型描述">
+        <TextArea placeholder="请输入模型描述" />
+      </FormItem>
     </Spin>
   );
 };

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx

@@ -5,7 +5,7 @@ import DataSourceFieldForm from './DataSourceFieldForm';
 import { formLayout } from '@/components/FormHelper/utils';
 import { EnumDataSourceType } from '../constants';
 import styles from '../style.less';
-import { createDatasource, updateDatasource, getColumns } from '../../service';
+import { updateModel, createModel, getColumns } from '../../service';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
 import { connect } from 'umi';
@@ -29,9 +29,9 @@ export type CreateFormProps = {
 const { Step } = Steps;
 
 const initFormVal = {
-  name: '', // 数据源名称
-  bizName: '', // 数据源英文名
-  description: '', // 数据源描述
+  name: '', // 模型名称
+  bizName: '', // 模型英文名
+  description: '', // 模型描述
 };
 
 const DataSourceCreateForm: React.FC<CreateFormProps> = ({
@@ -56,7 +56,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   const [formDatabaseId, setFormDatabaseId] = useState<number>();
   const formValRef = useRef(initFormVal as any);
   const [form] = Form.useForm();
-  const { databaseConfigList, selectModelId: modelId } = domainManger;
+  const { databaseConfigList, selectModelId: modelId, selectDomainId } = domainManger;
   const updateFormVal = (val: any) => {
     formValRef.current = val;
   };
@@ -170,18 +170,22 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       const { dbName, tableName } = submitForm;
       const queryParams = {
         ...submitForm,
-        sqlQuery: sql,
         databaseId: databaseId || dataSourceItem?.databaseId || formDatabaseId,
-        queryType: basicInfoFormMode === 'fast' ? 'table_query' : 'sql_query',
-        tableQuery: dbName && tableName ? `${dbName}.${tableName}` : '',
         modelId: isEdit ? dataSourceItem.modelId : modelId,
         filterSql: sqlFilter,
+        domainId: isEdit ? dataSourceItem.domainId : selectDomainId,
+        modelDetail: {
+          ...submitForm,
+          queryType: basicInfoFormMode === 'fast' ? 'table_query' : 'sql_query',
+          tableQuery: dbName && tableName ? `${dbName}.${tableName}` : '',
+          sqlQuery: sql,
+        },
       };
-      const queryDatasource = isEdit ? updateDatasource : createDatasource;
+      const queryDatasource = isEdit ? updateModel : createModel;
       const { code, msg, data } = await queryDatasource(queryParams);
       setSaveLoading(false);
       if (code === 200) {
-        message.success('保存数据源成功！');
+        message.success('保存模型成功！');
         onSubmit?.({
           ...queryParams,
           ...data,
@@ -196,7 +200,13 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   const initFields = (fieldsClassifyList: any[], columns: any[]) => {
     const columnFields: any[] = columns.map((item: any) => {
       const { type, nameEn } = item;
-      const oldItem = fieldsClassifyList.find((oItem) => oItem.bizName === item.nameEn) || {};
+      const oldItem =
+        fieldsClassifyList.find((oItem) => {
+          if (oItem.type === EnumDataSourceType.MEASURES) {
+            return oItem.expr === item.nameEn;
+          }
+          return oItem.bizName === item.nameEn;
+        }) || {};
       return {
         ...oldItem,
         bizName: nameEn,
@@ -225,7 +235,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   };
 
   const initData = async () => {
-    const { queryType, tableQuery } = dataSourceItem.datasourceDetail;
+    const { queryType, tableQuery } = dataSourceItem?.modelDetail || {};
     let tableQueryInitValue = {};
     let columns = fieldColumns || [];
     if (queryType === 'table_query') {
@@ -241,9 +251,9 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   };
 
   const formatterInitData = (columns: any[], extendParams: Record<string, any> = {}) => {
-    const { id, name, bizName, description, datasourceDetail, databaseId, filterSql } =
+    const { id, name, bizName, description, modelDetail, databaseId, filterSql, alias } =
       dataSourceItem as any;
-    const { dimensions, identifiers, measures } = datasourceDetail;
+    const { dimensions, identifiers, measures } = modelDetail || {};
     const initValue = {
       id,
       name,
@@ -251,8 +261,8 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       description,
       databaseId,
       filterSql,
+      alias,
       ...extendParams,
-      // ...tableQueryInitValue,
     };
     const editInitFormVal = {
       ...formValRef.current,
@@ -270,7 +280,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   };
 
   useEffect(() => {
-    const { queryType } = dataSourceItem?.datasourceDetail || {};
+    const { queryType } = dataSourceItem?.modelDetail || {};
     if (queryType === 'table_query') {
       if (isEdit) {
         initData();
@@ -281,7 +291,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   }, [dataSourceItem]);
 
   useEffect(() => {
-    const { queryType } = dataSourceItem?.datasourceDetail || {};
+    const { queryType } = dataSourceItem?.modelDetail || {};
     if (queryType !== 'table_query') {
       if (isEdit) {
         initData();
@@ -358,14 +368,17 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
             上一步
           </Button>
           <Button onClick={onCancel}>取 消</Button>
-          <Button
-            type="primary"
-            onClick={() => {
-              onDataSourceBtnClick?.();
-            }}
-          >
-            数据源编辑
-          </Button>
+          {(dataSourceItem?.modelDetail?.queryType === 'sql_query' ||
+            basicInfoFormMode !== 'fast') && (
+            <Button
+              type="primary"
+              onClick={() => {
+                onDataSourceBtnClick?.();
+              }}
+            >
+              数据源编辑
+            </Button>
+          )}
 
           <Button
             type="primary"
@@ -385,11 +398,12 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
         <Button onClick={onCancel}>取消</Button>
         <Button
           type="primary"
-          onClick={() => {
-            handleNext();
+          onClick={async () => {
             if (!isEdit && Array.isArray(fields) && fields.length === 0) {
+              await form.validateFields();
               onOpenDataSourceEdit?.();
             }
+            handleNext();
           }}
         >
           下一步
@@ -401,7 +415,6 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
             onClick={() => {
               handleNext(true);
             }}
-            // disabled={hasEmptyNameField}
           >
             保 存
           </Button>
@@ -414,9 +427,8 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     <Modal
       forceRender
       width={1300}
-      // styles={{ padding: '32px 40px 48px' }}
       destroyOnClose
-      title={`${isEdit ? '编辑' : '新建'}数据源`}
+      title={`${isEdit ? '编辑' : '新建'}模型`}
       maskClosable={false}
       open={createModalVisible}
       footer={renderFooter()}

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx

@@ -14,6 +14,7 @@ import {
 import styles from '../style.less';
 
 type FieldItem = {
+  expr?: string;
   bizName: string;
   sqlType: string;
   name: string;
@@ -144,7 +145,7 @@ const FieldForm: React.FC<Props> = ({ fields, sql, onFieldChange, onSqlChange })
           );
         }
         if (type === EnumDataSourceType.MEASURES) {
-          const agg = fields.find((field) => field.bizName === record.bizName)?.agg;
+          const agg = fields.find((field) => field.expr === record.expr)?.agg;
           return (
             <Select
               placeholder="度量算子"

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx

@@ -63,7 +63,7 @@ const SqlSide: React.FC<Props> = ({ initialValues, onSubmitSuccess }) => {
 
   useEffect(() => {
     if (initialValues) {
-      updateTabSql(initialValues?.datasourceDetail?.sqlQuery || '', '数据源查询');
+      updateTabSql(initialValues?.modelDetail?.sqlQuery || '', '数据源查询');
     }
   }, [initialValues]);