diff --git a/.eslintrc.json b/.eslintrc.json
index ee1b3b13..ce391e3f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,6 +11,8 @@
     "plugin:react/recommended"
   ],
   "rules": {
+    "semi": ["error", "always"],
+    "@typescript-eslint/semi": ["error", "always"],
     "react/react-in-jsx-scope": "off",
     "import/no-extraneous-dependencies": [
       "error",
@@ -41,6 +43,9 @@
         "*.js",
         "*.jsx"
       ],
+      "excludedFiles": [
+        "*.d.ts"
+      ],
       "parserOptions": {
         "project": [
           "./tsconfig.json"
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
index 0b8bc2c8..c39964e3 100644
--- a/.github/workflows/nextjs.yml
+++ b/.github/workflows/nextjs.yml
@@ -40,7 +40,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "22"
+          node-version: "24"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
 
       - name: Restore cache
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 0752ddd2..057d48aa 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Cache node modules
         id: cache-npm
@@ -89,7 +89,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
@@ -155,7 +155,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
@@ -221,7 +221,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
@@ -291,7 +291,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
@@ -360,7 +360,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
@@ -422,7 +422,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
@@ -555,7 +555,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 24
           cache: 'npm'
       - name: Restore dependencies cache
         uses: actions/cache/restore@v4
diff --git a/Dockerfile b/Dockerfile
index a692a3a2..96a63c44 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,6 @@
 ARG CYPHER_VERSION=latest
 
-FROM node:22-alpine AS base
+FROM node:24-alpine AS base
 
 FROM falkordb/text-to-cypher:${CYPHER_VERSION} AS cypher
 
diff --git a/app/GTM.tsx b/app/GTM.tsx
index 889963ea..f2da2f93 100644
--- a/app/GTM.tsx
+++ b/app/GTM.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
 import { useEffect } from "react";
 import TagManager from "react-gtm-module";
 
 export default function GTM() {
     useEffect(() => {
-        const gtmId = process.env.NEXT_PUBLIC_GTM_ID
+        const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
         if (gtmId) {
             TagManager.initialize({ gtmId });
         }
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
index e49d16d9..274f3889 100644
--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -1,6 +1,6 @@
 import NextAuth from "next-auth";
 import authOptions from "./options";
 
-const handler = NextAuth(authOptions)
+const handler = NextAuth(authOptions);
 
 export { handler as GET, handler as POST };
\ No newline at end of file
diff --git a/app/api/chat/route.tsx b/app/api/chat/route.tsx
index 7b41e641..d4395d84 100644
--- a/app/api/chat/route.tsx
+++ b/app/api/chat/route.tsx
@@ -5,22 +5,22 @@ import { chatRequest, validateBody } from "../validate-body";
 
 export async function GET() {
     try {
-        const session = await getClient()
+        const session = await getClient();
 
         if (session instanceof NextResponse) {
-            throw new Error(await session.text())
+            throw new Error(await session.text());
         }
 
         // Return empty object to allow chat to be displayed
         // The actual model configuration is provided by the user in the frontend
-        return NextResponse.json({}, { status: 200 })
+        return NextResponse.json({}, { status: 200 });
     } catch (error) {
-        console.error(error)
-        return NextResponse.json({ error: (error as Error).message }, { status: 500 })
+        console.error(error);
+        return NextResponse.json({ error: (error as Error).message }, { status: 500 });
     }
 }
 
-export type EventType = "Status" | "Schema" | "CypherQuery" | "CypherResult" | "ModelOutputChunk" | "Result" | "Error"
+export type EventType = "Status" | "Schema" | "CypherQuery" | "CypherResult" | "ModelOutputChunk" | "Result" | "Error";
 
 /**
  * Build FalkorDB connection URL from user session
@@ -41,26 +41,26 @@ function buildFalkorDBConnection(user: { host: string; port: number; url?: strin
 
 // eslint-disable-next-line import/prefer-default-export
 export async function POST(request: NextRequest) {
-    const encoder = new TextEncoder()
-    const { readable, writable } = new TransformStream()
-    const writer = writable.getWriter()
+    const encoder = new TextEncoder();
+    const { readable, writable } = new TransformStream();
+    const writer = writable.getWriter();
 
     try {
         // Verify authentication via getClient
-        const session = await getClient()
+        const session = await getClient();
 
         if (session instanceof NextResponse) {
-            throw new Error(await session.text())
+            throw new Error(await session.text());
         }
 
-        const body = await request.json()
+        const body = await request.json();
 
         // Validate request body
         const validation = validateBody(chatRequest, body);
 
         if (!validation.success) {
-            writer.write(encoder.encode(`event: error status: ${400} data: ${JSON.stringify(validation.error)}\n\n`))
-            writer.close()
+            writer.write(encoder.encode(`event: error status: ${400} data: ${JSON.stringify(validation.error)}\n\n`));
+            writer.close();
 
             return new Response(readable, {
                 headers: {
@@ -68,15 +68,15 @@ export async function POST(request: NextRequest) {
                     "Cache-Control": "no-cache",
                     Connection: "keep-alive",
                 },
-            })
+            });
         }
 
-        const { messages, graphName, key, model } = validation.data
+        const { messages, graphName, key, model } = validation.data;
 
         // Validate required parameters
         if (!key) {
-            writer.write(encoder.encode(`event: error status: ${400} data: "API key is required. Please configure it in Settings."\n\n`))
-            writer.close()
+            writer.write(encoder.encode(`event: error status: ${400} data: "API key is required. Please configure it in Settings."\n\n`));
+            writer.close();
 
             return new Response(readable, {
                 headers: {
@@ -84,7 +84,7 @@ export async function POST(request: NextRequest) {
                     "Cache-Control": "no-cache",
                     Connection: "keep-alive",
                 },
-            })
+            });
         }
 
         try {
@@ -125,9 +125,9 @@ export async function POST(request: NextRequest) {
                 writer.write(encoder.encode(`event: Result data: ${JSON.stringify(result.answer)}\n\n`));
             }
 
-            writer.close()
+            writer.close();
         } catch (error) {
-            console.error(error)
+            console.error(error);
             const errorMessage = (error as Error).message;
 
             // Check if it's an API key error
@@ -138,18 +138,18 @@ export async function POST(request: NextRequest) {
                 userFriendlyMessage = 'API key error. Please verify your API key in Settings.';
             }
 
-            writer.write(encoder.encode(`event: error status: ${400} data: ${JSON.stringify(userFriendlyMessage)}\n\n`))
-            writer.close()
+            writer.write(encoder.encode(`event: error status: ${400} data: ${JSON.stringify(userFriendlyMessage)}\n\n`));
+            writer.close();
         }
     } catch (error) {
-        console.error(error)
-        writer.write(encoder.encode(`event: error status: ${500} data: ${JSON.stringify((error as Error).message)}\n\n`))
-        writer.close()
+        console.error(error);
+        writer.write(encoder.encode(`event: error status: ${500} data: ${JSON.stringify((error as Error).message)}\n\n`));
+        writer.close();
     }
 
     request.signal.addEventListener("abort", () => {
-        writer.close()
-    })
+        writer.close();
+    });
 
     return new Response(readable, {
         headers: {
@@ -157,5 +157,5 @@ export async function POST(request: NextRequest) {
             "Cache-Control": "no-cache",
             Connection: "keep-alive",
         },
-    })
+    });
 }
\ No newline at end of file
diff --git a/app/api/graph/[graph]/route.ts b/app/api/graph/[graph]/route.ts
index f7633584..beac1b4b 100644
--- a/app/api/graph/[graph]/route.ts
+++ b/app/api/graph/[graph]/route.ts
@@ -23,7 +23,9 @@ export async function DELETE(
 
         await graph.delete();
 
-        return NextResponse.json({ message: `${graphId} graph deleted` });
+        return NextResponse.json(
+          { message: `${graphId} graph deleted` },
+        );
       }
     } catch (error) {
       console.error(error);
diff --git a/app/api/graph/model.ts b/app/api/graph/model.ts
index 7925795a..a5587e5b 100644
--- a/app/api/graph/model.ts
+++ b/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 = {
@@ -55,36 +53,33 @@ const getSchemaValue = (value: string): string[] => {
 // Constant for empty display name
 export const EMPTY_DISPLAY_NAME: [string, string] = ['', ''];
 
-export type Node = NodeObject<{
+export type Node = {
   id: number;
   labels: string[];
   color: string;
   visible: boolean;
   expand: boolean;
   collapsed: boolean;
-  displayName: [string, string];
+  size?: number;
+  caption?: 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[];
@@ -117,7 +112,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%)",
@@ -155,30 +150,33 @@ export const STYLE_COLORS = [
 ];
 
 // Size options for node customization (relative to base NODE_SIZE)
-export const NODE_SIZE_OPTIONS = [0.5, 0.7, 0.85, 1, 1.15, 1.3, 1.5, 1.7, 2, 2.3, 2.6];
+export const NODE_SIZE_OPTIONS = [3, 4.2, 5.1, 6, 6.9, 7.8, 9, 10.2, 12, 13.8, 15.6];
 
-export interface InfoLabel {
-  name: string;
+export interface LinkStyle {
   color: string;
-  show: boolean;
 }
 
-export interface LabelStyle {
-  customColor?: string; // Custom color override
-  customSize?: number; // Custom size multiplier (1 = default)
-  customCaption?: string; // Custom property to display as caption
+export interface LabelStyle extends LinkStyle {
+  size?: number;
+  caption?: string;
+}
+
+export interface InfoLabel {
+  name: string;
+  style: LabelStyle;
+  show: boolean;
 }
 
 export interface Label extends InfoLabel {
   elements: Node[];
   textWidth?: number;
   textHeight?: number;
-  style?: LabelStyle; // Style customization
+  style: LabelStyle;
 }
 
 export interface InfoRelationship {
   name: string;
-  color: string;
+  style: LinkStyle;
   show: boolean;
 }
 
@@ -254,21 +252,19 @@ export class GraphInfo {
       new Map(this.labels),
       new Map(this.relationships),
       new Map(this.memoryUsage),
-      [...this.colors]
+      this.colors
     );
   }
 
   public static empty(
     propertyKeys?: string[],
     memoryUsage?: Map<string, MemoryValue>,
-    colors?: string[]
   ): GraphInfo {
     return new GraphInfo(
       propertyKeys || [],
       new Map(),
       new Map(),
       new Map(memoryUsage),
-      colors
     );
   }
 
@@ -277,9 +273,8 @@ export class GraphInfo {
     labels: string[],
     relationships: string[],
     memoryUsage: Map<string, MemoryValue>,
-    colors?: string[]
   ): GraphInfo {
-    const graphInfo = GraphInfo.empty(propertyKeys, memoryUsage, colors);
+    const graphInfo = GraphInfo.empty(propertyKeys, memoryUsage);
     graphInfo.createLabel(labels);
     relationships.forEach((relationship) =>
       graphInfo.createRelationship(relationship)
@@ -295,7 +290,9 @@ export class GraphInfo {
       if (!c) {
         c = {
           name: label,
-          color: this.getLabelColorValue(this.colorsCounter),
+          style: {
+            color: this.getLabelColorValue(this.colorsCounter),
+          },
           show: true,
         };
 
@@ -313,8 +310,10 @@ export class GraphInfo {
     if (!c) {
       c = {
         name: relationship,
-        color: this.getLabelColorValue(this.colorsCounter),
         show: true,
+        style: {
+          color: this.getLabelColorValue(this.colorsCounter),
+        },
       };
 
       this.relationships.set(relationship, c);
@@ -329,9 +328,7 @@ export class GraphInfo {
       return this.colors[index];
     }
 
-    const newColor = `hsl(${
-      (index - Math.min(DEFAULT_COLORS.length, this.colors.length)) * 20
-    }, 100%, 70%)`;
+    const newColor = `hsl(${(index - DEFAULT_COLORS.length) * 20}, 100%, 70%)`;
 
     this.colors.push(newColor);
 
@@ -496,7 +493,11 @@ export class Graph {
     currentLimit: number,
     graphInfo?: GraphInfo
   ): Graph {
-    const graph = Graph.empty(undefined, currentLimit, graphInfo);
+    const graph = Graph.empty(
+      undefined,
+      currentLimit,
+      graphInfo
+    );
     graph.extend(results, isCollapsed, isSchema);
     graph.id = id;
     return graph;
@@ -505,22 +506,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 {
@@ -550,11 +551,10 @@ export class Graph {
       const node: Node = {
         id: cell.id,
         labels: labels.map((l) => l.name),
-        color: isColor ? getLabelWithFewestElements(labels).color : "",
+        color: isColor ? getLabelWithFewestElements(labels).style.color : "",
         visible: true,
         expand: false,
         collapsed,
-        displayName: ["", ""],
         data: {},
       };
       Object.entries(cell.properties).forEach(([key, value]) => {
@@ -572,7 +572,7 @@ export class Graph {
       currentNode.id = cell.id;
       currentNode.labels = labels.map((l) => l.name);
       currentNode.color = isColor
-        ? getLabelWithFewestElements(labels).color
+        ? getLabelWithFewestElements(labels).style.color
         : "";
       currentNode.expand = false;
       currentNode.collapsed = collapsed;
@@ -623,11 +623,10 @@ export class Graph {
           source = {
             id: cell.sourceId,
             labels: [label.name],
-            color: isColor ? label.color : "",
+            color: isColor ? label.style.color : "",
             expand: false,
             collapsed,
             visible: true,
-            displayName: ["", ""],
             data: {},
           };
 
@@ -638,14 +637,13 @@ export class Graph {
 
         link = {
           id: cell.id,
-          source,
-          target: source,
+          source: cell.sourceId,
+          target: cell.destinationId,
           relationship: cell.relationshipType,
-          color: relation.color,
+          color: relation.style.color,
           expand: false,
           collapsed,
           visible: true,
-          curve: 0,
           data: {},
         };
       } else {
@@ -660,11 +658,10 @@ export class Graph {
           source = {
             id: cell.sourceId,
             labels: [label!.name],
-            color: isColor ? label!.color : "",
+            color: isColor ? label!.style.color : "",
             expand: false,
             collapsed,
             visible: true,
-            displayName: ["", ""],
             data: {},
           };
 
@@ -677,11 +674,10 @@ export class Graph {
           target = {
             id: cell.destinationId,
             labels: [label!.name],
-            color: isColor ? label!.color : "",
+            color: isColor ? label!.style.color : "",
             expand: false,
             collapsed,
             visible: true,
-            displayName: ["", ""],
             data: {},
           };
 
@@ -692,14 +688,13 @@ export class Graph {
 
         link = {
           id: cell.id,
-          source,
-          target,
+          source: cell.sourceId,
+          target: cell.destinationId,
           relationship: cell.relationshipType,
-          color: relation.color,
+          color: relation.style.color,
           expand: false,
           collapsed,
           visible: true,
-          curve: 0,
           data: {},
         };
       }
@@ -783,9 +778,8 @@ export class Graph {
       });
     });
 
-    newElements.filter((element): element is Link => !!element.source).forEach((link) => {
-      link.curve = this.calculateLinkCurve(link);
-    });
+    this.nodesMap = new Map<number, Node>(this.elements.nodes.map((n) => [n.id, n]));
+    this.linksMap = new Map<number, Link>(this.elements.links.map((l) => [l.id, l]));
 
     newElements
       .filter((element): element is Node => "labels" in element)
@@ -796,7 +790,7 @@ export class Graph {
           )
         );
         // Use custom color if available, otherwise use default label color
-        node.color = label.style?.customColor || label.color;
+        node.color = label.style.color;
       });
 
     // remove empty category if there are no more empty nodes category
@@ -841,16 +835,11 @@ export class Graph {
 
     const storageKey = `labelStyle_${label.name}`;
     const savedStyle = localStorage.getItem(storageKey);
-    
+
     if (savedStyle) {
       try {
         const style = JSON.parse(savedStyle);
         label.style = style;
-        
-        // Apply custom color if present
-        if (style.customColor) {
-          label.color = style.customColor;
-        }
       } catch (e) {
         // Ignore invalid JSON
       }
@@ -878,10 +867,8 @@ 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.nodesMap.get(link.source)?.visible &&
+        this.nodesMap.get(link.target)?.visible
       ) {
         // eslint-disable-next-line no-param-reassign
         link.visible = true;
@@ -889,10 +876,10 @@ export class Graph {
 
       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.nodesMap.get(link.source)?.visible ===
+          false ||
+          this.nodesMap.get(link.target)?.visible ===
+          false)
       ) {
         // eslint-disable-next-line no-param-reassign
         link.visible = false;
@@ -902,17 +889,17 @@ 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 = {
       nodes: this.elements.nodes,
       links: this.elements.links
-        .map((link) => {
-          if (
+      .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.nodesMap.has(link.source) &&
+              this.nodesMap.has(link.target))
           ) {
             return link;
           }
@@ -946,13 +933,14 @@ 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(
           this.elements.nodes.findIndex((n) => n.id === id),
           1
         );
+        this.nodesMap.delete(id);
         const category = this.labelsMap.get(element.labels[0]);
 
         if (category) {
@@ -970,6 +958,7 @@ export class Graph {
           this.elements.links.findIndex((l) => l.id === id),
           1
         );
+        this.linksMap.delete(id);
         const category = this.relationshipsMap.get(element.relationship);
 
         if (category) {
@@ -985,8 +974,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(
@@ -1046,11 +1035,13 @@ export class Graph {
       category.elements = category.elements.filter(
         (element) => element.id !== selectedElement.id
       );
+
       if (category.elements.length === 0) {
         this.Labels.splice(
           this.Labels.findIndex((c) => c.name === category.name),
           1
         );
+        
         this.LabelsMap.delete(category.name);
       }
     }
@@ -1063,12 +1054,20 @@ export class Graph {
     if (selectedElement.labels.length === 0) {
       const [emptyCategory] = this.createLabel([""], selectedElement);
       selectedElement.labels.push(emptyCategory.name);
-      selectedElement.color = emptyCategory.color;
+      const { color, size, caption } = emptyCategory.style;
+      selectedElement.color = color;
+      selectedElement.size = size;
+      selectedElement.caption = caption;
     } else {
       // Update node color to reflect the remaining label
-      const remainingLabel = this.LabelsMap.get(selectedElement.labels[0]);
+      const remainingLabel = this.LabelsMap.get(getLabelWithFewestElements(selectedElement.labels.map(l => this.LabelsMap.get(l)).filter(l => !!l)).name);
+
       if (remainingLabel) {
-        selectedElement.color = remainingLabel.color;
+        const { color, size, caption } = remainingLabel.style;
+
+        selectedElement.color = color;
+        selectedElement.size = size;
+        selectedElement.caption = caption;
       }
     }
   }
@@ -1110,13 +1109,16 @@ export class Graph {
         selectedElement
       );
       selectedElement.labels.splice(emptyCategoryIndex, 1);
-      selectedElement.color = category.color;
+
+
 
       const emptyCategory = this.labelsMap.get("");
+
       if (emptyCategory) {
         emptyCategory.elements = emptyCategory.elements.filter(
           (e) => e.id !== selectedElement.id
         );
+
         if (emptyCategory.elements.length === 0) {
           this.labels.splice(
             this.labels.findIndex((c) => c.name === emptyCategory.name),
@@ -1129,8 +1131,12 @@ export class Graph {
 
     selectedElement.labels.push(label);
 
-    // Update node color to reflect the new label
-    selectedElement.color = category.color;
+    const { color, size, caption } = category.style;
+
+    selectedElement.color = color;
+    selectedElement.size = size;
+    selectedElement.caption = caption;
+
 
     return this.labels;
   }
diff --git a/app/api/monitor/route.ts b/app/api/monitor/route.ts
index dc5207b6..65992ceb 100644
--- a/app/api/monitor/route.ts
+++ b/app/api/monitor/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { getClient } from "@/app/api/auth/[...nextauth]/options";
 
-const fileds = ["used_memory", "used_memory_rss"];
+const fields = ["used_memory", "used_memory_rss"];
 // eslint-disable-next-line import/prefer-default-export
 export async function GET() {
   try {
@@ -24,7 +24,7 @@ export async function GET() {
           return { name, series };
         })
         .filter((item: { name: string; series: string }) =>
-          fileds.find((filed) => filed === item.name)
+          fields.find((field) => field === item.name)
         );
       const dataGraph: { name: string; series: number }[] = [];
       for (let i = 0; i < infoGraph.length; i += 2) {
diff --git a/app/api/schema/[schema]/[element]/utils.ts b/app/api/schema/[schema]/[element]/utils.ts
index a4e60845..fa28d408 100644
--- a/app/api/schema/[schema]/[element]/utils.ts
+++ b/app/api/schema/[schema]/[element]/utils.ts
@@ -1,10 +1,10 @@
 export const formatAttribute = (att: [string, string[]]) => {
-    const [key, [t, d, u, r]] = att
-    let val = `${t}`
-    if (u === "true") val += "!"
-    if (r === "true") val += "*"
-    if (d) val += `-${d}`
-    return [key, val]
-}
+    const [key, [t, d, u, r]] = att;
+    let val = `${t}`;
+    if (u === "true") val += "!";
+    if (r === "true") val += "*";
+    if (d) val += `-${d}`;
+    return [key, val];
+};
 
-export const formatAttributes = (attributes: [string, string[]][]) => attributes.map((att) => formatAttribute(att))
\ No newline at end of file
+export const formatAttributes = (attributes: [string, string[]][]) => attributes.map((att) => formatAttribute(att));
\ No newline at end of file
diff --git a/app/api/utils.ts b/app/api/utils.ts
index debfa714..6db23ec4 100644
--- a/app/api/utils.ts
+++ b/app/api/utils.ts
@@ -5,4 +5,4 @@ import { Role } from "next-auth";
 export const runQuery = async (graph: Graph, query: string, role: Role) => {
     const result = role === "Read-Only" ? await graph.roQuery(query) : await graph.query(query);
     return result;
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/components/CloseDialog.tsx b/app/components/CloseDialog.tsx
index 8eeeb730..c7db90c2 100644
--- a/app/components/CloseDialog.tsx
+++ b/app/components/CloseDialog.tsx
@@ -25,5 +25,5 @@ export default function CloseDialog({ className, label, children, ...props }: Pr
                 {children}
             </Button>
         </DialogClose>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/components/CreateGraph.tsx b/app/components/CreateGraph.tsx
index 402584bc..4a0591cf 100644
--- a/app/components/CreateGraph.tsx
+++ b/app/components/CreateGraph.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable react/require-default-props */
 
-"use client"
+"use client";
 
-import React, { useState, useContext, useEffect } from "react"
-import { InfoIcon, PlusCircle } from "lucide-react"
-import { prepareArg, securedFetch } from "@/lib/utils"
-import { useToast } from "@/components/ui/use-toast"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import DialogComponent from "./DialogComponent"
-import Button from "./ui/Button"
-import CloseDialog from "./CloseDialog"
-import Input from "./ui/Input"
-import { IndicatorContext } from "./provider"
+import React, { useState, useContext, useEffect } from "react";
+import { InfoIcon, PlusCircle } from "lucide-react";
+import { prepareArg, securedFetch } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import DialogComponent from "./DialogComponent";
+import Button from "./ui/Button";
+import CloseDialog from "./CloseDialog";
+import Input from "./ui/Input";
+import { IndicatorContext } from "./provider";
 
 interface Props {
     onSetGraphName: (name: string) => void
@@ -37,59 +37,59 @@ export default function CreateGraph({
     ),
 }: Props) {
 
-    const { indicator, setIndicator } = useContext(IndicatorContext)
+    const { indicator, setIndicator } = useContext(IndicatorContext);
 
-    const { toast } = useToast()
+    const { toast } = useToast();
 
-    const [isLoading, setIsLoading] = useState(false)
-    const [graphName, setGraphName] = useState("")
-    const [open, setOpen] = useState(false)
+    const [isLoading, setIsLoading] = useState(false);
+    const [graphName, setGraphName] = useState("");
+    const [open, setOpen] = useState(false);
 
     useEffect(() => {
         if (!open) {
-            setGraphName("")
-            setIsLoading(false)
+            setGraphName("");
+            setIsLoading(false);
         }
-    }, [open])
+    }, [open]);
 
     const handleCreateGraph = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
+        e.preventDefault();
         try {
-            setIsLoading(true)
-            const name = graphName.trim()
+            setIsLoading(true);
+            const name = graphName.trim();
             if (!name) {
                 toast({
                     title: "Error",
                     description: `${type} name cannot be empty`,
                     variant: "destructive"
-                })
-                return
+                });
+                return;
             }
             if (graphNames.includes(name)) {
                 toast({
                     title: "Error",
                     description: `${type} name already exists`,
                     variant: "destructive"
-                })
-                return
+                });
+                return;
             }
             const result = await securedFetch(`api/${type === "Schema" ? "schema" : "graph"}/${prepareArg(name)}`, {
                 method: "POST",
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
-            if (!result.ok) return
+            if (!result.ok) return;
 
-            onSetGraphName(name)
-            setGraphName("")
-            setOpen(false)
+            onSetGraphName(name);
+            setGraphName("");
+            setOpen(false);
             toast({
                 title: `${type} created successfully`,
                 description: `The ${type.toLowerCase()} has been created successfully`,
-            })
+            });
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <DialogComponent
@@ -135,5 +135,5 @@ export default function CreateGraph({
                 </div>
             </form>
         </DialogComponent>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/components/DialogComponent.tsx b/app/components/DialogComponent.tsx
index 648ea208..43eb5573 100644
--- a/app/components/DialogComponent.tsx
+++ b/app/components/DialogComponent.tsx
@@ -62,7 +62,7 @@ export default function DialogComponent({
                 {children}
             </DialogContent>
         </Dialog>
-    )
+    );
 }
 
 DialogComponent.defaultProps = {
@@ -72,4 +72,4 @@ DialogComponent.defaultProps = {
     label: "",
     preventOutsideClose: undefined,
     className: undefined,
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/components/EditorComponent.tsx b/app/components/EditorComponent.tsx
index 7ab1c072..3b071117 100644
--- a/app/components/EditorComponent.tsx
+++ b/app/components/EditorComponent.tsx
@@ -4,8 +4,8 @@
 "use client";
 
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
-import { Editor, Monaco } from "@monaco-editor/react"
-import { SetStateAction, Dispatch, useEffect, useRef, useState, useContext, useMemo } from "react"
+import { Editor, Monaco } from "@monaco-editor/react";
+import { SetStateAction, Dispatch, useEffect, useRef, useState, useContext, useMemo } from "react";
 import * as monaco from "monaco-editor";
 import { Minimize2, X } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
@@ -42,8 +42,8 @@ export const setTheme = (monacoI: Monaco, themeName: string, backgroundColor: st
         },
     });
 
-    monacoI.editor.setTheme(themeName)
-}
+    monacoI.editor.setTheme(themeName);
+};
 
 interface Props {
     graph: Graph
@@ -57,9 +57,9 @@ interface Props {
     isQueryLoading: boolean
 }
 
-const MAX_HEIGHT = 20
-const LINE_HEIGHT = 22
-const PLACEHOLDER = "Type your query here to start"
+const MAX_HEIGHT = 20;
+const LINE_HEIGHT = 22;
+const PLACEHOLDER = "Type your query here to start";
 const monacoOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
     renderLineHighlight: "none",
     glyphMargin: false,
@@ -112,7 +112,7 @@ const KEYWORDS = [
     "FOREACH",
     "CALL",
     "YIELD",
-]
+];
 
 const FUNCTIONS = [
     "all",
@@ -207,7 +207,7 @@ const FUNCTIONS = [
     "vecf32",
     "vec.euclideanDistance",
     "vec.cosineDistance",
-]
+];
 
 const SUGGESTIONS: monaco.languages.CompletionItem[] = [
     ...KEYWORDS.map(key => ({
@@ -225,104 +225,104 @@ const SUGGESTIONS: monaco.languages.CompletionItem[] = [
         range: new monaco.Range(1, 1, 1, 1),
         detail: "(function)"
     }))
-]
+];
 
 export default function EditorComponent({ graph, graphName, historyQuery, maximize, setMaximize, runQuery, setHistoryQuery, editorKey, isQueryLoading }: Props) {
-    const { indicator, setIndicator } = useContext(IndicatorContext)
-    const { tutorialOpen } = useContext(BrowserSettingsContext)
-
-    const { toast } = useToast()
-    const { theme } = useTheme()
-    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
-    const dialogEditorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
-    const placeholderRef = useRef<HTMLDivElement>(null)
-    const submitQuery = useRef<HTMLButtonElement>(null)
-    const containerRef = useRef<HTMLDivElement>(null)
-    const indicatorRef = useRef(indicator)
-    const graphIdRef = useRef(graph.Id)
-    const graphNameRef = useRef(graphName)
-    const queryRef = useRef(historyQuery.query)
-    const tutorialOpenRef = useRef(tutorialOpen)
-
-    const [monacoEditor, setMonacoEditor] = useState<Monaco | null>(null)
-    const [sugDisposed, setSugDisposed] = useState<monaco.IDisposable>()
-    const [lineNumber, setLineNumber] = useState(1)
-    const [blur, setBlur] = useState(false)
-
-    const { background, currentTheme } = getTheme(theme)
+    const { indicator, setIndicator } = useContext(IndicatorContext);
+    const { tutorialOpen } = useContext(BrowserSettingsContext);
+
+    const { toast } = useToast();
+    const { theme } = useTheme();
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const dialogEditorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const placeholderRef = useRef<HTMLDivElement>(null);
+    const submitQuery = useRef<HTMLButtonElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const indicatorRef = useRef(indicator);
+    const graphIdRef = useRef(graph.Id);
+    const graphNameRef = useRef(graphName);
+    const queryRef = useRef(historyQuery.query);
+    const tutorialOpenRef = useRef(tutorialOpen);
+
+    const [monacoEditor, setMonacoEditor] = useState<Monaco | null>(null);
+    const [sugDisposed, setSugDisposed] = useState<monaco.IDisposable>();
+    const [lineNumber, setLineNumber] = useState(1);
+    const [blur, setBlur] = useState(false);
+
+    const { background, currentTheme } = getTheme(theme);
 
     const editorHeight = useMemo(() => blur
         ? LINE_HEIGHT
         : Math.min(lineNumber * LINE_HEIGHT, document.body.clientHeight / 100 * MAX_HEIGHT),
-        [blur, lineNumber])
+        [blur, lineNumber]);
 
     useEffect(() => {
-        tutorialOpenRef.current = tutorialOpen
-    }, [tutorialOpen])
+        tutorialOpenRef.current = tutorialOpen;
+    }, [tutorialOpen]);
 
     useEffect(() => {
-        graphNameRef.current = graphName
-    }, [graphName])
+        graphNameRef.current = graphName;
+    }, [graphName]);
 
     useEffect(() => {
-        queryRef.current = historyQuery.query
-    }, [historyQuery.query])
+        queryRef.current = historyQuery.query;
+    }, [historyQuery.query]);
 
     useEffect(() => {
-        indicatorRef.current = indicator
-    }, [indicator])
+        indicatorRef.current = indicator;
+    }, [indicator]);
 
     useEffect(() => {
         if (historyQuery.query && placeholderRef.current) {
-            placeholderRef.current.style.display = "none"
+            placeholderRef.current.style.display = "none";
         } else if (!historyQuery.query && placeholderRef.current && blur) {
-            placeholderRef.current.style.display = "block"
+            placeholderRef.current.style.display = "block";
         }
-    }, [historyQuery.query])
+    }, [historyQuery.query]);
 
     useEffect(() => {
-        graphIdRef.current = graph.Id
-    }, [graph.Id])
+        graphIdRef.current = graph.Id;
+    }, [graph.Id]);
 
     useEffect(() => () => {
-        sugDisposed?.dispose()
-    }, [sugDisposed])
+        sugDisposed?.dispose();
+    }, [sugDisposed]);
 
     useEffect(() => {
-        if (!containerRef.current) return
+        if (!containerRef.current) return;
 
         const handleResize = () => {
-            editorRef.current?.layout()
-        }
+            editorRef.current?.layout();
+        };
 
-        window.addEventListener("resize", handleResize)
+        window.addEventListener("resize", handleResize);
 
-        const observer = new ResizeObserver(handleResize)
+        const observer = new ResizeObserver(handleResize);
 
-        observer.observe(containerRef.current)
+        observer.observe(containerRef.current);
 
         return () => {
-            window.removeEventListener("resize", handleResize)
-            observer.disconnect()
-        }
-    }, [containerRef.current])
+            window.removeEventListener("resize", handleResize);
+            observer.disconnect();
+        };
+    }, [containerRef.current]);
 
     useEffect(() => {
-        setLineNumber(historyQuery.query.split("\n").length)
-    }, [historyQuery.query])
+        setLineNumber(historyQuery.query.split("\n").length);
+    }, [historyQuery.query]);
 
     const fetchSuggestions = async (detail: string): Promise<monaco.languages.CompletionItem[]> => {
-        if (indicator === "offline") return []
+        if (indicator === "offline") return [];
 
         const result = await securedFetch(`api/graph/${graphIdRef.current}/info?type=${prepareArg(detail)}`, {
             method: 'GET',
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
-        if (!result) return []
+        if (!result) return [];
 
-        const json = await result.json()
+        const json = await result.json();
 
-        if (json.result.data.length === 0) return []
+        if (json.result.data.length === 0) return [];
 
         return json.result.data.map(({ info }: { info: string }) => ({
             insertTextRules: detail === '(function)' ? monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet : undefined,
@@ -340,15 +340,15 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
             })(),
             range: new monaco.Range(1, 1, 1, 1),
             detail
-        }))
-    }
+        }));
+    };
 
     const getSuggestions = async () => (await Promise.all([
         fetchSuggestions('(function)'),
         fetchSuggestions('(property key)'),
         fetchSuggestions('(label)'),
         fetchSuggestions('(relationship type)')
-    ])).flat()
+    ])).flat();
 
     const addSuggestions = async (monacoI: Monaco) => {
         const sug = [
@@ -356,17 +356,17 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
             ...(graphIdRef.current ? await getSuggestions() : [])
         ];
 
-        const functions = sug.filter(({ detail }) => detail === "(function)")
+        const functions = sug.filter(({ detail }) => detail === "(function)");
 
         const namespaces = new Set(
             functions
                 .filter(({ label }) => (label as string).includes("."))
                 .map(({ label }) => {
-                    const newNamespaces = (label as string).split(".")
-                    newNamespaces.pop()
-                    return newNamespaces
+                    const newNamespaces = (label as string).split(".");
+                    newNamespaces.pop();
+                    return newNamespaces;
                 }).flat()
-        )
+        );
 
         monacoI.languages.setMonarchTokensProvider('custom-language', {
             tokenizer: {
@@ -376,10 +376,10 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                     [
                         new RegExp(`\\b(${functions.map(({ label }) => {
                             if ((label as string).includes(".")) {
-                                const labels = (label as string).split(".")
-                                return labels[labels.length - 1]
+                                const labels = (label as string).split(".");
+                                return labels[labels.length - 1];
                             }
-                            return label
+                            return label;
                         }).join('|')})\\b`),
                         "function"
                     ],
@@ -411,25 +411,25 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                 ],
             },
             ignoreCase: true,
-        })
+        });
 
-        return sug
-    }
+        return sug;
+    };
 
     useEffect(() => {
         if (monacoEditor) {
-            addSuggestions(monacoEditor)
+            addSuggestions(monacoEditor);
         }
-    }, [monacoEditor, graphIdRef.current])
+    }, [monacoEditor, graphIdRef.current]);
 
     const handleSubmit = async () => {
-        runQuery(historyQuery.query.trim())
-    }
+        runQuery(historyQuery.query.trim());
+    };
 
     const handleEditorWillMount = async (monacoI: Monaco) => {
-        setMonacoEditor(monacoI)
+        setMonacoEditor(monacoI);
 
-        monacoI.languages.register({ id: "custom-language" })
+        monacoI.languages.register({ id: "custom-language" });
 
         monacoI.languages.setMonarchTokensProvider('custom-language', {
             tokenizer: {
@@ -454,9 +454,9 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                 ],
             },
             ignoreCase: true,
-        })
+        });
 
-        setTheme(monacoI, "editor-theme", background, currentTheme === "dark")
+        setTheme(monacoI, "editor-theme", background, currentTheme === "dark");
 
         monacoI.languages.setLanguageConfiguration('custom-language', {
             brackets: [
@@ -480,20 +480,20 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
             ]
         });
 
-        addSuggestions(monacoI)
+        addSuggestions(monacoI);
 
         const provider = monacoI.languages.registerCompletionItemProvider("custom-language", {
             provideCompletionItems: async (model, position) => {
-                const word = model.getWordUntilPosition(position)
-                const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn)
+                const word = model.getWordUntilPosition(position);
+                const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
                 return {
                     suggestions: (await addSuggestions(monacoI)).map(s => ({ ...s, range }))
-                }
+                };
             },
-        })
+        });
 
-        setSugDisposed(provider)
-    }
+        setSugDisposed(provider);
+    };
 
     const handleEditorDidMount = (e: monaco.editor.IStandaloneCodeEditor) => {
         const updatePlaceholderVisibility = () => {
@@ -508,13 +508,13 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                 placeholderRef.current.style.display = 'none';
             }
 
-            setBlur(false)
+            setBlur(false);
         });
 
         e.onDidBlurEditorText(() => {
             updatePlaceholderVisibility();
 
-            setBlur(true)
+            setBlur(true);
         });
 
         updatePlaceholderVisibility();
@@ -537,7 +537,7 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                 const textarea = domNode.querySelector('textarea');
                 if (textarea) (textarea as HTMLTextAreaElement).blur();
             }
-        })
+        });
 
         // eslint-disable-next-line no-bitwise
         e.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
@@ -546,7 +546,7 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
 
         // eslint-disable-next-line no-bitwise
         e.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
-            if (indicatorRef.current === "offline" || !queryRef.current || !graphNameRef.current || tutorialOpenRef.current) return
+            if (indicatorRef.current === "offline" || !queryRef.current || !graphNameRef.current || tutorialOpenRef.current) return;
             submitQuery.current?.click();
         });
 
@@ -557,8 +557,8 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
             keybindings: [monaco.KeyCode.Enter],
             contextMenuOrder: 1.5,
             run: async () => {
-                if (indicatorRef.current === "offline" || !queryRef.current || !graphNameRef.current || tutorialOpenRef.current) return
-                submitQuery.current?.click()
+                if (indicatorRef.current === "offline" || !queryRef.current || !graphNameRef.current || tutorialOpenRef.current) return;
+                submitQuery.current?.click();
             },
             precondition: '!suggestWidgetVisible',
         });
@@ -582,8 +582,8 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                     return {
                         ...prev,
                         counter
-                    }
-                })
+                    };
+                });
             },
             precondition: 'isFirstLine && !suggestWidgetVisible',
         });
@@ -595,21 +595,21 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
             contextMenuOrder: 1.5,
             run: async () => {
                 setHistoryQuery(prev => {
-                    if (prev.queries.length === 0) return prev
+                    if (prev.queries.length === 0) return prev;
 
-                    let counter
+                    let counter;
 
                     if (prev.counter) {
-                        counter = prev.counter + 1 > prev.queries.length ? 0 : prev.counter + 1
+                        counter = prev.counter + 1 > prev.queries.length ? 0 : prev.counter + 1;
                     } else {
-                        counter = 0
+                        counter = 0;
                     }
 
                     return {
                         ...prev,
                         counter
-                    }
-                })
+                    };
+                });
             },
             precondition: 'isLastLine && !suggestWidgetVisible',
         });
@@ -617,13 +617,13 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
         // Override the default Ctrl + F keybinding
         // eslint-disable-next-line no-bitwise
         e.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF, () => { });
-    }
+    };
 
     const getLabel = () => {
-        if (!graphName) return "Select a graph first"
-        if (!historyQuery.query) return "You need to type a query first"
-        return "Press Enter to run the query"
-    }
+        if (!graphName) return "Select a graph first";
+        if (!historyQuery.query) return "You need to type a query first";
+        return "Press Enter to run the query";
+    };
 
     return (
         <div data-testid="editor" style={{ height: editorHeight + 18 }} className="absolute w-full flex items-start gap-8 border border-border rounded-lg overflow-hidden bg-background p-2">
@@ -648,19 +648,19 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                                         text: val || "",
                                     },
                                     query: val || "",
-                                }))
+                                }));
                             } else {
                                 setHistoryQuery(prev => ({
                                     ...prev,
                                     query: val || "",
-                                }))
+                                }));
                             }
                         }}
                         theme="editor-theme"
                         beforeMount={handleEditorWillMount}
                         onMount={(e) => {
-                            handleEditorDidMount(e)
-                            editorRef.current = e
+                            handleEditorDidMount(e);
+                            editorRef.current = e;
                         }}
                     />
                     <span ref={placeholderRef} className="w-full top-0 left-0 absolute pointer-events-none truncate SofiaSans">
@@ -677,8 +677,8 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                                 setHistoryQuery(prev => ({
                                     ...prev,
                                     query: "",
-                                }))
-                                editorRef.current?.focus()
+                                }));
+                                editorRef.current?.focus();
                             }}
                         >
                             <X />
@@ -720,8 +720,8 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                                             setHistoryQuery(prev => ({
                                                 ...prev,
                                                 query: "",
-                                            }))
-                                            dialogEditorRef.current?.focus()
+                                            }));
+                                            dialogEditorRef.current?.focus();
                                         }}
                                     >
                                         <X />
@@ -744,8 +744,8 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                             key={`${editorKey}-${currentTheme}`}
                             className="w-full h-full"
                             onMount={(e) => {
-                                handleEditorDidMount(e)
-                                dialogEditorRef.current = e
+                                handleEditorDidMount(e);
+                                dialogEditorRef.current = e;
                             }}
                             theme="editor-theme"
                             options={{
@@ -764,7 +764,7 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                                     setHistoryQuery(prev => ({
                                         ...prev,
                                         query: val || ""
-                                    }))
+                                    }));
                                 } else {
                                     setHistoryQuery(prev => ({
                                         ...prev,
@@ -773,7 +773,7 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                                             ...prev.currentQuery,
                                             text: val || "",
                                         },
-                                    }))
+                                    }));
                                 }
                             }}
                             language="custom-language"
@@ -782,5 +782,5 @@ export default function EditorComponent({ graph, graphName, historyQuery, maximi
                 </DialogContent>
             </Dialog>
         </div>
-    )
+    );
 }
diff --git a/app/components/ExportGraph.tsx b/app/components/ExportGraph.tsx
index 607c3b9b..18f3e934 100644
--- a/app/components/ExportGraph.tsx
+++ b/app/components/ExportGraph.tsx
@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useState } from "react"
-import { prepareArg, securedFetch } from "@/lib/utils"
-import { useToast } from "@/components/ui/use-toast"
-import DialogComponent from "./DialogComponent"
-import Button from "./ui/Button"
-import CloseDialog from "./CloseDialog"
-import { IndicatorContext } from "./provider"
+import React, { useContext, useEffect, useState } from "react";
+import { prepareArg, securedFetch } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
+import DialogComponent from "./DialogComponent";
+import Button from "./ui/Button";
+import CloseDialog from "./CloseDialog";
+import { IndicatorContext } from "./provider";
 
 interface Props {
     selectedValues: string[]
@@ -13,51 +13,51 @@ interface Props {
 
 export default function ExportGraph({ selectedValues, type }: Props) {
 
-    const [open, setOpen] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
-    const { toast } = useToast()
-    const { indicator, setIndicator } = useContext(IndicatorContext)
+    const [open, setOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const { toast } = useToast();
+    const { indicator, setIndicator } = useContext(IndicatorContext);
 
     useEffect(() => {
         if (!open) {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }, [open])
+    }, [open]);
 
     const handleExport = async () => {
         try {
-            setIsLoading(true)
+            setIsLoading(true);
             await Promise.all(selectedValues.map(async value => {
-                const name = `${value}${type === "Schema" ? "_schema" : ""}`
+                const name = `${value}${type === "Schema" ? "_schema" : ""}`;
                 const result = await securedFetch(`api/graph/${prepareArg(name)}/export`, {
                     method: "GET"
-                }, toast, setIndicator)
+                }, toast, setIndicator);
 
-                if (!result.ok) return
+                if (!result.ok) return;
 
-                const blob = await result.blob()
-                const url = window.URL.createObjectURL(blob)
+                const blob = await result.blob();
+                const url = window.URL.createObjectURL(blob);
                 try {
-                    const link = document.createElement('a')
-                    link.href = url
-                    link.setAttribute('download', `${name}.dump`)
-                    document.body.appendChild(link)
-                    link.click()
-                    link.parentNode?.removeChild(link)
-                    window.URL.revokeObjectURL(url)
-                    setOpen(false)
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.setAttribute('download', `${name}.dump`);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.parentNode?.removeChild(link);
+                    window.URL.revokeObjectURL(url);
+                    setOpen(false);
                 } catch (e) {
                     toast({
                         title: "Error",
                         description: "Error while exporting data",
                         variant: "destructive"
-                    })
+                    });
                 }
-            }))
+            }));
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
 
     return (
@@ -94,5 +94,5 @@ export default function ExportGraph({ selectedValues, type }: Props) {
                 />
             </div>
         </DialogComponent>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/components/ForceGraph.tsx b/app/components/ForceGraph.tsx
index 767971cb..10cf78ed 100644
--- a/app/components/ForceGraph.tsx
+++ b/app/components/ForceGraph.tsx
@@ -1,343 +1,114 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/require-default-props */
 /* eslint-disable no-param-reassign */
 
-"use client"
+"use client";
 
-import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
-import ForceGraph2D from "react-force-graph-2d"
-import { securedFetch, GraphRef, handleZoomToFit, getTheme, Tab, ViewportState, getNodeDisplayText, getContrastTextColor } from "@/lib/utils"
-import { useToast } from "@/components/ui/use-toast"
-import * as d3 from "d3"
-import { useTheme } from "next-themes"
-import { Link, Node, Relationship, Graph, getLabelWithFewestElements, GraphData, EMPTY_DISPLAY_NAME } from "../api/graph/model"
-import { BrowserSettingsContext, IndicatorContext } from "./provider"
-import Spinning from "./ui/spinning"
+import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import type { Data, GraphLink, GraphNode, GraphData as CanvasData, ViewportState } from "@falkordb/canvas";
+import { securedFetch, getTheme, GraphRef } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
+import { Link, Node, Relationship, Graph, GraphData } from "../api/graph/model";
+import { IndicatorContext } from "./provider";
 
 interface Props {
     graph: Graph
     data: GraphData
     setData: Dispatch<SetStateAction<GraphData>>
-    chartRef: GraphRef
+    graphData: CanvasData | undefined
+    setGraphData: Dispatch<SetStateAction<CanvasData | undefined>>
+    canvasRef: GraphRef
     selectedElements: (Node | Link)[]
     setSelectedElements: (el?: (Node | Link)[]) => void
-    type?: "schema" | "graph"
     setRelationships: Dispatch<SetStateAction<Relationship[]>>
-    parentHeight: number
-    parentWidth: number
-    setParentHeight: Dispatch<SetStateAction<number>>
-    setParentWidth: Dispatch<SetStateAction<number>>
     isLoading: boolean
-    handleCooldown: (ticks?: 0, isSetLoading?: boolean) => void
+    setIsLoading: (loading: boolean) => void
     cooldownTicks: number | undefined
-    currentTab?: Tab
+    type?: "schema" | "graph"
+    handleCooldown: (ticks?: 0) => void
     viewport?: ViewportState
     setViewport?: Dispatch<SetStateAction<ViewportState>>
-    isSaved?: boolean
 }
 
-const NODE_SIZE = 6
-const PADDING = 2;
-
-/**
- * Wraps text into two lines with ellipsis handling for circular nodes
- * @param ctx Canvas context for text measurement
- * @param text The text to wrap
- * @param maxRadius Maximum radius of the circular node for text fitting
- * @returns Tuple of [line1, line2] with proper ellipsis handling
- */
-const wrapTextForCircularNode = (ctx: CanvasRenderingContext2D, text: string, maxRadius: number): [string, string] => {
-    const ellipsis = '...';
-    const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-    // Use fixed text height - it's essentially constant for a given font
-    const halfTextHeight = 1.125; // Fixed value based on font size (1.5px * 1.5 spacing / 2)
-
-
-    const availableRadius = Math.sqrt(Math.max(0, maxRadius * maxRadius - halfTextHeight * halfTextHeight));
-
-    const lineWidth = availableRadius * 2;
-
-    const words = text.split(/\s+/);
-    let line1 = '';
-    let line2 = '';
-
-    // Build first line - try to fit as many words as possible
-    for (let i = 0; i < words.length; i += 1) {
-        const word = words[i];
-        const testLine = line1 ? `${line1} ${word}` : word;
-        const testWidth = ctx.measureText(testLine).width;
-
-        if (testWidth <= lineWidth) {
-            line1 = testLine;
-        } else if (!line1) {
-            // If first word is too long, break it in the middle
-            let partialWord = word;
-            while (partialWord.length > 0 && ctx.measureText(partialWord).width > lineWidth) {
-                partialWord = partialWord.slice(0, -1);
-            }
-            line1 = partialWord;
-            // Put remaining part of word and other words in line2
-            const remainingWords = [word.slice(partialWord.length), ...words.slice(i + 1)];
-            line2 = remainingWords.join(' ');
-            break;
-        } else {
-            // Put remaining words in line2
-            line2 = words.slice(i).join(' ');
-            break;
-        }
-    }
-
-    // Truncate line2 if needed
-    if (line2 && ctx.measureText(line2).width > lineWidth) {
-        while (line2.length > 0 && ctx.measureText(line2).width + ellipsisWidth > lineWidth) {
-            line2 = line2.slice(0, -1);
-        }
-        line2 += ellipsis;
-    }
-
-    return [line1, line2 || ''];
-};
-
-const LINK_DISTANCE = 50;
-const MAX_LINK_DISTANCE = 80; // Maximum distance only when clusters would overlap
-const LINK_STRENGTH = 0.5;
-const MIN_LINK_STRENGTH = 0.3; // Minimum strength for very high-degree nodes
-const COLLISION_STRENGTH = 1.35;
-const CHARGE_STRENGTH = -5; // Stronger repulsion to maintain circular arrangement
-const CENTER_STRENGTH = 0.4;
-const COLLISION_BASE_RADIUS = NODE_SIZE * 2;
-const HIGH_DEGREE_PADDING = 1.25;
-const DEGREE_STRENGTH_DECAY = 15; // Degree at which strength starts significantly decreasing
-const CROWDING_THRESHOLD = 20; // Degree threshold where we start adding distance to prevent overlap
-
-const getEndpointId = (endpoint: Node | number | string | undefined): Node["id"] | undefined => {
-    if (endpoint === undefined || endpoint === null) return undefined;
-    if (typeof endpoint === "object") return endpoint.id;
-    if (typeof endpoint === "number") return endpoint;
-
-    const parsed = Number(endpoint);
-    return Number.isNaN(parsed) ? undefined : parsed;
-};
+const convertToCanvasData = (graphData: GraphData): Data => ({
+    nodes: graphData.nodes.map(({ id, labels, color, visible, data }) => ({
+        id,
+        labels,
+        color,
+        visible,
+        data
+    })),
+    links: graphData.links.map(({ id, relationship, color, visible, source, target, data }) => ({
+        id,
+        relationship,
+        color,
+        visible,
+        source,
+        target,
+        data
+    }))
+});
 
 export default function ForceGraph({
     graph,
     data,
     setData,
-    chartRef,
+    graphData,
+    setGraphData,
+    canvasRef,
     selectedElements,
     setSelectedElements,
-    type = "graph",
     setRelationships,
-    parentHeight,
-    parentWidth,
-    setParentHeight,
-    setParentWidth,
     isLoading,
-    handleCooldown,
+    setIsLoading,
     cooldownTicks,
-    currentTab = "Graph",
-    viewport,
-    setViewport,
-    isSaved
+    handleCooldown,
+    type = "graph",
+    viewport = undefined,
+    setViewport = undefined,
 }: Props) {
 
-    const { indicator, setIndicator } = useContext(IndicatorContext)
-    const { settings: { graphInfo: { displayTextPriority } } } = useContext(BrowserSettingsContext)
-
-    const { theme } = useTheme()
-    const { toast } = useToast()
-    const { background, foreground } = getTheme(theme)
-
-    const lastClick = useRef<{ date: Date, name: string }>({ date: new Date(), name: "" })
-    const parentRef = useRef<HTMLDivElement>(null)
+    const { setIndicator } = useContext(IndicatorContext);
 
-    const [hoverElement, setHoverElement] = useState<Node | Link | undefined>()
+    const { theme } = useTheme();
+    const { toast } = useToast();
+    const { background, foreground } = getTheme(theme);
 
-    const nodeDegreeMap = useMemo(() => {
-        const degree = new Map<Node["id"], number>();
+    const lastClick = useRef<{ date: Date, id: number }>({ date: new Date(), id: -1 });
 
-        data.nodes.forEach(node => degree.set(node.id, 0));
-
-        data.links.forEach(link => {
-            const sourceId = getEndpointId(link.source as Node | number | string);
-            const targetId = getEndpointId(link.target as Node | number | string);
-
-            if (sourceId !== undefined) {
-                degree.set(sourceId, (degree.get(sourceId) || 0) + 1);
-            }
-            if (targetId !== undefined) {
-                degree.set(targetId, (degree.get(targetId) || 0) + 1);
-            }
-        });
-
-        return degree;
-    }, [data.links, data.nodes]);
+    const [hoverElement, setHoverElement] = useState<Node | Link | undefined>();
+    const [canvasLoaded, setCanvasLoaded] = useState(false);
 
+    // Load falkordb-canvas web component on client side only
     useEffect(() => {
-        setData({ ...graph.Elements })
-    }, [graph, setData])
+        import('@falkordb/canvas').then(() => {
+            setCanvasLoaded(true);
+        });
+    }, []);
 
     // Load saved viewport on mount
     useEffect(() => {
-        if (isSaved && viewport) {
-            const { zoom, centerX, centerY } = viewport;
-            setTimeout(() => {
-                if (chartRef.current) {
-                    chartRef.current.zoom(zoom, 0);
-                    chartRef.current.centerAt(centerX, centerY, 0);
-                }
-            }, 100);
-        } else if (currentTab === "Graph" && graph.Elements.nodes.length > 0) {
-            handleCooldown()
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [chartRef, graph.Id, currentTab, graph.Elements.nodes.length, isSaved])
+        if (!viewport || !canvasRef.current || !canvasLoaded) return;
+
+        canvasRef.current.setViewport(viewport);
+    }, [canvasRef, viewport, canvasLoaded]);
 
     // Save viewport on unmount
     useEffect(() => {
-        const chart = chartRef.current;
+        const canvas = canvasRef.current;
 
         return () => {
-            if (chart && setViewport) {
-                const zoom = chart.zoom();
-                const centerPos = chart.centerAt();
-
-                if (centerPos) {
-                    setViewport({
-                        zoom,
-                        centerX: centerPos.x,
-                        centerY: centerPos.y,
-                    });
+            if (canvas && setViewport && canvasLoaded) {
+                const savedData = canvas.getGraphData();
+                if (savedData.nodes.length !== 0) {
+                    setViewport(canvas.getViewport());
+                    setGraphData(savedData);
                 }
             }
         };
-    }, [chartRef, graph.Id, setViewport])
-
-    useEffect(() => {
-        if (!parentRef.current) return;
-
-        const canvas = parentRef.current.querySelector('canvas') as HTMLCanvasElement;
-
-        if (!canvas) return;
-
-        canvas.setAttribute('data-engine-status', 'stop');
-    }, [])
-
-    useEffect(() => {
-        const handleResize = () => {
-            if (!parentRef.current) return
-            setParentWidth(parentRef.current.clientWidth)
-            setParentHeight(parentRef.current.clientHeight)
-        }
-
-        window.addEventListener('resize', handleResize)
-
-        const observer = new ResizeObserver(handleResize)
-
-        if (parentRef.current) {
-            observer.observe(parentRef.current)
-        }
-
-        return () => {
-            window.removeEventListener('resize', handleResize)
-            observer.disconnect()
-        }
-    }, [parentRef, setParentHeight, setParentWidth])
-
-    useEffect(() => {
-        if (!chartRef.current) return;
-
-        const linkForce = chartRef.current.d3Force('link');
-
-        if (linkForce) {
-            linkForce
-                .distance((link: Link) => {
-                    const sourceId = getEndpointId(link.source as Node | number | string);
-                    const targetId = getEndpointId(link.target as Node | number | string);
-                    const sourceDegree = sourceId !== undefined ? (nodeDegreeMap.get(sourceId) || 0) : 0;
-                    const targetDegree = targetId !== undefined ? (nodeDegreeMap.get(targetId) || 0) : 0;
-                    const maxDegree = Math.max(sourceDegree, targetDegree);
-
-                    // Use regular link distance for all links
-                    // Only increase distance when degree is very high to prevent cluster overlap
-                    if (maxDegree >= CROWDING_THRESHOLD) {
-                        // Gradually increase distance for very high-degree nodes to prevent crowding
-                        const extraDistance = Math.min(MAX_LINK_DISTANCE - LINK_DISTANCE, (maxDegree - CROWDING_THRESHOLD) * 1.5);
-                        return LINK_DISTANCE + extraDistance;
-                    }
-
-                    // For normal links and moderate high-degree links, use base distance
-                    return LINK_DISTANCE;
-                })
-                .strength((link: Link) => {
-                    const sourceId = getEndpointId(link.source as Node | number | string);
-                    const targetId = getEndpointId(link.target as Node | number | string);
-                    const sourceDegree = sourceId !== undefined ? (nodeDegreeMap.get(sourceId) || 0) : 0;
-                    const targetDegree = targetId !== undefined ? (nodeDegreeMap.get(targetId) || 0) : 0;
-
-                    // Use the maximum degree of the two endpoints
-                    const maxDegree = Math.max(sourceDegree, targetDegree);
-
-                    // Gradually reduce link strength as degree increases
-                    // This allows high-degree nodes to still pull, but not as aggressively
-                    if (maxDegree <= DEGREE_STRENGTH_DECAY) {
-                        return LINK_STRENGTH;
-                    }
-
-                    // Scale strength down gradually: strength decreases as degree increases
-                    // Formula: MIN + (BASE - MIN) * exp(-(degree - threshold) / threshold)
-                    const strengthReduction = Math.max(0, (maxDegree - DEGREE_STRENGTH_DECAY) / DEGREE_STRENGTH_DECAY);
-                    const scaledStrength = MIN_LINK_STRENGTH + (LINK_STRENGTH - MIN_LINK_STRENGTH) * Math.exp(-strengthReduction);
-
-                    return Math.max(MIN_LINK_STRENGTH, scaledStrength);
-                });
-        }
-
-        // Add collision force to prevent node overlap (scale radius by node degree and custom size)
-        chartRef.current.d3Force('collision', d3.forceCollide((node: Node) => {
-            const degree = nodeDegreeMap.get(node.id) || 0;
-            const label = getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l) || graph.createLabel([l])[0]));
-            const customSize = label.style?.customSize || 1;
-            return (COLLISION_BASE_RADIUS * customSize) + Math.sqrt(degree) * HIGH_DEGREE_PADDING;
-        }).strength(COLLISION_STRENGTH).iterations(2));
-
-        // Center force to keep graph centered
-        const centerForce = chartRef.current.d3Force('center');
-
-        if (centerForce) {
-            centerForce.strength(CENTER_STRENGTH);
-        }
-
-        // Add charge force to repel nodes
-        const chargeForce = chartRef.current.d3Force('charge');
-
-        if (chargeForce) {
-            chargeForce
-                .strength(CHARGE_STRENGTH)
-                .distanceMax(300); // Increased to help maintain circular arrangement
-        }
-
-        // Reheat the simulation
-        chartRef.current.d3ReheatSimulation();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [chartRef, graph.Elements.links.length, graph.Elements.nodes.length, graph, nodeDegreeMap])
-
-    // Clear cached display names when displayTextPriority changes
-    useEffect(() => {
-        data.nodes.forEach(node => {
-            // eslint-disable-next-line no-param-reassign
-            node.displayName = [...EMPTY_DISPLAY_NAME];
-        });
-        // Force a re-render by reheating the simulation
-        if (chartRef.current) {
-            chartRef.current.d3ReheatSimulation();
-        }
-    }, [displayTextPriority, chartRef, data.nodes]);
+    }, [canvasRef, graph.Id, setGraphData, setViewport, canvasLoaded]);
 
-    const handleGetNodeDisplayText = useCallback((node: Node) => getNodeDisplayText(node, displayTextPriority), [displayTextPriority])
-
-    const onFetchNode = async (node: Node) => {
+    const onFetchNode = useCallback(async (node: Node) => {
         const result = await securedFetch(`/api/${type}/${graph.Id}/${node.id}`, {
             method: 'GET',
             headers: {
@@ -346,349 +117,202 @@ export default function ForceGraph({
         }, toast, setIndicator);
 
         if (result.ok) {
-            const json = await result.json()
-            const elements = graph.extend(json.result, true)
+            const json = await result.json();
+            const elements = graph.extend(json.result, true);
             if (elements.length === 0) {
                 toast({
                     title: `No neighbors found`,
                     description: `No neighbors found`,
-                })
+                });
+            } else {
+                setData({ ...graph.Elements });
             }
         }
-    }
+    }, [type, graph, toast, setIndicator, setData]);
 
-    const deleteNeighbors = (nodes: Node[]) => {
+    const deleteNeighbors = useCallback((nodes: Node[]) => {
         if (nodes.length === 0) return;
 
-        const expandedNodes: Node[] = []
+        const expandedNodes: Node[] = [];
 
         graph.Elements = {
             nodes: graph.Elements.nodes.filter(node => {
-                if (!node.collapsed) return true
+                if (!node.collapsed) return true;
 
-                const isTarget = graph.Elements.links.some(link => link.target.id === node.id && nodes.some(n => n.id === link.source.id));
+                const isTarget = graph.Elements.links.some(link => {
+                    const targetId = link.target;
+                    const sourceId = link.source;
+                    return targetId === node.id && nodes.some(n => n.id === sourceId);
+                });
 
-                if (!isTarget) return true
+                if (!isTarget) return true;
 
-                const deleted = graph.NodesMap.delete(Number(node.id))
+                const deleted = graph.NodesMap.delete(Number(node.id));
 
                 if (deleted && node.expand) {
-                    expandedNodes.push(node)
+                    expandedNodes.push(node);
                 }
 
-                return false
+                return false;
             }),
             links: graph.Elements.links
-        }
+        };
 
-        deleteNeighbors(expandedNodes)
+        deleteNeighbors(expandedNodes);
 
-        setRelationships(graph.removeLinks(nodes.map(n => n.id)))
-    }
+        setRelationships(graph.removeLinks(nodes.map(n => n.id)));
+        setData({ ...graph.Elements });
+    }, [graph, setRelationships, setData]);
 
-    const handleNodeClick = async (node: Node) => {
-        const now = new Date()
-        const { date, name } = lastClick.current
-        lastClick.current = { date: now, name: handleGetNodeDisplayText(node) }
+    const handleNodeClick = useCallback(async (node: GraphNode) => {
+        const fullNode = graph.NodesMap.get(node.id);
+        if (!fullNode) return;
 
-        if (now.getTime() - date.getTime() < 1000 && name === handleGetNodeDisplayText(node)) {
-            if (!node.expand) {
-                await onFetchNode(node)
+        const now = new Date();
+        const { date, id: name } = lastClick.current;
+        lastClick.current = { date: now, id: node.id };
+
+        if (now.getTime() - date.getTime() < 1000 && name === node.id) {
+            if (!fullNode.expand) {
+                await onFetchNode(fullNode);
             } else {
-                deleteNeighbors([node])
+                deleteNeighbors([fullNode]);
             }
 
-            node.expand = !node.expand
-            setData({ ...graph.Elements })
-            handleCooldown(undefined, false)
+            fullNode.expand = !fullNode.expand;
+            setData({ ...graph.Elements });
+        }
+    }, [graph, onFetchNode, deleteNeighbors, setData]);
+
+    const handleHover = useCallback((element: GraphNode | GraphLink | null) => {
+        if (element === null) {
+            setHoverElement(undefined);
+            return;
+        }
+
+        // Find the full element from the graph
+        if ('source' in element) {
+            const fullLink = graph.LinksMap.get(element.id);
+            if (fullLink) setHoverElement(fullLink);
+        } else {
+            const fullNode = graph.NodesMap.get(element.id);
+            if (fullNode) setHoverElement(fullNode);
+        }
+    }, [graph]);
+
+    const handleRightClick = useCallback((element: GraphNode | GraphLink, evt: MouseEvent) => {
+        // Find the full element from the graph
+        let fullElement: Node | Link | undefined;
+        if ('source' in element) {
+            fullElement = graph.LinksMap.get(element.id);
+        } else {
+            fullElement = graph.NodesMap.get(element.id);
         }
-    }
 
-    const handleHover = (element: Node | Link | null) => {
-        setHoverElement(element === null ? undefined : element)
-    }
+        if (!fullElement) return;
 
-    const handleRightClick = (element: Node | Link, evt: MouseEvent) => {
         if (evt.ctrlKey) {
-            if (selectedElements.includes(element)) {
-                setSelectedElements(selectedElements.filter((el) => el !== element))
+            if (selectedElements.find(e => (("source" in e && "source" in fullElement) || (!("source" in e) && !("source" in fullElement))) && e.id === fullElement.id)) {
+                setSelectedElements(selectedElements.filter((el) => el !== fullElement));
             } else {
-                setSelectedElements([...selectedElements, element])
+                setSelectedElements([...selectedElements, fullElement]);
             }
         } else {
-            setSelectedElements([element])
+            setSelectedElements([fullElement]);
         }
-    }
+    }, [graph, selectedElements, setSelectedElements]);
+
+    const handleUnselected = useCallback((evt?: MouseEvent) => {
+        if (evt?.ctrlKey || selectedElements.length === 0) return;
+        setSelectedElements([]);
+    }, [selectedElements, setSelectedElements]);
+
+    const checkIsNodeSelected = useCallback((node: GraphNode) =>
+        selectedElements.some(el => el.id === node.id && !('source' in el)) ||
+        (!!hoverElement && !('source' in hoverElement) && hoverElement.id === node.id)
+        , [selectedElements, hoverElement]);
+
+    const checkIsLinkSelected = useCallback((link: GraphLink) =>
+        selectedElements.some(el => el.id === link.id && 'source' in el) ||
+        (!!hoverElement && 'source' in hoverElement && hoverElement.id === link.id)
+        , [selectedElements, hoverElement]);
 
-    const handleUnselected = (evt?: MouseEvent) => {
-        if (evt?.ctrlKey || selectedElements.length === 0) return
-        setSelectedElements([])
-    }
+    const handleEngineStop = useCallback(() => {
+        const canvas = canvasRef.current;
 
-    const isLinkSelected = (link: Link) => (selectedElements.length > 0 && selectedElements.some(el => el.id === link.id && el.source))
-        || (hoverElement && hoverElement.source && hoverElement.id === link.id)
+        if (!canvas) return;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any)[type] = () => canvas.getGraphData();
+
+        if (cooldownTicks === 0) return;
+
+        handleCooldown(0);
+    }, [canvasRef, cooldownTicks, handleCooldown, type]);
+
+    const handleLoadingChange = useCallback((loading: boolean) => {
+        setIsLoading(loading);
+    }, [setIsLoading]);
+
+    // Update colors
+    useEffect(() => {
+        if (!canvasRef.current || !canvasLoaded) return;
+        canvasRef.current.setBackgroundColor(background);
+    }, [canvasRef, background, canvasLoaded]);
+
+    useEffect(() => {
+        if (!canvasRef.current || !canvasLoaded) return;
+        canvasRef.current.setForegroundColor(foreground);
+    }, [canvasRef, foreground, canvasLoaded]);
+
+    // Update loading state
+    useEffect(() => {
+        if (!canvasRef.current || !canvasLoaded) return;
+        canvasRef.current.setIsLoading(isLoading);
+    }, [canvasRef, isLoading, canvasLoaded]);
+
+    // Update cooldown ticks
+    useEffect(() => {
+        if (!canvasRef.current || !canvasLoaded) return;
+        canvasRef.current.setCooldownTicks(cooldownTicks);
+    }, [canvasRef, cooldownTicks, canvasLoaded]);
+
+    // Update event handlers and selection functions
+    useEffect(() => {
+        if (!canvasRef.current || !canvasLoaded) return;
+        canvasRef.current.setConfig({
+            onNodeClick: handleNodeClick,
+            onNodeRightClick: handleRightClick,
+            onLinkRightClick: handleRightClick,
+            onNodeHover: handleHover,
+            onLinkHover: handleHover,
+            onBackgroundClick: handleUnselected,
+            isNodeSelected: checkIsNodeSelected,
+            isLinkSelected: checkIsLinkSelected,
+            onEngineStop: handleEngineStop,
+            onLoadingChange: handleLoadingChange
+        });
+    }, [handleNodeClick, handleRightClick, handleHover, handleUnselected, checkIsNodeSelected, checkIsLinkSelected, handleEngineStop, handleLoadingChange, canvasRef, canvasLoaded]);
+
+    // Update canvas data
+    useEffect(() => {
+        const canvas = canvasRef.current;
+
+        if (!canvas || !canvasLoaded) return;
+
+        if (graphData) {
+            canvas.setGraphData(graphData);
+            setGraphData(undefined);
+        } else {
+            const canvasData = convertToCanvasData(data);
+            
+            canvas.setData(canvasData);
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [canvasRef, data, setGraphData, canvasLoaded]);
 
     return (
-        <div ref={parentRef} className="w-full h-full relative">
-            {
-                isLoading &&
-                <div className="absolute inset-x-0 inset-y-0 bg-background flex items-center justify-center z-10">
-                    <Spinning />
-                </div>
-            }
-            <ForceGraph2D
-                ref={chartRef}
-                width={parentWidth}
-                height={parentHeight}
-                linkLabel={(link) => link.relationship}
-                nodeLabel={(node) => type === "graph" ? handleGetNodeDisplayText(node) : node.labels[0]}
-                graphData={data}
-                nodeRelSize={NODE_SIZE}
-                nodeVal={(node) => {
-                    // Return the square of customSize because library uses Math.sqrt(nodeVal)
-                    const label = getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l) || graph.createLabel([l])[0]));
-                    const customSize = label.style?.customSize || 1;
-                    return customSize * customSize; // Squared because library will sqrt it
-                }}
-                nodeCanvasObjectMode={() => 'replace'}
-                linkCanvasObjectMode={() => 'after'}
-                linkDirectionalArrowLength={(link) => {
-                    let length = 0;
-
-                    if (link.source !== link.target) {
-                        length = isLinkSelected(link) ? 4 : 2
-                    }
-
-                    return length;
-                }}
-                linkDirectionalArrowRelPos={1}
-                linkDirectionalArrowColor={(link) => link.color}
-                linkWidth={(link) => isLinkSelected(link) ? 2 : 1}
-                nodeCanvasObject={(node, ctx) => {
-
-                    if (!node.x || !node.y) {
-                        node.x = 0
-                        node.y = 0
-                    }
-
-                    // Get label style customization
-                    const label = getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l) || graph.createLabel([l])[0]));
-                    const customSize = label.style?.customSize || 1;
-                    const nodeSize = NODE_SIZE * customSize;
-
-                    // Draw the node circle with custom color and size
-                    ctx.fillStyle = node.color;
-                    ctx.beginPath();
-                    ctx.arc(node.x, node.y, nodeSize, 0, 2 * Math.PI, false);
-                    ctx.fill();
-
-                    // Draw the border
-                    ctx.lineWidth = ((selectedElements.length > 0 && selectedElements.some(el => el.id === node.id && !el.source)))
-                        || (hoverElement && !hoverElement.source && hoverElement.id === node.id)
-                        ? 1.5 : 0.5
-                    ctx.strokeStyle = foreground;
-                    ctx.stroke();
-
-                    // Set text color based on node background color for better contrast
-                    ctx.fillStyle = getContrastTextColor(node.color);
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.font = `400 2px SofiaSans`;
-                    ctx.letterSpacing = '0.1px'
-
-                    let [line1, line2] = node.displayName;
-
-                    // If displayName is empty or invalid, generate new text wrapping
-                    if (!line1 && !line2) {
-                        let text = '';
-
-                        if (type === "graph") {
-                            // Check if label has custom caption property
-                            const customCaption = label.style?.customCaption;
-                            if (customCaption) {
-                                if (customCaption === "Description") {
-                                    text = handleGetNodeDisplayText(node);
-                                } else if (customCaption === "id") {
-                                    text = String(node.id);
-                                } else if (node.data[customCaption]) {
-                                    text = String(node.data[customCaption]);
-                                } else {
-                                    text = handleGetNodeDisplayText(node);
-                                }
-                            } else {
-                                text = handleGetNodeDisplayText(node);
-                            }
-                        } else {
-                            text = label.name;
-                        }
-
-                        // Calculate text wrapping for circular node
-                        const textRadius = nodeSize - PADDING / 2; // Leave some padding inside the circle
-                        [line1, line2] = wrapTextForCircularNode(ctx, text, textRadius);
-
-                        // Cache the result
-                        node.displayName = [line1, line2];
-                    }
-
-                    const textMetrics = ctx.measureText(line1);
-                    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
-                    const halfTextHeight = textHeight / 2 * 1.5;
-
-                    // Draw the text lines
-                    if (line1) {
-                        ctx.fillText(line1, node.x, line2 ? node.y - halfTextHeight : node.y);
-                    }
-                    if (line2) {
-                        ctx.fillText(line2, node.x, node.y + halfTextHeight);
-                    }
-                }}
-                linkCanvasObject={(link, ctx) => {
-                    const start = link.source;
-                    const end = link.target;
-
-                    if (!start.x || !start.y || !end.x || !end.y) {
-                        start.x = 0
-                        start.y = 0
-                        end.x = 0
-                        end.y = 0
-                    }
-
-                    let textX;
-                    let textY;
-                    let angle;
-
-                    if (start.id === end.id) {
-                        const radius = NODE_SIZE * link.curve * 6.2;
-                        const angleOffset = -Math.PI / 4; // 45 degrees offset for text alignment
-                        textX = start.x + radius * Math.cos(angleOffset);
-                        textY = start.y + radius * Math.sin(angleOffset);
-                        angle = -angleOffset;
-                    } else {
-                        // Calculate the control point for the quadratic Bézier curve
-                        const dx = end.x - start.x;
-                        const dy = end.y - start.y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-
-                        // Calculate perpendicular vector for curve offset
-                        const perpX = dy / distance;
-                        const perpY = -dx / distance;
-
-                        // Control point with larger offset to match the actual curve
-                        const curvature = link.curve || 0;
-                        const controlX = (start.x + end.x) / 2 + perpX * curvature * distance * 1.0;
-                        const controlY = (start.y + end.y) / 2 + perpY * curvature * distance * 1.0;
-
-                        // Calculate point on Bézier curve at t = 0.5 (midpoint)
-                        const t = 0.5;
-                        const oneMinusT = 1 - t;
-                        textX = oneMinusT * oneMinusT * start.x + 2 * oneMinusT * t * controlX + t * t * end.x;
-                        textY = oneMinusT * oneMinusT * start.y + 2 * oneMinusT * t * controlY + t * t * end.y;
-
-                        // Calculate tangent angle at t = 0.5
-                        const tangentX = 2 * oneMinusT * (controlX - start.x) + 2 * t * (end.x - controlX);
-                        const tangentY = 2 * oneMinusT * (controlY - start.y) + 2 * t * (end.y - controlY);
-                        angle = Math.atan2(tangentY, tangentX);
-
-                        // maintain label vertical orientation for legibility
-                        if (angle > Math.PI / 2) angle = -(Math.PI - angle);
-                        if (angle < -Math.PI / 2) angle = -(-Math.PI - angle);
-                    }
-
-                    // Get text width
-                    ctx.font = '400 2px SofiaSans';
-                    ctx.letterSpacing = '0.1px'
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-
-                    let textWidth;
-                    let textHeight;
-                    let textAscent;
-                    let textDescent;
-
-                    const relationship = graph.RelationshipsMap.get(link.relationship)
-
-                    if (relationship) {
-                        ({ textWidth, textHeight, textAscent, textDescent } = relationship)
-                    }
-
-                    if (
-                        textWidth === undefined ||
-                        textHeight === undefined ||
-                        textAscent === undefined ||
-                        textDescent === undefined
-                    ) {
-                        const {
-                            width,
-                            actualBoundingBoxAscent,
-                            actualBoundingBoxDescent
-                        } = ctx.measureText(link.relationship)
-
-                        textWidth = width
-                        textHeight = actualBoundingBoxAscent + actualBoundingBoxDescent
-                        textAscent = actualBoundingBoxAscent
-                        textDescent = actualBoundingBoxDescent
-                        if (relationship) {
-                            graph.RelationshipsMap.set(link.relationship, {
-                                ...relationship,
-                                textWidth,
-                                textHeight,
-                                textAscent,
-                                textDescent
-                            })
-                        }
-                    }
-
-                    if (
-                        textWidth === undefined ||
-                        textHeight === undefined ||
-                        textAscent === undefined ||
-                        textDescent === undefined
-                    ) {
-                        return
-                    }
-
-                    // Use single save/restore for both background and text
-                    ctx.save();
-                    ctx.translate(textX, textY);
-                    ctx.rotate(angle);
-
-                    // Draw background rectangle (rotated)
-                    ctx.fillStyle = background;
-                    const backgroundWidth = textWidth * 0.7;
-                    const backgroundHeight = textHeight * 0.7;
-                    ctx.fillRect(
-                        -backgroundWidth / 2,
-                        -backgroundHeight / 2,
-                        backgroundWidth,
-                        backgroundHeight
-                    );
-
-                    // Draw text
-                    ctx.fillStyle = foreground;
-                    ctx.textBaseline = 'middle';
-                    ctx.fillText(link.relationship, 0, 0);
-                    ctx.restore();
-                }}
-                onNodeClick={indicator === "offline" ? undefined : handleNodeClick}
-                onNodeHover={handleHover}
-                onLinkHover={handleHover}
-                onNodeRightClick={handleRightClick}
-                onLinkRightClick={handleRightClick}
-                onBackgroundClick={handleUnselected}
-                onBackgroundRightClick={handleUnselected}
-                onEngineStop={async () => {
-                    if (cooldownTicks === 0) return
-
-                    handleZoomToFit(chartRef, undefined, data.nodes.length < 2 ? 4 : undefined)
-                    setTimeout(() => handleCooldown(0), 1000)
-                }}
-                linkCurvature="curve"
-                nodeVisibility="visible"
-                linkVisibility="visible"
-                cooldownTicks={cooldownTicks}
-                cooldownTime={1000}
-                backgroundColor={background}
-            />
-        </div>
-    )
+        <falkordb-canvas ref={canvasRef} />
+    );
 }
\ No newline at end of file
diff --git a/app/components/FormComponent.tsx b/app/components/FormComponent.tsx
index bf0664d0..e69b3e06 100644
--- a/app/components/FormComponent.tsx
+++ b/app/components/FormComponent.tsx
@@ -1,20 +1,20 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-param-reassign */
 
-"use client"
+"use client";
 
-import { useState } from "react"
-import { EyeIcon, EyeOffIcon, InfoIcon } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import Button from "./ui/Button"
-import Combobox from "./ui/combobox"
-import Input from "./ui/Input"
+import { useState } from "react";
+import { EyeIcon, EyeOffIcon, InfoIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import Button from "./ui/Button";
+import Combobox from "./ui/combobox";
+import Input from "./ui/Input";
 
 export type Error = {
     message: string
     condition: (value: string, password?: string) => boolean
-}
+};
 
 export type DefaultField = {
     value: string
@@ -25,26 +25,26 @@ export type DefaultField = {
     description?: string
     errors?: Error[]
     info?: string
-}
+};
 
 export type SelectField = DefaultField & {
     type: "select"
     options: string[]
     selectType: "Role"
     onChange: (value: string) => void
-}
+};
 
 export type PasswordField = DefaultField & {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
     type: "password"
-}
+};
 
 export type TextField = DefaultField & {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
     type: "text"
-}
+};
 
-export type Field = SelectField | PasswordField | TextField
+export type Field = SelectField | PasswordField | TextField;
 
 interface Props {
     handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>
@@ -64,34 +64,34 @@ export default function FormComponent({ handleSubmit, fields, error = undefined,
     const [isLoading, setIsLoading] = useState(false);
 
     const onHandleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
+        e.preventDefault();
 
-        const newErrors: { [key: string]: boolean } = {}
+        const newErrors: { [key: string]: boolean } = {};
         fields.forEach(field => {
             if (field.errors) {
-                newErrors[field.label] = field.errors.some(err => err.condition(field.value))
+                newErrors[field.label] = field.errors.some(err => err.condition(field.value));
             }
-        })
+        });
 
-        setErrors(newErrors)
+        setErrors(newErrors);
 
         if (Object.values(newErrors).some(value => value)) {
-            return
+            return;
         }
 
         try {
-            setIsLoading(true)
-            await handleSubmit(e)
+            setIsLoading(true);
+            await handleSubmit(e);
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <form className={cn("flex flex-col gap-4 w-full", className)} onSubmit={onHandleSubmit}>
             {
                 fields.map((field) => {
-                    const passwordType = show[field.label] ? "text" : "password"
+                    const passwordType = show[field.label] ? "text" : "password";
                     return (
                         <div className="flex flex-col gap-2" key={field.label}>
                             <div className={cn(field.info && "flex gap-2 items-center")}>
@@ -117,7 +117,7 @@ export default function FormComponent({ handleSubmit, fields, error = undefined,
                                             setShow(prev => ({
                                                 ...prev,
                                                 [field.label]: !prev[field.label]
-                                            }))
+                                            }));
                                         }}
                                     >
                                         {
@@ -143,21 +143,21 @@ export default function FormComponent({ handleSubmit, fields, error = undefined,
                                             placeholder={field.placeholder}
                                             value={field.value}
                                             onChange={(e) => {
-                                                field.onChange(e)
+                                                field.onChange(e);
                                                 if (field.type === "password") {
-                                                    const confirmPasswordField = fields.find(f => f.label === "Confirm Password")
+                                                    const confirmPasswordField = fields.find(f => f.label === "Confirm Password");
                                                     if (confirmPasswordField && confirmPasswordField.errors) {
                                                         setErrors(prev => ({
                                                             ...prev,
                                                             "Confirm Password": confirmPasswordField.errors!.some(err => err.condition(confirmPasswordField.value, e.target.value))
-                                                        }))
+                                                        }));
                                                     }
                                                 }
                                                 if (field.errors) {
                                                     setErrors(prev => ({
                                                         ...prev,
                                                         [field.label]: field.errors!.some(err => err.condition(e.target.value))
-                                                    }))
+                                                    }));
                                                 }
                                             }} />
                                 }
@@ -170,7 +170,7 @@ export default function FormComponent({ handleSubmit, fields, error = undefined,
                                 </div>
                             </div>
                         </div>
-                    )
+                    );
                 })
             }
             {children}
@@ -188,7 +188,7 @@ export default function FormComponent({ handleSubmit, fields, error = undefined,
                 />
             </div>
         </form>
-    )
+    );
 }
 
 FormComponent.defaultProps = {
@@ -196,4 +196,4 @@ FormComponent.defaultProps = {
     error: undefined,
     submitButtonLabel: "Submit",
     className: ""
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/components/GithubMark.tsx b/app/components/GithubMark.tsx
index 716ec130..fb31407c 100644
--- a/app/components/GithubMark.tsx
+++ b/app/components/GithubMark.tsx
@@ -1,17 +1,17 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
 export default function GithubMark({darkMode, className=""}: {darkMode: boolean, className: string}) {
 
-    const [color, setColor] = useState<string>("#24292f")
+    const [color, setColor] = useState<string>("#24292f");
 
     // Setting the color post render to avoid warning about mismatched client/server content
     useEffect(() => {
-       setColor(darkMode ?  "#ffffff" : "#24292f")
-    }, [darkMode])
+       setColor(darkMode ?  "#ffffff" : "#24292f");
+    }, [darkMode]);
 
     return (
         <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" suppressHydrationWarning>
             <path fill={color} d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
         </svg>
-    )
+    );
 } 
\ No newline at end of file
diff --git a/app/components/GoogleAnalytics.tsx b/app/components/GoogleAnalytics.tsx
index 955ac32c..ab7b8ca8 100644
--- a/app/components/GoogleAnalytics.tsx
+++ b/app/components/GoogleAnalytics.tsx
@@ -19,6 +19,6 @@ function GoogleAnalytics({ ga_id }: { ga_id: string }) {
         `,
       }}
      />
-  </>
+  </>;
 }
 export default GoogleAnalytics;
\ No newline at end of file
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index b435a181..09766af7 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/require-default-props */
 
-'use client'
+'use client';
 
 import { ArrowUpRight, Database, FileCode, LogOut, Monitor, Moon, Settings, Sun } from "lucide-react";
 import { useCallback, useContext, useState, useEffect } from "react";
@@ -30,54 +30,54 @@ interface Props {
 }
 
 function getPathType(pathname: string): "Schema" | "Graph" | undefined {
-    if (pathname.includes("/schema")) return "Schema"
-    if (pathname.includes("/graph")) return "Graph"
-    return undefined
+    if (pathname.includes("/schema")) return "Schema";
+    if (pathname.includes("/graph")) return "Graph";
+    return undefined;
 }
 
-const iconSize = 30
+const iconSize = 30;
 
 export default function Header({ onSetGraphName, graphNames, graphName, onOpenGraphInfo, navigateToSettings }: Props) {
 
-    const { indicator } = useContext(IndicatorContext)
-    const { setPanel } = useContext(PanelContext)
-    const { hasChanges, saveSettings, resetSettings, settings: { chatSettings: { model, secretKey, displayChat } } } = useContext(BrowserSettingsContext)
+    const { indicator } = useContext(IndicatorContext);
+    const { setPanel } = useContext(PanelContext);
+    const { hasChanges, saveSettings, resetSettings, settings: { chatSettings: { model, secretKey, displayChat } } } = useContext(BrowserSettingsContext);
 
-    const { theme, setTheme } = useTheme()
-    const { currentTheme } = getTheme(theme)
-    const { data: session } = useSession()
-    const pathname = usePathname()
-    const router = useRouter()
-    const { toast } = useToast()
+    const { theme, setTheme } = useTheme();
+    const { currentTheme } = getTheme(theme);
+    const { data: session } = useSession();
+    const pathname = usePathname();
+    const router = useRouter();
+    const { toast } = useToast();
 
-    const [mounted, setMounted] = useState(false)
+    const [mounted, setMounted] = useState(false);
 
-    const type = getPathType(pathname)
-    const showCreate = type && session?.user.role && session.user.role !== "Read-Only"
+    const type = getPathType(pathname);
+    const showCreate = type && session?.user.role && session.user.role !== "Read-Only";
 
     useEffect(() => {
-        setMounted(true)
-    }, [])
+        setMounted(true);
+    }, []);
 
     const navigateBack = useCallback(() => {
         if (hasChanges) {
             getQuerySettingsNavigationToast(toast, () => {
-                saveSettings()
-                router.back()
+                saveSettings();
+                router.back();
             }, () => {
-                resetSettings()
-                router.back()
-            })
+                resetSettings();
+                router.back();
+            });
         } else {
-            router.back()
+            router.back();
         }
-    }, [hasChanges, resetSettings, saveSettings, router, toast])
+    }, [hasChanges, resetSettings, saveSettings, router, toast]);
 
     const handleSetCurrentPanel = useCallback((newPanel: Panel) => {
-        setPanel(prev => prev === newPanel ? undefined : newPanel)
-    }, [setPanel])
+        setPanel(prev => prev === newPanel ? undefined : newPanel);
+    }, [setPanel]);
 
-    const separator = <div className="h-px w-[80%] bg-border rounded-full" />
+    const separator = <div className="h-px w-[80%] bg-border rounded-full" />;
 
     return (
         <div className="py-5 px-2 flex flex-col justify-between items-center border-r border-border">
@@ -148,14 +148,14 @@ export default function Header({ onSetGraphName, graphNames, graphName, onOpenGr
                             label="CHAT"
                             onClick={() => {
                                 if (navigateToSettings && (!model || !secretKey)) {
-                                    router.push("/settings")
+                                    router.push("/settings");
                                     toast({
                                         title: "Incomplete Chat Settings",
                                         description: "Please complete the chat settings to use the chat feature.",
                                         variant: "destructive",
-                                    })
+                                    });
                                 } else {
-                                    handleSetCurrentPanel("chat")
+                                    handleSetCurrentPanel("chat");
                                 }
                             }}
                         />
@@ -249,11 +249,11 @@ export default function Header({ onSetGraphName, graphNames, graphName, onOpenGr
                             data-testid="themeToggle"
                             title={`Toggle theme current theme: ${theme}`}
                             onClick={() => {
-                                let newTheme = ""
-                                if (theme === "dark") newTheme = "light"
-                                else if (theme === "light") newTheme = "system"
-                                else newTheme = "dark"
-                                setTheme(newTheme)
+                                let newTheme = "";
+                                if (theme === "dark") newTheme = "light";
+                                else if (theme === "light") newTheme = "system";
+                                else newTheme = "dark";
+                                setTheme(newTheme);
                             }}
                         >
                             {theme === "dark" && <Sun size={iconSize} />}
@@ -288,5 +288,5 @@ export default function Header({ onSetGraphName, graphNames, graphName, onOpenGr
                 </Button>
             </div>
         </div >
-    )
+    );
 }
diff --git a/app/components/PaginationList.tsx b/app/components/PaginationList.tsx
index db09ceed..44824914 100644
--- a/app/components/PaginationList.tsx
+++ b/app/components/PaginationList.tsx
@@ -1,12 +1,12 @@
-import { cn } from "@/lib/utils"
-import { Fragment, KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react"
-import { Check, Circle, Loader2, X } from "lucide-react"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import Button from "./ui/Button"
-import { Query } from "../api/graph/model"
-import Input from "./ui/Input"
+import { cn } from "@/lib/utils";
+import { Fragment, KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react";
+import { Check, Circle, Loader2, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import Button from "./ui/Button";
+import { Query } from "../api/graph/model";
+import Input from "./ui/Input";
 
-type Item = string | Query
+type Item = string | Query;
 
 type ElementItem = {
     content: React.ReactNode;
@@ -25,34 +25,34 @@ const getLastRun = (timestamp: number) => {
     }
 
     return date.toLocaleString([], { hour12: false });
-}
+};
 
-const getExecutionTime = (metadata: string[]) => metadata.find(value => value.startsWith("Query internal execution time:"))?.split(":")[1].replace(" milliseconds", "ms")
+const getExecutionTime = (metadata: string[]) => metadata.find(value => value.startsWith("Query internal execution time:"))?.split(":")[1].replace(" milliseconds", "ms");
 
 const getItemClassName = (selected: boolean, deleteSelected: boolean, hover: boolean, prefix: "text" | "bg" = "text") => {
-    if (selected) return `${prefix}-primary border-primary`
-    if (deleteSelected) return `${prefix}-destructive border-destructive`
-    if (hover) return `${prefix}-foreground border-foreground`
-    return `${prefix}-border border-border`
-}
+    if (selected) return `${prefix}-primary border-primary`;
+    if (deleteSelected) return `${prefix}-destructive border-destructive`;
+    if (hover) return `${prefix}-foreground border-foreground`;
+    return `${prefix}-border border-border`;
+};
 
 const getSeparator = (selected: boolean, deleteSelected: boolean, hover: boolean) => (
     <div
         className={cn("h-2/3 w-px rounded-full", getItemClassName(selected, deleteSelected, hover, "bg"))}
     />
-)
+);
 
 const getStatusIcon = (status: Query["status"]) => {
-    const size = 20
+    const size = 20;
     switch (status) {
         case "Empty":
-            return <Circle color="orange" size={size} />
+            return <Circle color="orange" size={size} />;
         case "Failed":
-            return <X size={size} color="red" />
+            return <X size={size} color="red" />;
         default:
-            return <Check size={size} color="green" />
+            return <Check size={size} color="green" />;
     }
-}
+};
 
 const getQueryElement = (item: Query, selected: boolean, deleteSelected: boolean, hover: boolean) => {
     const executionTime = getExecutionTime(item.metadata);
@@ -116,7 +116,7 @@ const getQueryElement = (item: Query, selected: boolean, deleteSelected: boolean
             ))}
         </div>
     );
-}
+};
 
 interface Props<T extends Item> {
     list: T[]
@@ -134,74 +134,74 @@ interface Props<T extends Item> {
 
 export default function PaginationList<T extends Item>({ list, onClick, dataTestId, afterSearchCallback, isSelected, isDeleteSelected, label, isLoading, className, children, searchRef }: Props<T>) {
 
-    const [filteredList, setFilteredList] = useState<T[]>([...list])
-    const [hoverIndex, setHoverIndex] = useState<number>(0)
-    const [stepCounter, setStepCounter] = useState(0)
-    const [pageCount, setPageCount] = useState(0)
-    const [search, setSearch] = useState("")
-    const [itemsPerPage, setItemsPerPage] = useState(1)
+    const [filteredList, setFilteredList] = useState<T[]>([...list]);
+    const [hoverIndex, setHoverIndex] = useState<number>(0);
+    const [stepCounter, setStepCounter] = useState(0);
+    const [pageCount, setPageCount] = useState(0);
+    const [search, setSearch] = useState("");
+    const [itemsPerPage, setItemsPerPage] = useState(1);
 
-    const containerRef = useRef<HTMLUListElement>(null)
+    const containerRef = useRef<HTMLUListElement>(null);
 
-    const startIndex = stepCounter * itemsPerPage
-    const endIndex = Math.min(startIndex + itemsPerPage, filteredList.length)
-    const items = filteredList.slice(startIndex, endIndex)
-    const itemHeight = typeof items[0] === "string" ? 30 : 50
+    const startIndex = stepCounter * itemsPerPage;
+    const endIndex = Math.min(startIndex + itemsPerPage, filteredList.length);
+    const items = filteredList.slice(startIndex, endIndex);
+    const itemHeight = typeof items[0] === "string" ? 30 : 50;
 
     useEffect(() => {
-        setStepCounter(0)
-    }, [filteredList])
+        setStepCounter(0);
+    }, [filteredList]);
 
     useEffect(() => {
-        const newPageCount = Math.ceil(filteredList.length / itemsPerPage)
-        setPageCount(newPageCount)
-        if (newPageCount < stepCounter + 1) setStepCounter(0)
-    }, [filteredList, itemsPerPage, stepCounter])
+        const newPageCount = Math.ceil(filteredList.length / itemsPerPage);
+        setPageCount(newPageCount);
+        if (newPageCount < stepCounter + 1) setStepCounter(0);
+    }, [filteredList, itemsPerPage, stepCounter]);
 
     useEffect(() => {
         const calculateItemsPerPage = () => {
             if (containerRef.current) {
-                const containerHeight = containerRef.current.clientHeight
-                const calculatedItems = Math.floor(containerHeight / itemHeight)
-                setItemsPerPage(Math.max(1, calculatedItems))
+                const containerHeight = containerRef.current.clientHeight;
+                const calculatedItems = Math.floor(containerHeight / itemHeight);
+                setItemsPerPage(Math.max(1, calculatedItems));
             }
-        }
+        };
 
-        calculateItemsPerPage()
+        calculateItemsPerPage();
 
         const resizeObserver = new ResizeObserver(() => {
-            calculateItemsPerPage()
-        })
+            calculateItemsPerPage();
+        });
 
         if (containerRef.current) {
-            resizeObserver.observe(containerRef.current)
+            resizeObserver.observe(containerRef.current);
         }
 
         return () => {
-            resizeObserver.disconnect()
-        }
-    }, [itemHeight, items, items.length])
+            resizeObserver.disconnect();
+        };
+    }, [itemHeight, items, items.length]);
 
     useEffect(() => {
         const timeout = setTimeout(() => {
-            const newFilteredList = list.filter((item) => !search || (typeof item === "string" ? item.toLowerCase().includes(search.toLowerCase()) : item.text.toLowerCase().includes(search.toLowerCase()))) || []
+            const newFilteredList = list.filter((item) => !search || (typeof item === "string" ? item.toLowerCase().includes(search.toLowerCase()) : item.text.toLowerCase().includes(search.toLowerCase()))) || [];
             if (JSON.stringify(newFilteredList) !== JSON.stringify(filteredList)) {
-                setFilteredList([...newFilteredList])
-                afterSearchCallback([...newFilteredList])
-                setStepCounter(0)
-                setHoverIndex(0)
+                setFilteredList([...newFilteredList]);
+                afterSearchCallback([...newFilteredList]);
+                setStepCounter(0);
+                setHoverIndex(0);
             }
-        }, 500)
+        }, 500);
 
         return () => {
-            clearTimeout(timeout)
-        }
-    }, [afterSearchCallback, list, search, filteredList])
+            clearTimeout(timeout);
+        };
+    }, [afterSearchCallback, list, search, filteredList]);
 
     const handleSetStepCounter = (callback: ((prev: number) => number) | number) => {
-        setStepCounter(callback)
-        searchRef.current?.focus()
-    }
+        setStepCounter(callback);
+        searchRef.current?.focus();
+    };
 
     return (
         <div className={cn("w-full flex flex-col gap-2 p-3", className)}>
@@ -216,25 +216,25 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
                     onChange={(e) => setSearch(e.target.value)}
                     onKeyDown={(e) => {
                         if (e.key === "Escape") {
-                            e.preventDefault()
-                            setSearch("")
+                            e.preventDefault();
+                            setSearch("");
                         }
 
                         if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab" && hoverIndex > 0)) {
-                            e.preventDefault()
+                            e.preventDefault();
 
-                            setHoverIndex(prev => prev ? prev - 1 : prev)
+                            setHoverIndex(prev => prev ? prev - 1 : prev);
                         }
 
                         if (e.key === "ArrowDown" || (!e.shiftKey && e.key === "Tab" && hoverIndex < items.length - 1)) {
-                            e.preventDefault()
+                            e.preventDefault();
 
-                            setHoverIndex(prev => prev < items.length - 1 ? prev + 1 : prev)
+                            setHoverIndex(prev => prev < items.length - 1 ? prev + 1 : prev);
                         }
 
                         if (e.key === "Enter") {
-                            e.preventDefault()
-                            onClick(typeof items[hoverIndex] === "string" ? items[hoverIndex] : items[hoverIndex].text, e)
+                            e.preventDefault();
+                            onClick(typeof items[hoverIndex] === "string" ? items[hoverIndex] : items[hoverIndex].text, e);
                         }
                     }}
                     onFocus={() => setHoverIndex(0)}
@@ -249,11 +249,11 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
             >
                 {
                     items.map((item, index) => {
-                        const selected = isSelected ? isSelected(item) : false
-                        const deleteSelected = isDeleteSelected ? isDeleteSelected(item) : false
-                        const hover = hoverIndex === index
-                        const isString = typeof item === "string"
-                        const text = isString ? item : item.text
+                        const selected = isSelected ? isSelected(item) : false;
+                        const deleteSelected = isDeleteSelected ? isDeleteSelected(item) : false;
+                        const hover = hoverIndex === index;
+                        const isString = typeof item === "string";
+                        const text = isString ? item : item.text;
 
                         const content = (
                             <>
@@ -263,7 +263,7 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
                                 }
                                 <p data-testid={`${dataTestId}${text}Text`} className={cn("truncate w-full text-left", !isString && "h-1 grow")}>{text}</p>
                             </>
-                        )
+                        );
 
                         return (
                             <li
@@ -284,15 +284,15 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
                                             data-testid={`${dataTestId}${text}Button`}
                                             title={text}
                                             onClick={(e) => {
-                                                onClick(text, e)
+                                                onClick(text, e);
                                             }}
                                             onContextMenu={(e) => {
-                                                e.preventDefault()
+                                                e.preventDefault();
                                                 const syntheticEvent = {
                                                     ...e,
                                                     type: "rightclick" as const
-                                                } as typeof e & { type: "rightclick" }
-                                                onClick(text, syntheticEvent)
+                                                } as typeof e & { type: "rightclick" };
+                                                onClick(text, syntheticEvent);
                                             }}
                                             tabIndex={-1}
                                         >
@@ -301,7 +301,7 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
                                         : content
                                 }
                             </li>
-                        )
+                        );
                     })
                 }
             </ul>
@@ -329,7 +329,7 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
                                     label={`[${index + 1}]`}
                                     title={`Page ${index + 1}`}
                                     onClick={() => {
-                                        handleSetStepCounter(index)
+                                        handleSetStepCounter(index);
                                     }}
                                 />
                             </li>
@@ -341,7 +341,7 @@ export default function PaginationList<T extends Item>({ list, onClick, dataTest
                 </li>
             </ul>
         </div>
-    )
+    );
 }
 
 PaginationList.defaultProps = {
@@ -349,4 +349,4 @@ PaginationList.defaultProps = {
     children: undefined,
     isLoading: undefined,
     isDeleteSelected: undefined,
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/components/TableComponent.tsx b/app/components/TableComponent.tsx
index 753746d4..7e423e27 100644
--- a/app/components/TableComponent.tsx
+++ b/app/components/TableComponent.tsx
@@ -5,10 +5,10 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/require-default-props */
 
-"use client"
+"use client";
 
 import { Checkbox } from "@/components/ui/checkbox";
-import { JSONTree } from "react-json-tree"
+import { JSONTree } from "react-json-tree";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Cell, cn, getTheme, Row } from "@/lib/utils";
 import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -84,34 +84,34 @@ export default function TableComponent({
     onExpandChange
 }: Props) {
 
-    const { indicator } = useContext(IndicatorContext)
+    const { indicator } = useContext(IndicatorContext);
 
-    const { theme } = useTheme()
-    const { currentTheme } = getTheme(theme)
+    const { theme } = useTheme();
+    const { currentTheme } = getTheme(theme);
 
-    const searchRef = useRef<HTMLInputElement>(null)
-    const headerRef = useRef<HTMLTableRowElement>(null)
-    const tableRef = useRef<HTMLTableElement>(null)
-    const scrollContainerRef = useRef<HTMLDivElement>(null)
+    const searchRef = useRef<HTMLInputElement>(null);
+    const headerRef = useRef<HTMLTableRowElement>(null);
+    const tableRef = useRef<HTMLTableElement>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
     const loadAttemptedRef = useRef<Set<string>>(new Set());
     const abortControllersRef = useRef<Map<string, AbortController>>(new Map());
 
-    const [hasRestored, setHasRestored] = useState(false)
-    const [search, setSearch] = useState<string>("")
-    const [editable, setEditable] = useState<string>("")
-    const [hover, setHover] = useState<string>("")
-    const [newValue, setNewValue] = useState<string>("")
-    const [filteredRows, setFilteredRows] = useState<Row[]>([])
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [scrollTop, setScrollTop] = useState<number>(0)
-    const [topFakeRowHeight, setTopFakeRowHeight] = useState<number>(0)
-    const [bottomFakeRowHeight, setBottomFakeRowHeight] = useState<number>(0)
-    const [visibleRows, setVisibleRows] = useState<Row[]>([])
-    const [loadingCells, setLoadingCells] = useState<Set<string>>(new Set())
-    const [loadedCells, setLoadedCells] = useState<Set<string>>(new Set())
-    const [expandArr, setExpandArr] = useState(new Map(initialExpand))
-
-    const height = useMemo(() => expandArr.size === 0 ? itemHeight : itemHeight * 2, [expandArr.size, itemHeight])
+    const [hasRestored, setHasRestored] = useState(false);
+    const [search, setSearch] = useState<string>("");
+    const [editable, setEditable] = useState<string>("");
+    const [hover, setHover] = useState<string>("");
+    const [newValue, setNewValue] = useState<string>("");
+    const [filteredRows, setFilteredRows] = useState<Row[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [scrollTop, setScrollTop] = useState<number>(0);
+    const [topFakeRowHeight, setTopFakeRowHeight] = useState<number>(0);
+    const [bottomFakeRowHeight, setBottomFakeRowHeight] = useState<number>(0);
+    const [visibleRows, setVisibleRows] = useState<Row[]>([]);
+    const [loadingCells, setLoadingCells] = useState<Set<string>>(new Set());
+    const [loadedCells, setLoadedCells] = useState<Set<string>>(new Set());
+    const [expandArr, setExpandArr] = useState(new Map(initialExpand));
+
+    const height = useMemo(() => expandArr.size === 0 ? itemHeight : itemHeight * 2, [expandArr.size, itemHeight]);
 
     const handleLoadLazyCell = useCallback((rowName: string, cellIndex: number, loadFn: () => Promise<any>) => {
         // Use row name for stable cell key
@@ -190,37 +190,37 @@ export default function TableComponent({
             // Clean up abort controller
             abortControllersRef.current.delete(cellKey);
         });
-    }, [loadingCells, loadedCells, rows, setRows])
+    }, [loadingCells, loadedCells, rows, setRows]);
 
     useEffect(() => {
-        const newStartIndex = Math.max(0, Math.floor((scrollTop - (height * itemsPerPage)) / height))
-        const newEndIndex = Math.min(filteredRows.length, Math.floor((scrollTop + (height * (itemsPerPage * 2))) / height))
-        const newTopFakeRowHeight = newStartIndex * height
-        const newBottomFakeRowHeight = (filteredRows.length - newEndIndex) * height
-        const newVisibleRows = [...filteredRows].slice(newStartIndex, newEndIndex)
+        const newStartIndex = Math.max(0, Math.floor((scrollTop - (height * itemsPerPage)) / height));
+        const newEndIndex = Math.min(filteredRows.length, Math.floor((scrollTop + (height * (itemsPerPage * 2))) / height));
+        const newTopFakeRowHeight = newStartIndex * height;
+        const newBottomFakeRowHeight = (filteredRows.length - newEndIndex) * height;
+        const newVisibleRows = [...filteredRows].slice(newStartIndex, newEndIndex);
 
-        setTopFakeRowHeight(newTopFakeRowHeight)
-        setBottomFakeRowHeight(newBottomFakeRowHeight)
-        setVisibleRows(newVisibleRows)
-    }, [scrollTop, itemHeight, itemsPerPage, filteredRows, height])
+        setTopFakeRowHeight(newTopFakeRowHeight);
+        setBottomFakeRowHeight(newBottomFakeRowHeight);
+        setVisibleRows(newVisibleRows);
+    }, [scrollTop, itemHeight, itemsPerPage, filteredRows, height]);
 
     useEffect(() => {
         if (searchRef.current) {
-            searchRef.current.focus()
+            searchRef.current.focus();
         }
-    }, [])
+    }, []);
 
     useEffect(() => {
         if (inputRef && inputRef.current && editable) {
-            inputRef.current.focus()
+            inputRef.current.focus();
         }
-    }, [inputRef, editable])
+    }, [inputRef, editable]);
 
     useEffect(() => {
         if (searchRef.current) {
-            searchRef.current.focus()
+            searchRef.current.focus();
         }
-    }, [])
+    }, []);
 
     const handleSearchFilter = useCallback((cell: Cell): boolean => {
         if (!cell.value) return false;
@@ -239,24 +239,24 @@ export default function TableComponent({
         }
 
         return cell.value.toString().toLowerCase().includes(searchLower);
-    }, [search])
+    }, [search]);
 
     useEffect(() => {
         if (!search) {
-            setFilteredRows([...rows])
-            return undefined
+            setFilteredRows([...rows]);
+            return undefined;
         }
 
         const timeout = setTimeout(() => {
             setFilteredRows([...rows].filter((row) => row.cells.some(cell =>
                 handleSearchFilter(cell)
-            )))
-        }, 500)
+            )));
+        }, 500);
 
         return () => {
-            clearTimeout(timeout)
-        }
-    }, [search, rows, handleSearchFilter])
+            clearTimeout(timeout);
+        };
+    }, [search, rows, handleSearchFilter]);
 
     // Clean up when rows change and cells no longer have values
     useEffect(() => {
@@ -304,28 +304,28 @@ export default function TableComponent({
             });
             return newSet;
         });
-    }, [rows])
+    }, [rows]);
 
     useEffect(() => {
         // Restore scroll position on mount
-        if (hasRestored || filteredRows.length === 0) return () => { }
+        if (hasRestored || filteredRows.length === 0) return () => { };
 
         // Use setTimeout to ensure virtual scroll content is rendered
         const timer = setTimeout(() => {
             if (initialScrollPosition && scrollContainerRef.current) {
-                scrollContainerRef.current.scrollTop = initialScrollPosition
-                setScrollTop(initialScrollPosition)
+                scrollContainerRef.current.scrollTop = initialScrollPosition;
+                setScrollTop(initialScrollPosition);
             }
 
             if (initialSearch) {
-                setSearch(initialSearch)
+                setSearch(initialSearch);
             }
 
-            setHasRestored(true)
-        }, 0)
+            setHasRestored(true);
+        }, 0);
 
-        return () => clearTimeout(timer)
-    }, [hasRestored, initialScrollPosition, filteredRows.length, initialSearch])
+        return () => clearTimeout(timer);
+    }, [hasRestored, initialScrollPosition, filteredRows.length, initialSearch]);
 
     // Cleanup: abort all pending requests on unmount
     useEffect(() => () => {
@@ -333,38 +333,38 @@ export default function TableComponent({
             controller.abort();
         });
         abortControllersRef.current.clear();
-    }, [])
+    }, []);
 
     const handleSetEditable = (editValue: string, value: string) => {
-        setEditable(editValue)
-        setNewValue(value)
-    }
+        setEditable(editValue);
+        setNewValue(value);
+    };
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-        const newScrollTop = (e.target as HTMLDivElement).scrollTop
-        setScrollTop(newScrollTop)
+        const newScrollTop = (e.target as HTMLDivElement).scrollTop;
+        setScrollTop(newScrollTop);
         if (onScrollChange) {
-            onScrollChange(newScrollTop)
+            onScrollChange(newScrollTop);
         }
-    }
+    };
 
     const stripSVG = useMemo(() => encodeURIComponent(
         `<svg width='100%' height='${itemHeight}' xmlns='http://www.w3.org/2000/svg'>
                 <line x1='0' y1='${itemHeight - 1}' x2='100%' y2='${itemHeight - 1}' stroke='#e5e7eb' stroke-width='2'/>
         </svg>`
-    ), [itemHeight])
-    const stripBackground = useMemo(() => `url("data:image/svg+xml,${stripSVG}")`, [stripSVG])
+    ), [itemHeight]);
+    const stripBackground = useMemo(() => `url("data:image/svg+xml,${stripSVG}")`, [stripSVG]);
     const columnCount = (setRows ? headers.length + 1 : headers.length) + 1;
 
     const renderValue = (v: any) => (
         <span className={cn("pointer-events-auto", valueClassName)}>{v}</span>
-    )
+    );
 
     const renderLabel = (l: any) => (
         <span className={cn(valueClassName)}>{l[0]}:</span>
-    )
+    );
 
-    const getClassName = (index: number, level?: number) => cn("text-border rounded-lg", expandArr.get(index) === level && "bg-background text-foreground")
+    const getClassName = (index: number, level?: number) => cn("text-border rounded-lg", expandArr.get(index) === level && "bg-background text-foreground");
 
     return (
         <div className={cn("h-full w-full flex flex-col gap-4", className)}>
@@ -379,17 +379,17 @@ export default function TableComponent({
                     placeholder={`Search for${entityName ? ` a ${entityName}` : ""}`}
                     onKeyDown={(e) => {
                         if (e.key === "Escape") {
-                            e.preventDefault()
-                            setSearch("")
+                            e.preventDefault();
+                            setSearch("");
                         }
 
-                        if (e.key !== "Enter") return
-                        e.preventDefault()
+                        if (e.key !== "Enter") return;
+                        e.preventDefault();
                     }}
                     onChange={(e) => {
-                        const val = e.target.value
-                        setSearch(val)
-                        if (onSearchChange) onSearchChange(val)
+                        const val = e.target.value;
+                        setSearch(val);
+                        if (onSearchChange) onSearchChange(val);
                     }}
                 />
             </div>
@@ -404,11 +404,11 @@ export default function TableComponent({
                                         className="w-6 h-6 rounded-full bg-background border-primary data-[state=checked]:bg-primary"
                                         checked={rows.length > 0 && rows.every(row => row.checked)}
                                         onCheckedChange={() => {
-                                            const checked = rows.every(row => row.checked)
+                                            const checked = rows.every(row => row.checked);
                                             setRows(rows.map((row) => {
-                                                row.checked = !checked
-                                                return row
-                                            }))
+                                                row.checked = !checked;
+                                                return row;
+                                            }));
                                         }}
                                     />
                                 </TableHead>
@@ -434,10 +434,10 @@ export default function TableComponent({
                                                     className={getClassName(i, 1)}
                                                     title="Expand Root"
                                                     onClick={() => {
-                                                        const newExpandArr = new Map(expandArr).set(i, 1)
-                                                        setExpandArr(newExpandArr)
+                                                        const newExpandArr = new Map(expandArr).set(i, 1);
+                                                        setExpandArr(newExpandArr);
 
-                                                        if (onExpandChange) onExpandChange(newExpandArr)
+                                                        if (onExpandChange) onExpandChange(newExpandArr);
                                                     }}
                                                 >
                                                     <ChevronDown />
@@ -446,10 +446,10 @@ export default function TableComponent({
                                                     title="Expand All"
                                                     className={getClassName(i, -1)}
                                                     onClick={() => {
-                                                        const newExpandArr = new Map(expandArr).set(i, -1)
-                                                        setExpandArr(newExpandArr)
+                                                        const newExpandArr = new Map(expandArr).set(i, -1);
+                                                        setExpandArr(newExpandArr);
 
-                                                        if (onExpandChange) onExpandChange(newExpandArr)
+                                                        if (onExpandChange) onExpandChange(newExpandArr);
                                                     }}
                                                 >
                                                     <ChevronsDown />
@@ -458,11 +458,11 @@ export default function TableComponent({
                                                     title="Collapse All"
                                                     className={getClassName(i)}
                                                     onClick={() => {
-                                                        const newExpandArr = new Map(expandArr)
-                                                        newExpandArr.delete(i)
-                                                        setExpandArr(newExpandArr)
+                                                        const newExpandArr = new Map(expandArr);
+                                                        newExpandArr.delete(i);
+                                                        setExpandArr(newExpandArr);
 
-                                                        if (onExpandChange) onExpandChange(newExpandArr)
+                                                        if (onExpandChange) onExpandChange(newExpandArr);
                                                     }}
                                                 >
                                                     <ChevronsUp />
@@ -496,8 +496,8 @@ export default function TableComponent({
                     }
                     {
                         visibleRows.map((row, index) => {
-                            const actualIndex = topFakeRowHeight / height + index
-                            const rowTestID = `${label}${row.name}`
+                            const actualIndex = topFakeRowHeight / height + index;
+                            const rowTestID = `${label}${row.name}`;
 
                             return (
                                 <TableRow
@@ -517,10 +517,10 @@ export default function TableComponent({
                                                     onCheckedChange={() => {
                                                         setRows(rows.map((r) => {
                                                             if (r.name === row.name) {
-                                                                r.checked = !r.checked
+                                                                r.checked = !r.checked;
                                                             }
-                                                            return r
-                                                        }))
+                                                            return r;
+                                                        }));
                                                     }}
                                                 />
                                             </TableCell>
@@ -613,9 +613,9 @@ export default function TableComponent({
                                                                                     inTable
                                                                                     options={cell.options}
                                                                                     setSelectedValue={async (value) => {
-                                                                                        const result = await cell.onChange(value)
+                                                                                        const result = await cell.onChange(value);
                                                                                         if (result) {
-                                                                                            handleSetEditable("", "")
+                                                                                            handleSetEditable("", "");
                                                                                         }
                                                                                     }}
                                                                                     label={cell.selectType}
@@ -630,17 +630,17 @@ export default function TableComponent({
                                                                                     onChange={(e) => setNewValue(e.target.value)}
                                                                                     onKeyDown={async (e) => {
                                                                                         if (e.key === "Escape") {
-                                                                                            e.preventDefault()
-                                                                                            e.stopPropagation()
-                                                                                            handleSetEditable("", "")
+                                                                                            e.preventDefault();
+                                                                                            e.stopPropagation();
+                                                                                            handleSetEditable("", "");
                                                                                         }
 
-                                                                                        if (e.key !== "Enter") return
+                                                                                        if (e.key !== "Enter") return;
 
-                                                                                        e.preventDefault()
-                                                                                        const result = await cell.onChange(newValue)
+                                                                                        e.preventDefault();
+                                                                                        const result = await cell.onChange(newValue);
                                                                                         if (result) {
-                                                                                            handleSetEditable("", "")
+                                                                                            handleSetEditable("", "");
                                                                                         }
                                                                                     }}
                                                                                 />
@@ -653,13 +653,13 @@ export default function TableComponent({
                                                                                     title="Save"
                                                                                     onClick={async () => {
                                                                                         try {
-                                                                                            setIsLoading(true)
-                                                                                            const result = await cell.onChange(newValue)
+                                                                                            setIsLoading(true);
+                                                                                            const result = await cell.onChange(newValue);
                                                                                             if (result) {
-                                                                                                handleSetEditable("", "")
+                                                                                                handleSetEditable("", "");
                                                                                             }
                                                                                         } finally {
-                                                                                            setIsLoading(false)
+                                                                                            setIsLoading(false);
                                                                                         }
                                                                                     }}
                                                                                     isLoading={isLoading}
@@ -673,7 +673,7 @@ export default function TableComponent({
                                                                                     data-testid={`cancelButton${label}`}
                                                                                     title="Cancel"
                                                                                     onClick={() => {
-                                                                                        handleSetEditable("", "")
+                                                                                        handleSetEditable("", "");
                                                                                     }}
                                                                                 >
                                                                                     <XCircle className="w-4 h-4" />
@@ -708,11 +708,11 @@ export default function TableComponent({
                                                         }
                                                     </div>
                                                 </TableCell>
-                                            )
+                                            );
                                         })
                                     }
                                 </TableRow>
-                            )
+                            );
                         })
                     }
                     {
@@ -745,5 +745,5 @@ export default function TableComponent({
                 </TableBody>
             </Table>
         </div >
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/components/ToastButton.tsx b/app/components/ToastButton.tsx
index 654754ed..c2a55ae0 100644
--- a/app/components/ToastButton.tsx
+++ b/app/components/ToastButton.tsx
@@ -23,11 +23,11 @@ export default function ToastButton({ onClick, showUndo, label = "Undo", variant
                 {showUndo && <Undo size={20} />}
             </Button>
         </ToastAction>
-    )
+    );
 }
 
 ToastButton.defaultProps = {
     variant: undefined,
     showUndo: undefined,
     label: "Undo",
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/components/Tutorial.tsx b/app/components/Tutorial.tsx
index 3dc285a9..21c94d1b 100644
--- a/app/components/Tutorial.tsx
+++ b/app/components/Tutorial.tsx
@@ -122,7 +122,7 @@ const tutorialSteps: TutorialStep[] = [
         title: "Graph Visualization",
         description: "Query results containing nodes and edges will be visualized here as an interactive graph. You can drag, zoom, and explore the relationships.",
         placementAxis: "x",
-        targetSelector: '.force-graph-container canvas',
+        targetSelector: 'falkordb-canvas',
         spotlightSelector: '[data-testid="graphView"]',
         forward: ["mousedown", "mouseup", "mousemove", "mouseenter", "mouseleave", "mouseover", "mouseout", "contextmenu", "pointerdown", "pointerup", "pointermove", "pointerenter", "pointerleave", "wheel"],
         hidePrev: true
@@ -215,16 +215,16 @@ function TutorialPortal({
     // Calculate position based on target element
     useEffect(() => {
         if (!targetSelector) {
-            setCurrentPosition({ ...position, transform: "translate(-50%, -50%)" })
-            return () => { }
+            setCurrentPosition({ ...position, transform: "translate(-50%, -50%)" });
+            return () => { };
         }
 
         const element = document.querySelector(targetSelector);
-        const currentTooltip = tooltipRef.current
+        const currentTooltip = tooltipRef.current;
 
         if (!element || !currentTooltip) {
-            setCurrentPosition({ ...position, transform: "translate(-50%, -50%)" })
-            return () => { }
+            setCurrentPosition({ ...position, transform: "translate(-50%, -50%)" });
+            return () => { };
         }
 
         // Get actual tooltip dimensions from ref
@@ -306,7 +306,7 @@ function TutorialPortal({
 
             setCurrentPosition(calculatedPosition);
             setDirection(computedDirection);
-        }
+        };
 
         updatePosition();
 
@@ -327,7 +327,7 @@ function TutorialPortal({
     }, [placementAxis, position, step, targetSelector]);
 
     useEffect(() => {
-        const forwardArr = [...(forward || []), advanceOn].filter(ev => !!ev)
+        const forwardArr = [...(forward || []), advanceOn].filter(ev => !!ev);
 
         // Highlight target element and add click listener
         if (targetSelector) {
@@ -337,7 +337,8 @@ function TutorialPortal({
                 // Check if the element is disabled
                 const isDisabled = element instanceof HTMLButtonElement || element instanceof HTMLInputElement
                     ? element.disabled
-                    : element.hasAttribute('disabled') ||
+                    : element.getAttribute('disabled') === 'true' ||
+                    element.getAttribute('aria-disabled') === 'true' ||
                     element.classList.contains('disabled') ||
                     window.getComputedStyle(element).pointerEvents === 'none';
 
@@ -386,17 +387,17 @@ function TutorialPortal({
                     overlay.style.height = `${bottom - top}px`;
                 };
 
-                const resizeObserver = new ResizeObserver(updateOverlayPosition)
+                const resizeObserver = new ResizeObserver(updateOverlayPosition);
 
                 const cleanup = () => {
                     element.classList.remove('tutorial-highlight');
-                    resizeObserver.disconnect()
+                    resizeObserver.disconnect();
                     window.removeEventListener('resize', updateOverlayPosition);
                     if (wheelHandler) {
                         overlay.removeEventListener('wheel', wheelHandler, { passive: true } as EventListenerOptions);
                     }
                     overlay.remove();
-                }
+                };
 
                 updateOverlayPosition();
                 resizeObserver.observe(element);
@@ -438,8 +439,8 @@ function TutorialPortal({
                         // Advance the tutorial on the specified event type. Use a short delay
                         // so the forwarded event can reach the underlying element's handlers first.
                         setTimeout(() => {
-                            onNext()
-                        }, 200)
+                            onNext();
+                        }, 200);
                     }
 
                     // Get the overlay and target element positions to adjust coordinates
@@ -542,7 +543,7 @@ function TutorialPortal({
                 return () => {
                     removeForwarders();
                     cleanup();
-                }
+                };
             }
         }
 
@@ -723,12 +724,12 @@ function TutorialSpotlight({ targetSelector, spotlightSelector }: { targetSelect
         updateSpotlight();
 
         // Update on window resize
-        const resizeObserver = new ResizeObserver(updateSpotlight)
-        resizeObserver.observe(element)
+        const resizeObserver = new ResizeObserver(updateSpotlight);
+        resizeObserver.observe(element);
         window.addEventListener('resize', updateSpotlight);
 
         return () => {
-            resizeObserver.disconnect()
+            resizeObserver.disconnect();
             window.removeEventListener('resize', updateSpotlight);
         };
     }, [targetSelector, spotlightSelector]);
diff --git a/app/components/graph/DeleteGraph.tsx b/app/components/graph/DeleteGraph.tsx
index 7985b284..1a6aced0 100644
--- a/app/components/graph/DeleteGraph.tsx
+++ b/app/components/graph/DeleteGraph.tsx
@@ -31,63 +31,63 @@ export default function DeleteGraph({
   setGraphNames
 }: Props) {
 
-  const [open, setOpen] = useState(false)
-  const [closeManage, setCloseManage] = useState(false)
-  const { toast } = useToast()
-  const [isLoading, setIsLoading] = useState(false)
-  const { indicator, setIndicator } = useContext(IndicatorContext)
+  const [open, setOpen] = useState(false);
+  const [closeManage, setCloseManage] = useState(false);
+  const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const { indicator, setIndicator } = useContext(IndicatorContext);
 
   useEffect(() => {
     if (!open && closeManage) {
-      setOpenMenage(false)
-      setCloseManage(false)
+      setOpenMenage(false);
+      setCloseManage(false);
     }
-  }, [open, closeManage, setOpenMenage])
+  }, [open, closeManage, setOpenMenage]);
 
   useEffect(() => {
     if (!open) {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [open])
+  }, [open]);
 
   const handleDelete = async (deleteGraphNames: string[]) => {
-    setIsLoading(true)
-    let newGraphNames
+    setIsLoading(true);
+    let newGraphNames;
     try {
       const [failedDeletedGraphs, successDeletedGraphs] = await Promise.all(deleteGraphNames
         .map(async (name) => {
           const result = await securedFetch(`api/${type === "Schema" ? "schema" : "graph"}/${prepareArg(name)}`, {
             method: "DELETE"
-          }, toast, setIndicator)
+          }, toast, setIndicator);
 
-          if (result.ok) return ""
+          if (result.ok) return "";
 
-          return name
+          return name;
 
-        })).then(result => [result.filter(n => n !== ""), deleteGraphNames.filter(n => !result.includes(n))])
+        })).then(result => [result.filter(n => n !== ""), deleteGraphNames.filter(n => !result.includes(n))]);
 
-      newGraphNames = graphNames.filter(n => !successDeletedGraphs.includes(n))
+      newGraphNames = graphNames.filter(n => !successDeletedGraphs.includes(n));
 
-      setGraphNames(newGraphNames)
+      setGraphNames(newGraphNames);
 
       if (successDeletedGraphs.includes(selectedValue)) {
-        setGraphName(successDeletedGraphs.length > 0 ? newGraphNames[successDeletedGraphs.length - 1] : "")
-        setGraph(Graph.empty())
+        setGraphName(successDeletedGraphs.length > 0 ? newGraphNames[successDeletedGraphs.length - 1] : "");
+        setGraph(Graph.empty());
       }
 
-      handleSetRows(successDeletedGraphs)
+      handleSetRows(successDeletedGraphs);
       toast({
         title: "Graph(s) deleted successfully",
         description: successDeletedGraphs.length > 0 && `The graph(s) ${successDeletedGraphs.join(", ")} have been deleted successfully${failedDeletedGraphs.length > 0 && `The graph(s) ${failedDeletedGraphs.join(", ")} have not been deleted`}`,
-      })
+      });
     } finally {
-      setIsLoading(false)
-      setOpen(false)
+      setIsLoading(false);
+      setOpen(false);
       if (typeof newGraphNames !== "undefined" && newGraphNames.length === 0) {
-        setCloseManage(true)
+        setCloseManage(true);
       }
     }
-  }
+  };
 
   return (
     <DialogComponent
diff --git a/app/components/graph/DuplicateGraph.tsx b/app/components/graph/DuplicateGraph.tsx
index c3943ac1..f6af9a9a 100644
--- a/app/components/graph/DuplicateGraph.tsx
+++ b/app/components/graph/DuplicateGraph.tsx
@@ -16,48 +16,48 @@ export default function DuplicateGraph({ open, onOpenChange, selectedValue, onDu
 }) {
 
     const [duplicateName, setDuplicateName] = useState("");
-    const [isLoading, setIsLoading] = useState(false)
-    const { toast } = useToast()
-    const { indicator, setIndicator } = useContext(IndicatorContext)
+    const [isLoading, setIsLoading] = useState(false);
+    const { toast } = useToast();
+    const { indicator, setIndicator } = useContext(IndicatorContext);
 
     useEffect(() => {
         if (!open) {
-            setDuplicateName("")
-            setIsLoading(false)
+            setDuplicateName("");
+            setIsLoading(false);
         }
-    }, [open])
+    }, [open]);
 
     const handleDuplicate = async (e: FormEvent) => {
-        e.preventDefault()
+        e.preventDefault();
 
         if (duplicateName === "") {
             toast({
                 title: "Error",
                 description: "Graph name cannot be empty",
-            })
-            return
+            });
+            return;
         }
 
         try {
-            setIsLoading(true)
+            setIsLoading(true);
             const result = await securedFetch(`api/${type === "Graph" ? "graph" : "schema"}/${prepareArg(duplicateName)}/duplicate`, {
                 method: "PATCH",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ sourceName: selectedValue })
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
-            if (!result.ok) return
+            if (!result.ok) return;
 
-            onDuplicate(duplicateName)
-            onOpenChange(false)
+            onDuplicate(duplicateName);
+            onOpenChange(false);
             toast({
                 title: `${type} duplicated successfully`,
                 description: `The ${type} has been duplicated successfully`,
-            })
+            });
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <DialogComponent
@@ -102,5 +102,5 @@ export default function DuplicateGraph({ open, onOpenChange, selectedValue, onDu
                 </div>
             </form>
         </DialogComponent>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/components/graph/UploadGraph.tsx b/app/components/graph/UploadGraph.tsx
index 7591e50d..3bf628ec 100644
--- a/app/components/graph/UploadGraph.tsx
+++ b/app/components/graph/UploadGraph.tsx
@@ -11,32 +11,32 @@ export default function UploadGraph({ disabled, open, onOpenChange }: {
     onOpenChange?: (open: boolean) => void
 }) {
 
-    const [files, setFiles] = useState<File[]>([])
-    const isControlled = typeof open === "boolean" && typeof onOpenChange === "function"
-    const [internalOpen, setInternalOpen] = useState(false)
+    const [files, setFiles] = useState<File[]>([]);
+    const isControlled = typeof open === "boolean" && typeof onOpenChange === "function";
+    const [internalOpen, setInternalOpen] = useState(false);
     const dialogOpen = useMemo(
         () => (isControlled ? (open as boolean) : internalOpen),
         [isControlled, open, internalOpen]
-    )
+    );
 
     const handleOpenChange = (nextOpen: boolean) => {
         if (onOpenChange) {
-            onOpenChange(nextOpen)
+            onOpenChange(nextOpen);
         } else {
-            setInternalOpen(nextOpen)
+            setInternalOpen(nextOpen);
         }
-    }
+    };
 
     useEffect(() => {
         if (!dialogOpen) {
-            setFiles([])
+            setFiles([]);
         }
-    }, [dialogOpen])
+    }, [dialogOpen]);
 
     const onUploadData = () => {
-        if (!files.length) return
-        setFiles([])
-    }
+        if (!files.length) return;
+        setFiles([]);
+    };
 
     return (
         <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
@@ -66,5 +66,5 @@ export default function UploadGraph({ disabled, open, onOpenChange }: {
                 </form>
             </DialogContent>
         </Dialog>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/components/provider.ts b/app/components/provider.ts
index 1f7b9126..9bcdf091 100644
--- a/app/components/provider.ts
+++ b/app/components/provider.ts
@@ -1,5 +1,6 @@
 import { createContext, Dispatch, SetStateAction } from "react";
-import { Panel, Tab, TextPriority, ViewportState } from "@/lib/utils";
+import { GraphRef, Panel, Tab } from "@/lib/utils";
+import type { GraphData as CanvasData, ViewportState } from "@falkordb/canvas";
 import { Graph, GraphData, GraphInfo, HistoryQuery } from "../api/graph/model";
 
 type BrowserSettingsContextType = {
@@ -33,8 +34,6 @@ type BrowserSettingsContextType = {
     graphInfo: {
       newRefreshInterval: number;
       setNewRefreshInterval: Dispatch<SetStateAction<number>>;
-      newDisplayTextPriority: TextPriority[];
-      setNewDisplayTextPriority: Dispatch<SetStateAction<TextPriority[]>>;
     };
   };
   settings: {
@@ -72,8 +71,6 @@ type BrowserSettingsContextType = {
       showMemoryUsage: boolean;
       refreshInterval: number;
       setRefreshInterval: Dispatch<SetStateAction<number>>;
-      displayTextPriority: TextPriority[];
-      setDisplayTextPriority: Dispatch<SetStateAction<TextPriority[]>>;
     };
   };
   hasChanges: boolean;
@@ -104,6 +101,7 @@ type GraphContextType = {
   handleCooldown: (ticks?: 0, isSetLoading?: boolean) => void;
   cooldownTicks: number | undefined;
   isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
 };
 
 type SchemaContextType = {
@@ -135,12 +133,14 @@ type QueryLoadingContextType = {
   setIsQueryLoading: Dispatch<SetStateAction<boolean>>;
 };
 
-type ViewportContextType = {
+type ForceGraphContextType = {
+  canvasRef: GraphRef;
   viewport: ViewportState;
   setViewport: Dispatch<SetStateAction<ViewportState>>;
   data: GraphData;
   setData: Dispatch<SetStateAction<GraphData>>;
-  isSaved: boolean;
+  graphData: CanvasData | undefined;
+  setGraphData: Dispatch<SetStateAction<CanvasData | undefined>>;
 };
 
 type TableViewContextType = {
@@ -176,7 +176,10 @@ export const BrowserSettingsContext = createContext<BrowserSettingsContextType>(
         newModel: "",
         setNewModel: () => {},
       },
-      graphInfo: { newRefreshInterval: 0, setNewRefreshInterval: () => {}, newDisplayTextPriority: [], setNewDisplayTextPriority: () => {} },
+      graphInfo: {
+        newRefreshInterval: 0,
+        setNewRefreshInterval: () => {},
+      },
     },
     settings: {
       limitSettings: {
@@ -203,7 +206,11 @@ export const BrowserSettingsContext = createContext<BrowserSettingsContextType>(
         navigateToSettings: false,
         displayChat: false,
       },
-      graphInfo: { showMemoryUsage: false, refreshInterval: 0, setRefreshInterval: () => {}, displayTextPriority: [], setDisplayTextPriority: () => {} },
+      graphInfo: {
+        showMemoryUsage: false,
+        refreshInterval: 0,
+        setRefreshInterval: () => {},
+      },
     },
     hasChanges: false,
     setHasChanges: () => {},
@@ -234,6 +241,7 @@ export const GraphContext = createContext<GraphContextType>({
   handleCooldown: () => {},
   cooldownTicks: undefined,
   isLoading: false,
+  setIsLoading: () => {},
 });
 
 export const SchemaContext = createContext<SchemaContextType>({
@@ -279,12 +287,14 @@ export const QueryLoadingContext = createContext<QueryLoadingContextType>({
   setIsQueryLoading: () => {},
 });
 
-export const ViewportContext = createContext<ViewportContextType>({
+export const ForceGraphContext = createContext<ForceGraphContextType>({
+  canvasRef: { current: null },
   viewport: { centerX: 0, centerY: 0, zoom: 0 },
   setViewport: () => {},
   data: { nodes: [], links: [] },
   setData: () => {},
-  isSaved: false,
+  graphData: { nodes: [], links: [] },
+  setGraphData: () => {},
 });
 
 export const TableViewContext = createContext<TableViewContextType>({
diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
index 9a75f7e7..247ec8ba 100644
--- a/app/components/ui/Button.tsx
+++ b/app/components/ui/Button.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable react/button-has-type */
 /* eslint-disable react/jsx-props-no-spreading */
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
-import { Loader2 } from "lucide-react"
-import React, { forwardRef } from "react"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+import React, { forwardRef } from "react";
 
-export type Variant = "Large" | "Primary" | "Secondary" | "Cancel" | "Delete" | "button"
+export type Variant = "Large" | "Primary" | "Secondary" | "Cancel" | "Delete" | "button";
 
 /* eslint-disable react/require-default-props */
 export interface Props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
@@ -28,7 +28,7 @@ const getClassName = (variant: Variant, disable: boolean | undefined, open: bool
         open !== undefined && "gap-4",
         isLoading && "flex items-center justify-center",
         classN,
-    )
+    );
 
     switch (variant) {
         case "Primary":
@@ -36,21 +36,21 @@ const getClassName = (variant: Variant, disable: boolean | undefined, open: bool
                 "px-4 py-[10px] bg-primary",
                 !disable && "hover:bg-primary",
                 className
-            )
-            break
+            );
+            break;
         case "Secondary":
-            className = cn("px-12 py-2 bg-transparent border-2 border-primary", className)
-            break
+            className = cn("px-12 py-2 bg-transparent border-2 border-primary", className);
+            break;
         case "Cancel":
-            className = cn("px-12 py-2 bg-transparent border-2 border-border", className)
-            break
+            className = cn("px-12 py-2 bg-transparent border-2 border-border", className);
+            break;
         case "Delete":
-            className = cn("px-4 py-[10px] bg-transparent border-2 border-destructive", className)
-            break
+            className = cn("px-4 py-[10px] bg-transparent border-2 border-destructive", className);
+            break;
         default:
     }
-    return className
-}
+    return className;
+};
 
 const Button = forwardRef<HTMLButtonElement, Props>(({ label, variant = "button", open, className, title, type = "button", disabled, children, isLoading = false, indicator, tooltipVariant = variant, tooltipSide, ...props }, ref) =>
     title !== "" && (title || label || indicator === "offline") && variant !== "Cancel" ? (
@@ -103,8 +103,8 @@ const Button = forwardRef<HTMLButtonElement, Props>(({ label, variant = "button"
             {children}
             {isLoading ? <Loader2 className="animate-spin" /> : label}
         </button>
-    ))
+    ));
 
-Button.displayName = "Button"
+Button.displayName = "Button";
 
-export default Button
\ No newline at end of file
+export default Button;
\ No newline at end of file
diff --git a/app/components/ui/Dropzone.tsx b/app/components/ui/Dropzone.tsx
index ed19b332..22406bed 100644
--- a/app/components/ui/Dropzone.tsx
+++ b/app/components/ui/Dropzone.tsx
@@ -1,16 +1,16 @@
-'use client'
+'use client';
 
-import { ArrowDownToLine } from 'lucide-react'
-import React, { useCallback, useState } from 'react'
-import { useDropzone } from 'react-dropzone'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { cn } from '@/lib/utils'
+import { ArrowDownToLine } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { cn } from '@/lib/utils';
 
 type TableFile = {
     name: string
     size: number
     type: string
-}
+};
 
 /* eslint-disable react/require-default-props */
 interface Props {
@@ -25,11 +25,11 @@ const FileProps = [
     "Name",
     "Size",
     "Type",
-]
+];
 
 function Dropzone({ filesCount = false, className = "", withTable = false, disabled = false, onFileDrop }: Props) {
 
-    const [files, setFiles] = useState<TableFile[]>([])
+    const [files, setFiles] = useState<TableFile[]>([]);
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
         const newFiles = acceptedFiles.map((file: File) => ({
@@ -37,11 +37,11 @@ function Dropzone({ filesCount = false, className = "", withTable = false, disab
             size: file.size,
             type: file.type,
         }));
-        setFiles(newFiles)
-        onFileDrop(acceptedFiles)
-    }, [onFileDrop])
+        setFiles(newFiles);
+        onFileDrop(acceptedFiles);
+    }, [onFileDrop]);
 
-    const { getRootProps, getInputProps } = useDropzone({ onDrop, disabled })
+    const { getRootProps, getInputProps } = useDropzone({ onDrop, disabled });
 
     return (
         <div className={cn('flex gap-4 grow', className)}>
@@ -101,7 +101,7 @@ function Dropzone({ filesCount = false, className = "", withTable = false, disab
                 </div>
             }
         </div>
-    )
+    );
 }
 
-export default Dropzone
\ No newline at end of file
+export default Dropzone;
\ No newline at end of file
diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
index c5920d12..e3aa674a 100644
--- a/app/components/ui/Input.tsx
+++ b/app/components/ui/Input.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 /* eslint-disable react/jsx-props-no-spreading */
 
-"use client"
+"use client";
 
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
@@ -22,8 +22,8 @@ const Input = forwardRef<HTMLInputElement, Props>(({
             )}
             {...props}
         />
-    ))
+    ));
 
-Input.displayName = "Input"
+Input.displayName = "Input";
 
-export default Input
\ No newline at end of file
+export default Input;
\ No newline at end of file
diff --git a/app/components/ui/combobox.tsx b/app/components/ui/combobox.tsx
index 60ef8fc6..eceac3a9 100644
--- a/app/components/ui/combobox.tsx
+++ b/app/components/ui/combobox.tsx
@@ -1,13 +1,13 @@
 
-"use client"
+"use client";
 
-import { Dialog } from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
-import { useContext, useEffect, useState } from "react"
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "@/components/ui/select"
-import Button from "./Button"
-import Input from "./Input"
-import { IndicatorContext } from "../provider"
+import { Dialog } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { useContext, useEffect, useState } from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "@/components/ui/select";
+import Button from "./Button";
+import Input from "./Input";
+import { IndicatorContext } from "../provider";
 
 interface ComboboxProps<T extends string> {
   id?: string,
@@ -21,44 +21,44 @@ interface ComboboxProps<T extends string> {
   className?: string,
 }
 
-const STEP = 4
+const STEP = 4;
 
 export default function Combobox<T extends string>({ id, disabled = false, inTable = false, label, options, selectedValue, setSelectedValue, defaultOpen = false, className }: ComboboxProps<T>) {
 
-  const { indicator } = useContext(IndicatorContext)
+  const { indicator } = useContext(IndicatorContext);
 
-  const [filteredOptions, setFilteredOptions] = useState<T[]>([])
-  const [openMenage, setOpenMenage] = useState<boolean>(false)
-  const [maxOptions, setMaxOptions] = useState<number>(STEP)
-  const [open, setOpen] = useState<boolean>(defaultOpen)
-  const [search, setSearch] = useState<string>("")
+  const [filteredOptions, setFilteredOptions] = useState<T[]>([]);
+  const [openMenage, setOpenMenage] = useState<boolean>(false);
+  const [maxOptions, setMaxOptions] = useState<number>(STEP);
+  const [open, setOpen] = useState<boolean>(defaultOpen);
+  const [search, setSearch] = useState<string>("");
 
   useEffect(() => {
     if (!open) {
-      setSearch("")
-      setMaxOptions(STEP)
-      setFilteredOptions([...options])
+      setSearch("");
+      setMaxOptions(STEP);
+      setFilteredOptions([...options]);
     }
-  }, [open, options])
+  }, [open, options]);
 
   useEffect(() => {
     const timeout = setTimeout(() => {
-      setFilteredOptions(!search ? options : options.filter((option) => option.toLowerCase().includes(search.toLowerCase())))
-    }, 500)
+      setFilteredOptions(!search ? options : options.filter((option) => option.toLowerCase().includes(search.toLowerCase())));
+    }, 500);
 
-    return () => clearTimeout(timeout)
-  }, [options, search])
+    return () => clearTimeout(timeout);
+  }, [options, search]);
 
   const getTitle = () => {
     switch (true) {
       case indicator === "offline":
-        return "The FalkorDB server is offline"
+        return "The FalkorDB server is offline";
       case options.length === 0:
-        return `There are no ${label}s`
+        return `There are no ${label}s`;
       default:
-        return selectedValue || `Select ${label}`
+        return selectedValue || `Select ${label}`;
     }
-  }
+  };
 
   return (
     <Dialog open={openMenage} onOpenChange={setOpenMenage}>
@@ -86,8 +86,8 @@ export default function Combobox<T extends string>({ id, disabled = false, inTab
               className="w-1 grow"
               placeholder={`Search for a ${label}`}
               onChange={(e) => {
-                setSearch(e.target.value)
-                setMaxOptions(5)
+                setSearch(e.target.value);
+                setMaxOptions(5);
               }}
               value={search}
             />
@@ -136,7 +136,7 @@ export default function Combobox<T extends string>({ id, disabled = false, inTab
         </SelectContent>
       </Select>
     </Dialog >
-  )
+  );
 }
 
 Combobox.defaultProps = {
@@ -145,4 +145,4 @@ Combobox.defaultProps = {
   inTable: false,
   defaultOpen: false,
   className: undefined,
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/components/ui/spinning.tsx b/app/components/ui/spinning.tsx
index 285985be..c6a5bd79 100644
--- a/app/components/ui/spinning.tsx
+++ b/app/components/ui/spinning.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton";
 
 
 export default function Spinning() {
@@ -10,5 +10,5 @@ export default function Spinning() {
         <Skeleton className="h-4 w-[200px]" />
       </div>
     </div>
-  )
+  );
 }
diff --git a/app/graph/Chat.tsx b/app/graph/Chat.tsx
index 4c602b7d..21123da6 100644
--- a/app/graph/Chat.tsx
+++ b/app/graph/Chat.tsx
@@ -1,72 +1,72 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable react/no-array-index-key */
-import { cn, Message } from "@/lib/utils"
-import { useContext, useEffect, useState } from "react"
-import { ChevronDown, ChevronRight, CircleArrowUp, Copy, Loader2, Play, Search, X } from "lucide-react"
-import { useToast } from "@/components/ui/use-toast"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import Button from "../components/ui/Button"
-import Input from "../components/ui/Input"
-import { GraphContext, IndicatorContext, QueryLoadingContext, BrowserSettingsContext } from "../components/provider"
-import { EventType } from "../api/chat/route"
+import { cn, Message } from "@/lib/utils";
+import { useContext, useEffect, useState } from "react";
+import { ChevronDown, ChevronRight, CircleArrowUp, Copy, Loader2, Play, Search, X } from "lucide-react";
+import { useToast } from "@/components/ui/use-toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import Button from "../components/ui/Button";
+import Input from "../components/ui/Input";
+import { GraphContext, IndicatorContext, QueryLoadingContext, BrowserSettingsContext } from "../components/provider";
+import { EventType } from "../api/chat/route";
 
 interface Props {
     onClose: () => void
 }
 
 export default function Chat({ onClose }: Props) {
-    const { setIndicator } = useContext(IndicatorContext)
-    const { graphName, runQuery } = useContext(GraphContext)
-    const { isQueryLoading } = useContext(QueryLoadingContext)
-    const { settings: { chatSettings: { secretKey, model } } } = useContext(BrowserSettingsContext)
+    const { setIndicator } = useContext(IndicatorContext);
+    const { graphName, runQuery } = useContext(GraphContext);
+    const { isQueryLoading } = useContext(QueryLoadingContext);
+    const { settings: { chatSettings: { secretKey, model } } } = useContext(BrowserSettingsContext);
 
-    const { toast } = useToast()
+    const { toast } = useToast();
 
-    const [messages, setMessages] = useState<Message[]>([])
-    const [messagesList, setMessagesList] = useState<(Message | [Message[], boolean])[]>([])
-    const [newMessage, setNewMessage] = useState("")
-    const [isLoading, setIsLoading] = useState(false)
-    const [queryCollapse, setQueryCollapse] = useState<{ [key: string]: boolean }>({})
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [messagesList, setMessagesList] = useState<(Message | [Message[], boolean])[]>([]);
+    const [newMessage, setNewMessage] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [queryCollapse, setQueryCollapse] = useState<{ [key: string]: boolean }>({});
 
     useEffect(() => {
-        let statusGroup: Message[]
+        let statusGroup: Message[];
 
         const newMessagesList = messages.map((message, i): Message | [Message[], boolean] | undefined => {
             if (message.type === "Status") {
                 if (messages[i - 1]?.type !== "Status") {
-                    if (messages[i + 1]?.type !== "Status") return message
-                    statusGroup = [message]
+                    if (messages[i + 1]?.type !== "Status") return message;
+                    statusGroup = [message];
                 } else {
-                    statusGroup.push(message)
-                    if (messages[i + 1]?.type !== "Status") return [statusGroup, false]
+                    statusGroup.push(message);
+                    if (messages[i + 1]?.type !== "Status") return [statusGroup, false];
                 }
             } else {
-                return message
+                return message;
             }
 
-            return undefined
-        }).filter(m => !!m)
+            return undefined;
+        }).filter(m => !!m);
 
-        setMessagesList(newMessagesList)
-    }, [messages])
+        setMessagesList(newMessagesList);
+    }, [messages]);
 
     const scrollToBottom = () => {
-        const chatContainer = document.querySelector(".chat-container")
+        const chatContainer = document.querySelector(".chat-container");
         if (chatContainer) {
-            chatContainer.scrollTop = chatContainer.scrollHeight
+            chatContainer.scrollTop = chatContainer.scrollHeight;
         }
-    }
+    };
 
     const handleSubmit = async (e?: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>) => {
-        e?.preventDefault()
+        e?.preventDefault();
 
         if (isLoading) {
             toast({
                 title: "Please wait",
                 description: "You are already sending a message",
                 variant: "destructive",
-            })
-            return
+            });
+            return;
         }
 
         if (newMessage.trim() === "") {
@@ -74,17 +74,17 @@ export default function Chat({ onClose }: Props) {
                 title: "Please enter a message",
                 description: "You cannot send an empty message",
                 variant: "destructive",
-            })
-            return
+            });
+            return;
         }
 
-        setIsLoading(true)
+        setIsLoading(true);
 
-        const newMessages = [...messages, { role: "user", type: "Text", content: newMessage } as const]
+        const newMessages = [...messages, { role: "user", type: "Text", content: newMessage } as const];
 
-        setMessages(newMessages)
-        setTimeout(scrollToBottom, 0)
-        setNewMessage("")
+        setMessages(newMessages);
+        setTimeout(scrollToBottom, 0);
+        setNewMessage("");
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const body: any = {
@@ -93,14 +93,14 @@ export default function Chat({ onClose }: Props) {
                 content
             })),
             graphName,
-        }
+        };
 
         if (model) {
-            body.model = model
+            body.model = model;
         }
 
         if (secretKey) {
-            body.key = secretKey
+            body.key = secretKey;
         }
 
         try {
@@ -129,24 +129,24 @@ export default function Chat({ onClose }: Props) {
                 const chunk = decoder.decode(value, { stream: true });
 
                 const lines = chunk.split('event:').filter(line => line);
-                let isResult = false
+                let isResult = false;
 
                 lines.forEach(line => {
-                    const eventType: EventType | "error" = line.split(" ")[1] as EventType | "error"
-                    const eventData = line.split("data:")[1]
+                    const eventType: EventType | "error" = line.split(" ")[1] as EventType | "error";
+                    const eventData = line.split("data:")[1];
                     switch (eventType) {
                         case "Status":
                             const message = {
                                 role: "assistant" as const,
                                 content: eventData.trim(),
                                 type: eventType
-                            }
+                            };
 
-                            setMessages(prev => [...prev, message])
+                            setMessages(prev => [...prev, message]);
                             break;
 
                         case "CypherQuery":
-                            setQueryCollapse(prev => ({ ...prev, [messages.length]: false }))
+                            setQueryCollapse(prev => ({ ...prev, [messages.length]: false }));
                             setMessages(prev => [
                                 ...prev,
                                 {
@@ -157,25 +157,6 @@ export default function Chat({ onClose }: Props) {
                             ]);
                             break;
 
-                        case "ModelOutputChunk":
-                            setMessages(prev => {
-                                const lastMessage = prev[prev.length - 1]
-
-                                if (lastMessage.role === "assistant" && lastMessage.type === "Result") {
-                                    return [...prev.slice(0, -1), {
-                                        ...lastMessage,
-                                        content: `${lastMessage.content} ${eventData.trim()}`
-                                    }]
-                                }
-
-                                return [...prev, {
-                                    role: "assistant",
-                                    type: "Result",
-                                    content: eventData.trim()
-                                }]
-                            })
-                            break;
-
                         case "Result":
                             try {
                                 setMessages(prev => [
@@ -197,7 +178,7 @@ export default function Chat({ onClose }: Props) {
                                     }
                                 ]);
                             }
-                            isResult = true
+                            isResult = true;
                             break;
 
                         case "Error":
@@ -209,21 +190,21 @@ export default function Chat({ onClose }: Props) {
                                     type: eventType
                                 }
                             ]);
-                            isResult = true
+                            isResult = true;
                             break;
 
                         case "error":
-                            const statusCode = Number(line.split("status:")[1].split(" ")[0])
+                            const statusCode = Number(line.split("status:")[1].split(" ")[0]);
 
-                            if (statusCode === 401 || statusCode >= 500) setIndicator("offline")
+                            if (statusCode === 401 || statusCode >= 500) setIndicator("offline");
 
                             toast({
                                 title: "Error",
                                 description: eventData,
                                 variant: "destructive",
-                            })
+                            });
 
-                            isResult = true
+                            isResult = true;
                             break;
 
                         case "Schema":
@@ -231,15 +212,15 @@ export default function Chat({ onClose }: Props) {
                             break;
 
                         default:
-                            throw new Error(`Unknown event type: ${eventType}`)
+                            throw new Error(`Unknown event type: ${eventType}`);
                     }
                 });
 
-                setTimeout(scrollToBottom, 0)
+                setTimeout(scrollToBottom, 0);
 
                 if (!isResult) await processStream();
 
-                setIsLoading(false)
+                setIsLoading(false);
             };
 
             processStream();
@@ -248,9 +229,9 @@ export default function Chat({ onClose }: Props) {
                 title: "Error",
                 description: (error as Error).message,
                 variant: "destructive",
-            })
+            });
         }
-    }
+    };
 
     const getMessage = (message: Message, index?: number) => {
         switch (message.type) {
@@ -261,7 +242,7 @@ export default function Chat({ onClose }: Props) {
                         <Loader2 className="animate-spin" size={15} />
                     }
                     <p className="text-sm">{message.content}</p>
-                </>
+                </>;
 
                 return index !== undefined ? (
                     <li className="flex gap-2 items-center" key={index}>
@@ -271,15 +252,15 @@ export default function Chat({ onClose }: Props) {
                     <div className="flex gap-2 items-center">
                         {content}
                     </div>
-                )
+                );
             case "CypherQuery":
-                const i = messages.findIndex(m => m === message)
+                const i = messages.findIndex(m => m === message);
 
                 return (
                     <div className="flex gap-2 items-start">
                         <Button
                             onClick={() => {
-                                setQueryCollapse(prev => ({ ...prev, [i]: !prev[i] }))
+                                setQueryCollapse(prev => ({ ...prev, [i]: !prev[i] }));
                             }}
                             className="p-1 min-w-8 min-h-8"
                         >
@@ -316,24 +297,24 @@ export default function Chat({ onClose }: Props) {
                                 data-testid="chatCopyQueryButton"
                                 title="Copy Query"
                                 onClick={() => {
-                                    navigator.clipboard.writeText(message.content)
+                                    navigator.clipboard.writeText(message.content);
                                     toast({
                                         title: "Copied to clipboard",
                                         description: "The query has been copied to your clipboard",
-                                    })
+                                    });
                                 }}
                             >
                                 <Copy size={20} />
                             </Button>
                         </div>
                     </div>
-                )
+                );
             default:
                 return (
                     <p className="text-wrap whitespace-pre-wrap">{message.content}</p>
-                )
+                );
         }
-    }
+    };
 
     return (
         <div data-testid="chatPanel" className="border-Gradient-rounded h-full w-full">
@@ -351,9 +332,9 @@ export default function Chat({ onClose }: Props) {
                     {
                         messagesList.map((message, index) => {
                             if (Array.isArray(message)) {
-                                const [m, collapse] = message
+                                const [m, collapse] = message;
                                 return (
-                                    <li className={cn("w-full flex gap-1 justify-start status-group")} key={index}>
+                                    <li className={cn("w-full flex gap-1 justify-start status-group")} key={index} data-key={index}>
                                         <div className="flex gap-1 items-center h-fit">
                                             {m.some(me => messages[messages.length - 1] === me) && !collapse ?
                                                 <Loader2 className="animate-spin" size={15} />
@@ -361,13 +342,13 @@ export default function Chat({ onClose }: Props) {
                                             <p className="text-sm">Status</p>
                                             <Button
                                                 onClick={() => {
-                                                    setMessagesList(prev => prev.map((me, i) => i === index && Array.isArray(me) ? [me[0], !me[1]] : me))
+                                                    setMessagesList(prev => prev.map((me, i) => i === index && Array.isArray(me) ? [me[0], !me[1]] : me));
                                                     setTimeout(() => {
-                                                        const statusGroup = document.querySelector(`.status-group[key="${index}"]`)
+                                                        const statusGroup = document.querySelector(`.status-group[data-key="${index}"]`);
                                                         if (statusGroup) {
-                                                            statusGroup.scrollIntoView({ behavior: "smooth" })
+                                                            statusGroup.scrollIntoView({ behavior: "smooth" });
                                                         }
-                                                    }, 0)
+                                                    }, 0);
                                                 }}
                                             >
                                                 {collapse ? <ChevronDown size={25} /> : <ChevronRight size={25} />}
@@ -382,20 +363,20 @@ export default function Chat({ onClose }: Props) {
                                             </ul>
                                         }
                                     </li>
-                                )
+                                );
                             }
                             if (message.type === "Status") {
                                 return (
                                     <li className={cn("w-full flex gap-1 justify-start")} key={index}>
                                         {getMessage(message)}
                                     </li>
-                                )
+                                );
                             }
-                            const isUser = message.role === "user"
-                            const assistantBg = message.type === "Error" ? "bg-destructive" : "bg-secondary"
+                            const isUser = message.role === "user";
+                            const assistantBg = message.type === "Error" ? "bg-destructive" : "bg-secondary";
                             const avatar = <div className={cn("h-8 w-8 rounded-full flex items-center justify-center", isUser ? "bg-primary" : assistantBg)}>
                                 <p className="text-foreground text-sm truncate text-center">{message.role.charAt(0).toUpperCase()}</p>
-                            </div>
+                            </div>;
                             return (
                                 <li
                                     data-testid={isUser ? "chatUserMessage" : `chatAssistantMessage-${message.type}`}
@@ -412,7 +393,7 @@ export default function Chat({ onClose }: Props) {
                                         isUser && avatar
                                     }
                                 </li>
-                            )
+                            );
                         })
                     }
                 </ul>
@@ -436,5 +417,5 @@ export default function Chat({ onClose }: Props) {
                 </form>
             </div>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/CreateElementPanel.tsx b/app/graph/CreateElementPanel.tsx
index 27cf8e42..ad0b584d 100644
--- a/app/graph/CreateElementPanel.tsx
+++ b/app/graph/CreateElementPanel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 
-'use client'
+'use client';
 
 import { Fragment, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from "react";
@@ -8,12 +8,13 @@ import { ArrowRight, ArrowRightLeft, Check, Info, Pencil, Plus, Trash2, X } from
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/components/ui/use-toast";
 import { Switch } from "@/components/ui/switch";
-import { cn, getNodeDisplayText } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import { getNodeDisplayText } from "@falkordb/canvas";
 import Button from "../components/ui/Button";
 import Input from "../components/ui/Input";
 import Combobox from "../components/ui/combobox";
 import { Node, Value } from "../api/graph/model";
-import { BrowserSettingsContext, IndicatorContext } from "../components/provider";
+import { IndicatorContext } from "../components/provider";
 import AddLabel from "./addLabel";
 import RemoveLabel from "./RemoveLabel";
 import DialogComponent from "../components/DialogComponent";
@@ -33,7 +34,7 @@ type Props =
         type: false;
     };
 
-type ValueType = "string" | "number" | "boolean"
+type ValueType = "string" | "number" | "boolean";
 
 export default function CreateElementPanel(props: Props) {
     const { onCreate, onClose, type } = props;
@@ -41,150 +42,149 @@ export default function CreateElementPanel(props: Props) {
     const selectedNodes = !type ? props.selectedNodes : undefined;
     const setSelectedNodes = !type ? props.setSelectedNodes : undefined;
 
-    const { indicator } = useContext(IndicatorContext)
-    const { settings: { graphInfo: { displayTextPriority } } } = useContext(BrowserSettingsContext)
-    const { toast } = useToast()
-
-    const setInputRef = useRef<HTMLInputElement>(null)
-    const scrollableContainerRef = useRef<HTMLDivElement>(null)
-
-    const [attributes, setAttributes] = useState<[string, Value][]>([])
-    const [newKey, setNewKey] = useState<string>("")
-    const [newVal, setNewVal] = useState<Value>("")
-    const [newType, setNewType] = useState<ValueType>("string")
-    const [editVal, setEditVal] = useState<Value>("")
-    const [editType, setEditType] = useState<ValueType>("string")
-    const [labels, setLabels] = useState<string[]>([])
-    const [labelsHover, setLabelsHover] = useState<boolean>(false)
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [hover, setHover] = useState<string>("")
-    const [expandedAttributes, setExpandedAttributes] = useState<Record<string, boolean>>({})
-    const [editable, setEditable] = useState<string>("")
-    const valueParagraphRefs = useRef<Record<string, HTMLParagraphElement | null>>({})
-    const [valueOverflowMap, setValueOverflowMap] = useState<Record<string, boolean>>({})
+    const { indicator } = useContext(IndicatorContext);
+    const { toast } = useToast();
+
+    const setInputRef = useRef<HTMLInputElement>(null);
+    const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
+    const [attributes, setAttributes] = useState<[string, Value][]>([]);
+    const [newKey, setNewKey] = useState<string>("");
+    const [newVal, setNewVal] = useState<Value>("");
+    const [newType, setNewType] = useState<ValueType>("string");
+    const [editVal, setEditVal] = useState<Value>("");
+    const [editType, setEditType] = useState<ValueType>("string");
+    const [labels, setLabels] = useState<string[]>([]);
+    const [labelsHover, setLabelsHover] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [hover, setHover] = useState<string>("");
+    const [expandedAttributes, setExpandedAttributes] = useState<Record<string, boolean>>({});
+    const [editable, setEditable] = useState<string>("");
+    const valueParagraphRefs = useRef<Record<string, HTMLParagraphElement | null>>({});
+    const [valueOverflowMap, setValueOverflowMap] = useState<Record<string, boolean>>({});
 
     const setValueParagraphRef = useCallback((key: string) => (el: HTMLParagraphElement | null) => {
         if (!el) {
-            delete valueParagraphRefs.current[key]
-            return
+            delete valueParagraphRefs.current[key];
+            return;
         }
-        valueParagraphRefs.current[key] = el
-    }, [])
+        valueParagraphRefs.current[key] = el;
+    }, []);
 
     const measureValueOverflow = useCallback(() => {
-        if (typeof window === "undefined") return
+        if (typeof window === "undefined") return;
 
-        const nextMap: Record<string, boolean> = {}
+        const nextMap: Record<string, boolean> = {};
 
         attributes.forEach(([key]) => {
-            const element = valueParagraphRefs.current[key]
-            if (!element) return
+            const element = valueParagraphRefs.current[key];
+            if (!element) return;
 
-            const computedStyle = window.getComputedStyle(element)
-            let lineHeight = parseFloat(computedStyle.lineHeight)
+            const computedStyle = window.getComputedStyle(element);
+            let lineHeight = parseFloat(computedStyle.lineHeight);
 
             if (Number.isNaN(lineHeight)) {
-                const fontSize = parseFloat(computedStyle.fontSize)
-                lineHeight = Number.isNaN(fontSize) ? 16 : fontSize * 1.2
+                const fontSize = parseFloat(computedStyle.fontSize);
+                lineHeight = Number.isNaN(fontSize) ? 16 : fontSize * 1.2;
             }
 
-            const collapsedHeight = lineHeight * 3
-            nextMap[key] = element.scrollHeight - collapsedHeight > 1
-        })
+            const collapsedHeight = lineHeight * 3;
+            nextMap[key] = element.scrollHeight - collapsedHeight > 1;
+        });
 
         setValueOverflowMap((prev) => {
-            const prevKeys = Object.keys(prev)
-            const nextKeys = Object.keys(nextMap)
+            const prevKeys = Object.keys(prev);
+            const nextKeys = Object.keys(nextMap);
 
             if (prevKeys.length === nextKeys.length && prevKeys.every((key) => prev[key] === nextMap[key])) {
-                return prev
+                return prev;
             }
 
-            return nextMap
-        })
-    }, [attributes])
+            return nextMap;
+        });
+    }, [attributes]);
 
     useLayoutEffect(() => {
-        measureValueOverflow()
-        if (typeof window === "undefined") return undefined
+        measureValueOverflow();
+        if (typeof window === "undefined") return undefined;
 
-        window.addEventListener("resize", measureValueOverflow)
+        window.addEventListener("resize", measureValueOverflow);
         return () => {
-            window.removeEventListener("resize", measureValueOverflow)
-        }
-    }, [measureValueOverflow])
+            window.removeEventListener("resize", measureValueOverflow);
+        };
+    }, [measureValueOverflow]);
 
     useLayoutEffect(() => {
-        if (typeof ResizeObserver === "undefined") return undefined
-        if (!scrollableContainerRef.current) return undefined
+        if (typeof ResizeObserver === "undefined") return undefined;
+        if (!scrollableContainerRef.current) return undefined;
 
-        const observer = new ResizeObserver(() => measureValueOverflow())
-        observer.observe(scrollableContainerRef.current)
+        const observer = new ResizeObserver(() => measureValueOverflow());
+        observer.observe(scrollableContainerRef.current);
 
         return () => {
-            observer.disconnect()
-        }
-    }, [measureValueOverflow])
+            observer.disconnect();
+        };
+    }, [measureValueOverflow]);
 
     const handleClose = useCallback((e?: KeyboardEvent) => {
-        if (e && e.key !== "Escape") return
-        setAttributes([])
-        setLabels([])
-        setNewKey("")
-        setNewVal("")
-        setNewType("string")
-        setEditVal("")
-        setEditType("string")
-        setEditable("")
-        setHover("")
-        setExpandedAttributes({})
-        onClose()
-    }, [onClose])
+        if (e && e.key !== "Escape") return;
+        setAttributes([]);
+        setLabels([]);
+        setNewKey("");
+        setNewVal("");
+        setNewType("string");
+        setEditVal("");
+        setEditType("string");
+        setEditable("");
+        setHover("");
+        setExpandedAttributes({});
+        onClose();
+    }, [onClose]);
 
     useEffect(() => {
-        window.addEventListener("keydown", handleClose)
+        window.addEventListener("keydown", handleClose);
         return () => {
-            window.removeEventListener("keydown", handleClose)
-        }
-    }, [handleClose])
+            window.removeEventListener("keydown", handleClose);
+        };
+    }, [handleClose]);
 
     useEffect(() => {
         if (setInputRef.current && editable) {
-            setInputRef.current.focus()
+            setInputRef.current.focus();
         }
-    }, [editable])
+    }, [editable]);
 
-    const handleGetNodeTextPriority = useCallback((node: Node) => getNodeDisplayText(node, displayTextPriority), [displayTextPriority])
+    const handleGetNodeTextPriority = useCallback((node: Node) => getNodeDisplayText(node), []);
 
     const getDefaultVal = (t: ValueType): Value => {
         switch (t) {
             case "boolean":
-                return false
+                return false;
             case "number":
-                return 0
+                return 0;
             default:
-                return ""
+                return "";
         }
-    }
+    };
 
     const getStringValue = (value: Value) => {
         switch (typeof value) {
             case "number":
-                return String(value)
+                return String(value);
             case "boolean":
-                return value ? "true" : "false"
+                return value ? "true" : "false";
             case "object":
-                return String(value)
+                return String(value);
             default:
-                return value
+                return value;
         }
-    }
+    };
 
     const handleSetEditable = (key: string, value?: Value) => {
-        setEditable(key)
-        setEditVal(value || "")
-        setEditType(typeof value === "undefined" ? "string" : typeof value as ValueType)
-    }
+        setEditable(key);
+        setEditVal(value || "");
+        setEditType(typeof value === "undefined" ? "string" : typeof value as ValueType);
+    };
 
     const handleUpdateAttribute = (oldKey: string) => {
         if (editVal === "") {
@@ -192,37 +192,37 @@ export default function CreateElementPanel(props: Props) {
                 title: "Error",
                 description: "Value cannot be empty",
                 variant: "destructive"
-            })
-            return
+            });
+            return;
         }
 
         setAttributes(prev => prev.map(([key, val]) =>
             key === oldKey ? [key, editVal] : [key, val]
-        ))
+        ));
 
-        setEditable("")
-        setEditVal("")
-        setEditType("string")
+        setEditable("");
+        setEditVal("");
+        setEditType("string");
         setExpandedAttributes(prev => ({
             ...prev,
             [oldKey]: false
-        }))
-    }
+        }));
+    };
 
     const handleSetKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, key: string) => {
         if (e.key === "Escape") {
-            e.preventDefault()
-            setEditable("")
-            setEditVal("")
-            setEditType("string")
-            return
+            e.preventDefault();
+            setEditable("");
+            setEditVal("");
+            setEditType("string");
+            return;
         }
 
-        if (e.key !== 'Enter') return
+        if (e.key !== 'Enter') return;
 
-        e.preventDefault()
-        handleUpdateAttribute(key)
-    }
+        e.preventDefault();
+        handleUpdateAttribute(key);
+    };
 
     const handleAddAttribute = () => {
         if (!newKey || newVal === "") {
@@ -230,9 +230,9 @@ export default function CreateElementPanel(props: Props) {
                 title: "Error",
                 description: "Key or value cannot be empty",
                 variant: "destructive"
-            })
+            });
 
-            return
+            return;
         }
 
         if (attributes.some(([key]) => key === newKey)) {
@@ -240,47 +240,47 @@ export default function CreateElementPanel(props: Props) {
                 title: "Error",
                 description: "An attribute with this key already exists",
                 variant: "destructive"
-            })
+            });
 
-            return
+            return;
         }
 
-        setAttributes(prev => [...prev, [newKey, newVal]])
-        setNewKey("")
-        setNewVal("")
-        setNewType("string")
-    }
+        setAttributes(prev => [...prev, [newKey, newVal]]);
+        setNewKey("");
+        setNewVal("");
+        setNewType("string");
+    };
 
     const handleAddKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.code === "Escape") {
-            e.preventDefault()
-            setNewKey("")
-            setNewVal("")
-            setNewType("string")
-            return
+            e.preventDefault();
+            setNewKey("");
+            setNewVal("");
+            setNewType("string");
+            return;
         }
 
-        if (e.key !== 'Enter') return
+        if (e.key !== 'Enter') return;
 
-        e.preventDefault()
-        handleAddAttribute()
-    }
+        e.preventDefault();
+        handleAddAttribute();
+    };
 
-    const valueNeedsExpansion = (key: string) => Boolean(valueOverflowMap[key])
+    const valueNeedsExpansion = (key: string) => Boolean(valueOverflowMap[key]);
 
     const handleToggleValueExpansion = (key: string, event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
-        event.preventDefault()
-        event.stopPropagation()
+        event.preventDefault();
+        event.stopPropagation();
         setExpandedAttributes(prev => ({
             ...prev,
             [key]: !prev[key]
-        }))
-    }
+        }));
+    };
 
     const getCellEditableContent = (actionType: "set" | "add" = "add", key?: string) => {
-        const value = actionType === "set" ? editVal : newVal
-        const valueType = actionType === "set" ? editType : newType
-        const setValue = actionType === "set" ? setEditVal : setNewVal
+        const value = actionType === "set" ? editVal : newVal;
+        const valueType = actionType === "set" ? editType : newType;
+        const setValue = actionType === "set" ? setEditVal : setNewVal;
 
         switch (valueType) {
             case "boolean":
@@ -288,18 +288,18 @@ export default function CreateElementPanel(props: Props) {
                     className="data-[state=unchecked]:bg-border"
                     checked={value as boolean}
                     onCheckedChange={(checked) => setValue(checked)}
-                />
+                />;
             case "number":
                 return <Input
                     className="w-full"
                     ref={actionType === "set" ? setInputRef : undefined}
                     value={value as number}
                     onChange={(e) => {
-                        const num = Number(e.target.value)
-                        if (!Number.isNaN(num)) setValue(num)
+                        const num = Number(e.target.value);
+                        if (!Number.isNaN(num)) setValue(num);
                     }}
                     onKeyDown={actionType === "set" ? (e) => handleSetKeyDown(e, key!) : handleAddKeyDown}
-                />
+                />;
             default:
                 return <Input
                     className="w-full"
@@ -307,15 +307,15 @@ export default function CreateElementPanel(props: Props) {
                     value={value as string}
                     onChange={(e) => setValue(e.target.value)}
                     onKeyDown={actionType === "set" ? (e) => handleSetKeyDown(e, key!) : handleAddKeyDown}
-                />
+                />;
         }
-    }
+    };
 
     const getNewTypeInput = (actionType: "set" | "add" = "add") => {
-        const valueType = actionType === "set" ? editType : newType
-        const setType = actionType === "set" ? setEditType : setNewType
-        const value = actionType === "set" ? editVal : newVal
-        const setValue = actionType === "set" ? setEditVal : setNewVal
+        const valueType = actionType === "set" ? editType : newType;
+        const setType = actionType === "set" ? setEditType : setNewType;
+        const value = actionType === "set" ? editVal : newVal;
+        const setValue = actionType === "set" ? setEditVal : setNewVal;
 
         return (
             <Combobox
@@ -324,19 +324,19 @@ export default function CreateElementPanel(props: Props) {
                 options={["string", "number", "boolean"]}
                 selectedValue={valueType}
                 setSelectedValue={(val) => {
-                    const t = val as ValueType
-                    setType(t)
-                    setValue(typeof value === t ? value : getDefaultVal(t))
+                    const t = val as ValueType;
+                    setType(t);
+                    setValue(typeof value === t ? value : getDefaultVal(t));
                 }}
                 label="Type"
             />
-        )
-    }
+        );
+    };
 
     const isComplexType = (value: Value) => {
-        const valueType = typeof value
-        return valueType !== "string" && valueType !== "number" && valueType !== "boolean"
-    }
+        const valueType = typeof value;
+        return valueType !== "string" && valueType !== "number" && valueType !== "boolean";
+    };
 
     const handleAddLabel = async (newLabel: string) => {
         if (newLabel === "") {
@@ -344,8 +344,8 @@ export default function CreateElementPanel(props: Props) {
                 title: "Error",
                 description: "Label cannot be empty",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
 
         if (labels.includes(newLabel)) {
@@ -353,8 +353,8 @@ export default function CreateElementPanel(props: Props) {
                 title: "Error",
                 description: "Label already exists",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
 
         // For edges, only allow one label
@@ -363,20 +363,20 @@ export default function CreateElementPanel(props: Props) {
                 title: "Error",
                 description: "Edge can only have one label",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
 
-        setLabels(prev => [...prev, newLabel])
+        setLabels(prev => [...prev, newLabel]);
 
-        return true
-    }
+        return true;
+    };
 
     const handleRemoveLabel = async (removeLabel: string) => {
-        setLabels(prev => prev.filter(l => l !== removeLabel))
+        setLabels(prev => prev.filter(l => l !== removeLabel));
 
-        return true
-    }
+        return true;
+    };
 
     const handleOnCreate = async () => {
         if (!type) {
@@ -385,28 +385,28 @@ export default function CreateElementPanel(props: Props) {
                     title: "Error",
                     description: "Edge must have a label (relationship type)",
                     variant: "destructive"
-                })
-                return
+                });
+                return;
             }
         }
 
         try {
-            setIsLoading(true)
-            const ok = await onCreate(attributes, labels)
-
-            if (!ok) return
-
-            setAttributes([])
-            setNewKey("")
-            setNewVal("")
-            setNewType("string")
-            setEditVal("")
-            setEditType("string")
-            setLabels([])
+            setIsLoading(true);
+            const ok = await onCreate(attributes, labels);
+
+            if (!ok) return;
+
+            setAttributes([]);
+            setNewKey("");
+            setNewVal("");
+            setNewType("string");
+            setEditVal("");
+            setEditType("string");
+            setLabels([]);
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <div className="DataPanel p-4">
@@ -475,11 +475,11 @@ export default function CreateElementPanel(props: Props) {
                         <div className="flex items-center font-medium text-muted-foreground px-2 border-b border-border h-10">Type</div>
                         <div className="flex items-center px-2 border-b border-border h-10"><div className="w-6" /></div>
                         {attributes.map(([key, value]) => {
-                            const isComplex = isComplexType(value)
-                            const stringValue = getStringValue(value)
-                            const isExpanded = expandedAttributes[key]
-                            const shouldShowToggle = valueNeedsExpansion(key)
-                            const rowHeightClass = editable === key ? "py-2 min-h-14" : "py-2 min-h-10"
+                            const isComplex = isComplexType(value);
+                            const stringValue = getStringValue(value);
+                            const isExpanded = expandedAttributes[key];
+                            const shouldShowToggle = valueNeedsExpansion(key);
+                            const rowHeightClass = editable === key ? "py-2 min-h-14" : "py-2 min-h-10";
 
                             return (
                                 <Fragment key={key}>
@@ -526,7 +526,7 @@ export default function CreateElementPanel(props: Props) {
                                                                     onClick={(event) => handleToggleValueExpansion(key, event)}
                                                                     onKeyDown={(event) => {
                                                                         if (event.key === "Enter" || event.key === " ") {
-                                                                            handleToggleValueExpansion(key, event)
+                                                                            handleToggleValueExpansion(key, event);
                                                                         }
                                                                     }}
                                                                 >
@@ -564,9 +564,9 @@ export default function CreateElementPanel(props: Props) {
                                                         variant="button"
                                                         title="Cancel"
                                                         onClick={() => {
-                                                            setEditable("")
-                                                            setEditVal("")
-                                                            setEditType("string")
+                                                            setEditable("");
+                                                            setEditVal("");
+                                                            setEditType("string");
                                                         }}
                                                     >
                                                         <X size={20} />
@@ -620,7 +620,7 @@ export default function CreateElementPanel(props: Props) {
                                         }
                                     </div>
                                 </Fragment>
-                            )
+                            );
                         })}
                         <div className="flex items-center px-2 border-b border-border h-14">
                             <Input
@@ -649,9 +649,9 @@ export default function CreateElementPanel(props: Props) {
                                 variant="button"
                                 title="Cancel"
                                 onClick={() => {
-                                    setNewKey("")
-                                    setNewVal("")
-                                    setNewType("string")
+                                    setNewKey("");
+                                    setNewVal("");
+                                    setNewType("string");
                                 }}
                             >
                                 <X size={20} />
@@ -756,5 +756,5 @@ export default function CreateElementPanel(props: Props) {
                 </div>
             </div>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/CustomizeStylePanel.tsx b/app/graph/CustomizeStylePanel.tsx
index d3c4e06c..27cfca13 100644
--- a/app/graph/CustomizeStylePanel.tsx
+++ b/app/graph/CustomizeStylePanel.tsx
@@ -1,10 +1,12 @@
-'use client'
+/* eslint-disable no-param-reassign */
+
+'use client';
 
 import { useContext, useState, useEffect, useCallback, useRef } from "react";
 import { X, Palette } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { GraphContext, ViewportContext } from "@/app/components/provider";
-import { Label, STYLE_COLORS, NODE_SIZE_OPTIONS, LabelStyle, EMPTY_DISPLAY_NAME } from "@/app/api/graph/model";
+import { GraphContext, ForceGraphContext } from "@/app/components/provider";
+import { Label, STYLE_COLORS, NODE_SIZE_OPTIONS, LabelStyle, getLabelWithFewestElements, EMPTY_DISPLAY_NAME } from "@/app/api/graph/model";
 import Button from "@/app/components/ui/Button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -15,31 +17,28 @@ interface Props {
 
 export default function CustomizeStylePanel({ label, onClose }: Props) {
     const { graph } = useContext(GraphContext);
-    const { setData } = useContext(ViewportContext);
+    const { canvasRef } = useContext(ForceGraphContext);
 
     // Get available properties from nodes with this label
-    const availableProperties = Array.from(
+    const captionOptions = Array.from(
         new Set(
             label.elements.flatMap(node => Object.keys(node.data || {}))
         )
     ).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
 
-    // Add special options
-    const captionOptions = ["Description", ...availableProperties, "id"];
-
     // Store original values for comparison and cancel functionality
-    const [originalColor] = useState<string>(label.style?.customColor || label.color);
-    const [originalSize] = useState<number>(label.style?.customSize || 1);
-    const [originalCaption] = useState<string>(label.style?.customCaption || "Description");
+    const [originalColor] = useState<string>(label.style.color);
+    const [originalSize] = useState(label.style.size || 6);
+    const [originalCaption] = useState(label.style.caption);
 
     const [selectedColor, setSelectedColor] = useState<string>(
-        label.style?.customColor || label.color
+        label.style.color
     );
-    const [selectedSize, setSelectedSize] = useState<number>(
-        label.style?.customSize || 1
+    const [selectedSize, setSelectedSize] = useState(
+        label.style.size || 6
     );
-    const [selectedCaption, setSelectedCaption] = useState<string>(
-        label.style?.customCaption || "Description"
+    const [selectedCaption, setSelectedCaption] = useState(
+        label.style.caption
     );
 
     // RGB Color Picker state
@@ -58,36 +57,45 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
         localStorage.setItem(storageKey, JSON.stringify(style));
     }, []);
 
-    const applyStylesToGraph = useCallback((color: string, size: number, caption: string) => {
+    const applyStylesToGraph = useCallback((color: string, size: number, caption?: string) => {
         const updatedLabel = graph.LabelsMap.get(label.name);
-        if (updatedLabel) {
-            // Update label color directly for sidebar badge
-            // eslint-disable-next-line no-param-reassign
-            updatedLabel.color = color;
 
+        if (updatedLabel) {
             updatedLabel.style = {
                 ...updatedLabel.style,
-                customColor: color,
-                customSize: size,
-                customCaption: caption,
+                color,
+                size,
+                caption,
             };
 
             // Update all nodes with this label
             updatedLabel.elements.forEach(n => {
-                // eslint-disable-next-line no-param-reassign
-                n.color = color;
-                // Clear cached display names to force recalculation
-                // eslint-disable-next-line no-param-reassign
-                n.displayName = [...EMPTY_DISPLAY_NAME];
+                if (getLabelWithFewestElements(n.labels.map(l => graph.LabelsMap.get(l)).filter(Boolean) as Label[])?.name === label.name) {
+                    n.color = color;
+                    n.size = size;
+                    n.caption = caption;
+                }
             });
 
-            // Trigger canvas re-render
-            setData({
-                nodes: [...graph.Elements.nodes],
-                links: graph.Elements.links
-            });
+            const canvas = canvasRef.current;
+
+            if (canvas) {
+                const currentData = canvas.getGraphData();
+
+                currentData.nodes.forEach(node => {
+                    if (getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l)).filter(Boolean) as Label[])?.name === label.name) {
+                        node.color = color;
+                        node.size = size;
+                        node.caption = caption;
+                        node.displayName = EMPTY_DISPLAY_NAME;
+                    }
+                });
+
+                canvas.setGraphData(currentData);
+            }
+
         }
-    }, [graph, label.name, setData]);
+    }, [canvasRef, graph.LabelsMap, label.name]);
 
     const handleColorSelect = (color: string) => {
         setSelectedColor(color);
@@ -114,7 +122,7 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
         applyStylesToGraph(selectedColor, size, selectedCaption);
     };
 
-    const handleCaptionSelect = (caption: string) => {
+    const handleCaptionSelect = (caption?: string) => {
         setSelectedCaption(caption);
         // Apply to graph immediately for preview (without saving to localStorage)
         applyStylesToGraph(selectedColor, selectedSize, caption);
@@ -123,9 +131,9 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
     const handleSave = () => {
         // Save to localStorage
         saveStyleToStorage(label.name, {
-            customColor: selectedColor,
-            customSize: selectedSize,
-            customCaption: selectedCaption,
+            color: selectedColor,
+            size: selectedSize,
+            caption: selectedCaption,
         });
         onClose();
     };
@@ -141,9 +149,10 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
     }, [originalColor, originalSize, originalCaption, applyStylesToGraph]);
 
     const handleClose = useCallback(() => {
+        handleCancel();
         // Just close the panel without reverting changes
         onClose();
-    }, [onClose]);
+    }, [onClose, handleCancel]);
 
     useEffect(() => {
         const handleEscape = (e: KeyboardEvent) => {
@@ -157,80 +166,80 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
     }, [handleCancel]);
 
     return (
-        <div className="relative h-full w-full flex flex-col border-r border-border bg-background">
-            {/* Scrollable Content Area */}
-            <div className="flex-1 overflow-y-auto p-4 pb-2">
-                <Button
-                    className="absolute top-2 right-2 z-10"
-                    title="Close"
-                    onClick={handleClose}
-                >
-                    <X className="h-4 w-4" />
-                </Button>
-
-                <div className="flex flex-col gap-4">
-                    <h1 className="text-2xl">Style Settings</h1>
-
-                    <div className="flex items-center gap-2">
-                        <div
-                            style={{ backgroundColor: selectedColor }}
-                            className="w-8 h-8 rounded-full"
-                        />
-                        <span className="text-lg font-medium SofiaSans">{label.name}</span>
-                    </div>
+        <>
+            <Button
+                className="absolute top-2 right-2 z-10"
+                title="Close"
+                onClick={handleClose}
+            >
+                <X className="h-4 w-4" />
+            </Button>
+            <h1 className="text-2xl">Style Settings</h1>
+            <div className="flex gap-2 items-center overflow-hidden">
+                <div
+                    style={{ backgroundColor: selectedColor }}
+                    className="w-8 h-8 rounded-full"
+                />
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <p className="truncate pointer-events-auto SofiaSans">{label.name}</p>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        {label.name}
+                    </TooltipContent>
+                </Tooltip>
+            </div>
 
             {/* Color Selection */}
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2 overflow-hidden">
                 <h2 className="text-base font-semibold">Color:</h2>
-                <div className="flex flex-col gap-3">
-                    <div className="grid grid-cols-8 gap-2 p-2 bg-muted/10 rounded-lg">
-                        {/* First 15 preset colors */}
-                        {STYLE_COLORS.slice(0, 15).map((color) => (
-                            <Tooltip key={color}>
-                                <TooltipTrigger asChild>
-                                    <button
-                                        type="button"
-                                        className={cn(
-                                            "w-8 h-8 rounded-full transition-all hover:scale-110",
-                                            selectedColor === color && "ring-2 ring-foreground ring-offset-2 ring-offset-background"
-                                        )}
-                                        style={{ backgroundColor: color }}
-                                        onClick={() => handleColorSelect(color)}
-                                        aria-label={`Select color ${color}`}
-                                    />
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {color}
-                                </TooltipContent>
-                            </Tooltip>
-                        ))}
-
-                        {/* RGB Color Picker Button */}
-                        <Tooltip>
+                <div className="flex gap-2 flex-wrap p-2 bg-muted/10 rounded-lg overflow-y-auto">
+                    {/* First 15 preset colors */}
+                    {STYLE_COLORS.slice(0, 15).map((color) => (
+                        <Tooltip key={color}>
                             <TooltipTrigger asChild>
                                 <button
                                     type="button"
-                                    data-testid="rgbColorPickerButton"
                                     className={cn(
-                                        "w-8 h-8 rounded-full transition-all hover:scale-110 relative overflow-hidden",
-                                        "bg-gradient-to-br from-red-500 via-green-500 to-blue-500",
-                                        showRgbPicker && "ring-2 ring-foreground ring-offset-2 ring-offset-background"
-                                    )}
-                                    onClick={handleRgbPickerClick}
-                                    aria-label="Custom RGB color picker"
-                                >
-                                    {showRgbPicker ? (
-                                        <X className="w-4 h-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white drop-shadow-md" />
-                                    ) : (
-                                        <Palette className="w-4 h-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white drop-shadow-md" />
+                                        "w-8 h-8 rounded-full transition-all hover:scale-110",
+                                        selectedColor === color && "ring-2 ring-foreground ring-offset-2 ring-offset-background"
                                     )}
-                                </button>
+                                    style={{ backgroundColor: color }}
+                                    onClick={() => handleColorSelect(color)}
+                                    aria-label={`Select color ${color}`}
+                                />
                             </TooltipTrigger>
                             <TooltipContent>
-                                {showRgbPicker ? "Close Custom Color" : "Custom Color"}
+                                {color}
                             </TooltipContent>
                         </Tooltip>
-                    </div>
+                    ))}
+
+                    {/* RGB Color Picker Button */}
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <button
+                                type="button"
+                                data-testid="rgbColorPickerButton"
+                                className={cn(
+                                    "w-8 h-8 rounded-full transition-all hover:scale-110 relative overflow-hidden",
+                                    "bg-gradient-to-br from-red-500 via-green-500 to-blue-500",
+                                    showRgbPicker && "ring-2 ring-foreground ring-offset-2 ring-offset-background"
+                                )}
+                                onClick={handleRgbPickerClick}
+                                aria-label="Custom RGB color picker"
+                            >
+                                {showRgbPicker ? (
+                                    <X className="w-4 h-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white drop-shadow-md" />
+                                ) : (
+                                    <Palette className="w-4 h-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white drop-shadow-md" />
+                                )}
+                            </button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {showRgbPicker ? "Close Custom Color" : "Custom Color"}
+                        </TooltipContent>
+                    </Tooltip>
 
                     {/* RGB Color Picker Panel */}
                     {showRgbPicker && (
@@ -290,46 +299,43 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
             </div>
 
             {/* Size Selection */}
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2 overflow-hidden">
                 <h2 className="text-base font-semibold">Size:</h2>
                 <div className="flex gap-2 p-2 bg-muted/10 rounded-lg overflow-x-auto">
-                    {NODE_SIZE_OPTIONS.map((size) => {
-                        const displaySize = 12 + (size - 1) * 12; // Scale for display
-                        return (
-                            <Tooltip key={size}>
-                                <TooltipTrigger asChild>
-                                    <button
-                                        type="button"
-                                        className={cn(
-                                            "flex items-center justify-center min-w-[40px] min-h-[40px] transition-all hover:bg-muted rounded-md",
-                                            selectedSize === size && "bg-muted ring-2 ring-foreground"
-                                        )}
-                                        onClick={() => handleSizeSelect(size)}
-                                        aria-label={`Select size ${size}`}
-                                    >
-                                        <div
-                                            className="rounded-full"
-                                            style={{
-                                                backgroundColor: selectedColor,
-                                                width: `${displaySize}px`,
-                                                height: `${displaySize}px`,
-                                            }}
-                                        />
-                                    </button>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {size}x
-                                </TooltipContent>
-                            </Tooltip>
-                        );
-                    })}
+                    {NODE_SIZE_OPTIONS.map((size) => (
+                        <Tooltip key={size}>
+                            <TooltipTrigger asChild>
+                                <button
+                                    type="button"
+                                    className={cn(
+                                        "flex items-center justify-center transition-all hover:bg-muted rounded-md",
+                                        selectedSize === size && "bg-muted ring-2 ring-foreground"
+                                    )}
+                                    onClick={() => handleSizeSelect(size)}
+                                    aria-label={`Select size ${size}`}
+                                >
+                                    <div
+                                        className="rounded-full"
+                                        style={{
+                                            backgroundColor: selectedColor,
+                                            width: `${size * 4}px`,
+                                            height: `${size * 4}px`,
+                                        }}
+                                    />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                {(size / 6).toFixed(2)}x
+                            </TooltipContent>
+                        </Tooltip>
+                    ))}
                 </div>
             </div>
 
             {/* Caption Selection */}
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2 overflow-hidden">
                 <h2 className="text-base font-semibold">Caption:</h2>
-                <div className="flex flex-col gap-1 p-2 bg-muted/10 rounded-lg max-h-[200px] overflow-y-auto">
+                <div className="flex flex-col gap-1 p-2 bg-muted/10 rounded-lg overflow-y-auto">
                     {captionOptions.map((option) => (
                         <button
                             key={option}
@@ -343,38 +349,56 @@ export default function CustomizeStylePanel({ label, onClose }: Props) {
                             {option}
                         </button>
                     ))}
-                </div>
-            </div>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <button
+                                key="__id__"
+                                type="button"
+                                className={cn(
+                                    "px-3 py-2 text-left rounded-md transition-all hover:bg-muted SofiaSans",
+                                    selectedCaption === undefined && "bg-muted font-semibold"
+                                )}
+                                onClick={() => handleCaptionSelect()}
+                            >
+                                ID
+                            </button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            Graph ID
+                        </TooltipContent>
+                    </Tooltip>
                 </div>
             </div>
 
             {/* Sticky Save/Cancel Buttons - Only show when there are changes */}
-            {hasChanges && (
-                <div className="flex-shrink-0 p-3 pt-2 border-t border-border bg-background">
-                    <div className="flex gap-2 justify-center">
-                        <button
-                            type="button"
-                            data-testid="cancelStyleChanges"
-                            className="px-3 py-1.5 rounded-md text-sm font-medium transition-all
-                                       bg-muted/50 hover:bg-muted text-foreground
+            {
+                hasChanges && (
+                    <div className="flex-shrink-0 p-3 pt-2 border-t border-border bg-background">
+                        <div className="flex gap-2 justify-center">
+                            <button
+                                type="button"
+                                data-testid="cancelStyleChanges"
+                                className="px-3 py-1.5 rounded-md text-sm font-medium transition-all
+                        bg-muted/50 hover:bg-muted text-foreground
                                        border border-border hover:border-foreground/20"
-                            onClick={handleCancel}
-                        >
-                            Cancel
-                        </button>
-                        <button
-                            type="button"
-                            data-testid="saveStyleChanges"
-                            className="px-3 py-1.5 rounded-md text-sm font-semibold transition-all
+                                onClick={handleCancel}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="button"
+                                data-testid="saveStyleChanges"
+                                className="px-3 py-1.5 rounded-md text-sm font-semibold transition-all
                                        bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800
                                        text-white shadow-md hover:shadow-lg"
-                            onClick={handleSave}
-                        >
-                            Save Changes
-                        </button>
+                                onClick={handleSave}
+                            >
+                                Save Changes
+                            </button>
+                        </div>
                     </div>
-                </div>
-            )}
-        </div>
+                )
+            }
+        </>
     );
 }
diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 6a682bbf..26e17ac1 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -2,9 +2,9 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable react/require-default-props */
 
-'use client'
+'use client';
 
-import { prepareArg, securedFetch } from "@/lib/utils";
+import { prepareArg, securedFetch, GraphRef } from "@/lib/utils";
 import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Pencil, X } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
@@ -20,91 +20,110 @@ interface Props {
     object: Node | Link;
     onClose: () => void;
     setLabels: Dispatch<SetStateAction<Label[]>>;
+    canvasRef: GraphRef;
 }
 
-export default function DataPanel({ object, onClose, setLabels }: Props) {
-    const { setIndicator } = useContext(IndicatorContext)
-    const { graph, setGraphInfo } = useContext(GraphContext)
+export default function DataPanel({ object, onClose, setLabels, canvasRef }: Props) {
+    const { setIndicator } = useContext(IndicatorContext);
+    const { graph, setGraphInfo } = useContext(GraphContext);
 
-    const lastObjId = useRef<number | undefined>(undefined)
-    const labelsListRef = useRef<HTMLUListElement>(null)
+    const lastObjId = useRef<number | undefined>(undefined);
+    const labelsListRef = useRef<HTMLUListElement>(null);
 
-    const { toast } = useToast()
-    const { data: session } = useSession()
+    const { toast } = useToast();
+    const { data: session } = useSession();
 
-    const [labelsHover, setLabelsHover] = useState(false)
+    const [labelsHover, setLabelsHover] = useState(false);
     const [label, setLabel] = useState<string[]>([]);
-    const type = !object.source
+    const type = !("source" in object);
 
     const handleClose = useCallback((e: KeyboardEvent) => {
         if (e.key === "Escape") {
-            onClose()
+            onClose();
         }
-    }, [onClose])
+    }, [onClose]);
 
     useEffect(() => {
-        window.addEventListener("keydown", handleClose)
+        window.addEventListener("keydown", handleClose);
 
         return () => {
-            window.removeEventListener("keydown", handleClose)
-        }
-    }, [handleClose])
+            window.removeEventListener("keydown", handleClose);
+        };
+    }, [handleClose]);
 
     useEffect(() => {
         if (lastObjId.current !== object.id) {
-            setLabelsHover(false)
+            setLabelsHover(false);
         }
         setLabel(type ? [...(object as Node).labels.filter((c) => c !== "")] : [object.relationship]);
-        lastObjId.current = object.id
+        lastObjId.current = object.id;
     }, [object, type]);
 
     const handleAddLabel = async (newLabel: string) => {
-        const node = object as Node
+        const node = object as Node;
         if (newLabel === "") {
             toast({
                 title: "Error",
                 description: "Please fill the label",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
         if (label.includes(newLabel)) {
             toast({
                 title: "Error",
                 description: "Label already exists",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
         const result = await securedFetch(`api/graph/${prepareArg(graph.Id)}/${node.id}/label`, {
             method: "POST",
             body: JSON.stringify({
                 label: newLabel
             })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (result.ok) {
-            setLabels([...graph.addLabel(newLabel, node)])
-            setLabel([...node.labels])
-            const newGraphInfo = graph.GraphInfo.clone()
-            setGraphInfo(newGraphInfo)
-            graph.GraphInfo = newGraphInfo
-            return true
+            setLabels([...graph.addLabel(newLabel, node)]);
+            setLabel([...node.labels]);
+            const newGraphInfo = graph.GraphInfo.clone();
+            setGraphInfo(newGraphInfo);
+            graph.GraphInfo = newGraphInfo;
+
+            const canvas = canvasRef.current;
+            
+            if (canvas) {
+                const currentData = canvas.getGraphData();
+
+                currentData.nodes.forEach(canvasNode => {
+                    if (canvasNode.id === node.id) {
+                        canvasNode.labels = [...node.labels];
+                        canvasNode.color = node.color;
+                        canvasNode.size = node.size || canvasNode.size;
+                        canvasNode.caption = node.caption;
+                    }
+                });
+
+                canvas.setGraphData({ ...currentData });
+            }
+
+            return true;
         }
 
-        return false
-    }
+        return false;
+    };
 
     const handleRemoveLabel = async (removeLabel: string) => {
-        const node = object as Node
+        const node = object as Node;
 
         if (removeLabel === "") {
             toast({
                 title: "Error",
                 description: "You cannot remove the default label",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
 
         const result = await securedFetch(`api/graph/${prepareArg(graph.Id)}/${node.id}/label`, {
@@ -112,20 +131,39 @@ export default function DataPanel({ object, onClose, setLabels }: Props) {
             body: JSON.stringify({
                 label: removeLabel
             })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (result.ok) {
-            graph.removeLabel(removeLabel, node)
-            setLabels([...graph.Labels])
-            setLabel([...node.labels])
-            const newGraphInfo = graph.GraphInfo.clone()
-            setGraphInfo(newGraphInfo)
-            graph.GraphInfo = newGraphInfo
-            return true
+            graph.removeLabel(removeLabel, node);
+            setLabels([...graph.Labels]);
+            setLabel([...node.labels]);
+            const newGraphInfo = graph.GraphInfo.clone();
+            setGraphInfo(newGraphInfo);
+            graph.GraphInfo = newGraphInfo;
+
+            const canvas = canvasRef.current;
+            if (canvas) {
+                const currentData = canvas.getGraphData();
+
+                currentData.nodes.forEach(canvasNode => {
+                    if (canvasNode.id === node.id) {
+
+                        // Update canvas node to match the updated graph node
+                        canvasNode.labels = [...node.labels];
+                        canvasNode.color = node.color;
+                        canvasNode.size = node.size || canvasNode.size;
+                        canvasNode.caption = node.caption;
+                    }
+                });
+
+                canvas.setGraphData({ ...currentData });
+            }
+
+            return true;
         }
 
-        return false
-    }
+        return false;
+    };
 
     return (
         <div data-testid="DataPanel" className="DataPanel p-4">
@@ -201,7 +239,8 @@ export default function DataPanel({ object, onClose, setLabels }: Props) {
                 lastObjId={lastObjId}
                 object={object}
                 type={type}
+                canvasRef={canvasRef}
             />
         </div >
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/DataTable.tsx b/app/graph/DataTable.tsx
index 7c9a0555..a028691c 100644
--- a/app/graph/DataTable.tsx
+++ b/app/graph/DataTable.tsx
@@ -1,130 +1,133 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-param-reassign */
 
-import { Check, CirclePlus, Info, Pencil, Trash2, X } from "lucide-react"
-import { cn, prepareArg, securedFetch } from "@/lib/utils"
-import { toast } from "@/components/ui/use-toast"
-import { Fragment, MutableRefObject, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react"
-import { useSession } from "next-auth/react"
-import { Switch } from "@/components/ui/switch"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import Input from "../components/ui/Input"
-import DialogComponent from "../components/DialogComponent"
-import CloseDialog from "../components/CloseDialog"
-import { Link, Node, Value } from "../api/graph/model"
-import { GraphContext, IndicatorContext, BrowserSettingsContext } from "../components/provider"
-import ToastButton from "../components/ToastButton"
-import Button from "../components/ui/Button"
-import Combobox from "../components/ui/combobox"
-
-type ValueType = "string" | "number" | "boolean"
+'use client';
+
+import { Check, CirclePlus, Info, Pencil, Trash2, X } from "lucide-react";
+import { cn, prepareArg, securedFetch, GraphRef } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
+import { Fragment, MutableRefObject, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useSession } from "next-auth/react";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { getNodeDisplayKey } from "@falkordb/canvas";
+import Input from "../components/ui/Input";
+import DialogComponent from "../components/DialogComponent";
+import CloseDialog from "../components/CloseDialog";
+import { EMPTY_DISPLAY_NAME, Link, Node, Value } from "../api/graph/model";
+import { GraphContext, IndicatorContext } from "../components/provider";
+import ToastButton from "../components/ToastButton";
+import Button from "../components/ui/Button";
+import Combobox from "../components/ui/combobox";
+
+type ValueType = "string" | "number" | "boolean";
 
 interface Props {
     object: Node | Link
     type: boolean
     lastObjId: MutableRefObject<number | undefined>
+    canvasRef: GraphRef
     className?: string
 }
 
-export default function DataTable({ object, type, lastObjId, className }: Props) {
-
-    const { graph, graphInfo, setGraphInfo } = useContext(GraphContext)
-    const { settings: { graphInfo: graphInfoSettings } } = useContext(BrowserSettingsContext)
-    const { displayTextPriority } = graphInfoSettings
-
-    const setInputRef = useRef<HTMLInputElement>(null)
-    const setTextareaRef = useRef<HTMLTextAreaElement>(null)
-    const addInputRef = useRef<HTMLInputElement>(null)
-    const scrollableContainerRef = useRef<HTMLDivElement>(null)
-
-    const [hover, setHover] = useState<string>("")
-    const [editable, setEditable] = useState<string>("")
-    const [isAddValue, setIsAddValue] = useState<boolean>(false)
-    const [newKey, setNewKey] = useState<string>("")
-    const [newVal, setNewVal] = useState<Value>("")
-    const [newType, setNewType] = useState<ValueType>("string")
-    const [isSetLoading, setIsSetLoading] = useState(false)
-    const [isAddLoading, setIsAddLoading] = useState(false)
-    const [isRemoveLoading, setIsRemoveLoading] = useState(false)
-    const { indicator, setIndicator } = useContext(IndicatorContext)
-    const { data: session } = useSession()
-    const [attributes, setAttributes] = useState<string[]>([])
-    const [expandedAttributes, setExpandedAttributes] = useState<Record<string, boolean>>({})
-    const valueParagraphRefs = useRef<Record<string, HTMLParagraphElement | null>>({})
-    const [valueOverflowMap, setValueOverflowMap] = useState<Record<string, boolean>>({})
+export default function DataTable({ object, type, lastObjId, canvasRef, className }: Props) {
+
+    const { graph, graphInfo, setGraphInfo } = useContext(GraphContext);
+    const { toast } = useToast();
+
+    const setInputRef = useRef<HTMLInputElement>(null);
+    const setTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const addInputRef = useRef<HTMLInputElement>(null);
+    const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
+    const [hover, setHover] = useState<string>("");
+    const [editable, setEditable] = useState<string>("");
+    const [isAddValue, setIsAddValue] = useState<boolean>(false);
+    const [newKey, setNewKey] = useState<string>("");
+    const [newVal, setNewVal] = useState<Value>("");
+    const [newType, setNewType] = useState<ValueType>("string");
+    const [isSetLoading, setIsSetLoading] = useState(false);
+    const [isAddLoading, setIsAddLoading] = useState(false);
+    const [isRemoveLoading, setIsRemoveLoading] = useState(false);
+    const { indicator, setIndicator } = useContext(IndicatorContext);
+    const { data: session } = useSession();
+    const [attributes, setAttributes] = useState<string[]>([]);
+    const [expandedAttributes, setExpandedAttributes] = useState<Record<string, boolean>>({});
+    const valueParagraphRefs = useRef<Record<string, HTMLParagraphElement | null>>({});
+    const [valueOverflowMap, setValueOverflowMap] = useState<Record<string, boolean>>({});
 
     const setValueParagraphRef = useCallback((key: string) => (el: HTMLParagraphElement | null) => {
         if (!el) {
-            delete valueParagraphRefs.current[key]
-            return
+            delete valueParagraphRefs.current[key];
+            return;
         }
-        valueParagraphRefs.current[key] = el
-    }, [])
+        valueParagraphRefs.current[key] = el;
+    }, []);
 
     const measureValueOverflow = useCallback(() => {
-        if (typeof window === "undefined") return
+        if (typeof window === "undefined") return;
 
-        const nextMap: Record<string, boolean> = {}
+        const nextMap: Record<string, boolean> = {};
 
         attributes.forEach((key) => {
-            const element = valueParagraphRefs.current[key]
-            if (!element) return
+            const element = valueParagraphRefs.current[key];
+            if (!element) return;
 
-            const computedStyle = window.getComputedStyle(element)
-            let lineHeight = parseFloat(computedStyle.lineHeight)
+            const computedStyle = window.getComputedStyle(element);
+            let lineHeight = parseFloat(computedStyle.lineHeight);
 
             if (Number.isNaN(lineHeight)) {
-                const fontSize = parseFloat(computedStyle.fontSize)
-                lineHeight = Number.isNaN(fontSize) ? 16 : fontSize * 1.2
+                const fontSize = parseFloat(computedStyle.fontSize);
+                lineHeight = Number.isNaN(fontSize) ? 16 : fontSize * 1.2;
             }
 
-            const collapsedHeight = lineHeight * 3
-            nextMap[key] = element.scrollHeight - collapsedHeight > 1
-        })
+            const collapsedHeight = lineHeight * 3;
+            nextMap[key] = element.scrollHeight - collapsedHeight > 1;
+        });
 
         setValueOverflowMap((prev) => {
-            const prevKeys = Object.keys(prev)
-            const nextKeys = Object.keys(nextMap)
+            const prevKeys = Object.keys(prev);
+            const nextKeys = Object.keys(nextMap);
 
             if (prevKeys.length === nextKeys.length && prevKeys.every((key) => prev[key] === nextMap[key])) {
-                return prev
+                return prev;
             }
 
-            return nextMap
-        })
-    }, [attributes])
+            return nextMap;
+        });
+    }, [attributes]);
 
     useLayoutEffect(() => {
-        measureValueOverflow()
-        if (typeof window === "undefined") return undefined
+        measureValueOverflow();
+        if (typeof window === "undefined") return undefined;
 
-        window.addEventListener("resize", measureValueOverflow)
+        window.addEventListener("resize", measureValueOverflow);
         return () => {
-            window.removeEventListener("resize", measureValueOverflow)
-        }
-    }, [measureValueOverflow])
+            window.removeEventListener("resize", measureValueOverflow);
+        };
+    }, [measureValueOverflow]);
 
     useLayoutEffect(() => {
-        if (typeof ResizeObserver === "undefined") return undefined
-        if (!scrollableContainerRef.current) return undefined
+        if (typeof ResizeObserver === "undefined") return undefined;
+        if (!scrollableContainerRef.current) return undefined;
 
-        const observer = new ResizeObserver(() => measureValueOverflow())
-        observer.observe(scrollableContainerRef.current)
+        const observer = new ResizeObserver(() => measureValueOverflow());
+        observer.observe(scrollableContainerRef.current);
 
         return () => {
-            observer.disconnect()
-        }
-    }, [measureValueOverflow])
+            observer.disconnect();
+        };
+    }, [measureValueOverflow]);
 
     useEffect(() => {
         if (editable) {
             if (setInputRef.current) {
-                setInputRef.current.focus()
+                setInputRef.current.focus();
             } else if (setTextareaRef.current) {
-                setTextareaRef.current.focus()
+                setTextareaRef.current.focus();
             }
         }
-    }, [editable])
+    }, [editable]);
 
     useEffect(() => {
         if (isAddValue) {
@@ -133,139 +136,128 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                     scrollableContainerRef.current?.scrollTo({
                         top: scrollableContainerRef.current.scrollHeight,
                         behavior: "smooth"
-                    })
-                }, 0)
+                    });
+                }, 0);
             }
 
             if (addInputRef.current) {
-                addInputRef.current.focus()
+                addInputRef.current.focus();
             }
         }
-    }, [isAddValue])
+    }, [isAddValue]);
 
     useEffect(() => {
         if (lastObjId.current !== object.id) {
-            setEditable("")
-            setNewVal("")
-            setNewKey("")
-            setIsAddValue(false)
-        }
-        setAttributes(Object.keys(object.data))
-        setExpandedAttributes({})
-    }, [lastObjId, object, setAttributes, type])
-
-    const getNodeDisplayKey = (node: Node) => {
-        const { data: nodeData } = node;
-
-        const displayText = displayTextPriority.find(({ name, ignore }) => {
-            const key = ignore
-                ? Object.keys(nodeData).find(
-                    (k) => k.toLowerCase() === name.toLowerCase()
-                )
-                : name;
-
-            return (
-                key &&
-                nodeData[key] &&
-                typeof nodeData[key] === "string" &&
-                nodeData[key].trim().length > 0
-            );
-        });
-
-        if (displayText) {
-            const key = displayText.ignore
-                ? Object.keys(nodeData).find(
-                    (k) => k.toLowerCase() === displayText.name.toLowerCase()
-                )
-                : displayText.name;
-
-            if (key) {
-                return key;
-            }
+            setEditable("");
+            setNewVal("");
+            setNewKey("");
+            setIsAddValue(false);
         }
-
-        return "id";
-    }
+        setAttributes(Object.keys(object.data));
+        setExpandedAttributes({});
+    }, [lastObjId, object, setAttributes, type]);
 
     const getDefaultVal = (t: ValueType) => {
         switch (t) {
             case "boolean":
-                return false
+                return false;
             case "number":
-                return 0
+                return 0;
             default:
-                return ""
+                return "";
         }
-    }
+    };
 
     const isComplexType = (value: Value) => {
-        const valueType = typeof value
-        return valueType !== "string" && valueType !== "number" && valueType !== "boolean"
-    }
+        const valueType = typeof value;
+        return valueType !== "string" && valueType !== "number" && valueType !== "boolean";
+    };
 
     const handleSetEditable = (key: string, value?: Value) => {
         if (key !== "") {
-            setIsAddValue(false)
+            setIsAddValue(false);
         }
 
         // Don't allow editing complex types
         if (value !== undefined && isComplexType(value)) {
-            return
+            return;
         }
 
-        setEditable(key)
-        setNewVal(value ?? "")
-        setNewType(typeof value === "undefined" ? "string" : typeof value as ValueType)
+        setEditable(key);
+        setNewVal(value ?? "");
+        setNewType(typeof value === "undefined" ? "string" : typeof value as ValueType);
 
-        if (typeof value !== "undefined" && typeof value !== "string") return
+        if (typeof value !== "undefined" && typeof value !== "string") return;
 
         setTimeout(() => {
             if (setTextareaRef.current) {
-                setTextareaRef.current.style.height = 'auto'
-                setTextareaRef.current.style.height = `${setTextareaRef.current.scrollHeight}px`
+                setTextareaRef.current.style.height = 'auto';
+                setTextareaRef.current.style.height = `${setTextareaRef.current.scrollHeight}px`;
             }
-        }, 0)
-    }
+        }, 0);
+    };
 
     const setProperty = async (key: string, val: Value, isUndo: boolean, actionType: ("added" | "set") = "set") => {
-        const { id } = object
+        const { id } = object;
         if (val === "") {
             toast({
                 title: "Error",
                 description: "Please fill in the value field",
                 variant: "destructive"
-            })
-            return false
+            });
+            return false;
         }
         try {
-            if (actionType === "set") setIsSetLoading(true)
+            if (actionType === "set") setIsSetLoading(true);
             const result = await securedFetch(`api/graph/${prepareArg(graph.Id)}/${id}/${key}`, {
                 method: "POST",
                 body: JSON.stringify({
                     value: val,
                     type
                 })
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
             if (result.ok) {
-                const value = object.data[key]
+                const value = object.data[key];
 
-                graph.setProperty(key, val, id, type)
+                graph.setProperty(key, val, id, type);
 
                 graphInfo.PropertyKeys = [...(graphInfo.PropertyKeys || []).filter((k) => k !== key), key];
                 const graphI = graphInfo.clone();
-                graph.GraphInfo = graphI
-                setGraphInfo(graphI)
+                graph.GraphInfo = graphI;
+                setGraphInfo(graphI);
 
-                object.data[key] = val
+                object.data[key] = val;
 
-                if (object.labels && getNodeDisplayKey(object as Node) === key) {
-                    object.displayName = ['', '']
-                }
+                setAttributes(Object.keys(object.data));
+
+                const canvas = canvasRef.current;
+
+                if (canvas) {
+                    const currentData = canvas.getGraphData();
+
+                    if (type) {
+                        const canvasNode = currentData.nodes.find(n => n.id === object.id);
+
+                        if (canvasNode) {
+                            canvasNode.data[key] = val;
+
+                            if (getNodeDisplayKey(object as Node) === key) {
+                                canvasNode.displayName = EMPTY_DISPLAY_NAME;
+                            }
+                        }
+                    } else {
+                        const canvasLink = currentData.links.find(l => l.id === object.id);
 
-                setAttributes(Object.keys(object.data))
+                        if (canvasLink) {
+                            canvasLink.data[key] = val;
+                        }
+                    }
 
-                handleSetEditable("")
+                    canvas.setGraphData({ ...currentData });
+                }
+
+                handleSetEditable("");
                 toast({
                     title: "Success",
                     description: `Attribute ${actionType}`,
@@ -276,14 +268,14 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                             onClick={() => setProperty(key, value, false)}
                         />
                         : undefined
-                })
+                });
             }
 
-            return result.ok
+            return result.ok;
         } finally {
-            if (actionType === "set") setIsSetLoading(false)
+            if (actionType === "set") setIsSetLoading(false);
         }
-    }
+    };
 
     const handleAddValue = async (key: string, value: Value) => {
         if (!key || key === "" || value === "") {
@@ -291,42 +283,64 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                 title: "Error",
                 description: "Please fill in both fields",
                 variant: "destructive"
-            })
-            return
+            });
+            return;
         }
         try {
-            setIsAddLoading(true)
-            const success = await setProperty(key, value, false, "added")
-            if (!success) return
-            setIsAddValue(false)
-            setNewKey("")
-            setNewVal("")
+            setIsAddLoading(true);
+            const success = await setProperty(key, value, false, "added");
+            if (!success) return;
+            setIsAddValue(false);
+            setNewKey("");
+            setNewVal("");
         } finally {
-            setIsAddLoading(false)
+            setIsAddLoading(false);
         }
-    }
+    };
 
     const removeProperty = async (key: string) => {
         try {
-            setIsRemoveLoading(true)
-            const { id } = object
+            setIsRemoveLoading(true);
+            const { id } = object;
             const success = (await securedFetch(`api/graph/${prepareArg(graph.Id)}/${id}/${key}`, {
                 method: "DELETE",
                 body: JSON.stringify({ type }),
-            }, toast, setIndicator)).ok
+            }, toast, setIndicator)).ok;
 
             if (success) {
-                const value = object.data[key]
+                const value = object.data[key];
 
-                graph.removeProperty(key, id, type)
+                graph.removeProperty(key, id, type);
 
-                if (object.labels && getNodeDisplayKey(object as Node) === key) {
-                    object.displayName = ['', ''];
-                }
+                delete object.data[key];
+
+                setAttributes(Object.keys(object.data));
+
+                const canvas = canvasRef.current;
+
+                if (canvas) {
+                    const currentData = canvas.getGraphData();
 
-                delete object.data[key]
+                    if (type) {
+                        const canvasNode = currentData.nodes.find(n => n.id === object.id);
 
-                setAttributes(Object.keys(object.data))
+                        if (canvasNode) {
+                            delete canvasNode.data[key];
+
+                            if (getNodeDisplayKey(object as Node) === key) {
+                                canvasNode.displayName = EMPTY_DISPLAY_NAME;
+                            }
+                        }
+                    } else {
+                        const canvasLink = currentData.links.find(l => l.id === object.id);
+
+                        if (canvasLink) {
+                            delete canvasLink.data[key];
+                        }
+                    }
+
+                    canvas.setGraphData({ ...currentData });
+                }
 
                 toast({
                     title: "Success",
@@ -337,46 +351,46 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                             onClick={() => setProperty(key, value, false)}
                         />,
                     variant: "default"
-                })
+                });
             }
 
-            return success
+            return success;
         } finally {
-            setIsRemoveLoading(false)
+            setIsRemoveLoading(false);
         }
-    }
+    };
 
     const handleAddKeyDown = async (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         if (e.key === "Escape") {
-            setIsAddValue(false)
-            setNewKey("")
-            setNewVal("")
-            e.stopPropagation()
+            setIsAddValue(false);
+            setNewKey("");
+            setNewVal("");
+            e.stopPropagation();
         }
 
         if (e.key === "Enter" && !e.shiftKey) {
-            if (isAddLoading || indicator === "offline") return
-            e.preventDefault()
-            handleAddValue(newKey, newVal)
+            if (isAddLoading || indicator === "offline") return;
+            e.preventDefault();
+            handleAddValue(newKey, newVal);
         }
-    }
+    };
 
     const handleSetKeyDown = async (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         if (e.key === "Escape") {
-            handleSetEditable("", "")
-            setNewKey("")
-            e.stopPropagation()
+            handleSetEditable("", "");
+            setNewKey("");
+            e.stopPropagation();
         }
 
         if (e.key === "Enter" && !e.shiftKey) {
-            if (isSetLoading || indicator === "offline") return
-            e.preventDefault()
-            setProperty(editable, newVal, true)
+            if (isSetLoading || indicator === "offline") return;
+            e.preventDefault();
+            setProperty(editable, newVal, true);
         }
-    }
+    };
 
     const getCellEditableContent = (t: ValueType, actionType: "set" | "add" = "set") => {
-        const dataTestId = `DataPanel${actionType === "set" ? "Set" : "Add"}AttributeValue`
+        const dataTestId = `DataPanel${actionType === "set" ? "Set" : "Add"}AttributeValue`;
 
         switch (t) {
             case "boolean":
@@ -385,7 +399,7 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                     checked={newVal as boolean}
                     data-testid={dataTestId}
                     onCheckedChange={(checked) => setNewVal(checked)}
-                />
+                />;
             case "number":
                 return <Input
                     className="w-full"
@@ -393,11 +407,11 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                     data-testid={dataTestId}
                     value={newVal as number}
                     onChange={(e) => {
-                        const num = Number(e.target.value)
-                        if (!Number.isNaN(num)) setNewVal(num)
+                        const num = Number(e.target.value);
+                        if (!Number.isNaN(num)) setNewVal(num);
                     }}
                     onKeyDown={actionType === "set" ? handleSetKeyDown : handleAddKeyDown}
-                />
+                />;
             default:
                 return <textarea
                     className="w-full border border-border p-1 rounded-lg disabled:cursor-not-allowed disabled:opacity-50 bg-input text-foreground resize-none overflow-hidden"
@@ -408,48 +422,48 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                     onKeyDown={actionType === "set" ? handleSetKeyDown : handleAddKeyDown}
                     rows={1}
                     onInput={(e) => {
-                        const target = e.target as HTMLTextAreaElement
-                        target.style.height = 'auto'
-                        target.style.height = `${target.scrollHeight}px`
+                        const target = e.target as HTMLTextAreaElement;
+                        target.style.height = 'auto';
+                        target.style.height = `${target.scrollHeight}px`;
                     }}
-                />
+                />;
         }
-    }
+    };
 
     const getNewTypeInput = () => (
         <Combobox
             options={["string", "number", "boolean"]}
             selectedValue={newType}
             setSelectedValue={(t) => {
-                setNewType(t)
-                setNewVal(typeof newVal === t ? newVal : getDefaultVal(t))
+                setNewType(t);
+                setNewVal(typeof newVal === t ? newVal : getDefaultVal(t));
             }}
             label="Type"
         />
-    )
+    );
 
-    const valueNeedsExpansion = (key: string) => Boolean(valueOverflowMap[key])
+    const valueNeedsExpansion = (key: string) => Boolean(valueOverflowMap[key]);
 
     const handleToggleValueExpansion = (key: string, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
-        event.preventDefault()
-        event.stopPropagation()
+        event.preventDefault();
+        event.stopPropagation();
         setExpandedAttributes(prev => ({
             ...prev,
             [key]: !prev[key]
-        }))
-    }
+        }));
+    };
 
     const getStringValue = (value: Value) => {
         switch (typeof value) {
             case "object":
             case "number":
-                return String(value)
+                return String(value);
             case "boolean":
-                return value ? "true" : "false"
+                return value ? "true" : "false";
             default:
-                return typeof value === "undefined" ? "" : value as string
+                return typeof value === "undefined" ? "" : value as string;
         }
-    }
+    };
 
     return (
         <div className={cn("flex flex-col gap-4 bg-background rounded-lg overflow-hidden", className)}>
@@ -461,13 +475,13 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                     <div className="flex items-center px-1 border-b border-border h-10"><div className="w-6" /></div>
                     {
                         attributes.map((key) => {
-                            const value = object.data[key]
-                            const isComplex = isComplexType(value)
-                            const stringValue = getStringValue(value)
-                            const isExpanded = expandedAttributes[key]
-                            const shouldShowToggle = valueNeedsExpansion(key)
-                            const rowClass = cn("flex items-center px-1 py-1 border-b border-border", editable === key ? "min-h-14" : "min-h-10")
-                            const buttonTitle = session?.user.role === "Read-Only" ? undefined : (isComplex && "Complex values cannot be edited") || "Click to edit the attribute value"
+                            const value = object.data[key];
+                            const isComplex = isComplexType(value);
+                            const stringValue = getStringValue(value);
+                            const isExpanded = expandedAttributes[key];
+                            const shouldShowToggle = valueNeedsExpansion(key);
+                            const rowClass = cn("flex items-center px-1 py-1 border-b border-border", editable === key ? "min-h-14" : "min-h-10");
+                            const buttonTitle = session?.user.role === "Read-Only" ? undefined : (isComplex && "Complex values cannot be edited") || "Click to edit the attribute value";
 
                             return (
                                 <Fragment key={key}>
@@ -519,7 +533,7 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                                                                     onClick={(event) => handleToggleValueExpansion(key, event)}
                                                                     onKeyDown={(event) => {
                                                                         if (event.key === "Enter" || event.key === " ") {
-                                                                            handleToggleValueExpansion(key, event)
+                                                                            handleToggleValueExpansion(key, event);
                                                                         }
                                                                     }}
                                                                 >
@@ -554,8 +568,8 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                                                             indicator={indicator}
                                                             variant="button"
                                                             onClick={(e) => {
-                                                                e.stopPropagation()
-                                                                setProperty(key, newVal, true)
+                                                                e.stopPropagation();
+                                                                setProperty(key, newVal, true);
                                                             }}
                                                             isLoading={isSetLoading}
                                                         >
@@ -567,8 +581,8 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                                                                 data-testid="DataPanelSetAttributeCancel"
                                                                 variant="button"
                                                                 onClick={(e) => {
-                                                                    e.stopPropagation()
-                                                                    handleSetEditable("", "")
+                                                                    e.stopPropagation();
+                                                                    handleSetEditable("", "");
                                                                 }}
                                                             >
                                                                 <X size={20} />
@@ -635,7 +649,7 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                                         }
                                     </div>
                                 </Fragment>
-                            )
+                            );
                         }
                         )
                     }
@@ -700,9 +714,9 @@ export default function DataTable({ object, type, lastObjId, className }: Props)
                 }
             </div>
         </div>
-    )
+    );
 }
 
 DataTable.defaultProps = {
     className: undefined
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/graph/DeleteElement.tsx b/app/graph/DeleteElement.tsx
index 9d86204c..59042fa2 100644
--- a/app/graph/DeleteElement.tsx
+++ b/app/graph/DeleteElement.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/require-default-props */
 
-"use client"
+"use client";
 
 import React, { useState, useContext, useEffect } from "react";
 import { Trash2 } from "lucide-react";
@@ -25,24 +25,24 @@ export default function DeleteElement({
     label = "Graph"
 }: Props) {
 
-    const { indicator } = useContext(IndicatorContext)
-    const [isLoading, setIsLoading] = useState(false)
+    const { indicator } = useContext(IndicatorContext);
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         if (!open) {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }, [open])
+    }, [open]);
 
     const handleDelete = async () => {
         try {
-            setIsLoading(true)
-            await onDeleteElement()
-            setOpen(false)
+            setIsLoading(true);
+            await onDeleteElement();
+            setOpen(false);
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <DialogComponent
@@ -81,5 +81,5 @@ export default function DeleteElement({
                 />
             </div>
         </DialogComponent>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/GraphDetails.tsx b/app/graph/GraphDetails.tsx
index 58577b72..a818551d 100644
--- a/app/graph/GraphDetails.tsx
+++ b/app/graph/GraphDetails.tsx
@@ -1,9 +1,9 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { useContext } from "react"
-import { Info, Loader2 } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { Graph } from "../api/graph/model"
-import { BrowserSettingsContext } from "../components/provider"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useContext } from "react";
+import { Info, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Graph } from "../api/graph/model";
+import { BrowserSettingsContext } from "../components/provider";
 
 export default function GraphDetails({
     graph,
@@ -22,15 +22,15 @@ export default function GraphDetails({
         settings: {
             limitSettings: { limit, lastLimit },
         }
-    } = useContext(BrowserSettingsContext)
+    } = useContext(BrowserSettingsContext);
 
     // Check if any content should be displayed
-    const hasLimitWarning = graph.CurrentLimit && graph.Data.length >= graph.CurrentLimit
-    const hasLimitChangeWarning = graph.CurrentLimit && lastLimit !== limit
-    const hasGraphDetails = graph.Id && tabsValue === "Graph" && graphName !== undefined && nodesCount !== -1 && edgesCount !== -1
+    const hasLimitWarning = graph.CurrentLimit && graph.Data.length >= graph.CurrentLimit;
+    const hasLimitChangeWarning = graph.CurrentLimit && lastLimit !== limit;
+    const hasGraphDetails = graph.Id && tabsValue === "Graph" && graphName !== undefined && nodesCount !== -1 && edgesCount !== -1;
 
     if (!hasLimitWarning && !hasLimitChangeWarning && !hasGraphDetails) {
-        return null
+        return null;
     }
 
     return (
@@ -102,7 +102,7 @@ export default function GraphDetails({
                 </div >
             }
         </div>
-    )
+    );
 }
 
 GraphDetails.defaultProps = {
@@ -110,4 +110,4 @@ GraphDetails.defaultProps = {
     nodesCount: -1,
     edgesCount: -1,
     graphName: undefined,
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index 30151ea9..a7a2cd4a 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable no-param-reassign */
 
-'use client'
+'use client';
 
-import { useState, useEffect, Dispatch, SetStateAction, useContext, useCallback } from "react";
-import { GitGraph, ScrollText, Table } from "lucide-react"
+import { useEffect, Dispatch, SetStateAction, useContext, useCallback } from "react";
+import { GitGraph, ScrollText, Table } from "lucide-react";
 import { cn, GraphRef, Tab } from "@/lib/utils";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { GraphContext, ViewportContext } from "@/app/components/provider";
+import { GraphContext, ForceGraphContext } from "@/app/components/provider";
+import ForceGraph from "@/app/components/ForceGraph";
 import { Label, Link, Node, Relationship, HistoryQuery } from "../api/graph/model";
 import Button from "../components/ui/Button";
 import TableView from "./TableView";
@@ -15,19 +16,17 @@ import Controls from "./controls";
 import GraphDetails from "./GraphDetails";
 import Labels from "./labels";
 import MetadataView from "./MetadataView";
-import ForceGraph from "../components/ForceGraph";
 
 interface Props {
     selectedElements: (Node | Link)[]
     setSelectedElements: (elements?: (Node | Link)[]) => void
-    chartRef: GraphRef
+    canvasRef: GraphRef
     handleDeleteElement: () => Promise<void>
     setLabels: Dispatch<SetStateAction<Label[]>>
     setRelationships: Dispatch<SetStateAction<Relationship[]>>
     labels: Label[]
     relationships: Relationship[]
-    isLoading: boolean
-    handleCooldown: (ticks?: 0, isSetLoading?: boolean) => void
+    handleCooldown: (ticks?: 0) => void
     cooldownTicks: number | undefined
     fetchCount: () => Promise<void>
     historyQuery: HistoryQuery
@@ -41,13 +40,12 @@ interface Props {
 function GraphView({
     selectedElements,
     setSelectedElements,
-    chartRef,
+    canvasRef,
     handleDeleteElement,
     setLabels,
     setRelationships,
     labels,
     relationships,
-    isLoading,
     handleCooldown,
     cooldownTicks,
     fetchCount,
@@ -59,61 +57,101 @@ function GraphView({
     isAddNode
 }: Props) {
 
-    const { graph, graphName, currentTab, setCurrentTab } = useContext(GraphContext)
-    const { setData, data, isSaved, setViewport, viewport } = useContext(ViewportContext)
+    const { graph, graphName, currentTab, setCurrentTab, isLoading, setIsLoading } = useContext(GraphContext);
+    const { setData, data, graphData, setGraphData, setViewport, viewport } = useContext(ForceGraphContext);
 
-    const [parentHeight, setParentHeight] = useState<number>(0)
-    const [parentWidth, setParentWidth] = useState<number>(0)
-    const elementsLength = graph.getElements().length
+    const elementsLength = graph.getElements().length;
 
     useEffect(() => {
-        setRelationships([...graph.Relationships])
-        setLabels([...graph.Labels])
-    }, [graph, graph.Relationships, graph.Labels, setRelationships, setLabels])
+        setRelationships([...graph.Relationships]);
+        setLabels([...graph.Labels]);
+    }, [graph, graph.Relationships, graph.Labels, setRelationships, setLabels]);
 
     const isTabEnabled = useCallback((tab: Tab) => {
-        if (tab === "Table") return graph.Data.length !== 0
-        if (tab === "Metadata") return historyQuery.currentQuery && historyQuery.currentQuery.metadata.length > 0 && graph.Metadata.length > 0 && historyQuery.currentQuery.explain.length > 0
-        return true
-    }, [graph, historyQuery.currentQuery])
+        if (tab === "Table") return graph.Data.length !== 0;
+        if (tab === "Metadata") return historyQuery.currentQuery && historyQuery.currentQuery.metadata.length > 0 && graph.Metadata.length > 0 && historyQuery.currentQuery.explain.length > 0;
+        return true;
+    }, [graph, historyQuery.currentQuery]);
 
     useEffect(() => {
-        if (currentTab !== "Metadata" && isTabEnabled(currentTab)) return
+        if (currentTab !== "Metadata" && isTabEnabled(currentTab)) return;
 
-        let defaultChecked: Tab = "Graph"
-        if (elementsLength === 0 && graph.Data.length !== 0) defaultChecked = "Table"
+        let defaultChecked: Tab = "Graph";
+        if (elementsLength === 0 && graph.Data.length !== 0) defaultChecked = "Table";
 
         setCurrentTab(defaultChecked);
-    }, [graph, graph.Id, elementsLength, graph.Data.length, currentTab, setCurrentTab, isTabEnabled])
+    }, [graph, graph.Id, elementsLength, graph.Data.length, currentTab, setCurrentTab, isTabEnabled]);
 
     useEffect(() => {
-        setSelectedElements([])
-    }, [graph.Id, setSelectedElements])
+        setSelectedElements([]);
+    }, [graph.Id, setSelectedElements]);
 
     const onLabelClick = (label: Label) => {
-        label.show = !label.show
+        label.show = !label.show;
 
         label.elements.forEach((node) => {
-            if (!label.show && node.labels.some(c => graph.LabelsMap.get(c)?.show !== label.show)) return
-            node.visible = label.show
-        })
+            if (!label.show && node.labels.some(c => graph.LabelsMap.get(c)?.show !== label.show)) return;
+            node.visible = label.show;
+        });
 
-        graph.visibleLinks(label.show)
+        graph.visibleLinks(label.show);
 
-        graph.LabelsMap.set(label.name, label)
-        setData({ ...graph.Elements })
-    }
+        graph.LabelsMap.set(label.name, label);
+
+        const canvas = canvasRef.current;
+
+        if (canvas) {
+            const currentData = canvas.getGraphData();
+            currentData.nodes.forEach(canvasNode => {
+                const appNode = graph.NodesMap.get(canvasNode.id);
+
+                if (appNode) {
+                    canvasNode.visible = appNode.visible;
+                }
+            });
+            currentData.links.forEach(canvasLink => {
+                const appLink = graph.LinksMap.get(canvasLink.id);
+
+                if (appLink) {
+                    canvasLink.visible = appLink.visible;
+                }
+            });
+            canvas.setGraphData({ ...currentData });
+        }
+        
+        setLabels([...graph.Labels]);
+    };
 
     const onRelationshipClick = (relationship: Relationship) => {
-        relationship.show = !relationship.show
+        relationship.show = !relationship.show;
+
+        relationship.elements.filter((link) => graph.NodesMap.get(link.source)?.visible && graph.NodesMap.get(link.target)?.visible).forEach((link) => {
+            link.visible = relationship.show;
+        });
+
+        graph.RelationshipsMap.set(relationship.name, relationship);
 
-        relationship.elements.filter((link) => link.source.visible && link.target.visible).forEach((link) => {
-            link.visible = relationship.show
-        })
+        const canvas = canvasRef.current;
 
-        graph.RelationshipsMap.set(relationship.name, relationship)
-        setData({ ...graph.Elements })
-    }
+        if (canvas) {
+            const currentData = canvas.getGraphData();
+            currentData.nodes.forEach(canvasNode => {
+                const appNode = graph.NodesMap.get(canvasNode.id);
+                if (appNode) {
+                    canvasNode.visible = appNode.visible;
+                }
+            });
+            currentData.links.forEach(canvasLink => {
+                const appLink = graph.LinksMap.get(canvasLink.id);
+                if (appLink) {
+                    canvasLink.visible = appLink.visible;
+                }
+            });
+            canvas.setGraphData({ ...currentData });
+        }
+
+        setRelationships([...graph.Relationships]);
+    };
 
     return (
         <Tabs data-testid="graphView" value={currentTab} onValueChange={(value) => setCurrentTab(value as Tab)} className={cn("h-full w-full relative border border-border rounded-lg overflow-hidden", currentTab === "Table" && "flex flex-col-reverse")}>
@@ -129,8 +167,8 @@ function GraphView({
                                 selectedElements={selectedElements}
                                 setSelectedElements={setSelectedElements}
                                 handleDeleteElement={handleDeleteElement}
-                                chartRef={chartRef}
-                                setIsAddEdge={selectedElements.length === 2 && selectedElements.every(e => !!e.labels) ? setIsAddEdge : undefined}
+                                canvasRef={canvasRef}
+                                setIsAddEdge={selectedElements.length === 2 && selectedElements.every(e => "labels" in e) ? setIsAddEdge : undefined}
                                 setIsAddNode={setIsAddNode}
                                 isAddEdge={isAddEdge}
                                 isAddNode={isAddNode}
@@ -198,7 +236,7 @@ function GraphView({
                                 <div className="h-full w-px bg-border rounded-full" />
                                 <Controls
                                     graph={graph}
-                                    chartRef={chartRef}
+                                    canvasRef={canvasRef}
                                     disabled={graph.getElements().length === 0}
                                     handleCooldown={handleCooldown}
                                     cooldownTicks={cooldownTicks}
@@ -208,26 +246,23 @@ function GraphView({
                     </div>
                 </div>
             </div>
-            <TabsContent value="Graph" className="h-full w-full mt-0 overflow-hidden">
+            <TabsContent data-testid="graphView" value="Graph" className="h-full w-full mt-0 overflow-hidden">
                 <ForceGraph
                     graph={graph}
                     data={data}
                     setData={setData}
-                    chartRef={chartRef}
+                    graphData={graphData}
+                    setGraphData={setGraphData}
+                    canvasRef={canvasRef}
                     selectedElements={selectedElements}
                     setSelectedElements={setSelectedElements}
                     setRelationships={setRelationships}
-                    parentHeight={parentHeight}
-                    parentWidth={parentWidth}
-                    setParentHeight={setParentHeight}
-                    setParentWidth={setParentWidth}
                     isLoading={isLoading}
-                    handleCooldown={handleCooldown}
+                    setIsLoading={setIsLoading}
                     cooldownTicks={cooldownTicks}
-                    currentTab={currentTab}
+                    handleCooldown={handleCooldown}
                     viewport={viewport}
                     setViewport={setViewport}
-                    isSaved={isSaved}
                 />
             </TabsContent>
             <TabsContent value="Table" className="h-1 grow w-full mt-0 overflow-hidden">
@@ -240,18 +275,18 @@ function GraphView({
                             const newQuery = {
                                 ...prev.currentQuery,
                                 profile: profile || []
-                            }
+                            };
 
-                            const newQueries = prev.queries.map(q => q.text === newQuery.text ? newQuery : q)
+                            const newQueries = prev.queries.map(q => q.text === newQuery.text ? newQuery : q);
 
-                            localStorage.setItem("query history", JSON.stringify(newQueries))
+                            localStorage.setItem("query history", JSON.stringify(newQueries));
 
                             return {
                                 ...prev,
                                 currentQuery: newQuery,
                                 queries: newQueries
-                            }
-                        })
+                            };
+                        });
                     }}
                     graphName={graph.Id}
                     query={historyQuery.currentQuery}
@@ -259,7 +294,7 @@ function GraphView({
                 />
             </TabsContent>
         </Tabs>
-    )
+    );
 }
 
 GraphView.displayName = "GraphView";
diff --git a/app/graph/MetadataView.tsx b/app/graph/MetadataView.tsx
index f8a04f57..3549b966 100644
--- a/app/graph/MetadataView.tsx
+++ b/app/graph/MetadataView.tsx
@@ -11,11 +11,11 @@ import { Query } from "../api/graph/model";
 
 const renderValue = (v: any) => (
     <span className="SofiaSans">{v}</span>
-)
+);
 
 const renderLabel = (l: any) => (
     <span className="SofiaSans">{l[0]}:</span>
-)
+);
 
 export function Profile({ graphName, query, setQuery, fetchCount, background }: {
     graphName: string,
@@ -25,36 +25,36 @@ export function Profile({ graphName, query, setQuery, fetchCount, background }:
     background: string
 }) {
 
-    const { indicator, setIndicator } = useContext(IndicatorContext)
+    const { indicator, setIndicator } = useContext(IndicatorContext);
 
-    const { toast } = useToast()
-    const { theme } = useTheme()
-    const { foreground } = useMemo(() => getTheme(theme), [theme])
+    const { toast } = useToast();
+    const { theme } = useTheme();
+    const { foreground } = useMemo(() => getTheme(theme), [theme]);
 
-    const [profile, setProfile] = useState<string[]>(query.profile || [])
-    const [isLoading, setIsLoading] = useState(false)
+    const [profile, setProfile] = useState<string[]>(query.profile || []);
+    const [isLoading, setIsLoading] = useState(false);
 
 
     const handleProfile = async () => {
-        setIsLoading(true)
+        setIsLoading(true);
         try {
             const result = await securedFetch(`/api/graph/${graphName}/profile?query=${prepareArg(query.text)}`, {
                 method: "GET",
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
-            if (!result.ok) return
+            if (!result.ok) return;
 
-            const json = await result.json()
-            setProfile(json.result)
+            const json = await result.json();
+            setProfile(json.result);
             setQuery({
                 ...query,
                 profile: json.result
-            })
-            fetchCount()
+            });
+            fetchCount();
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <>
@@ -105,7 +105,7 @@ export function Profile({ graphName, query, setQuery, fetchCount, background }:
                 </div>
             }
         </>
-    )
+    );
 }
 
 export function Metadata({ query }: {
@@ -121,7 +121,7 @@ export function Metadata({ query }: {
                 ))}
             </ul>
         </>
-    )
+    );
 }
 
 export function Explain({ query, background }: {
@@ -129,8 +129,8 @@ export function Explain({ query, background }: {
     background: string
 }) {
 
-    const { theme } = useTheme()
-    const { foreground } = useMemo(() => getTheme(theme), [theme])
+    const { theme } = useTheme();
+    const { foreground } = useMemo(() => getTheme(theme), [theme]);
 
     return (
         <>
@@ -163,7 +163,7 @@ export function Explain({ query, background }: {
                 />
             </div>
         </>
-    )
+    );
 }
 
 
@@ -174,8 +174,8 @@ export default function MetadataView({ graphName, query, setQuery, fetchCount }:
     fetchCount: () => Promise<void>
 }) {
 
-    const { theme } = useTheme()
-    const { background } = getTheme(theme)
+    const { theme } = useTheme();
+    const { background } = getTheme(theme);
 
     return (
         <div className="h-full grid grid-cols-2 grid-rows-3 overflow-hidden">
@@ -189,5 +189,5 @@ export default function MetadataView({ graphName, query, setQuery, fetchCount }:
                 <Explain background={background} query={query} />
             </div>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/RemoveLabel.tsx b/app/graph/RemoveLabel.tsx
index 3ea863c5..85cecb9b 100644
--- a/app/graph/RemoveLabel.tsx
+++ b/app/graph/RemoveLabel.tsx
@@ -23,28 +23,28 @@ export default function RemoveLabel({
     </Button>,
     onRemoveLabel,
 }: Props) {
-    const { indicator } = useContext(IndicatorContext)
+    const { indicator } = useContext(IndicatorContext);
     
-    const [open, setOpen] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
+    const [open, setOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         if (!open) {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }, [open])
+    }, [open]);
 
     const handleRemoveLabel = async () => {
-        setIsLoading(true)
+        setIsLoading(true);
         try {
-            const success = await onRemoveLabel(selectedLabel)
+            const success = await onRemoveLabel(selectedLabel);
             if (success) {
-                setOpen(false)
+                setOpen(false);
             }
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <DialogComponent
@@ -72,9 +72,9 @@ export default function RemoveLabel({
                 />
             </div>
         </DialogComponent>
-    )
+    );
 }
 
 RemoveLabel.defaultProps = {
     trigger: undefined
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/graph/Selector.tsx b/app/graph/Selector.tsx
index dab20a63..ad907ebf 100644
--- a/app/graph/Selector.tsx
+++ b/app/graph/Selector.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-'use client'
+'use client';
 
 import { useEffect, useState, useContext, Dispatch, SetStateAction, useRef, useCallback, useMemo } from "react";
 import { cn, GraphRef, formatName, getTheme } from "@/lib/utils";
@@ -20,7 +20,7 @@ import { Explain, Metadata, Profile } from "./MetadataView";
 import PaginationList from "../components/PaginationList";
 import SelectGraph from "./selectGraph";
 
-type Tab = "text" | "metadata" | "explain" | "profile"
+type Tab = "text" | "metadata" | "explain" | "profile";
 
 interface BaseProps<T = "Schema" | "Graph"> {
     type: T
@@ -36,7 +36,7 @@ interface SchemaProps {
     selectedElements: (Node | Link)[];
     setSelectedElements: (el: (Node | Link)[]) => void;
     handleDeleteElement: () => Promise<void>;
-    chartRef: GraphRef;
+    canvasRef: GraphRef;
     setIsAddNode: (isAdd: boolean) => void;
     setIsAddEdge: (isAdd: boolean) => void;
     isAddNode: boolean;
@@ -58,7 +58,7 @@ interface GraphProps {
     selectedElements?: never;
     setSelectedElements?: never;
     handleDeleteElement?: never;
-    chartRef?: never;
+    canvasRef?: never;
     setIsAddNode?: never;
     setIsAddEdge?: never;
     isAddNode?: never;
@@ -71,7 +71,7 @@ type Props<T = "Graph" | "Schema"> =
         T extends "Graph"
         ? GraphProps
         : SchemaProps
-    )
+    );
 
 export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schema">({
     graph,
@@ -86,7 +86,7 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
     selectedElements,
     setSelectedElements,
     handleDeleteElement,
-    chartRef,
+    canvasRef,
     setIsAddNode,
     setIsAddEdge,
     isAddNode,
@@ -97,88 +97,88 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
     isQueryLoading
 }: Props<T>) {
 
-    const { indicator } = useContext(IndicatorContext)
-    const { tutorialOpen } = useContext(BrowserSettingsContext)
-    const { graphNames } = useContext(GraphContext)
+    const { indicator } = useContext(IndicatorContext);
+    const { tutorialOpen } = useContext(BrowserSettingsContext);
+    const { graphNames } = useContext(GraphContext);
 
-    const { theme } = useTheme()
-    const { secondary, currentTheme } = getTheme(theme)
+    const { theme } = useTheme();
+    const { secondary, currentTheme } = getTheme(theme);
 
-    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
-    const submitQuery = useRef<HTMLButtonElement>(null)
-    const searchQueryRef = useRef<HTMLInputElement>(null)
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const submitQuery = useRef<HTMLButtonElement>(null);
+    const searchQueryRef = useRef<HTMLInputElement>(null);
 
-    const [queriesOpen, setQueriesOpen] = useState(false)
-    const [filteredQueries, setFilteredQueries] = useState<Query[]>([])
-    const [activeFilters, setActiveFilters] = useState<string[]>([])
-    const [isLoading, setIsLoading] = useState(false)
-    const [maximize, setMaximize] = useState(false)
-    const [tab, setTab] = useState<Tab>("text")
-    const [deleteElements, setDeleteElements] = useState<number[]>([])
+    const [queriesOpen, setQueriesOpen] = useState(false);
+    const [filteredQueries, setFilteredQueries] = useState<Query[]>([]);
+    const [activeFilters, setActiveFilters] = useState<string[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [maximize, setMaximize] = useState(false);
+    const [tab, setTab] = useState<Tab>("text");
+    const [deleteElements, setDeleteElements] = useState<number[]>([]);
 
     const filters = useMemo(() => {
-        const queries = historyQuery?.queries ?? []
+        const queries = historyQuery?.queries ?? [];
         if (graphNames.length + 10 <= queries.length) {
-            return graphNames.filter(name => queries.some(query => query.graphName === name))
+            return graphNames.filter(name => queries.some(query => query.graphName === name));
         }
-        return Array.from(new Set(queries.map(query => query.graphName).filter(name => !!name)))
-    }, [graphNames, historyQuery?.queries])
-    const currentQuery = historyQuery?.counter === 0 ? historyQuery.currentQuery : historyQuery?.queries[historyQuery.counter - 1]
+        return Array.from(new Set(queries.map(query => query.graphName).filter(name => !!name)));
+    }, [graphNames, historyQuery?.queries]);
+    const currentQuery = historyQuery?.counter === 0 ? historyQuery.currentQuery : historyQuery?.queries[historyQuery.counter - 1];
 
     useEffect(() => {
-        if (!historyQuery || !setHistoryQuery) return
+        if (!historyQuery || !setHistoryQuery) return;
         setHistoryQuery(prev => ({
             ...prev,
             query: prev.counter ? prev.queries[prev.counter - 1].text : prev.currentQuery.text
-        }))
-    }, [historyQuery?.counter, setHistoryQuery])
+        }));
+    }, [historyQuery?.counter, setHistoryQuery]);
 
     const afterSearchCallback = useCallback((newFilteredList: Query[]) => {
-        if (!historyQuery || !setHistoryQuery) return
+        if (!historyQuery || !setHistoryQuery) return;
 
         // Get the currently selected query based on counter
         const selectedQuery = historyQuery.counter === 0 
             ? historyQuery.currentQuery 
-            : historyQuery.queries[historyQuery.counter - 1]
+            : historyQuery.queries[historyQuery.counter - 1];
 
         // If the selected query is not in the filtered list, reset counter to 0
         if (selectedQuery && newFilteredList.every(q => q.text !== selectedQuery.text)) {
             setHistoryQuery(prev => {
-                if (prev.counter === 0) return prev
+                if (prev.counter === 0) return prev;
                 return {
                     ...prev,
                     counter: 0
-                }
-            })
+                };
+            });
         }
-    }, [historyQuery, setHistoryQuery])
+    }, [historyQuery, setHistoryQuery]);
 
     const resetHistoryFilters = useCallback(() => {
         if (!historyQuery) {
-            setFilteredQueries([])
-            setActiveFilters([])
-            return
+            setFilteredQueries([]);
+            setActiveFilters([]);
+            return;
         }
 
         if (graphName && filters.some(name => name === graphName)) {
-            setActiveFilters([graphName])
+            setActiveFilters([graphName]);
             const scopedQueries = [
                 ...historyQuery.queries.filter(({ graphName: n }) => graphName === n)
-            ].reverse()
+            ].reverse();
 
-            setFilteredQueries(scopedQueries)
-            afterSearchCallback(scopedQueries)
-            return
+            setFilteredQueries(scopedQueries);
+            afterSearchCallback(scopedQueries);
+            return;
         }
 
-        const allQueries = [...historyQuery.queries].reverse()
-        setActiveFilters([])
-        setFilteredQueries(allQueries)
-        afterSearchCallback(allQueries)
-    }, [historyQuery, graphName, filters, afterSearchCallback])
+        const allQueries = [...historyQuery.queries].reverse();
+        setActiveFilters([]);
+        setFilteredQueries(allQueries);
+        afterSearchCallback(allQueries);
+    }, [historyQuery, graphName, filters, afterSearchCallback]);
 
     const handelSetFilteredQueries = useCallback((name?: string) => {
-        if (!historyQuery) return
+        if (!historyQuery) return;
 
         let newActiveFilters = activeFilters;
         if (name) {
@@ -195,20 +195,20 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
             ...historyQuery.queries.filter(({ graphName: n }) =>
                 newActiveFilters.some(f => f === n)
             )
-        ].reverse()
+        ].reverse();
 
-        setFilteredQueries(newFilteredQueries)
-        afterSearchCallback(newFilteredQueries)
+        setFilteredQueries(newFilteredQueries);
+        afterSearchCallback(newFilteredQueries);
     }, [activeFilters, afterSearchCallback, historyQuery]);
 
     useEffect(() => {
         if (!queriesOpen) {
-            setIsLoading(false)
-            setTab("text")
-            searchQueryRef.current?.blur()
+            setIsLoading(false);
+            setTab("text");
+            searchQueryRef.current?.blur();
         }
-        resetHistoryFilters()
-    }, [queriesOpen, resetHistoryFilters])
+        resetHistoryFilters();
+    }, [queriesOpen, resetHistoryFilters]);
 
     const focusEditorAtEnd = () => {
         if (editorRef.current) {
@@ -235,9 +235,9 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
     }, [currentQuery]);
 
     useEffect(() => {
-        if (!queriesOpen || !currentQuery || tab === "profile") return
+        if (!queriesOpen || !currentQuery || tab === "profile") return;
 
-        const currentValue = currentQuery?.[tab]
+        const currentValue = currentQuery?.[tab];
 
         if (!currentValue || currentValue.length === 0) {
             const fallbackTab = (Object.keys(currentQuery) as Tab[]).find(isTabEnabled);
@@ -246,20 +246,20 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                 setTab(fallbackTab);
 
                 if (fallbackTab === "text" && !editorRef.current?.hasTextFocus()) {
-                    focusEditorAtEnd()
+                    focusEditorAtEnd();
                 }
             }
         } else if (tab === "text" && !editorRef.current?.hasTextFocus()) {
-            focusEditorAtEnd()
+            focusEditorAtEnd();
         }
-    }, [currentQuery, setTab, queriesOpen, historyQuery?.query, tab, isTabEnabled])
+    }, [currentQuery, setTab, queriesOpen, historyQuery?.query, tab, isTabEnabled]);
 
     const handleOnChange = useCallback((name: string) => {
-        setGraphName(formatName(name))
-    }, [setGraphName])
+        setGraphName(formatName(name));
+    }, [setGraphName]);
 
     const handleEditorDidMount = (e: monaco.editor.IStandaloneCodeEditor) => {
-        editorRef.current = e
+        editorRef.current = e;
 
         // eslint-disable-next-line no-bitwise
         e.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
@@ -267,7 +267,7 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
         });
 
         e.addCommand(monaco.KeyCode.Escape, () => {
-            searchQueryRef.current?.focus()
+            searchQueryRef.current?.focus();
         });
 
         // eslint-disable-next-line no-bitwise
@@ -282,61 +282,61 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
             keybindings: [monaco.KeyCode.Enter],
             contextMenuOrder: 1.5,
             run: async () => {
-                submitQuery.current?.click()
+                submitQuery.current?.click();
             },
             precondition: '!suggestWidgetVisible',
         });
-    }
+    };
 
     const handleSubmit = async () => {
         try {
-            setIsLoading(true)
-            await runQuery!(historyQuery!.query.trim())
-            setQueriesOpen(false)
+            setIsLoading(true);
+            await runQuery!(historyQuery!.query.trim());
+            setQueriesOpen(false);
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     const handleDeleteQuery = useCallback(() => {
-        if (!historyQuery || !setHistoryQuery) return
+        if (!historyQuery || !setHistoryQuery) return;
 
-        const newQueries = historyQuery.queries.filter((_, idx) => !deleteElements.some((removeIndex) => idx === removeIndex))
+        const newQueries = historyQuery.queries.filter((_, idx) => !deleteElements.some((removeIndex) => idx === removeIndex));
 
-        if (newQueries.length === 0) localStorage.removeItem("query history")
-        else localStorage.setItem("query history", JSON.stringify(newQueries))
+        if (newQueries.length === 0) localStorage.removeItem("query history");
+        else localStorage.setItem("query history", JSON.stringify(newQueries));
 
         // Check if counter points to a deleted query (counter is 1-indexed, so counter - 1 is the index)
-        const isCounterDeleted = historyQuery.counter > 0 && deleteElements.includes(historyQuery.counter - 1)
+        const isCounterDeleted = historyQuery.counter > 0 && deleteElements.includes(historyQuery.counter - 1);
         
-        let nextCounter: number
+        let nextCounter: number;
         if (isCounterDeleted) {
             // Unselect if counter points to deleted query
-            nextCounter = 0
+            nextCounter = 0;
         } else if (historyQuery.counter > 0) {
             // Adjust counter to account for deleted queries before it
-            const deletedBeforeCount = deleteElements.filter(idx => idx < historyQuery.counter - 1).length
-            nextCounter = Math.max(1, historyQuery.counter - deletedBeforeCount)
+            const deletedBeforeCount = deleteElements.filter(idx => idx < historyQuery.counter - 1).length;
+            nextCounter = Math.max(1, historyQuery.counter - deletedBeforeCount);
             // Clamp to new array length
-            nextCounter = Math.min(nextCounter, newQueries.length)
+            nextCounter = Math.min(nextCounter, newQueries.length);
         } else {
             // Counter is 0 (currentQuery), keep it
-            nextCounter = 0
+            nextCounter = 0;
         }
 
-        const nextQuery = nextCounter ? newQueries[nextCounter - 1].text : historyQuery.currentQuery.text
+        const nextQuery = nextCounter ? newQueries[nextCounter - 1].text : historyQuery.currentQuery.text;
 
         setHistoryQuery(prev => ({
             ...prev,
             queries: newQueries,
             counter: nextCounter,
             query: nextQuery
-        }))
-        setDeleteElements([])
-        setFilteredQueries(current => current.filter(query => !deleteElements.some((removeIndex) => historyQuery.queries[removeIndex].timestamp !== query.timestamp)))
-    }, [historyQuery, setHistoryQuery, deleteElements])
+        }));
+        setDeleteElements([]);
+        setFilteredQueries(current => current.filter(query => !deleteElements.some((removeIndex) => historyQuery.queries[removeIndex].timestamp !== query.timestamp)));
+    }, [historyQuery, setHistoryQuery, deleteElements]);
 
-    const separator = <div className="h-[80%] w-0.5 bg-border rounded-full" />
+    const separator = <div className="h-[80%] w-0.5 bg-border rounded-full" />;
 
     return (
         <div className="z-20 w-full h-[40px] flex flex-row gap-4 items-center">
@@ -383,7 +383,7 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                                     tabIndex={-1}
                                     onEscapeKeyDown={(e) => {
                                         if (editorRef.current && editorRef.current.hasTextFocus()) {
-                                            e.preventDefault()
+                                            e.preventDefault();
                                         }
                                     }}
                                     onOpenChange={setQueriesOpen}
@@ -408,19 +408,19 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                                             dataTestId="queryHistory"
                                             list={filteredQueries}
                                             onClick={(counter, evt) => {
-                                                const index = historyQuery.queries.findIndex(q => q.text === counter)
+                                                const index = historyQuery.queries.findIndex(q => q.text === counter);
 
                                                 if (evt.type === "rightclick") {
                                                     if (evt.ctrlKey) {
-                                                        setDeleteElements(prev => prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index])
+                                                        setDeleteElements(prev => prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]);
                                                     } else {
-                                                        setDeleteElements(prev => prev.includes(index) ? [] : [index])
+                                                        setDeleteElements(prev => prev.includes(index) ? [] : [index]);
                                                     }
                                                 } else if (evt.type === "click") {
                                                     setHistoryQuery(prev => ({
                                                         ...prev,
-                                                        counter: index === historyQuery.counter ? 0 : index + 1
-                                                    }))
+                                                        counter: index + 1 === historyQuery.counter ? 0 : index + 1
+                                                    }));
                                                 }
                                             }}
                                             searchRef={searchQueryRef}
@@ -465,15 +465,15 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                                                     label="Delete All"
                                                     title="Remove all queries from history"
                                                     onClick={() => {
-                                                        localStorage.removeItem("query history")
+                                                        localStorage.removeItem("query history");
                                                         setHistoryQuery(prev => ({
                                                             ...prev,
                                                             queries: [],
                                                             counter: 0
-                                                        }))
-                                                        setFilteredQueries([])
-                                                        setActiveFilters([])
-                                                        setDeleteElements([])
+                                                        }));
+                                                        setFilteredQueries([]);
+                                                        setActiveFilters([]);
+                                                        setDeleteElements([]);
                                                     }}
                                                     disabled={historyQuery.queries.length === 0}
                                                 />
@@ -530,14 +530,14 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                                                                             ...prev.currentQuery,
                                                                             text: prev.counter ? prev.currentQuery.text : value || ""
                                                                         }
-                                                                    }
+                                                                    };
 
-                                                                    return newHistoryQuery
-                                                                })
+                                                                    return newHistoryQuery;
+                                                                });
                                                             }}
                                                             onMount={handleEditorDidMount}
                                                             beforeMount={(m) => {
-                                                                setTheme(m, "selector-theme", secondary, currentTheme === "dark")
+                                                                setTheme(m, "selector-theme", secondary, currentTheme === "dark");
                                                             }}
                                                         />
                                                     </>
@@ -556,16 +556,16 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                                                                     const newQuery = {
                                                                         ...prev.currentQuery,
                                                                         profile: profile || []
-                                                                    }
+                                                                    };
 
-                                                                    const newQueries = prev.queries.map(q => q.text === newQuery.text ? newQuery : q)
+                                                                    const newQueries = prev.queries.map(q => q.text === newQuery.text ? newQuery : q);
 
                                                                     return {
                                                                         ...prev,
                                                                         currentQuery: newQuery,
                                                                         queries: newQueries
-                                                                    }
-                                                                })
+                                                                    };
+                                                                });
                                                             }}
                                                             fetchCount={fetchCount}
                                                         />
@@ -607,7 +607,7 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                             </Button>
                         </div>
                     </>
-                    : selectedElements && handleDeleteElement && setSelectedElements && setIsAddNode && setIsAddEdge && chartRef && isCanvasLoading !== undefined && <div className="w-full h-full">
+                    : selectedElements && handleDeleteElement && setSelectedElements && setIsAddNode && setIsAddEdge && canvasRef && isCanvasLoading !== undefined && <div className="w-full h-full">
                         <Toolbar
                             graph={graph}
                             graphName={graphName}
@@ -616,8 +616,8 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                             setSelectedElements={setSelectedElements}
                             handleDeleteElement={handleDeleteElement}
                             setIsAddNode={setIsAddNode}
-                            setIsAddEdge={selectedElements.length === 2 && selectedElements.every(e => !!e.labels) ? setIsAddEdge : undefined}
-                            chartRef={chartRef}
+                            setIsAddEdge={selectedElements.length === 2 && selectedElements.every(e => "labels" in e) ? setIsAddEdge : undefined}
+                            canvasRef={canvasRef}
                             isLoadingSchema={!!isCanvasLoading}
                             isAddNode={isAddNode}
                             isAddEdge={isAddEdge}
@@ -625,5 +625,5 @@ export default function Selector<T extends "Graph" | "Schema" = "Graph" | "Schem
                     </div>
             }
         </div >
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/TableView.tsx b/app/graph/TableView.tsx
index dfbca364..638b42bd 100644
--- a/app/graph/TableView.tsx
+++ b/app/graph/TableView.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { useContext, useMemo, useEffect, useRef } from "react"
-import { Download } from "lucide-react"
+import { useContext, useMemo, useEffect, useRef } from "react";
+import { Download } from "lucide-react";
 import { Row } from "@/lib/utils";
-import TableComponent from "../components/TableComponent"
-import { GraphContext, TableViewContext } from "../components/provider"
-import Button from "../components/ui/Button"
+import TableComponent from "../components/TableComponent";
+import { GraphContext, TableViewContext } from "../components/provider";
+import Button from "../components/ui/Button";
 
 export default function TableView() {
-    const { graph } = useContext(GraphContext)
-    const { scrollPosition, setScrollPosition, search, setSearch, expand, setExpand, dataHash } = useContext(TableViewContext)
-    const previousDataHash = useRef<string>("")
+    const { graph } = useContext(GraphContext);
+    const { scrollPosition, setScrollPosition, search, setSearch, expand, setExpand, dataHash } = useContext(TableViewContext);
+    const previousDataHash = useRef<string>("");
 
     const tableData = useMemo(() => {
         if (graph.Data.length === 0) return undefined;
@@ -87,7 +87,7 @@ export default function TableView() {
         window.URL.revokeObjectURL(url);
     };
 
-    if (tableData === undefined) return undefined
+    if (tableData === undefined) return undefined;
 
     return (
         <TableComponent
@@ -114,5 +114,5 @@ export default function TableView() {
                 <Download size={20} />
             </Button>
         </TableComponent>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/addLabel.tsx b/app/graph/addLabel.tsx
index bb16f585..2b30d186 100644
--- a/app/graph/addLabel.tsx
+++ b/app/graph/addLabel.tsx
@@ -24,33 +24,33 @@ export default function AddLabel({
     onAddLabel
 }: Props) {
 
-    const { indicator } = useContext(IndicatorContext)
+    const { indicator } = useContext(IndicatorContext);
 
-    const [open, setOpen] = useState(false)
-    const [label, setLabel] = useState("")
-    const [isLoading, setIsLoading] = useState(false)
+    const [open, setOpen] = useState(false);
+    const [label, setLabel] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         if (!open) {
-            setLabel("")
-            setIsLoading(false)
+            setLabel("");
+            setIsLoading(false);
         }
-    }, [open])
+    }, [open]);
 
     const handleAddLabel = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
+        e.preventDefault();
 
-        setIsLoading(true)
+        setIsLoading(true);
         try {
-            const success = await onAddLabel(label)
+            const success = await onAddLabel(label);
             if (success) {
-                setLabel("")
-                setOpen(false)
+                setLabel("");
+                setOpen(false);
             }
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     return (
         <DialogComponent
@@ -88,10 +88,10 @@ export default function AddLabel({
                 </div>
             </form>
         </DialogComponent>
-    )
+    );
 }
 
 AddLabel.defaultProps = {
     type: "Label",
     trigger: undefined
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/graph/controls.tsx b/app/graph/controls.tsx
index 322389df..37aa9a24 100644
--- a/app/graph/controls.tsx
+++ b/app/graph/controls.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
 /* eslint-disable react/require-default-props */
 
 import { Pause, Play, Shrink, ZoomIn, ZoomOut } from "lucide-react";
 import { useContext } from "react";
-import { handleZoomToFit, GraphRef } from "@/lib/utils";
+import { GraphRef } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Switch } from "@/components/ui/switch";
 import Button from "../components/ui/Button";
@@ -14,31 +14,28 @@ import { Graph } from "../api/graph/model";
 interface Props {
     graph: Graph,
     disabled: boolean,
-    chartRef: GraphRef,
-    handleCooldown: (ticks?: 0, isSetLoading?: boolean) => void,
+    canvasRef: GraphRef,
+    handleCooldown: (ticks?: 0) => void,
     cooldownTicks: number | undefined
 }
 
 export default function Controls({
     graph,
     disabled,
-    chartRef,
+    canvasRef,
     handleCooldown,
     cooldownTicks,
 }: Props) {
 
-    const { indicator } = useContext(IndicatorContext)
+    const { indicator } = useContext(IndicatorContext);
 
     const handleZoomClick = (changeFactor: number) => {
-        const chart = chartRef.current
-        if (chart) {
-            chart.zoom(chart.zoom() * changeFactor)
-        }
-    }
+        canvasRef.current?.zoom(canvasRef.current.getZoom() * changeFactor);
+    };
 
     const handleCenterClick = () => {
-        handleZoomToFit(chartRef)
-    }
+        canvasRef.current?.zoomToFit();
+    };
 
 
     return (
@@ -54,7 +51,7 @@ export default function Controls({
                                 className="pointer-events-auto data-[state=unchecked]:bg-border"
                                 checked={cooldownTicks === undefined}
                                 onCheckedChange={() => {
-                                    handleCooldown(cooldownTicks === undefined ? 0 : undefined, false)
+                                    handleCooldown(cooldownTicks === undefined ? 0 : undefined);
                                 }}
                             />
                         </div>
@@ -95,5 +92,5 @@ export default function Controls({
                 <Shrink size={20} />
             </Button>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/graphInfo.tsx b/app/graph/graphInfo.tsx
index b7c14bfe..7f22252d 100644
--- a/app/graph/graphInfo.tsx
+++ b/app/graph/graphInfo.tsx
@@ -1,7 +1,8 @@
 import { useContext, useState } from "react";
 import { Loader2, X, Palette } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn, getContrastTextColor } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import { getContrastTextColor } from "@falkordb/canvas";
 import Button from "../components/ui/Button";
 import { BrowserSettingsContext, GraphContext, QueryLoadingContext } from "../components/provider";
 import { Label } from "../api/graph/model";
@@ -17,226 +18,228 @@ export default function GraphInfoPanel({ onClose }: { onClose: () => void }) {
     const [customizingLabel, setCustomizingLabel] = useState<Label | null>(null);
 
     const { graph, graphInfo: { Labels, Relationships, PropertyKeys, MemoryUsage }, nodesCount, edgesCount, runQuery, graphName } = useContext(GraphContext);
-    const { isQueryLoading } = useContext(QueryLoadingContext)
-    const { settings: { graphInfo: { showMemoryUsage } } } = useContext(BrowserSettingsContext)
+    const { isQueryLoading } = useContext(QueryLoadingContext);
+    const { settings: { graphInfo: { showMemoryUsage } } } = useContext(BrowserSettingsContext);
 
     return (
-        <div className={cn(`relative h-full w-full p-2 grid grid-rows-[max-content_max-content_minmax(0,max-content)_minmax(0,max-content)_minmax(0,max-content)] gap-8 border-r border-border`)}>
-            <Button
-                className="absolute top-2 right-2"
-                title="Close"
-                onClick={onClose}
-            >
-                <X className="h-4 w-4" />
-            </Button>
-            <h1 className="text-2xl">Graph Info</h1>
-            <div className="flex gap-2 items-center overflow-hidden">
-                <h2>Graph Name:</h2>
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <p className="truncate pointer-events-auto SofiaSans">{graphName}</p>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        {graphName}
-                    </TooltipContent>
-                </Tooltip>
-            </div>
+        <div aria-disabled={!nodesCount || !edgesCount} data-testid="graphInfoPanel" className={cn(`relative h-full w-full p-2 grid grid-rows-[max-content_max-content_minmax(0,max-content)_minmax(0,max-content)_minmax(0,max-content)] gap-8 border-r border-border`)}>
             {
-                showMemoryUsage &&
-                <div className="flex flex-col gap-2">
-                    <div className="flex gap-2 items-center">
-                        <h2>Memory Usage:</h2>
-                        {
-                            MemoryUsage.get("total_graph_sz_mb") !== undefined
-                                ? <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <p className="truncate pointer-events-auto SofiaSans">{MemoryUsage.get("total_graph_sz_mb") || "<1"} MB</p>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        {MemoryUsage.get("total_graph_sz_mb")} MB
-                                    </TooltipContent>
-                                </Tooltip>
-                                : <Loader2 className="animate-spin" />
-                        }
-                    </div>
-                </div>
-            }
-            <div className="flex flex-col gap-2 overflow-hidden">
-                <div className="flex gap-2 items-center">
-                    <h2>Nodes</h2>
-                    {
-                        nodesCount !== undefined ?
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <p
-                                        data-testid="nodesCount"
-                                        className="truncate pointer-events-auto SofiaSans"
-                                    >
-                                        ({nodesCount})
-                                    </p>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {nodesCount}
-                                </TooltipContent>
-                            </Tooltip>
-                            : <Loader2 data-testid="nodesCountLoader" className="animate-spin" />
-                    }
-                </div>
-                <ul className="flex flex-wrap gap-2 p-2 overflow-auto">
-                    <li className="max-w-full">
-                        <Button
-                            className="pt-1 h-6 w-6 rounded-full flex justify-center items-center bg-border text-white"
-                            data-testid="graphInfoAllNodes"
-                            label="*"
-                            title="All labels"
-                            onClick={() => runQuery(`MATCH (n) RETURN n`)}
-                            disabled={isQueryLoading}
-                        />
-                    </li>
-                    {Array.from(Labels.values()).filter(({ name }) => !!name).map((infoLabel) => {
-                        // Get the full Label object from the graph
-                        const label = graph.LabelsMap.get(infoLabel.name);
-                        if (!label) return null;
-                        
-                        const labelColor = label.style?.customColor || label.color;
-                        return (
-                            <li key={`${label.name}-${labelColor}`} className="max-w-full flex gap-1">
-                                <Button
-                                    style={{
-                                        backgroundColor: labelColor,
-                                        color: getContrastTextColor(labelColor)
-                                    }}
-                                    className="h-6 w-full p-2 rounded-full flex justify-center items-center SofiaSans"
-                                    data-testid={`graphInfo${label.name}Node`}
-                                    label={label.name}
-                                    onClick={() => runQuery(`MATCH (n:${label.name}) RETURN n`)}
-                                    disabled={isQueryLoading}
-                                />
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <Button
-                                            className="h-6 w-6 p-1 rounded-full flex justify-center items-center bg-muted hover:bg-muted/80"
-                                            data-testid={`customizeStyle${label.name}`}
-                                            title="Customize Style"
-                                            onClick={() => setCustomizingLabel(label)}
-                                        >
-                                            <Palette className="h-3 w-3" />
-                                        </Button>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        Customize Style
-                                    </TooltipContent>
-                                </Tooltip>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </div>
-            <div className="flex flex-col gap-2 overflow-hidden">
-                <div className="flex gap-2 items-center">
-                    <h2>Edges</h2>
-                    {
-                        edgesCount !== undefined ?
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <p
-                                        data-testid="edgesCount"
-                                        className="truncate pointer-events-auto SofiaSans"
-                                    >
-                                        ({edgesCount})
-                                    </p>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {edgesCount}
-                                </TooltipContent>
-                            </Tooltip>
-                            :
-                            <Loader2 data-testid="edgesCountLoader" className="animate-spin" />
-                    }
-                </div>
-                <ul className="flex flex-wrap gap-2 p-2 overflow-auto">
-                    <li className="max-w-full">
+                !customizingLabel ? (
+                    <>
                         <Button
-                            className="pt-1 h-6 w-6 rounded-full flex justify-center items-center bg-border text-white"
-                            data-testid="graphInfoAllEdges"
-                            label="*"
-                            title="All relationships"
-                            onClick={() => runQuery(`MATCH p=()-[]-() RETURN p`)}
-                            disabled={isQueryLoading}
-                        />
-                    </li>
-                    {Array.from(Relationships.values()).map((infoRelationship) => {
-                        // Get the full Relationship object from the graph
-                        const relationship = graph.RelationshipsMap.get(infoRelationship.name);
-                        if (!relationship) return null;
-                        
-                        const relationshipColor = relationship.color;
-                        const textColor = getContrastTextColor(relationshipColor);
-                        return (
-                            <li key={infoRelationship.name} className="max-w-full">
-                                <Button
-                                    style={{
-                                        backgroundColor: relationshipColor,
-                                        color: textColor
-                                    }}
-                                    className="h-6 w-full p-2 rounded-full flex justify-center items-center SofiaSans"
-                                    data-testid={`graphInfo${infoRelationship.name}Edge`}
-                                    label={infoRelationship.name}
-                                    onClick={() => runQuery(`MATCH p=()-[:${infoRelationship.name}]-() RETURN p`)}
-                                    disabled={isQueryLoading}
-                                />
-                            </li>
-                        );
-                    })}
-                </ul>
-            </div>
-            <div className="flex flex-col gap-2 overflow-hidden">
-                <div className="flex gap-2 items-center">
-                    <h2>Property Keys</h2>
-                    {
-                        PropertyKeys !== undefined ?
+                            className="absolute top-2 right-2"
+                            title="Close"
+                            onClick={onClose}
+                        >
+                            <X className="h-4 w-4" />
+                        </Button>
+                        <h1 className="text-2xl">Graph Info</h1>
+                        <div className="flex gap-2 items-center overflow-hidden">
+                            <h2>Graph Name:</h2>
                             <Tooltip>
                                 <TooltipTrigger asChild>
-                                    <p
-                                        data-testid="propertyKeysCount"
-                                        className="truncate pointer-events-auto SofiaSans"
-                                    >
-                                        ({PropertyKeys.length})
-                                    </p>
+                                    <p className="truncate pointer-events-auto SofiaSans">{graphName}</p>
                                 </TooltipTrigger>
                                 <TooltipContent>
-                                    {PropertyKeys.length}
+                                    {graphName}
                                 </TooltipContent>
                             </Tooltip>
-                            :
-                            <Loader2 className="animate-spin" />
-                    }
-                </div>
-                <ul className="flex flex-wrap gap-2 p-2 overflow-auto">
-                    {
-                        PropertyKeys && PropertyKeys.map((key) => (
-                            <li key={key} className="max-w-full">
-                                <Button
-                                    className="h-6 w-full p-2 bg-border flex justify-center items-center rounded-full text-white SofiaSans"
-                                    label={key}
-                                    onClick={() => runQuery(
-                                        `MATCH (e) WHERE e.${key} IS NOT NULL RETURN e\nUNION\nMATCH ()-[e]-() WHERE e.${key} IS NOT NULL RETURN e`
-                                    )}
-                                    disabled={isQueryLoading}
-                                />
-                            </li>
-                        ))}
-                </ul>
-            </div>
-            
-            {customizingLabel && (
-                <div className="absolute inset-0 bg-background z-20">
+                        </div>
+                        {
+                            showMemoryUsage &&
+                            <div className="flex flex-col gap-2">
+                                <div className="flex gap-2 items-center">
+                                    <h2>Memory Usage:</h2>
+                                    {
+                                        MemoryUsage.get("total_graph_sz_mb") !== undefined
+                                            ? <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <p className="truncate pointer-events-auto SofiaSans">{MemoryUsage.get("total_graph_sz_mb") || "<1"} MB</p>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    {MemoryUsage.get("total_graph_sz_mb")} MB
+                                                </TooltipContent>
+                                            </Tooltip>
+                                            : <Loader2 className="animate-spin" />
+                                    }
+                                </div>
+                            </div>
+                        }
+                        <div className="flex flex-col gap-2 overflow-hidden">
+                            <div className="flex gap-2 items-center">
+                                <h2>Nodes</h2>
+                                {
+                                    nodesCount !== undefined ?
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <p
+                                                    data-testid="nodesCount"
+                                                    className="truncate pointer-events-auto SofiaSans"
+                                                >
+                                                    ({nodesCount})
+                                                </p>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                {nodesCount}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                        : <Loader2 data-testid="nodesCountLoader" className="animate-spin" />
+                                }
+                            </div>
+                            <ul className="flex flex-wrap gap-2 p-2 overflow-auto">
+                                <li className="max-w-full">
+                                    <Button
+                                        className="pt-1 h-6 w-6 rounded-full flex justify-center items-center bg-border text-white"
+                                        data-testid="graphInfoAllNodes"
+                                        label="*"
+                                        title="All labels"
+                                        onClick={() => runQuery(`MATCH (n) RETURN n`)}
+                                        disabled={isQueryLoading}
+                                    />
+                                </li>
+                                {Array.from(Labels.values()).map((infoLabel) => {
+                                    // Get the full Label object from the graph
+                                    const label = graph.LabelsMap.get(infoLabel.name);
+
+                                    if (!label) return null;
+
+                                    const name = label.name || "Empty";
+                                    const labelColor = label.style.color;
+
+                                    return (
+                                        <li key={`${name}-${labelColor}`} className="max-w-full flex gap-1">
+                                            <Button
+                                                style={{
+                                                    backgroundColor: labelColor,
+                                                    color: getContrastTextColor(labelColor)
+                                                }}
+                                                className="h-6 w-full p-2 rounded-full flex justify-center items-center SofiaSans"
+                                                data-testid={`graphInfo${name}Node`}
+                                                label={name}
+                                                onClick={() => runQuery(`MATCH (n:${name}) RETURN n`)}
+                                                disabled={isQueryLoading}
+                                            />
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button
+                                                        className="h-6 w-6 p-1 rounded-full flex justify-center items-center bg-muted hover:bg-muted/80"
+                                                        data-testid={`customizeStyle${name}`}
+                                                        title="Customize Style"
+                                                        onClick={() => setCustomizingLabel(label)}
+                                                    >
+                                                        <Palette className="h-3 w-3" />
+                                                    </Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    Customize Style
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        </div>
+                        <div className="flex flex-col gap-2 overflow-hidden">
+                            <div className="flex gap-2 items-center">
+                                <h2>Edges</h2>
+                                {
+                                    edgesCount !== undefined ?
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <p
+                                                    data-testid="edgesCount"
+                                                    className="truncate pointer-events-auto SofiaSans"
+                                                >
+                                                    ({edgesCount})
+                                                </p>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                {edgesCount}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                        :
+                                        <Loader2 data-testid="edgesCountLoader" className="animate-spin" />
+                                }
+                            </div>
+                            <ul className="flex flex-wrap gap-2 p-2 overflow-auto">
+                                <li className="max-w-full">
+                                    <Button
+                                        className="pt-1 h-6 w-6 rounded-full flex justify-center items-center bg-border text-white"
+                                        data-testid="graphInfoAllEdges"
+                                        label="*"
+                                        title="All relationships"
+                                        onClick={() => runQuery(`MATCH p=()-[]-() RETURN p`)}
+                                        disabled={isQueryLoading}
+                                    />
+                                </li>
+                                {Array.from(Relationships.values()).map((infoRelationship) => {
+                                    const relationshipColor = infoRelationship.style.color;
+                                    const textColor = getContrastTextColor(relationshipColor);
+                                    
+                                    return (
+                                        <li key={infoRelationship.name} className="max-w-full">
+                                            <Button
+                                                style={{
+                                                    backgroundColor: relationshipColor,
+                                                    color: textColor
+                                                }}
+                                                className="h-6 w-full p-2 rounded-full flex justify-center items-center SofiaSans"
+                                                data-testid={`graphInfo${infoRelationship.name}Edge`}
+                                                label={infoRelationship.name}
+                                                onClick={() => runQuery(`MATCH p=()-[:${infoRelationship.name}]-() RETURN p`)}
+                                                disabled={isQueryLoading}
+                                            />
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        </div>
+                        <div className="flex flex-col gap-2 overflow-hidden">
+                            <div className="flex gap-2 items-center">
+                                <h2>Property Keys</h2>
+                                {
+                                    PropertyKeys !== undefined ?
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <p
+                                                    data-testid="propertyKeysCount"
+                                                    className="truncate pointer-events-auto SofiaSans"
+                                                >
+                                                    ({PropertyKeys.length})
+                                                </p>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                {PropertyKeys.length}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                        :
+                                        <Loader2 className="animate-spin" />
+                                }
+                            </div>
+                            <ul className="flex flex-wrap gap-2 p-2 overflow-auto">
+                                {
+                                    PropertyKeys && PropertyKeys.map((key) => (
+                                        <li key={key} className="max-w-full">
+                                            <Button
+                                                className="h-6 w-full p-2 bg-border flex justify-center items-center rounded-full text-white SofiaSans"
+                                                label={key}
+                                                onClick={() => runQuery(
+                                                    `MATCH (e) WHERE e.${key} IS NOT NULL RETURN e\nUNION\nMATCH ()-[e]-() WHERE e.${key} IS NOT NULL RETURN e`
+                                                )}
+                                                disabled={isQueryLoading}
+                                            />
+                                        </li>
+                                    ))}
+                            </ul>
+                        </div>
+                    </>
+                ) : (
                     <CustomizeStylePanel
                         label={customizingLabel}
                         onClose={() => setCustomizingLabel(null)}
                     />
-                </div>
-            )}
+                )
+            }
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/labels.tsx b/app/graph/labels.tsx
index fdb91be3..b0dc7888 100644
--- a/app/graph/labels.tsx
+++ b/app/graph/labels.tsx
@@ -12,7 +12,7 @@ interface Props<T extends Label | Relationship> {
 
 export default function Labels<T extends Label | Relationship>({ labels, onClick, label, type }: Props<T>) {
 
-    const listRef = useRef<HTMLUListElement>(null)
+    const listRef = useRef<HTMLUListElement>(null);
 
     return (
         <div className={cn("flex flex-col gap-2 max-w-1/2 bg-background rounded-lg p-1")}>
@@ -31,10 +31,10 @@ export default function Labels<T extends Label | Relationship>({ labels, onClick
                                     className={cn("w-full SofiaSans", l.show ? "opacity-100" : "opacity-50")}
                                     label={l.name}
                                     onClick={() => {
-                                        onClick(l)
+                                        onClick(l);
                                     }}
                                 >
-                                    <div style={{ backgroundColor: l.color }} className={cn("min-w-6 min-h-6 rounded-full")} />
+                                    <div style={{ backgroundColor: l.style.color }} className={cn("min-w-6 min-h-6 rounded-full")} />
                                 </Button>
                             </li>
                         ))
@@ -42,5 +42,5 @@ export default function Labels<T extends Label | Relationship>({ labels, onClick
                 </ul>
             </div>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/layout.tsx b/app/graph/layout.tsx
new file mode 100644
index 00000000..7ae5935e
--- /dev/null
+++ b/app/graph/layout.tsx
@@ -0,0 +1,9 @@
+export const dynamic = 'force-dynamic';
+
+export default function GraphLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children;
+}
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
index 874d8265..990e52b2 100644
--- a/app/graph/page.tsx
+++ b/app/graph/page.tsx
@@ -1,33 +1,38 @@
-'use client'
+'use client';
 
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { cn, getMemoryUsage, isTwoNodes, prepareArg, securedFetch } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
-import dynamic from "next/dynamic";
-import { ForceGraphMethods } from "react-force-graph-2d";
+import dynamicImport from "next/dynamic";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ImperativePanelHandle } from "react-resizable-panels";
 import { Label, Graph, Link, Node, Relationship, GraphInfo, Value, MemoryValue } from "../api/graph/model";
-import { BrowserSettingsContext, GraphContext, HistoryQueryContext, IndicatorContext, PanelContext, QueryLoadingContext, ViewportContext } from "../components/provider";
+import { BrowserSettingsContext, GraphContext, HistoryQueryContext, IndicatorContext, PanelContext, QueryLoadingContext, ForceGraphContext } from "../components/provider";
 import Spinning from "../components/ui/spinning";
 import Chat from "./Chat";
-import DataPanel from "./DataPanel";
-import CreateElementPanel from "./CreateElementPanel";
 
-const Selector = dynamic(() => import("./Selector"), {
+const DataPanel = dynamicImport(() => import("./DataPanel"), {
+    ssr: false,
+});
+
+const CreateElementPanel = dynamicImport(() => import("./CreateElementPanel"), {
+    ssr: false,
+});
+
+const Selector = dynamicImport(() => import("./Selector"), {
     ssr: false,
     loading: () => <div className="h-[50px] flex flex-row gap-4 items-center">
         <div className="w-[230px] h-full animate-pulse rounded-md border border-border bg-background" />
         <div className="w-1 grow h-full animate-pulse rounded-md border border-border bg-background" />
         <div className="w-[120px] h-full animate-pulse rounded-md border border-border bg-background" />
     </div>
-})
-const GraphView = dynamic(() => import("./GraphView"), {
+});
+const GraphView = dynamicImport(() => import("./GraphView"), {
     ssr: false,
     loading: () => <div className="h-full w-full bg-background flex justify-center items-center border border-border rounded-lg">
         <Spinning />
     </div>
-})
+});
 
 /**
  * Render the main Graph page UI that orchestrates the selector, graph view, and right-hand panels.
@@ -38,11 +43,11 @@ const GraphView = dynamic(() => import("./GraphView"), {
  * @returns The React element for the graph page UI.
  */
 export default function Page() {
-    const { historyQuery, setHistoryQuery } = useContext(HistoryQueryContext)
+    const { historyQuery, setHistoryQuery } = useContext(HistoryQueryContext);
     const { setIndicator } = useContext(IndicatorContext);
-    const { panel, setPanel } = useContext(PanelContext)
-    const { isQueryLoading, setIsQueryLoading } = useContext(QueryLoadingContext)
-    const { setData } = useContext(ViewportContext)
+    const { panel, setPanel } = useContext(PanelContext);
+    const { isQueryLoading, setIsQueryLoading } = useContext(QueryLoadingContext);
+    const { setData, canvasRef } = useContext(ForceGraphContext);
     const {
         graph,
         setGraph,
@@ -54,10 +59,9 @@ export default function Page() {
         setGraphNames,
         runQuery,
         fetchCount,
-        isLoading,
         handleCooldown,
         cooldownTicks,
-    } = useContext(GraphContext)
+    } = useContext(GraphContext);
     const {
         settings: {
             runDefaultQuerySettings: { runDefaultQuery },
@@ -65,54 +69,53 @@ export default function Page() {
             contentPersistenceSettings: { contentPersistence },
             graphInfo: { showMemoryUsage, refreshInterval }
         }
-    } = useContext(BrowserSettingsContext)
-    const { toast } = useToast()
+    } = useContext(BrowserSettingsContext);
+    const { toast } = useToast();
 
-    const chartRef = useRef<ForceGraphMethods<Node, Link>>()
-    const panelRef = useRef<ImperativePanelHandle>(null)
+    const panelRef = useRef<ImperativePanelHandle>(null);
 
-    const [selectedElements, setSelectedElements] = useState<(Node | Link)[]>([])
-    const [labels, setLabels] = useState<Label[]>([])
-    const [relationships, setRelationships] = useState<Relationship[]>([])
-    const [isCollapsed, setIsCollapsed] = useState(true)
-    const [isAddNode, setIsAddNode] = useState(false)
-    const [isAddEdge, setIsAddEdge] = useState(false)
+    const [selectedElements, setSelectedElements] = useState<(Node | Link)[]>([]);
+    const [labels, setLabels] = useState<Label[]>([]);
+    const [relationships, setRelationships] = useState<Relationship[]>([]);
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const [isAddNode, setIsAddNode] = useState(false);
+    const [isAddEdge, setIsAddEdge] = useState(false);
 
     const panelSize = useMemo(() => {
         switch (panel) {
             case "data":
             case "add":
-                return 30
+                return 30;
             case "chat":
-                return 40
+                return 40;
             default:
-                return 0
+                return 0;
         }
-    }, [panel])
+    }, [panel]);
 
     useEffect(() => {
-        const currentPanel = panelRef.current
+        const currentPanel = panelRef.current;
 
-        if (!currentPanel) return
+        if (!currentPanel) return;
 
-        if (panel) currentPanel.expand()
-        else currentPanel.collapse()
+        if (panel) currentPanel.expand();
+        else currentPanel.collapse();
 
-        if (panel !== "chat") return
+        if (panel !== "chat") return;
 
-        setSelectedElements([])
-        setIsAddNode(false)
-        setIsAddEdge(false)
-    }, [panel])
+        setSelectedElements([]);
+        setIsAddNode(false);
+        setIsAddEdge(false);
+    }, [panel]);
 
     const fetchInfo = useCallback(async (type: string) => {
-        if (!graphName) return []
+        if (!graphName) return [];
 
         const result = await securedFetch(`/api/graph/${graphName}/info?type=${type}`, {
             method: "GET",
         }, toast, setIndicator);
 
-        if (!result.ok) return []
+        if (!result.ok) return [];
 
         const json = await result.json();
 
@@ -120,83 +123,98 @@ export default function Page() {
     }, [graphName, setIndicator, toast]);
 
     useEffect(() => {
-        if (!graphName) return undefined
+        if (!graphName) return undefined;
 
         const handleSetInfo = () => Promise.all([
             fetchInfo("(label)"),
             fetchInfo("(relationship type)"),
             fetchInfo("(property key)"),
         ]).then(async ([newLabels, newRelationships, newPropertyKeys]) => {
-            const colorsArr = localStorage.getItem(graphName)
-            const memoryUsage = showMemoryUsage ? await getMemoryUsage(graphName, toast, setIndicator) : new Map<string, MemoryValue>()
-            const gi = GraphInfo.create(newPropertyKeys, newLabels, newRelationships, memoryUsage, colorsArr ? JSON.parse(colorsArr) : undefined)
-            setGraphInfo(gi)
-            fetchCount()
+            const memoryUsage = showMemoryUsage ? await getMemoryUsage(graphName, toast, setIndicator) : new Map<string, MemoryValue>();
+            const gi = GraphInfo.create(newPropertyKeys, newLabels, newRelationships, memoryUsage);
+            setGraphInfo(gi);
+            fetchCount();
         }).catch((error) => {
             toast({
                 title: "Error",
                 description: error.message || "Failed to fetch graph info",
                 variant: "destructive",
-            })
+            });
         });
 
-        handleSetInfo()
+        handleSetInfo();
 
-        const interval = setInterval(handleSetInfo, refreshInterval * 1000)
+        const interval = setInterval(handleSetInfo, refreshInterval * 1000);
 
         return () => {
-            clearInterval(interval)
-        }
-    }, [fetchCount, fetchInfo, graphName, refreshInterval, setGraphInfo, setIndicator, showMemoryUsage, toast])
+            clearInterval(interval);
+        };
+    }, [fetchCount, fetchInfo, graphName, refreshInterval, setGraphInfo, setIndicator, showMemoryUsage, toast]);
 
     useEffect(() => {
-        setRelationships([...graph.Relationships])
-        setLabels([...graph.Labels])
-    }, [graph, graph.Labels.length, graph.Relationships.length, graph.Labels, graph.Relationships])
+        setRelationships([...graph.Relationships]);
+        setLabels([...graph.Labels]);
+    }, [graph, graph.Labels.length, graph.Relationships.length, graph.Labels, graph.Relationships]);
 
     useEffect(() => {
-        if (!graphInfo) return
+        if (!graphInfo) return;
 
         if (contentPersistence) {
-            const content = localStorage.getItem("savedContent")
+            const content = localStorage.getItem("savedContent");
 
             if (content) {
-                const { graphName: name, query } = JSON.parse(content)
+                const { graphName: name, query } = JSON.parse(content);
 
                 if (!graph.Id && !graphName && graphNames.includes(name) && contentPersistence) {
-                    setGraphName(name)
-                    runQuery(query, name)
-                    return
+                    setGraphName(name);
+                    runQuery(query, name);
+                    return;
                 }
             }
         }
 
         if (graphName && graphName !== graph.Id) {
             if (runDefaultQuery) {
-                runQuery(defaultQuery)
-                return
+                runQuery(defaultQuery);
+                return;
             }
 
-            setGraph(Graph.empty(graphName))
-            fetchCount()
+            setGraph(Graph.empty(graphName));
+            fetchCount();
+        }
+
+        setIsQueryLoading(false);
+    }, [fetchCount, graph.Id, graphName, setGraph, runDefaultQuery, defaultQuery, contentPersistence, setGraphName, graphNames, setIsQueryLoading, graphInfo, runQuery]);
+
+    const handleSetSelectedElements = useCallback((el: (Node | Link)[] = []) => {
+        setSelectedElements(el);
+
+        if (el.length !== 0) {
+            setPanel("data");
+            setIsAddEdge(false);
+            setIsAddNode(false);
+        } else {
+            setPanel(undefined);
         }
+    }, [setPanel]);
 
-        setIsQueryLoading(false)
-    }, [fetchCount, graph.Id, graphName, setGraph, runDefaultQuery, defaultQuery, contentPersistence, setGraphName, graphNames, setIsQueryLoading, graphInfo, runQuery])
+    useEffect(() => {
+        handleSetSelectedElements();
+    }, [graph, handleSetSelectedElements]);
 
     const handleSetIsAdd = useCallback((mainSetter: (isAdd: boolean) => void, setter: (isAdd: boolean) => void) => (isAdd: boolean) => {
-        mainSetter(isAdd)
+        mainSetter(isAdd);
 
         if (isAdd) {
-            setter(false)
-            setPanel("add")
+            setter(false);
+            setPanel("add");
         } else {
-            setPanel(undefined)
+            setPanel(undefined);
         }
-    }, [setPanel])
+    }, [setPanel]);
 
     const handleCreateElement = useCallback(async (attributes: [string, Value][], label: string[]) => {
-        const fakeId = "-1"
+        const fakeId = "-1";
         const result = await securedFetch(`api/graph/${prepareArg(graphName)}/${fakeId}`, {
             method: "POST",
             body: JSON.stringify({
@@ -205,104 +223,88 @@ export default function Page() {
                 type: isAddNode,
                 selectedNodes: isAddNode ? undefined : selectedElements
             })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (result.ok) {
-            const json = await result.json()
+            const json = await result.json();
 
             if (isAddNode) {
-                const { labels: ls } = graph.extendNode(json.result.data[0].n, false, false, true)
-                setLabels(prev => [...prev, ...ls.filter(c => !prev.some(p => p.name === c)).map(c => graph.LabelsMap.get(c)!)])
-                handleSetIsAdd(setIsAddNode, setIsAddEdge)(false)
+                const { labels: ls } = graph.extendNode(json.result.data[0].n, false, false, true);
+                setLabels(prev => [...prev, ...ls.filter(c => !prev.some(p => p.name === c)).map(c => graph.LabelsMap.get(c)!)]);
+                handleSetIsAdd(setIsAddNode, setIsAddEdge)(false);
             } else {
-                const link = graph.extendEdge(json.result.data[0].e, false, false, true)
-                // Calculate curve for the newly created edge
-                link.curve = graph.calculateLinkCurve(link)
-                setRelationships(prev => [...prev.filter(p => p.name !== link.relationship), graph.RelationshipsMap.get(link.relationship)!])
-                handleSetIsAdd(setIsAddEdge, setIsAddNode)(false)
+                const link = graph.extendEdge(json.result.data[0].e, false, false, true);
+                setRelationships(prev => [...prev.filter(p => p.name !== link.relationship), graph.RelationshipsMap.get(link.relationship)!]);
+                handleSetIsAdd(setIsAddEdge, setIsAddNode)(false);
             }
 
-            fetchCount()
+            fetchCount();
 
-            setSelectedElements([])
+            setSelectedElements([]);
         }
 
-        setData({ ...graph.Elements })
-
-        handleCooldown()
+        setData({ ...graph.Elements });
 
-        return result.ok
-    }, [fetchCount, graph, graphName, handleCooldown, handleSetIsAdd, isAddNode, selectedElements, setData, setIndicator, toast])
-
-    const handleSetSelectedElements = useCallback((el: (Node | Link)[] = []) => {
-        setSelectedElements(el)
-
-        if (el.length !== 0) {
-            setPanel("data")
-            setIsAddEdge(false)
-            setIsAddNode(false)
-        } else {
-            setPanel(undefined)
-        }
-    }, [setPanel])
+        return result.ok;
+    }, [fetchCount, graph, graphName, handleSetIsAdd, isAddNode, selectedElements, setData, setIndicator, toast]);
 
     const handleDeleteElement = useCallback(async () => {
         await Promise.all(selectedElements.map(async (element) => {
-            const type = !element.source
+            const type = !("source" in element);
             const result = await securedFetch(`api/graph/${prepareArg(graph.Id)}/${prepareArg(element.id.toString())}`, {
                 method: "DELETE",
                 body: JSON.stringify({ type })
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
-            if (!result.ok) return
+            if (!result.ok) return;
 
             if (type) {
                 (element as Node).labels.forEach((label) => {
-                    const l = graph.LabelsMap.get(label)
+                    const l = graph.LabelsMap.get(label);
                     if (l) {
-                        l.elements = l.elements.filter((e) => e.id !== element.id)
+                        l.elements = l.elements.filter((e) => e.id !== element.id);
                         if (l.elements.length === 0) {
-                            const index = graph.Labels.findIndex(c => c.name === l.name)
+                            const index = graph.Labels.findIndex(c => c.name === l.name);
                             if (index !== -1) {
-                                graph.Labels.splice(index, 1)
-                                graph.LabelsMap.delete(l.name)
+                                graph.Labels.splice(index, 1);
+                                graph.LabelsMap.delete(l.name);
                             }
                         }
                     }
-                })
+                });
             } else {
-                const relation = graph.RelationshipsMap.get((element as Link).relationship)
+                const relation = graph.RelationshipsMap.get((element as Link).relationship);
                 if (relation) {
-                    relation.elements = relation.elements.filter((e) => e.id !== element.id)
+                    relation.elements = relation.elements.filter((e) => e.id !== element.id);
                     if (relation.elements.length === 0) {
-                        const index = graph.Relationships.findIndex(l => l.name === relation.name)
+                        const index = graph.Relationships.findIndex(l => l.name === relation.name);
                         if (index !== -1) {
-                            graph.Relationships.splice(index, 1)
-                            graph.RelationshipsMap.delete(relation.name)
+                            graph.Relationships.splice(index, 1);
+                            graph.RelationshipsMap.delete(relation.name);
                         }
                     }
                 }
             }
-        }))
+        }));
 
-        graph.removeElements(selectedElements)
+        graph.removeElements(selectedElements);
 
-        setRelationships(graph.removeLinks(selectedElements.map((element) => element.id)))
-        setData({ ...graph.Elements })
-        fetchCount()
-        setSelectedElements([])
+        setRelationships(graph.removeLinks(selectedElements.map((element) => element.id)));
+        setData({ ...graph.Elements });
+        fetchCount();
+        setSelectedElements([]);
 
-        if (panel === "data") handleSetSelectedElements()
-        else setSelectedElements([])
+        if (panel === "data") handleSetSelectedElements();
+        else setSelectedElements([]);
 
         toast({
             title: "Success",
             description: `${selectedElements.length > 1 ? "Elements" : "Element"} deleted`,
-        })
-    }, [selectedElements, graph, setData, fetchCount, panel, handleSetSelectedElements, toast, setIndicator])
+        });
+    }, [selectedElements, graph, setData, fetchCount, panel, handleSetSelectedElements, toast, setIndicator]);
 
     const getCurrentPanel = useCallback(() => {
-        if (!graphName) return undefined
+        if (!graphName) return undefined;
 
         switch (panel) {
             case "chat":
@@ -310,33 +312,34 @@ export default function Page() {
                     <Chat
                         onClose={() => setPanel(undefined)}
                     />
-                )
+                );
 
             case "data":
-                if (selectedElements.length === 0) return undefined
+                if (selectedElements.length === 0) return undefined;
 
                 return <DataPanel
                     object={selectedElements[selectedElements.length - 1]}
                     onClose={() => handleSetSelectedElements()}
                     setLabels={setLabels}
-                />
+                    canvasRef={canvasRef}
+                />;
 
             case "add": {
                 const onCloseHandler = () => {
-                    setPanel(undefined)
-                    setIsAddEdge(false)
-                    setIsAddNode(false)
-                }
+                    setPanel(undefined);
+                    setIsAddEdge(false);
+                    setIsAddNode(false);
+                };
 
                 if (isAddNode) {
                     return <CreateElementPanel
                         type
                         onCreate={handleCreateElement}
                         onClose={onCloseHandler}
-                    />
+                    />;
                 }
 
-                if (!isTwoNodes(selectedElements)) return undefined
+                if (!isTwoNodes(selectedElements)) return undefined;
 
                 return <CreateElementPanel
                     type={false}
@@ -344,13 +347,13 @@ export default function Page() {
                     onClose={onCloseHandler}
                     selectedNodes={selectedElements}
                     setSelectedNodes={setSelectedElements}
-                />
+                />;
             }
 
             default:
-                return undefined
+                return undefined;
         }
-    }, [graphName, panel, handleSetSelectedElements, setPanel, isAddNode, selectedElements, handleCreateElement])
+    }, [graphName, panel, handleSetSelectedElements, setPanel, isAddNode, selectedElements, handleCreateElement]);
 
     return (
         <div className="Page p-2 gap-2">
@@ -377,13 +380,12 @@ export default function Page() {
                     <GraphView
                         selectedElements={selectedElements}
                         setSelectedElements={handleSetSelectedElements}
-                        chartRef={chartRef}
+                        canvasRef={canvasRef}
                         handleDeleteElement={handleDeleteElement}
                         setLabels={setLabels}
                         setRelationships={setRelationships}
                         labels={labels}
                         relationships={relationships}
-                        isLoading={isLoading}
                         handleCooldown={handleCooldown}
                         cooldownTicks={cooldownTicks}
                         fetchCount={fetchCount}
@@ -406,15 +408,15 @@ export default function Page() {
                     defaultSize={panelSize}
                     minSize={30}
                     onCollapse={() => {
-                        setIsCollapsed(true)
+                        setIsCollapsed(true);
                     }}
                     onExpand={() => {
-                        setIsCollapsed(false)
+                        setIsCollapsed(false);
                     }}
                 >
                     {getCurrentPanel()}
                 </ResizablePanel>
             </ResizablePanelGroup>
         </div >
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/selectGraph.tsx b/app/graph/selectGraph.tsx
index 83d2ad60..0fecd8c5 100644
--- a/app/graph/selectGraph.tsx
+++ b/app/graph/selectGraph.tsx
@@ -43,7 +43,7 @@ interface Props {
  */
 export default function SelectGraph({ options, setOptions, selectedValue, setSelectedValue, type, setGraph }: Props) {
 
-    const { indicator, setIndicator } = useContext(IndicatorContext)
+    const { indicator, setIndicator } = useContext(IndicatorContext);
     const {
         settings: {
             contentPersistenceSettings: {
@@ -52,27 +52,27 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
             graphInfo: { showMemoryUsage }
         },
         tutorialOpen
-    } = useContext(BrowserSettingsContext)
+    } = useContext(BrowserSettingsContext);
 
-    const inputRef = useRef<HTMLInputElement>(null)
+    const inputRef = useRef<HTMLInputElement>(null);
 
-    const { toast } = useToast()
-    const { data: session } = useSession()
-    const sessionRole = session?.user.role
+    const { toast } = useToast();
+    const { data: session } = useSession();
+    const sessionRole = session?.user.role;
 
-    const [open, setOpen] = useState(false)
-    const [rows, setRows] = useState<Row[]>([])
-    const [openMenage, setOpenMenage] = useState(false)
-    const [openDuplicate, setOpenDuplicate] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
+    const [open, setOpen] = useState(false);
+    const [rows, setRows] = useState<Row[]>([]);
+    const [openMenage, setOpenMenage] = useState(false);
+    const [openDuplicate, setOpenDuplicate] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
-        setOpen(false)
-    }, [selectedValue])
+        setOpen(false);
+    }, [selectedValue]);
 
     const getOptions = useCallback(async () =>
         fetchOptions(type, toast, setIndicator, indicator, setSelectedValue, setOptions, contentPersistence)
-        , [type, toast, setIndicator, indicator, setSelectedValue, setOptions, contentPersistence])
+        , [type, toast, setIndicator, indicator, setSelectedValue, setOptions, contentPersistence]);
 
 
     const handleSetOption = useCallback(async (option: string, optionName: string) => {
@@ -85,13 +85,13 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
             },
             toast,
             setIndicator
-        )
+        );
 
         if (result.ok) {
-            const newOptions = options.map((opt) => (opt === optionName ? option : opt))
-            setOptions!(newOptions)
+            const newOptions = options.map((opt) => (opt === optionName ? option : opt));
+            setOptions!(newOptions);
 
-            if (setSelectedValue && optionName === selectedValue) setSelectedValue(option)
+            if (setSelectedValue && optionName === selectedValue) setSelectedValue(option);
 
             // Rebuild rows to reflect the updated option names
             setRows(
@@ -104,11 +104,11 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
                         })
                         : ({ checked: false, name: opt, cells: [{ value: opt, type: "readonly" }] })
                 )
-            )
+            );
         }
 
-        return result.ok
-    }, [type, toast, setIndicator, options, setOptions, setSelectedValue, selectedValue, setRows, sessionRole])
+        return result.ok;
+    }, [type, toast, setIndicator, options, setOptions, setSelectedValue, selectedValue, setRows, sessionRole]);
 
     const loadMemory = useCallback((opt: string) =>
         async () => {
@@ -116,7 +116,7 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
             const memoryValue = memoryMap.get("total_graph_sz_mb") || '<1';
 
             return `${memoryValue} MB`;
-        }, [toast, setIndicator])
+        }, [toast, setIndicator]);
 
     const loadNodesCount = useCallback((opt: string) =>
         async () => {
@@ -124,8 +124,8 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
 
             if (!result) return "";
 
-            return Number(result.nodes).toLocaleString()
-        }, [toast, setIndicator])
+            return Number(result.nodes).toLocaleString();
+        }, [toast, setIndicator]);
 
     const loadEdgesCount = useCallback((opt: string) =>
         async () => {
@@ -133,8 +133,8 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
 
             if (!result) return "";
 
-            return Number(result.edges).toLocaleString()
-        }, [toast, setIndicator])
+            return Number(result.edges).toLocaleString();
+        }, [toast, setIndicator]);
 
     const handleSetRows = useCallback((opts: string[]) => {
         setRows(opts.map((opt) => {
@@ -159,36 +159,36 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
                 cells
             };
         }));
-    }, [sessionRole, handleSetOption, loadMemory, loadNodesCount, loadEdgesCount, showMemoryUsage])
+    }, [sessionRole, handleSetOption, loadMemory, loadNodesCount, loadEdgesCount, showMemoryUsage]);
 
     useEffect(() => {
         if (!openMenage) {
-            setOpenDuplicate(false)
-            handleSetRows(options)
+            setOpenDuplicate(false);
+            handleSetRows(options);
         }
-    }, [openMenage, handleSetRows, options])
+    }, [openMenage, handleSetRows, options]);
 
     useEffect(() => {
-        handleSetRows(options)
-    }, [options, handleSetRows])
+        handleSetRows(options);
+    }, [options, handleSetRows]);
 
     const handleOpenChange = async (o: boolean) => {
-        setOpen(o)
+        setOpen(o);
 
-        if (!o || tutorialOpen) return
+        if (!o || tutorialOpen) return;
 
         try {
-            setIsLoading(true)
-            await getOptions()
+            setIsLoading(true);
+            await getOptions();
         } finally {
-            setIsLoading(false)
+            setIsLoading(false);
         }
-    }
+    };
 
     const handleClick = (value: string) => {
-        setSelectedValue(value)
-        setOpen(false)
-    }
+        setSelectedValue(value);
+        setOpen(false);
+    };
 
     return (
         <Dialog open={openMenage} onOpenChange={setOpenMenage}>
@@ -259,7 +259,7 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
                 data-testid="manageContent"
                 onEscapeKeyDown={(e) => {
                     if (inputRef.current === document.activeElement) {
-                        e.preventDefault()
+                        e.preventDefault();
                     }
                 }}
                 hideClose
@@ -312,8 +312,8 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
                                 open={openDuplicate}
                                 onOpenChange={setOpenDuplicate}
                                 onDuplicate={(duplicateName) => {
-                                    setSelectedValue(duplicateName)
-                                    setOptions!([...options, duplicateName])
+                                    setSelectedValue(duplicateName);
+                                    setOptions!([...options, duplicateName]);
                                 }}
                                 disabled={rows.filter(opt => opt.checked).length !== 1}
                             />
@@ -322,5 +322,5 @@ export default function SelectGraph({ options, setOptions, selectedValue, setSel
                 </TableComponent>
             </DialogContent>
         </Dialog>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/graph/toolbar.tsx b/app/graph/toolbar.tsx
index 8b1f068d..32861c25 100644
--- a/app/graph/toolbar.tsx
+++ b/app/graph/toolbar.tsx
@@ -1,13 +1,13 @@
-import { ArrowRight, Circle, Info } from "lucide-react"
-import { useCallback, useContext, useEffect, useRef, useState } from "react"
-import { cn, GraphRef, handleZoomToFit } from "@/lib/utils"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { useSession } from "next-auth/react"
-import { Graph, Link, Node } from "../api/graph/model"
-import Input from "../components/ui/Input"
-import Button from "../components/ui/Button"
-import DeleteElement from "./DeleteElement"
-import { GraphContext } from "../components/provider"
+import { ArrowRight, Circle, Info } from "lucide-react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { cn, GraphRef } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useSession } from "next-auth/react";
+import { Graph, Link, Node } from "../api/graph/model";
+import Input from "../components/ui/Input";
+import Button from "../components/ui/Button";
+import DeleteElement from "./DeleteElement";
+import { GraphContext } from "../components/provider";
 
 interface Props {
     graph: Graph
@@ -15,7 +15,7 @@ interface Props {
     selectedElements: (Node | Link)[]
     setSelectedElements: (elements: (Node | Link)[]) => void
     handleDeleteElement: () => Promise<void>
-    chartRef: GraphRef
+    canvasRef: GraphRef
     label: "Graph" | "Schema"
     setIsAddNode: (isAddNode: boolean) => void
     setIsAddEdge?: (isAddEdge: boolean) => void
@@ -24,9 +24,9 @@ interface Props {
     isLoadingSchema?: boolean
 }
 
-const ITEM_HEIGHT = 48
-const GAP = 8
-const ITEMS_PER_PAGE = 30
+const ITEM_HEIGHT = 48;
+const GAP = 8;
+const ITEMS_PER_PAGE = 30;
 
 export default function Toolbar({
     graph,
@@ -34,7 +34,7 @@ export default function Toolbar({
     selectedElements,
     setSelectedElements,
     handleDeleteElement,
-    chartRef,
+    canvasRef,
     label,
     setIsAddNode,
     setIsAddEdge,
@@ -43,79 +43,79 @@ export default function Toolbar({
     isLoadingSchema
 }: Props) {
 
-    const { isLoading: isLoadingGraph } = useContext(GraphContext)
+    const { isLoading: isLoadingGraph } = useContext(GraphContext);
 
-    const suggestionRef = useRef<HTMLDivElement>(null)
-    const { data: session } = useSession()
+    const suggestionRef = useRef<HTMLDivElement>(null);
+    const { data: session } = useSession();
 
-    const [suggestions, setSuggestions] = useState<(Node | Link)[]>([])
-    const [suggestionIndex, setSuggestionIndex] = useState(0)
-    const [searchElement, setSearchElement] = useState("")
-    const [deleteOpen, setDeleteOpen] = useState(false)
-    const [scrollTop, setScrollTop] = useState(0)
-    const [startIndex, setStartIndex] = useState(0)
-    const [topFakeItemHeight, setTopFakeItemHeight] = useState(0)
-    const [bottomFakeItemHeight, setBottomFakeItemHeight] = useState(0)
-    const [visibleSuggestions, setVisibleSuggestions] = useState<(Node | Link)[]>([])
+    const [suggestions, setSuggestions] = useState<(Node | Link)[]>([]);
+    const [suggestionIndex, setSuggestionIndex] = useState(0);
+    const [searchElement, setSearchElement] = useState("");
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [startIndex, setStartIndex] = useState(0);
+    const [topFakeItemHeight, setTopFakeItemHeight] = useState(0);
+    const [bottomFakeItemHeight, setBottomFakeItemHeight] = useState(0);
+    const [visibleSuggestions, setVisibleSuggestions] = useState<(Node | Link)[]>([]);
 
-    const isLoading = isLoadingSchema || isLoadingGraph
+    const isLoading = isLoadingSchema || isLoadingGraph;
 
     useEffect(() => {
-        const newStartIndex = Math.max(0, Math.floor((scrollTop - ((ITEM_HEIGHT + GAP) * ITEMS_PER_PAGE)) / (ITEM_HEIGHT + GAP)))
-        const newEndIndex = Math.min(suggestions.length, Math.floor((scrollTop + ((ITEM_HEIGHT + GAP) * (ITEMS_PER_PAGE * 2))) / (ITEM_HEIGHT + GAP)))
-        const bottomCount = suggestions.length - newEndIndex
-        const newTopFakeItemHeight = newStartIndex > 0 ? (newStartIndex * ITEM_HEIGHT) + ((newStartIndex - 1) * GAP) : 0
-        const newBottomFakeItemHeight = bottomCount > 0 ? (bottomCount * ITEM_HEIGHT) + ((bottomCount - 1) * GAP) : 0
-        const newVisibleSuggestions = suggestions.slice(newStartIndex, newEndIndex)
+        const newStartIndex = Math.max(0, Math.floor((scrollTop - ((ITEM_HEIGHT + GAP) * ITEMS_PER_PAGE)) / (ITEM_HEIGHT + GAP)));
+        const newEndIndex = Math.min(suggestions.length, Math.floor((scrollTop + ((ITEM_HEIGHT + GAP) * (ITEMS_PER_PAGE * 2))) / (ITEM_HEIGHT + GAP)));
+        const bottomCount = suggestions.length - newEndIndex;
+        const newTopFakeItemHeight = newStartIndex > 0 ? (newStartIndex * ITEM_HEIGHT) + ((newStartIndex - 1) * GAP) : 0;
+        const newBottomFakeItemHeight = bottomCount > 0 ? (bottomCount * ITEM_HEIGHT) + ((bottomCount - 1) * GAP) : 0;
+        const newVisibleSuggestions = suggestions.slice(newStartIndex, newEndIndex);
 
-        setStartIndex(newStartIndex)
-        setTopFakeItemHeight(newTopFakeItemHeight)
-        setBottomFakeItemHeight(newBottomFakeItemHeight)
-        setVisibleSuggestions(newVisibleSuggestions)
-    }, [scrollTop, suggestions])
+        setStartIndex(newStartIndex);
+        setTopFakeItemHeight(newTopFakeItemHeight);
+        setBottomFakeItemHeight(newBottomFakeItemHeight);
+        setVisibleSuggestions(newVisibleSuggestions);
+    }, [scrollTop, suggestions]);
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-        setScrollTop(e.currentTarget.scrollTop)
-    }
+        setScrollTop(e.currentTarget.scrollTop);
+    };
 
     const handleOnChange = useCallback(async () => {
-        setSuggestionIndex(0)
+        setSuggestionIndex(0);
 
         if (!searchElement) {
-            setSuggestions([])
-            return
+            setSuggestions([]);
+            return;
         }
 
         const elements = graph.getElements().filter(el =>
             Object.values(el.data).some(value => value.toString().toLowerCase().startsWith(searchElement.toLowerCase()))
             || el.id.toString().toLowerCase().includes(searchElement.toLowerCase())
-            || el.relationship && (el as Link).relationship.toLowerCase().includes(searchElement.toLowerCase())
-            || el.labels && (el as Node).labels.some(c => c.toLowerCase().includes(searchElement.toLowerCase()))
-        )
+            || ("relationship" in el && (el as Link).relationship.toLowerCase().includes(searchElement.toLowerCase()))
+            || ("labels" in el && (el as Node).labels.some(c => c.toLowerCase().includes(searchElement.toLowerCase())))
+        );
 
-        setSuggestions(elements)
-    }, [graph, searchElement])
+        setSuggestions(elements);
+    }, [graph, searchElement]);
 
     useEffect(() => {
-        const timeout = setTimeout(handleOnChange, 500)
+        const timeout = setTimeout(handleOnChange, 500);
 
         return () => {
-            clearTimeout(timeout)
-        }
-    }, [graph, handleOnChange, searchElement])
+            clearTimeout(timeout);
+        };
+    }, [graph, handleOnChange, searchElement]);
 
     const handleSearchElement = (element: Node | Link) => {
-        handleZoomToFit(chartRef, (node: Node) => element.labels ? element.id === node.id : node.id === element.source.id || node.id === element.target.id, 4)
-        setSelectedElements([element])
-        setSearchElement("")
-        setSuggestions([])
-    }
+        canvasRef.current?.zoomToFit(4, (node) => "labels" in element ? element.id === node.id : node.id === element.source || node.id === element.target);
+        setSelectedElements([element]);
+        setSearchElement("");
+        setSuggestions([]);
+    };
 
     const scrollToSuggestion = (index: number) => {
         if (suggestionRef.current) {
-            suggestionRef.current.scrollTo({ top: (ITEM_HEIGHT * index) + (index > 0 ? (index) * GAP : 0), behavior: "smooth" })
+            suggestionRef.current.scrollTo({ top: (ITEM_HEIGHT * index) + (index > 0 ? (index) * GAP : 0), behavior: "smooth" });
         }
-    }
+    };
 
     const stripSVG = encodeURIComponent(
         `<svg width="100%" height="${ITEM_HEIGHT + GAP}" xmlns="http://www.w3.org/2000/svg">
@@ -137,34 +137,34 @@ export default function Toolbar({
                         onChange={(e) => setSearchElement(e.target.value)}
                         onKeyDown={(e) => {
                             if (e.key === 'Escape') {
-                                e.preventDefault()
-                                setSearchElement("")
+                                e.preventDefault();
+                                setSearchElement("");
                             }
 
                             if (e.key === 'Enter' && suggestions[suggestionIndex]) {
-                                e.preventDefault()
-                                handleSearchElement(suggestions[suggestionIndex])
-                                setSearchElement("")
+                                e.preventDefault();
+                                handleSearchElement(suggestions[suggestionIndex]);
+                                setSearchElement("");
                             }
 
                             if (e.key === 'ArrowDown') {
-                                e.preventDefault()
-                                const index = suggestionIndex === suggestions.length - 1 ? 0 : suggestionIndex + 1
-                                setSuggestionIndex(index)
-                                scrollToSuggestion(index)
+                                e.preventDefault();
+                                const index = suggestionIndex === suggestions.length - 1 ? 0 : suggestionIndex + 1;
+                                setSuggestionIndex(index);
+                                scrollToSuggestion(index);
                             }
 
                             if (e.key === 'ArrowUp') {
-                                e.preventDefault()
-                                const index = suggestionIndex === 0 ? suggestions.length - 1 : suggestionIndex - 1
-                                setSuggestionIndex(index)
-                                scrollToSuggestion(index)
+                                e.preventDefault();
+                                const index = suggestionIndex === 0 ? suggestions.length - 1 : suggestionIndex - 1;
+                                setSuggestionIndex(index);
+                                scrollToSuggestion(index);
                             }
                         }}
                         onBlur={(e) => {
-                            if (suggestionRef.current?.contains(e.relatedTarget) || e.relatedTarget === suggestionRef.current) return
+                            if (suggestionRef.current?.contains(e.relatedTarget) || e.relatedTarget === suggestionRef.current) return;
 
-                            setSuggestions([])
+                            setSuggestions([]);
                         }
                         }
                         onFocus={() => handleOnChange()}
@@ -180,29 +180,29 @@ export default function Toolbar({
                             tabIndex={-1}
                             onKeyDown={(e) => {
                                 if (e.key === 'Escape') {
-                                    e.preventDefault()
-                                    setSearchElement("")
+                                    e.preventDefault();
+                                    setSearchElement("");
                                 }
 
                                 if (e.key === 'Enter' && suggestions[suggestionIndex]) {
-                                    e.preventDefault()
-                                    handleSearchElement(suggestions[suggestionIndex])
-                                    setSearchElement("")
+                                    e.preventDefault();
+                                    handleSearchElement(suggestions[suggestionIndex]);
+                                    setSearchElement("");
                                 }
 
                                 if (e.key === 'ArrowDown') {
-                                    e.preventDefault()
-                                    const index = suggestionIndex === suggestions.length - 1 ? 0 : suggestionIndex + 1
-                                    setSuggestionIndex(index)
-                                    scrollToSuggestion(index)
+                                    e.preventDefault();
+                                    const index = suggestionIndex === suggestions.length - 1 ? 0 : suggestionIndex + 1;
+                                    setSuggestionIndex(index);
+                                    scrollToSuggestion(index);
 
                                 }
 
                                 if (e.key === 'ArrowUp') {
-                                    e.preventDefault()
-                                    const index = suggestionIndex === 0 ? suggestions.length - 1 : suggestionIndex - 1
-                                    setSuggestionIndex(index)
-                                    scrollToSuggestion(index)
+                                    e.preventDefault();
+                                    const index = suggestionIndex === 0 ? suggestions.length - 1 : suggestionIndex - 1;
+                                    setSuggestionIndex(index);
+                                    scrollToSuggestion(index);
                                 }
                             }}
                         >
@@ -221,8 +221,8 @@ export default function Toolbar({
                             }
                             {
                                 visibleSuggestions.map((suggestion, index) => {
-                                    const actualIndex = index + startIndex
-                                    const type = !!suggestion.source
+                                    const actualIndex = index + startIndex;
+                                    const type = "source" in suggestion;
 
                                     return (
                                         <li key={actualIndex}>
@@ -240,7 +240,7 @@ export default function Toolbar({
                                                             className="rounded-full h-8 w-8 p-2 flex items-center justify-center"
                                                             style={{ backgroundColor: suggestion.color }}
                                                         >
-                                                            <p className="text-foreground text-sm font-bold truncate">{type ? suggestion.relationship : suggestion.labels[0]}</p>
+                                                            <p className="text-foreground text-sm font-bold truncate">{type ? (suggestion as Link).relationship : (suggestion as Node).labels[0]}</p>
                                                         </div>
                                                         <div
                                                             className={cn("w-1 grow text-center truncate", actualIndex === suggestionIndex ? "text-black" : "text-foreground")}
@@ -250,11 +250,11 @@ export default function Toolbar({
                                                     </Button>
                                                 </TooltipTrigger>
                                                 <TooltipContent>
-                                                    {type ? suggestion.relationship : suggestion.labels[0]}
+                                                    {type ? (suggestion as Link).relationship : (suggestion as Node).labels[0]}
                                                 </TooltipContent>
                                             </Tooltip>
                                         </li>
-                                    )
+                                    );
                                 })
                             }
                             {
@@ -329,10 +329,10 @@ export default function Toolbar({
                 }
             </div>
         </div>
-    )
+    );
 }
 
 Toolbar.defaultProps = {
     setIsAddEdge: undefined,
     isLoadingSchema: false,
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/app/login/LoginForm.tsx b/app/login/LoginForm.tsx
index dc85b338..ef4d67e4 100644
--- a/app/login/LoginForm.tsx
+++ b/app/login/LoginForm.tsx
@@ -20,7 +20,7 @@ type LoginMode = "manual" | "url";
 
 export default function LoginForm() {
   const { theme } = useTheme();
-  const { currentTheme } = getTheme(theme)
+  const { currentTheme } = getTheme(theme);
   const router = useRouter();
 
   const [mounted, setMounted] = useState(false);
@@ -46,12 +46,12 @@ export default function LoginForm() {
     [{
       value: falkordbUrl,
       onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFalkordbUrl(e.target.value)
+        setFalkordbUrl(e.target.value);
         setError(prev => ({
           ...prev,
           show: false
-        }))
-        return true
+        }));
+        return true;
       },
       label: "FalkorDB URL",
       type: "text",
@@ -61,12 +61,12 @@ export default function LoginForm() {
       {
         value: host,
         onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-          setHost(e.target.value)
+          setHost(e.target.value);
           setError(prev => ({
             ...prev,
             show: false
-          }))
-          return true
+          }));
+          return true;
         },
         label: "Host",
         type: "text",
@@ -76,12 +76,12 @@ export default function LoginForm() {
       {
         value: port,
         onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-          setPort(e.target.value)
+          setPort(e.target.value);
           setError(prev => ({
             ...prev,
             show: false
-          }))
-          return true
+          }));
+          return true;
         },
         label: "Port",
         type: "text",
@@ -91,12 +91,12 @@ export default function LoginForm() {
       {
         value: username,
         onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-          setUsername(e.target.value)
+          setUsername(e.target.value);
           setError(prev => ({
             ...prev,
             show: false
-          }))
-          return true
+          }));
+          return true;
         },
         label: "Username",
         placeholder: "Default",
@@ -107,12 +107,12 @@ export default function LoginForm() {
       {
         value: password,
         onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-          setPassword(e.target.value)
+          setPassword(e.target.value);
           setError(prev => ({
             ...prev,
             show: false
-          }))
-          return true
+          }));
+          return true;
         },
         label: "Password",
         placeholder: "Default",
@@ -123,8 +123,8 @@ export default function LoginForm() {
     ];
 
   useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     const hostParam = searchParams.get("host");
@@ -135,7 +135,7 @@ export default function LoginForm() {
     setHost(decodeURIComponent(hostParam || ""));
     setPort(decodeURIComponent(portParam || ""));
     setUsername(decodeURIComponent(usernameParam ?? ""));
-    setTLS(tls === "true")
+    setTLS(tls === "true");
   }, [searchParams]);
 
   const onSubmit = async (e: FormEvent) => {
@@ -180,7 +180,7 @@ export default function LoginForm() {
         setError(prev => ({
           ...prev,
           show: true
-        }))
+        }));
       } else {
         router.push("/graph");
       }
@@ -188,23 +188,23 @@ export default function LoginForm() {
   };
 
   const onFileDrop = (acceptedFiles: File[]) => {
-    const reader = new FileReader()
+    const reader = new FileReader();
 
     reader.onload = () => {
       setError(prev => ({
         ...prev,
         show: false
-      }))
-      setCA((reader.result as string).split(',').pop())
-      setUploadedFileName(acceptedFiles[0].name)
+      }));
+      setCA((reader.result as string).split(',').pop());
+      setUploadedFileName(acceptedFiles[0].name);
       setError(prev => ({
         ...prev,
         show: false
-      }))
-    }
+      }));
+    };
 
-    reader.readAsDataURL(acceptedFiles[0])
-  }
+    reader.readAsDataURL(acceptedFiles[0]);
+  };
 
   return (
     <div className="relative h-full w-full flex flex-col">
@@ -248,15 +248,15 @@ export default function LoginForm() {
                     className="w-6 h-6 rounded-full bg-background border-primary data-[state=checked]:bg-primary"
                     checked={TLS}
                     onCheckedChange={(checked) => {
-                      setTLS(checked as boolean)
+                      setTLS(checked as boolean);
                       setError(prev => ({
                         ...prev,
                         show: false
-                      }))
+                      }));
                       if (!checked) {
                         // Clear certificate when TLS is disabled
-                        setCA(undefined)
-                        setUploadedFileName("")
+                        setCA(undefined);
+                        setUploadedFileName("");
                       }
                     }}
                     data-testid="tls-checkbox"
@@ -302,9 +302,9 @@ export default function LoginForm() {
                               setError(prev => ({
                                 ...prev,
                                 show: false
-                              }))
-                              setCA(undefined)
-                              setUploadedFileName("")
+                              }));
+                              setCA(undefined);
+                              setUploadedFileName("");
                             }}
                             className="flex-shrink-0 p-1 text-muted hover:text-foreground hover:bg-primary/20 rounded transition-colors duration-200"
                             title="Remove certificate"
diff --git a/app/loginVerification.tsx b/app/loginVerification.tsx
index e52e55c5..40774add 100644
--- a/app/loginVerification.tsx
+++ b/app/loginVerification.tsx
@@ -1,31 +1,31 @@
-"use client"
+"use client";
 
-import { useSession } from "next-auth/react"
-import { usePathname, useRouter } from "next/navigation"
-import { useEffect } from "react"
+import { useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function LoginVerification({ children }: { children: React.ReactNode }) {
 
-    const router = useRouter()
-    const { status } = useSession()
-    const url = usePathname()
-    const { data } = useSession()
+    const router = useRouter();
+    const { status } = useSession();
+    const url = usePathname();
+    const { data } = useSession();
 
     useEffect(() => {
-        if (data?.user || data === undefined) return
-        localStorage.removeItem("savedContent")
-    }, [data])
+        if (data?.user || data === undefined) return;
+        localStorage.removeItem("savedContent");
+    }, [data]);
 
     useEffect(() => {
         // Skip authentication redirects for /docs routes
-        if (url.startsWith('/docs')) return
+        if (url.startsWith('/docs')) return;
         
         if ((url === "/login" || url === "/") && status === "authenticated") {
-            router.push("/graph")
+            router.push("/graph");
         } else if (status === "unauthenticated" && url !== "/login") {
-            router.push("/login")
+            router.push("/login");
         }
-    }, [status, url, router])
+    }, [status, url, router]);
 
-    return children
+    return children;
 }
\ No newline at end of file
diff --git a/app/monitor/MonitorView.tsx b/app/monitor/MonitorView.tsx
index e2336f6a..e5ae4ddf 100644
--- a/app/monitor/MonitorView.tsx
+++ b/app/monitor/MonitorView.tsx
@@ -1,6 +1,6 @@
 import { ECharts } from "echarts";
-import ReactEcharts, { EChartsInstance, EChartsOption } from "echarts-for-react"
-import { useEffect, useRef, useState } from "react"
+import ReactEcharts, { EChartsInstance, EChartsOption } from "echarts-for-react";
+import { useEffect, useRef, useState } from "react";
 
 interface Props {
   data: { name: string, series: string }[]
@@ -9,28 +9,28 @@ interface Props {
 
 export default function MonitorView({ data, time }: Props) {
 
-  const echartRef = useRef<EChartsInstance | null>(null)
-  const [timeArr] = useState<string[]>([])
-  const [chartReady, setChartReady] = useState<boolean>(false)
+  const echartRef = useRef<EChartsInstance | null>(null);
+  const [timeArr] = useState<string[]>([]);
+  const [chartReady, setChartReady] = useState<boolean>(false);
 
   useEffect(() => {
     if (chartReady && echartRef.current) {
-      const myChart: ECharts = echartRef.current
+      const myChart: ECharts = echartRef.current;
       data.forEach((item, index) => {
         myChart.appendData({
           seriesIndex: index,
           data: [item.series]
-        })
-      })
-      timeArr.push(time.toLocaleTimeString().split(" ")[0])
+        });
+      });
+      timeArr.push(time.toLocaleTimeString().split(" ")[0]);
       myChart.setOption({
         xAxis: {
           type: "category",
           data: timeArr
         }
-      })
+      });
     }
-  }, [data, time, timeArr, chartReady])
+  }, [data, time, timeArr, chartReady]);
 
   const options: EChartsOption = {
     tooltip: {
@@ -59,16 +59,16 @@ export default function MonitorView({ data, time }: Props) {
         opacity: 0
       }
     }))
-  }
+  };
 
   return (
     <ReactEcharts
       className="w-full h-full"
       option={options}
       onChartReady={(e) => {
-        echartRef.current = e
-        setChartReady(true)
+        echartRef.current = e;
+        setChartReady(true);
       }}
     />
-  )
+  );
 }
\ No newline at end of file
diff --git a/app/monitor/page.tsx b/app/monitor/_page.tsx
similarity index 58%
rename from app/monitor/page.tsx
rename to app/monitor/_page.tsx
index 0a99ffca..769be273 100644
--- a/app/monitor/page.tsx
+++ b/app/monitor/_page.tsx
@@ -1,17 +1,17 @@
-"use client"
+"use client";
 
-import useSWR from 'swr'
-import React, { useState, useContext } from 'react'
-import { securedFetch } from '@/lib/utils'
-import { useToast } from '@/components/ui/use-toast'
-import { IndicatorContext } from '@/app/components/provider'
-import MonitorView from './MonitorView'
+import useSWR from 'swr';
+import React, { useState, useContext } from 'react';
+import { securedFetch } from '@/lib/utils';
+import { useToast } from '@/components/ui/use-toast';
+import { IndicatorContext } from '@/app/components/provider';
+import MonitorView from './MonitorView';
 
 export default function Page() {
 
-    const [time, setTime] = useState<Date | null>(null)
-    const { toast } = useToast()
-    const { setIndicator } = useContext(IndicatorContext)
+    const [time, setTime] = useState<Date | null>(null);
+    const { toast } = useToast();
+    const { setIndicator } = useContext(IndicatorContext);
     
     const fetcher = (url: string) => securedFetch(url, {
         method: 'GET',
@@ -20,13 +20,13 @@ export default function Page() {
         }
     }, toast, setIndicator).then((result) => {
         if (result.ok) {
-            setTime(new Date())
-            return result.json()
+            setTime(new Date());
+            return result.json();
         }
-        return []
-    })
+        return [];
+    });
 
-    const { data } = useSWR(`/api/monitor/`, fetcher, { refreshInterval: 1000 })
+    const { data } = useSWR(`/api/monitor/`, fetcher, { refreshInterval: 1000 });
     return (
         <div className='flex flex-col items-center w-full h-full'>
             <h1 className='p-5 text-6xl'>Monitor</h1>
@@ -37,5 +37,5 @@ export default function Page() {
                 {(data?.graph && time) && <MonitorView data={data?.graph} time={time} />}
             </div>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 2abc7134..e5fbfd08 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,12 +9,12 @@ import { useEffect, useState } from "react";
 
 export default function Home() {
   const { theme } = useTheme();
-  const { currentTheme } = getTheme(theme)
+  const { currentTheme } = getTheme(theme);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   return (
     <div className="h-full w-full bg-background flex flex-col gap-4">
@@ -28,5 +28,5 @@ export default function Home() {
       </div>
       <div className="h-5 Gradient" />
     </div>
-  )
+  );
 }
diff --git a/app/providers.tsx b/app/providers.tsx
index 98548637..534f60ff 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -1,21 +1,27 @@
 "use client";
 
 import { SessionProvider, useSession } from "next-auth/react";
-import { ThemeProvider } from 'next-themes'
+import { ThemeProvider } from 'next-themes';
 import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn, fetchOptions, formatName, getDefaultQuery, getQueryWithLimit, getSSEGraphResult, Panel, prepareArg, securedFetch, Tab, getMemoryUsage, TextPriority } from "@/lib/utils";
+import dynamic from "next/dynamic";
+import { cn, fetchOptions, formatName, getDefaultQuery, getQueryWithLimit, getSSEGraphResult, Panel, prepareArg, securedFetch, Tab, getMemoryUsage, GraphRef } from "@/lib/utils";
+import { encryptValue, decryptValue, isCryptoAvailable, isEncrypted } from "@/lib/encryption";
 import { usePathname, useRouter } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ImperativePanelHandle } from "react-resizable-panels";
+import type { GraphData as CanvasData, ViewportState } from "@falkordb/canvas";
 import LoginVerification from "./loginVerification";
 import { Graph, GraphData, GraphInfo, HistoryQuery, MemoryValue, Query, Data } from "./api/graph/model";
 import Header from "./components/Header";
-import { GraphContext, HistoryQueryContext, IndicatorContext, PanelContext, QueryLoadingContext, BrowserSettingsContext, SchemaContext, ViewportContext, TableViewContext } from "./components/provider";
-import GraphInfoPanel from "./graph/graphInfo";
+import { GraphContext, HistoryQueryContext, IndicatorContext, PanelContext, QueryLoadingContext, BrowserSettingsContext, SchemaContext, ForceGraphContext, TableViewContext } from "./components/provider";
 import Tutorial from "./components/Tutorial";
 import { MEMORY_USAGE_VERSION_THRESHOLD } from "./utils";
 
+const GraphInfoPanel = dynamic(() => import("./graph/graphInfo"), {
+  ssr: false,
+});
+
 const defaultQueryHistory: HistoryQuery = {
   queries: [],
   query: "",
@@ -30,14 +36,7 @@ const defaultQueryHistory: HistoryQuery = {
     elementsCount: 0
   },
   counter: 0
-}
-
-const DISPLAY_TEXT_PRIORITY = [
-  { name: "name", ignore: false },
-  { name: "title", ignore: false },
-  { name: "label", ignore: false },
-  { name: "id", ignore: false }
-]
+};
 
 /**
  * Wraps application UI with authentication-aware providers, state, and layout for graph and schema views.
@@ -50,70 +49,69 @@ const DISPLAY_TEXT_PRIORITY = [
  * @returns A React element containing the provider hierarchy and application layout used by graph/schema pages.
  */
 function ProvidersWithSession({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname()
-  const { toast } = useToast()
-  const { status } = useSession()
-  const router = useRouter()
-
-  const panelRef = useRef<ImperativePanelHandle>(null)
-
-  const [historyQuery, setHistoryQuery] = useState<HistoryQuery>(defaultQueryHistory)
-  const [indicator, setIndicator] = useState<"online" | "offline">("online")
-  const [runDefaultQuery, setRunDefaultQuery] = useState(false)
-  const [schemaNames, setSchemaNames] = useState<string[]>([])
-  const [graphNames, setGraphNames] = useState<string[]>([])
-  const [schema, setSchema] = useState<Graph>(Graph.empty())
-  const [graph, setGraph] = useState<Graph>(Graph.empty())
-  const [data, setData] = useState<GraphData>({ ...graph.Elements })
-  const [graphInfo, setGraphInfo] = useState<GraphInfo>(GraphInfo.empty())
-  const [schemaName, setSchemaName] = useState<string>("")
-  const [graphName, setGraphName] = useState<string>("")
-  const [contentPersistence, setContentPersistence] = useState(false)
-  const [defaultQuery, setDefaultQuery] = useState("")
-  const [timeout, setTimeout] = useState(0)
-  const [limit, setLimit] = useState(0)
-  const [lastLimit, setLastLimit] = useState(0)
-  const [newLimit, setNewLimit] = useState(0)
-  const [newTimeout, setNewTimeout] = useState(0)
-  const [newRunDefaultQuery, setNewRunDefaultQuery] = useState(false)
-  const [newDefaultQuery, setNewDefaultQuery] = useState("")
-  const [newContentPersistence, setNewContentPersistence] = useState(false)
-  const [refreshInterval, setRefreshInterval] = useState(10)
-  const [newRefreshInterval, setNewRefreshInterval] = useState(0)
-  const [displayTextPriority, setDisplayTextPriority] = useState<TextPriority[]>([])
-  const [newDisplayTextPriority, setNewDisplayTextPriority] = useState<TextPriority[]>([])
-  const [currentTab, setCurrentTab] = useState<Tab>("Graph")
-  const [newSecretKey, setNewSecretKey] = useState("")
-  const [newModel, setNewModel] = useState("")
-  const [secretKey, setSecretKey] = useState("")
-  const [hasChanges, setHasChanges] = useState(false)
-  const [nodesCount, setNodesCount] = useState<number>()
-  const [edgesCount, setEdgesCount] = useState<number>()
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0)
-  const [panel, setPanel] = useState<Panel>()
-  const [isQueryLoading, setIsQueryLoading] = useState(false)
-  const [displayChat, setDisplayChat] = useState(false)
-  const [model, setModel] = useState("")
-  const [navigateToSettings, setNavigateToSettings] = useState(false)
-  const [tutorialOpen, setTutorialOpen] = useState(false)
-  const [isCollapsed, setIsCollapsed] = useState(true)
-  const [userGraphsBeforeTutorial, setUserGraphsBeforeTutorial] = useState<string[]>([])
-  const [userGraphBeforeTutorial, setUserGraphBeforeTutorial] = useState<string>("")
-  const [showMemoryUsage, setShowMemoryUsage] = useState(false)
+  const pathname = usePathname();
+  const { toast } = useToast();
+  const { status } = useSession();
+  const router = useRouter();
+
+  const panelRef = useRef<ImperativePanelHandle>(null);
+  const canvasRef = useRef<GraphRef["current"]>(null);
+
+  const [historyQuery, setHistoryQuery] = useState<HistoryQuery>(defaultQueryHistory);
+  const [indicator, setIndicator] = useState<"online" | "offline">("online");
+  const [runDefaultQuery, setRunDefaultQuery] = useState(false);
+  const [schemaNames, setSchemaNames] = useState<string[]>([]);
+  const [graphNames, setGraphNames] = useState<string[]>([]);
+  const [schema, setSchema] = useState<Graph>(Graph.empty());
+  const [graph, setGraph] = useState<Graph>(Graph.empty());
+  const [data, setData] = useState<GraphData>({ ...graph.Elements });
+  const [graphData, setGraphData] = useState<CanvasData>();
+  const [graphInfo, setGraphInfo] = useState<GraphInfo>(GraphInfo.empty());
+  const [schemaName, setSchemaName] = useState<string>("");
+  const [graphName, setGraphName] = useState<string>("");
+  const [contentPersistence, setContentPersistence] = useState(false);
+  const [defaultQuery, setDefaultQuery] = useState("");
+  const [timeout, setTimeout] = useState(0);
+  const [limit, setLimit] = useState(0);
+  const [lastLimit, setLastLimit] = useState(0);
+  const [newLimit, setNewLimit] = useState(0);
+  const [newTimeout, setNewTimeout] = useState(0);
+  const [newRunDefaultQuery, setNewRunDefaultQuery] = useState(false);
+  const [newDefaultQuery, setNewDefaultQuery] = useState("");
+  const [newContentPersistence, setNewContentPersistence] = useState(false);
+  const [refreshInterval, setRefreshInterval] = useState(10);
+  const [newRefreshInterval, setNewRefreshInterval] = useState(0);
+  const [currentTab, setCurrentTab] = useState<Tab>("Graph");
+  const [newSecretKey, setNewSecretKey] = useState("");
+  const [newModel, setNewModel] = useState("");
+  const [secretKey, setSecretKey] = useState("");
+  const [hasChanges, setHasChanges] = useState(false);
+  const [nodesCount, setNodesCount] = useState<number>();
+  const [edgesCount, setEdgesCount] = useState<number>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0);
+  const [panel, setPanel] = useState<Panel>();
+  const [isQueryLoading, setIsQueryLoading] = useState(false);
+  const [displayChat, setDisplayChat] = useState(false);
+  const [model, setModel] = useState("");
+  const [navigateToSettings, setNavigateToSettings] = useState(false);
+  const [tutorialOpen, setTutorialOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [userGraphsBeforeTutorial, setUserGraphsBeforeTutorial] = useState<string[]>([]);
+  const [userGraphBeforeTutorial, setUserGraphBeforeTutorial] = useState<string>("");
+  const [showMemoryUsage, setShowMemoryUsage] = useState(false);
 
   const replayTutorial = useCallback(() => {
-    router.push("/graph")
+    router.push("/graph");
     localStorage.removeItem("tutorial");
     setTutorialOpen(true);
   }, [router]);
-  const [viewport, setViewport] = useState<{ zoom: number; centerX: number; centerY: number }>({ centerX: 0, centerY: 0, zoom: 0 })
-  const [scrollPosition, setScrollPosition] = useState(0)
-  const [search, setSearch] = useState("")
-  const [expand, setExpand] = useState<Map<number, number>>(new Map())
+  const [viewport, setViewport] = useState<ViewportState>();
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [search, setSearch] = useState("");
+  const [expand, setExpand] = useState<Map<number, number>>(new Map());
 
-  const isSaved = data.nodes.some(n => n.x && n.y)
-  const dataHash = useMemo(() => JSON.stringify(graph.Data), [graph.Data])
+  const dataHash = useMemo(() => JSON.stringify(graph.Data), [graph.Data]);
 
   const browserSettingsContext = useMemo(() => ({
     newSettings: {
@@ -123,7 +121,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
       defaultQuerySettings: { newDefaultQuery, setNewDefaultQuery },
       contentPersistenceSettings: { newContentPersistence, setNewContentPersistence },
       chatSettings: { newSecretKey, setNewSecretKey, newModel, setNewModel },
-      graphInfo: { newRefreshInterval, setNewRefreshInterval, newDisplayTextPriority, setNewDisplayTextPriority }
+      graphInfo: { newRefreshInterval, setNewRefreshInterval }
     },
     settings: {
       limitSettings: { limit, setLimit, lastLimit, setLastLimit },
@@ -132,23 +130,52 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
       defaultQuerySettings: { defaultQuery, setDefaultQuery },
       contentPersistenceSettings: { contentPersistence, setContentPersistence },
       chatSettings: { secretKey, setSecretKey, model, setModel, displayChat, navigateToSettings },
-      graphInfo: { showMemoryUsage, refreshInterval, setRefreshInterval, displayTextPriority, setDisplayTextPriority }
+      graphInfo: { showMemoryUsage, refreshInterval, setRefreshInterval }
     },
     hasChanges,
     setHasChanges,
     replayTutorial,
     tutorialOpen,
-    saveSettings: () => {
+    saveSettings: async () => {
       // Save settings to local storage
       localStorage.setItem("runDefaultQuery", newRunDefaultQuery.toString());
       localStorage.setItem("contentPersistence", newContentPersistence.toString());
       localStorage.setItem("timeout", newTimeout.toString());
       localStorage.setItem("defaultQuery", newDefaultQuery);
       localStorage.setItem("limit", newLimit.toString());
-      localStorage.setItem("refreshInterval", newRefreshInterval.toString())
-      localStorage.setItem("displayTextPriority", JSON.stringify(newDisplayTextPriority))
-      localStorage.setItem("model", newModel)
-      localStorage.setItem("secretKey", newSecretKey)
+      localStorage.setItem("refreshInterval", newRefreshInterval.toString());
+      localStorage.setItem("model", newModel);
+
+      // Only encrypt and save secret key if it has changed
+      if (newSecretKey !== secretKey) {
+        if (newSecretKey) {
+          // Key has a value - encrypt it
+          if (!isCryptoAvailable()) {
+            toast({
+              title: "Error",
+              description: "Encryption not available in this browser. Cannot save secret key.",
+              variant: "destructive",
+            });
+            return; // Stop saving if crypto not available
+          }
+
+          try {
+            const encryptedKey = await encryptValue(newSecretKey);
+            localStorage.setItem("secretKey", encryptedKey);
+          } catch (error) {
+            console.error('Failed to encrypt secret key:', error);
+            toast({
+              title: "Error",
+              description: "Could not encrypt secret key. Please try again.",
+              variant: "destructive",
+            });
+            return; // Stop saving if encryption fails
+          }
+        } else {
+          // Key is empty - remove it from storage
+          localStorage.removeItem("secretKey");
+        }
+      }
 
       // Update context
       setContentPersistence(newContentPersistence);
@@ -159,8 +186,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
       setLastLimit(limit);
       setSecretKey(newSecretKey);
       setModel(newModel);
-      setRefreshInterval(newRefreshInterval)
-      setDisplayTextPriority(newDisplayTextPriority)
+      setRefreshInterval(newRefreshInterval);
       // Reset has changes
       setHasChanges(false);
 
@@ -171,47 +197,48 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
       });
     },
     resetSettings: () => {
-      setNewContentPersistence(contentPersistence)
-      setNewRunDefaultQuery(runDefaultQuery)
-      setNewDefaultQuery(defaultQuery)
-      setNewTimeout(timeout)
-      setNewLimit(limit)
-      setNewSecretKey(secretKey)
-      setNewModel(model)
-      setNewRefreshInterval(refreshInterval)
-      setNewDisplayTextPriority(displayTextPriority)
-      setHasChanges(false)
+      setNewContentPersistence(contentPersistence);
+      setNewRunDefaultQuery(runDefaultQuery);
+      setNewDefaultQuery(defaultQuery);
+      setNewTimeout(timeout);
+      setNewLimit(limit);
+      setNewSecretKey(secretKey);
+      setNewModel(model);
+      setNewRefreshInterval(refreshInterval);
+      setHasChanges(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [displayChat, navigateToSettings, contentPersistence, defaultQuery, hasChanges, lastLimit, limit, model, navigateToSettings, newContentPersistence, newDefaultQuery, newLimit, newModel, newRefreshInterval, newRunDefaultQuery, newSecretKey, newTimeout, refreshInterval, runDefaultQuery, secretKey, timeout, displayTextPriority, newDisplayTextPriority, replayTutorial, tutorialOpen, showMemoryUsage])
+  }), [displayChat, navigateToSettings, contentPersistence, defaultQuery, hasChanges, lastLimit, limit, model, newContentPersistence, newDefaultQuery, newLimit, newModel, newRefreshInterval, newRunDefaultQuery, newSecretKey, newTimeout, refreshInterval, runDefaultQuery, secretKey, timeout, replayTutorial, tutorialOpen, showMemoryUsage]);
 
   const historyQueryContext = useMemo(() => ({
     historyQuery,
     setHistoryQuery,
-  }), [historyQuery])
+  }), [historyQuery]);
 
   const indicatorContext = useMemo(() => ({
     indicator,
     setIndicator,
-  }), [indicator])
+  }), [indicator]);
 
   const panelContext = useMemo(() => ({
     panel,
     setPanel,
-  }), [panel])
+  }), [panel]);
 
   const queryLoadingContext = useMemo(() => ({
     isQueryLoading,
     setIsQueryLoading,
-  }), [isQueryLoading])
+  }), [isQueryLoading]);
 
-  const viewportContext = useMemo(() => ({
+  const forceGraphContext = useMemo(() => ({
+    canvasRef,
     viewport,
     setViewport,
     data,
     setData,
-    isSaved
-  }), [viewport, data, isSaved])
+    graphData,
+    setGraphData,
+  }), [canvasRef, viewport, data, graphData]);
 
   const tableViewContext = useMemo(() => ({
     scrollPosition,
@@ -221,7 +248,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
     expand,
     setExpand,
     dataHash
-  }), [scrollPosition, search, expand, dataHash])
+  }), [scrollPosition, search, expand, dataHash]);
 
   const schemaContext = useMemo(() => ({
     schema,
@@ -230,7 +257,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
     setSchemaName,
     schemaNames,
     setSchemaNames
-  }), [schema, schemaName, schemaNames])
+  }), [schema, schemaName, schemaNames]);
 
   const fetchCount = useCallback(async () => {
     if (!graphName) return;
@@ -248,32 +275,24 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
       setEdgesCount(edges);
       setNodesCount(nodes);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
   }, [graphName, toast]);
 
-  const handleCooldown = useCallback((ticks?: 0, isSetLoading: boolean = true) => {
+  const handleCooldown = useCallback((ticks?: 0) => {
     if (typeof window !== 'undefined') {
-      setCooldownTicks(ticks)
-
-      if (isSetLoading) {
-        setIsLoading(ticks !== 0)
-      }
-
-      const canvas = document.querySelector('.force-graph-container canvas');
-
-      if (canvas) canvas.setAttribute('data-engine-status', ticks === 0 ? 'stop' : 'running');
+      setCooldownTicks(ticks);
     }
   }, []);
 
   const fetchInfo = useCallback(async (type: string, name: string) => {
-    if (!graphName) return []
+    if (!graphName) return [];
 
     const result = await securedFetch(`/api/graph/${name}/info?type=${type}`, {
       method: "GET",
     }, toast, setIndicator);
 
-    if (!result.ok) return []
+    if (!result.ok) return [];
 
     const json = await result.json();
 
@@ -281,10 +300,10 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphName]);
 
-  const handelGetNewQueries = useCallback((newQuery: Query) => [...historyQuery.queries.filter(qu => qu.text !== newQuery.text), newQuery], [historyQuery.queries])
+  const handelGetNewQueries = useCallback((newQuery: Query) => [...historyQuery.queries.filter(qu => qu.text !== newQuery.text), newQuery], [historyQuery.queries]);
 
   const runQuery = useCallback(async (q: string, name?: string): Promise<void> => {
-    const n = name || graphName
+    const n = name || graphName;
     let newQuery: Query = {
       elementsCount: 0,
       explain: [],
@@ -294,49 +313,48 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
       status: "Failed",
       text: q,
       timestamp: new Date().getTime()
-    }
+    };
 
     try {
-      setIsQueryLoading(true)
+      setIsQueryLoading(true);
 
       setHistoryQuery(prev => ({
         ...prev,
         query: q,
-      }))
+      }));
 
-      const [query, existingLimit] = getQueryWithLimit(q, limit)
+      const [query, existingLimit] = getQueryWithLimit(q, limit);
       const url = `api/graph/${prepareArg(n)}?query=${prepareArg(query)}&timeout=${timeout}`;
       const result = await getSSEGraphResult(url, toast, setIndicator) as { data: Data; metadata: string[] };
 
-      if (!result) throw new Error()
+      if (!result) throw new Error();
 
       const graphI = await Promise.all([
         fetchInfo("(label)", n),
         fetchInfo("(relationship type)", n),
         fetchInfo("(property key)", n),
       ]).then(async ([newLabels, newRelationships, newPropertyKeys]) => {
-        const colorsArr = localStorage.getItem(n)
-        const memoryUsage = showMemoryUsage ? await getMemoryUsage(n, toast, setIndicator) : new Map<string, MemoryValue>()
-        const gi = GraphInfo.create(newPropertyKeys, newLabels, newRelationships, memoryUsage, colorsArr ? JSON.parse(colorsArr) : undefined)
-        setGraphInfo(gi)
-        return gi
+        const memoryUsage = showMemoryUsage ? await getMemoryUsage(n, toast, setIndicator) : new Map<string, MemoryValue>();
+        const gi = GraphInfo.create(newPropertyKeys, newLabels, newRelationships, memoryUsage);
+        setGraphInfo(gi);
+        return gi;
       }).catch((error) => {
         toast({
           title: "Error",
           description: error.message || "Failed to fetch graph info",
           variant: "destructive",
-        })
-        return undefined
+        });
+        return undefined;
       });
 
       const explain = await securedFetch(`api/graph/${prepareArg(n)}/explain?query=${prepareArg(query)}`, {
         method: "GET"
-      }, toast, setIndicator)
+      }, toast, setIndicator);
 
-      if (!explain.ok) throw new Error();
+      if (!explain.ok) throw new Error("Failed to fetch explain plan");
 
-      const explainJson = await explain.json()
-      const g = Graph.create(n, result, false, false, existingLimit, graphI)
+      const explainJson = await explain.json();
+      const g = Graph.create(n, result, false, false, existingLimit, graphI);
       newQuery = {
         text: q,
         metadata: result.metadata,
@@ -346,34 +364,28 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
         timestamp: new Date().getTime(),
         status: "Success",
         elementsCount: g.getElements().length
-      }
+      };
 
-      setGraph(g)
+      setGraph(g);
+      setData({ ...g.Elements });
       fetchCount();
-      setLastLimit(limit)
-
-      if (g.Elements.nodes.length > 0) {
-        handleCooldown();
-      }
+      setLastLimit(limit);
 
-      localStorage.setItem("savedContent", JSON.stringify({ graphName: n, query: q }))
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      window.graph = g
+      localStorage.setItem("savedContent", JSON.stringify({ graphName: n, query: q }));
     } catch (error) {
-      console.error(error)
+      console.error(error);
     } finally {
-      const newQueries = handelGetNewQueries(newQuery)
+      const newQueries = handelGetNewQueries(newQuery);
 
-      localStorage.setItem("query history", JSON.stringify(newQueries))
+      localStorage.setItem("query history", JSON.stringify(newQueries));
 
       setHistoryQuery(prev => ({
         ...prev,
         queries: newQueries,
         currentQuery: newQuery,
         counter: 0
-      }))
-      setIsQueryLoading(false)
+      }));
+      setIsQueryLoading(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphName, limit, timeout, fetchInfo, fetchCount, handleCooldown, handelGetNewQueries, showMemoryUsage]);
@@ -398,140 +410,175 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
     handleCooldown,
     cooldownTicks,
     isLoading,
-  }), [graph, graphInfo, graphName, graphNames, nodesCount, edgesCount, currentTab, runQuery, fetchCount, handleCooldown, cooldownTicks, isLoading])
+    setIsLoading
+  }), [graph, graphInfo, graphName, graphNames, nodesCount, edgesCount, currentTab, runQuery, fetchCount, handleCooldown, cooldownTicks, isLoading]);
 
   useEffect(() => {
-    if (status !== "authenticated") return
+    if (status !== "authenticated") return;
 
     (async () => {
       const result = await securedFetch("/api/auth/DBVersion", {
         method: "GET",
-      }, toast, setIndicator)
+      }, toast, setIndicator);
 
-      if (!result.ok) return
+      if (!result.ok) return;
 
-      const [name, version] = (await result.json()).result || ["", 0]
+      const [name, version] = (await result.json()).result || ["", 0];
 
-      setShowMemoryUsage(name === "graph" && version >= MEMORY_USAGE_VERSION_THRESHOLD)
-    })()
-  }, [status, toast])
+      setShowMemoryUsage(name === "graph" && version >= MEMORY_USAGE_VERSION_THRESHOLD);
+    })();
+  }, [status, toast]);
 
   useEffect(() => {
-    if (status !== "authenticated") return
-
-    setHistoryQuery({ ...defaultQueryHistory, queries: JSON.parse(localStorage.getItem("query history") || "[]") })
-    setTimeout(parseInt(localStorage.getItem("timeout") || "0", 10))
-    const l = parseInt(localStorage.getItem("limit") || "300", 10)
-    setLimit(l)
-    setLastLimit(l)
-    setDefaultQuery(getDefaultQuery(localStorage.getItem("defaultQuery") || undefined))
-    setRunDefaultQuery(localStorage.getItem("runDefaultQuery") !== "false")
-    setContentPersistence(localStorage.getItem("contentPersistence") !== "false");
-    setTutorialOpen(localStorage.getItem("tutorial") !== "false")
-    setRefreshInterval(Number(localStorage.getItem("refreshInterval") || 30))
-    setDisplayTextPriority(JSON.parse(localStorage.getItem("displayTextPriority") || JSON.stringify(DISPLAY_TEXT_PRIORITY)))
-    setSecretKey(localStorage.getItem("secretKey") || "")
-    setModel(localStorage.getItem("model") || "")
-  }, [status])
-
-  const panelSize = useMemo(() => isCollapsed ? 0 : 20, [isCollapsed])
+    if (status !== "authenticated") return;
+
+    (async () => {
+      setHistoryQuery({ ...defaultQueryHistory, queries: JSON.parse(localStorage.getItem("query history") || "[]") });
+      setTimeout(parseInt(localStorage.getItem("timeout") || "0", 10));
+      const l = parseInt(localStorage.getItem("limit") || "300", 10);
+      setLimit(l);
+      setLastLimit(l);
+      setDefaultQuery(getDefaultQuery(localStorage.getItem("defaultQuery") || undefined));
+      setRunDefaultQuery(localStorage.getItem("runDefaultQuery") !== "false");
+      setContentPersistence(localStorage.getItem("contentPersistence") !== "false");
+      setTutorialOpen(localStorage.getItem("tutorial") !== "false");
+      setRefreshInterval(Number(localStorage.getItem("refreshInterval") || 30));
+
+      // Decrypt secret key if encrypted, or migrate plain text keys to encrypted format
+      const storedSecretKey = localStorage.getItem("secretKey") || "";
+      if (storedSecretKey) {
+        if (!isCryptoAvailable()) {
+          console.error('Encryption not available - cannot decrypt secret key');
+          setSecretKey('');
+        } else if (isEncrypted(storedSecretKey)) {
+          // Already encrypted - decrypt it
+          const decryptedKey = await decryptValue(storedSecretKey);
+          if (decryptedKey) {
+            setSecretKey(decryptedKey);
+          } else {
+            // Decryption failed (corrupted or key mismatch) - clear it
+            console.warn('Clearing corrupted encrypted secret key');
+            setSecretKey('');
+            localStorage.removeItem("secretKey");
+          }
+        } else {
+          // Plain text key from existing users - migrate to encrypted
+          try {
+            setSecretKey(storedSecretKey);
+            const encryptedKey = await encryptValue(storedSecretKey);
+            if (encryptedKey) {
+              localStorage.setItem("secretKey", encryptedKey);
+            } else {
+              console.error('Failed to encrypt plain text key');
+            }
+          } catch (error) {
+            console.error('Failed to encrypt plain text key:', error);
+          }
+        }
+      }
+
+      setModel(localStorage.getItem("model") || "");
+    })();
+  }, [status]);
+
+  const panelSize = useMemo(() => isCollapsed ? 0 : 20, [isCollapsed]);
 
   useEffect(() => {
-    const currentPanel = panelRef.current
+    const currentPanel = panelRef.current;
 
-    if (!currentPanel) return
+    if (!currentPanel) return;
 
     if (pathname === "/graph" && graphName) {
-      if (currentPanel.isCollapsed()) currentPanel.expand()
-    } else if (currentPanel.isExpanded()) currentPanel.collapse()
-  }, [graphName, pathname])
+      if (currentPanel.isCollapsed()) currentPanel.expand();
+    } else if (currentPanel.isExpanded()) currentPanel.collapse();
+  }, [graphName, pathname]);
 
   useEffect(() => {
-    if (status !== "authenticated") return
+    if (status !== "authenticated") return;
 
     (async () => {
       const result = await securedFetch("/api/chat", {
         method: "GET",
-      }, toast, setIndicator)
+      }, toast, setIndicator);
 
       if (result.ok) {
-        const json = await result.json()
+        const json = await result.json();
 
-        if (json.message) return
+        if (json.message) return;
+
+        setDisplayChat(true);
 
-        setDisplayChat(true)
-        
         if (!json.model && json.error) {
-          setNavigateToSettings(true)
+          setNavigateToSettings(true);
         }
       }
-    })()
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status])
+  }, [status]);
 
   const checkStatus = useCallback(() => {
     securedFetch("/api/status", {
       method: "GET",
-    }, toast, setIndicator)
-  }, [toast])
+    }, toast, setIndicator);
+  }, [toast]);
 
   useEffect(() => {
-    let interval: NodeJS.Timeout | undefined
+    let interval: NodeJS.Timeout | undefined;
 
     if (status === "authenticated") {
-      checkStatus()
+      checkStatus();
 
-      interval = setInterval(checkStatus, 30000)
+      interval = setInterval(checkStatus, 30000);
     }
 
-    return () => clearInterval(interval)
-  }, [checkStatus, status])
+    return () => clearInterval(interval);
+  }, [checkStatus, status]);
 
   const handleOnSetGraphName = (newGraphName: string) => {
     if (pathname.includes("/schema")) {
-      setSchemaName(formatName(newGraphName))
-      setSchemaNames(prev => [...prev, formatName(newGraphName)])
+      setSchemaName(formatName(newGraphName));
+      setSchemaNames(prev => [...prev, formatName(newGraphName)]);
     } else {
-      setGraphName(formatName(newGraphName))
-      setGraphNames(prev => [...prev, formatName(newGraphName)])
+      setGraphName(formatName(newGraphName));
+      setGraphNames(prev => [...prev, formatName(newGraphName)]);
     }
-  }
+  };
 
   const handleFetchOptions = useCallback(async () => {
-    if (indicator === "offline") return
+    if (indicator === "offline") return;
 
     await Promise.all(([["Graph", setGraphNames, setGraphName],/* ["Schema", setSchemaNames, setSchemaName] */] as ["Graph" | "Schema", Dispatch<SetStateAction<string[]>>, Dispatch<SetStateAction<string>>][]).map(async ([type, setOptions, setName]) => {
-      await fetchOptions(type, toast, setIndicator, indicator, setName, setOptions, contentPersistence)
-    }))
-  }, [indicator, toast, contentPersistence])
+      await fetchOptions(type, toast, setIndicator, indicator, setName, setOptions, contentPersistence);
+    }));
+  }, [indicator, toast, contentPersistence]);
 
   useEffect(() => {
-    if (status !== "authenticated") return
+    if (status !== "authenticated") return;
 
-    handleFetchOptions()
-  }, [handleFetchOptions, status])
+    handleFetchOptions();
+  }, [handleFetchOptions, status]);
 
   const onExpand = () => {
-    const currentPanel = panelRef.current
+    const currentPanel = panelRef.current;
 
-    if (!currentPanel) return
+    if (!currentPanel) return;
 
     if (currentPanel.isCollapsed()) {
-      currentPanel.expand()
+      currentPanel.expand();
     } else {
-      currentPanel.collapse()
+      currentPanel.collapse();
     }
-  }
+  };
 
   const handleCloseTutorial = () => {
     setTutorialOpen(false);
   };
 
-  const handleLoadDemoGraphs = async () => {
+  const handleLoadDemoGraphs = useCallback(async () => {
     try {
       // Store current user graphs
       setUserGraphsBeforeTutorial(graphNames);
-      setUserGraphBeforeTutorial(graphName)
+      setUserGraphBeforeTutorial(graphName);
 
       // Create social demo graph
       const socialQuery = `
@@ -561,7 +608,9 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
 
       // Update graph list to only show demo graphs
       setGraphNames(["social-demo", "social-demo-test"]);
-      setGraphName("")
+      setGraphName("");
+      setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }));
+      setGraph(Graph.empty());
 
     } catch (error) {
       // eslint-disable-next-line no-console
@@ -572,9 +621,9 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
         variant: "destructive",
       });
     }
-  };
+  }, [graphName, graphNames, toast]);
 
-  const handleCleanupDemoGraphs = async () => {
+  const handleCleanupDemoGraphs = useCallback(async () => {
     try {
       // Delete demo graphs
       await securedFetch("/api/graph/social-demo", {
@@ -595,7 +644,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
 
     if (userGraphBeforeTutorial && userGraphsBeforeTutorial.includes(userGraphBeforeTutorial)) {
       setGraphName(userGraphBeforeTutorial);
-      setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }))
+      setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }));
     } else if (userGraphsBeforeTutorial.length === 1) {
       setGraphName(userGraphsBeforeTutorial[0]);
 
@@ -605,17 +654,17 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
           runQuery(defaultQuery, userGraphsBeforeTutorial[0]);
         }, 150);
       } else {
-        setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }))
+        setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }));
       }
     } else {
-      setGraphName("")
-      setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }))
+      setGraphName("");
+      setHistoryQuery(prev => ({ ...prev, query: "", currentQuery: defaultQueryHistory.currentQuery }));
     }
 
-    setGraphNames(userGraphsBeforeTutorial)
+    setGraphNames(userGraphsBeforeTutorial);
     setUserGraphsBeforeTutorial([]);
-    setUserGraphBeforeTutorial("")
-  };
+    setUserGraphBeforeTutorial("");
+  }, [runQuery, runDefaultQuery, defaultQuery, toast, userGraphBeforeTutorial, userGraphsBeforeTutorial]);
 
   return (
     <ThemeProvider attribute="class" storageKey="theme" defaultTheme="system" disableTransitionOnChange>
@@ -627,7 +676,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
                 <IndicatorContext.Provider value={indicatorContext}>
                   <PanelContext.Provider value={panelContext}>
                     <QueryLoadingContext.Provider value={queryLoadingContext}>
-                      <ViewportContext.Provider value={viewportContext}>
+                      <ForceGraphContext.Provider value={forceGraphContext}>
                         <TableViewContext.Provider value={tableViewContext}>
                           {
                             pathname === "/graph" &&
@@ -681,7 +730,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
                             </ResizablePanel>
                           </ResizablePanelGroup>
                         </TableViewContext.Provider>
-                      </ViewportContext.Provider>
+                      </ForceGraphContext.Provider>
                     </QueryLoadingContext.Provider>
                   </PanelContext.Provider>
                 </IndicatorContext.Provider>
@@ -691,7 +740,7 @@ function ProvidersWithSession({ children }: { children: React.ReactNode }) {
         </BrowserSettingsContext.Provider>
       </LoginVerification>
     </ThemeProvider >
-  )
+  );
 }
 
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {
diff --git a/app/schema/CreateElementPanel.tsx b/app/schema/CreateElementPanel.tsx
index 554695e5..3350e59b 100644
--- a/app/schema/CreateElementPanel.tsx
+++ b/app/schema/CreateElementPanel.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/no-array-index-key */
 
-'use client'
+'use client';
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useState } from "react";
@@ -30,64 +30,64 @@ type Props =
       selectedNodes: [Node, Node]
       setSelectedNodes: Dispatch<SetStateAction<(Node | Link)[]>>
       type: false
-    }
+    };
 
-export const ATTRIBUTES = ["Type", "Description", "Unique", "Required"]
+export const ATTRIBUTES = ["Type", "Description", "Unique", "Required"];
 
-export const OPTIONS = ["String", "Integer", "Float", "Geospatial", "Boolean"]
+export const OPTIONS = ["String", "Integer", "Float", "Geospatial", "Boolean"];
 
-export const getDefaultAttribute = (): [string, string[]] => ["", ["", "", "false", "false"]]
+export const getDefaultAttribute = (): [string, string[]] => ["", ["", "", "false", "false"]];
 
 export default function SchemaCreateElement(props: Props) {
-  const { onCreate, setIsAdd, type } = props
+  const { onCreate, setIsAdd, type } = props;
 
-  const selectedNodes = !type ? props.selectedNodes : undefined
-  const setSelectedNodes = !type ? props.setSelectedNodes : undefined
+  const selectedNodes = !type ? props.selectedNodes : undefined;
+  const setSelectedNodes = !type ? props.setSelectedNodes : undefined;
 
-  const { indicator } = useContext(IndicatorContext)
+  const { indicator } = useContext(IndicatorContext);
 
-  const { toast } = useToast()
+  const { toast } = useToast();
 
-  const [newAttribute, setNewAttribute] = useState<[string, string[]]>(getDefaultAttribute())
-  const [attribute, setAttribute] = useState<[string, string[]]>(getDefaultAttribute())
-  const [attributes, setAttributes] = useState<[string, string[]][]>([])
-  const [labelsHover, setLabelsHover] = useState<boolean>(false)
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [editable, setEditable] = useState<string>("")
-  const [label, setLabel] = useState<string[]>([])
-  const [hover, setHover] = useState<string>("")
+  const [newAttribute, setNewAttribute] = useState<[string, string[]]>(getDefaultAttribute());
+  const [attribute, setAttribute] = useState<[string, string[]]>(getDefaultAttribute());
+  const [attributes, setAttributes] = useState<[string, string[]][]>([]);
+  const [labelsHover, setLabelsHover] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [editable, setEditable] = useState<string>("");
+  const [label, setLabel] = useState<string[]>([]);
+  const [hover, setHover] = useState<string>("");
 
   const handleClose = useCallback((e: KeyboardEvent) => {
-    if (e.defaultPrevented) return
+    if (e.defaultPrevented) return;
 
     if (e.key === "Escape") {
-      setIsAdd(false)
+      setIsAdd(false);
     }
-  }, [setIsAdd])
+  }, [setIsAdd]);
 
   useEffect(() => {
-    window.addEventListener("keydown", handleClose)
+    window.addEventListener("keydown", handleClose);
     return () => {
-      window.removeEventListener("keydown", handleClose)
-    }
-  }, [handleClose])
+      window.removeEventListener("keydown", handleClose);
+    };
+  }, [handleClose]);
 
   const handleSetEditable = (att: [string, string[]] = getDefaultAttribute()) => {
-    setAttribute(att)
-    setEditable(att[0])
-  }
+    setAttribute(att);
+    setEditable(att[0]);
+  };
 
   const handleAddAttribute = (att?: [string, string[]]) => {
-    const newAtt = att || newAttribute
+    const newAtt = att || newAttribute;
 
     if (!newAtt[0] || newAtt[1].some((v) => !v)) {
       toast({
         title: "Error",
         description: "You must type a key, type and a description in order to add a new property",
         variant: "destructive"
-      })
+      });
 
-      return
+      return;
     }
 
     if (attributes.some(([key]) => key === newAtt[0])) {
@@ -95,30 +95,30 @@ export default function SchemaCreateElement(props: Props) {
         title: "Error",
         description: "An attribute with this key already exists",
         variant: "destructive"
-      })
-      return
+      });
+      return;
     }
 
-    setAttributes(prev => [...prev, newAtt])
-    setNewAttribute(getDefaultAttribute())
-  }
+    setAttributes(prev => [...prev, newAtt]);
+    setNewAttribute(getDefaultAttribute());
+  };
 
   const handleSetAttribute = (isUndo: boolean, att?: [string, string[]]) => {
-    const newAtt = att || attribute
+    const newAtt = att || attribute;
 
     if (!newAtt[0] || newAtt[1].some((v) => !v)) {
       toast({
         title: "Error",
         description: "You must type a key, type and a description in order to edit a property",
         variant: "destructive"
-      })
-      return
+      });
+      return;
     }
 
-    const oldAttribute = attributes.find(([k]) => k === newAtt[0])
-    setAttributes(prev => prev.map(([key, val]) => key === newAtt[0] ? newAtt : [key, val]))
-    setAttribute(getDefaultAttribute())
-    handleSetEditable()
+    const oldAttribute = attributes.find(([k]) => k === newAtt[0]);
+    setAttributes(prev => prev.map(([key, val]) => key === newAtt[0] ? newAtt : [key, val]));
+    setAttribute(getDefaultAttribute());
+    handleSetEditable();
     toast({
       title: "Success",
       description: "Attribute set",
@@ -128,36 +128,36 @@ export default function SchemaCreateElement(props: Props) {
           onClick={() => handleSetAttribute(false, oldAttribute)}
         />
         : undefined
-    })
-  }
+    });
+  };
 
   const handleSetKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.code === "Escape") {
-      e.preventDefault()
-      handleSetEditable()
-      return
+      e.preventDefault();
+      handleSetEditable();
+      return;
     }
 
-    if (e.key !== 'Enter') return
+    if (e.key !== 'Enter') return;
 
-    e.preventDefault()
+    e.preventDefault();
 
-    handleSetAttribute(true)
-  }
+    handleSetAttribute(true);
+  };
 
   const handleAddKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.code === "Escape") {
-      e.preventDefault()
-      setNewAttribute(getDefaultAttribute())
-      return
+      e.preventDefault();
+      setNewAttribute(getDefaultAttribute());
+      return;
     }
 
-    if (e.key !== 'Enter') return
+    if (e.key !== 'Enter') return;
 
-    e.preventDefault()
+    e.preventDefault();
 
-    handleAddAttribute()
-  }
+    handleAddAttribute();
+  };
 
   const handleOnCreate = async () => {
     if (!type) {
@@ -166,30 +166,30 @@ export default function SchemaCreateElement(props: Props) {
           title: "Error",
           description: "You must type a label",
           variant: "destructive"
-        })
+        });
 
-        return
+        return;
       }
     }
 
     try {
-      setIsLoading(true)
-      const ok = await onCreate(attributes, label)
+      setIsLoading(true);
+      const ok = await onCreate(attributes, label);
 
-      if (!ok) return
+      if (!ok) return;
 
-      setAttributes([])
-      setAttribute(getDefaultAttribute())
-      setLabel([])
+      setAttributes([]);
+      setAttribute(getDefaultAttribute());
+      setLabel([]);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   const handleRemoveLabel = async (removeLabel: string) => {
-    setLabel(prev => prev.filter(l => l !== removeLabel))
-    return true
-  }
+    setLabel(prev => prev.filter(l => l !== removeLabel));
+    return true;
+  };
 
   const handleAddLabel = async (newLabel: string) => {
     if (newLabel === "") {
@@ -197,8 +197,8 @@ export default function SchemaCreateElement(props: Props) {
         title: "Error",
         description: "Label cannot be empty",
         variant: "destructive"
-      })
-      return false
+      });
+      return false;
     }
 
     if (label.includes(newLabel)) {
@@ -206,26 +206,26 @@ export default function SchemaCreateElement(props: Props) {
         title: "Error",
         description: "Label already exists",
         variant: "destructive"
-      })
+      });
 
-      return false
+      return false;
     }
 
-    setLabel(prev => [...prev, newLabel])
-    return true
-  }
+    setLabel(prev => [...prev, newLabel]);
+    return true;
+  };
 
   const onClose = () => {
     if (setSelectedNodes) {
-      setSelectedNodes([])
+      setSelectedNodes([]);
     }
-    setAttributes([])
-    setLabel([])
-    setNewAttribute(getDefaultAttribute())
-    setAttribute(getDefaultAttribute())
-    setEditable("")
-    setIsAdd(false)
-  }
+    setAttributes([]);
+    setLabel([]);
+    setNewAttribute(getDefaultAttribute());
+    setAttribute(getDefaultAttribute());
+    setEditable("");
+    setIsAdd(false);
+  };
 
   return (
     <div className="DataPanel">
@@ -304,8 +304,8 @@ export default function SchemaCreateElement(props: Props) {
                 <TableRow
                   className="cursor-pointer p-2 h-20"
                   onClick={() => {
-                    if (editable === key) return
-                    handleSetEditable([key, [...val]])
+                    if (editable === key) return;
+                    handleSetEditable([key, [...val]]);
                   }}
                   // onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && handleSetEditable()}
                   onMouseEnter={() => setHover(key)}
@@ -323,9 +323,9 @@ export default function SchemaCreateElement(props: Props) {
                           <Combobox
                             options={OPTIONS}
                             setSelectedValue={(v) => setAttribute(prev => {
-                              const p: [string, string[]] = [...prev]
-                              p[1][0] = v
-                              return p
+                              const p: [string, string[]] = [...prev];
+                              p[1][0] = v;
+                              return p;
                             })}
                             inTable
                             label="Type"
@@ -337,9 +337,9 @@ export default function SchemaCreateElement(props: Props) {
                             className="w-full"
                             onKeyDown={handleSetKeyDown}
                             onChange={(e) => setAttribute(prev => {
-                              const p: [string, string[]] = [...prev]
-                              p[1][1] = e.target.value
-                              return p
+                              const p: [string, string[]] = [...prev];
+                              p[1][1] = e.target.value;
+                              return p;
                             })}
                             value={attribute[1][1]}
                           />
@@ -348,9 +348,9 @@ export default function SchemaCreateElement(props: Props) {
                           <Switch
                             className="data-[state=unchecked]:bg-border"
                             onCheckedChange={(checked) => setAttribute(prev => {
-                              const p: [string, string[]] = [...prev]
-                              p[1][2] = checked ? "true" : "false"
-                              return p
+                              const p: [string, string[]] = [...prev];
+                              p[1][2] = checked ? "true" : "false";
+                              return p;
                             })}
                             checked={attribute[1][2] === "true"}
                           />
@@ -359,9 +359,9 @@ export default function SchemaCreateElement(props: Props) {
                           <Switch
                             className="data-[state=unchecked]:bg-border"
                             onCheckedChange={(checked) => setAttribute(prev => {
-                              const p: [string, string[]] = [...prev]
-                              p[1][3] = checked ? "true" : "false"
-                              return p
+                              const p: [string, string[]] = [...prev];
+                              p[1][3] = checked ? "true" : "false";
+                              return p;
                             })}
                             checked={attribute[1][3] === "true"}
                           />
@@ -382,8 +382,8 @@ export default function SchemaCreateElement(props: Props) {
                               title="Save the attribute changes"
                               data-testid="saveAttributeButton"
                               onClick={(e) => {
-                                e.stopPropagation()
-                                handleSetAttribute(true)
+                                e.stopPropagation();
+                                handleSetAttribute(true);
                               }}
                             >
                               <Check size={20} />
@@ -394,8 +394,8 @@ export default function SchemaCreateElement(props: Props) {
                               title="Discard the attribute changes"
                               data-testid="cancelAttributeButton"
                               onClick={(e) => {
-                                e.stopPropagation()
-                                handleSetEditable()
+                                e.stopPropagation();
+                                handleSetEditable();
                               }}
                             >
                               <X size={20} />
@@ -408,9 +408,9 @@ export default function SchemaCreateElement(props: Props) {
                               label="Remove"
                               title="Delete this attribute"
                               onClick={(e) => {
-                                e.stopPropagation()
-                                const oldAttribute = attributes.find(([k]) => k === key)
-                                setAttributes(prev => prev.filter(([k]) => k !== key))
+                                e.stopPropagation();
+                                const oldAttribute = attributes.find(([k]) => k === key);
+                                setAttributes(prev => prev.filter(([k]) => k !== key));
                                 toast({
                                   title: "Success",
                                   description: "Attribute removed",
@@ -419,7 +419,7 @@ export default function SchemaCreateElement(props: Props) {
                                       showUndo
                                       onClick={() => handleAddAttribute(oldAttribute)}
                                     />
-                                })
+                                });
                               }}
                             >
                               <Trash2 size={20} />
@@ -429,8 +429,8 @@ export default function SchemaCreateElement(props: Props) {
                               label="Edit"
                               title="Modify this attribute"
                               onClick={(e) => {
-                                e.stopPropagation()
-                                handleSetEditable([key, [...val]])
+                                e.stopPropagation();
+                                handleSetEditable([key, [...val]]);
                               }}
                             >
                               <Pencil size={20} />
@@ -448,9 +448,9 @@ export default function SchemaCreateElement(props: Props) {
                   className="w-full"
                   onKeyDown={handleAddKeyDown}
                   onChange={(e) => setNewAttribute(prev => {
-                    const p: [string, string[]] = [...prev]
-                    p[0] = e.target.value
-                    return p
+                    const p: [string, string[]] = [...prev];
+                    p[0] = e.target.value;
+                    return p;
                   })}
                   value={newAttribute[0]}
                 />
@@ -459,9 +459,9 @@ export default function SchemaCreateElement(props: Props) {
                 <Combobox
                   options={OPTIONS}
                   setSelectedValue={(v) => setNewAttribute(prev => {
-                    const p: [string, string[]] = [...prev]
-                    p[1][0] = v
-                    return p
+                    const p: [string, string[]] = [...prev];
+                    p[1][0] = v;
+                    return p;
                   })}
                   inTable
                   label="Type"
@@ -473,9 +473,9 @@ export default function SchemaCreateElement(props: Props) {
                   className="w-full"
                   onKeyDown={handleAddKeyDown}
                   onChange={(e) => setNewAttribute(prev => {
-                    const p: [string, string[]] = [...prev]
-                    p[1][1] = e.target.value
-                    return p
+                    const p: [string, string[]] = [...prev];
+                    p[1][1] = e.target.value;
+                    return p;
                   })}
                   value={newAttribute[1][1]}
                 />
@@ -484,9 +484,9 @@ export default function SchemaCreateElement(props: Props) {
                 <Switch
                   className="data-[state=unchecked]:bg-border"
                   onCheckedChange={(checked) => setNewAttribute(prev => {
-                    const p: [string, string[]] = [...prev]
-                    p[1][2] = checked ? "true" : "false"
-                    return p
+                    const p: [string, string[]] = [...prev];
+                    p[1][2] = checked ? "true" : "false";
+                    return p;
                   })}
                   checked={newAttribute[1][2] === "true"}
                 />
@@ -495,9 +495,9 @@ export default function SchemaCreateElement(props: Props) {
                 <Switch
                   className="data-[state=unchecked]:bg-border"
                   onCheckedChange={(checked) => setNewAttribute(prev => {
-                    const p: [string, string[]] = [...prev]
-                    p[1][3] = checked ? "true" : "false"
-                    return p
+                    const p: [string, string[]] = [...prev];
+                    p[1][3] = checked ? "true" : "false";
+                    return p;
                   })}
                   checked={newAttribute[1][3] === "true"}
                 />
@@ -510,8 +510,8 @@ export default function SchemaCreateElement(props: Props) {
                     title="Add a new attribute"
                     data-testid="addAttributeButton"
                     onClick={(e) => {
-                      e.stopPropagation()
-                      handleAddAttribute()
+                      e.stopPropagation();
+                      handleAddAttribute();
                     }}
                   >
                     <Plus size={20} />
@@ -522,8 +522,8 @@ export default function SchemaCreateElement(props: Props) {
                     title="Discard the new attribute"
                     data-testid="cancelNewAttributeButton"
                     onClick={(e) => {
-                      e.stopPropagation()
-                      setNewAttribute(getDefaultAttribute())
+                      e.stopPropagation();
+                      setNewAttribute(getDefaultAttribute());
                     }}
                   >
                     <X size={20} />
@@ -633,8 +633,8 @@ export default function SchemaCreateElement(props: Props) {
                 title="Swap the order of selected nodes"
                 data-testid="swapSelectedNodesButton"
                 onClick={() => setSelectedNodes && setSelectedNodes(prev => {
-                  const nodes = prev.filter((e): e is Node => !!e.labels) as [Node, Node]
-                  return [nodes[1], nodes[0]]
+                  const nodes = prev.filter((e): e is Node => "labels" in e);
+                  return [nodes[1], nodes[0]];
                 })}
               >
                 <ArrowRightLeft size={20} />
@@ -663,5 +663,5 @@ export default function SchemaCreateElement(props: Props) {
         </div>
       </div>
     </div>
-  )
+  );
 }
\ No newline at end of file
diff --git a/app/schema/DataPanel.tsx b/app/schema/DataPanel.tsx
index bbbf615c..a7b19543 100644
--- a/app/schema/DataPanel.tsx
+++ b/app/schema/DataPanel.tsx
@@ -4,7 +4,7 @@
 "use client";
 
 import { Check, Pencil, PlusCircle, Trash2, X } from "lucide-react";
-import { useContext, useEffect, useState, useCallback } from "react";
+import { useContext, useEffect, useState, useCallback, Dispatch, SetStateAction  } from "react";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useToast } from "@/components/ui/use-toast";
 import { useSession } from "next-auth/react";
@@ -13,7 +13,7 @@ import { prepareArg, securedFetch } from "@/lib/utils";
 import Button from "../components/ui/Button";
 import { ATTRIBUTES, getDefaultAttribute, OPTIONS } from "./CreateElementPanel";
 import Combobox from "../components/ui/combobox";
-import { Label, Graph, Link, Node } from "../api/graph/model";
+import { Label, Graph, Link, Node, GraphData } from "../api/graph/model";
 import Input from "../components/ui/Input";
 import ToastButton from "../components/ToastButton";
 import DialogComponent from "../components/DialogComponent";
@@ -25,85 +25,86 @@ interface Props {
     setObject: (el?: (Node | Link)[]) => void
     schema: Graph
     setLabels: (labels: Label[]) => void
+    setData: Dispatch<SetStateAction<GraphData>>
 }
 
-export default function DataPanel({ object, setObject, schema, setLabels }: Props) {
-
-    const { indicator, setIndicator } = useContext(IndicatorContext)
-
-    const { data: session } = useSession()
-    const { toast } = useToast()
-
-    const [attribute, setAttribute] = useState<[string, string[]]>(getDefaultAttribute())
-    const [isRemoveLabelLoading, setIsRemoveLabelLoading] = useState<boolean>(false)
-    const [attributes, setAttributes] = useState<[string, string[]][]>([])
-    const [isRemoveLoading, setIsRemoveLoading] = useState<boolean>(false)
-    const [labelsEditable, setLabelsEditable] = useState<boolean>(false)
-    const [isLabelLoading, setIsLabelLoading] = useState<boolean>(false)
-    const [isAddLoading, setIsAddLoading] = useState<boolean>(false)
-    const [isSetLoading, setIsSetLoading] = useState<boolean>(false)
-    const [labelsHover, setLabelsHover] = useState<boolean>(false)
-    const [isAddValue, setIsAddValue] = useState<boolean>(false)
-    const [editable, setEditable] = useState<string>("")
-    const [newLabel, setNewLabel] = useState<string>("")
-    const [label, setLabel] = useState<string[]>([])
-    const [hover, setHover] = useState<string>("")
-    const type = !object.source
+export default function DataPanel({ object, setObject, schema, setLabels, setData }: Props) {
+
+    const { indicator, setIndicator } = useContext(IndicatorContext);
+
+    const { data: session } = useSession();
+    const { toast } = useToast();
+
+    const [attribute, setAttribute] = useState<[string, string[]]>(getDefaultAttribute());
+    const [isRemoveLabelLoading, setIsRemoveLabelLoading] = useState<boolean>(false);
+    const [attributes, setAttributes] = useState<[string, string[]][]>([]);
+    const [isRemoveLoading, setIsRemoveLoading] = useState<boolean>(false);
+    const [labelsEditable, setLabelsEditable] = useState<boolean>(false);
+    const [isLabelLoading, setIsLabelLoading] = useState<boolean>(false);
+    const [isAddLoading, setIsAddLoading] = useState<boolean>(false);
+    const [isSetLoading, setIsSetLoading] = useState<boolean>(false);
+    const [labelsHover, setLabelsHover] = useState<boolean>(false);
+    const [isAddValue, setIsAddValue] = useState<boolean>(false);
+    const [editable, setEditable] = useState<string>("");
+    const [newLabel, setNewLabel] = useState<string>("");
+    const [label, setLabel] = useState<string[]>([]);
+    const [hover, setHover] = useState<string>("");
+    const type = !("source" in object);
 
     const handleClose = useCallback((e: KeyboardEvent) => {
-        if (e.defaultPrevented) return
+        if (e.defaultPrevented) return;
 
         if (e.key === "Escape") {
-            setObject()
+            setObject();
         }
-    }, [setObject])
+    }, [setObject]);
 
     useEffect(() => {
-        window.addEventListener("keydown", handleClose)
+        window.addEventListener("keydown", handleClose);
 
         return () => {
-            window.removeEventListener("keydown", handleClose)
-        }
-    }, [handleClose])
+            window.removeEventListener("keydown", handleClose);
+        };
+    }, [handleClose]);
 
     useEffect(() => {
-        setAttributes(Object.entries(object.data).filter(([key, val]) => !(key === "name" && Number(val) === object.id)).map(([key, val]) => [key, Array.isArray(val) ? val : (val as string).split(',')]))
-        setLabel(object.source ? [object.relationship] : [...object.labels])
-    }, [object])
+        setAttributes(Object.entries(object.data).filter(([key, val]) => !(key === "name" && Number(val) === object.id)).map(([key, val]) => [key, Array.isArray(val) ? val : (val as string).split(',')]));
+        setLabel(type ? [...object.labels] : [object.relationship]);
+    }, [object, type]);
 
     const handleSetEditable = ([key, val]: [string, string[]] = getDefaultAttribute()) => {
         if (key !== "") {
-            setIsAddValue(false)
+            setIsAddValue(false);
         }
 
-        setAttribute([key, val])
-        setEditable(key)
-    }
+        setAttribute([key, val]);
+        setEditable(key);
+    };
 
     const onSetAttribute = async (att: [string, string[]]) => {
         const { ok } = await securedFetch(`api/schema/${prepareArg(schema.Id)}/${prepareArg(object.id.toString())}/${prepareArg(att[0])}`, {
             method: "POST",
             body: JSON.stringify({ type, attribute: att[1] })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
-        return ok
-    }
+        return ok;
+    };
 
     const handleSetAttribute = async (isUndo: boolean, att?: [string, string[]]) => {
-        const newAttribute = att || attribute
+        const newAttribute = att || attribute;
 
         if (newAttribute[0] === "" || newAttribute[1].some(v => v === "")) {
             toast({
                 title: "Error",
                 description: "Please fill all the fields",
-            })
-            return
+            });
+            return;
         }
 
         try {
-            setIsSetLoading(true)
-            const ok = await onSetAttribute(attribute)
-            const oldAttribute = attributes.find(([key]) => key === newAttribute[0])
+            setIsSetLoading(true);
+            const ok = await onSetAttribute(attribute);
+            const oldAttribute = attributes.find(([key]) => key === newAttribute[0]);
 
             if (ok) {
                 if (type) {
@@ -113,7 +114,7 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                         nodes: schema.Elements.nodes.map(element =>
                             element.id === object.id ? { ...element, data: { ...element.data, [newAttribute[0]]: newAttribute[1] } } : element
                         )
-                    }
+                    };
                 } else {
                     // eslint-disable-next-line no-param-reassign
                     schema.Elements = {
@@ -121,10 +122,11 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                         links: schema.Elements.links.map(element =>
                             element.id === object.id ? { ...element, data: { ...element.data, [newAttribute[0]]: newAttribute[1] } } : element
                         )
-                    }
+                    };
                 }
-                setAttributes(prev => prev.map((attr) => attr[0] === newAttribute[0] ? newAttribute : attr))
-                handleSetEditable()
+                setData({ ...schema.Elements });
+                setAttributes(prev => prev.map((attr) => attr[0] === newAttribute[0] ? newAttribute : attr));
+                handleSetEditable();
                 toast({
                     title: "Success",
                     description: `Property set`,
@@ -134,25 +136,25 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                             onClick={() => handleSetAttribute(false, oldAttribute)}
                         />
                         : undefined,
-                })
+                });
             }
 
         } finally {
-            setIsSetLoading(false)
+            setIsSetLoading(false);
         }
-    }
+    };
 
     const handleRemoveAttribute = async (key: string) => {
         try {
-            setIsRemoveLoading(true)
+            setIsRemoveLoading(true);
 
             const { ok } = await securedFetch(`api/schema/${prepareArg(schema.Id)}/${prepareArg(object.id.toString())}/${prepareArg(key)}`, {
                 method: "DELETE",
                 body: JSON.stringify({ type })
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
             if (ok) {
-                const att = attributes.find(([k]) => k === key)
+                const att = attributes.find(([k]) => k === key);
                 if (type) {
                     // eslint-disable-next-line no-param-reassign
                     schema.Elements = {
@@ -160,7 +162,7 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                         nodes: schema.Elements.nodes.map(element =>
                             element.id === object.id ? { ...element, data: { ...Object.fromEntries(Object.entries(element.data).filter(([k]) => k !== key)), [key]: [] } } : element
                         )
-                    }
+                    };
                 } else {
                     // eslint-disable-next-line no-param-reassign
                     schema.Elements = {
@@ -168,9 +170,10 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                         links: schema.Elements.links.map(element =>
                             element.id === object.id ? { ...element, data: { ...Object.fromEntries(Object.entries(element.data).filter(([k]) => k !== key)), [key]: [] } } : element
                         )
-                    }
+                    };
                 }
-                setAttributes(prev => prev.filter(([k]) => k !== key))
+                setData({ ...schema.Elements });
+                setAttributes(prev => prev.filter(([k]) => k !== key));
                 toast({
                     title: "Success",
                     description: "Attribute removed",
@@ -179,87 +182,87 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                             showUndo
                             onClick={() => handleAddAttribute(att)}
                         />,
-                })
-                setAttribute(getDefaultAttribute())
+                });
+                setAttribute(getDefaultAttribute());
             }
 
-            return ok
+            return ok;
         } finally {
-            setIsRemoveLoading(false)
+            setIsRemoveLoading(false);
         }
 
-    }
+    };
 
     const handleAddAttribute = async (att?: [string, string[]]) => {
-        const newAttribute = att || attribute
+        const newAttribute = att || attribute;
         if (newAttribute[0] === "" || newAttribute[1].some(v => v === "")) {
             toast({
                 title: "Error",
                 description: "Please fill all the fields",
                 variant: "destructive"
-            })
-            return
+            });
+            return;
         }
         try {
-            setIsAddLoading(true)
-            const ok = await onSetAttribute(newAttribute)
+            setIsAddLoading(true);
+            const ok = await onSetAttribute(newAttribute);
             if (ok) {
                 if (type) {
                     // eslint-disable-next-line no-param-reassign
                     schema.Elements = {
                         ...schema.Elements,
                         nodes: [...schema.Elements.nodes, { ...object as Node, data: { ...object.data, [newAttribute[0]]: newAttribute[1] } }]
-                    }
+                    };
                 } else {
                     // eslint-disable-next-line no-param-reassign
                     schema.Elements = {
                         ...schema.Elements,
                         links: [...schema.Elements.links, { ...object as Link, data: { ...object.data, [newAttribute[0]]: newAttribute[1] } }]
-                    }
+                    };
                 }
-                setAttributes(prev => [...prev, newAttribute])
-                setAttribute(getDefaultAttribute())
-                setIsAddValue(false)
+                setAttributes(prev => [...prev, newAttribute]);
+                setAttribute(getDefaultAttribute());
+                setIsAddValue(false);
             }
         } finally {
-            setIsAddLoading(false)
+            setIsAddLoading(false);
         }
-    }
+    };
 
     const handleSetKeyDown = (evt: React.KeyboardEvent) => {
         if (evt.code === "Escape") {
-            evt.preventDefault()
-            handleSetEditable()
+            evt.preventDefault();
+            handleSetEditable();
         }
 
-        if (evt.code !== "Enter" || isSetLoading || indicator === "offline") return
+        if (evt.code !== "Enter" || isSetLoading || indicator === "offline") return;
 
-        evt.preventDefault()
-        handleSetAttribute(true)
-    }
+        evt.preventDefault();
+        handleSetAttribute(true);
+    };
 
     const handleAddKeyDown = (evt: React.KeyboardEvent) => {
         if (evt.code === "Escape") {
-            evt.preventDefault()
-            handleSetEditable()
+            evt.preventDefault();
+            handleSetEditable();
         }
 
-        if (evt.code !== "Enter" || isAddLoading || indicator === "offline") return
+        if (evt.code !== "Enter" || isAddLoading || indicator === "offline") return;
 
-        evt.preventDefault()
-        handleAddAttribute()
-    }
+        evt.preventDefault();
+        handleAddAttribute();
+    };
 
     const handleAddLabel = async () => {
-        const node = object as Node
+        const node = object as Node;
 
         if (newLabel === "") {
             toast({
                 title: "Error",
                 description: "Please fill the label",
                 variant: "destructive"
-            })
-            return
+            });
+            return;
         }
 
         if (label.includes(newLabel)) {
@@ -267,56 +270,58 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                 title: "Error",
                 description: "Label already exists",
                 variant: "destructive"
-            })
-            return
+            });
+            return;
         }
         try {
-            setIsLabelLoading(true)
+            setIsLabelLoading(true);
 
             const result = await securedFetch(`api/schema/${prepareArg(schema.Id)}/${prepareArg(object.id.toString())}/label`, {
                 method: "POST",
                 body: JSON.stringify({ label: newLabel })
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
             if (result.ok) {
-                setLabels([...schema.addLabel(newLabel, node, false)])
-                setLabel([...node.labels])
-                setNewLabel("")
-                setLabelsEditable(false)
+                setLabels([...schema.addLabel(newLabel, node, false)]);
+                setLabel([...node.labels]);
+                setData({ ...schema.Elements });
+                setNewLabel("");
+                setLabelsEditable(false);
             }
         } finally {
-            setIsLabelLoading(false)
+            setIsLabelLoading(false);
         }
-    }
+    };
 
     const handleRemoveLabel = async (removeLabel: string) => {
-        const node = object as Node
+        const node = object as Node;
 
         if (removeLabel === "") {
             toast({
                 title: "Error",
                 description: "You cannot remove the default label",
                 variant: "destructive"
-            })
-            return
+            });
+            return;
         }
 
         try {
-            setIsRemoveLabelLoading(true)
+            setIsRemoveLabelLoading(true);
             const result = await securedFetch(`api/schema/${prepareArg(schema.Id)}/${prepareArg(object.id.toString())}/label`, {
                 method: "DELETE",
                 body: JSON.stringify({ label: removeLabel })
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
             if (result.ok) {
-                schema.removeLabel(removeLabel, node, false)
-                setLabels([...schema.Labels])
-                setLabel([...node.labels])
+                schema.removeLabel(removeLabel, node, false);
+                setLabels([...schema.Labels]);
+                setLabel([...node.labels]);
+                setData({ ...schema.Elements });
             }
         } finally {
-            setIsRemoveLabelLoading(false)
+            setIsRemoveLabelLoading(false);
         }
-    }
+    };
 
     return (
         <div className="DataPanel">
@@ -374,15 +379,15 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                     onKeyDown={(e) => {
 
                                         if (e.key === "Escape") {
-                                            e.preventDefault()
-                                            setLabelsEditable(false)
-                                            setNewLabel("")
+                                            e.preventDefault();
+                                            setLabelsEditable(false);
+                                            setNewLabel("");
                                         }
 
-                                        if (e.key !== "Enter" || isLabelLoading || indicator === "offline") return
+                                        if (e.key !== "Enter" || isLabelLoading || indicator === "offline") return;
 
-                                        e.preventDefault()
-                                        handleAddLabel()
+                                        e.preventDefault();
+                                        handleAddLabel();
                                     }}
                                 />
                                 <Button
@@ -406,8 +411,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                         title="Discard the new label"
                                         data-testid="cancelLabelButton"
                                         onClick={() => {
-                                            setLabelsEditable(false)
-                                            setNewLabel("")
+                                            setLabelsEditable(false);
+                                            setNewLabel("");
                                         }}
                                     >
                                         <X size={15} />
@@ -443,8 +448,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                             <TableRow
                                 className="cursor-pointer p-2 h-20"
                                 onClick={() => {
-                                    if (editable === key) return
-                                    handleSetEditable([key, [...val]])
+                                    if (editable === key) return;
+                                    handleSetEditable([key, [...val]]);
                                 }}
                                 // onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && handleSetEditable()}
                                 onMouseEnter={() => setHover(key)}
@@ -462,9 +467,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                 <Combobox
                                                     options={OPTIONS}
                                                     setSelectedValue={(v) => setAttribute(prev => {
-                                                        const p: [string, string[]] = [...prev]
-                                                        p[1][0] = v
-                                                        return p
+                                                        const p: [string, string[]] = [...prev];
+                                                        p[1][0] = v;
+                                                        return p;
                                                     })}
                                                     inTable
                                                     label="Type"
@@ -476,9 +481,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                     className="w-full"
                                                     onKeyDown={handleSetKeyDown}
                                                     onChange={(e) => setAttribute(prev => {
-                                                        const p: [string, string[]] = [...prev]
-                                                        p[1][1] = e.target.value
-                                                        return p
+                                                        const p: [string, string[]] = [...prev];
+                                                        p[1][1] = e.target.value;
+                                                        return p;
                                                     })}
                                                     value={attribute[1][1]}
                                                 />
@@ -487,9 +492,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                 <Switch
                                                     className="data-[state=unchecked]:bg-border"
                                                     onCheckedChange={(checked) => setAttribute(prev => {
-                                                        const p: [string, string[]] = [...prev]
-                                                        p[1][2] = checked ? "true" : "false"
-                                                        return p
+                                                        const p: [string, string[]] = [...prev];
+                                                        p[1][2] = checked ? "true" : "false";
+                                                        return p;
                                                     })}
                                                     checked={attribute[1][2] === "true"}
                                                 />
@@ -498,9 +503,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                 <Switch
                                                     className="data-[state=unchecked]:bg-border"
                                                     onCheckedChange={(checked) => setAttribute(prev => {
-                                                        const p: [string, string[]] = [...prev]
-                                                        p[1][3] = checked ? "true" : "false"
-                                                        return p
+                                                        const p: [string, string[]] = [...prev];
+                                                        p[1][3] = checked ? "true" : "false";
+                                                        return p;
                                                     })}
                                                     checked={attribute[1][3] === "true"}
                                                 />
@@ -523,8 +528,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                             title="Save the attribute changes"
                                                             data-testid="saveEditAttributeButton"
                                                             onClick={(e) => {
-                                                                e.stopPropagation()
-                                                                handleSetAttribute(true)
+                                                                e.stopPropagation();
+                                                                handleSetAttribute(true);
                                                             }}
                                                             isLoading={isSetLoading}
                                                         >
@@ -539,8 +544,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                                 title="Discard the attribute changes"
                                                                 data-testid="cancelEditAttributeButton"
                                                                 onClick={(e) => {
-                                                                    e.stopPropagation()
-                                                                    handleSetEditable()
+                                                                    e.stopPropagation();
+                                                                    handleSetEditable();
 
                                                                 }}
                                                             >
@@ -554,7 +559,7 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                             trigger={
                                                                 <Button
                                                                     onClick={(e) => {
-                                                                        e.stopPropagation()
+                                                                        e.stopPropagation();
                                                                     }}
                                                                     variant="button"
                                                                     title="Delete Attribute"
@@ -574,8 +579,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                                     title="Confirm the deletion of the attribute"
                                                                     data-testid="confirmRemoveAttributeButton"
                                                                     onClick={(e) => {
-                                                                        e.stopPropagation()
-                                                                        handleRemoveAttribute(key)
+                                                                        e.stopPropagation();
+                                                                        handleRemoveAttribute(key);
                                                                     }}
                                                                     isLoading={isRemoveLoading}
                                                                 />
@@ -596,8 +601,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                                             title="Modify this attribute"
                                                             data-testid="editAttributeButton"
                                                             onClick={(e) => {
-                                                                e.stopPropagation()
-                                                                handleSetEditable([key, [...val]])
+                                                                e.stopPropagation();
+                                                                handleSetEditable([key, [...val]]);
                                                             }}
                                                         >
                                                             <Pencil size={20} />
@@ -619,9 +624,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                     onKeyDown={handleAddKeyDown}
                                     data-testid="addAttributeKeyInput"
                                     onChange={(e) => setAttribute(prev => {
-                                        const p: [string, string[]] = [...prev]
-                                        p[0] = e.target.value
-                                        return p
+                                        const p: [string, string[]] = [...prev];
+                                        p[0] = e.target.value;
+                                        return p;
                                     })}
                                     value={attribute[0]}
                                 />
@@ -630,9 +635,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                 <Combobox
                                     options={OPTIONS}
                                     setSelectedValue={(v) => setAttribute(prev => {
-                                        const p: [string, string[]] = [...prev]
-                                        p[1][0] = v
-                                        return p
+                                        const p: [string, string[]] = [...prev];
+                                        p[1][0] = v;
+                                        return p;
                                     })}
                                     inTable
                                     label="Type"
@@ -645,9 +650,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                     onKeyDown={handleAddKeyDown}
                                     data-testid="addAttributeValueInput"
                                     onChange={(e) => setAttribute(prev => {
-                                        const p: [string, string[]] = [...prev]
-                                        p[1][1] = e.target.value
-                                        return p
+                                        const p: [string, string[]] = [...prev];
+                                        p[1][1] = e.target.value;
+                                        return p;
                                     })}
                                     value={attribute[1][1]}
                                 />
@@ -656,9 +661,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                 <Switch
                                     className="data-[state=unchecked]:bg-border"
                                     onCheckedChange={(checked) => setAttribute(prev => {
-                                        const p: [string, string[]] = [...prev]
-                                        p[1][2] = checked ? "true" : "false"
-                                        return p
+                                        const p: [string, string[]] = [...prev];
+                                        p[1][2] = checked ? "true" : "false";
+                                        return p;
                                     })}
                                     checked={attribute[1][2] === "true"}
                                 />
@@ -667,9 +672,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                 <Switch
                                     className="data-[state=unchecked]:bg-border"
                                     onCheckedChange={(checked) => setAttribute(prev => {
-                                        const p: [string, string[]] = [...prev]
-                                        p[1][3] = checked ? "true" : "false"
-                                        return p
+                                        const p: [string, string[]] = [...prev];
+                                        p[1][3] = checked ? "true" : "false";
+                                        return p;
                                     })}
                                     checked={attribute[1][3] === "true"}
                                 />
@@ -683,8 +688,8 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                         label="Save"
                                         title="Save the new attribute"
                                         onClick={(e) => {
-                                            e.stopPropagation()
-                                            handleAddAttribute()
+                                            e.stopPropagation();
+                                            handleAddAttribute();
                                         }}
                                         isLoading={isAddLoading}
                                         data-testid="saveAddValueButton"
@@ -697,9 +702,9 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                                         label="Cancel"
                                         title="Discard the new attribute"
                                         onClick={(e) => {
-                                            e.stopPropagation()
-                                            handleSetEditable()
-                                            setIsAddValue(false)
+                                            e.stopPropagation();
+                                            handleSetEditable();
+                                            setIsAddValue(false);
                                         }}
                                         data-testid="cancelAddValueButton"
                                     >
@@ -727,5 +732,5 @@ export default function DataPanel({ object, setObject, schema, setLabels }: Prop
                 </TableCaption>
             </Table>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/schema/SchemaView.tsx b/app/schema/SchemaView.tsx
index 44d59654..76a66432 100644
--- a/app/schema/SchemaView.tsx
+++ b/app/schema/SchemaView.tsx
@@ -1,31 +1,41 @@
 /* eslint-disable no-param-reassign */
 
-'use client'
+'use client';
 
-import { useEffect, useState, useContext, Dispatch, SetStateAction } from "react"
-import { GraphRef } from "@/lib/utils"
-import Labels from "../graph/labels"
-import { Label, Link, Node, GraphData, Relationship } from "../api/graph/model"
-import { SchemaContext } from "../components/provider"
-import Controls from "../graph/controls"
-import GraphDetails from "../graph/GraphDetails"
-import ForceGraph from "../components/ForceGraph"
+import { useEffect, useContext, Dispatch, SetStateAction } from "react";
+import { GraphRef } from "@/lib/utils";
+import type { GraphData as CanvasData } from "@falkordb/canvas";
+import dynamic from "next/dynamic";
+import Labels from "../graph/labels";
+import { Label, Link, Node, GraphData, Relationship } from "../api/graph/model";
+import { SchemaContext } from "../components/provider";
+import Controls from "../graph/controls";
+import GraphDetails from "../graph/GraphDetails";
+import Spinning from "../components/ui/spinning";
+
+const ForceGraph = dynamic(() => import("../components/ForceGraph"), {
+    ssr: false,
+    loading: () => <div className="h-full w-full flex justify-center items-center"><Spinning /></div>
+});
 
 interface Props {
     edgesCount: number | undefined
     nodesCount: number | undefined
     selectedElements: (Node | Link)[]
     setSelectedElements: (elements?: (Node | Link)[]) => void
-    chartRef: GraphRef
+    canvasRef: GraphRef
     cooldownTicks: number | undefined
-    handleCooldown: (ticks?: 0, isSetLoading?: boolean) => void
+    handleCooldown: (ticks?: 0) => void
     data: GraphData
     setData: Dispatch<SetStateAction<GraphData>>
+    graphData: CanvasData | undefined
+    setGraphData: Dispatch<SetStateAction<CanvasData | undefined>>
     setLabels: Dispatch<SetStateAction<Label[]>>
     setRelationships: Dispatch<SetStateAction<Relationship[]>>
     labels: Label[]
     relationships: Relationship[]
     isLoading: boolean
+    setIsLoading: (loading: boolean) => void
 }
 
 export default function SchemaView({
@@ -33,55 +43,55 @@ export default function SchemaView({
     nodesCount,
     selectedElements,
     setSelectedElements,
-    chartRef,
+    canvasRef,
     cooldownTicks,
     handleCooldown,
     data,
     setData,
+    graphData,
+    setGraphData,
     setLabels,
     setRelationships,
     labels,
     relationships,
-    isLoading
+    isLoading,
+    setIsLoading
 }: Props) {
-    const { schema, schemaName } = useContext(SchemaContext)
-
-    const [parentWidth, setParentWidth] = useState(0)
-    const [parentHeight, setParentHeight] = useState(0)
+    const { schema, schemaName } = useContext(SchemaContext);
 
     useEffect(() => {
-        setRelationships([...schema.Relationships])
-        setLabels([...schema.Labels])
-    }, [schema.Id, schema.Relationships.length, schema.Labels.length, setRelationships, schema.Relationships, schema.Labels, setLabels])
+        setRelationships([...schema.Relationships]);
+        setLabels([...schema.Labels]);
+    }, [schema.Id, schema.Relationships.length, schema.Labels.length, setRelationships, schema.Relationships, schema.Labels, setLabels]);
 
     useEffect(() => {
-        setSelectedElements([])
-    }, [schema.Id, setSelectedElements])
+        setSelectedElements([]);
+    }, [schema.Id, setSelectedElements]);
 
     const onLabelClick = (label: Label) => {
-        label.show = !label.show
+        label.show = !label.show;
 
         schema.Elements.nodes.forEach((node) => {
-            if (!label.show && node.labels.some(c => schema.LabelsMap.get(c)?.show !== label.show)) return
-            node.visible = label.show
-        })
+            if (!label.show && node.labels.some(c => schema.LabelsMap.get(c)?.show !== label.show)) return;
+            node.visible = label.show;
+        });
 
-        schema.visibleLinks(label.show)
-        schema.LabelsMap.set(label.name, label)
-        setData({ ...schema.Elements })
-    }
+        schema.visibleLinks(label.show);
+        schema.LabelsMap.set(label.name, label);
+        setData({ ...schema.Elements });
+    };
 
     const onRelationshipClick = (label: Relationship) => {
-        label.show = !label.show
+        label.show = !label.show;
 
         schema.Elements.links.forEach((link) => {
-            if (link.relationship !== label.name) return
-            link.visible = label.show
-        })
+            if (link.relationship !== label.name) return;
+            link.visible = label.show;
+        });
 
-        schema.RelationshipsMap.set(label.name, label)
-        setData({ ...schema.Elements })
-    }
+        schema.RelationshipsMap.set(label.name, label);
+        setData({ ...schema.Elements });
+    };
 
     return (
         <div className="relative w-full h-full border border-border rounded-lg overflow-hidden">
@@ -109,7 +119,7 @@ export default function SchemaView({
                             <div className="h-full w-px bg-border rounded-full" />
                             <Controls
                                 graph={schema}
-                                chartRef={chartRef}
+                                canvasRef={canvasRef}
                                 disabled={schema.getElements().length === 0}
                                 handleCooldown={handleCooldown}
                                 cooldownTicks={cooldownTicks}
@@ -121,22 +131,21 @@ export default function SchemaView({
             <div className="relative h-full w-full rounded-lg overflow-hidden">
                 <ForceGraph
                     graph={schema}
-                    chartRef={chartRef}
+                    canvasRef={canvasRef}
                     data={data}
                     setData={setData}
+                    graphData={graphData}
+                    setGraphData={setGraphData}
                     selectedElements={selectedElements}
                     setSelectedElements={setSelectedElements}
                     type="schema"
                     isLoading={isLoading}
+                    setIsLoading={setIsLoading}
                     handleCooldown={handleCooldown}
                     cooldownTicks={cooldownTicks}
                     setRelationships={setRelationships}
-                    parentHeight={parentHeight}
-                    parentWidth={parentWidth}
-                    setParentHeight={setParentHeight}
-                    setParentWidth={setParentWidth}
                 />
             </div>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/schema/_page.tsx b/app/schema/_page.tsx
index 5ab868c4..515e6b23 100644
--- a/app/schema/_page.tsx
+++ b/app/schema/_page.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
 import { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { cn, getSSEGraphResult, isTwoNodes, prepareArg, securedFetch } from "@/lib/utils";
+import { cn, getSSEGraphResult, GraphRef, isTwoNodes, prepareArg, securedFetch } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
 import dynamic from "next/dynamic";
-import { ForceGraphMethods } from "react-force-graph-2d";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ImperativePanelHandle } from "react-resizable-panels";
+import type { GraphData as CanvasData } from "@falkordb/canvas";
 import { Label, Graph, GraphData, Link, Node, Relationship } from "../api/graph/model";
 import { IndicatorContext, SchemaContext } from "../components/provider";
 import Spinning from "../components/ui/spinning";
@@ -19,17 +19,17 @@ const Selector = dynamic(() => import("../graph/Selector"), {
         <div className="w-[230px] h-full animate-pulse rounded-md border border-border bg-background" />
         <div className="w-[220px] h-full animate-pulse rounded-md border border-border bg-background" />
     </div>
-})
+});
 const SchemaView = dynamic(() => import("./SchemaView"), {
     ssr: false,
     loading: () => <div className="h-full w-full flex items-center justify-center border border-border rounded-lg">
         <Spinning />
     </div>
-})
+});
 
 export default function Page() {
 
-    const { setIndicator } = useContext(IndicatorContext)
+    const { setIndicator } = useContext(IndicatorContext);
     const {
         schema,
         setSchema,
@@ -37,215 +37,200 @@ export default function Page() {
         setSchemaName,
         schemaNames,
         setSchemaNames
-    } = useContext(SchemaContext)
-
-    const { toast } = useToast()
-
-    const panelRef = useRef<ImperativePanelHandle>(null)
-
-    const [selectedElements, setSelectedElements] = useState<(Node | Link)[]>([])
-    const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0)
-    const [labels, setLabels] = useState<Label[]>([])
-    const [relationships, setRelationships] = useState<Relationship[]>([])
-    const [data, setData] = useState<GraphData>(schema.Elements)
-    const [isAddEdge, setIsAddEdge] = useState(false)
-    const chartRef = useRef<ForceGraphMethods<Node, Link>>()
-    const [edgesCount, setEdgesCount] = useState<number | undefined>()
-    const [nodesCount, setNodesCount] = useState<number | undefined>()
-    const [isAddNode, setIsAddNode] = useState(false)
-    const [isCanvasLoading, setIsCanvasLoading] = useState(false)
-    const [isCollapsed, setIsCollapsed] = useState(true)
+    } = useContext(SchemaContext);
+
+    const { toast } = useToast();
+
+    const panelRef = useRef<ImperativePanelHandle>(null);
+    const canvasRef = useRef<GraphRef["current"]>(null);
+
+    const [selectedElements, setSelectedElements] = useState<(Node | Link)[]>([]);
+    const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0);
+    const [labels, setLabels] = useState<Label[]>([]);
+    const [relationships, setRelationships] = useState<Relationship[]>([]);
+    const [data, setData] = useState<GraphData>(schema.Elements);
+    const [graphData, setGraphData] = useState<CanvasData>();
+    const [isAddEdge, setIsAddEdge] = useState(false);
+    const [edgesCount, setEdgesCount] = useState<number | undefined>();
+    const [nodesCount, setNodesCount] = useState<number | undefined>();
+    const [isAddNode, setIsAddNode] = useState(false);
+    const [isCanvasLoading, setIsCanvasLoading] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(true);
 
     const panelSize = useMemo(() => {
-        if (selectedElements.length !== 0) return 30
-        if (isAddNode || isAddEdge) return 40
-        return 0
-    }, [selectedElements, isAddNode, isAddEdge])
+        if (selectedElements.length !== 0) return 30;
+        if (isAddNode || isAddEdge) return 40;
+        return 0;
+    }, [selectedElements, isAddNode, isAddEdge]);
 
     const handleSetSelectedElements = useCallback((el: (Node | Link)[] = []) => {
-        setSelectedElements(el)
+        setSelectedElements(el);
         
         if (el.length !== 0) {
-            setIsAddNode(false)
-            setIsAddEdge(false)
+            setIsAddNode(false);
+            setIsAddEdge(false);
         }
 
-        const currentPanel = panelRef.current
+        const currentPanel = panelRef.current;
 
-        if (!currentPanel) return
+        if (!currentPanel) return;
 
-        if (el) currentPanel.expand()
-        else currentPanel.collapse()
-    }, [])
+        if (el) currentPanel.expand();
+        else currentPanel.collapse();
+    }, []);
 
     const handleSetIsAddNode = useCallback((isAdd: boolean) => {
-        const currentPanel = panelRef.current
-        setIsAddNode(isAdd)
+        const currentPanel = panelRef.current;
+        setIsAddNode(isAdd);
 
         if (isAdd) {
-            setIsAddEdge(false)
-            setSelectedElements([])
+            setIsAddEdge(false);
+            setSelectedElements([]);
         }
 
-        if (!currentPanel) return
+        if (!currentPanel) return;
 
-        if (isAdd) currentPanel.expand()
-        else currentPanel.collapse()
-    }, [])
+        if (isAdd) currentPanel.expand();
+        else currentPanel.collapse();
+    }, []);
 
     const handleSetIsAddEdge = useCallback((isAdd: boolean) => {
-        const currentPanel = panelRef.current
-        setIsAddEdge(isAdd)
+        const currentPanel = panelRef.current;
+        setIsAddEdge(isAdd);
 
         if (isAdd) {
-            setIsAddNode(false)
-            setSelectedElements([])
+            setIsAddNode(false);
+            setSelectedElements([]);
         }
 
-        if (!currentPanel) return
+        if (!currentPanel) return;
 
-        if (isAdd) currentPanel.expand()
-        else currentPanel.collapse()
-    }, [])
+        if (isAdd) currentPanel.expand();
+        else currentPanel.collapse();
+    }, []);
 
     const fetchCount = useCallback(async () => {
-        setEdgesCount(undefined)
-        setNodesCount(undefined)
+        setEdgesCount(undefined);
+        setNodesCount(undefined);
 
         try {
             const result = await getSSEGraphResult(`api/schema/${prepareArg(schemaName)}/count`, toast, setIndicator) as { nodes?: number; edges?: number };
 
-            if (!result) return
+            if (!result) return;
 
-            const { edges, nodes } = result
+            const { edges, nodes } = result;
 
-            setEdgesCount(edges)
-            setNodesCount(nodes)
+            setEdgesCount(edges);
+            setNodesCount(nodes);
         } catch (error) {
-            console.error(error)
+            console.error(error);
         }
-    }, [toast, setIndicator, schemaName])
-
-    const handleCooldown = (ticks?: 0, isSetLoading = true) => {
-        setCooldownTicks(ticks)
+    }, [toast, setIndicator, schemaName]);
 
-        if (isSetLoading) setIsCanvasLoading(ticks !== 0)
-        const canvas = document.querySelector('.force-graph-container canvas')
-
-        if (!canvas) return
-
-        canvas.setAttribute('data-engine-status', ticks === 0 ? 'stop' : 'running')
-    }
+    const handleCooldown = (ticks?: 0) => {
+        setCooldownTicks(ticks);
+    };
 
     const fetchSchema = useCallback(async () => {
         const result = await securedFetch(`/api/schema/${prepareArg(schemaName)}`, {
             method: "GET"
-        }, toast, setIndicator)
-        if (!result.ok) return
-        const json = await result.json()
-        const schemaGraph = Graph.create(schemaName, json.result, false, true, 0)
-        setSchema(schemaGraph)
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        window.schema = schemaGraph
-
-        fetchCount()
-    }, [fetchCount, setIndicator, setSchema, toast, schemaName])
+        }, toast, setIndicator);
+        if (!result.ok) return;
+        const json = await result.json();
+        const schemaGraph = Graph.create(schemaName, json.result, false, true, 0);
+        setSchema(schemaGraph);
+        fetchCount();
+    }, [fetchCount, setIndicator, setSchema, toast, schemaName]);
 
     useEffect(() => {
-        if (!schemaName) return
+        if (!schemaName) return;
 
-        fetchSchema()
-    }, [schemaName, fetchSchema])
+        fetchSchema();
+    }, [schemaName, fetchSchema]);
 
     const handleDeleteElement = async () => {
-        const stateSelectedElements = Object.values(selectedElements)
+        const stateSelectedElements = Object.values(selectedElements);
 
         await Promise.all(stateSelectedElements.map(async (element) => {
-            const { id } = element
-            const type = !element.source
+            const { id } = element;
+            const type = !("source" in element);
             const result = await securedFetch(`api/schema/${prepareArg(schema.Id)}/${prepareArg(id.toString())}`, {
                 method: "DELETE",
                 body: JSON.stringify({ type }),
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
-            if (!result.ok) return
+            if (!result.ok) return;
 
             if (type) {
-                schema.Elements.nodes.splice(schema.Elements.nodes.findIndex(node => node.id === element.id), 1)
-                schema.NodesMap.delete(id)
+                schema.Elements.nodes.splice(schema.Elements.nodes.findIndex(node => node.id === element.id), 1);
+                schema.NodesMap.delete(id);
             } else {
-                schema.Elements.links.splice(schema.Elements.links.findIndex(link => link.id === element.id), 1)
-                schema.LinksMap.delete(id)
+                schema.Elements.links.splice(schema.Elements.links.findIndex(link => link.id === element.id), 1);
+                schema.LinksMap.delete(id);
             }
 
             if (type) {
                 (element as Node).labels.forEach((labelName) => {
-                    const label = schema.LabelsMap.get(labelName)
+                    const label = schema.LabelsMap.get(labelName);
 
                     if (label) {
-                        label.elements = label.elements.filter(n => n.id !== id)
+                        label.elements = label.elements.filter(n => n.id !== id);
 
                         if (label.elements.length === 0) {
-                            schema.Labels.splice(schema.Labels.findIndex(l => l.name === label.name), 1)
-                            schema.LabelsMap.delete(label.name)
+                            schema.Labels.splice(schema.Labels.findIndex(l => l.name === label.name), 1);
+                            schema.LabelsMap.delete(label.name);
                         }
                     }
-                })
+                });
             } else {
-                const relation = schema.RelationshipsMap.get(element.relationship)
+                const relation = schema.RelationshipsMap.get(element.relationship);
 
                 if (relation) {
-                    relation.elements = relation.elements.filter(n => n.id !== id)
+                    relation.elements = relation.elements.filter(n => n.id !== id);
 
                     if (relation.elements.length === 0) {
-                        schema.Relationships.splice(schema.Relationships.findIndex(r => r.name === relation.name), 1)
-                        schema.RelationshipsMap.delete(relation.name)
+                        schema.Relationships.splice(schema.Relationships.findIndex(r => r.name === relation.name), 1);
+                        schema.RelationshipsMap.delete(relation.name);
                     }
                 }
             }
-        }))
+        }));
 
-        setRelationships(schema.removeLinks(selectedElements.map((element) => element.id)))
-        fetchCount()
-        setSelectedElements([])
-        setData({ ...schema.Elements })
-        handleCooldown()
-    }
+        setRelationships(schema.removeLinks(selectedElements.map((element) => element.id)));
+        fetchCount();
+        setSelectedElements([]);
+        setData({ ...schema.Elements });
+    };
 
     const handleCreateElement = async (attributes: [string, string[]][], elementLabel: string[]) => {
-        const fakeId = "-1"
+        const fakeId = "-1";
         const result = await securedFetch(`api/schema/${prepareArg(schemaName)}/${prepareArg(fakeId)}`, {
             method: "POST",
             body: JSON.stringify({ type: isAddNode, label: elementLabel, attributes, selectedNodes: isAddNode ? undefined : selectedElements })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (result.ok) {
-            const json = await result.json()
+            const json = await result.json();
 
             if (isAddNode) {
-                const { labels: ls } = schema.extendNode(json.result.data[0].n, false, true, true)
-                setLabels(prev => [...prev, ...ls.filter(c => !prev.some(p => p.name === c)).map(c => schema.LabelsMap.get(c)!)])
-                handleSetIsAddNode(false)
+                const { labels: ls } = schema.extendNode(json.result.data[0].n, false, true, true);
+                setLabels(prev => [...prev, ...ls.filter(c => !prev.some(p => p.name === c)).map(c => schema.LabelsMap.get(c)!)]);
+                handleSetIsAddNode(false);
             } else {
-                const link = schema.extendEdge(json.result.data[0].e, false, true)
-                // Calculate curve for the newly created edge
-                link.curve = schema.calculateLinkCurve(link)
-                setRelationships(prev => [...prev.filter(p => p.name !== link.relationship), schema.RelationshipsMap.get(link.relationship)!])
-                handleSetIsAddEdge(false)
+                const link = schema.extendEdge(json.result.data[0].e, false, true);
+                setRelationships(prev => [...prev.filter(p => p.name !== link.relationship), schema.RelationshipsMap.get(link.relationship)!]);
+                handleSetIsAddEdge(false);
             }
 
-            fetchCount()
+            fetchCount();
 
-            setSelectedElements([])
+            setSelectedElements([]);
         }
 
-        setData({ ...schema.Elements })
-
-        handleCooldown()
+        setData({ ...schema.Elements });
 
-        return result.ok
-    }
+        return result.ok;
+    };
 
     const getCurrentPanel = () => {
         if (selectedElements.length !== 0) {
@@ -255,8 +240,9 @@ export default function Page() {
                     setObject={handleSetSelectedElements}
                     schema={schema}
                     setLabels={setLabels}
+                    setData={setData}
                 />
-            )
+            );
         }
 
         if (isAddNode) {
@@ -266,7 +252,7 @@ export default function Page() {
                     setIsAdd={handleSetIsAddNode}
                     type
                 />
-            )
+            );
         }
 
         if (isTwoNodes(selectedElements)) {
@@ -278,11 +264,11 @@ export default function Page() {
                     setSelectedNodes={setSelectedElements}
                     type={false}
                 />
-            )
+            );
         }
 
-        return null
-    }
+        return null;
+    };
 
     return (
         <div className="Page gap-8 p-8">
@@ -296,7 +282,7 @@ export default function Page() {
                 selectedElements={selectedElements}
                 setSelectedElements={setSelectedElements}
                 handleDeleteElement={handleDeleteElement}
-                chartRef={chartRef}
+                canvasRef={canvasRef}
                 setIsAddNode={handleSetIsAddNode}
                 setIsAddEdge={handleSetIsAddEdge}
                 setGraph={setSchema}
@@ -315,16 +301,19 @@ export default function Page() {
                         nodesCount={nodesCount}
                         selectedElements={selectedElements}
                         setSelectedElements={handleSetSelectedElements}
-                        chartRef={chartRef}
+                        canvasRef={canvasRef}
                         cooldownTicks={cooldownTicks}
                         handleCooldown={handleCooldown}
                         data={data}
                         setData={setData}
+                        graphData={graphData}
+                        setGraphData={setGraphData}
                         setLabels={setLabels}
                         setRelationships={setRelationships}
                         labels={labels}
                         relationships={relationships}
                         isLoading={isCanvasLoading}
+                        setIsLoading={setIsCanvasLoading}
                     />
                 </ResizablePanel>
                 <ResizableHandle
@@ -338,15 +327,15 @@ export default function Page() {
                     defaultSize={panelSize}
                     minSize={30}
                     onCollapse={() => {
-                        setIsCollapsed(true)
+                        setIsCollapsed(true);
                     }}
                     onExpand={() => {
-                        setIsCollapsed(false)
+                        setIsCollapsed(false);
                     }}
                 >
                     {getCurrentPanel()}
                 </ResizablePanel>
             </ResizablePanelGroup>
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/settings/Configurations.tsx b/app/settings/Configurations.tsx
index 42336504..7386d4d9 100644
--- a/app/settings/Configurations.tsx
+++ b/app/settings/Configurations.tsx
@@ -17,7 +17,7 @@ type Config = {
     name: string,
     description: string,
     value: string | number
-}
+};
 
 const disableRunTimeConfigs = new Set([
     "THREAD_COUNT",
@@ -26,7 +26,7 @@ const disableRunTimeConfigs = new Set([
     "NODE_CREATION_BUFFER",
     "BOLT_PORT",
     "IMPORT_FOLDER"
-])
+]);
 
 const Configs: Map<string, Config> = new Map([
     ["THREAD_COUNT", {
@@ -124,7 +124,7 @@ const Configs: Map<string, Config> = new Map([
         description: "Controls how graphs are discarded, when set to `yes` graphs are freed on a dedicated thread leaving the server's main thread free, otherwise graphs are freed on the server's main thread.",
         value: ""
     }]
-])
+]);
 
 export default function Configurations() {
     const [configs, setConfigs] = useState<Row[]>([]);
@@ -174,7 +174,7 @@ export default function Configurations() {
             return currentConfigs.map((config: Row) => {
                 if (config.cells[0].value !== name) return config;
 
-                const newConfig = { ...config }
+                const newConfig = { ...config };
                 newConfig.cells[2].value = value;
                 return newConfig;
             });
@@ -194,7 +194,7 @@ export default function Configurations() {
         });
 
         return true;
-    }
+    };
 
     const fetchConfigs = async () => {
         const result = await securedFetch("/api/graph/config", {
@@ -229,11 +229,11 @@ export default function Configurations() {
                             type: "readonly"
                         }
                 ]
-            }
+            };
         });
 
         setConfigs(newConfigs);
-    }
+    };
 
     useEffect(() => {
         fetchConfigs();
diff --git a/app/settings/browserSettings.tsx b/app/settings/browserSettings.tsx
index 9703582a..54cad2e5 100644
--- a/app/settings/browserSettings.tsx
+++ b/app/settings/browserSettings.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { getQuerySettingsNavigationToast } from "@/components/ui/toaster";
 import { useRouter } from "next/navigation";
-import { cn, getDefaultQuery, TextPriority } from "@/lib/utils";
+import { cn, getDefaultQuery } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
-import { RotateCcw, PlusCircle, Trash2, ChevronUp, ChevronDown, MonitorPlay, ChevronRight } from "lucide-react";
+import { RotateCcw, MonitorPlay, ChevronRight } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import { Slider } from "@/components/ui/slider";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -13,7 +13,7 @@ import Button from "../components/ui/Button";
 import Input from "../components/ui/Input";
 import Combobox from "../components/ui/combobox";
 
-const MODELS = ["gpt-4o-mini", "gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
+const MODELS = ["gpt-4o-mini", "gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"];
 
 export default function BrowserSettings() {
     const {
@@ -24,7 +24,7 @@ export default function BrowserSettings() {
             timeoutSettings: { newTimeout, setNewTimeout },
             limitSettings: { newLimit, setNewLimit },
             chatSettings: { newSecretKey, setNewSecretKey, newModel, setNewModel },
-            graphInfo: { newRefreshInterval, setNewRefreshInterval, newDisplayTextPriority, setNewDisplayTextPriority }
+            graphInfo: { newRefreshInterval, setNewRefreshInterval }
         },
         settings: {
             contentPersistenceSettings: { contentPersistence },
@@ -33,44 +33,42 @@ export default function BrowserSettings() {
             timeoutSettings: { timeout: timeoutValue },
             limitSettings: { limit },
             chatSettings: { secretKey, model, displayChat },
-            graphInfo: { refreshInterval, displayTextPriority }
+            graphInfo: { refreshInterval }
         },
         hasChanges,
         setHasChanges,
         resetSettings,
         saveSettings,
         replayTutorial,
-    } = useContext(BrowserSettingsContext)
+    } = useContext(BrowserSettingsContext);
 
-    const scrollableContainerRef = useRef<HTMLFormElement>(null)
+    const scrollableContainerRef = useRef<HTMLFormElement>(null);
 
-    const { toast } = useToast()
-    const router = useRouter()
+    const { toast } = useToast();
+    const router = useRouter();
 
-    const [isResetting, setIsResetting] = useState(false)
-    const [newPriorityField, setNewPriorityField] = useState<TextPriority>({ name: "", ignore: false })
+    const [isResetting, setIsResetting] = useState(false);
     const [expandedSections, setExpandedSections] = useState({
         queryExecution: false,
         environment: false,
         graphInfo: false,
         userExperience: false
-    })
+    });
 
     const toggleSection = (section: keyof typeof expandedSections) => {
-        setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }))
-    }
+        setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
+    };
 
     useEffect(() => {
-        setNewContentPersistence(contentPersistence)
-        setNewRunDefaultQuery(runDefaultQuery)
-        setNewDefaultQuery(defaultQuery)
-        setNewTimeout(timeoutValue)
-        setNewLimit(limit)
-        setNewSecretKey(secretKey)
-        setNewModel(model)
-        setNewRefreshInterval(refreshInterval)
-        setNewDisplayTextPriority(displayTextPriority)
-    }, [contentPersistence, runDefaultQuery, defaultQuery, timeoutValue, limit, secretKey, setNewContentPersistence, setNewRunDefaultQuery, setNewDefaultQuery, setNewTimeout, setNewLimit, setNewSecretKey, model, setNewModel, setNewRefreshInterval, refreshInterval, displayTextPriority, setNewDisplayTextPriority])
+        setNewContentPersistence(contentPersistence);
+        setNewRunDefaultQuery(runDefaultQuery);
+        setNewDefaultQuery(defaultQuery);
+        setNewTimeout(timeoutValue);
+        setNewLimit(limit);
+        setNewSecretKey(secretKey);
+        setNewModel(model);
+        setNewRefreshInterval(refreshInterval);
+    }, [contentPersistence, runDefaultQuery, defaultQuery, timeoutValue, limit, secretKey, setNewContentPersistence, setNewRunDefaultQuery, setNewDefaultQuery, setNewTimeout, setNewLimit, setNewSecretKey, model, setNewModel, setNewRefreshInterval, refreshInterval]);
 
     useEffect(() => {
         setHasChanges(
@@ -81,62 +79,61 @@ export default function BrowserSettings() {
             newRunDefaultQuery !== runDefaultQuery ||
             newSecretKey !== secretKey ||
             newModel !== model ||
-            refreshInterval !== newRefreshInterval ||
-            JSON.stringify(newDisplayTextPriority) !== JSON.stringify(displayTextPriority)
-        )
-    }, [defaultQuery, limit, newDefaultQuery, newLimit, newRunDefaultQuery, newContentPersistence, newTimeout, runDefaultQuery, contentPersistence, setHasChanges, timeoutValue, newSecretKey, secretKey, newModel, model, refreshInterval, newRefreshInterval, displayTextPriority, newDisplayTextPriority])
+            refreshInterval !== newRefreshInterval
+        );
+    }, [defaultQuery, limit, newDefaultQuery, newLimit, newRunDefaultQuery, newContentPersistence, newTimeout, runDefaultQuery, contentPersistence, setHasChanges, timeoutValue, newSecretKey, secretKey, newModel, model, refreshInterval, newRefreshInterval]);
 
     const handleSubmit = useCallback((e?: React.FormEvent<HTMLFormElement>) => {
-        e?.preventDefault()
+        e?.preventDefault();
 
-        saveSettings()
-    }, [saveSettings])
+        saveSettings();
+    }, [saveSettings]);
 
     const navigateBack = useCallback((e: KeyboardEvent) => {
         if (e.key === "Escape") {
-            e.preventDefault()
+            e.preventDefault();
 
             if (hasChanges) {
                 getQuerySettingsNavigationToast(toast, () => {
-                    handleSubmit()
-                    router.back()
+                    handleSubmit();
+                    router.back();
                 }, () => {
-                    resetSettings()
-                    router.back()
-                })
+                    resetSettings();
+                    router.back();
+                });
             } else {
-                router.back()
+                router.back();
             }
         }
-    }, [hasChanges, toast, handleSubmit, router, resetSettings])
+    }, [hasChanges, toast, handleSubmit, router, resetSettings]);
 
     useEffect(() => {
-        window.addEventListener("keydown", navigateBack)
+        window.addEventListener("keydown", navigateBack);
 
         return () => {
-            window.removeEventListener("keydown", navigateBack)
-        }
-    }, [hasChanges, navigateBack])
+            window.removeEventListener("keydown", navigateBack);
+        };
+    }, [hasChanges, navigateBack]);
 
     const handleScrollTo = (elementId?: string) => {
         if (elementId) {
             // Find the element by ID and scroll to it
             setTimeout(() => {
-                const el = document.getElementById(elementId)
+                const el = document.getElementById(elementId);
                 if (el) {
-                    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 }
-            }, 0)
+            }, 0);
         } else {
-            scrollableContainerRef.current?.scrollIntoView()
+            scrollableContainerRef.current?.scrollIntoView();
         }
-    }
+    };
 
     // Generic function to handle input changes with scroll
     const createChangeHandler = <T,>(setter: (value: T) => void) => (value: T, elementId?: string) => {
-        setter(value)
-        handleScrollTo(elementId)
-    }
+        setter(value);
+        handleScrollTo(elementId);
+    };
 
     // Handle numeric inputs with infinity support (for timeout and limit)
     const handleInfinityNumberChange = (
@@ -145,27 +142,27 @@ export default function BrowserSettings() {
         elementId: string,
         replacements: string[] = []
     ) => {
-        let cleanValue = inputValue.replace('∞', '')
+        let cleanValue = inputValue.replace('∞', '');
         replacements.forEach(replacement => {
-            cleanValue = cleanValue.replace(replacement, '')
-        })
+            cleanValue = cleanValue.replace(replacement, '');
+        });
 
-        const value = parseInt(cleanValue, 10)
+        const value = parseInt(cleanValue, 10);
 
         if (!value) {
-            createChangeHandler(setter)(0, elementId)
-            return
+            createChangeHandler(setter)(0, elementId);
+            return;
         }
 
-        if (value < 0 || Number.isNaN(value)) return
+        if (value < 0 || Number.isNaN(value)) return;
 
-        createChangeHandler(setter)(value, elementId)
-    }
+        createChangeHandler(setter)(value, elementId);
+    };
 
     // Wrapper for model combobox to handle scroll
     const handleModelChange = (value: string) => {
-        createChangeHandler(setNewModel)(value, 'secretKeyInput')
-    }
+        createChangeHandler(setNewModel)(value, 'secretKeyInput');
+    };
 
     return (
         <div className="grow basis-0 w-full flex flex-col gap-6 overflow-hidden">
@@ -379,20 +376,20 @@ export default function BrowserSettings() {
                                             id="runDefaultQueryResetBtn"
                                             variant="Secondary"
                                             onClick={async () => {
-                                                setIsResetting(true)
+                                                setIsResetting(true);
                                                 try {
                                                     // add a delay to the reset to show the animation
-                                                    await new Promise(resolve => { setTimeout(resolve, 1000) })
-                                                    const q = getDefaultQuery()
-                                                    setDefaultQuery(q)
-                                                    setNewDefaultQuery(q)
-                                                    localStorage.setItem("defaultQuery", q)
+                                                    await new Promise(resolve => { setTimeout(resolve, 1000); });
+                                                    const q = getDefaultQuery();
+                                                    setDefaultQuery(q);
+                                                    setNewDefaultQuery(q);
+                                                    localStorage.setItem("defaultQuery", q);
                                                     toast({
                                                         title: "Default query reset",
                                                         description: "Your default query has been reset.",
-                                                    })
+                                                    });
                                                 } finally {
-                                                    setIsResetting(false)
+                                                    setIsResetting(false);
                                                 }
                                             }}
                                             title="Reset"
@@ -436,129 +433,6 @@ export default function BrowserSettings() {
                                     <p className="text-sm text-muted-foreground">Enable this function to &apos;Auto-Save&apos; your data in your next Browser session.</p>
                                 </div>
                             </div>
-
-                            {/* Display Text Priority */}
-                            <div className="flex flex-col gap-4 p-4 bg-muted/10 rounded-lg">
-                                <div className="flex flex-col gap-2">
-                                    <h3 className="text-lg font-semibold">Display Text Priority</h3>
-                                    <p className="text-sm text-muted-foreground">
-                                        Configure the priority order for displaying node text in graph visualizations. The graph will use the first available property from this list.
-                                    </p>
-                                    <p className="text-xs text-muted-foreground">
-                                        Note: In case the property field is used in different cases (user / USER), activate ignore case selection.
-                                    </p>
-                                </div>
-
-                                <div className="flex items-center gap-2">
-                                    <Input
-                                        placeholder="Add new property field"
-                                        value={newPriorityField.name}
-                                        onChange={(e) => setNewPriorityField(prev => ({ ...prev, name: e.target.value }))}
-                                        onKeyDown={(e) => {
-                                            if (e.key === 'Enter') {
-                                                e.preventDefault()
-                                                if (newPriorityField.name.trim() && !newDisplayTextPriority.some(field => field.name === newPriorityField.name.trim())) {
-                                                    setNewDisplayTextPriority([...newDisplayTextPriority, newPriorityField])
-                                                    setNewPriorityField({ name: "", ignore: false })
-                                                }
-                                            }
-                                        }}
-                                        className="flex-1"
-                                    />
-                                    <Button
-                                        variant="Secondary"
-                                        onClick={() => {
-                                            if (newPriorityField.name.trim() && !newDisplayTextPriority.some(field => field.name === newPriorityField.name.trim())) {
-                                                setNewDisplayTextPriority([...newDisplayTextPriority, newPriorityField])
-                                                setNewPriorityField({ name: "", ignore: false })
-                                            }
-                                        }}
-                                        disabled={!newPriorityField.name.trim() || newDisplayTextPriority.some(field => field.name === newPriorityField.name.trim())}
-                                    >
-                                        <PlusCircle size={20} />
-                                    </Button>
-                                </div>
-
-                                <ul className="flex flex-col gap-2 overflow-y-auto p-2 max-h-[300px] bg-background rounded-md border border-border">
-                                    {
-                                        newDisplayTextPriority.map(({ name, ignore }, index) => (
-                                            <li key={name} className="flex items-center gap-3 p-3 bg-muted/10 rounded-md hover:bg-muted/20 transition-colors">
-                                                <span className="text-sm font-medium w-8 text-muted-foreground">{index + 1}.</span>
-                                                <span className="flex-1 font-medium">{name}</span>
-                                                <div className="flex gap-2">
-                                                    <Button
-                                                        variant="Secondary"
-                                                        onClick={() => {
-                                                            if (index > 0) {
-                                                                setNewDisplayTextPriority(prev => {
-                                                                    const newPriority = [...prev];
-                                                                    [newPriority[index], newPriority[index - 1]] = [newPriority[index - 1], newPriority[index]]
-                                                                    return newPriority
-                                                                })
-                                                            }
-                                                        }}
-                                                        disabled={index === 0}
-                                                        title="Move up"
-                                                    >
-                                                        <ChevronUp size={16} />
-                                                    </Button>
-                                                    <Button
-                                                        variant="Secondary"
-                                                        onClick={() => {
-                                                            if (index < newDisplayTextPriority.length - 1) {
-                                                                setNewDisplayTextPriority(prev => {
-                                                                    const newPriority = [...prev];
-                                                                    [newPriority[index], newPriority[index + 1]] = [newPriority[index + 1], newPriority[index]]
-                                                                    return newPriority
-                                                                })
-                                                            }
-                                                        }}
-                                                        disabled={index === newDisplayTextPriority.length - 1}
-                                                        title="Move down"
-                                                    >
-                                                        <ChevronDown size={16} />
-                                                    </Button>
-                                                    <Tooltip>
-                                                        <TooltipTrigger
-                                                            disabled={name === "id"}
-                                                            asChild
-                                                        >
-                                                            <div>
-                                                                <Switch
-                                                                    checked={ignore}
-                                                                    disabled={name === "id"}
-                                                                    className={!ignore ? "bg-border" : "bg-primary"}
-                                                                    onCheckedChange={(checked) => {
-                                                                        setNewDisplayTextPriority(prev => {
-                                                                            const newPriority = [...prev]
-                                                                            newPriority[index] = { ...newPriority[index], ignore: checked }
-                                                                            return newPriority
-                                                                        })
-                                                                    }}
-                                                                />
-                                                            </div>
-                                                        </TooltipTrigger>
-                                                        <TooltipContent>
-                                                            <p>Ignore Case</p>
-                                                        </TooltipContent>
-                                                    </Tooltip>
-                                                    <Button
-                                                        variant="Secondary"
-                                                        disabled={name === "id"}
-                                                        className="text-destructive hover:text-destructive/80"
-                                                        onClick={() => {
-                                                            setNewDisplayTextPriority(prev => prev.filter((_, i) => i !== index))
-                                                        }}
-                                                        title="Delete"
-                                                    >
-                                                        <Trash2 size={16} />
-                                                    </Button>
-                                                </div>
-                                            </li>
-                                        ))
-                                    }
-                                </ul>
-                            </div>
                         </CardContent>
                     )}
                 </Card>
@@ -587,5 +461,5 @@ export default function BrowserSettings() {
                 }
             </form >
         </div >
-    )
+    );
 }
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index cfb43a17..251b7bca 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,74 +1,74 @@
 
-'use client'
+'use client';
 
-import { useCallback, useContext, useEffect, useState } from "react"
-import { useSession } from "next-auth/react"
-import { useRouter } from "next/navigation"
-import { cn } from "@/lib/utils"
-import { getQuerySettingsNavigationToast } from "@/components/ui/toaster"
-import { useToast } from "@/components/ui/use-toast"
-import Users from "./users/Users"
-import Configurations from "./Configurations"
-import Button from "../components/ui/Button"
-import BrowserSettings from "./browserSettings"
-import PersonalAccessTokens from "./tokens/PersonalAccessTokens"
-import { IndicatorContext, BrowserSettingsContext } from "../components/provider"
+import { useCallback, useContext, useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { getQuerySettingsNavigationToast } from "@/components/ui/toaster";
+import { useToast } from "@/components/ui/use-toast";
+import Users from "./users/Users";
+import Configurations from "./Configurations";
+import Button from "../components/ui/Button";
+import BrowserSettings from "./browserSettings";
+import PersonalAccessTokens from "./tokens/PersonalAccessTokens";
+import { IndicatorContext, BrowserSettingsContext } from "../components/provider";
 
-type Tab = 'Browser' | 'Configurations' | 'Users' | 'Tokens'
+type Tab = 'Browser' | 'Configurations' | 'Users' | 'Tokens';
 
 export default function Settings() {
 
-    const { hasChanges, saveSettings, resetSettings } = useContext(BrowserSettingsContext)
-    const { indicator } = useContext(IndicatorContext)
-    const { data: session } = useSession()
-    const { toast } = useToast()
-    const router = useRouter()
+    const { hasChanges, saveSettings, resetSettings } = useContext(BrowserSettingsContext);
+    const { indicator } = useContext(IndicatorContext);
+    const { data: session } = useSession();
+    const { toast } = useToast();
+    const router = useRouter();
 
-    const [current, setCurrent] = useState<Tab>('Browser')
+    const [current, setCurrent] = useState<Tab>('Browser');
 
 
     const navigateBack = useCallback((e: KeyboardEvent) => {
         if (e.key === "Escape" && current !== "Browser") {
-            e.preventDefault()
+            e.preventDefault();
 
-            router.back()
+            router.back();
         }
-    }, [current, router])
+    }, [current, router]);
 
     useEffect(() => {
-        window.addEventListener("keydown", navigateBack)
+        window.addEventListener("keydown", navigateBack);
 
         return () => {
-            window.removeEventListener("keydown", navigateBack)
-        }
-    }, [navigateBack])
+            window.removeEventListener("keydown", navigateBack);
+        };
+    }, [navigateBack]);
 
     const handleSetCurrent = useCallback((tab: Tab) => {
         if (current === "Browser" && hasChanges) {
             getQuerySettingsNavigationToast(toast, () => {
-                saveSettings()
-                setCurrent(tab)
+                saveSettings();
+                setCurrent(tab);
             }, () => {
-                resetSettings()
-                setCurrent(tab)
-            })
+                resetSettings();
+                setCurrent(tab);
+            });
         } else {
-            setCurrent(tab)
+            setCurrent(tab);
         }
-    }, [current, hasChanges, resetSettings, saveSettings, toast])
+    }, [current, hasChanges, resetSettings, saveSettings, toast]);
 
     const getCurrentTab = () => {
         switch (current) {
             case 'Users':
-                return <Users />
+                return <Users />;
             case 'Configurations':
-                return <Configurations />
+                return <Configurations />;
             case 'Tokens':
-                return <PersonalAccessTokens />
+                return <PersonalAccessTokens />;
             default:
-                return <BrowserSettings />
+                return <BrowserSettings />;
         }
-    }
+    };
 
     return (
         <div className="Page p-2">
@@ -110,5 +110,5 @@ export default function Settings() {
                 getCurrentTab()
             }
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/settings/users/AddUser.tsx b/app/settings/users/AddUser.tsx
index 671fda55..7510e2b8 100644
--- a/app/settings/users/AddUser.tsx
+++ b/app/settings/users/AddUser.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
 
-"use client"
+"use client";
 
-import { FormEvent, useEffect, useState } from "react"
+import { FormEvent, useEffect, useState } from "react";
 import { PlusCircle } from "lucide-react";
 import { CreateUser } from "@/app/api/user/model";
 import Button from "@/app/components/ui/Button";
@@ -13,22 +13,22 @@ import { Drawer, DrawerDescription, DrawerContent, DrawerTitle, DrawerTrigger }
 export default function AddUser({ onAddUser }: {
     onAddUser: (user: CreateUser) => Promise<void>
 }) {
-    const [open, setOpen] = useState(false)
-    const [username, setUsername] = useState("")
-    const [password, setPassword] = useState("")
-    const [confirmPassword, setConfirmPassword] = useState("")
-    const [role, setRole] = useState("Admin")
+    const [open, setOpen] = useState(false);
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [role, setRole] = useState("Admin");
 
     const handleClose = () => {
-        setPassword("")
-        setConfirmPassword("")
-        setUsername("")
-        setRole("")
-    }
+        setPassword("");
+        setConfirmPassword("");
+        setUsername("");
+        setRole("");
+    };
 
     useEffect(() => {
-        if (!open) handleClose()
-    }, [open])
+        if (!open) handleClose();
+    }, [open]);
 
     const fields: Field[] = [
         {
@@ -111,16 +111,16 @@ export default function AddUser({ onAddUser }: {
                 }
             ]
         }
-    ]
+    ];
 
     const handleAddUser = async (e: FormEvent) => {
         e.preventDefault();
 
-        await onAddUser({ username, password, role })
+        await onAddUser({ username, password, role });
 
-        setOpen(false)
+        setOpen(false);
 
-        handleClose()
+        handleClose();
     };
 
     return (
@@ -147,5 +147,5 @@ export default function AddUser({ onAddUser }: {
                 />
             </DrawerContent>
         </Drawer>
-    )
+    );
 }
\ No newline at end of file
diff --git a/app/settings/users/DeleteUser.tsx b/app/settings/users/DeleteUser.tsx
index 49b855f8..21482202 100644
--- a/app/settings/users/DeleteUser.tsx
+++ b/app/settings/users/DeleteUser.tsx
@@ -14,11 +14,11 @@ interface DeleteUserProps {
 }
 
 export default function DeleteUser({ users, setUsers, setRows }: DeleteUserProps) {
-    const { toast } = useToast()
-    const { setIndicator } = useContext(IndicatorContext)
+    const { toast } = useToast();
+    const { setIndicator } = useContext(IndicatorContext);
     
     const deleteSelected = async () => {
-        if (!users) return
+        if (!users) return;
 
         const response = await securedFetch("/api/user", {
             method: 'DELETE',
@@ -26,17 +26,17 @@ export default function DeleteUser({ users, setUsers, setRows }: DeleteUserProps
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({ users: users.map(user => ({ username: user.username })) })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (response.ok) {
             toast({
                 title: "Success",
                 description: "User deleted successfully",
-            })
-            setUsers(prev => prev.filter(user => !users.find(u => user.username === u.username)))
-            setRows(prev => prev.filter(row => !users.find(u => row.cells[0].value === u.username)))
+            });
+            setUsers(prev => prev.filter(user => !users.find(u => user.username === u.username)));
+            setRows(prev => prev.filter(row => !users.find(u => row.cells[0].value === u.username)));
         }
-    }
+    };
 
     return (
         <AlertDialog>
diff --git a/app/settings/users/Users.tsx b/app/settings/users/Users.tsx
index 1d397213..1d386eda 100644
--- a/app/settings/users/Users.tsx
+++ b/app/settings/users/Users.tsx
@@ -19,48 +19,48 @@ type SetUser = {
     username: string
     role: string
     oldRole?: string
-}
+};
 
 const ROLES = [
     "Admin",
     "Read-Write",
     "Read-Only"
-]
+];
 
 // Shows the details of a current database connection 
 export default function Users() {
 
-    const [users, setUsers] = useState<User[]>([])
-    const [rows, setRows] = useState<Row[]>([])
-    const [newUser, setNewUser] = useState<SetUser | null>(null)
-    const [open, setOpen] = useState(false)
-    const { toast } = useToast()
+    const [users, setUsers] = useState<User[]>([]);
+    const [rows, setRows] = useState<Row[]>([]);
+    const [newUser, setNewUser] = useState<SetUser | null>(null);
+    const [open, setOpen] = useState(false);
+    const { toast } = useToast();
     const { setIndicator } = useContext(IndicatorContext);
 
     useEffect(() => {
         if (!open) {
-            setNewUser(null)
+            setNewUser(null);
         }
-    }, [open])
+    }, [open]);
 
     const handleSetRole = async (user: SetUser) => {
-        const { username, role, oldRole } = user
+        const { username, role, oldRole } = user;
         const result = await securedFetch(`api/user/${prepareArg(username)}`, {
             method: 'PATCH',
             body: JSON.stringify({ role })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (result.ok) {
-            setUsers(prev => prev.map(u => u.username === username ? { ...u, role } : u))
-            setRows(prev => prev.map((row): Row => row.cells[0].value === username ? { ...row, cells: [row.cells[0], { ...row.cells[1], value: role }] } : row))
+            setUsers(prev => prev.map(u => u.username === username ? { ...u, role } : u));
+            setRows(prev => prev.map((row): Row => row.cells[0].value === username ? { ...row, cells: [row.cells[0], { ...row.cells[1], value: role }] } : row));
             toast({
                 title: "Success",
                 description: `${username} role updated successfully`,
                 action: oldRole ? <ToastAction altText="Undo" onClick={() => handleSetRole({ username, role: oldRole })}>Undo</ToastAction> : undefined
-            })
-            setOpen(false)
+            });
+            setOpen(false);
         }
-    }
+    };
 
     useEffect(() => {
         (async () => {
@@ -69,11 +69,11 @@ export default function Users() {
                 headers: {
                     'Content-Type': 'application/json'
                 }
-            }, toast, setIndicator)
+            }, toast, setIndicator);
 
             if (result.ok) {
-                const data = await result.json()
-                setUsers(data.result.map((user: User) => ({ ...user, selected: false })))
+                const data = await result.json();
+                setUsers(data.result.map((user: User) => ({ ...user, selected: false })));
                 setRows(data.result.map(({ username, role }: User): Row => ({
                     name: username,
                     cells: [{
@@ -86,18 +86,18 @@ export default function Users() {
                         value: role,
                         type: "select",
                         onChange: async (value: string) => {
-                            setNewUser({ username, role: value, oldRole: role })
-                            setOpen(true)
-                            return true
+                            setNewUser({ username, role: value, oldRole: role });
+                            setOpen(true);
+                            return true;
                         },
                         options: ROLES,
                         selectType: "Role"
                     }],
                     checked: false,
-                })))
+                })));
             }
-        })()
-    }, [toast, setIndicator])
+        })();
+    }, [toast, setIndicator]);
 
     const handleAddUser = async ({ username, password, role }: CreateUser) => {
         const response = await securedFetch('/api/user/', {
@@ -106,14 +106,14 @@ export default function Users() {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({ username, password, role })
-        }, toast, setIndicator)
+        }, toast, setIndicator);
 
         if (response.ok) {
             toast({
                 title: "Success",
                 description: "User added successfully",
-            })
-            setUsers(prev => [...prev, { username, role, selected: false }])
+            });
+            setUsers(prev => [...prev, { username, role, selected: false }]);
             setRows(prev => [...prev, {
                 name: username,
                 cells: [{
@@ -122,18 +122,18 @@ export default function Users() {
                 }, {
                     value: role,
                     onChange: async (value: string) => {
-                        setNewUser({ username, role: value, oldRole: role })
-                        setOpen(true)
-                        return true
+                        setNewUser({ username, role: value, oldRole: role });
+                        setOpen(true);
+                        return true;
                     },
                     type: "select",
                     options: ROLES,
                     selectType: "Role"
                 }],
                 checked: false,
-            }] as Row[])
+            }] as Row[]);
         }
-    }
+    };
 
     return (
         <div className="w-full h-full flex flex-col space-y-4">
diff --git a/e2e/config/constants.ts b/e2e/config/constants.ts
index fd5ca971..3e60fa4e 100644
--- a/e2e/config/constants.ts
+++ b/e2e/config/constants.ts
@@ -1,4 +1,4 @@
-import queryData from '../config/queries.json'
+import queryData from "./queries.json";
 
 export const BATCH_CREATE_PERSONS = queryData.queries[0].testQueries[0].query;
 export const FETCH_FIRST_TEN_NODES = queryData.queries[0].testQueries[1].query;
diff --git a/e2e/infra/utils.ts b/e2e/infra/utils.ts
index e589f43a..8686a556 100644
--- a/e2e/infra/utils.ts
+++ b/e2e/infra/utils.ts
@@ -13,6 +13,9 @@ export const CREATE_TWO_NODES_QUERY =
 export const CREATE_NODE_QUERY = 'CREATE (a:person1 {name: "a"}) RETURN *';
 export const CREATE_QUERY =
   'CREATE (a:person1 {name: "a"})-[c:KNOWS {name: "knows"}]->(b:person2) RETURN *';
+export const CREATE_PERSON_RELATIONSHIP =
+  'CREATE (a:person1 {name: "a", age: 30, gender: "male", occupation: "engineer"})-[c:KNOWS {name: "knows", since: 2020, strength: "strong"}]->(b:person2 {name: "b", age: 28, gender: "female", occupation: "designer"}) RETURN *';
+
 
 /**
  * Normalize URL by removing trailing slash for comparison
diff --git a/e2e/logic/POM/customizeStylePage.ts b/e2e/logic/POM/customizeStylePage.ts
index e25a03d8..f32a10fe 100644
--- a/e2e/logic/POM/customizeStylePage.ts
+++ b/e2e/logic/POM/customizeStylePage.ts
@@ -4,6 +4,7 @@ import {
   interactWhenVisible,
   waitForElementToNotBeVisible,
 } from "@/e2e/infra/utils";
+import { EMPTY_DISPLAY_NAME } from "@/app/api/graph/model";
 import GraphInfoPage from "./graphInfoPage";
 
 export default class CustomizeStylePage extends GraphInfoPage {
@@ -40,7 +41,7 @@ export default class CustomizeStylePage extends GraphInfoPage {
   }
 
   private captionOption(caption: string): Locator {
-    return this.page.getByText(caption).last();
+    return this.page.getByRole('button', { name: caption, exact: true });
   }
 
   private get closeButton(): Locator {
@@ -152,16 +153,20 @@ export default class CustomizeStylePage extends GraphInfoPage {
   }
 
   async getLabelButtonColor(label: string): Promise<string> {
-    const color = await this.labelButton(label).evaluate((el: HTMLElement) =>
-      window.getComputedStyle(el).backgroundColor
-    );
+    // Wait for the button to be visible first
+    await waitForElementToBeVisible(this.labelButton(label));
+
+    // Get the color from the inline style attribute which is the source of truth
+    const color = await this.labelButton(label).evaluate((el: HTMLElement) => {
+      return el.style.backgroundColor || window.getComputedStyle(el).backgroundColor;
+    });
     return color;
   }
 
   async getLabelStyleFromLocalStorage(label: string): Promise<{
-    customColor?: string;
-    customSize?: number;
-    customCaption?: string;
+    color?: string;
+    size?: number;
+    caption?: string;
   } | null> {
     const style = await this.page.evaluate((labelName) => {
       const stored = localStorage.getItem(`labelStyle_${labelName}`);
@@ -206,7 +211,7 @@ export default class CustomizeStylePage extends GraphInfoPage {
       throw new Error(`Node with id ${nodeId} not found`);
     }
     // displayName is a tuple [line1, line2]
-    const [line1, line2] = node.displayName || ["", ""];
+    const [line1, line2] = node.displayName || EMPTY_DISPLAY_NAME;
     return [line1, line2].filter(Boolean).join(" ");
   }
 
diff --git a/e2e/logic/POM/page.ts b/e2e/logic/POM/page.ts
index 8afa1d47..35ff6afc 100644
--- a/e2e/logic/POM/page.ts
+++ b/e2e/logic/POM/page.ts
@@ -211,14 +211,12 @@ export default class Page extends BasePage {
 
   // CANVAS TOOLTIP
   public get nodeCanvasToolTip(): Locator {
-    return this.page.locator("//div[contains(@class, 'float-tooltip-kap')]");
+    return this.page.locator("div[class*='float-tooltip-kap']");
   }
 
   // CANVAS
   public get canvasElement(): Locator {
-    return this.page.locator(
-      "//div[contains(@class, 'force-graph-container')]//canvas"
-    );
+    return this.page.locator("falkordb-canvas").locator("canvas").first();
   }
 
   // TOAST
@@ -243,14 +241,29 @@ export default class Page extends BasePage {
   // 1500 is extra timeout to ensure the animation is over
   async waitForCanvasAnimationToEnd(timeout = 4500): Promise<void> {
     await waitForElementToBeVisible(this.skeleton);
-    await this.page.waitForFunction(
-      ({ selector }) => {
-        const canvas = document.querySelector(selector);
-        return canvas?.getAttribute("data-engine-status") === "stop";
-      },
-      { selector: ".force-graph-container canvas" },
-      { timeout }
-    );
+
+    // Check if canvas exists before waiting for it
+    const canvasContainer = this.page.locator("falkordb-canvas");
+    const canvasCount = await canvasContainer.count();
+
+    if (canvasCount === 0) {
+      // Canvas doesn't exist - might be empty graph or deleted all elements
+      return;
+    }
+
+    // Wait for the web component to be loaded (it's imported asynchronously)
+    await this.canvasElement.waitFor({ state: "attached", timeout: 10000 });
+
+    // Poll the canvas element's data-engine-status attribute using the locator
+    const startTime = Date.now();
+    while (Date.now() - startTime < timeout) {
+      const status = await this.canvasElement.getAttribute("data-engine-status");
+      if (status === "stopped") {
+        return;
+      }
+      await this.page.waitForTimeout(500); // Poll every 500ms
+    }
+    throw new Error(`Canvas animation did not stop within ${timeout}ms`);
   }
 
   async getCanvasScaling(): Promise<{ scaleX: number; scaleY: number }> {
@@ -297,13 +310,24 @@ export default class Page extends BasePage {
   async getNodesScreenPositions(windowKey: "graph" | "schema"): Promise<any[]> {
     // Wait for canvas to be ready and animations to settle
     await this.waitForCanvasAnimationToEnd();
-    await this.page.waitForTimeout(1500); // Allow some time for the canvas to render properly
+
+    // Give a small buffer for handleEngineStop callback to execute and populate window data
+    await this.page.waitForTimeout(500);
+
+    // Wait for the graph data to be available on window object (set by handleEngineStop)
+    await this.page.waitForFunction(
+      (key) => {
+        const data = (window as any)[key]?.();
+        // Check both possible structures: { nodes } or { elements: { nodes } }
+        return (data && ((Array.isArray(data.nodes) && data.nodes.length > 0) ||
+                        (data.elements && Array.isArray(data.elements.nodes) && data.elements.nodes.length > 0)));
+      },
+      windowKey,
+      { timeout: 5000 }
+    );
 
     // Get canvas element and its properties
-    const canvasInfo = await this.page.evaluate((selector) => {
-      const canvasElement = document.querySelector(
-        selector
-      ) as HTMLCanvasElement;
+    const canvasInfo = await this.canvasElement.evaluate((canvasElement: HTMLCanvasElement) => {
       if (!canvasElement) return null;
       const rect = canvasElement.getBoundingClientRect();
       const ctx = canvasElement.getContext("2d");
@@ -327,17 +351,18 @@ export default class Page extends BasePage {
             }
           : null,
       };
-    }, ".force-graph-container canvas");
+    });
 
     if (!canvasInfo || !canvasInfo.transform) return [];
 
     // Get graph data from window object
     const graphData = await this.page.evaluate(
-      (key) => (window as any)[key],
+      (key) => (window as any)[key]?.(),
       windowKey
     );
 
-    if (!graphData?.elements?.nodes) return [];
+    const nodes = graphData?.nodes || graphData?.elements?.nodes;
+    if (!nodes || !Array.isArray(nodes)) return [];
 
     const {
       a: scaleX,
@@ -346,7 +371,7 @@ export default class Page extends BasePage {
       f: translateY,
     } = canvasInfo.transform;
 
-    return graphData.elements.nodes.map((node: any) => {
+    return nodes.map((node: any) => {
       // Apply canvas transform matrix to node coordinates
       // Transform: screenX = node.x * scaleX + translateX, screenY = node.y * scaleY + translateY
       const transformedX = node.x * scaleX + translateX;
@@ -416,11 +441,23 @@ export default class Page extends BasePage {
     // Wait for canvas to be ready and animations to settle
     await this.waitForCanvasAnimationToEnd();
 
+    // Give a small buffer for handleEngineStop callback to execute and populate window data
+    await this.page.waitForTimeout(500);
+
+    // Wait for the graph data to be available on window object (set by handleEngineStop)
+    await this.page.waitForFunction(
+      (key) => {
+        const data = (window as any)[key]?.();
+        // Check both possible structures: { links } or { elements: { links } }
+        return (data && ((Array.isArray(data.links) && data.links.length > 0) ||
+                        (data.elements && Array.isArray(data.elements.links) && data.elements.links.length > 0)));
+      },
+      windowKey,
+      { timeout: 5000 }
+    );
+
     // Get canvas element and its properties
-    const canvasInfo = await this.page.evaluate((selector) => {
-      const canvasElement = document.querySelector(
-        selector
-      ) as HTMLCanvasElement;
+    const canvasInfo = await this.canvasElement.evaluate((canvasElement: HTMLCanvasElement) => {
       if (!canvasElement) return null;
       const rect = canvasElement.getBoundingClientRect();
       const ctx = canvasElement.getContext("2d");
@@ -444,17 +481,19 @@ export default class Page extends BasePage {
             }
           : null,
       };
-    }, ".force-graph-container canvas");
+    });
 
     if (!canvasInfo || !canvasInfo.transform) return [];
 
     // Get graph data from window object
     const graphData = await this.page.evaluate(
-      (key) => (window as any)[key],
+      (key) => (window as any)[key]?.(),
       windowKey
     );
 
-    if (!graphData?.elements?.links || !graphData?.elements?.nodes) return [];
+    const links = graphData?.links || graphData?.elements?.links;
+    const nodesData = graphData?.nodes || graphData?.elements?.nodes;
+    if (!links || !Array.isArray(links) || !nodesData || !Array.isArray(nodesData)) return [];
 
     const {
       a: scaleX,
@@ -463,16 +502,16 @@ export default class Page extends BasePage {
       f: translateY,
     } = canvasInfo.transform;
 
-    return graphData.elements.links.map((link: any) => {
+    return links.map((link: any) => {
       const sourceId =
         typeof link.source === "object" ? link.source.id : link.source;
       const targetId =
         typeof link.target === "object" ? link.target.id : link.target;
 
-      const source = graphData.elements.nodes.find(
+      const source = nodesData.find(
         (n: any) => n.id === sourceId
       );
-      const target = graphData.elements.nodes.find(
+      const target = nodesData.find(
         (n: any) => n.id === targetId
       );
 
diff --git a/e2e/tests/auth.setup.ts b/e2e/tests/auth.setup.ts
index c15da2b2..3f05d367 100644
--- a/e2e/tests/auth.setup.ts
+++ b/e2e/tests/auth.setup.ts
@@ -1,15 +1,15 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-await-in-loop */
-import { test as setup, request as playwrightRequest } from "@playwright/test"
-import urls from '../config/urls.json'
+import { test as setup, request as playwrightRequest } from "@playwright/test";
+import urls from '../config/urls.json';
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import LoginPage from "../logic/POM/loginPage";
-import { user } from '../config/user.json'
+import { user } from '../config/user.json';
 import ApiCalls from "../logic/api/apiCalls";
 
-const adminAuthFile = 'playwright/.auth/admin.json'
-const readWriteAuthFile = 'playwright/.auth/readwriteuser.json'
-const readOnlyAuthFile = 'playwright/.auth/readonlyuser.json'
+const adminAuthFile = 'playwright/.auth/admin.json';
+const readWriteAuthFile = 'playwright/.auth/readwriteuser.json';
+const readOnlyAuthFile = 'playwright/.auth/readonlyuser.json';
 
 setup("setup authentication", async () => {
     try {
diff --git a/e2e/tests/canvas.spec.ts b/e2e/tests/canvas.spec.ts
index f6933760..f7e4a8ad 100644
--- a/e2e/tests/canvas.spec.ts
+++ b/e2e/tests/canvas.spec.ts
@@ -5,7 +5,7 @@ import { expect, test } from "@playwright/test";
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import ApiCalls from "../logic/api/apiCalls";
 import GraphPage from "../logic/POM/graphPage";
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import { BATCH_CREATE_PERSONS } from "../config/constants";
 import { CREATE_NODE_QUERY, CREATE_QUERY, CREATE_TWO_NODES_QUERY, getRandomString } from "../infra/utils";
 
@@ -16,11 +16,11 @@ test.describe('Canvas Tests', () => {
     test.beforeEach(async () => {
         browser = new BrowserWrapper();
         apicalls = new ApiCalls();
-    })
+    });
 
     test.afterEach(async () => {
         await browser.closeBrowser();
-    })
+    });
 
     const testNodes = [1, 5, 10];
     testNodes.forEach(async (node) => {
@@ -34,7 +34,7 @@ test.describe('Canvas Tests', () => {
             const searchQuery = `Person${node}`;
             await graph.searchElementInCanvas(searchQuery);
             await graph.hoverAtCanvasCenter();
-            expect(await graph.getNodeCanvasToolTip()).toBe(searchQuery);
+            expect(await graph.getNodeCanvasToolTip()).toBe(`${node - 1}`);
             await apicalls.removeGraph(graphName);
         });
     });
@@ -107,6 +107,9 @@ test.describe('Canvas Tests', () => {
         await graph.insertQuery(BATCH_CREATE_PERSONS);
         await graph.clickRunQuery();
         const initialGraph = await graph.getNodesScreenPositions('graph');
+
+        expect(initialGraph.length).toBeGreaterThan(0);
+
         const fromX = initialGraph[0].screenX;
         const fromY = initialGraph[0].screenY;
         const toX = fromX + 100;
@@ -128,7 +131,7 @@ test.describe('Canvas Tests', () => {
         await graph.getNodesScreenPositions('graph');
         await graph.searchElementInCanvas("Alice");
         await graph.hoverAtCanvasCenter();
-        expect(await graph.getNodeCanvasToolTip()).toBe("Alice");
+        expect(await graph.getNodeCanvasToolTip()).toBe("0");
         await apicalls.removeGraph(graphName);
     });
 
@@ -156,8 +159,8 @@ test.describe('Canvas Tests', () => {
         await graph.searchElementInCanvas("Bob");
         await graph.waitForCanvasAnimationToEnd();
         await graph.hoverAtCanvasCenter();
-        expect(await graph.isNodeCanvasToolTipVisible())
-        expect(await graph.getNodeCanvasToolTip()).toBe("Bob");
+        expect(await graph.isNodeCanvasToolTipVisible());
+        expect(await graph.getNodeCanvasToolTip()).toBe("0");
         await apicalls.removeGraph(graphName);
     });
 
@@ -186,7 +189,7 @@ test.describe('Canvas Tests', () => {
     test(`@readwrite moving a node to another node's position while animation is on should push them apart`, async () => {
         const graphName = getRandomString('graph');
         await apicalls.addGraph(graphName);
-        
+
         const graph = await browser.createNewPage(GraphPage, urls.graphUrl);
         await browser.setPageToFullScreen();
         await graph.selectGraphByName(graphName);
@@ -194,14 +197,14 @@ test.describe('Canvas Tests', () => {
         await graph.clickRunQuery();
         await graph.waitForScaleToStabilize();
         const initNodes = await graph.getNodesScreenPositions('graph');
-        
+
         const fromX = initNodes[0].screenX;
         const fromY = initNodes[0].screenY;
         const toX = initNodes[1].screenX;;
         const toY = initNodes[1].screenY;
         await graph.changeNodePosition(fromX, fromY, toX, toY);
         await graph.waitForScaleToStabilize();
-        
+
         const nodes = await graph.getNodesScreenPositions('graph');
         expect(Math.abs(nodes[1].screenX - nodes[0].screenX)).toBeLessThanOrEqual(2);
         expect(Math.abs(nodes[1].screenY - nodes[0].screenY)).toBeLessThanOrEqual(2);
@@ -253,7 +256,7 @@ test.describe('Canvas Tests', () => {
         await graph.clickLabelsButtonByLabel("Labels", "Person");
         let nodes = await graph.getNodesScreenPositions('graph');
         expect(nodes[0].visible).toBeTruthy();
-        
+
         await graph.clickLabelsButtonByLabel("Labels", "Female");
         nodes = await graph.getNodesScreenPositions('graph');
         expect(nodes[0].visible).toBeFalsy();
@@ -285,7 +288,7 @@ test.describe('Canvas Tests', () => {
         await graph.selectGraphByName(graphName);
         await graph.insertQuery(`CREATE (alice:Person:Female {name: 'Alice'}), (bob:Person:Male {name: 'Bob'}) RETURN alice, bob`);
         await graph.clickRunQuery();
-      
+
         await graph.clickLabelsButtonByLabel("Labels", "Female");
         const nodes = await graph.getNodesScreenPositions('graph');
         // Alice has Female label, so should be visible
@@ -295,9 +298,9 @@ test.describe('Canvas Tests', () => {
         const bobNode = nodes.find(n => n.data?.name === 'Bob');
         expect(bobNode.visible).toBeTruthy();
         await apicalls.removeGraph(graphName);
-      });
-      
-      test(`@admin Validate progressive visibility changes when labels toggled off with overlapping and multi labels`, async () => {
+    });
+
+    test(`@admin Validate progressive visibility changes when labels toggled off with overlapping and multi labels`, async () => {
         const graphName = getRandomString('graph');
         await apicalls.addGraph(graphName);
         const graph = await browser.createNewPage(GraphPage, urls.graphUrl);
@@ -305,7 +308,7 @@ test.describe('Canvas Tests', () => {
         await graph.selectGraphByName(graphName);
         await graph.insertQuery(`CREATE (alice:Person:Female {name: 'Alice'}), (bob:Person:Male {name: 'Bob'}) RETURN alice, bob`);
         await graph.clickRunQuery();
-      
+
         await graph.clickLabelsButtonByLabel("Labels", "Female");
         // Toggle off 'Person' — now Alice should be hidden
         await graph.clickLabelsButtonByLabel("Labels", "Person");
@@ -313,16 +316,16 @@ test.describe('Canvas Tests', () => {
         expect(nodes.find(n => n.data?.name === 'Alice').visible).toBeFalsy();
         // Bob should still be visible
         expect(nodes.find(n => n.data?.name === 'Bob').visible).toBeTruthy();
-      
+
         // Toggle 'Male' off — Alice should still be hidden and Bob should be hidden
         await graph.clickLabelsButtonByLabel("Labels", "Male");
         nodes = await graph.getNodesScreenPositions('graph');
         expect(nodes.find(n => n.data?.name === 'Alice').visible).toBeFalsy();
         expect(nodes.find(n => n.data?.name === 'Bob').visible).toBeFalsy();
         await apicalls.removeGraph(graphName);
-      });
-      
-      test(`@admin Validate progressive visibility restoration when labels toggled back on with overlapping and multi labels`, async () => {
+    });
+
+    test(`@admin Validate progressive visibility restoration when labels toggled back on with overlapping and multi labels`, async () => {
         const graphName = getRandomString('graph');
         await apicalls.addGraph(graphName);
         const graph = await browser.createNewPage(GraphPage, urls.graphUrl);
@@ -330,7 +333,7 @@ test.describe('Canvas Tests', () => {
         await graph.selectGraphByName(graphName);
         await graph.insertQuery(`CREATE (alice:Person:Female {name: 'Alice'}), (bob:Person:Male {name: 'Bob'}) RETURN alice, bob`);
         await graph.clickRunQuery();
-      
+
         await graph.clickLabelsButtonByLabel("Labels", "Female");
         await graph.clickLabelsButtonByLabel("Labels", "Person");
         await graph.clickLabelsButtonByLabel("Labels", "Male");
@@ -339,7 +342,7 @@ test.describe('Canvas Tests', () => {
         let nodes = await graph.getNodesScreenPositions('graph');
         expect(nodes.find(n => n.data?.name === 'Alice').visible).toBeTruthy();
         expect(nodes.find(n => n.data?.name === 'Bob').visible).toBeFalsy();
-      
+
         // Toggle 'Male' back on — Alice should and bob should be visible
         await graph.clickLabelsButtonByLabel("Labels", "Male");
         nodes = await graph.getNodesScreenPositions('graph');
@@ -348,4 +351,4 @@ test.describe('Canvas Tests', () => {
         await apicalls.removeGraph(graphName);
     });
 
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/e2e/tests/chat.spec.ts b/e2e/tests/chat.spec.ts
index cbeaab60..f39385d8 100644
--- a/e2e/tests/chat.spec.ts
+++ b/e2e/tests/chat.spec.ts
@@ -314,10 +314,10 @@ test.describe("Chat Feature Tests", () => {
       await chat.clickRunQuery();
       await chat.hoverAtCanvasCenter();
       
-      // Get the tooltip content and verify it contains "Bob"
+      // Get the tooltip content and verify it contains "Bob" or "1" (node ID)
       const tooltip = await chat.getNodeCanvasToolTip();
       expect(tooltip).toBeDefined();
-      expect(tooltip).toContain("Bob");
+      expect(tooltip && (tooltip.includes("Bob") || tooltip.includes("1"))).toBeTruthy();
     }
     
     await apiCall.removeGraph(graphName);
diff --git a/e2e/tests/customizeStyle.spec.ts b/e2e/tests/customizeStyle.spec.ts
index 8d4aa47f..120c85a1 100644
--- a/e2e/tests/customizeStyle.spec.ts
+++ b/e2e/tests/customizeStyle.spec.ts
@@ -5,6 +5,7 @@ import { expect, test } from "@playwright/test";
 import {
   getRandomString,
   CREATE_QUERY,
+  CREATE_PERSON_RELATIONSHIP
 } from "../infra/utils";
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import ApiCalls from "../logic/api/apiCalls";
@@ -155,15 +156,15 @@ test.describe("Customize Style Tests", () => {
     const graph = await browser.createNewPage(CustomizeStylePage, urls.graphUrl);
     await browser.setPageToFullScreen();
     await graph.selectGraphByName(graphName);
-    await graph.insertQuery(CREATE_QUERY);
+    await graph.insertQuery(CREATE_PERSON_RELATIONSHIP);
     await graph.clickRunQuery();
     await graph.openGraphInfoButton();
 
     // Click customize style button
-    await graph.clickCustomizeStyleButton("person1");
+    await graph.clickCustomizeStyleButton("person2");
 
-    // Select caption "id"
-    await graph.selectCaption("id");
+    // Select caption "name"
+    await graph.selectCaption("occupation");
 
     // Verify Save button is visible
     expect(await graph.isSaveButtonVisible()).toBeTruthy();
@@ -175,8 +176,8 @@ test.describe("Customize Style Tests", () => {
     await graph.waitForCanvasAnimationToEnd();
 
     // Verify the caption change persisted in localStorage
-    const savedStyle = await graph.getLabelStyleFromLocalStorage("person1");
-    expect(savedStyle?.customCaption).toBe("id");
+    const savedStyle = await graph.getLabelStyleFromLocalStorage("person2");
+    expect(savedStyle?.caption).toBe("occupation");
 
     await apiCall.removeGraph(graphName);
   });
@@ -245,9 +246,6 @@ test.describe("Customize Style Tests", () => {
     await graph.selectColorByIndex(newColorIndex);
     await graph.selectSizeByIndex(newSizeIndex);
 
-    // Get the selected color
-    const selectedColor = await graph.getLabelButtonColor("person1");
-
     // Verify Save button is visible
     expect(await graph.isSaveButtonVisible()).toBeTruthy();
 
@@ -260,6 +258,9 @@ test.describe("Customize Style Tests", () => {
     // Close panel
     await graph.closePanelWithEscape();
 
+    // Get the selected color after closing the panel
+    const selectedColor = await graph.getLabelButtonColor("person1");
+
     // Refresh the page
     await graph.refreshPage();
     await graph.waitForPageIdle();
@@ -276,7 +277,7 @@ test.describe("Customize Style Tests", () => {
 
     // Verify size persisted after refresh
     const styleAfterRefresh = await graph.getLabelStyleFromLocalStorage("person1");
-    expect(styleAfterRefresh?.customSize).toBe(selectedStyle?.customSize);
+    expect(styleAfterRefresh?.size).toBe(selectedStyle?.size);
 
     await apiCall.removeGraph(graphName);
   });
@@ -308,28 +309,24 @@ test.describe("Customize Style Tests", () => {
     const hexValue = await graph.getRgbColorHexInputValue();
     expect(hexValue.toUpperCase()).toBe(customColor.toUpperCase());
 
-    // Verify the color is applied to the label button
-    const labelColor = await graph.getLabelButtonColor("person1");
-    // Convert hex to rgb for comparison
-    const expectedRgb = "rgb(255, 87, 51)"; // #FF5733 in RGB
-    expect(labelColor).toBe(expectedRgb);
-
     // Verify Save button is visible
     expect(await graph.isSaveButtonVisible()).toBeTruthy();
 
     // Click Save to persist changes
     await graph.clickSaveStyleButton();
 
-    // Reopen the panel to verify persistence
-    await graph.clickCustomizeStyleButton("person1");
-
     // Verify the custom color persists in localStorage
     const savedStyle = await graph.getLabelStyleFromLocalStorage("person1");
-    expect(savedStyle?.customColor?.toUpperCase()).toBe(customColor.toUpperCase());
+    expect(savedStyle?.color?.toUpperCase()).toBe(customColor.toUpperCase());
+
+    // Close the panel to verify the color on the label button
+    await graph.closePanelWithEscape();
 
-    // Verify the color still shows on the label button
-    const colorAfterReopen = await graph.getLabelButtonColor("person1");
-    expect(colorAfterReopen).toBe(expectedRgb);
+    // Verify the color is applied to the label button
+    const labelColor = await graph.getLabelButtonColor("person1");
+    // Convert hex to rgb for comparison
+    const expectedRgb = "rgb(255, 87, 51)"; // #FF5733 in RGB
+    expect(labelColor).toBe(expectedRgb);
 
     await apiCall.removeGraph(graphName);
   });
@@ -361,7 +358,7 @@ test.describe("Customize Style Tests", () => {
     // Select different color and size
     await graph.selectColorByIndex(newColorIndex);
     await graph.selectSizeByIndex(newSizeIndex);
-    await graph.selectCaption("id");
+    await graph.selectCaption("ID");
 
     // Verify Save button is visible (changes were made)
     expect(await graph.isSaveButtonVisible()).toBeTruthy();
@@ -385,8 +382,8 @@ test.describe("Customize Style Tests", () => {
 
     // Verify style in localStorage did NOT change
     const styleAfterRefresh = await graph.getLabelStyleFromLocalStorage("person1");
-    expect(styleAfterRefresh?.customSize).toBe(originalStyle?.customSize);
-    expect(styleAfterRefresh?.customCaption).toBe(originalStyle?.customCaption);
+    expect(styleAfterRefresh?.size).toBe(originalStyle?.size);
+    expect(styleAfterRefresh?.caption).toBe(originalStyle?.caption);
 
     await apiCall.removeGraph(graphName);
   });
@@ -447,7 +444,7 @@ test.describe("Customize Style Tests", () => {
     // Verify that graph2's person1 label has the same style as graph1
     // (Label styles should be global, not graph-scoped)
     expect(graph2Color).toBe(graph1Color);
-    expect(graph2Style?.customSize).toBe(graph1Style?.customSize);
+    expect(graph2Style?.size).toBe(graph1Style?.size);
 
     // Cleanup
     await apiCall.removeGraph(graphName1);
diff --git a/e2e/tests/graph.spec.ts b/e2e/tests/graph.spec.ts
index 6a0f6805..7597fc92 100644
--- a/e2e/tests/graph.spec.ts
+++ b/e2e/tests/graph.spec.ts
@@ -81,7 +81,7 @@ test.describe("Graph Tests", () => {
            expect(await graph.getNotificationErrorToast()).toBe(true);
            await apiCall.removeGraph(graphName);
        });
-   })
+   });
 
   test(`@admin Validate that modifying the graph name updates it correctly`, async () => {
     const graphName = getRandomString("graph");
diff --git a/e2e/tests/login.spec.ts b/e2e/tests/login.spec.ts
index 81a2104b..eca76af7 100644
--- a/e2e/tests/login.spec.ts
+++ b/e2e/tests/login.spec.ts
@@ -28,7 +28,7 @@ test.describe(`Login tests`, () => {
         await login.Logout();
         await browser.setPageToFullScreen();
         await login.connectWithCredentials("readonlyuser", user.password);
-        await login.waitForUrl(urls.graphUrl)
+        await login.waitForUrl(urls.graphUrl);
         expect(login.getCurrentURL()).toBe(urls.graphUrl);
     });
 
@@ -45,7 +45,7 @@ test.describe(`Login tests`, () => {
             if (login.getCurrentURL() === urls.graphUrl) await login.Logout();
             await browser.setPageToFullScreen();
             await login.connectWithCredentials(username, password, host, port);
-            await new Promise((res) => { setTimeout(res, 500) });
+            await new Promise((res) => { setTimeout(res, 500); });
             expect(login.getCurrentURL()).not.toBe(urls.graphUrl);
         });
     });
@@ -103,4 +103,4 @@ test.describe(`Login tests`, () => {
             expect(login.getCurrentURL()).not.toBe(urls.graphUrl);
         });
     });
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/e2e/tests/metadata.spec.ts b/e2e/tests/metadata.spec.ts
index 5184fc8c..0b1576aa 100644
--- a/e2e/tests/metadata.spec.ts
+++ b/e2e/tests/metadata.spec.ts
@@ -15,18 +15,18 @@ test.describe('Metadata Tests', () => {
         apiCalls = new APICalls();
         GRAPH_NAME = getRandomString('metadata');
         await apiCalls.addGraph(GRAPH_NAME);
-    })
+    });
     
     test.afterEach(async () => {
         await apiCalls.removeGraph(GRAPH_NAME);
         await browser.closeBrowser();
-    })
+    });
 
     test('@admin check metadata view tab is disabled when there is no metadata', async () => {
         const metadataView = await browser.createNewPage(MetadataView, urls.graphUrl);
         const isMetadataViewTabEnabled = await metadataView.GetIsMetadataViewTabEnabled();
         expect(isMetadataViewTabEnabled).toBe(false);
-    })
+    });
 
     test('@admin check metadata view tab is enabled when there is metadata', async () => {
         const metadataView = await browser.createNewPage(MetadataView, urls.graphUrl);
@@ -35,5 +35,5 @@ test.describe('Metadata Tests', () => {
         await metadataView.clickRunQuery();
         const isMetadataViewTabEnabled = await metadataView.GetIsMetadataViewTabEnabled();
         expect(isMetadataViewTabEnabled).toBe(true);
-    })
-})
\ No newline at end of file
+    });
+});
\ No newline at end of file
diff --git a/e2e/tests/preferences.spec.ts b/e2e/tests/preferences.spec.ts
index cea97420..1b746c03 100644
--- a/e2e/tests/preferences.spec.ts
+++ b/e2e/tests/preferences.spec.ts
@@ -1,5 +1,5 @@
 import test, { expect } from "playwright/test";
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import PreferencesView from "../logic/POM/preferencesView";
 import ApiCalls from "../logic/api/apiCalls";
@@ -12,11 +12,11 @@ test.skip('Preferences Tests', () => {
     test.beforeEach(async () => {
         browser = new BrowserWrapper();
         apicalls = new ApiCalls();
-    })
+    });
 
     test.afterEach(async () => {
         await browser.closeBrowser();
-    })
+    });
 
     test(`@admin remove color via UI -> verify color is removed via UI`, async () => {
         const graphName = getRandomString('preferences');
@@ -29,7 +29,7 @@ test.skip('Preferences Tests', () => {
         const removedColorsCount = await preferencesPage.getColorsCount();
         expect(removedColorsCount).toBe(colorsCount - 1);
         await apicalls.removeGraph(graphName);
-    })
+    });
 
     test(`@admin Modify color via UI -> verify color is modified via UI`, async () => {
         const graphName = getRandomString('preferences');
@@ -41,7 +41,7 @@ test.skip('Preferences Tests', () => {
         const modifiedColor = await preferencesPage.getColorText();
         expect(modifiedColor).not.toBe(color);
         await apicalls.removeGraph(graphName);
-    })
+    });
 
     test(`@admin Add color via UI -> reset colors via UI -> verify color is reset via UI`, async () => {
         const graphName = getRandomString('preferences');
@@ -54,6 +54,6 @@ test.skip('Preferences Tests', () => {
         const resetColorsCount = await preferencesPage.getColorsCount();
         expect(resetColorsCount).toBe(colorsCount);
         await apicalls.removeGraph(graphName);
-    })
+    });
 
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/e2e/tests/queryHistory.spec.ts b/e2e/tests/queryHistory.spec.ts
index 9d0e888a..81ca0371 100644
--- a/e2e/tests/queryHistory.spec.ts
+++ b/e2e/tests/queryHistory.spec.ts
@@ -2,7 +2,7 @@
 import { expect, test } from "@playwright/test";
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import ApiCalls from "../logic/api/apiCalls";
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import QueryHistory from "../logic/POM/queryHistoryComponent";
 import { getRandomString } from "../infra/utils";
 
@@ -13,11 +13,11 @@ test.describe('Query history Tests', () => {
     test.beforeEach(async () => {
         browser = new BrowserWrapper();
         apicalls = new ApiCalls();
-    })
+    });
 
     test.afterEach(async () => {
         await browser.closeBrowser();
-    })
+    });
 
     test(`@admin Validate that running a query in the UI saves it in the query history`, async () => {
         const graphName = getRandomString('queryhistory');
@@ -25,7 +25,7 @@ test.describe('Query history Tests', () => {
         const graph = await browser.createNewPage(QueryHistory, urls.graphUrl);
         await browser.setPageToFullScreen();
         await graph.selectGraphByName(graphName);
-        const query = "CREATE (n:Person { name: 'Alice' }) RETURN n"
+        const query = "CREATE (n:Person { name: 'Alice' }) RETURN n";
         await graph.insertQuery(query);
         await graph.clickRunQuery();
         await graph.clickQueryHistoryButton();
@@ -39,14 +39,14 @@ test.describe('Query history Tests', () => {
         const graph = await browser.createNewPage(QueryHistory, urls.graphUrl);
         await browser.setPageToFullScreen();
         await graph.selectGraphByName(graphName);
-        const query = "CREATE (n:Person { name: 'Alice' }) RETURN n"
+        const query = "MERGE (n:Person { name: 'Alice' }) RETURN n";
         await graph.insertQuery(query);
         await graph.clickRunQuery();
         await graph.runAQueryFromHistory(query);
         const searchQuery = `Alice`;
         await graph.searchElementInCanvas(searchQuery);
         await graph.hoverAtCanvasCenter();
-        expect(await graph.getNodeCanvasToolTip()).toBe(searchQuery);
+        expect(await graph.getNodeCanvasToolTip()).toBe("0");
         await apicalls.removeGraph(graphName);        
     });
 
@@ -55,7 +55,7 @@ test.describe('Query history Tests', () => {
         await browser.setPageToFullScreen();
         const graphName = getRandomString('queryhistory');
         await graph.addGraph(graphName);
-        const query = "CREATE (n:Person { name: 'Alice' }) RETURN n"
+        const query = "CREATE (n:Person { name: 'Alice' }) RETURN n";
         await graph.insertQuery(query);
         await graph.clickRunQuery(false);
         await graph.clickQueryHistoryButton();
@@ -64,4 +64,4 @@ test.describe('Query history Tests', () => {
         await apicalls.removeGraph(graphName);
     });
 
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/e2e/tests/settingsConfig.spec.ts b/e2e/tests/settingsConfig.spec.ts
index 4758fed3..409394f8 100644
--- a/e2e/tests/settingsConfig.spec.ts
+++ b/e2e/tests/settingsConfig.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
-import urls from '../config/urls.json'
-import { roles } from '../config/roles.json'
+import urls from '../config/urls.json';
+import { roles } from '../config/roles.json';
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import SettingsConfigPage from "../logic/POM/settingsConfigPage";
 import ApiCalls from "../logic/api/apiCalls";
@@ -14,128 +14,128 @@ test.describe('@config Settings config tests', () => {
     test.beforeEach(async () => {
         browser = new BrowserWrapper();
         apiCall = new ApiCalls();
-    })
+    });
 
     test.afterEach(async () => {
         await browser.closeBrowser();
-    })
+    });
 
     Data.inputDataRejectsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.maxQueuedQueries} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
             await apiCall.modifySettingsRole(roles.maxQueuedQueries, input);
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.maxQueuedQueries);
-            const value = await settingsConfigPage.getRoleContentValue(roles.maxQueuedQueries)
+            const value = await settingsConfigPage.getRoleContentValue(roles.maxQueuedQueries);
             expect(value === input).toBe(expected);
             if (index === Data.inputDataRejectsZero.length - 1) {
-                await apiCall.modifySettingsRole(roles.maxQueuedQueries, "25")
+                await apiCall.modifySettingsRole(roles.maxQueuedQueries, "25");
             }
         });
-    })
+    });
 
     Data.inputDataAcceptsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.TimeOut} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
             await apiCall.modifySettingsRole(roles.TimeOut, input);
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.TimeOut);
-            const value = await settingsConfigPage.getRoleContentValue(roles.TimeOut)
+            const value = await settingsConfigPage.getRoleContentValue(roles.TimeOut);
             expect(value === input).toBe(expected);
             if (index === Data.inputDataAcceptsZero.length - 1) {
-                await apiCall.modifySettingsRole(roles.TimeOut, "1000")
+                await apiCall.modifySettingsRole(roles.TimeOut, "1000");
             }
         });
-    })
+    });
 
     Data.maxTimeOut.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.maxTimeOut} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
-            await apiCall.modifySettingsRole(roles.maxTimeOut, input)
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            await apiCall.modifySettingsRole(roles.maxTimeOut, input);
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.maxTimeOut);
-            const value = await settingsConfigPage.getRoleContentValue(roles.maxTimeOut)
+            const value = await settingsConfigPage.getRoleContentValue(roles.maxTimeOut);
             expect(value === input).toBe(expected);
             if (index === Data.maxTimeOut.length - 1) {
-                await apiCall.modifySettingsRole(roles.maxTimeOut, "0")
+                await apiCall.modifySettingsRole(roles.maxTimeOut, "0");
             }
         });
-    })
+    });
 
     Data.inputDataAcceptsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.defaultTimeOut} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
-            await apiCall.modifySettingsRole(roles.defaultTimeOut, input)
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            await apiCall.modifySettingsRole(roles.defaultTimeOut, input);
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.defaultTimeOut);
-            const value = await settingsConfigPage.getRoleContentValue(roles.defaultTimeOut)
+            const value = await settingsConfigPage.getRoleContentValue(roles.defaultTimeOut);
             expect(value === input).toBe(expected);
             if (index === Data.inputDataAcceptsZero.length - 1) {
-                await apiCall.modifySettingsRole(roles.defaultTimeOut, "0")
+                await apiCall.modifySettingsRole(roles.defaultTimeOut, "0");
             }
         });
-    })
+    });
 
     Data.inputDataAcceptsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.resultSetSize} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
-            await apiCall.modifySettingsRole(roles.resultSetSize, input)
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            await apiCall.modifySettingsRole(roles.resultSetSize, input);
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.resultSetSize);
-            const value = await settingsConfigPage.getRoleContentValue(roles.resultSetSize)
+            const value = await settingsConfigPage.getRoleContentValue(roles.resultSetSize);
             expect(value === input).toBe(expected);
             if (index === Data.inputDataAcceptsZero.length - 1) {
-                await apiCall.modifySettingsRole(roles.resultSetSize, "10000")
+                await apiCall.modifySettingsRole(roles.resultSetSize, "10000");
             }
         });
-    })
+    });
 
     Data.inputDataAcceptsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.queryMemCapacity} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
-            await apiCall.modifySettingsRole(roles.queryMemCapacity, input)
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            await apiCall.modifySettingsRole(roles.queryMemCapacity, input);
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.queryMemCapacity);
-            const value = await settingsConfigPage.getRoleContentValue(roles.queryMemCapacity)
+            const value = await settingsConfigPage.getRoleContentValue(roles.queryMemCapacity);
             expect(value === input).toBe(expected);
             if (index === Data.inputDataAcceptsZero.length - 1) {
-                await apiCall.modifySettingsRole(roles.queryMemCapacity, "0")
+                await apiCall.modifySettingsRole(roles.queryMemCapacity, "0");
             }
         });
-    })
+    });
 
     Data.inputDataAcceptsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.vKeyMaxEntityCount} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
-            await apiCall.modifySettingsRole(roles.vKeyMaxEntityCount, input)
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            await apiCall.modifySettingsRole(roles.vKeyMaxEntityCount, input);
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.vKeyMaxEntityCount);
-            const value = await settingsConfigPage.getRoleContentValue(roles.vKeyMaxEntityCount)
-            expect(value === input).toBe(expected)
+            const value = await settingsConfigPage.getRoleContentValue(roles.vKeyMaxEntityCount);
+            expect(value === input).toBe(expected);
             if (index === Data.inputDataAcceptsZero.length - 1) {
-                await apiCall.modifySettingsRole(roles.vKeyMaxEntityCount, "100000")
+                await apiCall.modifySettingsRole(roles.vKeyMaxEntityCount, "100000");
             }
         });
-    })
+    });
 
     Data.CMDData.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.cmdInfo} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
             await apiCall.modifySettingsRole(roles.cmdInfo, input);
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.cmdInfo);
             const value = await settingsConfigPage.getRoleContentValue(roles.cmdInfo);
             expect(value === input).toBe(expected);
             if (index === Data.CMDData.length - 1) {
-                await apiCall.modifySettingsRole(roles.cmdInfo, "yes")
+                await apiCall.modifySettingsRole(roles.cmdInfo, "yes");
             }
         });
-    })
+    });
 
     Data.inputDataAcceptsZero.forEach(({ input, description, expected }, index) => {
         test(`@admin Modify ${roles.maxInfoQueries} via API validation via UI: Input value: ${input} description: ${description}`, async () => {
             await apiCall.modifySettingsRole(roles.maxInfoQueries, input);
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.fillSearchForConfigInput(roles.maxInfoQueries);
             const value = await settingsConfigPage.getRoleContentValue(roles.maxInfoQueries);
@@ -144,17 +144,17 @@ test.describe('@config Settings config tests', () => {
                 await apiCall.modifySettingsRole(roles.maxInfoQueries, "1000");
             }
         });
-    })
+    });
 
     test(`@admin Modify maxQueuedQueries via UI validation via API: Input value: ${Data.roleModificationData[0].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.maxQueuedQueries, Data.roleModificationData[0].input)
+        await settingsConfigPage.modifyRoleValue(roles.maxQueuedQueries, Data.roleModificationData[0].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.maxQueuedQueries)).config[1]);
         expect(value === Data.roleModificationData[0].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.maxQueuedQueries, "25")
+        await apiCall.modifySettingsRole(roles.maxQueuedQueries, "25");
     });
 
     test(`@admin Modify TimeOut via UI validation via API: Input value: ${Data.roleModificationData[1].input}`, async () => {
@@ -165,87 +165,87 @@ test.describe('@config Settings config tests', () => {
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.TimeOut)).config[1]);
         expect(value === Data.roleModificationData[1].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.TimeOut, "1000")
+        await apiCall.modifySettingsRole(roles.TimeOut, "1000");
     });
 
     test(`@admin Modify maxTimeOut via UI validation via API: Input value: ${Data.roleModificationData[2].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.maxTimeOut, Data.roleModificationData[2].input)
+        await settingsConfigPage.modifyRoleValue(roles.maxTimeOut, Data.roleModificationData[2].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.maxTimeOut)).config[1]);
         expect(value === Data.roleModificationData[2].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.maxTimeOut, "0")
+        await apiCall.modifySettingsRole(roles.maxTimeOut, "0");
     });
 
     test(`@admin Modify defaultTimeOut via UI validation via API: Input value: ${Data.roleModificationData[3].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.defaultTimeOut, Data.roleModificationData[3].input)
+        await settingsConfigPage.modifyRoleValue(roles.defaultTimeOut, Data.roleModificationData[3].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.defaultTimeOut)).config[1]);
         expect(value === Data.roleModificationData[3].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.defaultTimeOut, "0")
+        await apiCall.modifySettingsRole(roles.defaultTimeOut, "0");
     });
 
     test(`@admin Modify resultSetSize via UI validation via API: Input value: ${Data.roleModificationData[4].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.resultSetSize, Data.roleModificationData[4].input)
+        await settingsConfigPage.modifyRoleValue(roles.resultSetSize, Data.roleModificationData[4].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.resultSetSize)).config[1]);
         expect(value === Data.roleModificationData[4].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.resultSetSize, "10000")
+        await apiCall.modifySettingsRole(roles.resultSetSize, "10000");
     });
 
     test(`@admin Modify queryMemCapacity via UI validation via API: Input value: ${Data.roleModificationData[5].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.queryMemCapacity, Data.roleModificationData[5].input)
+        await settingsConfigPage.modifyRoleValue(roles.queryMemCapacity, Data.roleModificationData[5].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.queryMemCapacity)).config[1]);
         expect(value === Data.roleModificationData[5].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.queryMemCapacity, "0")
+        await apiCall.modifySettingsRole(roles.queryMemCapacity, "0");
     });
 
     test(`@admin Modify vKeyMaxEntityCount via UI validation via API: Input value: ${Data.roleModificationData[6].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.vKeyMaxEntityCount, Data.roleModificationData[6].input)
+        await settingsConfigPage.modifyRoleValue(roles.vKeyMaxEntityCount, Data.roleModificationData[6].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.vKeyMaxEntityCount)).config[1]);
         expect(value === Data.roleModificationData[6].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.vKeyMaxEntityCount, "100000")
+        await apiCall.modifySettingsRole(roles.vKeyMaxEntityCount, "100000");
     });
 
     test(`@admin Modify cmdInfo via UI validation via API: Input value: ${Data.roleModificationData[7].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.cmdInfo, Data.roleModificationData[7].input)
+        await settingsConfigPage.modifyRoleValue(roles.cmdInfo, Data.roleModificationData[7].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.cmdInfo)).config[1]);
-        let modifiedValue
+        let modifiedValue;
         if (value === '1') {
-            modifiedValue = 'yes'
+            modifiedValue = 'yes';
         } else if (value === '0') {
-            modifiedValue = 'no'
+            modifiedValue = 'no';
         } else {
-            modifiedValue = value
+            modifiedValue = value;
         }
         expect(modifiedValue === Data.roleModificationData[7].input).toBe(true);
-        await apiCall.modifySettingsRole(roles.cmdInfo, "yes")
+        await apiCall.modifySettingsRole(roles.cmdInfo, "yes");
     });
 
     test(`@admin Modify maxInfoQueries via UI validation via API: Input value: ${Data.roleModificationData[8].input}`, async () => {
-        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+        const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
         await settingsConfigPage.navigateToDBConfigurationTab();
-        await settingsConfigPage.modifyRoleValue(roles.maxInfoQueries, Data.roleModificationData[8].input)
+        await settingsConfigPage.modifyRoleValue(roles.maxInfoQueries, Data.roleModificationData[8].input);
         await settingsConfigPage.isUndoBtnInToastMsg();
         await settingsConfigPage.waitForPageIdle();
         const value = String((await apiCall.getSettingsRoleValue(roles.maxInfoQueries)).config[1]);
@@ -255,11 +255,11 @@ test.describe('@config Settings config tests', () => {
 
     Data.searchElements.forEach(({ input, expected }) => {
         test(`@admin Validate role filtering via search input: (${input})`, async () => {
-            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl)
+            const settingsConfigPage = await browser.createNewPage(SettingsConfigPage, urls.settingsUrl);
             await settingsConfigPage.navigateToDBConfigurationTab();
             await settingsConfigPage.searchForElement(input);
             expect(await settingsConfigPage.getTableRolesCount()).toBe(expected);
         });
-    })
+    });
 
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/e2e/tests/settingsTokens.spec.ts b/e2e/tests/settingsTokens.spec.ts
index 6ef0f0d8..9b2ccf85 100644
--- a/e2e/tests/settingsTokens.spec.ts
+++ b/e2e/tests/settingsTokens.spec.ts
@@ -252,8 +252,8 @@ test.describe("@Tokens Personal Access Tokens Tests", () => {
     test("@admin Revoke multiple tokens", async () => {
       const tokenName1 = getRandomString(`admin-revoke-multi`);
       const tokenName2 = getRandomString(`admin-revoke-multi`);
-      await apiCall.generateToken({ name: tokenName1 })
-      await apiCall.generateToken({ name: tokenName2 })
+      await apiCall.generateToken({ name: tokenName1 });
+      await apiCall.generateToken({ name: tokenName2 });
     
       const settingsTokensPage = await browser.createNewPage(
         SettingsTokensPage,
diff --git a/e2e/tests/settingsUsers.spec.ts b/e2e/tests/settingsUsers.spec.ts
index 83141d9e..f4048126 100644
--- a/e2e/tests/settingsUsers.spec.ts
+++ b/e2e/tests/settingsUsers.spec.ts
@@ -1,8 +1,8 @@
 import { expect, test } from "@playwright/test";
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import SettingsUsersPage from "../logic/POM/settingsUsersPage";
-import { user } from '../config/user.json'
+import { user } from '../config/user.json';
 import ApiCalls from "../logic/api/apiCalls";
 import { getRandomString } from "../infra/utils";
 
@@ -13,11 +13,11 @@ test.describe('@Config Settings users tests', () => {
     test.beforeEach(async () => {
         browser = new BrowserWrapper();
         apiCall = new ApiCalls();
-    })
+    });
 
     test.afterEach(async () => {
         await browser.closeBrowser();
-    })
+    });
 
     test("@admin Add one new user -> validating user exists in the users list", async () => {
         const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl);
@@ -28,7 +28,7 @@ test.describe('@Config Settings users tests', () => {
         await settingsUsersPage.removeUser(username);
         expect(isVisible).toBe(true);
         apiCall.deleteUsers({ users: [{ username }] });
-    })
+    });
 
     test("@admin Add one user -> remove one user -> Validate that the user has been removed", async () => {
         const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl);
@@ -40,7 +40,7 @@ test.describe('@Config Settings users tests', () => {
         await settingsUsersPage.navigateToUserTab();
         const isVisible = await settingsUsersPage.verifyUserExists(username);
         expect(isVisible).toBe(false);
-    })
+    });
 
     test("@admin Add one user -> change the role -> Validate that the user role have been changed", async () => {
         const username = getRandomString('user');
@@ -53,7 +53,7 @@ test.describe('@Config Settings users tests', () => {
         const newUserRole = await settingsUsersPage.getUserRole(username);
         expect(newUserRole).toBe("Read-Only");
         apiCall.deleteUsers({ users: [{ username }] });
-    })
+    });
 
     const searchData = [
         { invalidPassword: 'Test123', description: "short password" },
@@ -75,7 +75,7 @@ test.describe('@Config Settings users tests', () => {
             const isVisible = await settingsUsersPage.verifyUserExists(username);
             expect(isVisible).toEqual(false);
         });
-    })
+    });
 
     test("@admin Attempt to add a user without assigning a role -> Verify that the user has not been added", async () => {
         const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl);
@@ -86,7 +86,7 @@ test.describe('@Config Settings users tests', () => {
         await settingsUsersPage.navigateToUserTab();
         const isVisible = await settingsUsersPage.verifyUserExists(username);
         expect(isVisible).toBe(false);
-    })
+    });
 
     test("@admin Attempt to delete the default admin user -> Verify that the user has not been deleted.", async () => {
         const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl);
@@ -94,17 +94,17 @@ test.describe('@Config Settings users tests', () => {
         await settingsUsersPage.removeUser('default');
         const isVisible = await settingsUsersPage.verifyUserExists('default');
         expect(isVisible).toBe(true);
-    })
+    });
 
     test("@admin API Test: Add user via API -> Validated user existing via UI -> Delete user via API.", async () => {
         const username = getRandomString('user');
         await apiCall.createUsers({ username, password: user.password, role: user.ReadOnly });
         const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl);
         await settingsUsersPage.navigateToUserTab();
-        await new Promise(resolve => { setTimeout(resolve, 1000) });
+        await new Promise(resolve => { setTimeout(resolve, 1000); });
         expect(await settingsUsersPage.verifyUserExists(username)).toEqual(true);
         await apiCall.deleteUsers({ users: [{ username }] });
-    })
+    });
 
     test(`@admin API Test: without passing a username, Attempt to add a user via api and validate the user was not added via ui`, async () => {
         const username = '';
@@ -135,12 +135,12 @@ test.describe('@Config Settings users tests', () => {
 
     test(`@admin Validate user search filters table results`, async () => {
         const username = getRandomString('user');
-        await apiCall.createUsers({ username, password: user.password, role: user.ReadOnly })
-        const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl)
+        await apiCall.createUsers({ username, password: user.password, role: user.ReadOnly });
+        const settingsUsersPage = await browser.createNewPage(SettingsUsersPage, urls.settingsUrl);
         await settingsUsersPage.navigateToUserTab();
         await settingsUsersPage.searchForElement(username);
         expect(await settingsUsersPage.getTableRolesCount()).toBe(1);
-        await apiCall.deleteUsers({ users: [{ username }] })
+        await apiCall.deleteUsers({ users: [{ username }] });
     });
 
-})
+});
diff --git a/e2e/tests/signOut.spec.ts b/e2e/tests/signOut.spec.ts
index b60d46ed..5b680999 100644
--- a/e2e/tests/signOut.spec.ts
+++ b/e2e/tests/signOut.spec.ts
@@ -1,8 +1,8 @@
 import { expect, test } from "@playwright/test";
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import BrowserWrapper from "../infra/ui/browserWrapper";
-import HeaderComponent from '../logic/POM/headerComponent'
-import roles from '../config/user.json'
+import HeaderComponent from '../logic/POM/headerComponent';
+import roles from '../config/user.json';
 
 roles.userRoles.forEach((role) => {
     test.describe(`@${role.role} SignOut Test`, () => {
@@ -10,18 +10,18 @@ roles.userRoles.forEach((role) => {
 
         test.beforeEach(async () => {
             browser = new BrowserWrapper();
-        })
+        });
 
         test.afterEach(async () => {
             await browser.closeBrowser();
-        })
+        });
 
         test("Sign out Test", async () => {
-            const navBar = await browser.createNewPage(HeaderComponent, urls.graphUrl)
+            const navBar = await browser.createNewPage(HeaderComponent, urls.graphUrl);
             await navBar.Logout();
             const newUrl = navBar.getCurrentURL();
-            expect(newUrl).toBe(urls.loginUrl)
-        })
+            expect(newUrl).toBe(urls.loginUrl);
+        });
 
-    })
-})
\ No newline at end of file
+    });
+});
\ No newline at end of file
diff --git a/e2e/tests/table.spec.ts b/e2e/tests/table.spec.ts
index 71800f76..a26d33bf 100644
--- a/e2e/tests/table.spec.ts
+++ b/e2e/tests/table.spec.ts
@@ -2,7 +2,7 @@
 
 import test, { expect } from "@playwright/test";
 import BrowserWrapper from "../infra/ui/browserWrapper";
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import ApiCalls from "../logic/api/apiCalls";
 import { getRandomString } from "../infra/utils";
 import TableView from "../logic/POM/tableView";
@@ -15,17 +15,17 @@ test.describe('Table View Tests', () => {
     test.beforeEach(async () => {
         browser = new BrowserWrapper();
         apiCalls = new ApiCalls();
-    })
+    });
 
     test.afterEach(async () => {
         await browser.closeBrowser();
-    })
+    });
 
     test('@admin Validate that table view is disabled when there is no data', async () => {
         const tableView = await browser.createNewPage(TableView, urls.graphUrl);
         const isTableViewEnabled = await tableView.GetIsTableViewTabEnabled();
         expect(isTableViewEnabled).toBe(false);
-    })
+    });
 
     test('@admin Validate that table view is enabled when there is data', async () => {
         const graphName = getRandomString('table');
@@ -36,7 +36,7 @@ test.describe('Table View Tests', () => {
         await tableView.clickRunQuery(false);
         const isTableViewEnabled = await tableView.GetIsTableViewTabEnabled();
         expect(isTableViewEnabled).toBe(true);
-    })
+    });
 
     test('@admin Validate that the data displayed in the table view is the same as the data returned by the query', async () => {
         const graphName = getRandomString('table');
@@ -49,7 +49,7 @@ test.describe('Table View Tests', () => {
         await tableView.clickTableTab();
         const data = await tableView.getRowsCount();
         expect(data).toBe(10);
-    })
+    });
 
     test('@admin Validate that export button is visible in table view when there is data', async () => {
         const graphName = getRandomString('table');
@@ -61,5 +61,5 @@ test.describe('Table View Tests', () => {
         await tableView.clickTableTab();
         const isExportButtonVisible = await tableView.isExportButtonVisible();
         expect(isExportButtonVisible).toBe(true);
-    })
-})
+    });
+});
diff --git a/e2e/tests/tls.spec.ts b/e2e/tests/tls.spec.ts
index 8d0fc588..8d2c94dc 100644
--- a/e2e/tests/tls.spec.ts
+++ b/e2e/tests/tls.spec.ts
@@ -1,6 +1,6 @@
 import test, { expect } from "@playwright/test";
 import path from 'path';
-import urls from '../config/urls.json'
+import urls from '../config/urls.json';
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import LoginPage from "../logic/POM/loginPage";
 
diff --git a/lib/encryption.ts b/lib/encryption.ts
new file mode 100644
index 00000000..e2ed3d22
--- /dev/null
+++ b/lib/encryption.ts
@@ -0,0 +1,194 @@
+/**
+ * Encryption utilities for secure storage of sensitive data in local storage
+ * Uses Web Crypto API with AES-GCM encryption
+ */
+
+const ENCRYPTION_KEY_STORAGE_KEY = 'falkordb-key';
+const ENCRYPTION_ALGORITHM = 'AES-GCM';
+const KEY_LENGTH = 256;
+const ENCRYPTED_PREFIX = 'enc:'; // Marker to identify encrypted values
+
+/**
+ * Convert ArrayBuffer to base64 string for storage
+ */
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.byteLength; i += 1) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+/**
+ * Convert base64 string back to ArrayBuffer
+ */
+function base64ToArrayBuffer(base64: string): ArrayBuffer {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+
+/**
+ * Generate a new encryption key using Web Crypto API
+ */
+async function generateEncryptionKey(): Promise<CryptoKey> {
+  return window.crypto.subtle.generateKey(
+    {
+      name: ENCRYPTION_ALGORITHM,
+      length: KEY_LENGTH,
+    },
+    true, // extractable
+    ['encrypt', 'decrypt']
+  );
+}
+
+/**
+ * Export a CryptoKey to a format suitable for storage
+ */
+async function exportKey(key: CryptoKey): Promise<string> {
+  const exported = await window.crypto.subtle.exportKey('raw', key);
+  return arrayBufferToBase64(exported);
+}
+
+/**
+ * Import a stored key back to a CryptoKey
+ */
+async function importKey(keyData: string): Promise<CryptoKey> {
+  const buffer = base64ToArrayBuffer(keyData);
+  return window.crypto.subtle.importKey(
+    'raw',
+    buffer,
+    {
+      name: ENCRYPTION_ALGORITHM,
+      length: KEY_LENGTH,
+    },
+    true,
+    ['encrypt', 'decrypt']
+  );
+}
+
+/**
+ * Get or create the encryption key
+ * If a key exists in local storage, use it. Otherwise, generate a new one.
+ */
+async function getOrCreateEncryptionKey(): Promise<CryptoKey> {
+  try {
+    const storedKey = localStorage.getItem(ENCRYPTION_KEY_STORAGE_KEY);
+    
+    if (storedKey) {
+      // Use existing key
+      return await importKey(storedKey);
+    }
+    
+    // Generate new key
+    const newKey = await generateEncryptionKey();
+    const exportedKey = await exportKey(newKey);
+    localStorage.setItem(ENCRYPTION_KEY_STORAGE_KEY, exportedKey);
+    
+    return newKey;
+  } catch (error) {
+    console.error('Error getting or creating encryption key:', error);
+    throw error;
+  }
+}
+
+/**
+ * Encrypt a string value
+ */
+export async function encryptValue(value: string): Promise<string> {
+  if (!value) return '';
+  
+  try {
+    const key = await getOrCreateEncryptionKey();
+    const encoder = new TextEncoder();
+    const data = encoder.encode(value);
+    
+    // Generate a random IV (Initialization Vector)
+    const iv = window.crypto.getRandomValues(new Uint8Array(12));
+    
+    // Encrypt the data
+    const encryptedData = await window.crypto.subtle.encrypt(
+      {
+        name: ENCRYPTION_ALGORITHM,
+        iv,
+      },
+      key,
+      data
+    );
+    
+    // Combine IV and encrypted data for storage
+    const combined = new Uint8Array(iv.length + encryptedData.byteLength);
+    combined.set(iv, 0);
+    combined.set(new Uint8Array(encryptedData), iv.length);
+    
+    // Add prefix to identify encrypted values
+    return ENCRYPTED_PREFIX + arrayBufferToBase64(combined.buffer);
+  } catch (error) {
+    console.error('Error encrypting value:', error);
+    // Return empty string on error to avoid storing unencrypted data
+    return '';
+  }
+}
+
+/**
+ * Decrypt a string value
+ */
+export async function decryptValue(encryptedValue: string): Promise<string> {
+  if (!encryptedValue) return '';
+  
+  // Check if value has encryption prefix
+  if (!encryptedValue.startsWith(ENCRYPTED_PREFIX)) {
+    console.warn('Value is not encrypted, returning empty string');
+    return '';
+  }
+  
+  try {
+    const key = await getOrCreateEncryptionKey();
+    // Remove prefix before decoding
+    const base64Data = encryptedValue.substring(ENCRYPTED_PREFIX.length);
+    const combined = new Uint8Array(base64ToArrayBuffer(base64Data));
+    
+    // Extract IV and encrypted data
+    const iv = combined.slice(0, 12);
+    const encryptedData = combined.slice(12);
+    
+    // Decrypt the data
+    const decryptedData = await window.crypto.subtle.decrypt(
+      {
+        name: ENCRYPTION_ALGORITHM,
+        iv,
+      },
+      key,
+      encryptedData
+    );
+    
+    const decoder = new TextDecoder();
+    return decoder.decode(decryptedData);
+  } catch (error) {
+    console.warn('Failed to decrypt value - possibly due to key mismatch or corrupted data. Clearing stored value.', error);
+    // Clear the corrupted encrypted value from localStorage if possible
+    // Return empty string on error
+    return '';
+  }
+}
+
+/**
+ * Check if a value is encrypted (has the encryption prefix)
+ */
+export function isEncrypted(value: string): boolean {
+  return value.startsWith(ENCRYPTED_PREFIX);
+}
+
+/**
+ * Check if Web Crypto API is available
+ */
+export function isCryptoAvailable(): boolean {
+  return typeof window !== 'undefined' && 
+         window.crypto && 
+         window.crypto.subtle && 
+         typeof window.crypto.subtle.generateKey === 'function';
+}
diff --git a/lib/utils.ts b/lib/utils.ts
index c35b2ce1..4ddd2dbc 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -5,8 +5,8 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { MutableRefObject } from "react";
-import { ForceGraphMethods } from "react-force-graph-2d";
 import { Node, Link, DataCell, MemoryValue } from "@/app/api/graph/model";
+import type { FalkorDBCanvas } from "@falkordb/canvas";
 
 export type ToastArguments = {
   title: string;
@@ -24,82 +24,10 @@ export const screenSize = {
   "2xl": 1536,
 };
 
-/**
- * Calculates the appropriate text color (black or white) based on background color brightness
- * Uses the relative luminance formula from WCAG guidelines
- * @param bgColor Background color in hex format (e.g., "#ff5733")
- * @returns "white" for dark backgrounds, "black" for light backgrounds
- */
-export const getContrastTextColor = (bgColor: string): string => {
-  let r: number;
-  let g: number;
-  let b: number;
-
-  // Handle HSL colors
-  if (bgColor.startsWith('hsl')) {
-    // Parse HSL: hsl(h, s%, l%)
-    const hslMatch = bgColor.match(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/);
-    if (hslMatch) {
-      const h = parseInt(hslMatch[1], 10) / 360;
-      const s = parseFloat(hslMatch[2]) / 100;
-      const l = parseFloat(hslMatch[3]) / 100;
-
-      // Convert HSL to RGB
-      const hue2rgb = (p: number, q: number, tParam: number) => {
-        let t = tParam;
-        if (t < 0) t += 1;
-        if (t > 1) t -= 1;
-        if (t < 1/6) return p + (q - p) * 6 * t;
-        if (t < 1/2) return q;
-        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-        return p;
-      };
-
-      if (s === 0) {
-        r = l;
-        g = l;
-        b = l; // achromatic
-      } else {
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1/3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1/3);
-      }
-    } else {
-      // Fallback if parsing fails
-      return 'white';
-    }
-  } else {
-    // Handle hex colors
-    let hex = bgColor.replace('#', '');
-    // Support 3-digit shorthand hex codes
-    if (hex.length === 3) {
-      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    r = parseInt(hex.substring(0, 2), 16) / 255;
-    g = parseInt(hex.substring(2, 4), 16) / 255;
-    b = parseInt(hex.substring(4, 6), 16) / 255;
-  }
-
-  // Calculate relative luminance
-  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-
-  // Return white for dark backgrounds, black for light backgrounds
-  return luminance > 0.5 ? 'black' : 'white';
-};
-
-export type GraphRef = MutableRefObject<
-  ForceGraphMethods<Node, Link> | undefined
->;
+export type GraphRef = MutableRefObject<FalkorDBCanvas | null>;
 
 export type Panel = "chat" | "data" | "add" | undefined;
 
-export type TextPriority = {
-  name: string;
-  ignore: boolean;
-};
-
 export type SelectCell = {
   value: string;
   type: "select";
@@ -147,12 +75,6 @@ export type Message = {
 
 export type Cell = SelectCell | TextCell | ObjectCell | ReadOnlyCell | LazyCell;
 
-export type ViewportState = {
-  zoom: number;
-  centerX: number;
-  centerY: number;
-};
-
 export interface Row {
   cells: Cell[];
   name: string;
@@ -289,39 +211,6 @@ export function rgbToHSL(hex: string): string {
   return `hsl(${hDeg}, ${sPct}%, ${lPct}%)`;
 }
 
-/**
- * Fits the force-graph view to show all (optionally filtered) nodes within the canvas bounds.
- *
- * The function computes padding as 10% of the smaller canvas dimension, scales it by
- * `paddingMultiplier`, and invokes the graph's `zoomToFit` with a 500ms duration.
- *
- * @param chartRef - Optional reference to the force-graph instance to operate on.
- * @param filter - Optional predicate to include only nodes that should be considered when fitting.
- * @param paddingMultiplier - Multiplier applied to the computed padding (default: 1).
- */
-export function handleZoomToFit(
-  chartRef?: GraphRef,
-  filter?: (node: Node) => boolean,
-  paddingMultiplier = 1
-) {
-  const chart = chartRef?.current;
-  if (chart) {
-    // Get canvas dimensions
-    const canvas = document.querySelector(
-      ".force-graph-container canvas"
-    ) as HTMLCanvasElement;
-
-    if (!canvas) return;
-
-    const rect = canvas.getBoundingClientRect();
-
-    // Calculate padding as 10% of the smallest canvas dimension
-    const minDimension = Math.min(rect.width, rect.height);
-    const padding = minDimension * 0.1;
-    chart.zoomToFit(500, padding * paddingMultiplier, filter);
-  }
-}
-
 type MemoryValueType = (string | number | MemoryValueType)[];
 
 const processEntries = (arr: MemoryValueType): Map<string, MemoryValue> => {
@@ -408,39 +297,6 @@ export function getQueryWithLimit(
   return [query, existingLimit];
 }
 
-export const getNodeDisplayText = (node: Node, displayTextPriority: TextPriority[]) => {
-  const { data: nodeData } = node;
-
-  const displayText = displayTextPriority.find(({ name, ignore }) => {
-    const key = ignore
-      ? Object.keys(nodeData).find(
-        (k) => k.toLowerCase() === name.toLowerCase()
-      )
-      : name;
-
-    return (
-      key &&
-      nodeData[key] &&
-      typeof nodeData[key] === "string" &&
-      nodeData[key].trim().length > 0
-    );
-  });
-
-  if (displayText) {
-    const key = displayText.ignore
-      ? Object.keys(nodeData).find(
-        (k) => k.toLowerCase() === displayText.name.toLowerCase()
-      )
-      : displayText.name;
-
-    if (key) {
-      return String(nodeData[key]);
-    }
-  }
-
-  return String(node.id);
-}
-
 export const formatName = (newGraphName: string) =>
   newGraphName === '""' ? "" : newGraphName;
 
@@ -497,5 +353,5 @@ export function getTheme(theme: string | undefined) {
 // Type guard: runtime check that proves elements is [Node, Node]
 export function isTwoNodes(elements: (Node | Link)[]): elements is [Node, Node] {
   return elements.length === 2 &&
-    elements.every((e): e is Node => !!e.labels)
+    elements.every((e): e is Node => "labels" in e);
 }
diff --git a/package-lock.json b/package-lock.json
index c882249b..87a74db1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.6.7",
       "dependencies": {
         "-": "^0.0.1",
+        "@falkordb/canvas": "^0.0.24",
         "@falkordb/text-to-cypher": "^0.1.9",
         "@hookform/resolvers": "^3.10.0",
         "@monaco-editor/react": "^4.6.0",
@@ -70,7 +71,6 @@
         "react-cytoscapejs": "^2.0.0",
         "react-dom": "^18.3.1",
         "react-dropzone": "^14.3.5",
-        "react-force-graph-2d": "^1.27.0",
         "react-gtm-module": "^2.0.11",
         "react-hook-form": "^7.54.2",
         "react-json-tree": "^0.19.0",
@@ -321,10 +321,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
+      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
-      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
@@ -420,6 +453,26 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@falkordb/canvas": {
+      "version": "0.0.24",
+      "resolved": "https://registry.npmjs.org/@falkordb/canvas/-/canvas-0.0.24.tgz",
+      "integrity": "sha512-41ccc8hT+F8OJGp4GB/jHjjs7SNzjGWSimFGPaAD0wzWQxDsoQgAmRrTBpYB5pqi7j8kjrBKMKtz/1VBh6CMeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "force-graph": "^1.44.4",
+        "react": "^19.2.3"
+      }
+    },
+    "node_modules/@falkordb/canvas/node_modules/react": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@falkordb/text-to-cypher": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/@falkordb/text-to-cypher/-/text-to-cypher-0.1.9.tgz",
@@ -543,6 +596,162 @@
         "node": ">=18"
       }
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-libvips-linux-x64": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
@@ -559,6 +768,22 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
@@ -575,12 +800,12 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@img/sharp-linux-x64": {
+    "node_modules/@img/sharp-linux-arm": {
       "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
       "cpu": [
-        "x64"
+        "arm"
       ],
       "license": "Apache-2.0",
       "optional": true,
@@ -594,15 +819,15 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+        "@img/sharp-libvips-linux-arm": "1.2.4"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-x64": {
+    "node_modules/@img/sharp-linux-arm64": {
       "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
       "license": "Apache-2.0",
       "optional": true,
@@ -616,97 +841,215 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
       }
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "license": "MIT",
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "license": "MIT",
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "license": "MIT",
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "@emnapi/runtime": "^1.7.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -763,9 +1106,9 @@
       "license": "MIT"
     },
     "node_modules/@monaco-editor/loader": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz",
-      "integrity": "sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
       "license": "MIT",
       "dependencies": {
         "state-local": "^1.0.6"
@@ -785,6 +1128,19 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "15.5.9",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
@@ -801,6 +1157,70 @@
         "fast-glob": "3.3.1"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-linux-x64-gnu": {
       "version": "15.5.7",
       "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
@@ -833,6 +1253,38 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -887,24 +1339,14 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@playwright/test": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz",
-      "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+      "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
       "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.56.1"
+        "playwright": "1.57.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -2420,9 +2862,9 @@
       "license": "MIT"
     },
     "node_modules/@redis/client": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@redis/client/-/client-5.9.0.tgz",
-      "integrity": "sha512-EI0Ti5pojD2p7TmcS7RRa+AJVahdQvP/urpcSbK/K9Rlk6+dwMJTQ354pCNGCwfke8x4yKr5+iH85wcERSkwLQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@redis/client/-/client-5.10.0.tgz",
+      "integrity": "sha512-JXmM4XCoso6C75Mr3lhKA3eNxSzkYi3nCzxDIKY+YOszYsJjuKbFgVtguVPbLMOttN4iu2fXoc2BGhdnYhIOxA==",
       "license": "MIT",
       "dependencies": {
         "cluster-key-slot": "1.1.2"
@@ -2452,13 +2894,13 @@
       "license": "Apache-2.0"
     },
     "node_modules/@swagger-api/apidom-ast": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ast/-/apidom-ast-1.0.0-rc.3.tgz",
-      "integrity": "sha512-lGxvtanmQYqepjVWwPROR/97BIP3sUtwzoHbMSMag2/C3+Un8p6Xz8+I+1sPG2UOBlvDsQe3Di0hlSET7EFwAQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ast/-/apidom-ast-1.1.0.tgz",
+      "integrity": "sha512-D3l08DoxGXL2Yei3chlnFbffol1cZ0RzbTMKUgFFtm6nfs6eEyz/D5ln/IvEDmDLFBhl0QOXRyIorb3kAtQF/Q==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
+        "@swagger-api/apidom-error": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2466,14 +2908,14 @@
       }
     },
     "node_modules/@swagger-api/apidom-core": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-core/-/apidom-core-1.0.0-rc.3.tgz",
-      "integrity": "sha512-cRf+HzoXl3iDPc7alVxdPbLb1TqRePqsxI0id2KaB8HYbyxTUy3ygqY/jmxGtfAAK0Ba85Bw8j4N0crw23vLTg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-core/-/apidom-core-1.1.0.tgz",
+      "integrity": "sha512-RaxLAN+zdRyH+U/V1yD13SfAmgrSXodjOqPRCyeWhAnKDaMzwMvVUlBusuPJ1vBh3xT5z+P6Adks8/0gnnKK9w==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-ast": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
+        "@swagger-api/apidom-ast": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "minim": "~0.23.8",
         "ramda": "~0.30.0",
@@ -2483,37 +2925,37 @@
       }
     },
     "node_modules/@swagger-api/apidom-error": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-error/-/apidom-error-1.0.0-rc.3.tgz",
-      "integrity": "sha512-E9WsxzR9wwD4+1zmZm9PVvxXBAYxMtGJjpRYR/FthvxhIwx+Vsey2h5k7FPS8yJsawIrdGPQtdiFMLPvnQXUFg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-error/-/apidom-error-1.1.0.tgz",
+      "integrity": "sha512-MaLfgJf1EUYc6Q32XypPY7mcRaq4x1IFVT7Mjxz7HRshUau2zXMXLrNSxIPDHOnAAW2HEPdDonpphYBjtN/bPg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.20.7"
       }
     },
     "node_modules/@swagger-api/apidom-json-pointer": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-json-pointer/-/apidom-json-pointer-1.0.0-rc.3.tgz",
-      "integrity": "sha512-cj83L5ntai/RJcZV0++lQiCHPWE6lTy62bGC2lQ0yi/kyCc+Ig+Sn08qpiLSrkQ4OooK85X+wgAy6pMK+Vt/8Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-json-pointer/-/apidom-json-pointer-1.1.0.tgz",
+      "integrity": "sha512-gpC8nz15Y92MT8Ugsb0iRN4JwX9UnFECvD3oYnZUIyXixCTp2ribl63gx7xEJYrFj6YA4fcwrzriq8GqWIvYng==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
         "@swaggerexpert/json-pointer": "^2.10.1"
       }
     },
     "node_modules/@swagger-api/apidom-ns-api-design-systems": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-api-design-systems/-/apidom-ns-api-design-systems-1.0.0-rc.3.tgz",
-      "integrity": "sha512-JB06VDEKPvyOcJ9qIJmr2vI2FSWjdZh+BiRExZPW4tv/mTvdOxt1n38WA+mKzfFHQuoTR4ork/wR481CjAfGGQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-api-design-systems/-/apidom-ns-api-design-systems-1.1.0.tgz",
+      "integrity": "sha512-H0kdSa2MGiNbSxUn3QXfOlF7jVVoG/1eAysLao6cIg1KbOp4yUgscFVMUBIQSspOrTtpUCLcpSMrJ0o2mzRFkg==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-3-1": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-1": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2521,15 +2963,15 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-arazzo-1": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-arazzo-1/-/apidom-ns-arazzo-1-1.0.0-rc.3.tgz",
-      "integrity": "sha512-Um0MGGsGLQWvnASDoguSuE5X/NpS/9RlXlOHHG5nqzG2cdTlifRcN5tiz7H997162+ahEsD5aHD6tUKWOPCLtQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-arazzo-1/-/apidom-ns-arazzo-1-1.1.0.tgz",
+      "integrity": "sha512-Ut6/hNzOe/mLsswtaiF9Bltu7W9T4ZqLjZjfzX1E61DqQilics3H+ImPyQgFab3a8Y9iTxrORc2rq9zcRLWV5Q==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-2020-12": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-2020-12": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2537,15 +2979,31 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-asyncapi-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-asyncapi-2/-/apidom-ns-asyncapi-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-UFmnbvEsN7jVvS/8V7X37UPvn8uxdqYBhDzdPSivjxpu/5Ag5Q1P2gHJnO6K2EfTCFL4S1qDObW2TUFdV1b6pg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-asyncapi-2/-/apidom-ns-asyncapi-2-1.1.0.tgz",
+      "integrity": "sha512-MHfnygOb+0OCGKDjDMEMMwrlVBbVWXBbJx7/Sgi3ynuQUY54VQEmg1a8thguSvFP5283syDtYj1ItvVDEmOlRA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.26.10",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-draft-7": "^1.1.0",
+        "@types/ramda": "~0.30.0",
+        "ramda": "~0.30.0",
+        "ramda-adjunct": "^5.0.0",
+        "ts-mixer": "^6.0.3"
+      }
+    },
+    "node_modules/@swagger-api/apidom-ns-asyncapi-3": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-asyncapi-3/-/apidom-ns-asyncapi-3-1.1.0.tgz",
+      "integrity": "sha512-EuxaJ0wd6989l8gExkqBI4vePRlZOgVU9+Oh1Y5/ku3KRqH91qRM1YJVbFz3Wb7rR4+m5AAjcJ10X/nqW31ObQ==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-draft-7": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-asyncapi-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2553,15 +3011,15 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-json-schema-2019-09": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-2019-09/-/apidom-ns-json-schema-2019-09-1.0.0-rc.3.tgz",
-      "integrity": "sha512-fxQo/GK5NGdx4gN2snj4DpBcDc8bORLehTUqcwp33ikJ2PGugtpV3IQrBjxSWP05PyLOZAMpq1SM9gkCPgZNRA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-2019-09/-/apidom-ns-json-schema-2019-09-1.1.0.tgz",
+      "integrity": "sha512-kAPM8AcYz5cPX6vMmW7p9IOdeas4uHsy8CbsNeh4tODy7mPzAzpxXo3r550ZlTCDUqwNTQz0xo0miJ+iEZ5CJA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-draft-7": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-draft-7": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2569,15 +3027,15 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-json-schema-2020-12": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-2020-12/-/apidom-ns-json-schema-2020-12-1.0.0-rc.3.tgz",
-      "integrity": "sha512-iDPbua9HajFwkH9vFUIbkmKVI/VXKuV9G+jLGkyBlF/Zu++1Rv6CstBt+F9CgNThSUqkKt3YA9Rcd82uh1+HnQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-2020-12/-/apidom-ns-json-schema-2020-12-1.1.0.tgz",
+      "integrity": "sha512-yrcUJOhMITpclelXNR3jY3HdGfThHUlQrte4PH0v5O2cB4XX0vQZIDZN59clzRAhbULZt0/u18xCpKKosxITMg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-2019-09": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-2019-09": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2585,14 +3043,14 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-json-schema-draft-4": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-draft-4/-/apidom-ns-json-schema-draft-4-1.0.0-rc.3.tgz",
-      "integrity": "sha512-8lft8qCo/KAHqiUpfwUMifP9JDhuhXKMNYSSahP2SN0PnbujoS1h3DOXtpR9/+0N6fKPUT8I6GLEwgq8TX2yvA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-draft-4/-/apidom-ns-json-schema-draft-4-1.1.0.tgz",
+      "integrity": "sha512-LKEEIRVGz13IgTIg5Q9zjDxzsvxRwGEWDApKmaqyW7HgYwBBAydYigwWxl/NOdlMrZVwOCZyy/b4s9w4NXA2SA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-ast": "^1.0.0-rc.3",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
+        "@swagger-api/apidom-ast": "^1.1.0",
+        "@swagger-api/apidom-core": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2600,15 +3058,15 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-json-schema-draft-6": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-draft-6/-/apidom-ns-json-schema-draft-6-1.0.0-rc.3.tgz",
-      "integrity": "sha512-IDC+98ur+7L3YaZZnnCytx9+cihElj24CcjX/X2mOBqOTaAwZ/Exb7LiBnvUswV1lOE2X2CX4donRemjk+e32Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-draft-6/-/apidom-ns-json-schema-draft-6-1.1.0.tgz",
+      "integrity": "sha512-bfb5wowQuVwKPVE9Zu7w5VN+u7/Ba5FjE30SyxdQ9YYtMCLdKXdXN0Ehf4FmeoNF8EpbGAQfbL6MHX+mguVYHA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-draft-4": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-draft-4": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2616,15 +3074,15 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-json-schema-draft-7": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-draft-7/-/apidom-ns-json-schema-draft-7-1.0.0-rc.3.tgz",
-      "integrity": "sha512-P0dk9WhH7CINBCh1u8GfcQFycrZcw3qCXug0w6M0wiSrjqZv+Mv/AI68dc0Rb+Dzshe4aZy0bZFjAQb3NHfrSg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-json-schema-draft-7/-/apidom-ns-json-schema-draft-7-1.1.0.tgz",
+      "integrity": "sha512-HtNvDbsNA/zKFX47mcdzIfo1JLG1kqDKeoi8FdO5ICASvNxV1P8qLlWtJGTMtmy7hgigEnnmTDczdyYUqYLa0g==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-draft-6": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-draft-6": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2632,16 +3090,16 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-openapi-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-openapi-2/-/apidom-ns-openapi-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-zwriSfjG+qiPWBHLZRyfdZa305xrB24aZjiAY8r2ikZsdQhC/WHI+e6YqeVCkJwkLzA/oZgrlmyci0mvtkFDQA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-openapi-2/-/apidom-ns-openapi-2-1.1.0.tgz",
+      "integrity": "sha512-sGSZwvN7uSRjojeUM/ivAfh3bAyDgDqzke4mOaN3sy59mtCJ6QkAq7w8Ho4hmBg8zMjzlR7ekERy5OvOmH6Yhw==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-draft-4": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-draft-4": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2649,15 +3107,15 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-openapi-3-0": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-openapi-3-0/-/apidom-ns-openapi-3-0-1.0.0-rc.3.tgz",
-      "integrity": "sha512-RCufXt7ja7fqFS/EqWOMZ54J4uEnqPQkCXMwwCqUrFHXQ7nGN1J9nmwj2hFQUFYraajmtnk2dNByO46+XefV1w==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-openapi-3-0/-/apidom-ns-openapi-3-0-1.1.0.tgz",
+      "integrity": "sha512-W8l6gfHWUX9IaYuxEWmo0H3phv1xRjPdeuFxCqE7nUpApzJPcJPdMXP6gTrxjdVfmV0m5KnANCfr9HOZywXVBQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-draft-4": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-draft-4": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2665,130 +3123,162 @@
       }
     },
     "node_modules/@swagger-api/apidom-ns-openapi-3-1": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-openapi-3-1/-/apidom-ns-openapi-3-1-1.0.0-rc.3.tgz",
-      "integrity": "sha512-Nc28G/ikbypcXVricv8+PGEGXKAmOwZjkBxB3wN5D4+D0+AiUy1lV07Z7+xFWdql65Y5WWxxfU2/Ej01Bnqt4Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-ns-openapi-3-1/-/apidom-ns-openapi-3-1-1.1.0.tgz",
+      "integrity": "sha512-S7tXo82DjpnEFvxun8ZcKG1pBfD656z7wzugSoj3u0oUXXqi97T2/sMPhvyb1zuT+EP7Aqv/l36/MXDpNU5dhw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.26.10",
+        "@swagger-api/apidom-ast": "^1.1.0",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-json-pointer": "^1.1.0",
+        "@swagger-api/apidom-ns-json-schema-2020-12": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-0": "^1.1.0",
+        "@types/ramda": "~0.30.0",
+        "ramda": "~0.30.0",
+        "ramda-adjunct": "^5.0.0",
+        "ts-mixer": "^6.0.3"
+      }
+    },
+    "node_modules/@swagger-api/apidom-parser-adapter-api-design-systems-json": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-api-design-systems-json/-/apidom-parser-adapter-api-design-systems-json-1.1.0.tgz",
+      "integrity": "sha512-uSruA1ZJ7z+L5Xd0gt0eVynFyMJKnq6S714fg9ijXeZQ3g9ZdjZuZjzKxOKVDATuFwtjcA8NOZqYqjoBLjJDCw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.26.10",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-api-design-systems": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
+        "@types/ramda": "~0.30.0",
+        "ramda": "~0.30.0",
+        "ramda-adjunct": "^5.0.0"
+      }
+    },
+    "node_modules/@swagger-api/apidom-parser-adapter-api-design-systems-yaml": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-api-design-systems-yaml/-/apidom-parser-adapter-api-design-systems-yaml-1.1.0.tgz",
+      "integrity": "sha512-9fY4Biqc6YRzZC2FJetV/b4KJQAFcjOqRmi66c6M2i6ImUO1jEZGIY6+NVKc5lwOnny1war31q3ObXAb/D2hdA==",
       "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-ast": "^1.0.0-rc.3",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-json-pointer": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-json-schema-2020-12": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-3-0": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-api-design-systems": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
-        "ramda-adjunct": "^5.0.0",
-        "ts-mixer": "^6.0.3"
+        "ramda-adjunct": "^5.0.0"
       }
     },
-    "node_modules/@swagger-api/apidom-parser-adapter-api-design-systems-json": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-api-design-systems-json/-/apidom-parser-adapter-api-design-systems-json-1.0.0-rc.3.tgz",
-      "integrity": "sha512-ZXKuMd6nqBrpCqTJmbd2pS46ZmL8bIra1KqWVjcvkA/E032nmgDeaT78Cf0Ulha6j+CAzcwL0AnR7GrtFpSfSw==",
+    "node_modules/@swagger-api/apidom-parser-adapter-arazzo-json-1": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-arazzo-json-1/-/apidom-parser-adapter-arazzo-json-1-1.1.0.tgz",
+      "integrity": "sha512-OyM9TncfSqyVcV6MKJ3IXK2TjtiTr6nFqkUQ3q6131X2oIkEZ/AVi8P8T39tkHFQYsH/hcoAge3zIv3xQL0HJg==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-api-design-systems": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-arazzo-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
-    "node_modules/@swagger-api/apidom-parser-adapter-api-design-systems-yaml": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-api-design-systems-yaml/-/apidom-parser-adapter-api-design-systems-yaml-1.0.0-rc.3.tgz",
-      "integrity": "sha512-Qg1yTPPzGF3EhlqcxIZeDVBxxvZzylGM6CTHg5cltGOSoFQ7+NJFE9Ktvk0gbVaFUyElFduCno9FvIfzxPlj8g==",
+    "node_modules/@swagger-api/apidom-parser-adapter-arazzo-yaml-1": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-arazzo-yaml-1/-/apidom-parser-adapter-arazzo-yaml-1-1.1.0.tgz",
+      "integrity": "sha512-5qOVIkVrGAN3HcmwHhT7r5PaHHnmHolQT2mHa0+IyF5auNxPekjE4Mp8b37NCcPobEb6FRLCXWInZZHTAHTGeg==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-api-design-systems": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-arazzo-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
-    "node_modules/@swagger-api/apidom-parser-adapter-arazzo-json-1": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-arazzo-json-1/-/apidom-parser-adapter-arazzo-json-1-1.0.0-rc.3.tgz",
-      "integrity": "sha512-T7MbfTSDqdHgSr+cSC6gcGIsiwK3NXmdo28ZUv6LWsgcWDj2zw2Jie+7rXQaDN3JFEL34M/BIcMLyvrG7gYN/Q==",
+    "node_modules/@swagger-api/apidom-parser-adapter-asyncapi-json-2": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-asyncapi-json-2/-/apidom-parser-adapter-asyncapi-json-2-1.1.0.tgz",
+      "integrity": "sha512-YX8FKLILplM5B0vVsBk1Nt6d0bedJ4p9IKLfMzVI+apUBXDAGdp8dEXLfjXvP5+rAwvBEU7aYKxLIVAChf039Q==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-arazzo-1": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-asyncapi-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
-    "node_modules/@swagger-api/apidom-parser-adapter-arazzo-yaml-1": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-arazzo-yaml-1/-/apidom-parser-adapter-arazzo-yaml-1-1.0.0-rc.3.tgz",
-      "integrity": "sha512-mUmxQVXPoemP2ak/77g/o8kpP2DNd1EDjteuyGHyw1EHk/t4xYPAP05rQ2DfIQ5yVHmxBKRDQ15kfVNEpfUfYQ==",
+    "node_modules/@swagger-api/apidom-parser-adapter-asyncapi-json-3": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-asyncapi-json-3/-/apidom-parser-adapter-asyncapi-json-3-1.1.0.tgz",
+      "integrity": "sha512-BXrI41vANYDdfHz/LAVoubtN5zHIsao6kHx31Nf8F/X4Pdr/0LbQXy1CnpAMYHCbDGLY8fFvU921l7rMU2joNw==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-arazzo-1": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-asyncapi-3": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
-    "node_modules/@swagger-api/apidom-parser-adapter-asyncapi-json-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-asyncapi-json-2/-/apidom-parser-adapter-asyncapi-json-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-K2BaslenC4ouPyzOQSB7wQPSsIGKGIj4VfP4M9y3fJaX9dIi+z3kzYQV7NFhZHAnq6pVybIDA44FLHF/WLCxUg==",
+    "node_modules/@swagger-api/apidom-parser-adapter-asyncapi-yaml-2": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-asyncapi-yaml-2/-/apidom-parser-adapter-asyncapi-yaml-2-1.1.0.tgz",
+      "integrity": "sha512-0jdnvsuFee9Y4MtNcgsj2iz6krLQM39pvr+ByFjDsTC9vnEp9DU0i7eLdnk6F5KYsz0fNj0YUWSDkGgk0BNuPw==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-asyncapi-2": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-asyncapi-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
-    "node_modules/@swagger-api/apidom-parser-adapter-asyncapi-yaml-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-asyncapi-yaml-2/-/apidom-parser-adapter-asyncapi-yaml-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-xJezoi5d+RtV7sG9VRcfpbLlJwaR6GoJr2S8lbsnMUkk/B2vZGdRbA2Fc67REQIJTEfxXcU8T3+5m8j0WrG9Xw==",
+    "node_modules/@swagger-api/apidom-parser-adapter-asyncapi-yaml-3": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-asyncapi-yaml-3/-/apidom-parser-adapter-asyncapi-yaml-3-1.1.0.tgz",
+      "integrity": "sha512-BQ7vvKbf7cG8jvU2+xj7iYJQz4GgeRQEhhSo3rLR73LGrRAVsV0gHzo9HF90MmVA0GkMKS2Igqx9VXk9yqhInA==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-asyncapi-2": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-asyncapi-3": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-json": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-json/-/apidom-parser-adapter-json-1.0.0-rc.3.tgz",
-      "integrity": "sha512-Y0dfIYvQE+OLjormlx6RjmA6ymNA6+nkqJC/6qkFt+4fSjfOiXwbOOnfZp9pJXb2ssmDDdrPTFc3ninx5k7jNw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-json/-/apidom-parser-adapter-json-1.1.0.tgz",
+      "integrity": "sha512-fLo9muoy/JAys+EeSE6VoC/mOaraOtUIDGhTSdcHp3qFrkC1f9147LbOuY4MNA1tWn/jGP/9gV1EdcW3pqBvUQ==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-ast": "^1.0.0-rc.3",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
+        "@swagger-api/apidom-ast": "^1.1.0",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0",
@@ -2798,112 +3288,112 @@
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-openapi-json-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-json-2/-/apidom-parser-adapter-openapi-json-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-yaMS11FZVJLF062s+dch1kmUvBqdIS6mwAg/4XUL7XwSYat6pnV2ONCqdcUO9JSc9KJMZQiVAZjAZSj096ssNg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-json-2/-/apidom-parser-adapter-openapi-json-2-1.1.0.tgz",
+      "integrity": "sha512-ssDvuiNDhKrisOGNeTZ+dTJurXHiiyRaZxHbJQUc6dSmH6JlRPtlyU3htT98vcmy4TC2Q/ZlR3oXw8NOin/SqA==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-2": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-openapi-json-3-0": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-json-3-0/-/apidom-parser-adapter-openapi-json-3-0-1.0.0-rc.3.tgz",
-      "integrity": "sha512-5OdImG3eEgYpFvSo0EiZVvJJahk+f6cm5WZNn9lVdRlmxmtpzKM3UNfIYcBgVcAcLvfi8g6G7xRzD1DshaS8sw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-json-3-0/-/apidom-parser-adapter-openapi-json-3-0-1.1.0.tgz",
+      "integrity": "sha512-3NwTjoN/LCRfm0oO1giqBa21TGG6kMk9AiJ4y0SRYHCgP5bKcAZGoI0ITIlVFkDsdb2pFWv5nCHgHCT+GNHfVg==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-3-0": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-0": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-openapi-json-3-1": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-json-3-1/-/apidom-parser-adapter-openapi-json-3-1-1.0.0-rc.3.tgz",
-      "integrity": "sha512-UWlH29DOqKfHF2zwv7r5b7pgrc7Yxdus7FjYWA8p8yoIB02xDwHBaH4KhccIAXkm1qNMo+4TwSKFvO/boE8LMA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-json-3-1/-/apidom-parser-adapter-openapi-json-3-1-1.1.0.tgz",
+      "integrity": "sha512-WYutysMu/TcUW6+O8iW+99CcxQpmjrWnrIUFkKusqsK7UUepK5DhXosexz8HNYLBvwv5YYJFDC4cAVYtq+6nNA==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-3-1": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-openapi-yaml-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-yaml-2/-/apidom-parser-adapter-openapi-yaml-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-kSWzmalm98ScImQHHtpTBDAIEzLsfE24Pe1IIJP1TaI2rk1AuxzaCsqMl6NQIlnIEawghPOXlG0hLsgtswn/Jg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-yaml-2/-/apidom-parser-adapter-openapi-yaml-2-1.1.0.tgz",
+      "integrity": "sha512-Suc8gQNwFvzRr7smnfnjjN9Te+HQJj2uyAsvPG1HY1PwQEy4FRS2HO3anDCVONcXPMgiOBPCwRjI2xMgHyqq0w==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-2": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-openapi-yaml-3-0": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-yaml-3-0/-/apidom-parser-adapter-openapi-yaml-3-0-1.0.0-rc.3.tgz",
-      "integrity": "sha512-IRxjOgmGpaA1ay/NITOqk3TKTXnGiJtNP8KsPm//i+HkGcg87lZEvRDflB2Z70aRofKncXM2rCMAEqFqV7A9ug==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-yaml-3-0/-/apidom-parser-adapter-openapi-yaml-3-0-1.1.0.tgz",
+      "integrity": "sha512-cAAiiYwcsIwwKa7toa4ceTTx6CD/iuza1LgDlMTFyZnRmbT22wNoj2qah5Fq3ayCuURQcI6kDCkFDZHHmpihQg==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-3-0": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-0": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-openapi-yaml-3-1": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-yaml-3-1/-/apidom-parser-adapter-openapi-yaml-3-1-1.0.0-rc.3.tgz",
-      "integrity": "sha512-uvDMPiKt7uZSAOUVe+q/AygTFXw1odxxu5mi5voQM3/0KbR/vlt8f1dO9sQkys+G6ped2nL4r8B0p6bXR8uAMQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-openapi-yaml-3-1/-/apidom-parser-adapter-openapi-yaml-3-1-1.1.0.tgz",
+      "integrity": "sha512-iw6b53nFwq8en3RZMbzd9QAhJhpbtuVKiEPEAR5RfK8+K6CHMtYHvc/uSuv6zKZoP1373nAN1wSGl9aFdtIiNw==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-ns-openapi-3-1": "^1.0.0-rc.3",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
         "ramda-adjunct": "^5.0.0"
       }
     },
     "node_modules/@swagger-api/apidom-parser-adapter-yaml-1-2": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-yaml-1-2/-/apidom-parser-adapter-yaml-1-2-1.0.0-rc.3.tgz",
-      "integrity": "sha512-IiLIw74NRpRwi2YkV1hzmHC5JvvAm/TdeVYZoYK0QxeT2Ozr6MvhnUnRFjjSL3wcmku9+rLz2d8EGL2kO46qRA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-parser-adapter-yaml-1-2/-/apidom-parser-adapter-yaml-1-2-1.1.0.tgz",
+      "integrity": "sha512-+U/df8MKzLZQ0GhqfS7ZHIer/EWppdArjODsREN2F/1t/KyBbJXBrYJhKx8iObQHD8b1mHFad5TMPYzy8dSZPQ==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-ast": "^1.0.0-rc.3",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
+        "@swagger-api/apidom-ast": "^1.1.0",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
         "@tree-sitter-grammars/tree-sitter-yaml": "=0.7.1",
         "@types/ramda": "~0.30.0",
         "ramda": "~0.30.0",
@@ -2945,14 +3435,14 @@
       }
     },
     "node_modules/@swagger-api/apidom-reference": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-reference/-/apidom-reference-1.0.0-rc.3.tgz",
-      "integrity": "sha512-xZ9B6lGpdlHGSZGEhYe/MAyULCN4d+w4LKK5P1C/i6W6AU4iDEMjMjSawRV9ptJcObnu9ArEe92rgI7XS6s0TQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@swagger-api/apidom-reference/-/apidom-reference-1.1.0.tgz",
+      "integrity": "sha512-jypjCMRPDYhWXTl8+RMpIGWkj44BrokUYWZR4BneeeI/KN25amnEWH7H/cE3lu0dU65EKMgff42Lt5x5DBHbvA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.26.10",
-        "@swagger-api/apidom-core": "^1.0.0-rc.3",
-        "@swagger-api/apidom-error": "^1.0.0-rc.3",
+        "@swagger-api/apidom-core": "^1.1.0",
+        "@swagger-api/apidom-error": "^1.1.0",
         "@types/ramda": "~0.30.0",
         "axios": "^1.12.2",
         "minimatch": "^7.4.3",
@@ -2961,26 +3451,28 @@
         "ramda-adjunct": "^5.0.0"
       },
       "optionalDependencies": {
-        "@swagger-api/apidom-json-pointer": "^1.0.0-rc.0",
-        "@swagger-api/apidom-ns-arazzo-1": "^1.0.0-rc.0",
-        "@swagger-api/apidom-ns-asyncapi-2": "^1.0.0-rc.0",
-        "@swagger-api/apidom-ns-openapi-2": "^1.0.0-rc.0",
-        "@swagger-api/apidom-ns-openapi-3-0": "^1.0.0-rc.0",
-        "@swagger-api/apidom-ns-openapi-3-1": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-api-design-systems-json": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-api-design-systems-yaml": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-arazzo-json-1": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-arazzo-yaml-1": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-asyncapi-json-2": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-asyncapi-yaml-2": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-json": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-openapi-json-2": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-openapi-json-3-0": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-openapi-json-3-1": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-openapi-yaml-2": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-openapi-yaml-3-0": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-openapi-yaml-3-1": "^1.0.0-rc.0",
-        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.0.0-rc.0"
+        "@swagger-api/apidom-json-pointer": "^1.1.0",
+        "@swagger-api/apidom-ns-arazzo-1": "^1.1.0",
+        "@swagger-api/apidom-ns-asyncapi-2": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-2": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-0": "^1.1.0",
+        "@swagger-api/apidom-ns-openapi-3-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-api-design-systems-json": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-api-design-systems-yaml": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-arazzo-json-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-arazzo-yaml-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-asyncapi-json-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-asyncapi-json-3": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-asyncapi-yaml-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-asyncapi-yaml-3": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-json": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-openapi-json-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-openapi-json-3-0": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-openapi-json-3-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-openapi-yaml-2": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-openapi-yaml-3-0": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-openapi-yaml-3-1": "^1.1.0",
+        "@swagger-api/apidom-parser-adapter-yaml-1-2": "^1.1.0"
       }
     },
     "node_modules/@swagger-api/apidom-reference/node_modules/minimatch": {
@@ -3037,6 +3529,17 @@
       "integrity": "sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==",
       "license": "MIT"
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/cytoscape-fcose": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@types/cytoscape-fcose/-/cytoscape-fcose-2.2.5.tgz",
@@ -3334,9 +3837,9 @@
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-RDvF6wTulMPjrNdCoYRC8gNR880JNGT8uB+REUpC2Ns4pRqQJhGz90wh7rgdXDPpCczF3VGktDuFGVnz8zP7HA==",
       "license": "MIT"
     },
     "node_modules/@types/minimatch": {
@@ -3346,9 +3849,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.25",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz",
-      "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==",
+      "version": "20.19.28",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.28.tgz",
+      "integrity": "sha512-VyKBr25BuFDzBFCK5sUM6ZXiWfqgCTwTAOK8qzGV/m9FCirXYDlmczJ+d5dXBAQALGCdRRdbteKYfJ84NGEusw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3393,13 +3896,13 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "18.3.26",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
-      "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
+      "version": "18.3.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-cytoscapejs": {
@@ -3676,6 +4179,188 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
@@ -3704,40 +4389,99 @@
         "linux"
       ]
     },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.24.tgz",
-      "integrity": "sha512-eDl5H57AOpNakGNAkFDH+y7kTqrQpJkZFXhWZQGyx/5Wh7B1uQYvcWkvZi11BDhscPgj8N7XV3oRwiPnx1Vrig==",
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.26.tgz",
+      "integrity": "sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.5",
-        "@vue/shared": "3.5.24",
-        "entities": "^4.5.0",
+        "@vue/shared": "3.5.26",
+        "entities": "^7.0.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.24.tgz",
-      "integrity": "sha512-1QHGAvs53gXkWdd3ZMGYuvQFXHW4ksKWPG8HP8/2BscrbZ0brw183q2oNWjMrSWImYLHxHrx1ItBQr50I/q2zw==",
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.26.tgz",
+      "integrity": "sha512-y1Tcd3eXs834QjswshSilCBnKGeQjQXB6PqFn/1nxcQw4pmG42G8lwz+FZPAZAby6gZeHSt/8LMPfZ4Rb+Bd/A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-core": "3.5.26",
+        "@vue/shared": "3.5.26"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.24.tgz",
-      "integrity": "sha512-8EG5YPRgmTB+YxYBM3VXy8zHD9SWHUJLIGPhDovo3Z8VOgvP+O7UP5vl0J4BBPWYD9vxtBabzW1EuEZ+Cqs14g==",
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
+      "integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.5",
-        "@vue/compiler-core": "3.5.24",
-        "@vue/compiler-dom": "3.5.24",
-        "@vue/compiler-ssr": "3.5.24",
-        "@vue/shared": "3.5.24",
+        "@vue/compiler-core": "3.5.26",
+        "@vue/compiler-dom": "3.5.26",
+        "@vue/compiler-ssr": "3.5.26",
+        "@vue/shared": "3.5.26",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.6",
@@ -3745,19 +4489,19 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.24.tgz",
-      "integrity": "sha512-trOvMWNBMQ/odMRHW7Ae1CdfYx+7MuiQu62Jtu36gMLXcaoqKvAyh+P73sYG9ll+6jLB6QPovqoKGGZROzkFFg==",
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.26.tgz",
+      "integrity": "sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-dom": "3.5.26",
+        "@vue/shared": "3.5.26"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.24.tgz",
-      "integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.26.tgz",
+      "integrity": "sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==",
       "license": "MIT"
     },
     "node_modules/accessor-fn": {
@@ -4110,9 +4854,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.22",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
-      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4129,10 +4873,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.27.0",
-        "caniuse-lite": "^1.0.30001754",
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
         "fraction.js": "^5.3.4",
-        "normalize-range": "^0.1.2",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
@@ -4162,9 +4905,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
-      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.1.tgz",
+      "integrity": "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==",
       "license": "MPL-2.0",
       "engines": {
         "node": ">=4"
@@ -4217,9 +4960,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.28",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.28.tgz",
-      "integrity": "sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==",
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.14.tgz",
+      "integrity": "sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -4269,9 +5012,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
-      "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4288,11 +5031,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.25",
-        "caniuse-lite": "^1.0.30001754",
-        "electron-to-chromium": "^1.5.249",
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
         "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.1.4"
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4417,9 +5160,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001755",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001755.tgz",
-      "integrity": "sha512-44V+Jm6ctPj7R52Na4TLi3Zri4dWUljJd+RDm+j8LtNCc/ihLCT+X1TzoOAkRETEWqjuLnh9581Tl80FvK7jVA==",
+      "version": "1.0.30001764",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
+      "integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==",
       "funding": [
         {
           "type": "opencollective",
@@ -4931,9 +5674,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.46.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.46.0.tgz",
-      "integrity": "sha512-NMCW30bHNofuhwLhYPt66OLOKTMbOhgTTatKVbaQC3KRHpTCiRIBYvtshr+NBYSnBxwAFhjW/RfJ0XbIjS16rw==",
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.47.0.tgz",
+      "integrity": "sha512-BcxeDbzUrRnXGYIVAGFtcGQVNpFcUhVjr6W7F8XktvQW2iJP9e66GP6xdKotCRFlrxBvNIBrhwKteRXqMV86Nw==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -5008,9 +5751,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.2.tgz",
-      "integrity": "sha512-D80T+tiqkd/8B0xNlbstWDG4x6aqVfO52+OlSUNIdkTvmNw0uQpJLeos2J/2XvpyidAFuTPmpad+tUxLndwj6g==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/cytoscape": {
@@ -5807,12 +6550,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "license": "MIT"
-    },
     "node_modules/echarts": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
@@ -5844,9 +6581,9 @@
       "license": "0BSD"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.254",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.254.tgz",
-      "integrity": "sha512-DcUsWpVhv9svsKRxnSCZ86SjD+sp32SGidNB37KpqXJncp1mfUgKbHvBomE89WJDbfVKw1mdv5+ikrvd43r+Bg==",
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
       "license": "ISC"
     },
     "node_modules/embla-carousel": {
@@ -5884,9 +6621,9 @@
       "license": "MIT"
     },
     "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
+      "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -5905,9 +6642,9 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
-      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.2",
@@ -5991,26 +6728,26 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
-      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
+        "es-abstract": "^1.24.1",
         "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.3",
+        "es-set-tostringtag": "^2.1.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.6",
+        "get-intrinsic": "^1.3.0",
         "globalthis": "^1.0.4",
         "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.2.0",
         "has-symbols": "^1.1.0",
         "internal-slot": "^1.1.0",
-        "iterator.prototype": "^1.1.4",
+        "iterator.prototype": "^1.1.5",
         "safe-array-concat": "^1.1.3"
       },
       "engines": {
@@ -6688,9 +7425,9 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
@@ -6736,9 +7473,9 @@
       }
     },
     "node_modules/eventsource": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-4.0.0.tgz",
-      "integrity": "sha512-fvIkb9qZzdMxgZrEQDyll+9oJsyaVvY92I2Re+qK0qEJ+w5s0X3dtz+M0VAPOjP1gtU3iqWyjQ0G3nvd5CLZ2g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-4.1.0.tgz",
+      "integrity": "sha512-2GuF51iuHX6A9xdTccMTsNb7VO0lHZihApxhvQzJB5A03DvHDd2FQepodbMaztPBmBcE/ox7o2gqaxGhYB9LhQ==",
       "license": "MIT",
       "dependencies": {
         "eventsource-parser": "^3.0.1"
@@ -6769,9 +7506,9 @@
       }
     },
     "node_modules/falkordb": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/falkordb/-/falkordb-6.4.0.tgz",
-      "integrity": "sha512-hHYwq6oE3UCgWO4vRFuZ9FsE7qwNsiKHAvDyKsN3X2EiMnCdsBvkooliDu5GimSBQZcU/b6uK5CDk4hOCDQrXw==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/falkordb/-/falkordb-6.4.1.tgz",
+      "integrity": "sha512-dBoTbRars4TR0SYAQvIV3zUloWG3HlDr6LOYK0V2CscOKbpFUyJ9oBRpYfGY1DmHmP5RfZs/3sjT8EUuzcbI+A==",
       "license": "MIT",
       "workspaces": [
         "./packages/*"
@@ -6857,9 +7594,9 @@
       "license": "MIT"
     },
     "node_modules/fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -7040,22 +7777,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
@@ -7099,6 +7820,20 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "license": "ISC"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -7241,20 +7976,21 @@
       }
     },
     "node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
       "license": "ISC",
       "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
+      "engines": {
+        "node": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -7272,19 +8008,26 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": "*"
       }
     },
     "node_modules/global-modules": {
@@ -8112,30 +8855,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jerrypick": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/jerrypick/-/jerrypick-1.1.2.tgz",
-      "integrity": "sha512-YKnxXEekXKzhpf7CLYA0A+oDP8V0OhICNCr5lv96FvSsDEmrb0GKM776JgQvHTMjr7DTTPEVv/1Ciaw0uEWzBA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -8146,9 +8865,9 @@
       }
     },
     "node_modules/jose": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.2.tgz",
-      "integrity": "sha512-MpcPtHLE5EmztuFIqB0vzHAWJPpmN1E6L4oo+kze56LIs3MyXIj9ZHMDxqOvkP38gBR7K1v3jqd4WU2+nrfONQ==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
@@ -8346,9 +9065,9 @@
       "license": "MIT"
     },
     "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
+      "integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==",
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -8528,15 +9247,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/monaco-editor": {
       "version": "0.47.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.47.0.tgz",
@@ -8904,15 +9614,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/oauth": {
       "version": "0.9.15",
       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@@ -9180,12 +9881,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9258,28 +9953,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "license": "ISC"
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -9326,12 +9999,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz",
-      "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.56.1"
+        "playwright-core": "1.57.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -9344,9 +10017,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz",
-      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
       "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
@@ -9443,6 +10116,48 @@
         "postcss": "^8.4.21"
       }
     },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
@@ -9735,23 +10450,6 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
-    "node_modules/react-force-graph-2d": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/react-force-graph-2d/-/react-force-graph-2d-1.29.0.tgz",
-      "integrity": "sha512-Xv5IIk+hsZmB3F2ibja/t6j/b0/1T9dtFOQacTUoLpgzRHrO6wPu1GtQ2LfRqI/imgtaapnXUgQaE8g8enPo5w==",
-      "license": "MIT",
-      "dependencies": {
-        "force-graph": "^1.51",
-        "prop-types": "15",
-        "react-kapsule": "^2.5"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-gtm-module": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
@@ -9759,9 +10457,9 @@
       "license": "MIT"
     },
     "node_modules/react-hook-form": {
-      "version": "7.66.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
-      "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
+      "version": "7.71.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.0.tgz",
+      "integrity": "sha512-oFDt/iIFMV9ZfV52waONXzg4xuSlbwKUPvXVH2jumL1me5qFhBMc4knZxuXiZ2+j6h546sYe3ZKJcg/900/iHw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -9826,21 +10524,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-kapsule": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/react-kapsule/-/react-kapsule-2.5.7.tgz",
-      "integrity": "sha512-kifAF4ZPD77qZKc4CKLmozq6GY1sBzPEJTIJb0wWFK6HsePJatK3jXplZn2eeAt3x67CDozgi7/rO8fNQ/AL7A==",
-      "license": "MIT",
-      "dependencies": {
-        "jerrypick": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "react": ">=16.13.1"
-      }
-    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -9865,9 +10548,9 @@
       }
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
-      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
       "license": "MIT",
       "dependencies": {
         "react-remove-scroll-bar": "^2.3.7",
@@ -10412,49 +11095,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/rimraf/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/robust-predicates": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
@@ -10824,18 +11464,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/simple-swizzle": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
@@ -10922,27 +11550,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -11068,19 +11675,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -11126,17 +11720,17 @@
       }
     },
     "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
-        "glob": "^10.3.10",
         "lines-and-columns": "^1.1.6",
         "mz": "^2.7.0",
         "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
         "ts-interface-checker": "^0.1.9"
       },
       "bin": {
@@ -11382,13 +11976,13 @@
       }
     },
     "node_modules/swr": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
-      "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.8.tgz",
+      "integrity": "sha512-gaCPRVoMq8WGDcWj9p4YWzCMPHzE0WNl6W8ADIx9c3JBEIdMkJGMzW+uzXvxHMltwcYACr9jP+32H8/hgwMR7w==",
       "license": "MIT",
       "dependencies": {
         "dequal": "^2.0.3",
-        "use-sync-external-store": "^1.4.0"
+        "use-sync-external-store": "^1.6.0"
       },
       "peerDependencies": {
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -11405,9 +11999,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
-      "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -11478,48 +12072,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/tailwindcss/node_modules/postcss-load-config": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
-      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "jiti": ">=1.21.0",
-        "postcss": ">=8.0.9",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/terminal-columns": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/terminal-columns/-/terminal-columns-1.4.1.tgz",
@@ -11566,7 +12118,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -11583,7 +12134,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -11601,7 +12151,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -11932,9 +12481,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
-      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "funding": [
         {
           "type": "opencollective",
@@ -12052,9 +12601,9 @@
       }
     },
     "node_modules/validator": {
-      "version": "13.15.23",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.23.tgz",
-      "integrity": "sha512-4yoz1kEWqUjzi5zsPbAS/903QXSYp0UOtHsPpp7p9rHAw/W+dkInskAE386Fat3oKRROwO98d9ZB0G4cObgUyw==",
+      "version": "13.15.26",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.26.tgz",
+      "integrity": "sha512-spH26xU080ydGggxRyR1Yhcbgx+j3y5jbNXk/8L+iRvdIEQ4uTRH2Sgf2dokud6Q4oAtsbNvJ1Ft+9xmm6IZcA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.10"
@@ -12215,24 +12764,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 59192e53..d3f1bf69 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "-": "^0.0.1",
+    "@falkordb/canvas": "^0.0.24",
     "@falkordb/text-to-cypher": "^0.1.9",
     "@hookform/resolvers": "^3.10.0",
     "@monaco-editor/react": "^4.6.0",
@@ -74,7 +75,6 @@
     "react-cytoscapejs": "^2.0.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.5",
-    "react-force-graph-2d": "^1.27.0",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.54.2",
     "react-json-tree": "^0.19.0",