[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/SemanticGraph/components/ToolTips.tsx

@@ -6,17 +6,14 @@ const initTooltips = () => {
     offsetX: 10,
     offsetY: 10,
     fixToNode: [1, 0.5],
-    // the types of items that allow the tooltip show up
     // 允许出现 tooltip 的 item 类型
-    // itemTypes: ['node', 'edge'],
     itemTypes: ['node'],
-    // custom the tooltip's content
     // 自定义 tooltip 内容
     getContent: (e) => {
       const outDiv = document.createElement('div');
       outDiv.style.width = 'fit-content';
       outDiv.style.height = 'fit-content';
-      const model = e.item.getModel();
+      const model = e!.item!.getModel();
 
       const { name, bizName, createdBy, updatedAt, description } = model;
       const list = [
@@ -54,16 +51,9 @@ const initTooltips = () => {
       const html = `<div>
       ${listHtml}
     </div>`;
-      if (e.item.getType() === 'node') {
+      if (e!.item!.getType() === 'node') {
         outDiv.innerHTML = html;
       }
-      //  else {
-      // const source = e.item.getSource();
-      // const target = e.item.getTarget();
-      // outDiv.innerHTML = `来源：${source.getModel().name}<br/>去向：${
-      //   target.getModel().name
-      // }`;
-      // }
       return outDiv;
     },
   });