cywidget-network/src/NetworkWidget.jsx

Simple network viewer widget based on Cytoscape.js and React.js.

import React from "react";
import { connect } from 'react-redux';
import CytoscapeRenderer from "./components/CytoscapeRenderer.jsx"
import { fetchNetwork, cyjsSelected } from "./state/actions/GraphAction.jsx"
import graphReducer from "./state/reducers/graphReducer.jsx"


class NetworkWidget extends React.Component {

  componentDidMount() {
    // Fetch Cytoscape.js JSON from remote resource.
    this.props.fetchNetwork(this.props.networkLocation);
  }

  render() {
    const {networkLocation, cyjsSelected, fetchNetwork, selected, graph, width, height, background, ...props} = this.props;

    const style = {
      width: width,
      height: height,
      background: background,
      display: "block"
    }

    return (
      <div>
        <CytoscapeRenderer
          graph={graph}
          style={style}
          selected={selected}
          cyjsSelected={cyjsSelected}
          fetchNetwork={fetchNetwork}
          graphUrl={networkLocation}
        />
      </div>
    )
  }
}


function mapDispatchToProps(dispatch) {
  return {
    cyjsSelected: (selected) => dispatch(cyjsSelected(selected)),
    fetchNetwork: (networkLocation) => dispatch(fetchNetwork(networkLocation))
  }
}


function mapStateToProps(state) {
  console.log("--- STATE to PROPS ---");
  console.log(state);

  return {
    graph: state.graphReducer.graph,
    selected: state.graphReducer.selected,
    graphUrl: state.graphReducer.graphUrl
  }
}


// Export connected (Component connected to store) React component.
export const CyNetworkWidget = connect(
  mapStateToProps,
  mapDispatchToProps
)(NetworkWidget);

// ...and in addition, export reducer to be used by cytoFramework.
export {graphReducer}