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

@@ -0,0 +1,51 @@
+import { Radio } from 'antd';
+import React, { useState } from 'react';
+import { connect } from 'umi';
+import styles from './components/style.less';
+import type { StateType } from './model';
+import { SemanticNodeType } from './enum';
+import SemanticFlow from './SemanticFlows';
+import SemanticGraph from './SemanticGraph';
+
+type Props = {
+  domainManger: StateType;
+};
+
+const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
+  const [graphShowType, setGraphShowType] = useState<SemanticNodeType>(SemanticNodeType.DATASOURCE);
+  const { selectDomainId } = domainManger;
+  return (
+    <div className={styles.semanticGraphCanvas}>
+      <div className={styles.toolbar}>
+        <Radio.Group
+          buttonStyle="solid"
+          value={graphShowType}
+          onChange={(e) => {
+            const { value } = e.target;
+            setGraphShowType(value);
+          }}
+        >
+          <Radio.Button value={SemanticNodeType.DATASOURCE}>数据源</Radio.Button>
+          <Radio.Button value={SemanticNodeType.DIMENSION}>维度</Radio.Button>
+          <Radio.Button value={SemanticNodeType.METRIC}>指标</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div className={styles.canvasContainer}>
+        {graphShowType === SemanticNodeType.DATASOURCE ? (
+          <div style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
+            <SemanticFlow />
+          </div>
+        ) : (
+          <div style={{ width: '100%', height: 'calc(100vh - 220px)' }}>
+            <SemanticGraph domainId={selectDomainId} graphShowType={graphShowType} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(SemanticGraphCanvas);