Made searching and metric fills work.

client/app/scripts/charts/node-container.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { List as makeList } from 'immutable';
 import { GraphNode } from 'weaveworks-ui-components';
 
+import {
+  getMetricValue,
+  getMetricColor,
+} from '../utils/metric-utils';
 import { clickNode, enterNode, leaveNode } from '../actions/app-actions';
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { getNodeColor } from '../utils/color-utils';
+import MatchedResults from '../components/matched-results';
 import { GRAPH_VIEW_MODE } from '../constants/naming';
 
 class NodeContainer extends React.Component {
@@ -22,9 +28,21 @@ class NodeContainer extends React.Component {
     this.props.clickNode(nodeId, this.props.label, this.ref.getBoundingClientRect());
   };
 
+  renderAppendedInfo = () => {
+    const matchedMetadata = this.props.matches.get('metadata', makeList());
+    const matchedParents = this.props.matches.get('parents', makeList());
+    const matchedDetails = matchedMetadata.concat(matchedParents);
+    return (
+      <MatchedResults matches={matchedDetails} />
+    );
+  };
+
   render() {
-    const { rank, label, pseudo } = this.props;
-    console.log('rerender');
+    const {
+      rank, label, pseudo, metric
+    } = this.props;
+    const { hasMetric, height, formattedValue } = getMetricValue(metric);
+    const metricFormattedValue = !pseudo && hasMetric ? formattedValue : '';
 
     return (
       <GraphNode
@@ -39,7 +57,12 @@ class NodeContainer extends React.Component {
         isAnimated={this.props.isAnimated}
         contrastMode={this.props.contrastMode}
         forceSvg={this.props.exportingGraph}
+        searchTerms={this.props.searchTerms}
+        metricColor={getMetricColor(metric)}
+        metricFormattedValue={metricFormattedValue}
+        metricNumericValue={height}
         graphNodeRef={this.saveRef}
+        renderAppendedInfo={this.renderAppendedInfo}
         onMouseEnter={this.props.enterNode}
         onMouseLeave={this.props.leaveNode}
         onClick={this.handleMouseClick}
@@ -52,6 +75,7 @@ class NodeContainer extends React.Component {
 
 function mapStateToProps(state) {
   return {
+    searchTerms: [state.get('searchQuery')],
     exportingGraph: state.get('exportingGraph'),
     showingNetworks: state.get('showingNetworks'),
     currentTopology: state.get('currentTopology'),

client/app/scripts/components/matched-results.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import MatchedText from './matched-text';
+import { MatchedText } from 'weaveworks-ui-components';
 
 const SHOW_ROW_COUNT = 2;
 const MAX_MATCH_LENGTH = 24;
@@ -13,10 +12,12 @@ const Match = match => (
         {match.label}:
       </span>
       <MatchedText
+        noBorder
         text={match.text}
         match={match}
         maxLength={MAX_MATCH_LENGTH}
-        truncate={match.truncate} />
+        truncate={match.truncate}
+      />
     </div>
   </div>
 );

client/app/scripts/utils/metric-utils.js

@@ -23,7 +23,7 @@ const loadScale = scaleLog().domain([0.01, 100]).range([0, 1]);
 
 export function getMetricValue(metric) {
   if (!metric) {
-    return {height: 0, value: null, formattedValue: 'n/a'};
+    return { height: 0, value: null, formattedValue: 'n/a' };
   }
   const m = metric.toJS();
   const { value } = m;
@@ -35,7 +35,7 @@ export function getMetricValue(metric) {
     max = null;
   }
 
-  let displayedValue = Number(value).toFixed(1);
+  let displayedValue = Number(value);
   if (displayedValue > 0 && (!max || displayedValue < max)) {
     const baseline = 0.1;
     displayedValue = (valuePercentage * (1 - (baseline * 2))) + baseline;