From dfb3b599840ef457bebf16af15e40304a58ce56e Mon Sep 17 00:00:00 2001 From: tristanliu <37809633+sevenliu1896@users.noreply.github.com> Date: Mon, 18 Dec 2023 10:53:42 +0800 Subject: [PATCH] [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. --- .../components/ControlToolBar/index.tsx | 1 - .../SemanticModel/SemanticGraph/index.tsx | 36 ++++++++++++------- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ControlToolBar/index.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ControlToolBar/index.tsx index 471357c19..fdd7e87d9 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ControlToolBar/index.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ControlToolBar/index.tsx @@ -99,7 +99,6 @@ const ControlToolBar: React.FC = ({ icon={} description="重置" onClick={() => { - graph.fitView(); onAutoZoom?.(); }} /> diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx index fe98c1133..92921990b 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx @@ -175,19 +175,23 @@ const DomainManger: React.FC = ({ 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) => { - graphRef?.current?.addItem('edge', item); - }); - } + setRelationConfig(target); + drawerEdgeFromConfig(target); } } else { message.error(msg); @@ -203,14 +207,16 @@ const DomainManger: React.FC = ({ 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 = ({ 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 = ({ domainManger, dispatch }) => { const rootGraphData = changeGraphData(dataSourceRef.current); refreshGraphData(rootGraphData); }} - onZoomIn={() => {}} - onZoomOut={() => {}} + onAutoZoom={() => { + // lessNodeZoomRealAndMoveCenter(); + const rootGraphData = changeGraphData(dataSourceRef.current); + refreshGraphData(rootGraphData); + }} + // onZoomIn={() => {}} + // onZoomOut={() => {}} />