All versions of this documentation
X

Integration with React Download code

Follow this rule: initialize your Ogma instance in your top-level component, and pass the instance to the sub-components through their properties.

Let's write a quick React application that has the following components:

  • a text that indicates the current number of nodes in the graph
  • two buttons to add and remove a node
  • a component that displays the visualization

The root component, which initializes Ogma and contains all of of the three components:

class App extends Component {
  constructor(props) {
    super(props);

    // Create the instance of Ogma

    this.ogma = new Ogma({
      options: {
        backgroundColor: 'rgb(220, 220, 220)'
      }
    });
  }

  render() {
    // Render the components of the app

    return (
      <div style={{width: '800px', margin: '5px', textAlign: 'center', fontFamily: 'Arial'}}>
        <InfoPanel ogma={this.ogma} />
        <ControlPanel ogma={this.ogma} />
        <Container ogma={this.ogma} />
      </div>
    );
  }
}

InfoPanel, which displays the number of nodes in the graph:

class InfoPanel extends Component {
  constructor(props) {
    super(props);

    // The state contains the number of nodes
    this.state = {nbNodes: 0};

    // Function that changes the state of the component
    this.updateNbNodes = this.updateNbNodes.bind(this);
  }

  updateNbNodes() {
    this.setState({nbNodes: this.props.ogma.getNodes().size})
  }

  componentDidMount() {
    // When the component is mount, subscribe to events that change its state

    this.props.ogma.events.onNodesAdded(this.updateNbNodes);
    this.props.ogma.events.onNodesRemoved(this.updateNbNodes);

    this.updateNbNodes();
  }

  componentWillUnmount() {
    // When the component is unmounted, there is no need to listen to these events anymore

    this.props.ogma.events.removeListener(this.updateNbNodes);

  }

  render() {
    // The component will be re-rendered when its state is modified, aka when some
    // nodes are added or removed

    return (
      <p>Number of nodes: {this.state.nbNodes}</p>
    );
  }
}

ControlPanel, which provides the two buttons to add/remove nodes:

class ControlPanel extends Component {
  constructor(props) {
    super(props);
    this.counter = 0;
  }

  addNode() {
    let ogma = this.props.ogma;
    ogma.addNode({
      id: this.counter++,
      attributes: {
        x: Math.random() * 100,
        y: Math.random() * 100
      }
    });
    ogma.view.locateGraph();
  }

  removeNode() {
    let ogma = this.props.ogma,
        allNodes = ogma.getNodes();

    if (allNodes.size > 0) {
      ogma.removeNode(allNodes.get(0));
      ogma.view.locateGraph();
    }
  }

  render() {
    // The buttons interact with the Ogma instance passed as a property

    return (
      <div>
        <button style={{margin: '5px'}} onClick={() => this.addNode()}>Add node</button>
        <button style={{margin: '5px'}} onClick={() => this.removeNode()}>Remove node</button>
      </div>
    );
  }
}

Container, which displays the Ogma instance:

class Container extends Component {
  componentDidMount() {
    // When the component is mounted, set the rendered HTML as the container of Ogma
    // 'ogma-react' is the id of the HTML element that has been rendered by the component

    this.props.ogma.setContainer('ogma-react');
  }

  componentWillUnmount() {
    // When the component is unmounted, set Ogma as headless

    this.props.ogma.setContainer(null);
  }

  render() {
    // Render a div that will act as the Ogma container

    return (
      <div id='ogma-react' style={{position: 'absolute', width: '800px', height: '600px'}}> </div>
    );
  }
}

The result:

Ogma+React