[Example code] Weird graph initialization

[mvbattan]

Summary

The first example doesn't work very well. At least, it initialize a zone where the graph should live but the nodes and edges have a little offset from this zone.

This was done on a create-react-app example.

Evidence

Repr code

import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

import styles from './styles.module.scss';

const myGraph = {
  nodes: [
    { id: 'n1', label: 'Alice' },
    { id: 'n2', label: 'Rabbit' }
  ],
  edges: [{ id: 'e1', source: 'n1', target: 'n2', label: 'SEES' }]
};

function Graph() {
  return (
    <div className={styles.container}>
      <Sigma
        graph={myGraph}
        settings={{ drawEdges: true, clone: false }}
        style={{ position: 'relative', width: '50%', height: '50%', backgroundColor: 'red' }}
        renderer="canvas"
      >
        <RelativeSize initialSize={10} />
        <RandomizeNodePositions />
      </Sigma>
    </div>
  );
}

export default Graph;

Although I can modify Sigma's style, edges and nodes have an offset.

Workaround

Writing this in a .css as global classes worked:

canvas.sigma-mouse, canvas.sigma-scene {
  right: 0;
}

Screenshot

[RD7023]

Thank you. Really helped