[improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. (#527)

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

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ControlToolBar/index.tsx

@@ -99,7 +99,6 @@ const ControlToolBar: React.FC<Props> = ({
           icon={<OneToOneOutlined />}
           description="重置"
           onClick={() => {
-            graph.fitView();
             onAutoZoom?.();
           }}
         />

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx

@@ -175,19 +175,23 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
     }
   };
 
+  const drawerEdgeFromConfig = (relationConfigData: any) => {
+    const { config } = relationConfigData;
+    const parseConfig = jsonParse(config, []);
+    if (Array.isArray(parseConfig)) {
+      parseConfig.forEach((item) => {
+        graphRef?.current?.addItem('edge', item);
+      });
+    }
+  };
+
   const getRelationConfig = async (domainId: number) => {
     const { code, data, msg } = await getViewInfoList(domainId);
     if (code === 200) {
       const target = data[0];
       if (target) {
-        const { config } = target;
-        const parseConfig = jsonParse(config, []);
-        if (Array.isArray(parseConfig)) {
         setRelationConfig(target);
-          parseConfig.forEach((item) => {
+        drawerEdgeFromConfig(target);
-            graphRef?.current?.addItem('edge', item);
-          });
-        }
       }
     } else {
       message.error(msg);
@@ -203,14 +207,16 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
   };
 
   const saveRelationConfig = async (domainId: number, graphData: any) => {
-    const { code, msg } = await createOrUpdateViewInfo({
+    const configData = {
       id: relationConfig?.id,
       // modelId: domainManger.selectModelId,
       domainId: domainId,
       type: 'modelEdgeRelation',
       config: JSON.stringify(graphData),
-    });
+    };
+    const { code, msg } = await createOrUpdateViewInfo(configData);
     if (code === 200) {
+      setRelationConfig(configData);
       queryModelRelaList(selectDomainId);
     } else {
       message.error(msg);
@@ -946,6 +952,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
     const rootNode = graphRef.current.findById('root');
     graphRef.current.hideItem(rootNode);
     // graphRef.current.fitView();
+    drawerEdgeFromConfig(relationConfig);
     lessNodeZoomRealAndMoveCenter();
   };
 
@@ -992,8 +999,13 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
           const rootGraphData = changeGraphData(dataSourceRef.current);
           refreshGraphData(rootGraphData);
         }}
-        onZoomIn={() => {}}
+        onAutoZoom={() => {
-        onZoomOut={() => {}}
+          // lessNodeZoomRealAndMoveCenter();
+          const rootGraphData = changeGraphData(dataSourceRef.current);
+          refreshGraphData(rootGraphData);
+        }}
+        // onZoomIn={() => {}}
+        // onZoomOut={() => {}}
       />
 
       <GraphToolBar