mod: update bezier line

app/config/locale/en-US.json

@@ -297,6 +297,7 @@
     "saveDraft": "Save draft",
     "export": "Export",
     "applySpaceTip": "The new schema will not overwrite the original schema in the space",
-    "sameSchemaWarning": "{content} already exists in the space, please change the {hasType} name or select another space."
+    "sameSchemaWarning": "{content} already exists in the space, please change the {hasType} name or select another space.",
+    "noData": "No data, please import data first"
   }
 }

app/config/locale/zh-CN.json

@@ -297,6 +297,7 @@
     "saveDraft": "保存草稿",
     "export": "导出",
     "applySpaceTip": "新的 schema 不会覆盖图空间中已有的 schema 信息",
-    "sameSchemaWarning": "图空间中已存在{content}，请修改{hasType}名称，或者选择其他图空间。"
+    "sameSchemaWarning": "图空间中已存在{content}，请修改{hasType}名称，或者选择其他图空间。",
+    "noData": "暂无数据，请先导入数据"
   }
 }

app/config/sketch.ts

@@ -55,4 +55,63 @@ export const ARROW_STYLE = {
   d: 'M7 7L0 0L7 -7',
   'stroke-linejoin': 'round',
   'stroke-linecap': 'round',
-};
+};
+
+export function makeLineSort(links) {
+  // update link sort
+  const sourceMap = {};
+  links.forEach((link: any) => {
+    const sourceId = link.from;
+    const targetId = link.to;
+    const sourceCommonId = `${sourceId}=>${targetId}`;
+    const targetCommonId = `${targetId}=>${sourceId}`;
+    const linkArr = sourceMap[sourceCommonId] || sourceMap[targetCommonId];
+    if (!linkArr) {
+      sourceMap[sourceCommonId] = [link];
+    } else if (sourceMap[sourceCommonId]) {
+      linkArr.unshift(link);
+    } else if (sourceMap[targetCommonId]) {
+      linkArr.push(link);
+    }
+  });
+  Object.keys(sourceMap).forEach((key) => {
+    if (sourceMap[key].length > 1) {
+      const source = sourceMap[key][0].from;
+      let status = true;
+      let number = 1;
+      while (sourceMap[key].length) {
+        const link = status ? sourceMap[key].pop() : sourceMap[key].shift();
+        link.graphIndex = number;
+        // check direction
+        if (link.from !== source) {
+          link.graphIndex *= -1;
+        }
+        number++;
+        status = !status;
+      }
+    } else {
+      const link = sourceMap[key][0];
+      if (link.from === link.to) {
+        link.graphIndex = 1;
+      } else {
+        link.graphIndex = 0;
+      }
+    }
+  });
+}
+
+export function getLinkCurvature(link) {
+  let curvature = 0;
+  const data = link.data;
+  if(data.from === data.to) {
+    curvature = link.graphIndex;
+  } else {
+    const { graphIndex } = data;
+    if (graphIndex !== 0) {
+      const direction = graphIndex % 2 === 0;
+      curvature = (direction ? 1 : -1) * (graphIndex > 0 ? 1 : -1) * (Math.ceil(Math.abs(graphIndex) / 2) * 0.1);
+    }
+  }
+  link.curvature = curvature;
+  return curvature;
+}

app/pages/Schema/SchemaConfig/List/SchemaVisualization/index.module.less

@@ -30,4 +30,48 @@
     background-color: #fff;
     border: 1px solid #E0E0E0;
   }
+  .visualizationTip {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: #F3F6F9;
+    border-radius: 12px;
+    width: 160px;
+    padding: 20px 15px;
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      &:not(:last-child) {
+        margin-bottom: 20px;
+      }
+    }
+    .circle {
+      width: 30px;
+      height: 30px;
+      background-color: rgba(98, 111, 129, 0.3);
+      border-radius: 30px;
+      display: inline-block;
+      border: 3px solid #626F81;
+    }
+    .edge {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+    }
+    .line {
+      width: 50px;
+      height: 2px;
+      background-color: #636F81;
+    }
+    .arrow {
+      width: 10px;
+      height: 10px;
+      border-top: 2px solid #636F81;
+      border-right: 2px solid #636F81;
+      transform: rotate(45deg);
+      position: absolute;
+      right: 0;
+    }
+  }
 }

app/pages/Schema/SchemaConfig/List/SchemaVisualization/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button, message } from 'antd';
 import dayjs from 'dayjs';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import intl from 'react-intl-universal';
