ReactGraphExplorer.js 2.26 KB
Newer Older
Sudhir Kumar's avatar
Sudhir Kumar committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
var React = require('react');
var PropTypes = require('prop-types');

var graphExplorer = require('graph-explorer');

console.log(graphExplorer);

const GraphExplorer = graphExplorer.default;

class ReactGraphExplorer extends React.Component {
  constructor(props) {
    super(props);

    this.ge = new GraphExplorer(props.settings, props.handlers);
    this.state = { graph: props.graph, mode: props.mode };

    this.initRenderer = this.initRenderer.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.ge);
    if (nextProps.graph) {
      this.setState({ graph: nextProps.graph }, () => {
        this.ge.loadGraph(this.state.graph);
        this.ge.clusterize();
        this.ge.spatialize();
      });
    }

    this.setState({ mode: nextProps.mode }, () => {
      this.ge.sigma.settings('mode', this.state.mode);
    });
  }

  initRenderer(container) {
    this.ge.addRenderer(container);
  }

  render() {
    return React.createElement('div', { id: 'ge-container', ref: this.initRenderer }, null);
  }
}

ReactGraphExplorer.propTypes = {
  graph: PropTypes.shape({
    nodes: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        label: PropTypes.string,
        x: PropTypes.number,
        y: PropTypes.number,
        size: PropTypes.number,
        type: PropTypes.string,
        attributes: PropTypes.object // TODO(lucas): Specify this further.
      })
    ).isRequired,
    edges: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        source: PropTypes.string.isRequired,
        target: PropTypes.string.isRequired,
        weight: PropTypes.number // NOTE(lucas): required?
      }).isRequired
    )
  }),
  settings: PropTypes.shape({
    // TODO(lucas)
  }),
  mode: PropTypes.string,
  handlers: PropTypes.shape({
    overNode: PropTypes.func,
    outNode: PropTypes.func,
    clickNode: PropTypes.func,
    doubleClickNode: PropTypes.func,
    rightClickNode: PropTypes.func,
    overEdge: PropTypes.func,
    outEdge: PropTypes.func,
    clickEdge: PropTypes.func,
    doubleClickEdge: PropTypes.func,
    rightClickEdge: PropTypes.func,
    clickStage: PropTypes.func,
    doubleClickStage: PropTypes.func,
    rightClickStage: PropTypes.func
  })
};

export default ReactGraphExplorer;