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,65 @@
+import React from 'react';
+import Slider from 'rc-slider';
+import { scaleLog } from 'd3-scale';
+
+
+const SLIDER_STEP = 0.001;
+const CLICK_STEP = 0.05;
+
+// Returns a log-scale that maps zoom factors to slider values.
+const getSliderScale = ({ minScale, maxScale }) => (
+  scaleLog()
+    // Zoom limits may vary between different views.
+    .domain([minScale, maxScale])
+    // Taking the unit range for the slider ensures consistency
+    // of the zoom button steps across different zoom domains.
+    .range([0, 1])
+    // This makes sure the input values are always clamped into the valid domain/range.
+    .clamp(true)
+);
+
+export default class ZoomControl extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleZoomOut = this.handleZoomOut.bind(this);
+    this.handleZoomIn = this.handleZoomIn.bind(this);
+    this.getSliderValue = this.getSliderValue.bind(this);
+    this.toZoomScale = this.toZoomScale.bind(this);
+  }
+
+  handleChange(sliderValue) {
+    this.props.zoomAction(this.toZoomScale(sliderValue));
+  }
+
+  handleZoomOut() {
+    this.props.zoomAction(this.toZoomScale(this.getSliderValue() - CLICK_STEP));
+  }
+
+  handleZoomIn() {
+    this.props.zoomAction(this.toZoomScale(this.getSliderValue() + CLICK_STEP));
+  }
+
+  getSliderValue() {
+    const toSliderValue = getSliderScale(this.props);
+    return toSliderValue(this.props.scale);
+  }
+
+  toZoomScale(sliderValue) {
+    const toSliderValue = getSliderScale(this.props);
+    return toSliderValue.invert(sliderValue);
+  }
+
+  render() {
+    const value = this.getSliderValue();
+
+    return (
+      <div className="zoom-control-wrapper">
+        <a className="zoom-in" onClick={this.handleZoomIn}><span className="fa fa-plus" /></a>
+        <Slider value={value} max={1} step={SLIDER_STEP} vertical onChange={this.handleChange} />
+        <a className="zoom-out" onClick={this.handleZoomOut}><span className="fa fa-minus" /></a>
+      </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';
@@ -38,8 +38,8 @@ class ZoomableCanvas extends React.Component {
     };
 
     this.debouncedCacheZoom = debounce(this.cacheZoom.bind(this), ZOOM_CACHE_DEBOUNCE_INTERVAL);
+    this.handleZoomControlAction = this.handleZoomControlAction.bind(this);
     this.canChangeZoom = this.canChangeZoom.bind(this);
-    this.handleSlide = this.handleSlide.bind(this);
     this.zoomed = this.zoomed.bind(this);
   }
 
@@ -81,15 +81,15 @@ class ZoomableCanvas extends React.Component {
     }
   }
 
-  handleSlide(scale) {
-    const updatedState = this.cachableState({
-      scaleX: scale,
-      scaleY: scale,
-    });
-
+  handleZoomControlAction(scale) {
+    // Update the canvas scale (not touching the translation).
     this.svg.call(this.zoom.scaleTo, scale);
 
-    this.setState(updatedState);
+    // Update the scale state and propagate to the global cache.
+    this.setState(this.cachableState({
+      scaleX: scale,
+      scaleY: scale,
+    }));
     this.debouncedCacheZoom();
   }
 
@@ -109,8 +109,8 @@ class ZoomableCanvas extends React.Component {
             {forwardTransform ? children(this.state) : children}
           </g>
         </svg>
-        {this.canChangeZoom() && <ZoomIndicator
-          slideAction={this.handleSlide}
+        {this.canChangeZoom() && <ZoomControl
+          zoomAction={this.handleZoomControlAction}
           minScale={this.state.minScale}
           maxScale={this.state.maxScale}
           scale={this.state.scaleX}

client/app/styles/_base.scss

@@ -47,6 +47,16 @@
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
 }
 
+.overlay-wrapper {
+  background-color: fade-out($background-average-color, 0.1);
+  border-radius: 4px;
+  color: $text-tertiary-color;
+  display: flex;
+  font-size: 0.7rem;
+  padding: 5px;
+  position: absolute;
+}
+
 .btn-opacity {
   @extend .palable;
   opacity: $btn-opacity-default;
@@ -128,18 +138,13 @@
 }
 
 .footer {
-  padding: 5px;
-  position: absolute;
+  @extend .overlay-wrapper;
   bottom: 11px;
   right: 43px;
-  color: $text-tertiary-color;
-  background-color: $background-average-color;
-  font-size: 0.7rem;
-  display: flex;
 
   a {
-    color: $text-secondary-color;
     @extend .btn-opacity;
+    color: $text-secondary-color;
     cursor: pointer;
   }
 
@@ -1753,53 +1758,29 @@
 // Zoom indicator
 //
 
-.zoom-indicator-wrapper {
-  color: $text-tertiary-color;
-  padding: 5px 10px;
-  border-radius: 5px;
-  background-color: $background-average-color;
-  font-size: 0.875rem;
-  position: absolute;
-  text-align: right;
+.zoom-control-wrapper {
+  @extend .overlay-wrapper;
+  align-items: center;
+  flex-direction: column;
+  padding: 10px 10px 5px;
   bottom: 50px;
   right: 40px;
-  width: 40px;
-  height: auto;
-  padding: 10px 0 5px;
-  opacity: 0.9;
-
-  .zoom-indicator {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
 
   .zoom-in, .zoom-out {
     @extend .btn-opacity;
     color: $text-secondary-color;
     cursor: pointer;
-    font-size: 125%;
+    font-size: 150%;
   }
 
   .rc-slider {
     margin: 10px 0;
     height: 60px;
 
-    .rc-slider-step {
-      cursor: pointer;
-    }
-
-    .rc-slider-track {
-      background-color: $text-tertiary-color;
-    }
-
-    .rc-slider-rail {
-      background-color: $border-light-color;
-    }
-
-    .rc-slider-handle {
-      border-color: $text-tertiary-color;
-    }
+    .rc-slider-step { cursor: pointer; }
+    .rc-slider-track { background-color: $text-tertiary-color; }
+    .rc-slider-rail { background-color: $border-light-color; }
+    .rc-slider-handle { border-color: $text-tertiary-color; }
   }
 }