[improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. (#898)

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

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

* [improvement][semantic-fe] The organization structure selection feature has been added to the permission management.

* [improvement][semantic-fe] Improved user experience for the metric list.

* [improvement][semantic-fe] fix update the metric list.

* [improvement][headless-fe] Added view management functionality.

* [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system.

* [improvement][headless-fe] Added model editing side effect detection.

* [improvement][headless-fe] Fixed the logic error in view editing.

* [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings.

* [improvement][headless-fe] Added the ability to hide the Q&A settings entry point.

* [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation.

* [improvement][headless-fe] Added search functionality to the field list in model editing.

* [improvement][headless-fe] fix the field list in model editing

* [improvement][headless-fe] Restructured the data for the dimension value settings interface.

* [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts.

* [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function.

* [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process.

* [improvement][headless-fe] Replaced the term "view" with "dataset"

* [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.

* [improvement][headless-fe] Enhanced dataset creation to support the tag mode.

* [improvement][headless-fe] Added tag value setting.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead.

* [improvement][headless-fe] Added search functionality to model management.

* [improvement][headless-fe] Removed field null validation during model editing.

* [improvement][headless-fe] Updated the batch operation button component.

* [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings.

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

@@ -3,7 +3,10 @@ import type { ForwardRefRenderFunction } from 'react';
 import { Form, Switch, Space, Button, Tooltip, message, Select } from 'antd';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 import { RedoOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import DisabledWheelNumberInput from '@/components/DisabledWheelNumberInput';
 import { formLayout } from '@/components/FormHelper/utils';
+import ProCard from '@ant-design/pro-card';
+import { connect } from 'umi';
 import {
   DictTaskState,
   KnowledgeConfigTypeEnum,
@@ -17,8 +20,12 @@ import {
   editDictConfig,
   createDictConfig,
   deleteDictTask,
+  queryMetric,
+  getModelList,
+  getMetricData,
 } from '../../service';
 import type { ISemantic } from '../../data';
+import type { StateType } from '../../model';
 import { isString } from 'lodash';
 import styles from '../style.less';
 import CommonEditList from '../../components/CommonEditList';
@@ -27,26 +34,28 @@ type Props = {
   dataItem: ISemantic.IDimensionItem | ISemantic.ITagItem;
   type?: KnowledgeConfigTypeEnum;
   onSubmit?: () => void;
+  domainManger: StateType;
 };
 
 const FormItem = Form.Item;
 
-const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
-  { dataItem, type = KnowledgeConfigTypeEnum.DIMENSION },
-  ref,
-) => {
+const DimensionValueSettingForm: React.FC<Props> = ({
+  dataItem,
+  type = KnowledgeConfigTypeEnum.DIMENSION,
+  domainManger,
+}) => {
   const [form] = Form.useForm();
-
+  const { selectDomainId } = domainManger;
   const exchangeFields = ['blackList', 'whiteList'];
   const [dimensionVisible, setDimensionVisible] = useState<boolean>(false);
   const [taskItemState, setTaskItemState] = useState<ISemantic.IDictKnowledgeTaskItem>();
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
   const [refreshLoading, setRefreshLoading] = useState<boolean>(false);
   const [knowledgeConfig, setKnowledgeConfig] = useState<ISemantic.IDictKnowledgeConfigItem>();
-
+  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
   const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
   const [importDictState, setImportDictState] = useState<boolean>(false);
-
+  const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
   const defaultKnowledgeConfig: ISemantic.IDictKnowledgeConfigItemConfig = {
     blackList: [],
     whiteList: [],
@@ -58,11 +67,44 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
     queryDictLatestTaskList();
   }, []);
 
+  // useEffect(() => {
+  //   const modelId = dataItem?.modelId;
+  //   if (modelId) {
+  //     queryMetricList(modelId);
+  //     form.setFieldValue('modelId', modelId);
+  //   }
+  // }, [dataItem]);
+
+  useEffect(() => {
+    if (!selectDomainId) {
+      return;
+    }
+    queryModelList(selectDomainId);
+  }, [selectDomainId]);
+
+  const queryModelList = async (domainId: number) => {
+    const { code, data } = await getModelList(domainId);
+    if (code === 200) {
+      setModelList(data);
+    } else {
+      message.error('获取模型列表失败!');
+    }
+  };
+
+  const queryMetricList = async (modelId: number) => {
+    const { code, data, msg } = await queryMetric({ modelId });
+    if (code === 200 && Array.isArray(data?.list)) {
+      setMetricList(data.list);
+    } else {
+      message.error(msg);
+    }
+  };
+
   const taskRender = () => {
     if (taskItemState?.taskStatus) {
       return (
         <span style={{ color: '#5493ff', fontWeight: 'bold' }}>
-          {DictTaskState[taskItemState?.taskStatus || 'unknown']}
+          {DictTaskState[`${taskItemState?.taskStatus || 'unknown'}`]}
         </span>
       );
     }
@@ -93,6 +135,10 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
         ...config,
       });
       setKnowledgeConfig(configItem);
+      const { metricId } = config;
+      if (metricId) {
+        queryMetricData(metricId);
+      }
     } else {
       form.setFieldsValue({
         ...defaultKnowledgeConfig,
@@ -121,30 +167,17 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
     }
   };
 
-  const getFormValidateFields = async () => {
-    const fields = await form.validateFields();
-    const fieldValue = Object.keys(fields).reduce((formField: any, key: string) => {
-      const targetValue = fields[key];
-      if (exchangeFields.includes(key)) {
-        if (isString(targetValue)) {
-          formField[key] = targetValue.split(',');
-        } else {
-          formField[key] = [];
-        }
-      } else {
-        formField[key] = targetValue;
-      }
-      return formField;
-    }, {});
-    return {
-      ...fieldValue,
-    };
+  const queryMetricData = async (metricId: string) => {
+    const { code, data, msg } = await getMetricData(metricId);
+    if (code === 200) {
+      const { modelId } = data;
+      queryMetricList(modelId);
+      form.setFieldValue('modelId', modelId);
+      return;
+    }
+    message.error(msg);
   };
 
-  useImperativeHandle(ref, () => ({
-    getFormValidateFields,
-  }));
-
   const createDictConfigQuery = async (
     dimension: ISemantic.IDimensionItem,
     config: ISemantic.IDictKnowledgeConfigItemConfig,
@@ -196,10 +229,11 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
       status,
     });
     setSaveLoading(false);
-    if (code !== 200) {
-      message.error('字典导入配置保存失败!');
+    if (code === 200) {
+      message.success('字典导入配置保存成功!');
       return;
     }
+    message.error('字典导入配置保存失败!');
   };
 
   const deleteDictTaskQuery = async (dimension: ISemantic.IDimensionItem) => {
@@ -223,6 +257,17 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
         style={{ margin: '0 30px 30px 30px' }}
         layout="vertical"
         className={styles.form}
+        onValuesChange={(value, values) => {
+          if (value.modelId === undefined && values.modelId == undefined) {
+            setMetricList([]);
+            form.setFieldValue('metricId', undefined);
+            return;
+          }
+          if (value.modelId) {
+            form.setFieldValue('metricId', undefined);
+            queryMetricList(value.modelId);
+          }
+        }}
       >
         <FormItem
           style={{ marginTop: 15 }}
@@ -322,56 +367,116 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
         </FormItem>
         {dimensionVisible && (
           <>
-            {/* <Divider
-              style={{
-                marginBottom: 35,
-              }}
-            /> */}
-            <div style={{ padding: 20, border: '1px solid #eee', borderRadius: 10 }}>
-              <div
-                style={{
-                  color: '#2f374c',
-                  fontSize: 16,
-                  display: 'flex',
-                  marginBottom: 20,
-                }}
-              >
-                <span style={{ flex: 'auto' }}>{KnowledgeConfigTypeWordingMap[type]}值过滤</span>
-                <span style={{ marginLeft: 'auto' }}>
-                  <Button
-                    type="primary"
-                    onClick={() => {
-                      editDictTaskQuery();
-                    }}
-                    loading={saveLoading}
-                  >
-                    保 存
-                  </Button>
+            <ProCard
+              title={
+                <span
+                  style={{
+                    color: '#2f374c',
+                    fontSize: 16,
+                    fontWeight: 400,
+                  }}
+                >
+                  指标设置
                 </span>
+              }
+              bordered
+              extra={
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    editDictTaskQuery();
+                  }}
+                  loading={saveLoading}
+                >
+                  保 存
+                </Button>
+              }
+              style={{ marginBottom: 20 }}
+            >
+              <FormItem
+                label={
+                  <FormItemTitle
+                    title="参考指标"
+                    subTitle="字典中维度值的重要性参照指标值大小，指标值越大，维度值最越重要"
+                  />
+                }
+              >
+                <Space.Compact>
+                  <FormItem noStyle name="modelId">
+                    <Select
+                      allowClear
+                      showSearch
+                      style={{ minWidth: 300 }}
+                      optionFilterProp="label"
+                      placeholder={`请选择所属model`}
+                      options={modelList?.map((item) => {
+                        return {
+                          value: item.id,
+                          label: item.name,
+                        };
+                      })}
+                    />
+                  </FormItem>
+                  <FormItem name="metricId" noStyle>
+                    <Select
+                      allowClear
+                      showSearch
+                      optionFilterProp="label"
+                      style={{ minWidth: 300 }}
+                      placeholder={`请选择参考指标`}
+                      options={metricList?.map((item) => {
+                        return {
+                          value: item.id,
+                          label: item.name,
+                        };
+                      })}
+                    />
+                  </FormItem>
+                </Space.Compact>
+              </FormItem>
+              <FormItem
+                name="limit"
+                label={
+                  <FormItemTitle title="最大维度值个数" subTitle="维度写入字典的维度值的最大个数" />
+                }
+              >
+                <DisabledWheelNumberInput placeholder={`请输入维度值`} style={{ minWidth: 200 }} />
+              </FormItem>
+              <div>
+                <div
+                  style={{
+                    color: '#2f374c',
+                    fontSize: 16,
+                    display: 'flex',
+                    marginBottom: 10,
+                  }}
+                >
+                  <span style={{ flex: 'auto' }}>{KnowledgeConfigTypeWordingMap[type]}值过滤</span>
+                </div>
+
+                <FormItem name="blackList" label="黑名单">
+                  <Select
+                    mode="tags"
+                    placeholder={`输入${KnowledgeConfigTypeWordingMap[type]}值后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔`}
+                    tokenSeparators={[',']}
+                    maxTagCount={9}
+                  />
+                </FormItem>
+
+                <FormItem name="whiteList" label="白名单">
+                  <Select
+                    mode="tags"
+                    placeholder={`输入${KnowledgeConfigTypeWordingMap[type]}值后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔`}
+                    tokenSeparators={[',']}
+                    maxTagCount={9}
+                  />
+                </FormItem>
+
+                <FormItem name="ruleList">
+                  <CommonEditList title="过滤规则" />
+                </FormItem>
               </div>
-
-              <FormItem name="blackList" label="黑名单">
-                <Select
-                  mode="tags"
-                  placeholder={`输入${KnowledgeConfigTypeWordingMap[type]}值后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔`}
-                  tokenSeparators={[',']}
-                  maxTagCount={9}
-                />
-              </FormItem>
-
-              <FormItem name="whiteList" label="白名单">
-                <Select
-                  mode="tags"
-                  placeholder={`输入${KnowledgeConfigTypeWordingMap[type]}值后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔`}
-                  tokenSeparators={[',']}
-                  maxTagCount={9}
-                />
-              </FormItem>
-
-              <FormItem name="ruleList">
-                <CommonEditList title="过滤规则" />
-              </FormItem>
-            </div>
+            </ProCard>
           </>
         )}
       </Form>
@@ -379,4 +484,6 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
   );
 };
 
-export default forwardRef(DimensionValueSettingForm);
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(DimensionValueSettingForm);