[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/DynamicDate.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import type { Ref, ReactNode } from 'react';
 import type { RadioChangeEvent } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { objToList } from '@/utils/utils';
@@ -44,8 +45,7 @@ const { Option } = Select;
 
 type Props = {
   initialValues?: any;
-  submitFormDataState?: boolean;
+  dateRangeTypeProps: DateRangeType;
-  dateRangeTypeProps?: DateRangeType;
   onDateRangeChange: (value: string[], config: any) => void;
   onAdvanceSettingCollapsedChange?: (collapse: boolean) => void;
   onShortCutClick?: (shortCutId: string) => void;
@@ -59,16 +59,32 @@ type Props = {
   disabledAdvanceSetting?: boolean;
 };
 
-const DynamicDate: React.FC<Props> = ({
+const DynamicDate: React.FC<Props> = forwardRef(
+  (
+    {
       initialValues,
       dateRangeTypeProps,
-  submitFormDataState,
       onDateRangeChange,
       onAdvanceSettingCollapsedChange,
       onShortCutClick,
       onDateRangeStringAndDescChange,
       disabledAdvanceSetting = false,
-}: any) => {
+    }: Props,
+    ref: Ref<any>,
+  ) => {
+    useImperativeHandle(ref, () => ({
+      dynamicDateUpdateAdvancedPanelFormData: () => {
+        // return [...dataSource];
+        if (advancedConfigType) {
+          updateAdvancedPanelFormData(
+            advancedPanelFormData[advancedConfigType],
+            advancedConfigType,
+            true,
+          );
+        }
+      },
+    }));
+
     const initAdvacedConfigPanelCollapsed = () => {
       return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
     };
@@ -178,9 +194,9 @@ const DynamicDate: React.FC<Props> = ({
     const initShortCutSettingChecked = () => {
       return initialValues?.shortCutId || '';
     };
-  const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<string | string[]>(
+    const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<
-    initAdvacedConfigPanelCollapsed(),
+      string | string[]
-  );
+    >(initAdvacedConfigPanelCollapsed());
     const [advancedConfigType, setAdvancedConfigType] = useState<
       DynamicAdvancedConfigType | undefined
     >(initAdvancedConfigType());
@@ -191,17 +207,6 @@ const DynamicDate: React.FC<Props> = ({
       initShortCutSettingChecked(),
     );
 
-  useEffect(() => {
-    // 外部状态触发表单数据提交
-    if (submitFormDataState && advancedConfigType) {
-      updateAdvancedPanelFormData(
-        advancedPanelFormData[advancedConfigType],
-        advancedConfigType,
-        true,
-      );
-    }
-  }, [submitFormDataState]);
-
     const init = () => {
       setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
       setAdvancedConfigType(initAdvancedConfigType());
@@ -290,7 +295,10 @@ const DynamicDate: React.FC<Props> = ({
       return type !== advancedConfigType;
     };
 
-  const initShortCutByDateRangeChange = (dateRangeType: DateRangeType, emitImmediately = false) => {
+    const initShortCutByDateRangeChange = (
+      dateRangeType: DateRangeType,
+      emitImmediately = false,
+    ) => {
       const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
         return item.dateRangeType === dateRangeType;
       });
@@ -399,7 +407,9 @@ const DynamicDate: React.FC<Props> = ({
                           style={{ width: 120 }}
                           placeholder="请输入数字"
                           min={1}
-                        disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.LAST,
+                          )}
                           value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
                           onChange={(value: number | null) => {
                             updateAdvancedPanelFormData(
@@ -412,7 +422,9 @@ const DynamicDate: React.FC<Props> = ({
                         <Select
                           // defaultValue={DatePeriodType.DAY}
                           style={{ width: 120 }}
-                        disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.LAST,
+                          )}
                           value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
                           onClick={(e) => {
                             // 禁止冒泡触发Radio点击后续逻辑
@@ -430,7 +442,9 @@ const DynamicDate: React.FC<Props> = ({
                           {getDatePeriodTypeOptions(dateRangeTypeProps)}
                         </Select>
                         <Checkbox
-                        disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.LAST,
+                          )}
                           checked={
                             advancedPanelFormData[DynamicAdvancedConfigType.LAST]
                               .includesCurrentPeriod
@@ -480,7 +494,9 @@ const DynamicDate: React.FC<Props> = ({
                           disabled={isAdvancedConfigTypeRadioDisabled(
                             DynamicAdvancedConfigType.HISTORY,
                           )}
-                        value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType}
+                          value={
+                            advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType
+                          }
                           onClick={(e) => {
                             // 禁止冒泡触发Radio点击后续逻辑
                             e.preventDefault();
@@ -542,6 +558,7 @@ const DynamicDate: React.FC<Props> = ({
         )}
       </>
     );
-};
+  },
+);
 
 export default DynamicDate;

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(() => {
+  // useEffect(() => {
-    onInit?.({ dateRange: currentDateRange });
+  //   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"