FA2 Layout not work

[Rey-Wang]

Guidelines

To help us understand your issue, please specify important details, primarily:

  "@react-sigma/core": "^5.0.4",
  "@react-sigma/layout-circular": "^5.0.4",
  "@react-sigma/layout-forceatlas2": "^5.0.4",
  "graphology": "^0.26.0",
  "graphology-types": "^0.24.8",
  "sigma": "^3.0.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",

Steps to reproduce

import { useEffect } from 'react';
import { useLoadGraph } from '@react-sigma/core';
import { useLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2';
import Graph from 'graphology';
export function LoadFA2Graph() {
  const loadGraph = useLoadGraph();

  const { assign: assignForceAtlas2, positions } = useLayoutForceAtlas2();

  useEffect(() => {
    const graph = new Graph();
    graph.addNode('node1', { label: 'Node 1', x: 0, y: 0, size: 10, color: '#ff0000' });
    graph.addNode('node2', { label: 'Node 2', x: 0, y: 0, size: 10, color: '#00ff00' });
    graph.addNode('node3', { label: 'Node 3', x: 0, y: 0, size: 10, color: '#0000ff' });
    graph.addEdge('node1', 'node2', { label: 'Edge from Node 1 to Node 2' });
    graph.addEdge('node2', 'node3', { label: 'Edge from Node 2 to Node 3' });
    loadGraph(graph);

    // 加载图
    loadGraph(graph);
    assignForceAtlas2();
    console.log(positions());
  }, [loadGraph, assignForceAtlas2, positions]);

  return null;
}

The consoles:

{
    "node1": {
        "x": 0,
        "y": 0
    },
    "node2": {
        "x": 0,
        "y": 0
    },
    "node3": {
        "x": 0,
        "y": 0
    }
}

Expected behavior

Layout should work

Actual behavior

Layout not work

Note

If the issue has an inactivity of 30 days, it becomes stale.
With an additional inactivity of 14 days, the issue is closed

[sim51]

You have initialized your graph with each node at position {0,0}, so the forces applied by the algo to the graph can't be applied.
Try to make a random graph before to apply FA2