feature(channels): channel network map working

app/components/Network/ChannelsList.js

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types'
 import { btc } from 'utils'
 import styles from './ChannelsList.scss'
 
-const ChannelsList = ({ channels }) => (
+const ChannelsList = ({ channels, updateSelectedChannels, selectedChannelIds }) => (
   <ul className={styles.channels}>
     {
-      channels.map((channel, index) =>
+      channels.map(channel =>
-        <li key={index} className={styles.channel} onClick={() => console.log('channel clicked')}>
+        <li key={channel.chan_id} className={styles.channel} onClick={() => updateSelectedChannels(channel)}>
-          <span className={`${styles.dot}`} />
+          <span className={`${styles.dot} ${selectedChannelIds.includes(channel.chan_id) && styles.active}`} />
 
           <header>
             <h1>Capacity: {btc.satoshisToBtc(channel.capacity)}</h1>

app/components/Network/NetworkGraph.js

@@ -23,6 +23,7 @@ class NetworkGraph extends Component {
     const {
       network: { nodes, edges, selectedChannel, networkLoading },
       selectedPeerPubkeys,
+      selectedChannelIds,
       identity_pubkey,
     } = this.props
 
@@ -36,6 +37,7 @@ class NetworkGraph extends Component {
       )
     }
 
+    console.log('selectedChannelIds: ', selectedChannelIds)
     return (
       <section className={styles.network}>
         <ForceGraph
@@ -55,31 +57,28 @@ class NetworkGraph extends Component {
           zoom
         >
           {
-            nodes.map(node => {
+            nodes.map(node =>
-              return (
+              <ForceGraphNode
-                <ForceGraphNode
+                r={25}
-                  r={25}
+                label={node.pub_key}
-                  label={node.pub_key}
+                key={node.pub_key}
-                  key={node.pub_key}
+                node={{ id: node.pub_key }}
-                  node={{ id: node.pub_key }}
+                fill={selectedPeerPubkeys.includes(node.pub_key) ? '#5589F3' : '#353535'}
-                  fill={selectedPeerPubkeys.includes(node.pub_key) ? '#5589F3' : '#353535'}
+                strokeWidth={2.5}
-                  strokeWidth={2.5}
+                className={styles.node}
-                  className={styles.node}
+              />
-                />
+            )
-              )
-            })
           }
           {
-            edges.map(edge => {
+            edges.map(edge =>
-              return (
+              <ForceGraphLink
-                <ForceGraphLink
+                className={selectedChannelIds.includes(edge.channel_id) && styles.activeEdge}
-                  key={edge.channel_id}
+                key={edge.channel_id}
-                  link={{ source: edge.node1_pub, target: edge.node2_pub }}
+                link={{ source: edge.node1_pub, target: edge.node2_pub }}
-                  stroke='silver'
+                stroke='silver'
-                  strokeWidth='5'
+                strokeWidth='5'
-                />
+              />
-              )
+            )
-            })
           }
         </ForceGraph>
       </section>

app/components/Network/NetworkGraph.scss

@@ -52,6 +52,14 @@
   stroke-width: 2 !important;
 }
 
+.activeEdge {
+  opacity: 1;
+  stroke: #88D4A2;
+  stroke-width: 5;
+  stroke-dasharray: 100;
+  animation: dash 2.5s infinite linear;
+}
+
 .network {
   display: inline-block;
   vertical-align: top;

app/reducers/network.js

@@ -22,6 +22,8 @@ export const UPDATE_PAY_REQ = 'UPDATE_PAY_REQ'
 
 export const UPDATE_SELECTED_PEERS = 'UPDATE_SELECTED_PEERS'
 
+export const UPDATE_SELECTED_CHANNELS = 'UPDATE_SELECTED_CHANNELS'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -80,6 +82,13 @@ export function updateSelectedPeers(peer) {
   }
 }
 
+export function updateSelectedChannels(channel) {
+  return {
+    type: UPDATE_SELECTED_CHANNELS,
+    channel
+  }
+}
+
 // Send IPC event for describeNetwork
 export const fetchDescribeNetwork = () => (dispatch) => {
   dispatch(getDescribeNetwork())
@@ -141,6 +150,22 @@ const ACTION_HANDLERS = {
     return {
       ...state, selectedPeers
     }
+  },
+
+  [UPDATE_SELECTED_CHANNELS]: (state, { channel }) => {
+    let selectedChannels
+    
+    if (state.selectedChannels.includes(channel)) {
+      selectedChannels = state.selectedChannels.filter(selectedChannel => selectedChannel.chan_id !== channel.chan_id)
+    }
+
+    if (!state.selectedChannels.includes(channel)) {
+      selectedChannels = [...state.selectedChannels, channel]
+    }
+
+    return {
+      ...state, selectedChannels
+    }
   }
 }
 
@@ -150,6 +175,7 @@ const ACTION_HANDLERS = {
 const networkSelectors = {}
 const currentRouteSelector = state => state.network.selectedNode.currentRoute
 const selectedPeers = state => state.network.selectedPeers
+const selectedChannels = state => state.network.selectedChannels
 
 networkSelectors.currentRouteHopChanIds = createSelector(
   currentRouteSelector,
@@ -165,6 +191,11 @@ networkSelectors.selectedPeerPubkeys = createSelector(
   peers => peers.map(peer => peer.pub_key)
 )
 
+networkSelectors.selectedChannelIds = createSelector(
+  selectedChannels,
+  channels => channels.map(channel => channel.chan_id)
+)
+
 export { networkSelectors }
 
 // ------------------------------------
@@ -187,7 +218,8 @@ const initialState = {
 
   pay_req: '',
 
-  selectedPeers: []
+  selectedPeers: [],
+  selectedChannels: []
 }
 
 

app/routes/network/components/Network.js

@@ -29,6 +29,8 @@ class Network extends Component {
       peers: { peers },
       
       activeChannels,
+      selectedChannelIds,
+      updateSelectedChannels,
 
       identity_pubkey
     } = this.props
@@ -39,7 +41,7 @@ class Network extends Component {
           return <PeersList peers={peers} updateSelectedPeers={updateSelectedPeers} selectedPeerPubkeys={selectedPeerPubkeys} />
           break
         case 2:
-          return <ChannelsList channels={activeChannels} />
+          return <ChannelsList channels={activeChannels} updateSelectedChannels={updateSelectedChannels} selectedChannelIds={selectedChannelIds} />
           break
         case 3:
           return <h1>transactions</h1>
@@ -54,6 +56,7 @@ class Network extends Component {
           network={network}
           identity_pubkey={identity_pubkey}
           selectedPeerPubkeys={selectedPeerPubkeys}
+          selectedChannelIds={selectedChannelIds}
         />
 
         <section className={styles.toolbox}>

app/routes/network/containers/NetworkContainer.js

@@ -6,6 +6,7 @@ import {
 
   setCurrentTab,
   updateSelectedPeers,
+  updateSelectedChannels,
 
   networkSelectors
 } from '../../../reducers/network'
@@ -21,7 +22,8 @@ const mapDispatchToProps = {
   
   fetchPeers,
 
-  fetchChannels
+  fetchChannels,
+  updateSelectedChannels
 }
 
 const mapStateToProps = state => ({
@@ -30,6 +32,7 @@ const mapStateToProps = state => ({
   identity_pubkey: state.info.data.identity_pubkey,
 
   selectedPeerPubkeys: networkSelectors.selectedPeerPubkeys(state),
+  selectedChannelIds: networkSelectors.selectedChannelIds(state),
   activeChannels: channelsSelectors.activeChannels(state)
 })