[improvement](semantic-fe) add dimension&datasource relation graph and fix create datasource params bug

webapp/packages/supersonic-fe/src/components/RightContent/AvatarDropdown.tsx

@@ -40,7 +40,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = () => {
   };
 
   const { currentUser = {} } = initialState as any;
-  console.log(currentUser, 'currentUser');
+
   const menuHeaderDropdown = (
     <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
       <Menu.Item key="logout">

webapp/packages/supersonic-fe/src/components/TMEAvatar/index.tsx

@@ -7,9 +7,11 @@ interface Props extends AvatarProps {
   staffName?: string;
   avatarImg?: string;
 }
-
+const { tmeAvatarUrl } = process.env;
-const TMEAvatar: FC<Props> = ({ avatarImg, ...restProps }) => (
+const TMEAvatar: FC<Props> = ({ staffName, avatarImg, ...restProps }) => {
-  <Avatar src={`${avatarImg}`} alt="avatar" icon={<img src={avatarIcon} />} {...restProps} />
+  const avatarSrc = tmeAvatarUrl ? `${tmeAvatarUrl}${staffName}.png` : avatarImg;
-);
+  return (
-
+    <Avatar src={`${avatarSrc}`} alt="avatar" icon={<img src={avatarIcon} />} {...restProps} />
+  );
+};
 export default TMEAvatar;

webapp/packages/supersonic-fe/src/pages/Login/index.tsx

@@ -12,7 +12,7 @@ import { postUserLogin, userRegister } from './services';
 import { AUTH_TOKEN_KEY } from '@/common/constants';
 import { queryCurrentUser } from '@/services/user';
 import { history, useModel } from 'umi';
-import { setToken as setChatSdkToken } from 'supersonic-chat-sdk';
+// import { setToken as setChatSdkToken } from 'supersonic-chat-sdk';
 
 const { Item } = Form;
 const LoginPage: React.FC = () => {
@@ -25,7 +25,7 @@ const LoginPage: React.FC = () => {
     const { code, data, msg } = await postUserLogin(values);
     if (code === 200) {
       localStorage.setItem(AUTH_TOKEN_KEY, data);
-      setChatSdkToken(data || '');
+      // setChatSdkToken(data || '');
       const { code: queryUserCode, data: queryUserData } = await queryCurrentUser();
       if (queryUserCode === 200) {
         const currentUser = {

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx

@@ -167,7 +167,12 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
                 disabled={!editState}
                 onChange={(e) => {
                   const value = e.target.value;
-                  handleFieldChange(record, 'name', value);
+                  // handleFieldChange(record, 'name', value);
+                  onFieldChange(record.bizName, {
+                    ...record,
+                    name: value,
+                    [isCreateName]: 1,
+                  });
                 }}
                 placeholder="请输入中文名"
               />

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

@@ -1,82 +1,140 @@
 import G6 from '@antv/g6';
-// import { modifyCSS, createDom } from '@antv/dom-util';
 import { createDom } from '@antv/dom-util';
-const initToolBar = () => {
-  // const defaultConfig = G6.ToolBar
-  const toolBarInstance = new G6.ToolBar();
 
+const searchIconSvgPath = `<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" />`;
+
+const searchNode = (graph) => {
+  const toolBarSearchInput = document.getElementById('toolBarSearchInput') as HTMLInputElement;
+  const searchText = toolBarSearchInput.value.trim();
+  let lastFoundNode = null;
+  graph.getNodes().forEach((node) => {
+    const model = node.getModel();
+    const isFound = searchText && model.label.includes(searchText);
+    if (isFound) {
+      graph.setItemState(node, 'active', true);
+      lastFoundNode = node;
+    } else {
+      graph.setItemState(node, 'active', false);
+    }
+  });
+
+  if (lastFoundNode) {
+    // 将视图移动到找到的节点位置
+    graph.focusItem(lastFoundNode, true, {
+      duration: 300,
+      easing: 'easeCubic',
+    });
+  }
+};
+
+const generatorSearchInputDom = (graph) => {
+  const domString =
+    '<input placeholder="请输入指标/维度名称" class="ant-input" id="toolBarSearchInput" type="text" value="" />';
+  const searchInputDom = createDom(domString);
+  searchInputDom.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      searchNode(graph);
+    }
+  });
+  return searchInputDom;
+};
+
+const generatorSearchBtnDom = (graph) => {
+  const domString = `<button
+  id="toolBarSearchBtn"
+  type="button"
+  class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
+>
+  <span role="img" aria-label="search" class="anticon anticon-search">
+    <svg
+      viewBox="64 64 896 896"
+      focusable="false"
+      data-icon="search"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      ${searchIconSvgPath}
+    </svg>
+  </span>
+</button>`;
+  const searchBtnDom = createDom(domString);
+  searchBtnDom.addEventListener('click', () => {
+    searchNode(graph);
+  });
+  return searchBtnDom;
+};
+
+const searchInputDOM = (graph) => {
+  const searchInputDom = generatorSearchInputDom(graph);
+  const searchBtnDom = generatorSearchBtnDom(graph);
+  const searchInput = `
+  <div id="searchInputContent" class="g6-component-toolbar-search-input" style="position: absolute;top: 38px;width: 190px;left: 0;display:none">
+    <span class="ant-input-group-wrapper ant-input-search" >
+      <span class="ant-input-wrapper ant-input-group" id="toolBarSearchWrapper">
+        <span class="ant-input-group-addon"></span>
+      </span>
+    </span>
+  </div>`;
+  const searchDom = createDom(searchInput);
+  const searchWrapperDom = searchDom.querySelector('#toolBarSearchWrapper');
+  searchWrapperDom.insertBefore(searchInputDom, searchWrapperDom.firstChild);
+  searchWrapperDom.querySelector('.ant-input-group-addon').appendChild(searchBtnDom);
+  return searchDom;
+};
+
+const initToolBar = () => {
+  const toolBarInstance = new G6.ToolBar();
   const config = toolBarInstance._cfgs;
   const defaultContentDomString = config.getContent();
-  // const regex = /<ul[^>]*>|<\/ul>/g;
-  // const innerDom = defaultContentDom.replace(regex, '');
   const defaultContentDom = createDom(defaultContentDomString);
-
   // @ts-ignore
   const elements = defaultContentDom.querySelectorAll('li[code="redo"], li[code="undo"]');
   elements.forEach((element) => {
     element.remove();
   });
-
   const searchBtnDom = `<li code="search">
   <svg
     viewBox="64 64 896 896"
-        focusable="false"
+    class="icon"
     data-icon="search"
     width="24"
     height="24"
     fill="currentColor"
     aria-hidden="true"
   >
-        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" />
+    ${searchIconSvgPath}
   </svg>
-    </li>`;
+</li>`;
+  defaultContentDom.insertAdjacentHTML('afterbegin', searchBtnDom);
+  let searchInputContentVisible = false;
   const toolbar = new G6.ToolBar({
     position: { x: 10, y: 10 },
-    getContent: () => {
+    className: 'semantic-graph-toolbar',
-      return `${searchBtnDom}${defaultContentDom}`;
+    getContent: (graph) => {
+      const searchInput = searchInputDOM(graph);
+      const content = `<div class="g6-component-toolbar-content">${defaultContentDom.outerHTML}</div>`;
+      const contentDom = createDom(content);
+      contentDom.appendChild(searchInput);
+      return contentDom;
+    },
+    handleClick: (code, graph) => {
+      if (code === 'search') {
+        const searchText = document.getElementById('searchInputContent');
+        if (searchText) {
+          const visible = searchInputContentVisible ? 'none' : 'block';
+          searchText.style.display = visible;
+          searchInputContentVisible = !searchInputContentVisible;
+        }
+      } else {
+        // handleDefaultOperator public方法缺失graph作为参数传入，将graph挂载在cfgs上，源码通过get会获取到graph,完成默认code的执行逻辑
+        toolBarInstance._cfgs.graph = graph;
+        toolBarInstance.handleDefaultOperator(code);
+      }
     },
   });
-  // const toolbar = new G6.ToolBar({
-  //   getContent: (graph) => {
-  //     const searchInput = document.createElement('input');
-  //     searchInput.id = 'search-input';
-  //     searchInput.placeholder = '搜索节点';
 
-  //     const searchBtn = document.createElement('button');
-  //     searchBtn.id = 'search-btn';
-  //     searchBtn.innerHTML = '搜索';
-
-  //     const container = document.createElement('div');
-  //     container.appendChild(searchInput);
-  //     container.appendChild(searchBtn);
-  //     return container;
-  //   },
-  //   handleClick: (name, graph) => {
-  //     if (name === 'search-btn') {
-  //       const searchText = document.getElementById('search-input').value.trim();
-  //       if (!searchText) {
-  //         return;
-  //       }
-
-  //       const foundNode = graph.getNodes().find((node) => {
-  //         const model = node.getModel();
-  //         return model.label === searchText;
-  //       });
-
-  //       if (foundNode) {
-  //         // 如果找到了节点，将其设置为选中状态
-  //         graph.setItemState(foundNode, 'active', true);
-  //         // 将视图移动到找到的节点位置
-  //         graph.focusItem(foundNode, true, {
-  //           duration: 300,
-  //           easing: 'easeCubic',
-  //         });
-  //       } else {
-  //         alert('未找到节点');
-  //       }
-  //     }
-  //   },
-  // });
   return toolbar;
 };
 export default initToolBar;

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

@@ -0,0 +1,73 @@
+import G6 from '@antv/g6';
+import moment from 'moment';
+
+const initTooltips = () => {
+  const tooltip = new G6.Tooltip({
+    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();
+      console.log(model, e.item, 'model');
+      const { name, bizName, createdBy, updatedAt, description } = model;
+      const list = [
+        {
+          label: '名称:',
+          value: name,
+        },
+        {
+          label: '字段:',
+          value: bizName,
+        },
+        {
+          label: '创建人:',
+          value: createdBy,
+        },
+        {
+          label: '更新时间:',
+          value: updatedAt ? moment(updatedAt).format('YYYY-MM-DD HH:mm:ss') : '',
+        },
+        {
+          label: '描述:',
+          value: description,
+        },
+      ];
+      const listHtml = list.reduce((htmlString, item) => {
+        const { label, value } = item;
+        if (value) {
+          htmlString += `<p style="margin-bottom:0">
+          <span>${label} </span>
+          <span>${value}</span>
+        </p>`;
+        }
+        return htmlString;
+      }, '');
+      const html = `<div>
+      ${listHtml}
+    </div>`;
+      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;
+    },
+  });
+
+  return tooltip;
+};
+export default initTooltips;

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

@@ -3,9 +3,10 @@ import { connect } from 'umi';
 import type { StateType } from '../model';
 import type { Dispatch } from 'umi';
 import { typeConfigs } from './utils';
-import { message } from 'antd';
+import { message, Row, Col, Radio } from 'antd';
 import { getDatasourceList, getDomainSchemaRela } from '../service';
 import initToolBar from './components/ToolBar';
+import initTooltips from './components/ToolTips';
 import G6 from '@antv/g6';
 
 type Props = {
@@ -17,11 +18,13 @@ type Props = {
 const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
   const ref = useRef(null);
   const [graphData, setGraphData] = useState<any>({});
+  const [dataSourceListData, setDataSourceListData] = useState<any[]>([]);
+  const [graphShowType, setGraphShowType] = useState<string>('dimension');
   const legendDataRef = useRef<any[]>([]);
   const graphRef = useRef<any>(null);
   const legendDataFilterFunctions = useRef<any>({});
 
-  const { dimensionList } = domainManger;
+  // const { dimensionList } = domainManger;
 
   const toggleNodeVisibility = (graph, node, visible) => {
     if (visible) {
@@ -42,37 +45,80 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
     }
   };
 
-  const formatterRelationData = (dataSourceList: any[]) => {
+  const getDimensionChildren = (dimensions: any[], dataSourceId: string) => {
-    const relationData = dataSourceList.reduce((relationList: any[], item: any) => {
+    const dimensionChildrenList = dimensions.reduce((dimensionChildren: any[], dimension: any) => {
-      const { id, name } = item;
+      const {
-      const dataSourceId = `dataSource-${id}`;
+        id: dimensionId,
-      const dimensionChildrenList = dimensionList.reduce(
+        name: dimensionName,
-        (dimensionChildren: any[], dimension: any) => {
+        bizName,
-          const { id: dimensionId, name: dimensionName, datasourceId } = dimension;
+        description,
-          if (datasourceId === id) {
+        createdBy,
+        updatedAt,
+      } = dimension;
+      // if (datasourceId === id) {
       dimensionChildren.push({
         nodeType: 'dimension',
         legendType: dataSourceId,
         id: `dimension-${dimensionId}`,
         name: dimensionName,
+        bizName,
+        description,
+        createdBy,
+        updatedAt,
         style: {
           lineWidth: 2,
           fill: '#f0f7ff',
           stroke: '#a6ccff',
         },
       });
-          }
+      // }
       return dimensionChildren;
+    }, []);
+    return dimensionChildrenList;
+  };
+
+  const getMetricChildren = (metrics: any[], dataSourceId: string) => {
+    const metricsChildrenList = metrics.reduce((metricsChildren: any[], dimension: any) => {
+      const { id, name, bizName, description, createdBy, updatedAt } = dimension;
+      metricsChildren.push({
+        nodeType: 'metric',
+        legendType: dataSourceId,
+        id: `dimension-${id}`,
+        name,
+        bizName,
+        description,
+        createdBy,
+        updatedAt,
+        style: {
+          lineWidth: 2,
+          fill: '#f0f7ff',
+          stroke: '#a6ccff',
         },
-        [],
+      });
-      );
+      return metricsChildren;
+    }, []);
+    return metricsChildrenList;
+  };
+
+  const formatterRelationData = (dataSourceList: any[], type = graphShowType) => {
+    const relationData = dataSourceList.reduce((relationList: any[], item: any) => {
+      const { datasource, dimensions, metrics } = item;
+      const { id, name } = datasource;
+      const dataSourceId = `dataSource-${id}`;
+      let childrenList = [];
+      if (type === 'metirc') {
+        childrenList = getMetricChildren(metrics, dataSourceId);
+      }
+      if (type === 'dimension') {
+        childrenList = getDimensionChildren(dimensions, dataSourceId);
+      }
       relationList.push({
         name,
         legendType: dataSourceId,
         id: dataSourceId,
         nodeType: 'datasource',
         size: 40,
-        children: [...dimensionChildrenList],
+        children: [...childrenList],
         style: {
           lineWidth: 2,
           fill: '#BDEFDB',
@@ -84,11 +130,8 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
     return relationData;
   };
 
-  const queryDataSourceList = async (params: any) => {
+  const changeGraphData = (data: any, type?: string) => {
-    getDomainSchemaRela(params.domainId);
+    const relationData = formatterRelationData(data, type);
-    const { code, data, msg } = await getDatasourceList({ ...params });
-    if (code === 200) {
-      const relationData = formatterRelationData(data);
     const legendList = relationData.map((item: any) => {
       const { id, name } = item;
       return {
@@ -99,11 +142,21 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
       };
     });
     legendDataRef.current = legendList;
-      setGraphData({
+    const graphRootData = {
       id: 'root',
       name: domainManger.selectDomainName,
       children: relationData,
-      });
+    };
+    setGraphData(graphRootData);
+  };
+
+  const queryDataSourceList = async (params: any) => {
+    const { code, data, msg } = await getDomainSchemaRela(params.domainId);
+    if (code === 200) {
+      if (data) {
+        changeGraphData(data);
+        setDataSourceListData(data);
+      }
     } else {
       message.error(msg);
     }
@@ -111,7 +164,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
 
   useEffect(() => {
     queryDataSourceList({ domainId });
-  }, []);
+  }, [domainId]);
 
   const getLegendDataFilterFunctions = () => {
     legendDataRef.current.map((item: any) => {
@@ -143,71 +196,20 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
   };
   // const [visible, setVisible] = useState(false);
   useEffect(() => {
+    console.log(domainId, graphData, 'domainId');
     if (!(Array.isArray(graphData.children) && graphData.children.length > 0)) {
       return;
     }
+
     const container = document.getElementById('semanticGraph');
     const width = container!.scrollWidth;
     const height = container!.scrollHeight || 500;
 
-    if (!graphRef.current) {
+    // if (!graphRef.current) {
     getLegendDataFilterFunctions();
 
     const toolbar = initToolBar();
-      // const toolbar = new G6.ToolBar({
+    const tooltip = initTooltips();
-      //   getContent: (graph) => {
-      //     const searchIcon = document.createElement('i');
-      //     searchIcon.className = 'g6-toolbar-search-icon';
-      //     searchIcon.style.cssText = `
-      //       display: inline-block;
-      //       width: 16px;
-      //       height: 16px;
-      //       background-image: url(https://gw.alipayobjects.com/zos/rmsportal/wzQIcOMRTkQwFgaaDIFs.svg);
-      //       background-size: 16px 16px;
-      //       margin-right: 8px;
-      //       cursor: pointer;
-      //     `;
-
-      //     searchIcon.addEventListener('click', () => {
-      //       setVisible((prevVisible) => !prevVisible);
-      //     });
-
-      //     const ul = document.createElement('ul');
-      //     ul.className = 'g6-component-toolbar';
-      //     ul.appendChild(searchIcon);
-
-      //     return ul;
-      //   },
-      // });
-
-      const tooltip = new G6.Tooltip({
-        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();
-          if (e.item.getType() === 'node') {
-            outDiv.innerHTML = `${model.name}`;
-          }
-          //  else {
-          // const source = e.item.getSource();
-          // const target = e.item.getTarget();
-          // outDiv.innerHTML = `来源：${source.getModel().name}<br/>去向：${
-          //   target.getModel().name
-          // }`;
-          // }
-          return outDiv;
-        },
-      });
     const legend = new G6.Legend({
       // container: 'legendContainer',
       data: {
@@ -246,6 +248,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
         },
       },
     });
+    // 我使用TreeGraph进行layout布局，采用{type: 'compactBox',direction: 'LR'}模式，如何使子节点与根节点的连线只连接到上下连接桩上
 
     graphRef.current = new G6.TreeGraph({
       container: 'semanticGraph',
@@ -276,20 +279,54 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
       defaultNode: {
         size: 26,
         labelCfg: {
-            position: 'bottom',
+          position: 'right',
+          offset: 5,
           style: {
             stroke: '#fff',
             lineWidth: 4,
           },
         },
       },
-
+      defaultEdge: {
+        type: 'cubic-horizontal',
+        // type: 'flow-line',
+        // type: 'polyline',
+        // type: 'line',
+        /* configure the bending radius and min distance to the end nodes */
+        style: {
+          radius: 10,
+          offset: 30,
+          endArrow: true,
+          /* and other styles */
+          // stroke: '#F6BD16',
+        },
+        // style: {
+        //   stroke: '#A3B1BF',
+        // },
+      },
       layout: {
-          type: 'dendrogram',
+        type: 'mindmap',
-          direction: 'LR',
+        direction: 'H',
-          nodeSep: 200,
+        getId: function getId(d) {
-          rankSep: 300,
+          return d.id;
-          radial: true,
+        },
+        getHeight: function getHeight() {
+          return 16;
+        },
+        getWidth: function getWidth() {
+          return 16;
+        },
+        getVGap: function getVGap() {
+          return 30;
+        },
+        getHGap: function getHGap() {
+          return 100;
+        },
+        // type: 'dendrogram',
+        // direction: 'LR',
+        // nodeSep: 200,
+        // rankSep: 300,
+        // radial: true,
       },
       plugins: [legend, tooltip, toolbar],
     });
@@ -319,8 +356,9 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
         labelCfg: { style: { fill: '#3c3c3c' } },
       };
     });