@@ -29,60 +29,69 @@ const SchemaVisualization = () => {
     };
   }, []);
   useEffect(() => {
+    setUpdateTime('');
     sketchModel.editor?.graph.clearGraph();
     getSnapshot();
   }, [currentSpace]);
   const handleGetVisulization = useCallback(async () => {
     setLoading(true);
-    await getSchemaInfo();
-    const { vids, edges } = await getRandomEdgeData();
-    const { tags, vidMap } = await getNodeTagMap(vids);
-    const nodes = tags.map((tag, index) => {
-      const color = COLOR_LIST[index % COLOR_LIST.length];
-      return {
-        name: tag,
-        uuid: uuidv4(),
-        width: NODE_RADIUS * 2,
-        height: NODE_RADIUS * 2,
-        type: ISchemaEnum.Tag,
-        strokeColor: color.strokeColor,
-        fill: color.fill,
-        hideActive: true,
-        x: Math.random() * 100,
-        y: Math.random() * 100,
-      };
-    });
-    let lines = [];
-    edges.forEach(line => {
-      const { src, dst, name } = line;
-      const srcTag = vidMap[src];
-      const dstTag = vidMap[dst];
-      lines.push({
-        from: srcTag,
-        to: dstTag,
-        name
+    try {
+      await getSchemaInfo();
+      const { vids, edges } = await getRandomEdgeData();
+      if(vids.length === 0) {
+        message.warning(intl.get('sketch.noData'));
+        return;
+      }
+      const { tags, vidMap } = await getNodeTagMap(vids);
+      const nodes = tags.map((tag, index) => {
+        const color = COLOR_LIST[index % COLOR_LIST.length];
+        return {
+          name: tag,
+          uuid: uuidv4(),
+          width: NODE_RADIUS * 2,
+          height: NODE_RADIUS * 2,
+          type: ISchemaEnum.Tag,
+          strokeColor: color.strokeColor,
+          fill: color.fill,
+          hideActive: true,
+          x: Math.random() * 100,
+          y: Math.random() * 100,
+        };
       });
-    });
-    lines = uniqWith(lines, isEqual);
-    const _lines = lines.map(line => {
-      return {
-        from: nodes.find(node => node.name === line.from)?.uuid,
-        to: nodes.find(node => node.name === line.to)?.uuid,
-        name: line.name,
-        type: ISchemaEnum.Edge,
-        fromPoint: 2,
-        toPoint: 3,
-        style: LINE_STYLE,
-        arrowStyle: ARROW_STYLE,
-      };
-    });
+      let lines = [];
+      edges.forEach(line => {
+        const { src, dst, name } = line;
+        const srcTag = vidMap[src];
+        const dstTag = vidMap[dst];
+        lines.push({
+          from: srcTag,
+          to: dstTag,
+          name
+        });
+      });
+      lines = uniqWith(lines, isEqual);
+      const _lines = lines.map(line => {
+        return {
+          from: nodes.find(node => node.name === line.from)?.uuid,
+          to: nodes.find(node => node.name === line.to)?.uuid,
+          name: line.name,
+          type: ISchemaEnum.Edge,
+          fromPoint: 2,
+          toPoint: 3,
+          style: LINE_STYLE,
+          arrowStyle: ARROW_STYLE,
+        };
+      }).filter(line => line.from && line.to);
 
-    await sketchModel.editor.schema.setData({ nodes, lines: _lines });
-    await sketchModel.editor.schema.format();
-    await sketchModel.editor.controller.autoFit();
-    updateSnapshot();
-    setUpdateTime(dayjs().format('YYYY-MM-DD HH:mm:ss'));
-    setLoading(false);
+      await sketchModel.editor.schema.setData({ nodes, lines: _lines });
+      await sketchModel.editor.schema.format();
+      await sketchModel.editor.controller.autoFit();
+      updateSnapshot();
+      setUpdateTime(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+    } finally {
+      setLoading(false);
+    }
+
   }, []);
   const updateSnapshot = useCallback(async () => {
     const data = sketchModel.editor.schema.getData();
@@ -141,6 +150,19 @@ const SchemaVisualization = () => {
       </div>
       <div className={styles.container}>
         <div className={styles.visualizationContent} ref={editorRef} />
+        <div className={styles.visualizationTip}>
+          <div className={styles.row}>
+            <span className={styles.circle} />
+            <span>{intl.get('common.tag')}</span>
+          </div>
+          <div className={styles.row}>
+            <span className={styles.edge}>
+              <span className={styles.line} />
+              <span className={styles.arrow} />
+            </span>
+            <span>{intl.get('common.edge')}</span>
+          </div>
+        </div>
         <ZoomBtns />
       </div>