import React from 'react'; import { connect } from 'react-redux'; import { Map as makeMap } from 'immutable'; import { hasSelectedNode as hasSelectedNodeFn } from '../utils/topology-utils'; import EdgeContainer from './edge-container'; class NodesChartEdges extends React.Component { render() { const { hasSelectedNode, highlightedEdgeIds, layoutEdges, layoutPrecision, searchNodeMatches = makeMap(), searchQuery, selectedNodeId } = this.props; return ( {layoutEdges.toIndexedSeq().map(edge => { const sourceSelected = selectedNodeId === edge.get('source'); const targetSelected = selectedNodeId === edge.get('target'); const highlighted = highlightedEdgeIds.has(edge.get('id')); const focused = hasSelectedNode && (sourceSelected || targetSelected); const blurred = !(highlightedEdgeIds.size > 0 && highlighted) && ((hasSelectedNode && !sourceSelected && !targetSelected) || !focused && searchQuery && !(searchNodeMatches.has(edge.get('source')) && searchNodeMatches.has(edge.get('target')))); return ( ); })} ); } } function mapStateToProps(state) { const currentTopologyId = state.get('currentTopologyId'); return { hasSelectedNode: hasSelectedNodeFn(state), highlightedEdgeIds: state.get('highlightedEdgeIds'), searchNodeMatches: state.getIn(['searchNodeMatches', currentTopologyId]), searchQuery: state.get('searchQuery'), selectedNodeId: state.get('selectedNodeId') }; } export default connect( mapStateToProps )(NodesChartEdges);