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

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

webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { InfoCircleOutlined, CalendarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { Input, Tooltip, Popover, Space, Button, Select, Row, Col, Tag } from 'antd';
 import styles from './style.less';
@@ -36,6 +36,8 @@ const MDatePicker: React.FC<Props> = ({
   onDateRangeTypeChange,
   onInit,
 }: any) => {
+  const dynamicDateRef = useRef<any>({});
+
   const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => {
     const dynamicDefaultConfig = {
       shortCutId: 'last7Days',
@@ -95,7 +97,6 @@ const MDatePicker: React.FC<Props> = ({
   const [dateRangesParams] = useState(() => {
     return initialValues ? generatorDateRangesParams(initialValues) : {};
   });
-  const [confirmBtnClickState, setConfirmBtnClickState] = useState(false);
 
   const [visible, setVisible] = useState(false);
 
@@ -153,9 +154,9 @@ const MDatePicker: React.FC<Props> = ({
       }
     }
   }
-  useEffect(() => {
-    onInit?.({ dateRange: currentDateRange });
-  }, []);
+  // useEffect(() => {
+  //   onInit?.({ dateRange: currentDateRange });
+  // }, []);
 
   useEffect(() => {
     setSelectedDateRangeString(getSelectedDateRangeString());
@@ -255,12 +256,6 @@ const MDatePicker: React.FC<Props> = ({
     initDefaultDynamicData({ latestDateMap });
   }, []);
 
-  useEffect(() => {
-    if (visible) {
-      setConfirmBtnClickState(false);
-    }
-  }, [visible]);
-
   useEffect(() => {
     const { dateRange } = dateRangesParams;
     setDateRangeStringShow(getDateRangeStringShow(dateRange));
@@ -310,7 +305,6 @@ const MDatePicker: React.FC<Props> = ({
           </Row>
         </div>
       </ProCard>
-
       <ProCard
         className={styles.dateProCard}
         title={'快捷选项'}
@@ -320,10 +314,10 @@ const MDatePicker: React.FC<Props> = ({
         // extra="2019年9月28日"
       >
         <DynamicDate
+          ref={dynamicDateRef}
           disabledAdvanceSetting={disabledAdvanceSetting}
           initialValues={dynamicParams}
           dateRangeTypeProps={dateRangeType}
-          submitFormDataState={confirmBtnClickState}
           onDateRangeChange={handleDateRangeChange}
           onDateRangeStringAndDescChange={({ dateRangeString }) => {
             setCurrentDateRange(dateRangeString);
@@ -333,7 +327,6 @@ const MDatePicker: React.FC<Props> = ({
           }}
         />
       </ProCard>
-
       <ProCard
         className={styles.dateProCard}
         title={
@@ -354,7 +347,6 @@ const MDatePicker: React.FC<Props> = ({
           onDateRangeChange={handleDateRangeChange}
         />
       </ProCard>
-
       <div
         style={{
           display: 'flex',
@@ -372,7 +364,7 @@ const MDatePicker: React.FC<Props> = ({
             type="primary"
             onClick={() => {
               if (currentDateSettingType === DateSettingType.DYNAMIC) {
-                setConfirmBtnClickState(true);
+                dynamicDateRef.current.dynamicDateUpdateAdvancedPanelFormData();
               }
               setVisible(false);
             }}
@@ -394,7 +386,7 @@ const MDatePicker: React.FC<Props> = ({
     <Space direction="vertical">
       <Popover
         content={content}
-        // destroyTooltipOnHide={true}
+        destroyTooltipOnHide={false}
         // title="Title"
         open={visible}
         trigger="click"