Fix #1270 Falkordb canvas

.eslintrc.json

@@ -40,6 +40,9 @@
         "*.js",
         "*.jsx"
       ],
+      "excludedFiles": [
+        "*.d.ts"
+      ],
       "parserOptions": {
         "project": [
           "./tsconfig.json"

app/api/graph/model.ts

@@ -3,8 +3,6 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { LinkObject, NodeObject } from "react-force-graph-2d";
-
 export type Value = string | number | boolean;
 
 export type HistoryQuery = {
@@ -52,36 +50,31 @@ const getSchemaValue = (value: string): string[] => {
   return [type, description, unique, required];
 };
 
-export type Node = NodeObject<{
+export type Node = {
   id: number;
   labels: string[];
   color: string;
   visible: boolean;
   expand: boolean;
   collapsed: boolean;
-  displayName: [string, string];
   data: {
     [key: string]: any;
   };
-}>;
-
-export type Link = LinkObject<
-  Node,
-  {
-    id: number;
-    relationship: string;
-    color: string;
-    source: Node;
-    target: Node;
-    visible: boolean;
-    expand: boolean;
-    collapsed: boolean;
-    curve: number;
-    data: {
-      [key: string]: any;
-    };
-  }
->;
+};
+
+export type Link = {
+  id: number;
+  relationship: string;
+  color: string;
+  source: number;
+  target: number;
+  visible: boolean;
+  expand: boolean;
+  collapsed: boolean;
+  data: {
+    [key: string]: any;
+  };
+};
 
 export type GraphData = {
   nodes: Node[];
@@ -114,7 +107,7 @@ export type DataRow = {
 
 export type Data = DataRow[];
 
-export type MemoryValue = number | Map<string, MemoryValue>
+export type MemoryValue = number | Map<string, MemoryValue>;
 
 export const DEFAULT_COLORS = [
   "hsl(246, 100%, 70%)",
@@ -464,22 +457,22 @@ export class Graph {
   public calculateLinkCurve(link: Link, existingLinks: Link[] = []): number {
     const start = link.source;
     const end = link.target;
-    
+
     // Find all links between the same nodes (including new links being added)
     const allLinks = [...this.elements.links, ...existingLinks];
     const sameNodesLinks = allLinks.filter(
       (l) =>
-        (l.source.id === start.id && l.target.id === end.id) ||
-        (l.target.id === start.id && l.source.id === end.id)
+        (l.source === start && l.target === end) ||
+        (l.target === start && l.source === end)
     );
-    
+
     let index = sameNodesLinks.findIndex((l) => l.id === link.id);
     index = index === -1 ? sameNodesLinks.length : index;
-    
+
     const even = index % 2 === 0;
     let curve;
 
-    if (start.id === end.id) {
+    if (start === end) {
       if (even) {
         curve = Math.floor(-(index / 2)) - 3;
       } else {
@@ -513,7 +506,6 @@ export class Graph {
         visible: true,
         expand: false,
         collapsed,
-        displayName: ["", ""],
         data: {},
       };
       Object.entries(cell.properties).forEach(([key, value]) => {
@@ -586,7 +578,6 @@ export class Graph {
             expand: false,
             collapsed,
             visible: true,
-            displayName: ["", ""],
             data: {},
           };
 
@@ -597,14 +588,13 @@ export class Graph {
 
         link = {
           id: cell.id,
-          source,
-          target: source,
+          source: cell.sourceId,
+          target: cell.destinationId,
           relationship: cell.relationshipType,
           color: relation.color,
           expand: false,
           collapsed,
           visible: true,
-          curve: 0,
           data: {},
         };
       } else {
@@ -623,7 +613,6 @@ export class Graph {
             expand: false,
             collapsed,
             visible: true,
-            displayName: ["", ""],
             data: {},
           };
 
@@ -640,7 +629,6 @@ export class Graph {
             expand: false,
             collapsed,
             visible: true,
-            displayName: ["", ""],
             data: {},
           };
 
@@ -651,14 +639,13 @@ export class Graph {
 
         link = {
           id: cell.id,
-          source,
-          target,
+          source: cell.sourceId,
+          target: cell.destinationId,
           relationship: cell.relationshipType,
           color: relation.color,
           expand: false,
           collapsed,
           visible: true,
-          curve: 0,
           data: {},
         };
       }
@@ -742,10 +729,6 @@ export class Graph {
       });
     });
 
-    newElements.filter((element): element is Link => !!element.source).forEach((link) => {
-      link.curve = this.calculateLinkCurve(link);
-    });
-
     newElements
       .filter((element): element is Node => "labels" in element)
       .forEach((node) => {
@@ -812,21 +795,19 @@ export class Graph {
       if (
         this.RelationshipsMap.get(link.relationship)!.show &&
         visible &&
-        this.elements.nodes.map((n) => n.id).includes(link.source.id) &&
-        link.source.visible &&
-        this.elements.nodes.map((n) => n.id).includes(link.target.id) &&
-        link.target.visible
+        this.elements.nodes.find((n) => n.id === link.source)?.visible &&
+        this.elements.nodes.find((n) => n.id === link.target)?.visible
       ) {
         // eslint-disable-next-line no-param-reassign
         link.visible = true;
       }
 
       if (
         !visible &&
-        ((this.elements.nodes.map((n) => n.id).includes(link.source.id) &&
-          !link.source.visible) ||
-          (this.elements.nodes.map((n) => n.id).includes(link.target.id) &&
-            !link.target.visible))
+        (this.elements.nodes.find((n) => n.id === link.source)?.visible ===
+          false ||
+          this.elements.nodes.find((n) => n.id === link.target)?.visible ===
+            false)
       ) {
         // eslint-disable-next-line no-param-reassign
         link.visible = false;
@@ -836,7 +817,7 @@ export class Graph {
 
   public removeLinks(ids: number[] = []): Relationship[] {
     const links = this.elements.links.filter(
-      (link) => ids.includes(link.source.id) || ids.includes(link.target.id)
+      (link) => ids.includes(link.source) || ids.includes(link.target)
     );
 
     this.elements = {
@@ -845,8 +826,8 @@ export class Graph {
         .map((link) => {
           if (
             (ids.length !== 0 && !links.includes(link)) ||
-            (this.elements.nodes.map((n) => n.id).includes(link.source.id) &&
-              this.elements.nodes.map((n) => n.id).includes(link.target.id))
+            (this.elements.nodes.map((n) => n.id).includes(link.source) &&
+              this.elements.nodes.map((n) => n.id).includes(link.target))
           ) {
             return link;
           }
@@ -880,7 +861,7 @@ export class Graph {
   public removeElements(elements: (Node | Link)[]) {
     elements.forEach((element) => {
       const { id } = element;
-      const type = !element.source;
+      const type = "labels" in element;
 
       if (type) {
         this.elements.nodes.splice(
@@ -919,8 +900,8 @@ export class Graph {
       }
     });
 
-    const nodes = elements.filter((n): n is Node => !n.source);
-    const links = elements.filter((l): l is Link => l.source);
+    const nodes = elements.filter((n): n is Node => "labels" in n);
+    const links = elements.filter((l): l is Link => "source" in l);
 
     this.elements = {
       nodes: this.elements.nodes.filter(