Use GraphNode component for graph nodes.

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

@@ -1,33 +1,65 @@
 import React from 'react';
-import { Motion } from 'react-motion';
+import { connect } from 'react-redux';
+import { GraphNode } from 'weaveworks-ui-components';
 
-import { weakSpring } from 'weaveworks-ui-components/lib/utils/animation';
+import { clickNode, enterNode, leaveNode } from '../actions/app-actions';
+import { trackAnalyticsEvent } from '../utils/tracking-utils';
+import { getNodeColor } from '../utils/color-utils';
+import { GRAPH_VIEW_MODE } from '../constants/naming';
 
-import Node from './node';
+class NodeContainer extends React.Component {
+  saveRef = (ref) => {
+    this.ref = ref;
+  };
 
+  handleMouseClick = (nodeId, ev) => {
+    ev.stopPropagation();
+    trackAnalyticsEvent('scope.node.click', {
+      layout: GRAPH_VIEW_MODE,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+    this.props.clickNode(nodeId, this.props.label, this.ref.getBoundingClientRect());
+  };
 
-const transformedNode = (otherProps, { x, y, k }) => (
-  <g transform={`translate(${x},${y}) scale(${k})`}>
-    <Node {...otherProps} />
-  </g>
-);
-
-export default class NodeContainer extends React.PureComponent {
   render() {
-    const {
-      dx, dy, isAnimated, scale, ...forwardedProps
-    } = this.props;
-
-    if (!isAnimated) {
-      // Show static node for optimized rendering
-      return transformedNode(forwardedProps, { x: dx, y: dy, k: scale });
-    }
+    const { rank, label, pseudo } = this.props;
+    console.log('rerender');
 
     return (
-      // Animate the node if the layout is sufficiently small
-      <Motion style={{ x: weakSpring(dx), y: weakSpring(dy), k: weakSpring(scale) }}>
-        {interpolated => transformedNode(forwardedProps, interpolated)}
-      </Motion>
+      <GraphNode
+        id={this.props.id}
+        shape={this.props.shape}
+        label={this.props.label}
+        labelMinor={this.props.labelMinor}
+        stacked={this.props.stacked}
+        highlighted={this.props.highlighted}
+        color={getNodeColor(rank, label, pseudo)}
+        size={this.props.size}
+        isAnimated={this.props.isAnimated}
+        contrastMode={this.props.contrastMode}
+        forceSvg={this.props.exportingGraph}
+        graphNodeRef={this.saveRef}
+        onMouseEnter={this.props.enterNode}
+        onMouseLeave={this.props.leaveNode}
+        onClick={this.handleMouseClick}
+        x={this.props.x}
+        y={this.props.y}
+      />
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    exportingGraph: state.get('exportingGraph'),
+    showingNetworks: state.get('showingNetworks'),
+    currentTopology: state.get('currentTopology'),
+    contrastMode: state.get('contrastMode'),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  { clickNode, enterNode, leaveNode }
+)(NodeContainer);

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

@@ -148,7 +148,7 @@ class NodesChartElements extends React.Component {
   }
 
   renderNode(node) {
-    const { isAnimated, contrastMode } = this.props;
+    const { isAnimated } = this.props;
     return (
       <NodeContainer
         matches={node.get('matches')}
@@ -157,18 +157,17 @@ class NodesChartElements extends React.Component {
         focused={node.get('focused')}
         highlighted={node.get('highlighted')}
         shape={node.get('shape')}
-        stack={node.get('stack')}
+        stacked={node.get('stack')}
         key={node.get('id')}
         id={node.get('id')}
         label={node.get('label')}
         labelMinor={node.get('labelMinor')}
         pseudo={node.get('pseudo')}
         rank={node.get('rank')}
-        dx={node.get('x')}
-        dy={node.get('y')}
-        scale={node.get('scale')}
+        x={node.get('x')}
+        y={node.get('y')}
+        size={100 * node.get('scale')}
         isAnimated={isAnimated}
-        contrastMode={contrastMode}
       />
     );
   }

client/package.json

@@ -44,7 +44,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "2.2.4",
-    "weaveworks-ui-components": "0.11.8",
+    "weaveworks-ui-components": "0.11.14",
     "whatwg-fetch": "2.0.3",
     "xterm": "3.3.0"
   },

client/yarn.lock

@@ -8397,9 +8397,9 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-weaveworks-ui-components@0.11.8:
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.11.8.tgz#4e649e418f5fb1746b908cc4edaa77ebadaf75e8"
+weaveworks-ui-components@0.11.14:
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.11.14.tgz#5f72f8a5059bc9f28295b91164c17e0780906f9e"
   dependencies:
     classnames "2.2.5"
     d3-drag "1.2.1"