From c802c8c6c1ae1dbc93ab3f674a0c17368d093bce Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Wed, 1 Feb 2017 15:33:09 +0100
Subject: [PATCH] Addressed @foot's UI comments

---
 client/app/scripts/charts/edge.js                |  2 +-
 client/app/scripts/charts/nodes-chart.js         |  6 +++---
 client/app/scripts/reducers/root.js              | 11 +++++++++--
 client/app/scripts/selectors/nodes-chart-zoom.js |  5 +++--
 client/app/scripts/utils/topology-utils.js       |  4 ++++
 client/app/styles/_base.scss                     |  2 +-
 6 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js
index c18eb74c27..1deab2f041 100644
--- a/client/app/scripts/charts/edge.js
+++ b/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.
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 2b42bfa1dc..33a40fd732 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/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),
   };
 }
 
diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js
index 31a1532a97..3248c2eb68 100644
--- a/client/app/scripts/reducers/root.js
+++ b/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');
diff --git a/client/app/scripts/selectors/nodes-chart-zoom.js b/client/app/scripts/selectors/nodes-chart-zoom.js
index c9e8abe3a5..ca0db11dd4 100644
--- a/client/app/scripts/selectors/nodes-chart-zoom.js
+++ b/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(
   [
diff --git a/client/app/scripts/utils/topology-utils.js b/client/app/scripts/utils/topology-utils.js
index 5588c7e696..9a74856413 100644
--- a/client/app/scripts/utils/topology-utils.js
+++ b/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)}`;
+}
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index c2c64769a3..aaaea5f165 100644
--- a/client/app/styles/_base.scss
+++ b/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;
     }