Adds support for filtering node/table by relatives

Now that they are available in the summary data.
This commit is contained in:
Simon Howe
2016-08-09 18:20:43 +02:00
parent d06547e596
commit fc2fcfb298
5 changed files with 27 additions and 6 deletions

View File

@@ -158,7 +158,9 @@ export class NodeDetails extends React.Component {
<MatchedText text={details.label} match={nodeMatches.get('label')} />
</h2>
<div className="node-details-header-relatives">
{details.parents && <NodeDetailsRelatives relatives={details.parents} />}
{details.parents && <NodeDetailsRelatives
matches={nodeMatches.get('parents')}
relatives={details.parents} />}
</div>
</div>
</div>

View File

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { clickRelative } from '../../actions/app-actions';
import MatchedText from '../matched-text';
class NodeDetailsRelativesLink extends React.Component {
@@ -21,7 +22,7 @@ class NodeDetailsRelativesLink extends React.Component {
const title = `View in ${this.props.topologyId}: ${this.props.label}`;
return (
<span className="node-details-relatives-link" title={title} onClick={this.handleClick}>
{this.props.label}
<MatchedText text={this.props.label} match={this.props.match} />
</span>
);
}

View File

@@ -1,4 +1,5 @@
import React from 'react';
import { Map as makeMap } from 'immutable';
import NodeDetailsRelativesLink from './node-details-relatives-link';
@@ -20,7 +21,9 @@ export default class NodeDetailsRelatives extends React.Component {
}
render() {
let relatives = this.props.relatives;
let { relatives } = this.props;
const { matches = makeMap() } = this.props;
const limited = this.state.limit > 0 && relatives.length > this.state.limit;
const showLimitAction = limited || (this.state.limit === 0
&& relatives.length > this.DEFAULT_LIMIT);
@@ -31,7 +34,11 @@ export default class NodeDetailsRelatives extends React.Component {
return (
<div className="node-details-relatives">
{relatives.map(relative => <NodeDetailsRelativesLink {...relative} key={relative.id} />)}
{relatives.map(relative => (
<NodeDetailsRelativesLink
key={relative.id}
match={matches.get(relative.id)}
{...relative} />))}
{showLimitAction && <span className="node-details-relatives-more"
onClick={this.handleLimitClick}>{limitActionText}</span>}
</div>