/**
 * app.js
 * 
 * @author Andrew Bowler, Alberto Gomez-Estrada, Taylor Welter
 */

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');
var Vis = require('vis');
var GraphalyzerPanel = require('react-bootstrap').Panel;
var Grid = require('react-bootstrap').Grid;
var Col = require('react-bootstrap').Col;
var Row = require('react-bootstrap').Row;
var GraphPanel = require('./GraphPanel.js');
var SearchPanel = require('./SearchPanel.js');
var NodePropertiesPanel = require('./NodePropertiesPanel.js');

var Graphalyzer = React.createClass({

  getDefaultProps: function() {
    return {
      websocket: new WebSocket('ws://rwhite226.duckdns.org:1618/ws')
    };
  },

  getInitialState: function() {
    return {
      graphData: {},
      selectedNode: {}
    };
  },

  handleWSMessage: function(event) {
    var response = event.data;
    if (response !== null) {
      var responseJSON = JSON.parse(response);
      var data = responseJSON.payload;
      var dataSet = {
        nodes: new Vis.DataSet(data.nodes),
        edges: new Vis.DataSet(data.edges)
      };
      this.setState({graphData: dataSet});
    }
  },

  updateSelectedNode: function(node) {
    this.setState({selectedNode: node});
  },

  componentDidMount: function() {
    this.props.websocket.onmessage = this.handleWSMessage;
  },

  render: function() {
    return (
      <Grid>
        <Col lg={12}>
          <GraphalyzerPanel header='Graphalyzer' bsStyle='primary'>
            <Col lg={9}>
              <GraphPanel graphData={this.state.graphData} updateSelectedNode={this.updateSelectedNode} />
            </Col>
            <Col lg={3}>
              <Row>
                <SearchPanel websocket={this.props.websocket} />
              </Row>
              <Row>
                <NodePropertiesPanel selectedNode={this.state.selectedNode} />
              </Row>
            </Col>
          </GraphalyzerPanel>
        </Col>
      </Grid>
    );
  }
});

ReactDOM.render(
  <Graphalyzer />,
  document.getElementById('main')
);

@@ -735,24 +735,59 @@
    return %7B%0A
+      id: '',%0A      graphList: %5B%5D,%0A
       graphD
@@ -837,348 +837,1536 @@
 %0A%0A  
-handleWSMessage: function(event) %7B%0A    var response = event.data;%0A    if (response !== null) %7B%0A      var responseJSON = JSON.parse(response);%0A      var data = responseJSON.payload;%0A      var dataSet = %7B%0A        nodes: new Vis.DataSet(data.nodes),%0A        edges: new Vis.DataSet(data.edges)%0A      %7D;%0A      this.setState(%7BgraphData: dataSet%7D)
+initGraph: function(data) %7B%0A    var dataSet = %7B%0A      nodes: new Vis.DataSet(data.nodes),%0A      edges: new Vis.DataSet(data.edges)%0A    %7D;%0A    this.setState(%7BgraphData: dataSet%7D);%0A  %7D,%0A%0A  waitForWS: function(ws, callback) %7B%0A    var self = this;%0A    setTimeout(%0A      function () %7B%0A        if (ws.readyState === 1) %7B%0A          if(callback != null) callback();%0A          return;%0A        %7D else self.waitForWS(ws, callback);%0A      %7D, 5); // wait 5 milisecond for the connection...%0A  %7D,%0A%0A  sendWebSocketMessage: function(request) %7B%0A    var self = this;%0A    this.waitForWS(self.props.websocket, function() %7B%0A      self.props.websocket.send(JSON.stringify(request));%0A    %7D);%0A  %7D,%0A%0A  getGraphList: function(data) %7B%0A    var request = %7B  %0A      'message_id': '',%0A      'sender_id': '',%0A      'time': '',%0A      'request': 'listgraphs',%0A      'status': '',%0A      'error': '',%0A      'payload': '',%0A      'message': ''%0A    %7D;%0A%0A    this.sendWebSocketMessage(request);%0A  %7D,%0A%0A  handleWSMessage: function(event) %7B%0A    var response = event.data;%0A    if (response !== null) %7B%0A      var responseJSON = JSON.parse(response);%0A      console.log(responseJSON);%0A      var action = responseJSON.message.client_request_type;%0A      if (action == 'error') return;%0A      else if (action == 'getgraph') %7B%0A        this.initGraph(responseJSON.payload);%0A      %7D else if (action == 'listgraphs') %7B%0A        this.setState(%7BgraphList: responseJSON.payload%7D);%0A      %7D else if (action == 'newid') %7B%0A        this.setState(%7Bid: responseJSON.payload%7D);%0A      %7D else return
 ;%0A  

Make process of using the WebSocket more robust