fix(network graph): sepearte network graph out and add loading screen

app/components/Network/NetworkGraph.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { ForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
+import { FaCircle } from 'react-icons/lib/fa'
+import styles from './NetworkGraph.scss'
+
+class NetworkGraph extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      ready: false
+    }
+  }
+
+  componentWillMount() {
+    setTimeout(() => {
+      this.setState({ ready: true })
+    }, 1000)
+  }
+
+  render() {
+    const { ready } = this.state
+    const {
+      network: { nodes, edges, selectedChannel, networkLoading },
+      identity_pubkey,
+    } = this.props
+
+    if (!ready || networkLoading) {
+      return (
+        <section className={styles.network}>
+          <div className={styles.networkLoading}>
+            <h1>loading network graph</h1>
+          </div>
+        </section>
+      )
+    }
+
+    return (
+      <section className={styles.network}>
+        <ForceGraph
+          simulationOptions={
+            {
+              height: 800,
+              width: 800,
+              strength: { 
+                charge: -500
+              }
+            }
+          }
+          labelAttr='label'
+          opacityFactor={1}
+          highlightDependencies
+          zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }}
+          zoom
+        >
+          <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 ? 'white' : 'black'}
+                />
+              )
+            })
+          }
+          {
+            edges.map(edge => {
+              return (
+                <ForceGraphLink
+                  key={edge.channel_id}
+                  link={{ source: edge.node1_pub, target: edge.node2_pub }}
+                  stroke='silver'
+                  strokeWidth='5'
+                />
+              )
+            })
+          }
+        </ForceGraph>
+      </section>
+    )
+  }
+}
+
+NetworkGraph.propTypes = {
+  network: PropTypes.object.isRequired,
+  identity_pubkey: PropTypes.string.isRequired
+}
+
+export default NetworkGraph

app/components/Network/NetworkGraph.scss

@@ -0,0 +1,55 @@
+@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; }
+}
+
+.networkLoading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 70%;
+  height: 100vh;
+
+  h1 {
+    font-size: 22px;
+    text-align: center;
+    margin-top: calc(50% - 22px);
+  }
+}
+
+.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 {
+  display: inline-block;
+  vertical-align: top;
+  height: 100vh;
+  width: 70%;
+}

app/components/Network/PeersList.js

@@ -5,16 +5,13 @@ import styles from './PeersList.scss'
 const PeersList = ({ peers }) => (
   <ul className={styles.peers}>
     {
-      peers.map(peer => {
+      peers.map(peer =>
-        console.log('peer: ', peer)
+        <li key={peer.peer_id} className={styles.peer}>
-        return (
+          <span className={styles.dot} />
-          <li key={peer.peer_id} className={styles.peer}>
+          <h1>{peer.address}</h1>
-            <span className={styles.dot} />
+          <h4>{peer.pub_key}</h4>
-            <h1>{peer.address}</h1>
+        </li>
-            <h4>{peer.pub_key}</h4>
+      )
-          </li>
-        )
-      })
     }
   </ul>
 )

app/routes/network/components/Network.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
 
-import LoadingBolt from 'components/LoadingBolt'
+import NetworkGraph from 'components/Network/NetworkGraph'
 import PeersList from 'components/Network/PeersList'
 
 import styles from './Network.scss'
@@ -20,13 +20,13 @@ class Network extends Component {
     const {
       setCurrentTab,
 
-      network: { nodes, edges, networkLoading, currentTab },
+      network,
       peers: { peers },
       identity_pubkey
     } = this.props
 
     const renderContent = () => {
-      switch(currentTab) {
+      switch(network.currentTab) {
         case 1:
           return <PeersList peers={peers} />
           break
@@ -39,73 +39,26 @@ class Network extends Component {
       }
     }
 
-    if (!nodes.length || !edges.length) { return <span></span> }
-    if (networkLoading) return <LoadingBolt />
-
     return (
       <div className={styles.container}>
-        <section className={styles.network}>
+        <NetworkGraph className={styles.network} network={network} identity_pubkey={identity_pubkey} />
-          <InteractiveForceGraph
+
-            simulationOptions={
-              {
-                height: 800,
-                width: 800,
-                strength: { 
-                  charge: -500
-                }
-              }
-            }
-            labelAttr='label'
-            onSelectNode={node => console.log('node: ', node)}
-            opacityFactor={1}
-            highlightDependencies
-            zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }}
-            zoom
-          >
-            <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 ? 'white' : 'black'}
-                  />
-                )
-              })
-            }
-            {
-              edges.map(edge => {
-                return (
-                  <ForceGraphLink
-                    key={edge.channel_id}
-                    link={{ source: edge.node1_pub, target: edge.node2_pub }}
-                    stroke='silver'
-                    strokeWidth='5'
-                  />
-                )
-              })
-            }
-          </InteractiveForceGraph>
-        </section>
         <section className={styles.toolbox}>
           <ul className={styles.tabs}>
             <li
-              className={`${styles.tab} ${styles.peersTab} ${currentTab === 1 && styles.active}`}
+              className={`${styles.tab} ${styles.peersTab} ${network.currentTab === 1 && styles.active}`}
               onClick={() => setCurrentTab(1)}
             >
               Peers
             </li>
             <li
-              className={`${styles.tab} ${styles.channelsTab} ${currentTab === 2 && styles.active}`}
+              className={`${styles.tab} ${styles.channelsTab} ${network.currentTab === 2 && styles.active}`}
               onClick={() => setCurrentTab(2)}
             >
               Channels
             </li>
             <li
-              className={`${styles.tab} ${styles.transactionsTab} ${currentTab === 3 && styles.active}`}
+              className={`${styles.tab} ${styles.transactionsTab} ${network.currentTab === 3 && styles.active}`}
               onClick={() => setCurrentTab(3)}
             >
               Transactions