Fix peaks left behind hidden edges (or not appearing when edges appear)

components/graph/index.js

@@ -96,8 +96,6 @@ const {
 	Edge,
 } = require('./base');
 
-const Peaks = require('./peaks');
-
 const LayoutEngine = require('./layout-engine');
 
 const maximum = reduce(max, -Infinity);
@@ -1453,29 +1451,14 @@ class Graph extends React.PureComponent {
 	render() {
 		const { nodes, edges } = this.state;
 
-		const satellitesGraphViewState = path(
-			[ 'current', 'state' ],
-			this.satellitesGraphViewRef,
-		);
-
 		return r(HotKeys, {
 			handlers: map(f => bind(f, this), pick(keys(keyMap), this)),
 		}, r.div({
 			id: 'graph',
 		}, [
-			!this.props.preferences.hideLiveVolumePeaks && r(Peaks, {
-				key: 'peaks',
-				nodes: defaultTo([], prop('satelliteNodes', satellitesGraphViewState)),
-				edges: defaultTo([], prop('satelliteEdges', satellitesGraphViewState)),
-				accommodateGraphAnimation: this.state.isDraggingNode || this.state.isZooming,
-				peaks: this.props.peaks,
-			}),
-
 			r(SatellitesGraphView, {
 				key: 'graph',
 
-				ref: this.satellitesGraphViewRef,
-
 				nodeKey: 'id',
 				edgeKey: 'id',
 
@@ -1522,6 +1505,10 @@ class Graph extends React.PureComponent {
 
 				renderEdge,
 				renderEdgeText: renderEdgeText(this.props.store),
+
+				hideLiveVolumePeaks: this.props.preferences.hideLiveVolumePeaks,
+				accommodateGraphAnimation: this.state.isDraggingNode || this.state.isZooming,
+				peaks: this.props.peaks,
 			}),
 
 			this.state.contexted && (

components/graph/peaks.js

@@ -97,6 +97,7 @@ class Peaks extends React.Component {
 	}
 
 	handleTick() {
+		console.log(this.props.edges.length);
 		const matrix = this.view.getScreenCTM();
 		const point = this.graph.createSVGPoint();
 

components/graph/satellites-graph.js

@@ -18,6 +18,8 @@ const {
 	GraphView: GraphViewBase,
 } = require('./base');
 
+const Peaks = require('./peaks');
+
 const originalEdgeToSatelliteNode = edge => ({
 	id: `${edge.target}__satellite__${edge.id}`,
 	type: 'satellite',
@@ -218,34 +220,54 @@ class SatellitesGraphView extends React.Component {
 			moved,
 		} = this.state;
 
-		return r(GraphViewBase, {
-			...this.props,
+		const {
+			hideLiveVolumePeaks,
+			accommodateGraphAnimation,
+			peaks,
 
-			selected,
-			moved,
+			...props
+		} = this.props;
 
-			ref: this.graphViewRef,
+		return r(React.Fragment, [
+			!hideLiveVolumePeaks && r(Peaks, {
+				key: 'peaks',
+				nodes,
+				edges,
+				accommodateGraphAnimation,
+				peaks,
+			}),
 
-			nodes,
-			edges,
+			r(GraphViewBase, {
+				key: 'graph',
 
-			onSwapEdge: this.props.onSwapEdge,
-			onNodeMove: this.onNodeMove,
+				...props,
 
-			onSelectEdge: this.onSelectEdge,
+				selected,
+				moved,
 
-			onCreateEdge: this.onCreateEdge,
+				ref: this.graphViewRef,
 
-			onEdgeMouseDown: this.onEdgeMouseDown,
+				nodes,
+				edges,
 
-			renderNode: this.renderNode,
-			renderNodeText: this.renderNodeText,
+				onSwapEdge: this.props.onSwapEdge,
+				onNodeMove: this.onNodeMove,
 
-			renderEdge: this.renderEdge,
-			renderEdgeText: this.renderEdgeText,
+				onSelectEdge: this.onSelectEdge,
 
-			afterRenderEdge: this.props.afterRenderEdge && this.afterRenderEdge,
-		});
+				onCreateEdge: this.onCreateEdge,
+
+				onEdgeMouseDown: this.onEdgeMouseDown,
+
+				renderNode: this.renderNode,
+				renderNodeText: this.renderNodeText,
+
+				renderEdge: this.renderEdge,
+				renderEdgeText: this.renderEdgeText,
+
+				afterRenderEdge: this.props.afterRenderEdge && this.afterRenderEdge,
+			}),
+		]);
 	}
 }