feature(network): add simple network graph to network route

app/routes/network/components/Network.js

@@ -1,14 +1,82 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
+import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
+import LoadingBolt from '../../../components/LoadingBolt'
+
 import styles from './Network.scss'
 
 class Network extends Component {
+  componentWillMount() {
+    const { fetchDescribeNetwork } = this.props
+
+    fetchDescribeNetwork()
+  }
+
   render() {
-    const {} = this.props
+    const {
+      network: { nodes, edges, selectedNode, networkLoading },
+      identity_pubkey
+    } = this.props
+
+    console.log('props: ', this.props)
+
+    if (networkLoading) return <LoadingBolt />
 
     return (
-      <h1>network</h1>
+      <div className={styles.container}>
+        <section className={styles.network}>
+          <InteractiveForceGraph
+            simulationOptions={
+              {
+                height: 1000,
+                width: 1000,
+                strength: { 
+                  charge: -750
+                },
+                animate: true 
+              }
+            }
+            labelAttr='label'
+            onSelectNode={node => console.log('node: ', node)}
+            opacityFactor={1}
+            zoomOptions={{ minScale: 0.1, maxScale: 5 }}
+            zoom
+            highlightDependencies
+          >
+            <path d="M534.7054286266647, 460.3260926684966" fill="red" stroke="blue" />
+            {
+              nodes.map(node => {
+                return (
+                  <ForceGraphNode
+                    r={15}
+                    label={node.pub_key}
+                    key={node.pub_key}
+                    node={{ id: node.pub_key }}
+                    fill={
+                      identity_pubkey === node.pub_key || selectedNode.pubkey === node.pub_key ? '#00FF00' : 'black'
+                    }
+                  />
+                )
+              })
+            }
+            {
+              edges.map(edge => {
+                return (
+                  <ForceGraphLink
+                    className={selectedNode.pubkey.length}
+                    key={edge.channel_id}
+                    link={{ source: edge.node1_pub, target: edge.node2_pub }}
+                    stroke={'silver'}
+                    strokeWidth='5'
+                    ref={line => this[edge.channel_id] = line}
+                  />
+                )
+              })
+            }
+          </InteractiveForceGraph>
+        </section>
+      </div>
     )
   }
 }

app/routes/network/components/Network.scss

@@ -0,0 +1,85 @@
+@import '../../../variables.scss';
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 1000;
+  }
+}
+
+@keyframes fadein {
+  0%   { background: $white; }
+  50%  { background: lighten($secondary, 50%); }
+  100% { background: $secondary; animation-fill-mode:forwards; }
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  animation: fadein 0.5s;
+  animation-timing-function:linear;
+  animation-fill-mode:forwards;
+  animation-iteration-count: 1;
+
+  line.active {
+    opacity: 1;
+    stroke: green;
+    stroke-width: 5;
+    stroke-dasharray: 100;
+    animation: dash 2.5s infinite linear;
+  }
+
+  circle {
+    cursor: pointer;
+  }
+}
+
+.network, .data {
+  display: inline-block;
+  vertical-align: top;
+  height: 100vh;
+}
+
+.network {
+  width: 70%;
+}
+
+.data {
+  width: 30%;
+  background: $black;
+  color: #00FF00;
+  word-wrap: break-word;
+  overflow-y: scroll;
+
+  header, .routes {
+    padding: 10px;
+  }
+
+  header {
+    margin-top: 50px;
+
+    h1 span {
+      display: block;
+      margin: 5px 0;
+
+      &:nth-child(2) {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .routes {
+    .route {
+      cursor: pointer;
+      margin: 20px 0;
+
+      &.active {
+        background: #00FF00;
+        color: black;
+      }
+
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+}

app/routes/network/containers/NetworkContainer.js

@@ -1,10 +1,17 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 
+import { fetchDescribeNetwork } from 'reducers/network'
+
 import Network from '../components/Network'
 
-const mapDispatchToProps = {}
+const mapDispatchToProps = {
+  fetchDescribeNetwork
+}
 
-const mapStateToProps = state => ({})
+const mapStateToProps = state => ({
+  network: state.network,
+  identity_pubkey: state.info.data.identity_pubkey
+})
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network))