[improvement][semantic-fe] Added an editing component to set filtering rules for Q&A. Now, the SQL editor will be accompanied by a list for display and control, to resolve ambiguity when using comma-separated values.

[improvement][semantic-fe] Improved validation logic and prompt copywriting for data source/dimension/metric editing and creation.
[improvement][semantic-fe] Improved user experience for visual modeling. Now, when using the legend to control the display/hide of data sources and their associated metric dimensions, the canvas will be re-layout based on the activated data source in the legend.

Co-authored-by: tristanliu <tristanliu@tencent.com>

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

@@ -6,14 +6,9 @@ import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../model';
 import { SENSITIVE_LEVEL_ENUM } from '../constant';
-import {
-  getDatasourceList,
-  getDimensionList,
-  createDimension,
-  updateDimension,
-  deleteDimension,
-} from '../service';
+import { getDatasourceList, getDimensionList, deleteDimension } from '../service';
 import DimensionInfoModal from './DimensionInfoModal';
+import { ISemantic } from '../data';
 import moment from 'moment';
 import styles from './style.less';
 
@@ -25,7 +20,7 @@ type Props = {
 const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   const { selectDomainId } = domainManger;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
-  const [dimensionItem, setDimensionItem] = useState<any>();
+  const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
   const [dataSourceList, setDataSourceList] = useState<any[]>([]);
   const [pagination, setPagination] = useState({
     current: 1,
@@ -45,7 +40,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     let resData: any = {};
     if (code === 200) {
       setPagination({
-        pageSize,
+        pageSize: Math.min(pageSize, 100),
         current,
         total,
       });
@@ -175,36 +170,6 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     },
   ];
 
-  const saveDimension = async (fieldsValue: any, reloadState: boolean = true) => {
-    const queryParams = {
-      domainId: selectDomainId,
-      type: 'categorical',
-      ...fieldsValue,
-    };
-    let saveDimensionQuery = createDimension;
-    if (queryParams.id) {
-      saveDimensionQuery = updateDimension;
-    }
-
-    const { code, msg } = await saveDimensionQuery(queryParams);
-
-    if (code === 200) {
-      setCreateModalVisible(false);
-      if (reloadState) {
-        message.success('编辑维度成功');
-        actionRef?.current?.reload();
-      }
-      dispatch({
-        type: 'domainManger/queryDimensionList',
-        payload: {
-          domainId: selectDomainId,
-        },
-      });
-      return;
-    }
-    message.error(msg);
-  };
-
   return (
     <>
       <ProTable
@@ -251,10 +216,21 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
 
       {createModalVisible && (
         <DimensionInfoModal
+          domainId={selectDomainId}
           bindModalVisible={createModalVisible}
           dimensionItem={dimensionItem}
           dataSourceList={dataSourceList}
-          onSubmit={saveDimension}
+          onSubmit={() => {
+            setCreateModalVisible(false);
+            actionRef?.current?.reload();
+            dispatch({
+              type: 'domainManger/queryDimensionList',
+              payload: {
+                domainId: selectDomainId,
+              },
+            });
+            return;
+          }}
           onCancel={() => {
             setCreateModalVisible(false);
           }}