I think the sigma.js library is really amazing and I have been using it a lot lately for a scientific project. My problem is that I could not get self-loops (self-interactions) to render. I have created a minimal version of my code below. Am I missing something?

The libraries I use are:

├── @sigma/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

And my javascript is:

import Graph from "graphology";
import Sigma from "sigma";
import EdgeCurveProgram, { DEFAULT_EDGE_CURVATURE } from "@sigma/edge-curve";

// Create a graph instance
const graph = new Graph({
  'allowSelfLoops': true,
  'type': 'undirected',
});

// Add test nodes and edges
graph.addNode('n1', {x: 5, y: 5, size: 20});
graph.addNode('n2', {x: 10, y: 5, size: 20});
graph.addNode('n3', {x: 7.5, y: 4, size: 20});
graph.addEdge('n1', 'n2', {size: 10, type: 'line'});
graph.addEdge('n1', 'n3', {size: 10, type: 'curved'});
// Played around with curvature value, but this does not seem to be the issue
graph.addEdge('n2', 'n2', {size: 10, type: 'curved', curvature: DEFAULT_EDGE_CURVATURE});

// this is a simple div
const container = document.getElementById("sigma-container");

// Instantiate sigma.js and render the graph
const sigmaInstance = new Sigma(graph, container, {
  edgeProgramClasses: {
    curved: EdgeCurveProgram
  }
});

sigmaInstance.refresh();

which for me results in:
Graph without self-loop

but I would like to achieve:
Graph with self-loop (my goal)

Any help would be highly appreciated.