[improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. (#431)

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

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react';
-import moment from 'moment';
 import { message, Row, Col, Button, Space, Select, Form, Tooltip, Radio } from 'antd';
 import {
   queryStruct,
@@ -20,7 +19,7 @@ import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
 import StandardFormRow from '@/components/StandardFormRow';
 import MetricTable from './Table';
 import { ColumnConfig } from '../data';
-
+import dayjs from 'dayjs';
 import { ISemantic } from '../../data';
 
 const FormItem = Form.Item;
@@ -50,6 +49,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
   const [relationDimensionOptions, setRelationDimensionOptions] = useState<
     { value: string; label: string }[]
   >([]);
+  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
   const [queryParams, setQueryParams] = useState<any>({});
   const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true);
   // const [showDimensionOptions, setShowDimensionOptions] = useState<any[]>([]);
@@ -58,8 +58,8 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
     endDate: string;
     dateField: string;
   }>({
-    startDate: moment().subtract('6', 'days').format('YYYY-MM-DD'),
-    endDate: moment().format('YYYY-MM-DD'),
+    startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
     dateField: dateFieldMap[DateRangeType.DAY],
   });
   const [rowNumber, setRowNumber] = useState<number>(5);
@@ -69,7 +69,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
   const [groupByDimensionFieldName, setGroupByDimensionFieldName] = useState<string>();
 
   const getMetricTrendData = async (params: any = { download: false }) => {
-    const { download, dimensionGroup, dimensionFilters } = params;
+    const { download, dimensionGroup = [], dimensionFilters = [] } = params;
     if (download) {
       setDownloadLoding(true);
     } else {
@@ -80,8 +80,26 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
     }
     const { modelId, bizName, name } = metircData;
     indicatorFields.current = [{ name, column: bizName }];
+
+    const dimensionFiltersBizNameList = dimensionFilters.map((item) => {
+      return item.bizName;
+    });
+
+    const bizNameList = Array.from(new Set([...dimensionFiltersBizNameList, ...dimensionGroup]));
+
+    const modelIds = dimensionList.reduce(
+      (idList: number[], item: ISemantic.IDimensionItem) => {
+        if (bizNameList.includes(item.bizName)) {
+          idList.push(item.modelId);
+        }
+        return idList;
+      },
+      [modelId],
+    );
+
     const res = await queryStruct({
-      modelId,
+      // modelId,
+      modelIds: Array.from(new Set(modelIds)),
       bizName,
       groups: dimensionGroup,
       dimensionFilters,
@@ -123,9 +141,15 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
     }
   };
 
-  const queryDimensionList = async (modelId: number) => {
-    const { code, data, msg } = await getDimensionList({ modelId });
+  const queryDimensionList = async (ids: number[]) => {
+    const { code, data, msg } = await getDimensionList({ ids });
     if (code === 200 && Array.isArray(data?.list)) {
+      setDimensionList(data.list);
+      setRelationDimensionOptions(
+        data.list.map((item: ISemantic.IMetricItem) => {
+          return { label: item.name, value: item.bizName };
+        }),
+      );
       return data.list;
     }
     message.error(msg);
@@ -135,26 +159,18 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
   const queryDrillDownDimension = async (metricId: number) => {
     const { code, data, msg } = await getDrillDownDimension(metricId);
     if (code === 200 && Array.isArray(data)) {
+      const ids = data.map((item) => item.dimensionId);
+      queryDimensionList(ids);
       return data;
     }
-    message.error(msg);
+    if (code !== 200) {
+      message.error(msg);
+    }
     return [];
   };
 
   const initDimensionData = async (metricItem: ISemantic.IMetricItem) => {
-    const dimensionList = await queryDimensionList(metricItem.modelId);
-    const drillDownDimension = await queryDrillDownDimension(metricItem.id);
-    const drillDownDimensionIds = drillDownDimension.map(
-      (item: ISemantic.IDrillDownDimensionItem) => item.dimensionId,
-    );
-    const drillDownDimensionList = dimensionList.filter((metricItem: ISemantic.IMetricItem) => {
-      return drillDownDimensionIds.includes(metricItem.id);
-    });
-    setRelationDimensionOptions(
-      drillDownDimensionList.map((item: ISemantic.IMetricItem) => {
-        return { label: item.name, value: item.bizName };
-      }),
-    );
+    await queryDrillDownDimension(metricItem.id);
   };
 
   useEffect(() => {
@@ -163,7 +179,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
       initDimensionData(metircData);
       setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
     }
-  }, [metircData, periodDate]);
+  }, [metircData?.id, periodDate]);
 
   return (
     <div style={{ backgroundColor: '#fff', marginTop: 20 }}>