[improvement][semantic-fe] Added an editing component to set filtering rules for Q&A. Now, the SQL editor will be accompanied by a list for display and control, to resolve ambiguity when using comma-separated values.

[improvement][semantic-fe] Improved validation logic and prompt copywriting for data source/dimension/metric editing and creation.
[improvement][semantic-fe] Improved user experience for visual modeling. Now, when using the legend to control the display/hide of data sources and their associated metric dimensions, the canvas will be re-layout based on the activated data source in the legend.

Co-authored-by: tristanliu <tristanliu@tencent.com>

webapp/packages/supersonic-fe/src/pages/SemanticModel/ProjectManager.tsx

@@ -11,10 +11,9 @@ import OverView from './components/OverView';
 import styles from './components/style.less';
 import type { StateType } from './model';
 import { DownOutlined } from '@ant-design/icons';
-import SemanticFlow from './SemanticFlows';
 import { ISemantic } from './data';
 import { findLeafNodesFromDomainList } from './utils';
-import SemanticGraph from './SemanticGraph';
+import SemanticGraphCanvas from './SemanticGraphCanvas';
 import { getDomainList } from './service';
 import type { Dispatch } from 'umi';
 
@@ -35,6 +34,10 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
   const [open, setOpen] = useState(false);
   const [activeKey, setActiveKey] = useState<string>(menuKey);
 
+  useEffect(() => {
+    setActiveKey(menuKey);
+  }, [menuKey]);
+
   const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
     const targetNode = domainList.filter((item: any) => {
       return `${item.id}` === modelId;
@@ -145,21 +148,13 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
   ];
 
   const isModelItem = [
-    // {
-    //   label: '关系可视化',
-    //   key: 'graph',
-    //   children: (
-    //     <div style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
-    //       <SemanticGraph domainId={selectDomainId} />
-    //     </div>
-    //   ),
-    // },
     {
       label: '可视化建模',
       key: 'xflow',
       children: (
         <div style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
-          <SemanticFlow />
+          {/* <SemanticFlow /> */}
+          <SemanticGraphCanvas />
         </div>
       ),
     },
@@ -192,7 +187,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
 
   return (
     <div className={styles.projectBody}>
-      <Helmet title={'语义建模-超音数'} />
+      <Helmet title={'模型管理-超音数'} />
       <div className={styles.projectManger}>
         <h2 className={styles.title}>
           <Popover