Catch empty or duplacate fields, indices, names, relationships

src/components/canvas.jsx

@@ -337,8 +337,10 @@ export default function Canvas(props) {
       endFieldId: onRect.field,
       endX: tables[onRect.tableId].x + 15,
       endY: tables[onRect.tableId].y + onRect.field * 36 + 69,
-      name: `${tables[line.startTableId].name}_to_${
-        tables[onRect.tableId].name
+      name: `${tables[line.startTableId].name}_FK_${
+        tables[line.startTableId].fields[line.startFieldId].name
+      }_to_${
+        tables[onRect.tableId].fields[onRect.field].name
       }`,
       id: relationships.length,
     });

src/components/issues.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from "react";
-import { Collapse } from "@douyinfe/semi-ui";
+import { Collapse, Badge } from "@douyinfe/semi-ui";
 import { SettingsContext, TableContext } from "../pages/editor";
 import { validateDiagram, arrayIsEqual } from "../utils";
 
@@ -7,7 +7,7 @@ export default function Issues() {
   const { settings } = useContext(SettingsContext);
   const { tables, relationships } = useContext(TableContext);
   const [issues, setIssues] = useState([]);
-  
+
   useEffect(() => {
     const findIssues = async () => {
       const newIssues = validateDiagram({
@@ -27,10 +27,17 @@ export default function Issues() {
     <Collapse style={{ width: "100%" }}>
       <Collapse.Panel
         header={
-          <div>
-            <i className="fa-solid fa-triangle-exclamation me-1 text-yellow-500"></i>{" "}
-            Issues
-          </div>
+          <Badge
+            type={issues.length > 0 ? "danger" : "primary"}
+            count={settings.strictMode ? null : issues.length}
+            overflowCount={99}
+            className="mt-1"
+          >
+            <div className="pe-3">
+              <i className="fa-solid fa-triangle-exclamation me-2 text-yellow-500"></i>
+              Issues
+            </div>
+          </Badge>
         }
         itemKey="1"
       >
@@ -39,14 +46,16 @@ export default function Issues() {
             <div className="mb-1">
               Strict mode is off so no issues will be displayed.
             </div>
-          ) : (
-            <div>
+          ) : issues.length > 0 ? (
+            <>
               {issues.map((e, i) => (
                 <div key={i} className="py-2">
                   {e}
                 </div>
               ))}
-            </div>
+            </>
+          ) : (
+            <div>No issues were detected.</div>
           )}
         </div>
       </Collapse.Panel>

src/components/relationship.jsx

@@ -13,9 +13,13 @@ export default function Relationship(props) {
       r = Math.abs(y2 - y1) / 3;
       if (r <= 2) {
         if (x1 + tableWidth <= x2)
-          return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2}`;
+          return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2 + 0.1} ${
+            y2 + 0.1
+          }`;
         else if (x2 + tableWidth < x1)
-          return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1} ${y1}`;
+          return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1 + 0.1} ${
+            y1 + 0.1
+          }`;
       }
     }