Polished the code.

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

@@ -64,8 +64,6 @@ class NodesChart extends React.Component {
 function mapStateToProps(state) {
   return {
     selectedNodeId: state.get('selectedNodeId'),
-    layoutZoomState: graphZoomStateSelector(state),
-    layoutZoomLimits: graphZoomLimitsSelector(state),
   };
 }
 

client/app/scripts/components/zoom-control.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Slider from 'rc-slider';
+import { scaleLog } from 'd3-scale';
+
+
+const CLICK_STEP = 0.05;
+const SLIDER_STEP = 0.001;
+
+const valueFromZoomScale = (props) => {
+  const { scale, minScale, maxScale } = props;
+  const value = scaleLog()
+    .domain([minScale, maxScale])
+    .range([0, 1])(scale);
+  // const value = Math.log(scale / minScale) /
+  //               Math.log(maxScale / minScale);
+  // return isNaN(value) ? 0 : value;
+  return value;
+};
+
+export default class ZoomControl extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = { value: valueFromZoomScale(props) };
+
+    this.handleZoomOut = this.handleZoomOut.bind(this);
+    this.handleZoomIn = this.handleZoomIn.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ value: valueFromZoomScale(nextProps)});
+  }
+
+  updateValue(value) {
+    const { minScale, maxScale, slideAction } = this.props;
+    slideAction(Math.exp(value * Math.log(maxScale / minScale)) * minScale);
+  }
+
+  handleZoomOut() {
+    this.updateValue(Math.max(0, this.state.value - CLICK_STEP));
+  }
+
+  handleZoomIn() {
+    this.updateValue(Math.min(1, this.state.value + CLICK_STEP));
+  }
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <div className="zoom-control-wrapper">
+        <span className="zoom-control">
+          <a className="zoom-in" onClick={this.handleZoomIn}><span className="fa fa-plus" /></a>
+          <Slider value={value} max={1} step={SLIDER_STEP} vertical onChange={this.updateValue} />
+          <a className="zoom-out" onClick={this.handleZoomOut}><span className="fa fa-minus" /></a>
+        </span>
+      </div>
+    );
+  }
+}

client/app/scripts/components/zoomable-canvas.js

@@ -7,7 +7,7 @@ import { event as d3Event, select } from 'd3-selection';
 import { zoom, zoomIdentity } from 'd3-zoom';
 
 import Logo from '../components/logo';
-import ZoomIndicator from '../components/zoom-indicator';
+import ZoomControl from '../components/zoom-control';
 import { cacheZoomState } from '../actions/app-actions';
 import { transformToString } from '../utils/transform-utils';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/zooming';
@@ -109,7 +109,7 @@ class ZoomableCanvas extends React.Component {
             {forwardTransform ? children(this.state) : children}
           </g>
         </svg>
-        {this.canChangeZoom() && <ZoomIndicator
+        {this.canChangeZoom() && <ZoomControl
           slideAction={this.handleSlide}
           minScale={this.state.minScale}
           maxScale={this.state.maxScale}

client/app/styles/_base.scss

@@ -1753,7 +1753,7 @@
 // Zoom indicator
 //
 
-.zoom-indicator-wrapper {
+.zoom-control-wrapper {
   color: $text-tertiary-color;
   padding: 5px 10px;
   border-radius: 5px;
@@ -1768,7 +1768,7 @@
   padding: 10px 0 5px;
   opacity: 0.9;
 
-  .zoom-indicator {
+  .zoom-control {
     display: flex;
     align-items: center;
     flex-direction: column;