Addressed @foot's UI comments

client/app/scripts/charts/edge.js

@@ -17,7 +17,7 @@ class Edge extends React.Component {
   render() {
     const { id, path, highlighted, blurred, focused, scale } = this.props;
     const className = classNames('edge', { highlighted, blurred, focused });
-    const thickness = scale * (isContrastMode() ? 0.015 : 0.0075) * NODE_BASE_SIZE;
+    const thickness = scale * (isContrastMode() ? 0.02 : 0.01) * NODE_BASE_SIZE;
 
     // Draws the edge so that its thickness reflects the zoom scale.
     // Edge shadow is always made 10x thicker than the edge itself.

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

@@ -10,7 +10,7 @@ import { nodeAdjacenciesSelector, adjacentNodesSelector } from '../selectors/cha
 import { clickBackground } from '../actions/app-actions';
 import Logo from '../components/logo';
 import NodesChartElements from './nodes-chart-elements';
-import { getActiveTopologyOptions } from '../utils/topology-utils';
+import { getActiveTopologyOptions, zoomCacheKey } from '../utils/topology-utils';
 
 import { topologyZoomState } from '../selectors/nodes-chart-zoom';
 import { layoutWithSelectedNode } from '../selectors/nodes-chart-focus';
@@ -141,7 +141,7 @@ class NodesChart extends React.Component {
   cacheZoomState(state) {
     const zoomState = pick(state, ZOOM_CACHE_FIELDS);
     const zoomCache = assign({}, state.zoomCache);
-    zoomCache[this.props.topologyId] = zoomState;
+    zoomCache[zoomCacheKey(this.props)] = zoomState;
     return { zoomCache };
   }
 
@@ -177,7 +177,7 @@ function mapStateToProps(state) {
     forceRelayout: state.get('forceRelayout'),
     selectedNodeId: state.get('selectedNodeId'),
     topologyId: state.get('currentTopologyId'),
-    topologyOptions: getActiveTopologyOptions(state)
+    topologyOptions: getActiveTopologyOptions(state),
   };
 }
 

client/app/scripts/reducers/root.js

@@ -7,8 +7,15 @@ import ActionTypes from '../constants/action-types';
 import { EDGE_ID_SEPARATOR } from '../constants/naming';
 import { applyPinnedSearches, updateNodeMatches } from '../utils/search-utils';
 import { getNetworkNodes, getAvailableNetworks } from '../utils/network-view-utils';
-import { findTopologyById, getAdjacentNodes, setTopologyUrlsById, updateTopologyIds,
-  filterHiddenTopologies, addTopologyFullname, getDefaultTopology, graphExceedsComplexityThresh
+import {
+  findTopologyById,
+  getAdjacentNodes,
+  setTopologyUrlsById,
+  updateTopologyIds,
+  filterHiddenTopologies,
+  addTopologyFullname,
+  getDefaultTopology,
+  graphExceedsComplexityThresh
 } from '../utils/topology-utils';
 
 const log = debug('scope:app-store');

client/app/scripts/selectors/nodes-chart-zoom.js

@@ -1,12 +1,13 @@
 import { createSelector } from 'reselect';
-import { NODE_BASE_SIZE } from '../constants/styles';
 
+import { NODE_BASE_SIZE } from '../constants/styles';
+import { zoomCacheKey } from '../utils/topology-utils';
 
 const layoutNodesSelector = state => state.layoutNodes;
 const stateWidthSelector = state => state.width;
 const stateHeightSelector = state => state.height;
 const propsMarginsSelector = (_, props) => props.margins;
-const cachedZoomStateSelector = (state, props) => state.zoomCache[props.topologyId];
+const cachedZoomStateSelector = (state, props) => state.zoomCache[zoomCacheKey(props)];
 
 const viewportWidthSelector = createSelector(
   [

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

@@ -182,3 +182,7 @@ export function graphExceedsComplexityThresh(stats) {
   // Check to see if complexity is high. Used to trigger table view on page load.
   return (stats.get('node_count') + (2 * stats.get('edge_count'))) > 500;
 }
+
+export function zoomCacheKey(props) {
+  return `${props.topologyId}-${JSON.stringify(props.topologyOptions)}`;
+}

client/app/styles/_base.scss

@@ -487,7 +487,7 @@
 
     text {
       transform: scale($node-text-scale);
-      font-size: 12px;
+      font-size: 10px;
       dominant-baseline: middle;
       text-anchor: middle;
     }