semantic-fe visual modeling pr (#21)

* [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.

* [improvement][semantic-fe] Submitted a new version of the visual modeling tool.
[improvement][semantic-fe] Fixed an issue with the initialization of YoY and MoM metrics in Q&A settings.
[improvement][semantic-fe] Added a version field to the database settings.
[improvement][semantic-fe] 1. Added the ability to set YoY and MoM metrics in Q&A settings.2. Moved dimension value editing from the dimension editing window to the dimension list.

---------

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

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

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Modal, message } from 'antd';
+import { ISemantic } from '../data';
+import CommonEditTable from './CommonEditTable';
+import { createDimension, updateDimension } from '../service';
+import { connect } from 'umi';
+import type { StateType } from '../model';
+
+export type CreateFormProps = {
+  dimensionValueSettingList: ISemantic.IDimensionValueSettingItem[];
+  onCancel: () => void;
+  dimensionItem?: ISemantic.IDimensionItem;
+  open: boolean;
+  onSubmit: (values?: any) => void;
+  domainManger: StateType;
+};
+
+type TableDataSource = { techName: string; bizName: string; alias: string };
+
+const DimensionInfoModal: React.FC<CreateFormProps> = ({
+  onCancel,
+  open,
+  dimensionItem,
+  dimensionValueSettingList,
+  domainManger,
+  onSubmit,
+}) => {
+  const [tableDataSource, setTableDataSource] = useState<TableDataSource[]>([]);
+  const { selectDomainId } = domainManger;
+  const [dimValueMaps, setDimValueMaps] = useState<ISemantic.IDimensionValueSettingItem[]>([]);
+
+  useEffect(() => {
+    const dataSource = dimensionValueSettingList.map((item) => {
+      const { alias } = item;
+      return {
+        ...item,
+        alias: Array.isArray(alias) ? alias.join(',') : '',
+      };
+    });
+    setTableDataSource(dataSource);
+    setDimValueMaps(dimensionValueSettingList);
+  }, [dimensionValueSettingList]);
+
+  const handleSubmit = async () => {
+    await saveDimension({ dimValueMaps });
+    onSubmit?.(dimValueMaps);
+  };
+
+  const saveDimension = async (fieldsValue: any) => {
+    if (!dimensionItem?.id) {
+      return;
+    }
+    const queryParams = {
+      domainId: selectDomainId,
+      id: dimensionItem.id,
+      ...fieldsValue,
+    };
+    const { code, msg } = await updateDimension(queryParams);
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const renderFooter = () => {
+    return (
+      <>
+        <Button onClick={onCancel}>取消</Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            handleSubmit();
+          }}
+        >
+          完成
+        </Button>
+      </>
+    );
+  };
+
+  const columns = [
+    {
+      title: '技术名称',
+      dataIndex: 'techName',
+      width: 200,
+      formItemProps: {
+        fieldProps: {
+          placeholder: '请填写技术名称',
+        },
+        rules: [
+          {
+            required: true,
+            whitespace: true,
+            message: '此项是必填项',
+          },
+        ],
+      },
+    },
+    {
+      title: '业务名称',
+      dataIndex: 'bizName',
+      width: 200,
+      fieldProps: {
+        placeholder: '请填写业务名称',
+      },
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            whitespace: true,
+            message: '此项是必填项',
+          },
+        ],
+      },
+    },
+    {
+      title: '别名',
+      dataIndex: 'alias',
+      fieldProps: {
+        placeholder: '多个别名用英文逗号隔开',
+      },
+    },
+  ];
+
+  return (
+    <Modal
+      width={1000}
+      destroyOnClose
+      title="维度值设置"
+      style={{ top: 48 }}
+      maskClosable={false}
+      open={open}
+      footer={renderFooter()}
+      onCancel={onCancel}
+    >
+      <CommonEditTable
+        tableDataSource={tableDataSource}
+        columnList={columns}
+        onDataSourceChange={(tableData) => {
+          const dimValueMaps = tableData.map((item: TableDataSource) => {
+            return {
+              ...item,
+              alias: item.alias ? `${item.alias}`.split(',') : [],
+            };
+          });
+
+          setDimValueMaps(dimValueMaps);
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(DimensionInfoModal);