Vis.js graph component for Idyll

graph.js

const React          = require('react');
const IdyllComponent = require('idyll-component');
const Graph          = require('react-graph-vis').default;

const options = {
  layout: {
    hierarchical: true
  },
  edges: {
    color: "#000000"
  }
};

const events = {
    select: function(event) {
        const { nodes, edges } = event;
        console.log("Selected nodes:", nodes);
        console.log("Selected edges:", edges);
    }
};

class GraphComponent extends IdyllComponent {

  constructor(props) {
    super(props)
    this.state = {
      graph: this.props.data
    }
  }
  
  render() {
    return (
       <Graph
         graph={this.state.graph}
         options={options}
         events={events}
       />
    );
  }
}

module.exports = GraphComponent;

graph.json

{
  "nodes": [
      {"id": 1, "label": "Node 1", "color": "#e04141"},
      {"id": 2, "label": "Node 2", "color": "#e09c41"},
      {"id": 3, "label": "Node 3", "color": "#e0df41"},
      {"id": 4, "label": "Node 4", "color": "#7be041"},
      {"id": 5, "label": "Node 5", "color": "#41e0c9"}
    ],
  "edges": [
      {"from": 1, "to": 2},
      {"from": 1, "to": 3},
      {"from": 2, "to": 4},
      {"from": 2, "to": 5}
    ]
}

index.idl

[data name:"graph" source:"graph.json" /]
[Graph data:graph /]