diff --git a/components/graph/index.js b/components/graph/index.js index 6f32227..90b42aa 100644 --- a/components/graph/index.js +++ b/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 && ( diff --git a/components/graph/peaks.js b/components/graph/peaks.js index 0853697..c53a7ee 100644 --- a/components/graph/peaks.js +++ b/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(); diff --git a/components/graph/satellites-graph.js b/components/graph/satellites-graph.js index 8f4870d..05865e1 100644 --- a/components/graph/satellites-graph.js +++ b/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, + }), + ]); } }