Performance problems on large datasets

[oesah]

Describe the Bug

Related to #35

I still have performance issues when I use larger datasets. An example with 20 nodes is already barely usable, because dragging around the nodes has a delay of 1-2 seconds.

I have a use case where I need 750 nodes with many connections between nodes (a network). When I open that page and want to render the canvas, the browser window just completely freezes and I cannot see anything.

When I use other edge types like smoothstep it works fine. Only when I use the smart edge type, this problem occurs.

I am using the latest version (4.0.1) of your lib with latest react flow version on Microsoft Edge Browser. Strangely, on Chrome the example with 20 nodes is much more performant. But with my 750 Nodes use case, it still freezes and the canvas remains empty.

Minimal Example

https://github.com/tisoap/react-flow-smart-edge

Steps to Reproduce the Bug or Issue

import { Edge, Node } from "@xyflow/react";

// Mock data for standalone development - Train Network
export const mockNodes: Node[] = [
  // North Line Stations (Vertical line going north from Central)
  {
    id: "station-1",
    type: "trainStation",
    position: { x: 700, y: 50 },
    data: {
      label: "Northgate Terminal",
      content: "North Line - Zone 1",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 1,
      requiredTargetHandleCount: 1,
    },
  },
  {
    id: "station-2",
    type: "trainStation",
    position: { x: 700, y: 250 },
    data: {
      label: "Riverside Park",
      content: "North Line - Zone 1",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  // Central Hub - Main Transfer Station
  {
    id: "station-3",
    type: "trainStation",
    position: { x: 700, y: 500 },
    data: {
      label: "Central Station",
      content: "Transfer Hub - All Lines - Zone 1",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 4,
      requiredTargetHandleCount: 4,
    },
  },
  // East Line Stations (Horizontal line going east from Central)
  {
    id: "station-4",
    type: "trainStation",
    position: { x: 950, y: 500 },
    data: {
      label: "Market Square",
      content: "East Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-5",
    type: "trainStation",
    position: { x: 1200, y: 500 },
    data: {
      label: "University Campus",
      content: "East Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-6",
    type: "trainStation",
    position: { x: 1450, y: 500 },
    data: {
      label: "Airport Terminal",
      content: "East Line - Zone 3",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 1,
      requiredTargetHandleCount: 1,
    },
  },
  // West Line Stations (Horizontal line going west from Central)
  {
    id: "station-7",
    type: "trainStation",
    position: { x: 450, y: 500 },
    data: {
      label: "Arts District",
      content: "West Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-8",
    type: "trainStation",
    position: { x: 200, y: 500 },
    data: {
      label: "Harbor View",
      content: "West Line - Zone 3",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 1,
      requiredTargetHandleCount: 1,
    },
  },
  // South Line - Main Branch (Vertical line going south from Central)
  {
    id: "station-9",
    type: "trainStation",
    position: { x: 700, y: 750 },
    data: {
      label: "City Hall",
      content: "South Line - Zone 1",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 3,
      requiredTargetHandleCount: 3,
    },
  },
  // South Line - West Branch
  {
    id: "station-10",
    type: "trainStation",
    position: { x: 500, y: 950 },
    data: {
      label: "Stadium District",
      content: "South Line West - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-11",
    type: "trainStation",
    position: { x: 300, y: 1150 },
    data: {
      label: "Lakeside Terminal",
      content: "South Line West - Zone 3",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 1,
      requiredTargetHandleCount: 1,
    },
  },
  // South Line - East Branch
  {
    id: "station-12",
    type: "trainStation",
    position: { x: 750, y: 1000 },
    data: {
      label: "Business Park",
      content: "South Line East - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-13",
    type: "trainStation",
    position: { x: 900, y: 1200 },
    data: {
      label: "Tech Valley",
      content: "South Line East - Zone 3",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 1,
      requiredTargetHandleCount: 1,
    },
  },
  // Circle Line - Connecting outer stations (forming a circle around the center)
  {
    id: "station-14",
    type: "trainStation",
    position: { x: 950, y: 250 },
    data: {
      label: "Shopping Center",
      content: "Circle Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 3,
      requiredTargetHandleCount: 3,
    },
  },
  {
    id: "station-15",
    type: "trainStation",
    position: { x: 1200, y: 250 },
    data: {
      label: "Industrial Zone",
      content: "Circle Line - Zone 3",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-16",
    type: "trainStation",
    position: { x: 1450, y: 750 },
    data: {
      label: "Convention Center",
      content: "Circle Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-17",
    type: "trainStation",
    position: { x: 1000, y: 1000 },
    data: {
      label: "Medical District",
      content: "Circle Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 3,
      requiredTargetHandleCount: 3,
    },
  },
  {
    id: "station-18",
    type: "trainStation",
    position: { x: 300, y: 750 },
    data: {
      label: "Park West",
      content: "Circle Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  {
    id: "station-19",
    type: "trainStation",
    position: { x: 450, y: 250 },
    data: {
      label: "Heritage Square",
      content: "Circle Line - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 2,
      requiredTargetHandleCount: 2,
    },
  },
  // Express Line Hub
  {
    id: "station-20",
    type: "trainStation",
    position: { x: 1300, y: 600 },
    data: {
      label: "Express Hub",
      content: "Express & Circle - Zone 2",
      connectedHandles: [],
      maxHandleIndex: 0,
      connectedTargetHandles: [],
      maxTargetHandleIndex: 0,
      requiredHandleCount: 3,
      requiredTargetHandleCount: 3,
    },
  },
];

export const mockEdges: Edge[] = [
  // North Line
  {
    id: "e1-2",
    source: "station-1",
    target: "station-2",
    label: "North Line",
    type: "smart",
  },
  {
    id: "e2-3",
    source: "station-2",
    target: "station-3",
    label: "North Line",
    type: "smart",
  },

  // East Line
  {
    id: "e3-4",
    source: "station-3",
    target: "station-4",
    label: "East Line",
    type: "smart",
  },
  {
    id: "e4-5",
    source: "station-4",
    target: "station-5",
    label: "East Line",
    type: "smart",
  },
  {
    id: "e5-6",
    source: "station-5",
    target: "station-6",
    label: "East Line",
    type: "smart",
  },

  // West Line
  {
    id: "e3-7",
    source: "station-3",
    target: "station-7",
    label: "West Line",
    type: "smart",
  },
  {
    id: "e7-8",
    source: "station-7",
    target: "station-8",
    label: "West Line",
    type: "smart",
  },

  // South Line - Main
  {
    id: "e3-9",
    source: "station-3",
    target: "station-9",
    label: "South Line",
    type: "smart",
  },

  // South Line - West Branch
  {
    id: "e9-10",
    source: "station-9",
    target: "station-10",
    label: "South Line (West)",
    type: "smart",
  },
  {
    id: "e10-11",
    source: "station-10",
    target: "station-11",
    label: "South Line (West)",
    type: "smart",
  },

  // South Line - East Branch
  {
    id: "e9-12",
    source: "station-9",
    target: "station-12",
    label: "South Line (East)",
    type: "smart",
  },
  {
    id: "e12-13",
    source: "station-12",
    target: "station-13",
    label: "South Line (East)",
    type: "smart",
  },

  // Circle Line - North Section
  {
    id: "e2-14",
    source: "station-2",
    target: "station-14",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e14-15",
    source: "station-14",
    target: "station-15",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e15-5",
    source: "station-15",
    target: "station-5",
    label: "Circle Line",
    type: "smart",
  },

  // Circle Line - East Section
  {
    id: "e5-20",
    source: "station-5",
    target: "station-20",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e20-16",
    source: "station-20",
    target: "station-16",
    label: "Circle Line",
    type: "smart",
  },

  // Circle Line - South Section
  {
    id: "e16-17",
    source: "station-16",
    target: "station-17",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e17-12",
    source: "station-17",
    target: "station-12",
    label: "Circle Line",
    type: "smart",
  },

  // Circle Line - West Section
  {
    id: "e10-18",
    source: "station-10",
    target: "station-18",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e18-7",
    source: "station-18",
    target: "station-7",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e7-19",
    source: "station-7",
    target: "station-19",
    label: "Circle Line",
    type: "smart",
  },
  {
    id: "e19-2",
    source: "station-19",
    target: "station-2",
    label: "Circle Line",
    type: "smart",
  },

  // Express Connections
  {
    id: "e4-14",
    source: "station-4",
    target: "station-14",
    label: "Express",
    type: "smart",
  },
  {
    id: "e9-17",
    source: "station-9",
    target: "station-17",
    label: "Express",
    type: "smart",
  },
];

export const mockProps = {
  args: {
    nodes: mockNodes,
    edges: mockEdges,
    timestamp: Date.now(),
    height: "100%",
    fitView: true,
    allowNewEdges: true,
    allowZoom: true,
    panOnDrag: true,
    minZoom: 0.5,
    hideWatermark: true,
    showControls: true,
    showMiniMap: true,
    enablePaneMenu: true,
    enableNodeMenu: true,
    enableEdgeMenu: true,
    events: [
      "nodeClick",
      "nodeDoubleClick",
      "edgeClick",
      "connect",
      "nodeMouseEnter",
      "nodeMouseLeave",
    ],
    style: {
      background: "#f5f5f5",
    },
  },
  theme: {
    base: "light",
  },
};

Expected behavior

Canvas should be performant when using a large dataset.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Edge
• Version: 4.0.1

Additional context

No response

[github-actions]

This issue is stale because it has been open for 7 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale.

[tisoap]

This is something I'm aware of, but fixing these performance issues would men changing the underlining algorithm, wich would be a breaking change. I'll leave this opened and pinned to remember to tackle this later, after I'm done with a set of minor changes I have planned.