Handle invalid references

src/components/canvas.jsx

@@ -12,6 +12,7 @@ import {
   SelectContext,
 } from "../pages/editor";
 import Note from "./note";
+import { Toast } from "@douyinfe/semi-ui";
 
 export default function Canvas(props) {
   const { tables, updateTable, relationships, addRelationship } =
@@ -325,6 +326,13 @@ export default function Canvas(props) {
   const handleLinking = () => {
     if (onRect.tableId < 0) return;
     if (onRect.field < 0) return;
+    if (
+      tables[line.startTableId].fields[line.startFieldId].type !==
+      tables[onRect.tableId].fields[onRect.field].type
+    ) {
+      Toast.info("Cannot connect");
+      return;
+    }
     if (
       line.startTableId === onRect.tableId &&
       line.startFieldId === onRect.field
@@ -339,9 +347,7 @@ export default function Canvas(props) {
       endY: tables[onRect.tableId].y + onRect.field * 36 + 69,
       name: `${tables[line.startTableId].name}_FK_${
         tables[line.startTableId].fields[line.startFieldId].name
-      }_to_${
-        tables[onRect.tableId].fields[onRect.field].name
-      }`,
+      }_to_${tables[onRect.tableId].fields[onRect.field].name}`,
       id: relationships.length,
     });
   };

src/utils/index.js

@@ -309,11 +309,23 @@ function validateDiagram(diagram) {
   });
 
   const duplicateFKName = {};
-  diagram.relationships.forEach((relationship) => {
-    if (duplicateFKName[relationship.name]) {
-      issues.push(`Duplicate relationship by the name "${relationship.name}"`);
+  diagram.relationships.forEach((r) => {
+    if (duplicateFKName[r.name]) {
+      issues.push(`Duplicate reference by the name "${r.name}"`);
     } else {
-      duplicateFKName[relationship.name] = true;
+      duplicateFKName[r.name] = true;
+    }
+
+    if (
+      diagram.tables[r.startTableId].fields[r.startFieldId].type !==
+      diagram.tables[r.endTableId].fields[r.endFieldId].type
+    ) {
+      issues.push(`Referencing column "${
+        diagram.tables[r.endTableId].fields[r.endFieldId].name
+      }" and referenced column "${
+        diagram.tables[r.startTableId].fields[r.startFieldId].name
+      }" are incompatible.
+      `);
     }
   });