Removes the metrics-feeder to keep things in sync.

Another temp fix.

client/app/scripts/charts/nodes-chart-elements.js

@@ -16,6 +16,7 @@ export default class NodesChartElements extends React.Component {
           layoutPrecision={props.layoutPrecision} />
         <NodesChartNodes layoutNodes={props.nodes} selectedNodeId={props.selectedNodeId}
           selectedMetric={props.selectedMetric}
+          topCardNode={props.topCardNode}
           highlightedNodeIds={props.highlightedNodeIds}
           hasSelectedNode={props.hasSelectedNode}
           adjacentNodes={props.adjacentNodes}

client/app/scripts/charts/nodes-chart-nodes.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import reactMixin from 'react-mixin';
+import { fromJS } from 'immutable';
 
 import NodeContainer from './node-container';
 
@@ -8,7 +9,7 @@ export default class NodesChartNodes extends React.Component {
   render() {
     const {adjacentNodes, highlightedNodeIds,
       layoutNodes, layoutPrecision, nodeScale, onNodeClick, scale,
-      selectedMetric, selectedNodeScale, selectedNodeId, topologyId} = this.props;
+      selectedMetric, selectedNodeScale, selectedNodeId, topologyId, topCardNode} = this.props;
 
     const zoomScale = scale;
 
@@ -32,11 +33,13 @@ export default class NodesChartNodes extends React.Component {
     };
 
     // TODO: think about pulling this up into the store.
-    const metric = node => (
-      node.get('metrics') && node.get('metrics')
+    const metric = node => {
+      const isHighlighted = topCardNode && topCardNode.details && topCardNode.id === node.get('id');
+      const sourceNode = isHighlighted ? fromJS(topCardNode.details) : node;
+      return sourceNode.get('metrics') && sourceNode.get('metrics')
         .filter(m => m.get('id') === selectedMetric)
-        .first()
-    );
+        .first();
+    };
 
     const nodesToRender = layoutNodes.toIndexedSeq()
       .map(setHighlighted)

client/app/scripts/charts/nodes-chart.js

@@ -153,6 +153,7 @@ export default class NodesChart extends React.Component {
             nodeScale={this.state.nodeScale}
             scale={this.state.scale}
             selectedNodeScale={this.state.selectedNodeScale}
+            topCardNode={this.props.topCardNode}
             topologyId={this.props.topologyId} />
         </svg>
       </div>

client/app/scripts/components/app.js

@@ -122,7 +122,8 @@ export default class App extends React.Component {
   }
 
   render() {
-    const {nodeDetails, controlPipe } = this.state;
+    const { nodeDetails, controlPipe } = this.state;
+    const topCardNode = nodeDetails.last();
     const showingDetails = nodeDetails.size > 0;
     const showingTerminal = controlPipe;
     // width of details panel blocking a view
@@ -160,6 +161,7 @@ export default class App extends React.Component {
           detailsWidth={detailsWidth}
           selectedNodeId={this.state.selectedNodeId}
           topMargin={topMargin}
+          topCardNode={topCardNode}
           selectedMetric={this.state.selectedMetric}
           forceRelayout={this.state.forceRelayout}
           topologyOptions={this.state.activeTopologyOptions}

client/app/scripts/components/node-details/node-details-health-item.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Sparkline from '../sparkline';
-import metricFeeder from '../../hoc/metric-feeder';
 import { formatMetric } from '../../utils/string-utils';
 
 function NodeDetailsHealthItem(props) {
@@ -17,4 +16,4 @@ function NodeDetailsHealthItem(props) {
   );
 }
 
-export default metricFeeder(NodeDetailsHealthItem);
+export default NodeDetailsHealthItem;