lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix(network graph): remove old react-vis-force component

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
a51b14f080
commit
4a98e38dea
4 changed files with 4 additions and 252 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      app/components/Network/CanvasNetworkGraph.js
  2. 169
      app/components/Network/NetworkGraph.js
  3. 75
      app/components/Network/NetworkGraph.scss
  4. 1
      app/routes/network/components/Network.js

11
app/components/Network/CanvasNetworkGraph.js
View File

@ -44,7 +44,7 @@ class CanvasNetworkGraph extends Component {
const simulationDataEmpty = !nodes.length && !links.length const simulationDataEmpty = !nodes.length && !links.length
const networkDataLoaded = network.nodes.length || network.edges.length const networkDataLoaded = network.nodes.length || network.edges.length
// if the simulationData is empty and we have data // if the simulationData is empty and we have network data
if (simulationDataEmpty && networkDataLoaded) { if (simulationDataEmpty && networkDataLoaded) {
this.setState({ this.setState({
simulationData: generateSimulationData(network.nodes, network.edges) simulationData: generateSimulationData(network.nodes, network.edges)
@ -53,7 +53,7 @@ class CanvasNetworkGraph extends Component {
} }
componentDidMount() { componentDidMount() {
// wait for the svg to me in the DOM before we start the simulation // wait for the svg to be in the DOM before we start the simulation
const svgInterval = setInterval(() => { const svgInterval = setInterval(() => {
if (document.getElementById('mapContainer')) { if (document.getElementById('mapContainer')) {
d3.select('#mapContainer') d3.select('#mapContainer')
@ -227,10 +227,7 @@ class CanvasNetworkGraph extends Component {
_restart() { _restart() {
const { identity_pubkey } = this.props const { identity_pubkey } = this.props
const { const { simulationData: { nodes, links } } = this.state
simulation,
simulationData: { nodes, links }
} = this.state
// Apply the general update pattern to the nodes. // Apply the general update pattern to the nodes.
this.node = this.node.data(nodes, d => d.pub_key) this.node = this.node.data(nodes, d => d.pub_key)
@ -286,4 +283,4 @@ CanvasNetworkGraph.propTypes = {
network: PropTypes.object.isRequired network: PropTypes.object.isRequired
} }
export default CanvasNetworkGraph export default CanvasNetworkGraph

169
app/components/Network/NetworkGraph.js
View File

@ -1,169 +0,0 @@
import { findDOMNode } from 'react-dom'
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 Isvg from 'react-inlinesvg'
import LoadingBolt from 'components/LoadingBolt'
import bitcoinIcon from 'icons/skinny_bitcoin.svg'
import styles from './NetworkGraph.scss'
class NetworkGraph extends Component {
constructor(props) {
super(props)
this.state = {
ready: false
}
}
componentWillMount() {
setTimeout(() => {
this.setState({ ready: true })
}, 10000)
}
render() {
const { ready } = this.state
const {
network: { nodes, edges, selectedChannel, networkLoading },
selectedPeerPubkeys,
selectedChannelIds,
currentRouteChanIds,
identity_pubkey
} = this.props
if ((!nodes.length || !edges.length) || networkLoading) {
return (
<section className={styles.network}>
<div className={styles.networkLoading}>
<h1>loading network graph</h1>
</div>
</section>
)
}
return (
<section className={styles.network}>
<ForceGraph
id='map'
simulationOptions={
{
height: 800,
width: 800,
strength: {
charge: -750
}
}
}
labelAttr='label'
opacityFactor={1}
zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }}
zoom
highlightDependencies
ref={(el) => {
console.log('el: ', el)
this.fg = el
}}
>
{
nodes.map(node =>
<ForceGraphNode
id={node.pub_key}
r={25}
label={node.pub_key}
key={node.pub_key}
node={{ id: node.pub_key }}
strokeWidth={2.5}
className={`${styles.node} ${identity_pubkey === node.pub_key && styles.owner} ${selectedPeerPubkeys.includes(node.pub_key) && styles.peer}`}
/>
)
}
{
edges.map(edge => {
return (
<ForceGraphLink
id={edge.channel_id}
className={selectedChannelIds.includes(edge.channel_id) && styles.activeEdge}
key={edge.channel_id}
link={{ source: edge.node1_pub, target: edge.node2_pub }}
stroke='silver'
strokeWidth='5'
/>
)
})
}
{
currentRouteChanIds.map((chan_id) => {
const line = document.getElementById(chan_id)
if (!line) { return }
const x1 = line.x1.baseVal.value
const x2 = line.x2.baseVal.value
const y1 = line.y1.baseVal.value
const y2 = line.y2.baseVal.value
return (
<circle id={`circle-${chan_id}`} r="10" cx={x1} cy={y1} fill="#FFDC53" zoomable />
)
})
}
{
currentRouteChanIds.map((chan_id) => {
const line = document.getElementById(chan_id)
if (!line) { return }
const x1 = line.x1.baseVal.value
const x2 = line.x2.baseVal.value
const y1 = line.y1.baseVal.value
const y2 = line.y2.baseVal.value
return (
<animate
xlinkHref={`#circle-${chan_id}`}
attributeName="cx"
from={x1}
to={x2}
dur="1s"
fill="freeze"
repeatCount="indefinite"
/>
)
})
}
{
currentRouteChanIds.map((chan_id) => {
const line = document.getElementById(chan_id)
if (!line) { return }
const x1 = line.x1.baseVal.value
const x2 = line.x2.baseVal.value
const y1 = line.y1.baseVal.value
const y2 = line.y2.baseVal.value
return (
<animate
xlinkHref={`#circle-${chan_id}`}
attributeName="cy"
from={y1}
to={y2}
dur="1s"
fill="freeze"
repeatCount="indefinite"
/>
)
})
}
</ForceGraph>
</section>
)
}
}
NetworkGraph.propTypes = {
network: PropTypes.object.isRequired,
identity_pubkey: PropTypes.string.isRequired
}
export default NetworkGraph

75
app/components/Network/NetworkGraph.scss
View File

@ -1,75 +0,0 @@
@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;
animation: fadein 0.5s;
animation-timing-function:linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
// visibility: hidden;
&.active {
// visibility: visible;
}
h1 {
font-size: 22px;
text-align: center;
margin-top: calc(50% - 22px);
animation: color-change 1s infinite;
}
}
.network {
width: 100%;
height: 100vh;
animation: fadein 0.5s;
animation-timing-function:linear;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.node {
stroke-width: 2 !important;
animation: color-change 1s infinite;
fill: #353535;
&.owner {
fill: #FFFFFF;
}
&.peer {
fill: #5589F3;
}
}
.activeEdge {
opacity: 1;
stroke: #88D4A2;
stroke-width: 5;
stroke-dasharray: 100;
animation: dash 2.5s infinite linear;
}
.network {
display: inline-block;
vertical-align: top;
height: 100vh;
width: 70%;
}

1
app/routes/network/components/Network.js
View File

@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force' import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
import CanvasNetworkGraph from 'components/Network/CanvasNetworkGraph' import CanvasNetworkGraph from 'components/Network/CanvasNetworkGraph'
import NetworkGraph from 'components/Network/NetworkGraph'
import PeersList from 'components/Network/PeersList' import PeersList from 'components/Network/PeersList'
import ChannelsList from 'components/Network/ChannelsList' import ChannelsList from 'components/Network/ChannelsList'
import TransactionForm from 'components/Network/TransactionForm' import TransactionForm from 'components/Network/TransactionForm'

Write Preview
Loading…
Cancel
Save