I’m new in sigma.js development, and I’ve been trying to create a custom shape node which is square, as per the docs, this is possible by using the “renderer”.

Based on the docs, I need to instantiate the renderer with a declared type that uses the NodeCircleProgram and the name of the node type as key, refer to the code snippet below:

const renderer = new Sigma(graph, container, {
  allowInvalidContainer: true,
  defaultEdgeType: "straight",
  defaultNodeType: "square",
  nodeProgramClasses: {
    square: NodeCircleProgram,
    circle: NodeCircleProgram
  },
  edgeProgramClasses: {
    straight: EdgeArrowProgram,
    curved: EdgeCurvedArrowProgram
  }
})

Then this is how I’m rendering the nodes:

myNodes.forEach(value => {
  graph.addNode(value.key, {
    forceLabel: true,
    label: value.label,
    x: value.col,
    y: value.row,
    size: value.size,
    url: value.url,
    type: "square"
  })
})

Anyone that can point out what is the problem here? The nodes and edges are working fine with no error in the console logs, but the nodes is still circle.