优化血缘分析

dlink-web/src/components/Studio/StudioConsole/StudioCA/index.tsx

 import { Tabs,Empty,Tooltip,Button } from "antd";
-import { IndentedTreeGraph,DecompositionTreeGraph } from '@ant-design/charts';
+import { FlowAnalysisGraph } from '@ant-design/charts';
 import {SearchOutlined} from "@ant-design/icons";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
@@ -25,44 +25,105 @@ const StudioCA = (props:any) => {
     },
   };
 
+  const buildGraphData=(data,graphData)=>{
+    if(!graphData.nodes){
+      graphData.nodes = [];
+    }
+    if(!graphData.edges){
+      graphData.edges = [];
+    }
+    for(let i in data){
+      let nodesItem = {
+        id:data[i].id,
+        value:{
+          title:data[i].name,
+          items: [
+            {
+              text: data[i].columns,
+            },
+          ],
+        }
+      }
+      graphData.nodes.push(nodesItem);
+      if(data[i].children){
+        for(let j in data[i].children){
+          graphData.edges.push({source: data[i].children[j].id,
+            target: data[i].id,
+            value: ''});
+          buildGraphData(data[i].children,graphData);
+        }
+      }
+    }
+  };
+
   const config = {
-    data:oneTableCAData,
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
-    bodyStyle: {
-      fill: '#aaa',
-    },
-    nodeStateStyles,
-    onReady: (graph) => {
-      graph.on('node:mouseenter', (evt) => {
-        const item = evt.item;
-        graph.setItemState(item, 'hover', true);
-      });
-      graph.on('node:mouseleave', (evt) => {
-        const item = evt.item;
-        graph.setItemState(item, 'hover', false);
-      });
+    data: oneTableCAData,
+    height:350,
+    nodeCfg: {
+      size: [160, 65],
+      items: {
+        autoEllipsis: false,
+        padding: [10],
+        containerStyle: {
+          // fill: '#fff',
+          width:'100px',
+        },
+        style: (cfg, group, type) => {
+          const styles = {
+            value: {
+              // fill: '#000',
+            },
+            text: {
+              // fill: '#222',
+              width:'100px',
+            },
+          };
+          return styles[type];
+        },
+      },
+      nodeStateStyles: {
+        hover: {
+          // stroke: '#1890ff',
+          lineWidth: 2,
+        },
+      },
+      style: {
+        // fill: '#40a9ff',
+        // stroke: '#1890ff',
+      },
     },
-    edgeStyle: (item, graph) => {
-      /**
-       * graph.findById(item.target).getModel()
-       * item.source: 获取 source 数据
-       * item.target: 获取 target 数据
-       */
-      /*console.log(item);
-      console.log(graph);
-      console.log(graph.findById(item.target.id).getModel());*/
-      return {
-        stroke: '#40a9ff',
-        // lineWidth: graph.findById(item.target).getModel().columnSize,
-        lineWidth: 1,
-        strokeOpacity: 0.5,
-      };
+    edgeCfg: {
+      type: 'polyline',
+      label: {
+        style: {
+          // fill: '#666',
+          fontSize: 12,
+          fillOpacity: 1,
+        },
+      },
+      endArrow: {
+        // fill: '#333',
+      },
+      edgeStateStyles: {
+        hover: {
+          // stroke: '#1890ff',
+          lineWidth: 2,
+        },
+      },
     },
-    nodeStyle: () => {
+    markerCfg: (cfg) => {
+      const { edges } = oneTableCAData;
       return {
-        stroke: '#40a9ff',
+        position: 'right',
+        show: edges.find((item) => item.source === cfg.id),
+        collapsed: !edges.find((item) => item.source === cfg.id),
       };
     },
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
+    /*layout: {
+      rankdir: 'TB',
+      ranksepFunc: () => 20,
+    },*/
   };
 
   const columnConfig = {
@@ -110,7 +171,9 @@ const StudioCA = (props:any) => {
     });
     res.then((result)=>{
       if(result.code==0){
-        setOneTableCAData(fullTreeData(result.datas[0]));
+        let graphData = {};
+        buildGraphData(result.datas,graphData);
+        setOneTableCAData(graphData);
       }else{
         setOneTableCAData(null);
       }
@@ -124,7 +187,7 @@ const StudioCA = (props:any) => {
     });
     res.then((result)=>{
       if(result.code==0){
-        setOneColumnCAData(fullTreeData(result.datas[0]));
+        setOneColumnCAData(buildGraphData(result.datas[0]));
       }else{
         setOneColumnCAData(null);
       }
@@ -162,7 +225,7 @@ const StudioCA = (props:any) => {
               />
             </Tooltip>
           </div>
-          {oneTableCAData!=null?<IndentedTreeGraph {...config} />:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
+          {oneTableCAData!=null?<FlowAnalysisGraph {...config} />:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
         </div>
       </TabPane>
       {/*<TabPane

dlink-web/src/pages/Welcome.tsx

@@ -541,6 +541,9 @@ export default (): React.ReactNode => {
                 <li>
                   <Link>修改项目名为 Dinky 以及图标</Link>
                 </li>
+                <li>
+                  <Link>优化血缘分析图</Link>
+                </li>
               </ul>
             </Paragraph>
           </Timeline.Item>