-
+    console.log(graphData, 'graphData');
-      graph.data(graphData);
+    // graph.data(graphData);
+    graph.changeData(graphData);
     graph.render();
     graph.fitView();
 
@@ -334,10 +372,38 @@ const DomainManger: React.FC<Props> = ({ domainManger, domainId }) => {
         if (!container || !container.scrollWidth || !container.scrollHeight) return;
         graph.changeSize(container.scrollWidth, container.scrollHeight);
       };
-    }
+    // }
-  }, [domainId, graphData]);
+  }, [graphData]);
 
-  return <div ref={ref} id="semanticGraph" style={{ width: '100%', height: '100%' }} />;
+  return (
+    <>
+      <Row>
+        <Col flex="auto" />
+        <Col flex="100px">
+          <Radio.Group
+            buttonStyle="solid"
+            size="small"
+            value={graphShowType}
+            onChange={(e) => {
+              const { value } = e.target;
+              console.log(value, 'value');
+              setGraphShowType(value);
+              changeGraphData(dataSourceListData, value);
+            }}
+          >
+            <Radio.Button value="dimension">维度</Radio.Button>
+            <Radio.Button value="metric">指标</Radio.Button>
+          </Radio.Group>
+        </Col>
+      </Row>
+      <div
+        ref={ref}
+        key={`${domainId}-${graphShowType}`}
+        id="semanticGraph"
+        style={{ width: '100%', height: '100%' }}
+      />
+    </>
+  );
 };
 export default connect(({ domainManger }: { domainManger: StateType }) => ({
   domainManger,